Sobre esta plantilla
Wanderful Hero es un caso de sección hero de viajes: nace de un único brief escrito y esta página lo documenta. El titular de la propia página dice “Our smart itineraries shape around you — your rhythm, your vibe, your hunger for adventure”, y la composición se construye alrededor de esas palabras exactas. La tipografía es Inter, y el brief fija los tamaños en lugar de dejarlos a una escala. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. Sirve de referencia cuando construyas este tipo de sección hero para una marca de viajes y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Llévate el marco de 640x470 y tipografía de 15px a 17px y pasos de espaciado de 11px de este diseño de sección hero antes que cualquier otra cosa.
- Pensado para un fundador en solitario que saca un único diseño de sección hero para una marca de viajes y no tiene ningún sistema de diseño detrás.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 4.223 caracteres como punto de partida.
Qué incluye
- Una fila, sin desplegables. La navegación es una sola fila, sin un segundo nivel debajo. Los estados hover y de foco están definidos para cada enlace, y eso es lo que evita que una barra fina parezca inerte.
- Todas las medidas están escritas. Los tamaños se citan, no se heredan: tipografía de 15px a 17px y pasos de espaciado de 11px. Cambia la tipografía o el texto y esas relaciones se mantienen. El tipo y la maquetación comparten los mismos pasos, así que nada se desvía cuando se sustituye uno de los dos. Conserva los valores citados cuando traslades la página.
- Cifras en vez de una afirmación. Las cifras se componen como tipo y no dentro de una tarjeta: Inter al tamaño display, con las etiquetas un paso por debajo. No hay divisores dentro de la fila; el espaciado por sí solo separa las cifras. Quita una cifra antes de reducir la etiqueta.
- Primero el texto, después el adorno. Todo lo que está por encima del pliegue se gana su sitio. El brief nombra el texto, el marco de 640x470 y los tamaños de tipo, y no deja nada decorativo compitiendo con ellos. La página es una sola composición a 640x470, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Apariciones ligadas al avance
Parallax se ejecuta mientras la página se mueve, así que la composición tiene un estado de reposo definido. Como va ligado a la posición, el efecto se resuelve igual en cada visita.
Una superficie interactiva pequeña
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, y eso es lo que evita que una primera pantalla densa se sienta cargada. Como los estados son simples, se portan a cualquier sistema de componentes. Mantén pequeña la capa interactiva.
Hacer tuyo este tipo de sección hero
La composición es la parte reutilizable y el tema es tuyo. Conserva tipografía de 15px a 17px y pasos de espaciado de 11px y sustituye el texto, el material y las marcas de la firma. Otra marca puede reutilizar el marco entero.
El orden detrás de sección hero
Cuando alguien que busca viajes aterriza en una sola pantalla, escanea antes de leer. La maquetación responde a eso: navegación, el titular, la fila de cifras y el clip de fondo se dimensionan para el escaneo, con tipografía de 15px a 17px y pasos de espaciado de 11px manteniendo cada parada distinta. Quien busca viajes recibe la oferta antes que las opciones.
Las cifras detrás de sección hero
La página tiene más cifras de las que parece. Las que una reconstrucción debe conservar son estas: tipografía de 15px a 17px y pasos de espaciado de 11px; el resto puede moverse. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Wanderful Hero?
El brief capturado ocupa 4.223 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.
¿Por qué la ficha nombra React y Tailwind CSS?
Wanderful Hero 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.
¿Cómo está organizada esta ficha de Wanderful Hero?
Todo lo que se cita en la página procede del brief capturado de 4.223 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
