Sobre esta plantilla
Tech-Forward muestra una forma de construir este tipo de sección hero para un producto fintech y publica las instrucciones que lo generaron. El titular dice “One Card, Zero Limits. Worldwide”, y el orden de sección hero gira alrededor de esa línea. El color se limita a blanco #FDFBFA de base y la página se compone en Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 1464x1080 antes de escribir código. El movimiento se limita a transiciones de 0.8s y un vídeo en bucle de fondo, lo bastante discreto para que el texto siga mandando. Sirve de referencia cuando construyas este tipo de sección hero para un producto fintech y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Pensado para agencias que facturan por ronda y quieren acordar secciones de 100vh y pasos de espaciado de 13px antes de la primera.
- Este diseño de sección hero sirve a fundadores que necesitan una pantalla de prueba de que los textos de fintech aguantan 6s de vídeo en bucle.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 3.400 caracteres como punto de partida.
Qué incluye
- Navegación contenida en una fila. La barra se superpone sobre sección hero en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. La acción es el único elemento de la fila que lleva relleno, y así los enlaces siguen leyéndose como texto. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- El brief nombra los pasos. La maquetación trabaja con valores absolutos y no con proporciones: secciones de 100vh, pasos de espaciado de 13px y transiciones de 0.8s. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado.
- Vídeo en la capa inferior. El fondo es un único bucle de 6s a 1464x1080, recortado para cubrir y sin teñir. Todo lo demás flota encima, en una capa superior. Exporta a 1464x1080 o más ancho y el recorte de cobertura sigue funcionando.
- Prueba en una sola fila. La fila se sitúa arriba en sección hero como prueba y no como adorno. Los números comparten la fuente de la interfaz, así pertenecen a la página en lugar de interrumpirla.
Movimiento e interacción
Cambios de estado medidos
El hover, la pulsación y el foco se resuelven en 0.8s, que es lo que hace que la interfaz se sienta inmediata. El easing se especifica junto a la duración (0.8s), así que una reconstrucción no puede colar otra sensación sin avisar. Aplica el tiempo exacto a la respuesta.
Movimiento ambiente sin librería de scroll
El movimiento ambiente es un clip de 6s en 1464x1080, en bucle discreto detrás del texto y sin reaccionar al puntero. El bucle se recorta a cubrir, lo que significa que la composición no depende de un tamaño de fotograma concreto. Graba o exporta a 1464x1080 o más ancho.
Los tiempos detrás de sección hero
Donde una plantilla anima cada sección al entrar, esta anima transiciones de 0.8s y un bucle de 6s y después se queda quieta. Nada se anima por gusto en este tipo de sección hero.
Leer Tech-Forward como especificación
Si esto se lo vas a pasar a quien programa, el brief es la pieza útil. Enuncia secciones de 100vh, pasos de espaciado de 13px y transiciones de 0.8s y no deja nada a la interpretación. Nada de este tipo de sección hero depende de un valor por defecto.
El reflujo de sección hero
Frente a una maquetación de móvil que esconde secciones, esta las conserva y les cambia la forma: la escala es fluida en lugar de escalonada y la sección se mantiene a 100vh. El reflujo mantiene la acción al alcance en cualquier ancho.
Preguntas frecuentes
¿El prompt de Tech-Forward es una especificación cerrada o un punto de partida?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1464x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
Tech-Forward se construyó en React y Tailwind CSS, 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.
¿De dónde sale el diseño de Tech-Forward?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 1464x1080.
