Créditoexplicadocon claridad.
Una experiencia web para explorar opciones y simular cuotas.
Crédito con descuento, con simulador y dos temas.
- Next.js 16
- React 19
- Tailwind 4
- Framer Motion
Créditoexplicadocon claridad.
Una experiencia web para explorar opciones y simular cuotas.
- Next.js 16
- React 19
- Tailwind 4
- Framer Motion
Crédito con descuento, con simulador y dos temas.
- Next.js 16
- React 19
- Tailwind 4
- Framer Motion
El simulador
¿Cuánto queda la cuota?
La primera pregunta de quien busca crédito es simple: ¿cuánto voy a pagar por mes? La página responde antes de cualquier registro. Arrastra el monto y el plazo: la cuota, el total y los intereses cambian al instante, con la misma cuenta del sitio.
Cuota mensualR$ 439,68
- Total a pagar
- R$ 21.104,88
- Intereses del período
- R$ 6.104,88
- Tasa mensual
- 1,49%
A dónde va el dinero
La cuenta es la del componente del sitio (simulator-section.tsx): cuota fija con 1,49% al mes, la tasa de ejemplo de la landing. Es una simulación, sin análisis de crédito.
De la pregunta a la simulación, en pocos pasos.
Monto y plazo en una interfaz interactiva, con versiones clara y oscura.
Una landing de crédito tiene que llevar a la persona por un camino corto: entender, simular, confiar y contactar. La página tiene seis partes, y una columna de puntos al costado muestra en cuál está el visitante, un clic lleva directo a cualquiera.
Las partes y los puntos son los de la landing (page.tsx y navigation-dots.tsx); las pantallas son capturas reales, en el tema oscuro.
Dos temas
Claro de día, oscuro de noche.
El sitio tiene las dos versiones completas, y un botón de sol y luna cambia entre ellas; también sigue lo que ya usa el aparato de la persona. Elige una parte y arrastra el asa: es la misma pantalla, cortada entre los dos temas.
OscuroClaroLos temas son de next-themes, con el logo correcto para cada fondo (lib/brand.ts). Las 15 pantallas son capturas reales de la landing; el contacto muestra datos de ejemplo de la plantilla.
El movimiento
Una página que se mueve contigo.
Las páginas de bancos suelen ser quietas y frías. Esta tiene movimiento en cada parte, siempre con una función: llevar la vista al llamado, mostrar que el número es real, guiar la lectura. Toca o pasa el mouse por cada tarjeta para ver el efecto.
- Palabras que entran
El título llega palabra por palabra, saliendo del desenfoque.
components/hero-section.tsx - Partículas arriba
Puntos de luz suben despacio detrás de la apertura.
components/hero-section.tsx - Tarjeta que se inclina
La tarjeta de ventaja sigue al puntero, como una placa de vidrio.
components/advantages-section.tsx - Número que sube
El valor cuenta desde cero cuando aparece en pantalla.
components/simulator-section.tsx - Línea del paso a paso
Los cuatro pasos se unen con una línea que crece con el desplazamiento.
components/how-it-works-section.tsx - Puntos de navegación
Al costado, los puntos muestran en qué parte está la persona y llevan a cada una.
components/navigation-dots.tsx
Los efectos son los de la landing, hechos con Framer Motion; aquí se rehicieron en miniatura para caber en las tarjetas.
Las dudas
La respuesta antes de la llamada.
Quien piensa en un crédito con descuento en nómina llega con las mismas preguntas: quién puede, cuánto cuesta, cuánto tarda. La página responde cada una en su texto, para que la persona llegue al contacto ya decidida.
Las dudas de quien busca crédito
Atención · Gestão de Financiamentos
Cliente¿Quién puede contratar el crédito?
Gestão de FinanciamentosJubilados y pensionados de la seguridad social, servidores públicos federales, estatales y municipales y empleados de empresas privadas con convenio, con margen disponible.
Preguntas y respuestas son el texto de la landing (faq-section.tsx), resumido; las condiciones son las de ejemplo de la plantilla.
Las tecnologías
De qué está hecho, pieza por pieza
Una landing de crédito hecha con Next.js: cada parte de la página es una pieza propia, el movimiento viene de Framer Motion y los dos temas cambian con un botón. Elige una pieza para ver qué hace aquí y en qué archivo está.
9tecnologías, en 3 capas
Base del sitio
Visual y movimiento
Medición
Sitios y experiencias webSouza Paiol