Overland

Sobre Este Template

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.

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.

Características

• 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)
• Páginas de detalle de expedición con itinerario día a día, lista de qué incluye y checklist de equipo
• Páginas de detalle de destino con lectura lat/lng, badge de dificultad, tags de terreno, ventana de temporada y galería
• Cursor personalizado de dos piezas — punto instantáneo más un anillo suavizado con lerp y estados contextuales para fotos y CTAs
• Preloader con contador 0→100 en ease-out-expo y salida con wipe
• Botones magnéticos vía [data-magnetic] y sistema de apariciones con IntersectionObserver mediante [data-reveal] / [data-reveal-stagger]
• Barra de stats animada (47 destinos, 312+ expediciones, 18 años) más sección de proceso de 4 pasos con header sticky
• Página de FAQ con acordeones animados por max-height y marquee de partners en la portada
• Smooth scroll con Lenis + Astro View Transitions con teardown completo de GSAP en cada navegación
• Listo para SEO — JSON-LD de TravelAgency, Open Graph + Twitter cards, URLs canónicas, @astrojs/sitemap, robots.txt, skip link
• 34 fotografías incluidas (destinos, expediciones, guías, avatares, imagen OG) y TypeScript en modo estricto — cero any

Despliegue