Sobre esta plantilla
Growth Decisions conserva el rastro de sus decisiones: el brief que hay detrás de landing page ocupa 11.164 caracteres. El color se limita a #FFFFFF de base, #0A0A0A para la tipografía y azul #006CD2 para los acentos y la página se compone en Inter. Se entrega como un único componente, y la captura se fija a 1468x1080 antes de escribir código. El movimiento se limita a transiciones de 0.16s, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo, lo bastante discreto para que el texto siga mandando. Tenlo abierto mientras escribes: el brief de 11.164 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de landing page va dirigido a equipos que ya conocen un único componente y solo necesitan dejar un único componente por escrito.
- Si la referencia solo es un punto de partida, los diseñadores pueden conservar un breakpoint de 821px y rehacer el resto del diseño de landing page.
- Escribe tu propio titular y luego rehace este diseño de landing page en un único componente con las medidas intactas.
Qué incluye
- La navegación es fina a propósito. La barra reúne la marca, los enlaces de la sección y un botón en #006CD2, medida en secciones de 100vh y pasos de espaciado de 18px, así nunca acaba convertida en una segunda cabecera. Las etiquetas son lo bastante cortas para caber en una línea a 821px, y el elemento activo se marca con peso y no con una píldora. Mantén la fila en una sola línea.
- Medios detrás del texto. El vídeo de 1468x1080 se reproduce en bucle durante 7,1s detrás del texto, silenciado y en línea, sin ninguna capa de tinte entre ambos. Exporta a 1468x1080 o más ancho y el recorte de cobertura sigue funcionando.
- Una familia, dos papeles. Las fuentes tienen papeles asignados y no se mezclan: Inter sostiene a la vez la línea display y la interfaz. Las cifras comparten la tipografía de interfaz, así estadísticas y etiquetas pertenecen al mismo sistema. Una sola familia con papeles claros gana a dos que compiten.
- Una fila, sin desplegables. Una acción por barra. La captura de la referencia es de 1468x1080.
Movimiento e interacción
El tiempo va en el brief
El presupuesto de animación es pequeño y explícito: 0.16s con la curva cubic-bezier(0.16, 1, 0.3, 1), aplicado a cambios de estado y no a entradas. El easing se especifica junto a la duración (0.16s), así que una reconstrucción no puede colar otra sensación sin avisar.
El bucle hace el trabajo ambiente
El movimiento ambiente viene del bucle de 7,1s en 1468x1080 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
Qué se sostiene para IA y SaaS
Cuenta las decisiones de este tipo de landing page y todas remiten a un único documento: 11.164 caracteres que nombran el marco en 1468x1080, el tipo y el ritmo. Growth Decisions enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
El orden detrás de landing page
Si tu página abre hoy con funciones, este es el orden que hay que copiar: navegación, el titular, la insignia de anuncio, la fila de cifras y el clip de fondo delante, el detalle de apoyo después y secciones de 100vh y pasos de espaciado de 18px marcando la distancia. Quien busca SaaS recibe la oferta antes que las opciones.
El reflujo de landing page
Si tus breakpoints se eligieron para que todo cupiera y no para cambiar la maquetación, lee esta ficha: la escala es fluida en lugar de escalonada, la maquetación cambia a 821px y la sección se mantiene a 100vh en lugar de una lista de elementos escondidos. El orden es lo último que cambia.
Preguntas frecuentes
¿Por qué la ficha nombra un único componente?
Growth Decisions se construyó en un único componente, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿El prompt de Growth Decisions es una especificación cerrada o un punto de partida?
El brief capturado ocupa 11.164 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Cómo se comportan las transiciones de 0.16s en Growth Decisions?
Las entradas y los cambios de estado se quedan en 0.16s con la curva cubic-bezier(0.16, 1, 0.3, 1) con una rama de movimiento reducido en el brief. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
