Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Wanderlust - Travel Destination Manager</title> | |
| <script src="https://cdn.tailwindcss.com/3.4.1"></script> | |
| <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script> | |
| <style> | |
| /* Custom CSS for elements that need more precise control */ | |
| .destination-card:hover .destination-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .destination-overlay { | |
| transition: all 0.3s ease; | |
| transform: translateY(20px); | |
| } | |
| .search-box:focus-within { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
| } | |
| .map-container { | |
| height: 400px; | |
| background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=0,0&zoom=2&size=800x400&maptype=roadmap&key=YOUR_API_KEY'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-globe-americas text-blue-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-blue-600">Wanderlust</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Destinations</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Trips</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Destination | |
| </button> | |
| <div class="ml-4 relative flex-shrink-0"> | |
| <div> | |
| <button class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="sm:hidden hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Destinations</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Trips</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a> | |
| <div class="mt-4 pl-3"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Destination | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative bg-blue-700 overflow-hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="relative z-10 pb-8 bg-blue-700 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> | |
| <div class="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden"> | |
| <div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> | |
| <div class="sm:text-center lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> | |
| <span class="block">Discover Your Next</span> | |
| <span class="block text-blue-200">Adventure</span> | |
| </h1> | |
| <p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Plan, organize and manage your dream destinations with our comprehensive travel management system. | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> | |
| Explore Now | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-play mr-2"></i> Watch Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> | |
| <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1368&q=80" alt=""> | |
| </div> | |
| </div> | |
| <!-- Search and Filter Section --> | |
| <div class="bg-white shadow-md -mt-8 mx-auto max-w-5xl rounded-lg relative z-20 p-6"> | |
| <div class="search-box border border-gray-200 rounded-lg p-4 transition-all duration-300"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Find Your Perfect Destination</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-map-marker-alt text-gray-400"></i> | |
| </div> | |
| <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Where to?"> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="far fa-calendar-alt text-gray-400"></i> | |
| </div> | |
| <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="When?"> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-user-friends text-gray-400"></i> | |
| </div> | |
| <select class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option>Travelers</option> | |
| <option>1 Traveler</option> | |
| <option>2 Travelers</option> | |
| <option>3-5 Travelers</option> | |
| <option>6+ Travelers</option> | |
| </select> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-search mr-2"></i> Search | |
| </button> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="text-sm text-gray-600 mr-2">Filter by:</span> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full hover:bg-blue-200 transition">Beach</button> | |
| <button class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full hover:bg-green-200 transition">Mountain</button> | |
| <button class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full hover:bg-purple-200 transition">City</button> | |
| <button class="px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded-full hover:bg-yellow-200 transition">Historical</button> | |
| <button class="px-3 py-1 bg-red-100 text-red-800 text-xs font-medium rounded-full hover:bg-red-200 transition">Adventure</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Packages Section --> | |
| <div class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-900">Travel Packages</h2> | |
| <p class="mt-4 max-w-2xl text-gray-500 mx-auto"> | |
| Choose from our carefully curated travel packages for the perfect getaway | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Package 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow"> | |
| <div class="relative h-48"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="European Tour"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow"> | |
| <span class="text-xs font-bold bg-blue-500 text-white px-2 py-1 rounded-full">POPULAR</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg font-bold text-gray-900">European Explorer</h3> | |
| <span class="text-blue-600 font-bold">$2,499</span> | |
| </div> | |
| <p class="mt-2 text-gray-600 text-sm">10 days across 4 countries</p> | |
| <div class="mt-4 flex items-center"> | |
| <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-500">Paris, Rome, Barcelona, Amsterdam</span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Flights included</li> | |
| <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 4-star hotels</li> | |
| <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Daily breakfast</li> | |
| </ul> | |
| </div> | |
| <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300"> | |
| Book Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Package 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow"> | |
| <div class="relative h-48"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1503917988258-f87a78e3c995?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Asian Adventure"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg font-bold text-gray-900">Asian Adventure</h3> | |
| <span class="text-blue-600 font-bold">$1,799</span> | |
| </div> | |
| <p class="mt-2 text-gray-600 text-sm">14 days across 3 countries</p> | |
| <div class="mt-4 flex items-center"> | |
| <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-500">Bali, Tokyo, Bangkok</span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Flights included</li> | |
| <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 5-star resorts</li> | |
| <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> All meals included</li> | |
| </ul> | |
| </div> | |
| <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300"> | |
| Book Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Package 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow"> | |
| <div class="relative h-48"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Caribbean Cruise"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow"> | |
| <span class="text-xs font-bold bg-green-500 text-white px-2 py-1 rounded-full">NEW</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg font-bold text-gray-900">Caribbean Cruise</h3> | |
| <span class="text-blue-600 font-bold">$1,299</span> | |
| </div> | |
| <p class="mt-2 text-gray-600 text-sm">7-day luxury cruise</p> | |
| <div class="mt-4 flex items-center"> | |
| <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> | |
| <span class="text-sm text-gray-500">Bahamas, Jamaica, Cayman Islands</span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> All-inclusive</li> | |
| <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Premium cabin</li> | |
| <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Shore excursions</li> | |
| </ul> | |
| </div> | |
| <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300"> | |
| Book Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| View All Packages <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Popular Destinations Section --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900">Popular Destinations</h2> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> | |
| View all <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Destination Card 1 --> | |
| <div class="destination-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1503917988258-f87a78e3c995?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1368&q=80" alt="Bali, Indonesia"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="destination-overlay absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 flex items-end p-4"> | |
| <div> | |
| <div class="flex items-center text-white mb-1"> | |
| <i class="fas fa-map-marker-alt text-sm mr-1"></i> | |
| <span class="text-sm">Bali, Indonesia</span> | |
| </div> | |
| <h3 class="text-white font-semibold text-lg">Tropical Paradise</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Bali, Indonesia</h3> | |
| <p class="text-gray-500 text-sm mt-1">Tropical beaches & vibrant culture</p> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium"> | |
| 4.8 <i class="fas fa-star ml-1"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-gray-900 font-medium">$1,200</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| View details <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Destination Card 2 --> | |
| <div class="destination-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1368&q=80" alt="Paris, France"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="destination-overlay absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 flex items-end p-4"> | |
| <div> | |
| <div class="flex items-center text-white mb-1"> | |
| <i class="fas fa-map-marker-alt text-sm mr-1"></i> | |
| <span class="text-sm">Paris, France</span> | |
| </div> | |
| <h3 class="text-white font-semibold text-lg">City of Lights</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Paris, France</h3> | |
| <p class="text-gray-500 text-sm mt-1">Romantic city with rich history</p> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium"> | |
| 4.9 <i class="fas fa-star ml-1"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-gray-900 font-medium">$1,500</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| View details <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Destination Card 3 --> | |
| <div class="destination-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1523482580672-f109ba8cb9be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1368&q=80" alt="Tokyo, Japan"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="destination-overlay absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 flex items-end p-4"> | |
| <div> | |
| <div class="flex items-center text-white mb-1"> | |
| <i class="fas fa-map-marker-alt text-sm mr-1"></i> | |
| <span class="text-sm">Tokyo, Japan</span> | |
| </div> | |
| <h3 class="text-white font-semibold text-lg">Modern Metropolis</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Tokyo, Japan</h3> | |
| <p class="text-gray-500 text-sm mt-1">Futuristic city with ancient traditions</p> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium"> | |
| 4.7 <i class="fas fa-star ml-1"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-gray-900 font-medium">$1,800</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| View details <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Section --> | |
| <div class="bg-gray-100 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Plan Your Perfect Trip | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Everything you need to organize your travel destinations in one place. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4"> | |
| <i class="fas fa-map-marked-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Destination Management</h3> | |
| <p class="text-gray-500"> | |
| Easily add, organize and categorize all your dream destinations with our intuitive interface. | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mb-4"> | |
| <i class="fas fa-calendar-check text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Trip Planning</h3> | |
| <p class="text-gray-500"> | |
| Create detailed itineraries with dates, activities, and notes for each destination. | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white mb-4"> | |
| <i class="fas fa-images text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Photo Gallery</h3> | |
| <p class="text-gray-500"> | |
| Upload and organize photos from your travels to relive your favorite moments. | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white mb-4"> | |
| <i class="fas fa-star text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Ratings & Reviews</h3> | |
| <p class="text-gray-500"> | |
| Rate and review destinations to remember what you loved (or didn't) about each place. | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white mb-4"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Collaboration</h3> | |
| <p class="text-gray-500"> | |
| Share your travel plans with friends and family and plan trips together. | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4"> | |
| <i class="fas fa-mobile-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Mobile Access</h3> | |
| <p class="text-gray-500"> | |
| Access your travel plans on the go with our mobile-friendly interface. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Map Section --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="mb-8 lg:mb-0"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Visualize Your Travels | |
| </h2> | |
| <p class="mt-3 max-w-3xl text-lg text-gray-500"> | |
| See all your visited and planned destinations on an interactive map. Track your travel history and discover new places to explore. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"> | |
| View My Map | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="map-container rounded-xl shadow-xl overflow-hidden"> | |
| <!-- Map would be rendered here with JavaScript --> | |
| <div class="h-full w-full flex items-center justify-center bg-gray-200"> | |
| <div class="text-center p-6"> | |
| <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-4"></i> | |
| <h3 class="text-lg font-medium text-gray-700">Interactive Travel Map</h3> | |
| <p class="mt-2 text-gray-500">Your visited and planned destinations will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-blue-700 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-blue-300 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| What travelers are saying | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium text-gray-900">Sarah Johnson</h4> | |
| <div class="flex text-yellow-400 text-xs mt-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "This platform completely transformed how I plan my trips. Being able to see all my potential destinations in one place is a game changer!" | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium text-gray-900">Michael Chen</h4> | |
| <div class="flex text-yellow-400 text-xs mt-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "As a frequent traveler, I've tried many apps. Wanderlust stands out for its simplicity and powerful features. The map visualization is brilliant." | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium text-gray-900">David Rodriguez</h4> | |
| <div class="flex text-yellow-400 text-xs mt-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "Planning our family vacation was never this easy. The collaboration features allowed everyone to contribute ideas and we ended up with the perfect itinerary." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| <span class="block">Ready to start your next adventure?</span> | |
| <span class="block text-blue-600">Create your free account today.</span> | |
| </h2> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"> | |
| Get started | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50"> | |
| Learn more | |
| <i class="fas fa-info-circle ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Support</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">GDPR</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> | |
| <div class="flex space-x-6 md:order-2"> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Facebook</span> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Instagram</span> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Twitter</span> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">YouTube</span> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> | |
| © 2023 Wanderlust. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Add Destination Modal (hidden by default) --> | |
| <div class="fixed z-50 inset-0 overflow-y-auto hidden" id="addDestinationModal" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"> | |
| <i class="fas fa-map-marker-alt text-blue-600"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"> | |
| Add New Destination | |
| </h3> | |
| <div class="mt-2"> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="destination-name" class="block text-sm font-medium text-gray-700">Destination Name</label> | |
| <input type="text" id="destination-name" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="destination-location" class="block text-sm font-medium text-gray-700">Location</label> | |
| <input type="text" id="destination-location" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="destination-type" class="block text-sm font-medium text-gray-700">Type</label> | |
| <select id="destination-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>Beach</option> | |
| <option>Mountain</option> | |
| <option>City</option> | |
| <option>Historical</option> | |
| <option>Adventure</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="destination-description" class="block text-sm font-medium text-gray-700">Description</label> | |
| <textarea id="destination-description" rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></textarea> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Save Destination | |
| </button> | |
| <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" id="cancel-add-destination"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Add destination modal | |
| const addDestinationButtons = document.querySelectorAll('[data-target="addDestinationModal"]'); | |
| const addDestinationModal = document.getElementById('addDestinationModal'); | |
| const cancelAddDestination = document.getElementById('cancel-add-destination'); | |
| // Show modal | |
| addDestinationButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| addDestinationModal.classList.remove('hidden'); | |
| }); | |
| }); | |
| // Hide modal | |
| cancelAddDestination.addEventListener('click', function() { | |
| addDestinationModal.classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', function(event) { | |
| if (event.target === addDestinationModal) { | |
| addDestinationModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Favorite button functionality | |
| const favoriteButtons = document.querySelectorAll('.fa-heart'); | |
| favoriteButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| if (this.classList.contains('far')) { | |
| this.classList.remove('far'); | |
| this.classList.add('fas', 'text-red-500'); | |
| } else { | |
| this.classList.remove('fas', 'text-red-500'); | |
| this.classList.add('far'); | |
| } | |
| }); | |
| }); | |
| // Simple destination search functionality | |
| const searchInput = document.querySelector('input[placeholder="Where to?"]'); | |
| const destinationCards = document.querySelectorAll('.destination-card'); | |
| searchInput.addEventListener('input', function() { | |
| const searchTerm = this.value.toLowerCase(); | |
| destinationCards.forEach(card => { | |
| const title = card.querySelector('h3').textContent.toLowerCase(); | |
| const description = card.querySelector('p').textContent.toLowerCase(); | |
| if (title.includes(searchTerm) || description.includes(searchTerm)) { | |
| card.style.display = 'block'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| // Filter buttons functionality | |
| const filterButtons = document.querySelectorAll('.bg-blue-100, .bg-green-100, .bg-purple-100, .bg-yellow-100, .bg-red-100'); | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| filterButtons.forEach(btn => { | |
| btn.classList.remove('bg-blue-200', 'bg-green-200', 'bg-purple-200', 'bg-yellow-200', 'bg-red-200'); | |
| }); | |
| // Add active class to clicked button | |
| const colorClass = Array.from(this.classList).find(cls => cls.startsWith('bg-') && cls.endsWith('-100')); | |
| if (colorClass) { | |
| const activeColorClass = colorClass.replace('-100', '-200'); | |
| this.classList.add(activeColorClass); | |
| } | |
| // Filter destinations (simplified example) | |
| const filter = this.textContent.trim(); | |
| destinationCards.forEach(card => { | |
| // In a real app, you would filter based on actual data attributes | |
| card.style.display = 'block'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pramai/wanderlust" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |