import React, { useState, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { ArrowRight, Clock, Users, MapPin, Star, ChevronLeft, Calendar, Check, Compass, Mountain, Waves, Flame, X, Quote, Menu } from 'lucide-react'; interface Trip { id: number; name: string; location: string; duration: string; price: number; gradient: string; description: string; rating: number; reviews: number; icon: React.ElementType; included: string[]; itinerary: { day: string; title: string; description: string }[]; } const trips: Trip[] = [ { id: 1, name: 'Sahara Sunset Expedition', location: 'Morocco', duration: '7 days', price: 2490, gradient: 'from-amber-400 via-orange-500 to-red-500', description: 'Ride camels across golden dunes, sleep under a blanket of stars in luxury desert camps, and explore ancient kasbahs hidden in the Atlas Mountains.', rating: 4.9, reviews: 128, icon: Flame, included: ['All accommodations', 'Daily breakfast & dinner', 'Camel trekking guide', 'Desert camp experience', 'Atlas Mountain hike', 'Airport transfers'], itinerary: [ { day: 'Day 1', title: 'Arrival in Marrakech', description: 'Welcome dinner at a traditional riad with live Gnawa music.' }, { day: 'Day 2', title: 'Atlas Mountains Crossing', description: 'Drive through Tizi n\'Tichka pass, visit Ait Ben Haddou kasbah.' }, { day: 'Day 3', title: 'Gateway to the Dunes', description: 'Arrive at the edge of the Sahara, prepare for the desert.' }, { day: 'Day 4', title: 'Camel Trek & Desert Camp', description: 'Sunset camel ride to a luxury camp with private tents.' }, { day: 'Day 5', title: 'Free Day in the Dunes', description: 'Sandboarding, quad biking, or simply relax in the oasis.' }, { day: 'Day 6', title: 'Return to Marrakech', description: 'Scenic drive back with lunch in the High Atlas.' }, { day: 'Day 7', title: 'Departure', description: 'Farewell breakfast and transfer to the airport.' } ] }, { id: 2, name: 'Patagonia Wild Trek', location: 'Chile & Argentina', duration: '10 days', price: 3890, gradient: 'from-teal-500 via-cyan-600 to-blue-700', description: 'Trek through jagged granite peaks, turquoise glacial lakes, and windswept steppe in one of the world\'s last true wildernesses.', rating: 5.0, reviews: 96, icon: Mountain, included: ['All accommodations', 'All meals on trek', 'Professional mountain guides', 'National park fees', 'Group camping gear', 'Emergency support'], itinerary: [ { day: 'Day 1', title: 'Arrival in Punta Arenas', description: 'Group welcome briefing and gear check.' }, { day: 'Day 2', title: 'Torres del Paine Base', description: 'Scenic drive into the national park, first views of the towers.' }, { day: 'Day 3', title: 'Base of the Towers Trek', description: 'Full-day hike to the iconic granite towers.' }, { day: 'Day 4', title: 'French Valley', description: 'Trek through the dramatic French Valley with hanging glaciers.' }, { day: 'Day 5', title: 'Grey Glacier', description: 'Boat tour to the face of Grey Glacier.' }, { day: 'Day 6', title: 'Crossing to Argentina', description: 'Border crossing to El Calafate.' }, { day: 'Day 7', title: 'Perito Moreno Glacier', description: 'Full day at the famous advancing glacier.' }, { day: 'Day 8', title: 'El Chaltén Base', description: 'Travel to Argentina\'s trekking capital.' }, { day: 'Day 9', title: 'Laguna de los Tres', description: 'Epic hike to the viewpoint of Mount Fitz Roy.' }, { day: 'Day 10', title: 'Departure', description: 'Return to El Calafate for flights home.' } ] }, { id: 3, name: 'Bali Jungle & Coast', location: 'Indonesia', duration: '8 days', price: 1890, gradient: 'from-emerald-400 via-teal-500 to-cyan-600', description: 'From emerald rice terraces to secret beaches, experience the magic of Bali — sacred temples, jungle waterfalls, and surf lessons.', rating: 4.8, reviews: 214, icon: Waves, included: ['All accommodations', 'Daily breakfast', 'Local guide', 'Temple visits', 'Surf lesson', 'Scooter rentals'], itinerary: [ { day: 'Day 1', title: 'Arrival in Ubud', description: 'Settle in and evening walk through the rice fields.' }, { day: 'Day 2', title: 'Sacred Monkey Forest', description: 'Explore the forest sanctuary and Ubud Palace.' }, { day: 'Day 3', title: 'Tegallalang Rice Terraces', description: 'Sunrise visit to the iconic terraces and coffee plantation.' }, { day: 'Day 4', title: 'Waterfall Circuit', description: 'Hike to hidden waterfalls in the jungle.' }, { day: 'Day 5', title: 'Coast Move to Canggu', description: 'Transfer to the coast, sunset at Batu Bolong beach.' }, { day: 'Day 6', title: 'Surf Lesson Day', description: 'Learn to surf with professional instructors.' }, { day: 'Day 7', title: 'Uluwatu Temple & Kecak', description: 'Clifftop temple and fire dance performance.' }, { day: 'Day 8', title: 'Departure', description: 'Final beach morning and airport transfer.' } ] }, { id: 4, name: 'Iceland Fire & Ice', location: 'Iceland', duration: '6 days', price: 3290, gradient: 'from-slate-700 via-slate-500 to-indigo-400', description: 'Chase waterfalls, walk on glaciers, and witness the raw power of volcanoes and geysers on this sub-arctic adventure.', rating: 4.9, reviews: 87, icon: Compass, included: ['All accommodations', 'Breakfast daily', '4x4 vehicle', 'Glacier hike gear', 'Super Jeep tour', 'Northern lights hunt'], itinerary: [ { day: 'Day 1', title: 'Arrival in Reykjavik', description: 'City exploration and Blue Lagoon soak.' }, { day: 'Day 2', title: 'Golden Circle', description: 'Thingvellir, Gullfoss waterfall, and Geysir.' }, { day: 'Day 3', title: 'South Coast Waterfalls', description: 'Seljalandsfoss, Skógafoss, and Reynisfjara beach.' }, { day: 'Day 4', title: 'Glacier Hike', description: 'Walk on Sólheimajökull glacier with a certified guide.' }, { day: 'Day 5', title: 'Super Jeep to Highlands', description: 'Off-road adventure to colorful rhyolite mountains.' }, { day: 'Day 6', title: 'Departure', description: 'Morning farewell and airport transfer.' } ] } ]; const testimonials = [ { name: 'Sarah Mitchell', trip: 'Sahara Sunset Expedition', quote: 'The camel trek at sunset was pure magic. Our guide Ahmed made the whole journey feel like traveling with an old friend. The luxury desert camp exceeded every expectation — I\'ve never seen stars like that.', rating: 5, initials: 'SM', gradient: 'from-amber-400 to-orange-500' }, { name: 'James Chen', trip: 'Patagonia Wild Trek', quote: 'Patagonia is brutal and beautiful in equal measure. The guides were phenomenal — always pushing us just the right amount. Standing at the base of the towers at sunrise is a memory I\'ll carry forever.', rating: 5, initials: 'JC', gradient: 'from-teal-400 to-cyan-600' }, { name: 'Elena Rodriguez', trip: 'Bali Jungle & Coast', quote: 'The perfect balance of adventure and relaxation. Surfing in Canggu, hiking to hidden waterfalls, and the temple ceremonies — every day felt thoughtfully crafted. I came back feeling completely renewed.', rating: 5, initials: 'ER', gradient: 'from-emerald-400 to-teal-600' } ]; const stats = [ { value: '12+', label: 'Years of expertise' }, { value: '5,000+', label: 'Happy travelers' }, { value: '98%', label: 'Would book again' } ]; function App() { const [selectedTrip, setSelectedTrip] = useState(null); const [menuOpen, setMenuOpen] = useState(false); const scrollToSection = (id: string) => { document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); }; return (

{selectedTrip && ( setSelectedTrip(null)} /> )} {/* Navigation */}

Wanderly

scrollToSection('destinations')} className="inline-flex items-center justify-center gap-2 h-10 px-4 py-2 rounded-md text-sm font-medium bg-amber-600 text-white hover:bg-amber-700 transition-colors" > Book Now

