Página de Aterrizaje Enmarcada de Fintech Solv — Habilidad de Reconstrucción

1. Filosofía de diseño

Construye la página como una demo de producto pulida colocada dentro de un "lienzo de navegador sin bordes" suavemente redondeado, no como un sitio web corporativo de borde a borde. El contraste proviene de tres sistemas que trabajan juntos:

Moderación editorial: titulares grandes grotescos, texto corto, amplio espacio vacío y pocos colores.
Tactilidad del producto: controles en forma de píldora, mini interfaces incrustadas, números en vivo, controles deslizantes, acordeones y fragmentos de tablero.
Movimiento cinematográfico suave: el contenido no rebota ni vuela. Se resuelve a partir de desenfoque, baja opacidad y un desplazamiento vertical modesto con una curva de ease-out, y luego permanece quieto.

La página debe sentirse tranquila en reposo y receptiva durante la interacción. El movimiento es una herramienta de jerarquía, no una decoración.

2. Lo que se observa directamente vs. se infiere

Observado directamente

Una captura de escritorio de 22.38 segundos a 60 fps y 2272×1440.
Un fondo fotográfico fijo de bosque que rodea un shell de página redondeado.
Superficies blancas, oliva, lima-ácido, azul pálido, lavanda pálido, gris y fotográficas.
Coreografía de carga del héroe con desenfoque + desvanecimiento + traslación vertical.
Desplazamiento vertical suave con un pulgar de desplazamiento de lima estrecho en el borde derecho del shell de la página.
Revelaciones de secciones que usan eliminación de desenfoque, opacidad y movimiento ascendente corto.
Un carril de logotipos horizontal.
Una calculadora en vivo con un pulgar de rango cuadrado y una estimación de financiamiento en tiempo real.
Un acordeón que intercambia la respuesta abierta con altura animada e iconos de más/menos.
Una imagen testimonial con texto de cita y puntos de paginación.
Tres tarjetas de artículo, una sección CTA centrada y un pie de página oscuro incrustado.
Sin secuencia de scroll-jacking o clavada horizontal obvia.

Inferencia de alta confianza

Framer Motion, GSAP ScrollTrigger o un sistema de revelación impulsado por intersección similar.
Una capa de desplazamiento suave tipo Lenis o un desplazamiento de trackpad/navegador muy suave.
Un marquee CSS duplicado para el carril de logotipos.
Una sola familia grotesca moderna; probablemente en el vecindario de Suisse/Neue Haas/Aeonik. La identidad exacta de la fuente no se puede recuperar solo de la captura.
El comportamiento en tableta/móvil no se muestra. Las reglas responsivas a continuación son requisitos de implementación diseñados para preservar la calidad del escritorio.

3. Sistema visual

3.1 Tokens de color

Estos valores se muestrean o reconstruyen visualmente a partir de la captura. Úsalos como la paleta de implementación canónica.

:root {
  /* Núcleo */
  --ink: #273000;          /* oliva oscuro muestreado; texto FAQ/pie de página */
  --ink-strong: #1f2700;   /* oliva más profundo para controles de alto contraste */
  --acid: #ddff5a;         /* lima de acento/calculadora muestreado */
  --acid-soft: #efffb0;    /* resplandor CTA / campos resaltados sutiles */
  --paper: #ffffff;
  --paper-warm: #fbfbf7;

  /* Tarjetas de soporte */
  --sky: #cfe7e9;          /* azul pálido muestreado */
  --lavender: #d9def8;     /* lavanda pálida muestreada */
  --mist: #efeee9;         /* chips, píldora de declaración de logotipo */
  --line: rgba(39, 48, 0, 0.14);
  --line-on-dark: rgba(221, 255, 90, 0.16);

  /* Texto */
  --text-primary: #273000;
  --text-secondary: #74756d;
  --text-on-dark: #ddff5a;
  --white-muted: rgba(255, 255, 255, 0.72);

  /* Cristal héroe */
  --glass-dark: rgba(48, 43, 39, 0.48);
  --glass-light: rgba(255, 255, 255, 0.82);
  --hero-scrim: linear-gradient(
    180deg,
    rgba(20, 24, 10, 0) 42%,
    rgba(20, 24, 10, 0.24) 68%,
    rgba(20, 24, 10, 0.72) 100%
  );
}

