Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Wanderlust Chronicles - Travel Stories from Around the World</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| ocean: { | |
| 50: '#f0fdfa', | |
| 100: '#ccfbf1', | |
| 200: '#99f6e4', | |
| 300: '#5eead4', | |
| 400: '#2dd4bf', | |
| 500: '#14b8a6', | |
| 600: '#0d9488', | |
| 700: '#0f766e', | |
| 800: '#115e59', | |
| 900: '#134e4a', | |
| }, | |
| sunset: { | |
| 50: '#fef7ed', | |
| 100: '#fed7aa', | |
| 200: '#fdba74', | |
| 300: '#fb923c', | |
| 400: '#f97316', | |
| 500: '#ea580c', | |
| 600: '#dc2626', | |
| 700: '#c2410c', | |
| 800: '#9a3412', | |
| 900: '#7c2d12', | |
| } | |
| }, | |
| fontFamily: { | |
| 'serif': ['Playfair Display', 'serif'], | |
| 'sans': ['Inter', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="font-sans antialiased bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section with Full-width Destination Photo --> | |
| <section class="relative h-screen overflow-hidden"> | |
| <div class="absolute inset-0"> | |
| <img src="https://static.photos/travel/1920x1080/1" alt="Hero Destination" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/30 to-black/60"></div> | |
| </div> | |
| <div class="relative h-full flex items-center justify-center text-center px-4"> | |
| <div class="max-w-4xl"> | |
| <h1 class="text-5xl md:text-7xl font-serif font-bold text-white mb-6 animate-fade-in"> | |
| Discover the World Through Our Eyes | |
| </h1> | |
| <p class="text-xl md:text-2xl text-white/90 mb-8 animate-fade-in-delay"> | |
| Join us on extraordinary adventures across continents and cultures | |
| </p> | |
| <button onclick="scrollToSection('stories')" class="bg-ocean-500 hover:bg-ocean-600 text-white px-8 py-4 rounded-full text-lg font-semibold transition-all transform hover:scale-105 animate-bounce-in"> | |
| Explore Stories | |
| </button> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white animate-pulse"> | |
| <i data-feather="chevron-down" class="w-8 h-8"></i> | |
| </div> | |
| </section> | |
| <!-- Travel Stories Grid --> | |
| <section id="stories" class="py-20 px-4 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-4">Travel Stories</h2> | |
| <p class="text-xl text-gray-600">Adventures, memories, and moments from around the globe</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Story Card 1 --> | |
| <article class="group cursor-pointer transform transition-all duration-300 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://static.photos/nature/640x360/2" alt="Bali Sunset" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 text-white"> | |
| <span class="inline-block bg-sunset-500 px-3 py-1 rounded-full text-xs font-semibold mb-2">Asia</span> | |
| <h3 class="text-2xl font-serif font-bold mb-2">Bali: Island of Gods</h3> | |
| <p class="text-sm opacity-90">Discovering the spiritual heart of Indonesia</p> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Story Card 2 --> | |
| <article class="group cursor-pointer transform transition-all duration-300 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://static.photos/cityscape/640x360/3" alt="Paris Streets" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 text-white"> | |
| <span class="inline-block bg-sunset-500 px-3 py-1 rounded-full text-xs font-semibold mb-2">Europe</span> | |
| <h3 class="text-2xl font-serif font-bold mb-2">Paris: Love in Every Corner</h3> | |
| <p class="text-sm opacity-90">A romantic journey through the City of Light</p> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Story Card 3 --> | |
| <article class="group cursor-pointer transform transition-all duration-300 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://static.photos/aerial/640x360/4" alt="Safari Adventure" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 text-white"> | |
| <span class="inline-block bg-sunset-500 px-3 py-1 rounded-full text-xs font-semibold mb-2">Africa</span> | |
| <h3 class="text-2xl font-serif font-bold mb-2">Serengeti Safari</h3> | |
| <p class="text-sm opacity-90">Wildlife wonders in Tanzania's national parks</p> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Story Card 4 --> | |
| <article class="group cursor-pointer transform transition-all duration-300 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://static/photos/technology/640x360/5" alt="Tokyo Nights" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 text-white"> | |
| <span class="inline-block bg-sunset-500 px-3 py-1 rounded-full text-xs font-semibold mb-2">Asia</span> | |
| <h3 class="text-2xl font-serif font-bold mb-2">Tokyo: Future Meets Tradition</h3> | |
| <p class="text-sm opacity-90">Neon lights and ancient temples in harmony</p> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Story Card 5 --> | |
| <article class="group cursor-pointer transform transition-all duration-300 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://static.photos/gradient/640x360/6" alt="New York Skyline" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 text-white"> | |
| <span class="inline-block bg-sunset-500 px-3 py-1 rounded-full text-xs font-semibold mb-2">Americas</span> | |
| <h3 class="text-2xl font-serif font-bold mb-2">New York: City That Never Sleeps</h3> | |
| <p class="text-sm opacity-90">Concrete jungle where dreams are made</p> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Story Card 6 --> | |
| <article class="group cursor-pointer transform transition-all duration-300 hover:scale-105"> | |
| <div class="relative overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://static.photos/outdoor/640x360/7" alt="Iceland Adventure" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-300"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 text-white"> | |
| <span class="inline-block bg-sunset-500 px-3 py-1 rounded-full text-xs font-semibold mb-2">Europe</span> | |
| <h3 class="text-2xl font-serif font-bold mb-2">Iceland: Land of Fire & Ice</h3> | |
| <p class="text-sm opacity-90">Chasing Northern Lights and volcanic wonders</p> | |
| </div> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive World Map --> | |
| <section class="py-20 px-4 bg-ocean-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-4">Our Journey Map</h2> | |
| <p class="text-xl text-gray-600">Click on the markers to explore our adventures</p> | |
| </div> | |
| <div class="relative bg-white rounded-2xl shadow-xl p-8"> | |
| <div id="worldMap" class="relative h-96 md:h-[500px] bg-gradient-to-b from-blue-100 to-blue-200 rounded-xl overflow-hidden"> | |
| <!-- Simple World Map Visualization --> | |
| <svg viewBox="0 0 1000 500" class="w-full h-full"> | |
| <!-- Simplified continent shapes --> | |
| <path d="M 150 200 Q 200 180 250 200 T 350 220 L 340 280 Q 280 300 220 280 Z" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/> | |
| <path d="M 400 180 Q 450 160 500 180 T 600 200 L 590 260 Q 530 280 470 260 Z" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/> | |
| <path d="M 700 220 Q 750 200 800 220 T 850 240 L 840 300 Q 800 320 750 300 Z" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/> | |
| <path d="M 200 320 Q 250 300 300 320 T 400 340 L 390 400 Q 330 420 270 400 Z" fill="#e5e7eb" stroke="#9ca3af" stroke-width="2"/> | |
| <!-- Location Markers --> | |
| <g class="location-marker cursor-pointer" data-location="Paris, France"> | |
| <circle cx="450" cy="200" r="8" fill="#14b8a6" stroke="white" stroke-width="3"> | |
| <animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/> | |
| </circle> | |
| <text x="450" y="185" text-anchor="middle" class="text-xs fill-gray-700 font-semibold">Paris</text> | |
| </g> | |
| <g class="location-marker cursor-pointer" data-location="Bali, Indonesia"> | |
| <circle cx="750" cy="320" r="8" fill="#14b8a6" stroke="white" stroke-width="3"> | |
| <animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/> | |
| </circle> | |
| <text x="750" y="305" text-anchor="middle" class="text-xs fill-gray-700 font-semibold">Bali</text> | |
| </g> | |
| <g class="location-marker cursor-pointer" data-location="Tokyo, Japan"> | |
| <circle cx="820" cy="240" r="8" fill="#14b8a6" stroke="white" stroke-width="3"> | |
| <animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/> | |
| </circle> | |
| <text x="820" y="225" text-anchor="middle" class="text-xs fill-gray-700 font-semibold">Tokyo</text> | |
| </g> | |
| <g class="location-marker cursor-pointer" data-location="New York, USA"> | |
| <circle cx="250" cy="220" r="8" fill="#14b8a6" stroke="white" stroke-width="3"> | |
| <animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/> | |
| </circle> | |
| <text x="250" y="205" text-anchor="middle" class="text-xs fill-gray-700 font-semibold">New York</text> | |
| </g> | |
| <g class="location-marker cursor-pointer" data-location="Reykjavik, Iceland"> | |
| <circle cx="400" cy="140" r="8" fill="#14b8a6" stroke="white" stroke-width="3"> | |
| <animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/> | |
| </circle> | |
| <text x="400" y="125" text-anchor="middle" class="text-xs fill-gray-700 font-semibold">Reykjavik</text> | |
| </g> | |
| <g class="location-marker cursor-pointer" data-location="Serengeti, Tanzania"> | |
| <circle cx="520" cy="380" r="8" fill="#14b8a6" stroke="white" stroke-width="3"> | |
| <animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/> | |
| </circle> | |
| <text x="520" y="365" text-anchor="middle" class="text-xs fill-gray-700 font-semibold">Serengeti</text> | |
| </g> | |
| </svg> | |
| </div> | |
| <div id="locationInfo" class="mt-6 p-4 bg-ocean-100 rounded-lg hidden"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2"></h3> | |
| <p class="text-gray-700"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Travel Tips Section --> | |
| <section class="py-20 px-4 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-4">Travel Tips & Tricks</h2> | |
| <p class="text-xl text-gray-600">Insider advice for your next adventure</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-gradient-to-br from-ocean-50 to-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-ocean-500 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="compass" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Navigation Made Easy</h3> | |
| <p class="text-gray-600 mb-4">Download offline maps before you travel. Google Maps and Maps.me are lifesavers in areas with poor connectivity.</p> | |
| <a href="#" class="text-ocean-600 font-semibold hover:text-ocean-700 transition-colors">Read more →</a> | |
| </div> | |
| <div class="bg-gradient-to-br from-sunset-50 to-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-sunset-500 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="shield" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Stay Safe Abroad</h3> | |
| <p class="text-gray-600 mb-4">Always share your itinerary with someone back home and keep digital copies of important documents.</p> | |
| <a href="#" class="text-sunset-600 font-semibold hover:text-sunset-700 transition-colors">Read more →</a> | |
| </div> | |
| <div class="bg-gradient-to-br from-ocean-50 to-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-ocean-500 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="dollar-sign" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Smart Budgeting</h3> | |
| <p class="text-gray-600 mb-4">Use travel credit cards with no foreign transaction fees and always carry some local currency.</p> | |
| <a href="#" class="text-ocean-600 font-semibold hover:text-ocean-700 transition-colors">Read more →</a> | |
| </div> | |
| <div class="bg-gradient-to-br from-sunset-50 to-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-sunset-500 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="camera" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Capture Memories</h3> | |
| <p class="text-gray-600 mb-4">Wake up early for golden hour photography and don't forget to put the camera down sometimes to just enjoy.</p> | |
| <a href="#" class="text-sunset-600 font-semibold hover:text-sunset-700 transition-colors">Read more →</a> | |
| </div> | |
| <div class="bg-gradient-to-br from-ocean-50 to-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-ocean-500 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="globe" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Cultural Etiquette</h3> | |
| <p class="text-gray-600 mb-4">Learn basic greetings and customs. A simple "hello" in the local language goes a long way.</p> | |
| <a href="#" class="text-ocean-600 font-semibold hover:text-ocean-700 transition-colors">Read more →</a> | |
| </div> | |
| <div class="bg-gradient-to-br from-sunset-50 to-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-sunset-500 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="package" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Packing Hacks</h3> | |
| <p class="text-gray-600 mb-4">Roll clothes instead of folding, use packing cubes, and always bring a universal adapter.</p> | |
| <a href="#" class="text-sunset-600 font-semibold hover:text-sunset-700 transition-colors">Read more →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gear Recommendations --> | |
| <section class="py-20 px-4 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-4">Travel Gear We Love</h2> | |
| <p class="text-xl text-gray-600">Essential equipment tested on our adventures</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all hover:-translate-y-1"> | |
| <img src="https://static.photos/technology/320x240/8" alt="Camera" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-gray-900 mb-2">Sony A7III Camera</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <span class="text-sm text-gray-600 ml-2">(5.0)</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Perfect mirrorless camera for travel photography</p> | |
| <span class="text-2xl font-bold text-ocean-600">$1,999</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all hover:-translate-y-1"> | |
| <img src="https://static.photos/office/320x240/9" alt="Backpack" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-gray-900 mb-2">Osprey Farpoint 40</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <span class="text-sm text-gray-600 ml-2">(4.8)</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Durable carry-on backpack with laptop sleeve</p> | |
| <span class="text-2xl font-bold text-ocean-600">$160</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all hover:-translate-y-1"> | |
| <img src="https://static.photos/industry/320x240/10" alt="Shoes" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-gray-900 mb-2">Allbirds Tree Runners</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <span class="text-sm text-gray-600 ml-2">(4.6)</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">Comfortable, lightweight, and eco-friendly</p> | |
| <span class="text-2xl font-bold text-ocean-600">$105</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all hover:-translate-y-1"> | |
| <img src="https://static.photos/workspace/320x240/11" alt="Power Bank" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-gray-900 mb-2">Anker PowerCore 20000</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </div> | |
| <span class="text-sm text-gray-600 ml-2">(4.5)</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-3">High-capacity portable charger with fast charging</p> | |
| <span class="text-2xl font-bold text-ocean-600">$50</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Subscription --> | |
| <section class="py-20 px-4 bg-gradient-to-br from-ocean-600 to-ocean-800"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 md:p-12"> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold text-white mb-4">Join Our Journey</h2> | |
| <p class="text-xl text-white/90 mb-8">Get exclusive travel stories, tips, and photo galleries delivered to your inbox</p> | |
| <form id="subscriptionForm" class="max-w-md mx-auto"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <input | |
| type="email" | |
| id="emailInput" | |
| placeholder="Enter your email address" | |
| class="flex-1 px-6 py-4 rounded-full text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-white/30" | |
| required | |
| > | |
| <button | |
| type="submit" | |
| class="bg-sunset-500 hover:bg-sunset-600 text-white px-8 py-4 rounded-full font-semibold transition-all transform hover:scale-105 whitespace-nowrap" | |
| > | |
| Subscribe Now | |
| </button> | |
| </div> | |
| <p class="text-white/70 text-sm mt-4">Join 10,000+ travel enthusiasts. No spam, unsubscribe anytime.</p> | |
| </form> | |
| <div id="subscriptionMessage" class="mt-6 hidden"> | |
| <p class="text-green-300 font-semibold">🎉 Welcome aboard! Check your email to confirm your subscription.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |