Sobre esta plantilla
Adventra es la referencia de sección hero para una agencia o un estudio, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. Abre con “Home, Our Story, FAQ, Policies” y le da el marco a esa línea en lugar de encogerla en una tarjeta. La paleta es negro #303230 de base y gris #CAC7BD para la tipografía, con la tipografía Inter. La referencia está construida con un único archivo HTML autocontenido, y las decisiones de maquetación se documentan aparte. El movimiento se queda en un vídeo en bucle de fondo. Sirve de referencia cuando construyas este tipo de sección hero para una agencia o un estudio y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Desarrolladores front-end que reconstruyen esto en un único archivo HTML autocontenido y quieren las transiciones especificadas y no adivinadas.
- La página sirve a desarrolladores front-end que rehacen su sección hero de una agencia o un estudio en un único archivo HTML autocontenido y buscan los números que hay detrás del aspecto.
- Los fundadores que le pasen el brief a una agencia usarán el marco de 1856x1398 como prueba de aceptación de la primera ronda.
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 Inter, de modo que la composición se lee antes como contenido que como interfaz. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Los estados hover y de foco están definidos para cada enlace, y eso es lo que evita que una barra fina parezca inerte. Mantén la fila en una sola línea.
- Aquí nada se hereda. El brief declara sus tamaños en la captura (un tamaño de display fijo de 60px, secciones de 100vh y pasos de espaciado de 16px), así que un remontaje se puede verificar en lugar de aproximar. El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud.
- El fotograma de póster importa. La primera pantalla es un único clip a 1856x1398, y todo lo demás se dispone encima. Un fotograma de póster a 1856x1398 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Fila superior: marca, enlaces y acción. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Inter, para que la barra pertenezca a la página de abajo y no a un sistema aparte.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El clip de fondo se reproduce 7s en 1856x1398 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.
Hover solo donde aporta
La interacción se queda en cada control (estados hover en los botones y los enlaces y no en todas las tarjetas), así que nada más de la página se mueve como efecto secundario. Los estados están nombrados en el brief, así que la página no depende de ninguna librería de efectos hover. Comprueba los estados en un dispositivo táctil.
Qué cambiar primero en Adventra
La composición es la parte reutilizable y el tema es tuyo. Conserva un tamaño de display fijo de 60px y secciones de 100vh y sustituye el texto, el material y las marcas de la firma. Conserva el marco y la escala; el tema es la parte que debe cambiar.
Cómo ordena Adventra 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 y el clip de fondo no se pueden malinterpretar. Quien busca agencia recibe la oferta antes que las opciones.
El argumento de sección hero
Una pantalla significa una decisión para quien lee, y ese es el coste de esta maquetación: todo lo demás baja por debajo de la primera pantalla. El brief enuncia un tamaño de display fijo de 60px, secciones de 100vh y pasos de espaciado de 16px para que las secciones de abajo mantengan el mismo ritmo. Adventra enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Cuánto de Adventra depende de un único archivo HTML autocontenido?
Adventra 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.
¿Por qué no se imprime aquí el prompt de Adventra?
Todo lo que se cita en la página procede del brief capturado de 3.134 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿El prompt de Adventra 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 1856x1398. En ningún punto la imagen renderizada funciona como fuente de la verdad.
