Esta documentação descreve a arquitetura de handoff entre o Site público, os Fluxos de Empréstimos e a Área Logada FortCard. O projeto usa uma aplicação Vite com React/MUI e separa responsabilidades por superfície. src/site concentra a experiência pública, src/plataforma concentra as jornadas FortCard, src/shared reúne contratos e elementos reutilizáveis, src/aplicacao faz a composição e src/rotas mantém o contrato de navegação.

​
Como usar esta documentação

Ao executar npm run dev, o projeto abre duas abas no navegador:
  • aplicação local, com as telas navegáveis;
  • documentação Mintlify, com o handoff técnico.
Ela organiza execução, arquitetura, rotas, fluxos, pontos de integração, dados demonstrativos, autofill, assets, banners e white label em uma navegação única. Use a aplicação local para validar o comportamento visual e esta documentação para entender o contrato entre páginas públicas, backend e jornadas FortCard.

​
Visão rápida: novo parceiro white label

Quando um novo parceiro ou lojista contratar a solução, o fluxo esperado é:
  1. O parceiro informa domínio ou subdomínio, marca, cores, favicon, banners e produtos que deseja oferecer.
  2. A FortCard configura essa origem pública no ambiente de publicação.
  3. O domínio ou subdomínio do parceiro aponta para o ambiente definido pela FortCard.
  4. Ao acessar esse endereço, o Site identifica o host público e carrega a configuração visual correspondente.
  5. O front mostra somente a marca, banners e produtos permitidos para aquela origem.
  6. Quando a pessoa inicia uma simulação, o front envia o contexto público da origem e o produto escolhido para o backend.
  7. O backend revalida o host, confirma o parceiro e resolve os dados operacionais FortCard antes de criar ou avançar uma proposta.
Essa separação é importante: o front prepara a experiência pública e passa contexto, mas não autoriza lojista, não guarda credenciais e não chama a API FortCard diretamente. Campos como loja, lojista, produto operacional, condição comercial, usuário, senha e token pertencem ao backend. Para entender esse fluxo em detalhe, leia primeiro Modelos de adoção, depois Entrada e identificação do parceiro e Visão geral da integração.

​
Leitura rápida

​
Escopo

A entrega contém:
  • página inicial;
  • páginas de produto para empréstimo pessoal, consignado CLT e antecipação salarial;
  • termos, privacidade e contato;
  • fluxo de empréstimo pessoal;
  • fluxo de consignado CLT;
  • fluxo de antecipação salarial;
  • Área Logada;
  • tema FortCard em Material UI;
  • componentes compartilhados;
  • dados demonstrativos documentados;
  • otimização de banners públicos.

​
Fora do escopo

Não fazem parte da entrega:
  • backend;
  • autenticação real;
  • API de crédito;
  • painel administrativo;
  • CMS;
  • integração bancária real.

​
Superfícies entregues

​
Fonte de verdade

  • Rotas: src/rotas/routes.json.
  • Tema: src/shared/tema/fortTokens.ts e src/shared/tema/fortTheme.ts.
  • Marca pública: src/shared/marca/tenantConfig.ts.
  • Banners públicos: src/site/banner-assets.json.
  • Dados demonstrativos removíveis: src/shared/dados/mock-boundary.json.

​
Arquitetura de runtime

O Site público usa o domínio ou subdomínio observado para obter uma configuração pública de tenant. Essa configuração pode definir a marca FORT exibida, a origem comercial, os banners e os produtos habilitados. Ela não concede acesso operacional e não contém credenciais. Os Fluxos de Empréstimos e a Área Logada permanecem FortCard. Ao sair de uma página pública para uma jornada, o front envia somente o contexto comercial público e o produto escolhido. O backend valida novamente o host em uma allowlist, resolve os dados operacionais FortCard e decide o que pode seguir para a proposta. Consulte entrada e identificação do parceiro antes de conectar um novo domínio ou parceiro.

​
Caminho recomendado

  1. Rode npm ci e npm run dev na raiz do projeto.
  2. Abra a aba da aplicação para navegar pelas telas.
  3. Abra a aba do Mintlify para consultar a documentação técnica.
  4. Leia estrutura e rotas.
  5. Consulte modelos de adoção para escolher o arranjo adequado.
  6. Use entrada e identificação do parceiro para configurar o contrato público de origem.
  7. Use contratos do backend da aplicação para mapear os endpoints próprios necessários.
  8. Use mapa de dados e dados demonstrativos e autofill para identificar o que sai de mock e o que entra por API.
  9. Se houver novo cliente, siga logos, cores e banners.
  10. Antes de publicar uma alteração, rode npm run quality.