{menuOpen && (

)}

{/* Hero Section */}

Small group adventures

Explore the world
beyond the map Handcrafted expeditions to the world's most extraordinary places. Small groups, expert guides, zero compromise. scrollToSection('destinations')} className="inline-flex items-center justify-center gap-2 h-11 px-8 rounded-md text-sm font-medium bg-amber-600 text-white hover:bg-amber-700 transition-colors" > View Trips scrollToSection('why')} className="inline-flex items-center justify-center gap-2 h-11 px-8 rounded-md text-sm font-medium bg-slate-800 text-slate-100 hover:bg-slate-700 transition-colors" > Why Wanderly

{/* Destination Grid */}

Featured Expeditions

Each journey is meticulously planned, locally guided, and designed to leave you transformed.

{trips.map((trip, index) => ( setSelectedTrip(trip)} className="cursor-pointer group" >

{trip.location}

{trip.rating}

{trip.name}

{trip.duration}

Max 12

From ${trip.price.toLocaleString()}

))}

{/* Why Us Section */}

Adventure, crafted with care

We don't just sell trips — we design transformative experiences. Every itinerary is built by local experts who know the hidden paths, the best guides, and the moments that matter most.

{stats.map((stat, i) => (

{stat.value}

{stat.label}

))}

{[ 'Expert local guides on every trip', 'Small groups — never more than 12 travelers', 'Carbon-neutral travel program', 'Flexible booking & free cancellation' ].map((feature, i) => (

{feature} ))}

