Sobre esta plantilla
Aquí no hay una captura sino un caso de sección hero de Gulfselite, con el brief original al lado. El esquema de color es naranja apagado #69574B de base y blanco #FEFEFE para la tipografía, y la página está compuesta en Inter. La referencia está construida con Tailwind y JavaScript vanilla, y las decisiones de maquetación se documentan aparte. El movimiento se queda en transiciones de 120ms y un vídeo en bucle de fondo. Cuando prepares el brief de cada sección hero de viajes, parte de esta composición y sustituye el tema.
Pensado para
- Este diseño de sección hero va dirigido a equipos que ya conocen Tailwind y JavaScript vanilla y solo necesitan dejar Tailwind y JavaScript vanilla por escrito.
- Desarrolladores front-end que reconstruyen esto en Tailwind y JavaScript vanilla y quieren las transiciones especificadas y no adivinadas.
- Pasa Tailwind y JavaScript vanilla al desarrollador con el recorte de 1920x1448 adjunto y deja que lo reconstruya.
Qué incluye
- Fila superior: marca, enlaces y acción. 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. El menú móvil forma parte del brief, de modo que el estado colapsado está diseñado y no improvisado. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Todas las medidas están escritas. Toda medida del brief es un número que puedes volver a medir: pasos de espaciado de 20px y transiciones de 120ms. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente.
- El fotograma de póster importa. El fondo es un único bucle de 9,9s a 1920x1448, recortado para cubrir y sin teñir. Todo lo demás flota encima, en una capa superior. El bucle es lo bastante corto (9,9s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Una píldora para lo único nuevo. Una insignia, un mensaje: la píldora se sitúa sobre el titular en Inter al paso más pequeño, y nada más compite por ese hueco. La píldora se compone en el paso más pequeño del brief, así se lee como etiqueta y no como un segundo título. Manténla sobre el titular, nunca al lado.
Movimiento e interacción
Cambios de estado medidos
El brief fija la transición en 120ms, así que una reconstrucción no puede colar un valor por defecto más lento. Los tiempos cortos son la razón de que la página se lea como diseñada; un valor por defecto lento desharía la composición.
Movimiento ambiente sin librería de scroll
El movimiento ambiente viene del bucle de 9,9s en 1920x1448 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco.
Hacer tuyo este tipo de sección hero
La composición es la parte reutilizable y el tema es tuyo. Conserva pasos de espaciado de 20px y transiciones de 120ms y sustituye el texto, el material y las marcas de la firma. El tema es la parte que debería cambiar.
El reflujo de sección hero
El coste de una escala fluida es menos control sobre los tamaños exactos. A cambio, la línea de display se mantiene proporcionada, y por eso un clamp entre 40px y 20px está en el brief. Un apretujón habría sido más barato y no aguantaría.
Cómo ordena Gulfselite la primera lectura
La contrapartida es la paciencia: la página retiene el detalle que una cuadrícula escaneable entregaría de inmediato. Lo que gana es una primera pantalla donde navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas no se pueden malinterpretar. Quien busca viajes recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Por qué la ficha nombra Tailwind y JavaScript vanilla?
No. El brief es una especificación, no una lista de dependencias. Se escribió para Tailwind y JavaScript vanilla, 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 Gulfselite?
Todo lo que se cita en la página procede del brief capturado de 2.498 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué contiene en realidad el brief que hay detrás de Gulfselite?
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 1920x1448. En ningún punto la imagen renderizada funciona como fuente de la verdad.
