| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TravelGenius - AI-Powered Trip Planner</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .trip-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .smooth-transition { |
| transition: all 0.3s ease; |
| } |
| .map-container { |
| height: 400px; |
| border-radius: 1rem; |
| } |
| .trip-timeline li:not(:last-child)::after { |
| content: ""; |
| position: absolute; |
| left: 1rem; |
| top: 2.5rem; |
| height: 100%; |
| width: 2px; |
| background: #e2e8f0; |
| } |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <nav class="bg-white shadow-md"> |
| <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"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-route text-indigo-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">TravelGenius</span> |
| </div> |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
| <a href="#" class="border-indigo-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">Planner</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">Groups</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">Deals</a> |
| </div> |
| </div> |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> |
| <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none"> |
| <span class="sr-only">Notifications</span> |
| <i class="fas fa-bell h-6 w-6"></i> |
| </button> |
| <div class="ml-3 relative"> |
| <div> |
| <button id="user-menu" class="flex text-sm rounded-full focus:outline-none" aria-expanded="false" aria-haspopup="true"> |
| <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> |
| <button class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| Create Trip |
| </button> |
| </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-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> |
| <span class="sr-only">Open main menu</span> |
| <i class="fas fa-bars h-6 w-6"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="gradient-bg text-white"> |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> |
| AI-Powered Travel Planning |
| </h1> |
| <p class="mt-6 max-w-lg mx-auto text-xl"> |
| Let our smart algorithms create the perfect trip tailored to your preferences, budget, and interests. |
| </p> |
| <div class="mt-10 flex justify-center"> |
| <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-indigo-600 bg-white hover:bg-gray-50"> |
| Start Planning |
| </a> |
| </div> |
| <div class="ml-3 inline-flex"> |
| <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-indigo-500 bg-opacity-60 hover:bg-opacity-70"> |
| <i class="fas fa-play mr-2"></i> Watch Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="bg-white shadow rounded-lg p-6"> |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Create Your Perfect Trip</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div> |
| <label for="destination" class="block text-sm font-medium text-gray-700">Destination</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <input type="text" id="destination" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md" placeholder="Where to?"> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
| <i class="fas fa-map-marker-alt text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="dates" class="block text-sm font-medium text-gray-700">Travel Dates</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <input type="text" id="dates" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md" placeholder="Select dates"> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
| <i class="fas fa-calendar-alt text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="travelers" class="block text-sm font-medium text-gray-700">Travelers</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <select id="travelers" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"> |
| <option>1 Traveler</option> |
| <option>2 Travelers</option> |
| <option>3-5 Travelers</option> |
| <option>6-10 Travelers</option> |
| <option>10+ Travelers</option> |
| </select> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
| <i class="fas fa-users text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="budget" class="block text-sm font-medium text-gray-700">Budget</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <select id="budget" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"> |
| <option>Economy ($)</option> |
| <option>Mid-range ($$)</option> |
| <option>Luxury ($$$)</option> |
| <option>No budget limit</option> |
| </select> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
| <i class="fas fa-wallet text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="travel-style" class="block text-sm font-medium text-gray-700">Travel Style</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <select id="travel-style" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"> |
| <option>Adventure</option> |
| <option>Relaxation</option> |
| <option>Cultural</option> |
| <option>Food & Wine</option> |
| <option>Family</option> |
| <option>Romantic</option> |
| <option>Business</option> |
| </select> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
| <i class="fas fa-umbrella-beach text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="transportation" class="block text-sm font-medium text-gray-700">Transportation</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <select id="transportation" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"> |
| <option>Flight</option> |
| <option>Train</option> |
| <option>Car</option> |
| <option>Bus</option> |
| <option>Ship/Cruise</option> |
| <option>Bike</option> |
| <option>Walking</option> |
| <option>Mixed</option> |
| </select> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
| <i class="fas fa-car text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-6"> |
| <button id="advanced-options-btn" class="text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none"> |
| <i class="fas fa-plus-circle mr-1"></i> Show Advanced Options |
| </button> |
| |
| <div id="advanced-options" class="hidden mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div> |
| <label for="accommodation" class="block text-sm font-medium text-gray-700">Accommodation</label> |
| <select id="accommodation" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
| <option>Any</option> |
| <option>Hotel</option> |
| <option>Hostel</option> |
| <option>Apartment</option> |
| <option>Resort</option> |
| <option>Villa</option> |
| <option>Camping</option> |
| </select> |
| </div> |
| |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700">Interests</label> |
| <div class="mt-2 space-y-2"> |
| <div class="flex items-center"> |
| <input id="history" name="interests" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> |
| <label for="history" class="ml-2 block text-sm text-gray-700">History</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="nature" name="interests" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> |
| <label for="nature" class="ml-2 block text-sm text-gray-700">Nature</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="shopping" name="interests" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> |
| <label for="shopping" class="ml-2 block text-sm text-gray-700">Shopping</label> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label for="dietary" class="block text-sm font-medium text-gray-700">Dietary Preferences</label> |
| <select id="dietary" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
| <option>No restrictions</option> |
| <option>Vegetarian</option> |
| <option>Vegan</option> |
| <option>Gluten-free</option> |
| <option>Halal</option> |
| <option>Kosher</option> |
| </select> |
| </div> |
| |
| |
| <div> |
| <label for="activity-level" class="block text-sm font-medium text-gray-700">Activity Level</label> |
| <select id="activity-level" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
| <option>Relaxed</option> |
| <option>Moderate</option> |
| <option>Active</option> |
| <option>Very Active</option> |
| </select> |
| </div> |
| |
| |
| <div> |
| <label for="group-type" class="block text-sm font-medium text-gray-700">Group Type</label> |
| <select id="group-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
| <option>Solo</option> |
| <option>Couple</option> |
| <option>Family</option> |
| <option>Friends</option> |
| <option>Business</option> |
| </select> |
| </div> |
| |
| |
| <div> |
| <label for="special-req" class="block text-sm font-medium text-gray-700">Special Requirements</label> |
| <textarea id="special-req" rows="2" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="Accessibility needs, pet-friendly, etc."></textarea> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 flex justify-end"> |
| <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| Reset |
| </button> |
| <button type="button" id="generate-plan" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| <i class="fas fa-magic mr-2 mt-0.5"></i> Generate Plan |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="ai-processing-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-50"> |
| <div class="bg-white rounded-lg p-8 max-w-md w-full text-center"> |
| <div class="animate-pulse mb-4"> |
| <i class="fas fa-brain text-indigo-600 text-5xl"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">AI is crafting your perfect trip</h3> |
| <p class="text-sm text-gray-500 mb-6">Analyzing millions of options to find the best matches for your preferences...</p> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="trip-plan" class="hidden max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="bg-white shadow rounded-lg overflow-hidden"> |
| <div class="p-6 border-b border-gray-200"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-2xl font-bold text-gray-900">Your AI-Generated Trip Plan</h2> |
| <div class="flex space-x-3"> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-share-alt text-gray-500"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-download text-gray-500"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-print text-gray-500"></i> |
| </button> |
| </div> |
| </div> |
| <div class="mt-4 flex flex-wrap gap-2"> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> |
| <i class="fas fa-calendar-alt mr-1"></i> 7 days |
| </span> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| <i class="fas fa-wallet mr-1"></i> $$ Mid-range |
| </span> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> |
| <i class="fas fa-users mr-1"></i> Couple |
| </span> |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> |
| <i class="fas fa-umbrella-beach mr-1"></i> Relaxation |
| </span> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3"> |
| |
| <div class="lg:col-span-2 p-6 border-b lg:border-b-0 lg:border-r border-gray-200"> |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Trip Overview</h3> |
| |
| <div class="map-container bg-gray-200 mb-6 flex items-center justify-center"> |
| <i class="fas fa-map-marked-alt text-4xl text-gray-400"></i> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-indigo-100 rounded-md p-2"> |
| <i class="fas fa-plane-departure text-indigo-600"></i> |
| </div> |
| <div class="ml-3"> |
| <h4 class="text-sm font-medium text-gray-900">Flights</h4> |
| <p class="text-sm text-gray-500">Round-trip from NYC to Rome</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-green-100 rounded-md p-2"> |
| <i class="fas fa-hotel text-green-600"></i> |
| </div> |
| <div class="ml-3"> |
| <h4 class="text-sm font-medium text-gray-900">Accommodation</h4> |
| <p class="text-sm text-gray-500">4-star hotel in city center</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-blue-100 rounded-md p-2"> |
| <i class="fas fa-car text-blue-600"></i> |
| </div> |
| <div class="ml-3"> |
| <h4 class="text-sm font-medium text-gray-900">Transport</h4> |
| <p class="text-sm text-gray-500">Private transfers included</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-purple-100 rounded-md p-2"> |
| <i class="fas fa-utensils text-purple-600"></i> |
| </div> |
| <div class="ml-3"> |
| <h4 class="text-sm font-medium text-gray-900">Dining</h4> |
| <p class="text-sm text-gray-500">5 restaurant reservations</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Daily Itinerary</h3> |
| |
| <ul class="trip-timeline space-y-8"> |
| <li class="relative pl-6"> |
| <div class="absolute left-0 top-0 flex items-center justify-center w-6 h-6 bg-indigo-100 rounded-full"> |
| <span class="text-xs font-bold text-indigo-600">1</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="text-sm font-medium text-gray-900">Day 1: Arrival in Rome</h4> |
| <div class="mt-2 space-y-3"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-0.5"> |
| <i class="fas fa-plane-arrival text-gray-400"></i> |
| </div> |
| <div class="ml-2"> |
| <p class="text-sm text-gray-700">Arrive at Fiumicino Airport (FCO) at 9:30 AM</p> |
| <p class="text-xs text-gray-500">Private transfer to hotel</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-0.5"> |
| <i class="fas fa-hotel text-gray-400"></i> |
| </div> |
| <div class="ml-2"> |
| <p class="text-sm text-gray-700">Check-in at Hotel Artemide</p> |
| <p class="text-xs text-gray-500">Free time to relax</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-0.5"> |
| <i class="fas fa-utensils text-gray-400"></i> |
| </div> |
| <div class="ml-2"> |
| <p class="text-sm text-gray-700">Dinner at Roscioli</p> |
| <p class="text-xs text-gray-500">8:00 PM reservation</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </li> |
| <li class="relative pl-6"> |
| <div class="absolute left-0 top-0 flex items-center justify-center w-6 h-6 bg-indigo-100 rounded-full"> |
| <span class="text-xs font-bold text-indigo-600">2</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="text-sm font-medium text-gray-900">Day 2: Ancient Rome</h4> |
| <div class="mt-2 space-y-3"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-0.5"> |
| <i class="fas fa-landmark text-gray-400"></i> |
| </div> |
| <div class="ml-2"> |
| <p class="text-sm text-gray-700">Colosseum & Roman Forum Tour</p> |
| <p class="text-xs text-gray-500">9:00 AM - 12:00 PM (Skip-the-line tickets)</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-0.5"> |
| <i class="fas fa-utensils text-gray-400"></i> |
| </div> |
| <div class="ml-2"> |
| <p class="text-sm text-gray-700">Lunch at Trattoria Da Enzo</p> |
| <p class="text-xs text-gray-500">1:00 PM reservation</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-0.5"> |
| <i class="fas fa-gopuram text-gray-400"></i> |
| </div> |
| <div class="ml-2"> |
| <p class="text-sm text-gray-700">Pantheon & Piazza Navona</p> |
| <p class="text-xs text-gray-500">Self-guided exploration</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </li> |
| </ul> |
| |
| <div class="mt-6"> |
| <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| <i class="fas fa-plus mr-2"></i> Add More Days |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="p-6"> |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Trip Summary</h3> |
| |
| <div class="bg-gray-50 rounded-lg p-4 mb-6"> |
| <div class="flex justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-500">Total Cost</span> |
| <span class="text-sm font-bold text-gray-900">$3,245</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> |
| <span>Flights</span> |
| <span>$1,200</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> |
| <span>Accommodation</span> |
| <span>$1,400</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> |
| <span>Activities</span> |
| <span>$450</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500"> |
| <span>Transport</span> |
| <span>$195</span> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h4 class="text-sm font-medium text-gray-900 mb-2">Recommended Activities</h4> |
| <div class="space-y-3"> |
| <div class="flex items-start"> |
| <img src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Vatican Tour" class="flex-shrink-0 w-12 h-12 rounded-md object-cover"> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">Vatican Museums & Sistine Chapel</p> |
| <p class="text-xs text-gray-500">Skip-the-line guided tour</p> |
| <div class="mt-1 flex items-center text-xs text-gray-500"> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> 4.9 (1,245 reviews) |
| </div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <img src="https://images.unsplash.com/photo-1528728329032-2972f65dfb3f?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Cooking Class" class="flex-shrink-0 w-12 h-12 rounded-md object-cover"> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">Roman Pasta Cooking Class</p> |
| <p class="text-xs text-gray-500">Hands-on experience with local chef</p> |
| <div class="mt-1 flex items-center text-xs text-gray-500"> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> 4.8 (876 reviews) |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h4 class="text-sm font-medium text-gray-900 mb-2">Dining Recommendations</h4> |
| <div class="space-y-3"> |
| <div class="flex items-start"> |
| <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Restaurant" class="flex-shrink-0 w-12 h-12 rounded-md object-cover"> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">La Pergola</p> |
| <p class="text-xs text-gray-500">Michelin-starred rooftop dining</p> |
| <div class="mt-1 flex items-center text-xs text-gray-500"> |
| <i class="fas fa-utensils text-gray-400 mr-1"></i> Italian, Fine Dining |
| </div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Gelateria" class="flex-shrink-0 w-12 h-12 rounded-md object-cover"> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">Giolitti</p> |
| <p class="text-xs text-gray-500">Historic gelateria since 1900</p> |
| <div class="mt-1 flex items-center text-xs text-gray-500"> |
| <i class="fas fa-ice-cream text-gray-400 mr-1"></i> Gelato, Desserts |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="space-y-3"> |
| <button class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| <i class="fas fa-shopping-cart mr-2"></i> Book Entire Package |
| </button> |
| <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| <i class="fas fa-bookmark mr-2"></i> Save for Later |
| </button> |
| <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| <i class="fas fa-sync-alt mr-2"></i> Regenerate Plan |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| Why Choose TravelGenius? |
| </h2> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
| Our AI-powered platform takes the stress out of travel planning |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex-shrink-0 bg-indigo-100 rounded-md p-3 inline-flex"> |
| <i class="fas fa-brain text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mt-4">Smart AI Planning</h3> |
| <p class="mt-2 text-sm text-gray-500"> |
| Our algorithms analyze millions of data points to create personalized itineraries based on your unique preferences and constraints. |
| </p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex-shrink-0 bg-green-100 rounded-md p-3 inline-flex"> |
| <i class="fas fa-users text-green-600 text-xl"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mt-4">Group Collaboration</h3> |
| <p class="mt-2 text-sm text-gray-500"> |
| Plan trips with friends, family, or colleagues. Share ideas, vote on activities, and create the perfect group itinerary. |
| </p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex-shrink-0 bg-blue-100 rounded-md p-3 inline-flex"> |
| <i class="fas fa-bolt text-blue-600 text-xl"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mt-4">Real-Time Updates</h3> |
| <p class="mt-2 text-sm text-gray-500"> |
| Get instant notifications about flight changes, weather alerts, and local events that might affect your trip. |
| </p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex-shrink-0 bg-purple-100 rounded-md p-3 inline-flex"> |
| <i class="fas fa-wallet text-purple-600 text-xl"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mt-4">Budget Optimization</h3> |
| <p class="mt-2 text-sm text-gray-500"> |
| We find the best deals and optimize your spending across flights, hotels, and activities to maximize your travel budget. |
| </p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3 inline-flex"> |
| <i class="fas fa-map-marked-alt text-yellow-600 text-xl"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mt-4">Local Insights</h3> |
| <p class="mt-2 text-sm text-gray-500"> |
| Discover hidden gems and authentic experiences recommended by locals and frequent travelers. |
| </p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex-shrink-0 bg-red-100 rounded-md p-3 inline-flex"> |
| <i class="fas fa-lock text-red-600 text-xl"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mt-4">Secure Booking</h3> |
| <p class="mt-2 text-sm text-gray-500"> |
| Book everything in one place with our secure payment system and 24/7 customer support. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="gradient-bg text-white py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h2 class="text-3xl font-extrabold sm:text-4xl"> |
| What Travelers Are Saying |
| </h2> |
| </div> |
| |
| <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <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> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Sarah Johnson</div> |
| <div class="text-sm text-indigo-200">Family Traveler</div> |
| </div> |
| </div> |
| <p class="mt-4 text-sm"> |
| "TravelGenius planned our perfect family vacation to Italy. It accounted for our kids' interests, our budget, and even found activities that both the kids and adults loved!" |
| </p> |
| </div> |
| |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <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> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">Michael Chen</div> |
| <div class="text-sm text-indigo-200">Adventure Seeker</div> |
| </div> |
| </div> |
| <p class="mt-4 text-sm"> |
| "As a solo traveler, I love how the AI suggests unique experiences I would never find on my own. The hiking routes in Patagonia were breathtaking!" |
| </p> |
| </div> |
| |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <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> |
| <div class="ml-4"> |
| <div class="text-sm font-medium">David Wilson</div> |
| <div class="text-sm text-indigo-200">Business Traveler</div> |
| </div> |
| </div> |
| <p class="mt-4 text-sm"> |
| "The corporate travel features saved me hours of planning. It optimized my schedule between meetings and found great networking events nearby." |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <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 experience smarter travel?</span> |
| <span class="block text-indigo-600">Start planning your perfect trip 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-indigo-600 hover:bg-indigo-700"> |
| Get Started |
| </a> |
| </div> |
| <div class="ml-3 inline-flex"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-indigo-50 hover:bg-indigo-100"> |
| <i class="fas fa-play-circle mr-2"></i> Watch demo |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-800"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 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">Resources</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Travel Guides</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Safety</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Developer API</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> |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Instagram</a></li> |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-12 border-t border-gray-700 pt-8"> |
| <p class="text-base text-gray-400 text-center"> |
| © 2023 TravelGenius, Inc. All rights reserved. |
| </p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('advanced-options-btn').addEventListener('click', function() { |
| const options = document.getElementById('advanced-options'); |
| const icon = this.querySelector('i'); |
| |
| if (options.classList.contains('hidden')) { |
| options.classList.remove('hidden'); |
| icon.classList.remove('fa-plus-circle'); |
| icon.classList.add('fa-minus-circle'); |
| this.innerHTML = '<i class="fas fa-minus-circle mr-1"></i> Hide Advanced Options'; |
| } else { |
| options.classList.add('hidden'); |
| icon.classList.remove('fa-minus-circle'); |
| icon.classList.add('fa-plus-circle'); |
| this.innerHTML = '<i class="fas fa-plus-circle mr-1"></i> Show Advanced Options'; |
| } |
| }); |
| |
| |
| document.getElementById('generate-plan').addEventListener('click', function() { |
| const modal = document.getElementById('ai-processing-modal'); |
| const progressBar = document.getElementById('progress-bar'); |
| |
| |
| modal.classList.remove('hidden'); |
| |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += Math.random() * 10; |
| if (progress > 100) progress = 100; |
| progressBar.style.width = `${progress}%`; |
| |
| if (progress === 100) { |
| clearInterval(interval); |
| setTimeout(() => { |
| modal.classList.add('hidden'); |
| document.getElementById('trip-plan').classList.remove('hidden'); |
| |
| |
| document.getElementById('trip-plan').scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }, 500); |
| } |
| }, 200); |
| }); |
| |
| |
| |
| |
| </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=eurosam/planner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
