Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WanderlustAI - Your AI Travel Companion</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="font-poppins bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="py-16 px-4 md:px-8 max-w-6xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Discover Your Next Adventure</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">AI-powered travel planning for unforgettable experiences around the globe</p> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="bg-white rounded-2xl shadow-lg p-6 mb-12 max-w-4xl mx-auto"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Tell us your dream vacation</h3> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <input | |
| type="text" | |
| placeholder="I want to go to a sunny place with beaches and nightlife..." | |
| class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" | |
| > | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center"> | |
| <i data-feather="search" class="mr-2"></i> Find My Destination | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Interactive Globe --> | |
| <div class="bg-white rounded-2xl shadow-lg p-6 max-w-4xl mx-auto"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4 text-center">Or explore our interactive globe</h3> | |
| <div class="relative h-96 rounded-xl overflow-hidden bg-gradient-to-br from-blue-100 to-indigo-200 flex items-center justify-center"> | |
| <div class="absolute w-64 h-64 rounded-full bg-gradient-to-r from-blue-400 to-indigo-500 opacity-20 animate-pulse"></div> | |
| <div class="absolute w-48 h-48 rounded-full bg-gradient-to-r from-indigo-400 to-purple-500 opacity-30 animate-ping"></div> | |
| <div class="relative z-10 text-center"> | |
| <i data-feather="globe" class="w-24 h-24 text-indigo-600 mx-auto mb-4"></i> | |
| <p class="text-gray-700 font-medium">Interactive 3D Globe Coming Soon</p> | |
| <p class="text-gray-500 mt-2">Click and drag to explore destinations</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Destinations --> | |
| <section class="py-16 px-4 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Popular Destinations</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Destination Card 1 --> | |
| <div class="bg-gradient-to-br from-white to-blue-50 rounded-2xl shadow-md overflow-hidden transition-transform duration-300 hover:scale-105"> | |
| <a href="paris.html" class="block"> | |
| <div class="h-48 bg-gradient-to-r from-blue-400 to-indigo-500 flex items-center justify-center"> | |
| <img src="http://static.photos/cityscape/320x240/1" alt="Paris" class="h-full w-full object-cover"> | |
| </div> | |
| </a> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Paris, France</h3> | |
| <p class="text-gray-600 mb-4">The City of Light awaits with its iconic landmarks and romantic atmosphere.</p> | |
| <a href="paris.html" class="text-indigo-600 font-medium flex items-center"> | |
| Explore Paris | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Destination Card 2 --> | |
| <div class="bg-gradient-to-br from-white to-blue-50 rounded-2xl shadow-md overflow-hidden transition-transform duration-300 hover:scale-105"> | |
| <a href="tokyo.html" class="block"> | |
| <div class="h-48 bg-gradient-to-r from-red-400 to-orange-500 flex items-center justify-center"> | |
| <img src="http://static.photos/travel/320x240/2" alt="Tokyo" class="h-full w-full object-cover"> | |
| </div> | |
| </a> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Tokyo, Japan</h3> | |
| <p class="text-gray-600 mb-4">Experience the perfect blend of tradition and modernity in Japan's capital.</p> | |
| <a href="tokyo.html" class="text-indigo-600 font-medium flex items-center"> | |
| Explore Tokyo | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Destination Card 3 --> | |
| <div class="bg-gradient-to-br from-white to-blue-50 rounded-2xl shadow-md overflow-hidden transition-transform duration-300 hover:scale-105"> | |
| <a href="newyork.html" class="block"> | |
| <div class="h-48 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center"> | |
| <img src="http://static.photos/nature/320x240/3" alt="New York" class="h-full w-full object-cover"> | |
| </div> | |
| </a> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">New York, USA</h3> | |
| <p class="text-gray-600 mb-4">The city that never sleeps offers endless excitement and cultural experiences.</p> | |
| <a href="newyork.html" class="text-indigo-600 font-medium flex items-center"> | |
| Explore NYC | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-16 px-4 bg-gradient-to-br from-indigo-50 to-blue-100"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">How GlobeTrotter AI Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-2xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="search" class="text-indigo-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Describe Your Dream Trip</h3> | |
| <p class="text-gray-600">Tell us your preferences and we'll find the perfect destination for you.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="map" class="text-indigo-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Explore Recommendations</h3> | |
| <p class="text-gray-600">Get detailed information about your destination including itineraries and fun facts.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="headphones" class="text-indigo-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Listen & Go</h3> | |
| <p class="text-gray-600">Enjoy your personalized travel guide as a podcast for on-the-go exploration.</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> | |