{/* Testimonials */}

Traveler Stories

Real adventures from real people

{testimonials.map((testimonial, index) => (

"{testimonial.quote}"

{Array.from({ length: testimonial.rating }).map((_, i) => ( ))}

{testimonial.initials}

{testimonial.name}

{testimonial.trip}

))}

{/* CTA Section */}

Ready for the adventure of a lifetime?

Join our community of explorers. Book your spot today — spaces are limited to keep groups small and experiences intimate.

scrollToSection('destinations')} className="inline-flex items-center justify-center gap-2 h-12 px-10 rounded-md text-base font-medium bg-amber-600 text-white hover:bg-amber-700 transition-colors" > Explore All Trips

{/* Footer */}

); } function TripDetail({ trip, onClose }: { trip: Trip; onClose: () => void }) { const [selectedDate, setSelectedDate] = useState('2024-06-15'); const [groupSize, setGroupSize] = useState(2); const [bookingStep, setBookingStep] = useState<'overview' | 'itinerary' | 'book'>('overview'); const dates = useMemo(() => [ { value: '2024-06-15', label: 'Jun 15, 2024' }, { value: '2024-07-20', label: 'Jul 20, 2024' }, { value: '2024-08-25', label: 'Aug 25, 2024' }, { value: '2024-09-30', label: 'Sep 30, 2024' } ], []); const totalPrice = useMemo(() => { const dateMultiplier = selectedDate === '2024-08-25' ? 1.15 : 1; return trip.price * groupSize * dateMultiplier; }, [trip.price, groupSize, selectedDate]); const handleBook = () => { alert(`Booking confirmed! ${trip.name} for ${groupSize} traveler(s) on ${selectedDate}. Total: $${totalPrice.toLocaleString()}`); onClose(); }; return ( e.stopPropagation()} className="min-h-full flex items-center justify-center p-4" >

{/* Header */}

{trip.location}

{trip.rating} ({trip.reviews} reviews)

{trip.name}

{/* Tabs */}

{[ { id: 'overview', label: 'Overview' }, { id: 'itinerary', label: 'Itinerary' }, { id: 'book', label: 'Book Now' } ].map((tab) => ( ))}

{/* Content */}

{bookingStep === 'overview' && (

{trip.description}

What's Included

{trip.included.map((item) => (

{item}

))}

{trip.duration}

Max 12 travelers

)} {bookingStep === 'itinerary' && ( {trip.itinerary.map((day) => (

{day.day}

{day.title}

{day.description}

))} )} {bookingStep === 'book' && (

Select Departure Date

{dates.map((date) => ( ))}

Group Size

{groupSize}

Price per person ${trip.price.toLocaleString()}

Travelers {groupSize}

Total ${totalPrice.toLocaleString()}

Confirm Booking

)}

); } export default App;

부티크 어드벤처 투어