Reglas de uso del color

Usa --paper para aproximadamente el 65–75% de la superficie de la página.
Usa --ink para una sección grande y el pie de página, no para cada tarjeta.
Reserva --acid para las llamadas a la acción principales, la calculadora, la tipografía de preguntas frecuentes, el pulgar de desplazamiento personalizado y los chips de estado pequeños.
No uses más de un color de soporte pálido en un componente pequeño. Una tarjeta es blanca, azul, lavanda, lima, oliva o fotográfica, no un gradiente multicolor.
Evita el negro puro para el texto y los controles. El negro oliva es una parte importante del carácter original.
La foto del bosque detrás del shell debe permanecer lo suficientemente apagada como para que el shell de la página sea siempre dominante. Agrega un lavado cian/crema sutil si es necesario.

3.2 Tipografía

Tipo de letra

La captura usa una neo-grotesca neutral con espaciado compacto y geometría suave. Usa esta pila:

font-family: "Suisse Intl", "Neue Haas Grotesk Text", "Inter", "Helvetica Neue", Arial, sans-serif;

Para una implementación de código abierto, usa Inter Tight para visualización e Inter para el cuerpo. No introduzcas una familia secundaria serif o monoespaciada.

Sistema de pesos

Visualización: 400–500. El tipo grande no es pesado.
Encabezado de sección: 400–500.
Cuerpo: 400.
Énfasis dentro del cuerpo: 600.
Botones/navegación: 500–600.
Lectura numérica grande: 500.

Escala tipográfica de escritorio

:root {
  --fs-hero: clamp(3.75rem, 4.35vw, 5.15rem);       /* ~60–82px */
  --fs-section-xl: clamp(3rem, 3.4vw, 4.25rem);    /* ~48–68px */
  --fs-section: clamp(2.5rem, 2.8vw, 3.65rem);     /* ~40–58px */
  --fs-card-title: clamp(2rem, 2.2vw, 3rem);       /* ~32–48px */
  --fs-quote: clamp(1.75rem, 2vw, 2.75rem);        /* ~28–44px */
  --fs-body-lg: 1.25rem;                           /* 20px */
  --fs-body: 1rem;                                 /* 16px */
  --fs-small: 0.875rem;                            /* 14px */
}

Altura de línea y tracking

Títulos héroe/grandes: line-height: 0.96–1.02, letter-spacing: -0.045em.
Encabezados de sección: line-height: 0.98–1.05, letter-spacing: -0.04em.
Títulos de tarjetas: line-height: 1.0–1.08, letter-spacing: -0.035em.
Cuerpo: line-height: 1.42–1.55, letter-spacing: -0.01em.
Botones/navegación: line-height: 1, letter-spacing: -0.01em.
Valores grandes de moneda: letter-spacing: -0.055em; usa números tabulares.

.numeric {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.055em;
}

Reglas de longitud de línea

Cuerpo del héroe: 42–54 caracteres.
Cuerpo de sección: 48–64 caracteres.
Respuesta de preguntas frecuentes: 62–76 caracteres.
No dejes que un encabezado de visualización supere las 14–18 palabras o más de tres líneas en móvil.

3.3 Espaciado y ritmo de cuadrícula

Usa una base de 4px, con la mayoría del espaciado visible en múltiplos de 8.

:root {
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
}

Mediciones del shell de escritorio

De la captura de 2272×1440:

Ancho del shell de la página: aproximadamente 90vw.
Margen exterior horizontal: aproximadamente 5vw.
Margen exterior visible superior/inferior: aproximadamente 3–3.5vh.
Radio de esquina del shell: 28–32px.
Relleno de sección interna: 56–64px izquierda/derecha.
Relleno de sección vertical grande: 96–144px.
Espacio entre tarjetas principales: 20–28px.
Separadores finos: 1px con opacidad del 12–16%.

Cuadrícula

Usa una cuadrícula de 12 columnas dentro del shell.

.section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.75rem);
}

Proporciones de composición:

