Overland

Overland es una plantilla flagship para operadores de expediciones, agencias de viaje de aventura y marcas outdoor. Doce páginas cubren un catálogo de destinos con páginas de detalle, expediciones empaquetadas con itinerario día a día y listas de equipo, perfiles de guías, blog en Markdown, FAQ, sobre nosotros y contacto. El hero es una travesía panorámica de 220vh: una fotografía de cuatro anchos de viewport se desplaza en horizontal mientras haces scroll y una lectura GPS en vivo interpola desde 61.2247° N en los fiordos noruegos hasta 51.7267° S en Patagonia. Debajo, una sección fijada con ScrollTrigger arrastra seis tarjetas de destino en horizontal. Incluye tres skins de color con selector flotante, The Map (pergamino #F5F1E8), Night Camp (bosque oscuro con naranja brasa) y Arctic (azul glaciar). Cursor personalizado de dos piezas, botones magnéticos, contadores animados, smooth scroll con Lenis y Astro View Transitions.

Qué incluye

• 12 páginas, Inicio, Destinos, Detalle de Destino, Expediciones, Detalle de Expedición, Guías, Blog, Detalle de Post, Sobre Nosotros, FAQ, Contacto, 404
• Hero panorámico, una fotografía de 400% de ancho se desplaza hasta -75% dentro de un contenedor sticky de 220vh, con scrub de scroll regulado por requestAnimationFrame
• Contador GPS en vivo que interpola coordenadas desde los fiordos noruegos hasta Patagonia mientras avanza el hero
• Carrusel horizontal de destinos fijado en pantalla, pin + scrub de GSAP ScrollTrigger arrastra seis tarjetas con apariciones escalonadas
• 3 skins de color con selector flotante, The Map (pergamino/bosque/óxido), Night Camp (naranja brasa), Arctic (azul glaciar)
• 4 colecciones de contenido validadas con Zod, 10 destinos, 5 expediciones, 4 guías (JSON) y 5 posts de blog (Markdown)

La firma

El hero es una travesía de scroll de 220vh. Una fotografía renderizada al 400% del ancho del viewport vive dentro de un frame sticky de 100vh y se desplaza hasta -75% mientras haces scroll, así que el paisaje pasa por delante en lugar de moverse la página. Al mismo tiempo, una lectura GPS en la esquina interpola en vivo desde 61.2247° N / 6.8782° E en los fiordos noruegos hasta 51.7267° S / 72.9651° W en Patagonia, y el overlay de gradiente se oscurece con el progreso. Sigue bajando y una sección fijada con ScrollTrigger toma el control, arrastrando seis tarjetas de destino en horizontal.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/overland/. 12 páginas, hecha con Astro 5, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.