[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import HeroSection from "@/components/hero-section" export default function Home() { return (

) } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); margin: 0; padding: 0; overflow-x: hidden; } @layer utilities { .text-balance { text-wrap: balance; } } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" "use client" import { useEffect, useRef, useState } from "react" import gsap from "gsap" import { ChevronLeft, ChevronRight } from "lucide-react" // Define the destination data structure interface Destination { id: number title: string location: string description: string image: string } // Sample destinations data with distinct placeholder images const destinations: Destination[] = [ { id: 1, title: "YOSEMITE NATIONAL PARK", location: "Sierra Nevada · United States", description: "Majestic mountains, vast wilderness and iconic natural wonders. Experience nature at its grandest.", image: "https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=1920&h=1080&auto=format&fit=crop", }, { id: 2, title: "LOS LANCES BEACH", location: "Tarifa · Spain", description: "Crystal clear waters and perfect winds make this a paradise for kitesurfers and beach lovers alike.", image: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1920&h=1080&auto=format&fit=crop", }, { id: 3, title: "GÖREME VALLEY", location: "Cappadocia · Turkey", description: "Otherworldly landscapes dotted with fairy chimneys and famous for colorful hot air balloon rides.", image: "https://images.unsplash.com/photo-1570975640108-2aabc8b8c0d5?q=80&w=1920&h=1080&auto=format&fit=crop", }, { id: 4, title: "SAINT ANTONIEN", location: "Graubünden · Switzerland", description: "Hidden alpine gem with breathtaking mountain views and pristine hiking trails.", image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=1920&h=1080&auto=format&fit=crop", }, { id: 5, title: "NAGANO PREFECTURE", location: "Honshu · Japan", description: "Ancient temples, snow-capped mountains and natural hot springs in the heart of Japan.", image: "https://images.unsplash.com/photo-1545569341-9eb8b30979d9?q=80&w=1920&h=1080&auto=format&fit=crop", }, ] export default function HeroSection() { const [activeIndex, setActiveIndex] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const [nextIndex, setNextIndex] = useState(1) const mainBgRef = useRef(null) const nextBgRef = useRef(null) const cardsRef = useRef(null) const timelineRef = useRef(null) const intervalRef = useRef(null) // Function to handle the transition animation const animateTransition = (targetIndex: number) => { if (isAnimating) return setIsAnimating(true) setNextIndex(targetIndex) // Create a new GSAP timeline const tl = gsap.timeline({ onComplete: () => { // Update the active index after animation completes setActiveIndex(targetIndex) setIsAnimating(false) }, }) // Prepare the next background if (nextBgRef.current && mainBgRef.current) { // Set the next background image nextBgRef.current.style.backgroundImage = `url(${destinations[targetIndex].image})` // Fade in the next background tl.to(nextBgRef.current, { opacity: 1, duration: 1.2, ease: "power3.inOut", }) // After transition completes, update the main background and reset the next background tl.set(mainBgRef.current, { backgroundImage: `url(${destinations[targetIndex].image})`, }) tl.set(nextBgRef.current, { opacity: 0, }) } // Fade out the current banner text tl.to( ".banner-text", { opacity: 0, y: -20, duration: 0.5, ease: "power2.out", }, 0, ) // Start at the same time as background transition // Animate the cards if (cardsRef.current) { const cards = cardsRef.current.querySelectorAll(".destination-card") // Animate each card tl.to( cards, { x: "+=100%", // Move right to left duration: 1, ease: "power3.inOut", stagger: 0.05, onComplete: () => { // Reset card positions and update their content gsap.set(cards, { x: 0, }) }, }, 0.2, ) // Start slightly after background transition begins } // Fade in the new text after background transition tl.to( ".banner-text", { opacity: 1, y: 0, duration: 0.5, ease: "power2.out", }, "-=0.5", ) timelineRef.current = tl } // Function to handle manual navigation const handleNavigation = (direction: "next" | "prev") => { if (isAnimating) return // Clear the automatic interval if (intervalRef.current) { clearInterval(intervalRef.current) } const targetIndex = direction === "next" ? (activeIndex + 1) % destinations.length : (activeIndex - 1 + destinations.length) % destinations.length animateTransition(targetIndex) // Restart the automatic interval startAutoRotation() } // Function to start automatic rotation const startAutoRotation = () => { if (intervalRef.current) { clearInterval(intervalRef.current) } intervalRef.current = setInterval(() => { const targetIndex = (activeIndex + 1) % destinations.length animateTransition(targetIndex) }, 5000) // Change every 5 seconds } // Initialize the animation on component mount useEffect(() => { // Preload all images for smoother transitions destinations.forEach((destination) => { const img = new Image() img.src = destination.image }) startAutoRotation() // Clean up the interval on component unmount return () => { if (intervalRef.current) { clearInterval(intervalRef.current) } } }, [activeIndex]) // Get the visible cards (current + next 3) const getVisibleCards = () => { const cards = [] for (let i = 0; i < 4; i++) { const index = (activeIndex + i) % destinations.length cards.push({ ...destinations[index], isFeatured: i === 0, // First card is featured (larger) }) } return cards } const visibleCards = getVisibleCards() const activeDestination = destinations[activeIndex] const nextDestination = destinations[nextIndex] return (

{/* Main Background Layer */}

{/* Next Background Layer (for transitions) */}

{/* Content Layer (always on top) */}

{/* Navigation Header */}

GLOBE EXPRESS

{/* Banner Text */}

{activeDestination.location}

{activeDestination.title}

{activeDestination.description}

{/* Destination Cards - Now positioned on the right side */}

{destinations.map((_, index) => (

))}

{visibleCards.map((destination, index) => (

{destination.location}

{destination.title.split(" ")[0]}

))}

{/* Current slide indicator */}

{(activeIndex + 1).toString().padStart(2, "0")}

) }