Contenido del héroe: 6–7 columnas izquierdas; tarjeta de tablero flotante: 3 columnas derechas.
Resumen del producto: 5 columnas de copia; módulos visuales 6–7 columnas.
Trío de características: aproximadamente 3 / 3 / 4.5 columnas, con la tarjeta fotográfica más ancha.
Calculadora: 5.5 / 5.5 columnas con un espacio central generoso.
Preguntas frecuentes: 5 / 7 columnas.
Artículos: tarjetas iguales de 4 columnas.
Pie de página: bloque de marca 4 columnas; navegación/contacto/ubicación/idiomas llenan el resto.

3.4 Convenciones de radio

:root {
  --radius-shell: 2rem;      /* 32px */
  --radius-section: 1.5rem;  /* 24px */
  --radius-card: 1.25rem;    /* 20px */
  --radius-ui: 1rem;         /* 16px */
  --radius-chip: 999px;
}

Reglas:

Shell de página exterior: 28–32px.
Tarjetas grandes de medios y sección: 20–24px.
Tarjetas de mini tablero: 14–18px.
Botones, etiquetas, navegación segmentada y chips de declaración: píldora completa.
Evita mezclar muchos radios arbitrarios. Usa solo estos cinco valores.

3.5 Sombra y elevación

El original se basa más en el contraste y el desenfoque que en sombras obvias.

:root {
  --shadow-shell: 0 24px 70px rgba(26, 34, 12, 0.18);
  --shadow-float: 0 18px 50px rgba(25, 31, 8, 0.18);
  --shadow-ui: 0 8px 24px rgba(25, 31, 8, 0.10);
}

El shell de la página recibe una sombra grande y suave.
El tablero flotante del héroe recibe una sombra suave mediana.
La mayoría de las tarjetas de características no tienen sombra; usa borde o separación de color.
Nunca uses sombras negras nítidas o múltiples sombras apiladas.

4. Arquitectura de diseño

4.1 Lienzo global

El fondo del bosque permanece fijo mientras el shell de contenido redondeado se desplaza.

html {
  background: #b9d9d8;
}

body {
  margin: 0;
  color: var(--text-primary);
  background:
    linear-gradient(90deg, rgba(174, 219, 224, 0.34), rgba(250, 249, 218, 0.34)),
    url('/images/forest-background.avif') center / cover fixed;
}

.page-shell {
  width: min(90vw, 132rem);
  margin: 3.25vh auto;
  border-radius: var(--radius-shell);
  overflow: clip;
  background: var(--paper);
  box-shadow: var(--shadow-shell);
  position: relative;
}

No pongas un borde pesado alrededor del shell. El contraste contra el fondo es suficiente.

4.2 Orden de las secciones

Héroe / navegación
Chip de declaración del cliente + carril de logotipos en bucle
Resumen del producto — título/copia a la izquierda, dos tarjetas de historia de producto a la derecha
Trío de características de capital de crecimiento
Calculadora de tarifas transparente
Acordeón de preguntas frecuentes
Testimonial de medios/carrusel
Artículos recientes
CTA de experto en financiamiento
Pie de página oscuro incrustado

4.3 Composición del héroe

Altura: min(92svh, 82rem) en escritorio; mínimo 760px.
Imagen a sangre dentro del shell.
Navegación superior flota sobre la imagen.
Copia anclada en la parte inferior izquierda.
Tarjeta de producto/tablero anclada en la parte inferior derecha.
Agrega una cortina oscura inferior para legibilidad y una superposición cálida muy sutil sobre la foto.

.hero {
  min-height: min(92svh, 82rem);
  position: relative;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  z-index: -1;
}

4.4 Navegación

El escritorio consta de tres grupos independientes:

Izquierda: una píldora oscura translúcida que contiene 3 enlaces.
Centro: logotipo blanco.
Derecha: una píldora de cuenta oscura translúcida más un botón de menú circular separado.

Usa backdrop-filter: blur(14px) y una superficie semitransparente. Mantén la altura de navegación de 58–64px.

En anchos por debajo de 900px:

Oculta la píldora de enlaces izquierda.
Mantén el logotipo centrado.
Mantén una acción principal y el icono de menú.
Asegúrate de que el logotipo permanezca ópticamente centrado, no desplazado matemáticamente por controles laterales desiguales.

4.5 Carril de logotipos

