Sobre esta plantilla
Antes de rehacer cada sección hero para una marca de viajes, lee Velora Hero Section: la composición y la especificación que hay detrás están aquí. El titular dice “Rent Your Dream Luxury Car Today”, y el orden de sección hero gira alrededor de esa línea. El esquema de color es negro #0A0A0B de base y blanco #FFFFFF para la tipografía, y la página está compuesta en Archivo. La entrega es un único archivo HTML autocontenido: una página, sin plugins y sin herramientas de build entre tú y el diseño. La página reduce el movimiento a un vídeo en bucle de fondo. Esta referencia es para una marca de viajes que quiere la primera pantalla resuelta antes de empezar a construir.
Pensado para
- Toma prestada la estructura de sección hero entera y sustituye los textos línea a línea cotejando con un marco de 1500x1080.
- Equipos internos que amplían su sección hero y necesitan que secciones de 100vh y pasos de espaciado de 56px pasen a los bloques nuevos sin tocar los valores.
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 4,9s de vídeo en bucle detrás del texto.
Qué incluye
- Navegación contenida en una fila. Una barra fina ocupa la parte superior de sección hero, con la marca a la izquierda y los enlaces compuestos en Archivo, de modo que la composición se lee antes como contenido que como interfaz. La marca se trata como tipografía y no como un logotipo compuesto, lo que mantiene la fila superior en una sola línea base.
- Todas las medidas están escritas. El brief nombra las cifras: secciones de 100vh y pasos de espaciado de 56px. Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud.
- El vídeo es el fondo, no un panel. Un único clip silenciado y en bucle llena el marco a 1500x1080 y 4,9s, recortado para cubrir, con el texto apilado encima. El brief mantiene las superposiciones fuera del vídeo para que nada le reste color. Un fotograma de póster a 1500x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona. Exporta a 1500x1080 o más ancho para que el recorte siga siendo honesto.
- Una barra sin nada de más. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. Diseña el estado colapsado antes de añadir un sexto enlace.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El clip de fondo se reproduce 4,9s en 1500x1080 en bucle infinito, silenciado y en línea, así que la página sigue moviéndose mientras la atención del lector está en el texto. No hace falta ninguna librería de scroll, porque el único movimiento ambiente es el propio medio. Nada más en la página se anima de forma continua, así que el medio es lo único que pide atención.
Movimiento que no estorba
El brief deja fuera la animación y deja que la maquetación de 1500x1080 sostenga la página, con el hover y la pulsación como únicos cambios. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción.
Hacer tuyo este tipo de sección hero
Empieza por el texto, no por el color. Reescribe “Rent Your Dream Luxury Car Today” como una sola frase sobre tu producto y colócala en Archivo al tamaño que usa el brief. Reescribe el texto y el material antes de recolorear nada.
Leer Velora Hero Section como especificación
Las cifras concretas envejecen: un valor que encaja en 1500x1080 puede no encajar en tu marco. El brief enuncia secciones de 100vh y pasos de espaciado de 56px de todos modos, porque un valor declarado es más fácil de cambiar que uno implícito. Nada de este tipo de sección hero depende de un valor por defecto.
El orden detrás de sección hero
El brief ocupa 3.216 caracteres y nombra el orden de lectura sin rodeos: navegación, el titular, la fila de cifras y el clip de fondo, con secciones de 100vh y pasos de espaciado de 56px entre medias. Quien busca viajes recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Cómo está organizada esta ficha de Velora Hero Section?
Todo lo que se cita en la página procede del brief capturado de 3.216 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿El prompt de Velora Hero Section 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 1500x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra un único archivo HTML autocontenido?
Velora Hero Section se construyó en un único archivo HTML autocontenido, 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.
