Dividiria a primeira pagina em 3 partes

<Main>
  <Topo>
    <Logo src={LogoSrc} />
    <Image src={ImageSrc} />
  </Topo>
  <Section>
    <Title text="Dividindo o peso." />
    <Title text="Dividindo a jornada." />
    <Text>
      Na <Bold>Cora</Bold> não tem burocracia, o seu tempo é para cuidar do seu negócio.
    </Text>
  </Section>
  <Btns>
    <Btn {...styleAbrirConta} onClick={registerFunction}>
      Abrir conta em 5 minutos <Arrow />
    </Btn>
    <Btn {...styleLogin} onClick={loginFunction}>
      Login
    </Btn>
  </Btns>
</Main>

As proximas faria algo como (com suas variações, mas usando basicamente os mesmos componentes)

<Main>
  <ProgressBar progress={1} />
  <div className="container-questions">
    <SubTitle text={props.subtitle || "Vamos começar?"} />
    <Title text={props.subtitle || "Qual seu nome completo?"} />
  </div>
  <Input onChange={handleNameChange} />
  <div className="container-btn-questions">
    <Btn {...styleBtnQuestions} disabled={emptyName} onClick={nextFunction}>
      Proximo <Arrow />
    </Btn>
  </div>
</Main>

E a de finalização seria algo próximo a primeira.

Claro que tem que ser levado em consideração várias variáveis, como por exemplo se vamos separar componentes por página ou é mais interessante existir vários componentes globais?

Eu acho que no caso de alguns componentes como o <Main> e <Btn> é mais interessante serem algo que pode ser usado em várias páginas, <Logo> depende da interface do resto do site.