Sección blanca.
Chip de declaración centrado sobre los logotipos.
Logotipos en un carril recortado horizontalmente con contenido duplicado.
El tamaño del logotipo debe normalizarse visualmente, no establecerse en anchos brutos idénticos.
Usa tratamiento en escala de grises/oliva y opacidad reducida para marcas seleccionadas.

4.6 Resumen del producto

Gran título de dos líneas a la izquierda.
Dos botones en forma de píldora directamente debajo.
Dos párrafos cortos; las primeras palabras de cada párrafo están en seminegrita.
El lado derecho usa dos tarjetas de diferentes colores, desplazadas verticalmente para crear asimetría.
La tarjeta oscura es más estrecha/alta que la tarjeta azul pálido y contiene una mini interfaz de producto.

4.7 Trío de características de crecimiento

El encabezado de la sección abarca la mayor parte de la fila, con una pequeña píldora "Más información" delineada alineada a la derecha.
Tres tarjetas:
1. Tarjeta fotográfica/gradiente verde suave con interfaz de usuario blanca incrustada.
2. Tarjeta lavanda con un panel de resumen de saldo.
3. Tarjeta fotográfica ancha con un gran título blanco y superposición de copia inferior.
Las tarjetas comparten altura y radio, pero no ancho.

4.8 Calculadora

Sección blanca con gran espacio en blanco arriba y abajo.
Izquierda: título, descripción de 2–3 líneas, CTA de píldora oscura.
Derecha: tarjeta de color lima-ácido con encabezado, divisor, valor de moneda, control de rango, divisor, estimación de financiamiento.
La tarjeta de la calculadora es aproximadamente cuadrada y no debe volverse más ancha de 650px.

4.9 Preguntas frecuentes

Sección de oliva oscuro a ancho completo.
Columna izquierda: título de lima y resumen.
Columna derecha: cuatro filas de acordeón.
Una respuesta está abierta a la vez.
Las líneas separadoras de filas son extremadamente sutiles.
El más se convierte en menos sin rotar todo el contenedor del icono.

4.10 Testimonial

Tarjeta fotográfica a ancho completo directamente debajo de las preguntas frecuentes.
Retrato grande / imagen fija de video.
El primer plano borroso en la parte inferior de la imagen es parte de la fotografía, no un desenfoque de interfaz.
La cita y la atribución se asientan sobre un gradiente más oscuro en la parte inferior izquierda.
Dos pequeños puntos/botones de paginación en la parte inferior derecha.
Trátalo estructuralmente como un carrusel, aunque solo una transición de diapositiva sea visible en la grabación.

4.11 Artículos

Sección blanca con título a la izquierda y pequeña acción "Mostrar todo" a la derecha.
Tres tarjetas iguales.
Cada tarjeta usa una imagen 16:9 o ligeramente más alta con un gradiente oscuro en la parte inferior y un título de artículo blanco.
Los títulos son cortos y están anclados en la parte inferior izquierda.

4.12 CTA

Contenido centrado en una sección alta.
El fondo pasa de blanco en la parte superior a un color lima muy pálido en la parte inferior.
Título: dos líneas, ancho máximo alrededor de 520–620px.
Grupo pequeño de avatares de expertos y píldora principal oscura.
Mantén aproximadamente 120–180px de espacio de respiro superior e inferior.

4.13 Pie de página

El fondo de CTA continúa detrás del pie de página.
El pie de página en sí es un rectángulo redondeado de oliva oscuro incrustado con un margen exterior de 24–32px.
Marca en la parte superior izquierda, navegación en la parte superior derecha, área inferior de contacto/ubicación/idiomas, círculos sociales en la parte inferior izquierda.
El pie de página debe sentirse como un panel de tablero compacto, no como un pie de página legal tradicional de borde a borde.

5. Comportamiento responsivo

La captura no muestra estados responsivos. Implementa lo siguiente para preservar la intención.

5.1 Puntos de interrupción

// tailwind.config.ts
screens: {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}

5.2 Escritorio ≥ 1200px

Mantén el shell de 90vw y todas las composiciones de múltiples columnas.
Usa un relleno horizontal interno de 56–64px.
Héroe

…

[truncado para traducción]

Preguntar en tu IA favorita

Documentación