Créditoexplicadocom clareza.
Uma experiência web para explorar opções e simular parcelas.
Crédito consignado com simulador e dois temas.
- Next.js 16
- React 19
- Tailwind 4
- Framer Motion
Créditoexplicadocom clareza.
Uma experiência web para explorar opções e simular parcelas.
- Next.js 16
- React 19
- Tailwind 4
- Framer Motion
Crédito consignado com simulador e dois temas.
- Next.js 16
- React 19
- Tailwind 4
- Framer Motion
O simulador
Quanto fica a parcela?
A primeira pergunta de quem procura crédito é simples: quanto vou pagar por mês? A página responde antes de qualquer cadastro. Arraste o valor e o prazo: a parcela, o total e os juros mudam na hora, com a mesma conta do site.
Parcela mensalR$ 439,68
- Total a pagar
- R$ 21.104,88
- Juros no período
- R$ 6.104,88
- Taxa ao mês
- 1,49%
Para onde vai o dinheiro
A conta é a do componente do site (simulator-section.tsx): parcela fixa com 1,49% ao mês, a taxa de exemplo da landing. É uma simulação, sem análise de crédito.
Da pergunta à simulação, com poucos passos.
Valor e prazo em uma interface interativa, com versões clara e escura.
Uma landing de crédito precisa levar a pessoa por um caminho curto: entender, simular, confiar e chamar. A página tem seis partes, e uma coluna de pontos na lateral mostra em qual delas o visitante está, um clique leva direto a qualquer uma.
As partes e os pontos são os da landing (page.tsx e navigation-dots.tsx); as telas são capturas reais, no tema escuro.
Dois temas
Claro de dia, escuro à noite.
O site tem as duas versões completas, e um botão de sol e lua troca entre elas; ele também segue o que o aparelho da pessoa já usa. Escolha uma parte e arraste a alça: é a mesma tela, cortada entre os dois temas.
EscuroClaroOs temas são do next-themes, com a logo certa para cada fundo (lib/brand.ts). As 15 telas são capturas reais da landing; o contato mostra dados de exemplo do modelo.
O movimento
Uma página que se mexe com você.
Página de banco costuma ser parada e fria. Esta tem movimento em cada parte, sempre com uma função: chamar o olho para a chamada, mostrar que o número é de verdade, guiar a leitura. Toque ou passe o mouse em cada cartão para ver o efeito tocar.
- Palavras que entram
O título chega palavra por palavra, saindo do desfoque.
components/hero-section.tsx - Partículas no topo
Pontos de luz sobem devagar atrás da abertura.
components/hero-section.tsx - Cartão que inclina
O cartão de vantagem acompanha o ponteiro, como uma placa de vidro.
components/advantages-section.tsx - Número que sobe
O valor conta a partir do zero quando aparece na tela.
components/simulator-section.tsx - Linha do passo a passo
Os quatro passos se ligam por uma linha que cresce com a rolagem.
components/how-it-works-section.tsx - Pontos de navegação
Na lateral, os pontos mostram em que parte a pessoa está e levam a cada uma.
components/navigation-dots.tsx
Os efeitos são os da landing, feitos com Framer Motion; aqui eles foram refeitos em miniatura para caber nos cartões.
As dúvidas
A resposta antes da ligação.
Quem pensa em crédito consignado chega com as mesmas perguntas: quem pode, quanto custa, quanto tempo leva. A página responde cada uma no texto dela, para a pessoa chegar no contato já decidida.
As dúvidas de quem procura crédito
Atendimento · Gestão de Financiamentos
ClienteQuem pode contratar o crédito consignado?
Gestão de FinanciamentosAposentados e pensionistas do INSS, servidores públicos federais, estaduais e municipais e funcionários de empresas privadas conveniadas, com margem consignável disponível.
Perguntas e respostas são o texto da landing (faq-section.tsx), resumido; as condições são as de exemplo do modelo.
As tecnologias
Do que é feito, peça por peça
Uma landing de crédito feita com Next.js: cada parte da página é uma peça própria, o movimento vem do Framer Motion e os dois temas trocam com um botão. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
9tecnologias, em 3 camadas
Base do site
Visual e movimento
Medição
Sites e experiências webSouza Paiol