Sobre esta plantilla
Aquí no hay una captura sino un caso de sección hero de Airlines Hero Section, con el brief original al lado. El color se limita a índigo intenso #20153E de base y índigo #56489B para los acentos y la página se compone en Inter. La ficha nombra el stack que produjo la página (un único archivo HTML autocontenido) en lugar de esconderlo. La página reduce el movimiento a un vídeo en bucle de fondo. Parte del brief capturado y ajusta la composición de sección hero en lugar de empezar de cero.
Pensado para
- Toma prestada la estructura de sección hero entera y sustituye los textos línea a línea cotejando con un único archivo HTML autocontenido.
- Este diseño de sección hero va dirigido a equipos que ya conocen un único archivo HTML autocontenido y solo necesitan dejar un marco de 1466x1080 por escrito.
- Escribe tu propio titular y luego rehace este diseño de sección hero en un único archivo HTML autocontenido con las medidas intactas.
Qué incluye
- Una fila, sin desplegables. La fila gasta el contraste en un solo punto: la acción #56489B, con la marca y los enlaces retenidos sobre el color del texto. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Los enlaces se componen a un tamaño menor que la marca, y la acción en #56489B es el único elemento de la barra con peso.
- Los tamaños están en el brief, no en una escala. Los valores son la especificación: secciones de 100vh y pasos de espaciado de 14px, capturados en 1466x1080 y no deducidos de una captura. Cada valor responde a una función: un paso de tipo, un hueco, un radio o una transición. Donde el brief calla, calla a propósito.
- Pesos nombrados por papel. Aquí el tipo es el sistema de estilo: Inter al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. El interletraje se fija por tamaño, así la línea display y el pie de foto no comparten un mismo valor. La escala está citada; úsala.
- Fila superior: marca, enlaces y acción. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. Mantén el número de enlaces en cuatro o cinco; la fila está dimensionada para eso.
Movimiento e interacción
Interacción contenida y local
Solo los controles responden al puntero (estados hover en los botones y los enlaces y no en todas las tarjetas), así que la página se siente viva sin convertir cada elemento en un objetivo. Nada en la página abre un modal ni secuestra el scroll; las interacciones se quedan en su elemento. Si un estado no confirma una acción, quítalo.
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 2,2s en 1466x1080, en bucle discreto detrás del texto y sin reaccionar al puntero. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
El brief de viajes se sostiene
Airlines Hero Section funciona porque su jerarquía está decidida, no decorada. El brief fija las cifras (secciones de 100vh y pasos de espaciado de 14px), así que un texto nuevo cae dentro del marco en lugar de reabrirlo. Da a quien lee páginas de viajes el camino más corto y honesto hasta la oferta.
El orden detrás de sección hero
Comprometerse con un solo recorrido de lectura cierra los demás. El brief lo acepta, fija navegación, el titular, la fila de cifras y el clip de fondo en su sitio y gasta secciones de 100vh y pasos de espaciado de 14px en hacer obvio el camino. Quien busca viajes recibe la oferta antes que las opciones.
Los tiempos detrás de sección hero
Donde una plantilla anima cada sección al entrar, esta anima estados hover y pulsados, un bucle de 2,2s y una marquesina en bucle y después se queda quieta. Nada se anima por gusto en este tipo de sección hero.
Preguntas frecuentes
¿El prompt de Airlines Hero Section es una especificación cerrada o un punto de partida?
El brief capturado ocupa 2.222 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.
¿Puedo reconstruir este diseño de sección hero de Airlines Hero Section con otro stack?
No. El brief es una especificación, no una lista de dependencias. Se escribió para un único archivo HTML autocontenido, pero la misma composición se puede recrear en lo que ya uses. El stack se nombra para que sepas cómo se hizo la referencia.
¿Por qué no se imprime aquí el prompt de Airlines Hero Section?
Todo lo que se cita en la página procede del brief capturado de 2.222 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
