| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SkyVoyage | Travel Management System</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> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f8fafc; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
| } |
| |
| .flight-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); |
| } |
| |
| .flight-path { |
| position: relative; |
| } |
| |
| .flight-path::before { |
| content: ""; |
| position: absolute; |
| top: 50%; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background: #e2e8f0; |
| z-index: 1; |
| } |
| |
| .flight-dot { |
| position: relative; |
| z-index: 2; |
| } |
| |
| .animate-pulse-slow { |
| animation: pulse 3s infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| |
| .ticket { |
| perspective: 1000px; |
| } |
| |
| .ticket-inner { |
| transition: transform 0.6s; |
| transform-style: preserve-3d; |
| } |
| |
| .ticket:hover .ticket-inner { |
| transform: rotateY(10deg); |
| } |
| </style> |
| </head> |
| <body> |
| |
| <nav class="bg-white shadow-lg"> |
| <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-plane text-blue-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-blue-600">SkyVoyage</span> |
| </div> |
| <div class="hidden md:ml-10 md:flex md: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">Flights</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">Hotels</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">Packages</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">My Trips</a> |
| </div> |
| </div> |
| <div class="hidden md:ml-4 md:flex md:items-center"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</button> |
| </div> |
| <div class="-mr-2 flex items-center md: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"> |
| <span class="sr-only">Open main menu</span> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="hero-gradient 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"> |
| Explore the World with Ease |
| </h1> |
| <p class="mt-6 max-w-lg mx-auto text-xl"> |
| Book flights, hotels, and experiences all in one place. Our travel management system makes your journey seamless. |
| </p> |
| <div class="mt-10"> |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-100"> |
| Start Planning <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-12 mb-16"> |
| <div class="bg-white rounded-lg shadow-xl overflow-hidden"> |
| <div class="p-6"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="flex-1 mb-4 md:mb-0 md:mr-4"> |
| <label for="from" class="block text-sm font-medium text-gray-700 mb-1">From</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| <i class="fas fa-plane-departure text-gray-400"></i> |
| </div> |
| <input type="text" id="from" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="City or Airport"> |
| </div> |
| </div> |
| <div class="flex-1 mb-4 md:mb-0 md:mr-4"> |
| <label for="to" class="block text-sm font-medium text-gray-700 mb-1">To</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| <i class="fas fa-plane-arrival text-gray-400"></i> |
| </div> |
| <input type="text" id="to" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="City or Airport"> |
| </div> |
| </div> |
| <div class="w-full md:w-48 mb-4 md:mb-0 md:mr-4"> |
| <label for="departure" class="block text-sm font-medium text-gray-700 mb-1">Departure</label> |
| <input type="date" id="departure" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div class="w-full md:w-48 mb-4 md:mb-0 md:mr-4"> |
| <label for="return" class="block text-sm font-medium text-gray-700 mb-1">Return</label> |
| <input type="date" id="return" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div class="w-full md:w-48"> |
| <label for="passengers" class="block text-sm font-medium text-gray-700 mb-1">Passengers</label> |
| <select id="passengers" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| <option>1 Adult</option> |
| <option>2 Adults</option> |
| <option>3 Adults</option> |
| <option>4 Adults</option> |
| <option>1 Adult, 1 Child</option> |
| <option>2 Adults, 1 Child</option> |
| <option>2 Adults, 2 Children</option> |
| </select> |
| </div> |
| </div> |
| <div class="mt-6 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <input id="direct-flights" name="direct-flights" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
| <label for="direct-flights" class="ml-2 block text-sm text-gray-700">Direct flights only</label> |
| </div> |
| <button class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| Search Flights <i class="fas fa-search ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16"> |
| <h2 class="text-2xl font-bold text-gray-900 mb-8">Popular Destinations</h2> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="relative rounded-lg overflow-hidden shadow-lg group"> |
| <img src="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Paris" class="w-full h-64 object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> |
| <div class="absolute bottom-0 left-0 p-6"> |
| <h3 class="text-xl font-bold text-white">Paris, France</h3> |
| <p class="text-blue-200">From $299</p> |
| </div> |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> |
| <button class="px-4 py-2 bg-white text-blue-600 font-medium rounded-full">Explore</button> |
| </div> |
| </div> |
| <div class="relative rounded-lg overflow-hidden shadow-lg group"> |
| <img src="https://images.unsplash.com/photo-1538970272646-f61fabb3bfdf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Tokyo" class="w-full h-64 object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> |
| <div class="absolute bottom-0 left-0 p-6"> |
| <h3 class="text-xl font-bold text-white">Tokyo, Japan</h3> |
| <p class="text-blue-200">From $799</p> |
| </div> |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> |
| <button class="px-4 py-2 bg-white text-blue-600 font-medium rounded-full">Explore</button> |
| </div> |
| </div> |
| <div class="relative rounded-lg overflow-hidden shadow-lg group"> |
| <img src="https://images.unsplash.com/photo-1523482580672-f109ba8cb9be?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="New York" class="w-full h-64 object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> |
| <div class="absolute bottom-0 left-0 p-6"> |
| <h3 class="text-xl font-bold text-white">New York, USA</h3> |
| <p class="text-blue-200">From $399</p> |
| </div> |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> |
| <button class="px-4 py-2 bg-white text-blue-600 font-medium rounded-full">Explore</button> |
| </div> |
| </div> |
| <div class="relative rounded-lg overflow-hidden shadow-lg group"> |
| <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Bali" class="w-full h-64 object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> |
| <div class="absolute bottom-0 left-0 p-6"> |
| <h3 class="text-xl font-bold text-white">Bali, Indonesia</h3> |
| <p class="text-blue-200">From $599</p> |
| </div> |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> |
| <button class="px-4 py-2 bg-white text-blue-600 font-medium rounded-full">Explore</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16"> |
| <div class="flex justify-between items-center mb-8"> |
| <h2 class="text-2xl font-bold text-gray-900">Available Flights</h2> |
| <div class="flex items-center"> |
| <span class="text-sm text-gray-500 mr-2">Sort by:</span> |
| <select class="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>Price (Low to High)</option> |
| <option>Price (High to Low)</option> |
| <option>Duration (Shortest)</option> |
| <option>Departure Time</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| |
| <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
| <div class="p-6"> |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
| <div class="flex-1 mb-4 md:mb-0"> |
| <div class="flex items-center"> |
| <img src="https://logo.clearbit.com/emirates.com" alt="Emirates" class="h-8 mr-4"> |
| <div> |
| <h3 class="text-lg font-medium text-gray-900">Emirates</h3> |
| <p class="text-sm text-gray-500">EK 215 • Airbus A380</p> |
| </div> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <div class="flight-path flex items-center justify-between relative"> |
| <div class="text-center"> |
| <div class="flight-dot bg-blue-600 rounded-full w-4 h-4 mx-auto mb-1"></div> |
| <p class="text-sm font-medium">JFK</p> |
| <p class="text-xs text-gray-500">10:30 AM</p> |
| </div> |
| <div class="text-center mx-2"> |
| <p class="text-xs text-gray-500">7h 30m</p> |
| <i class="fas fa-plane text-gray-400 transform rotate-90"></i> |
| </div> |
| <div class="text-center"> |
| <div class="flight-dot bg-blue-600 rounded-full w-4 h-4 mx-auto mb-1"></div> |
| <p class="text-sm font-medium">DXB</p> |
| <p class="text-xs text-gray-500">6:00 AM (+1)</p> |
| </div> |
| </div> |
| </div> |
| <div class="w-full md:w-48 mt-4 md:mt-0"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-2xl font-bold text-blue-600">$1,299</p> |
| <p class="text-xs text-gray-500">Round trip</p> |
| </div> |
| <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| Select |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
| <div class="p-6"> |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
| <div class="flex-1 mb-4 md:mb-0"> |
| <div class="flex items-center"> |
| <img src="https://logo.clearbit.com/qatarairways.com" alt="Qatar Airways" class="h-8 mr-4"> |
| <div> |
| <h3 class="text-lg font-medium text-gray-900">Qatar Airways</h3> |
| <p class="text-sm text-gray-500">QR 701 • Boeing 777</p> |
| </div> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <div class="flight-path flex items-center justify-between relative"> |
| <div class="text-center"> |
| <div class="flight-dot bg-blue-600 rounded-full w-4 h-4 mx-auto mb-1"></div> |
| <p class="text-sm font-medium">JFK</p> |
| <p class="text-xs text-gray-500">8:45 PM</p> |
| </div> |
| <div class="text-center mx-2"> |
| <p class="text-xs text-gray-500">12h 15m</p> |
| <i class="fas fa-plane text-gray-400 transform rotate-90"></i> |
| </div> |
| <div class="text-center"> |
| <div class="flight-dot bg-blue-600 rounded-full w-4 h-4 mx-auto mb-1"></div> |
| <p class="text-sm font-medium">DOH</p> |
| <p class="text-xs text-gray-500">4:00 PM (+1)</p> |
| </div> |
| </div> |
| </div> |
| <div class="w-full md:w-48 mt-4 md:mt-0"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-2xl font-bold text-blue-600">$1,099</p> |
| <p class="text-xs text-gray-500">Round trip</p> |
| </div> |
| <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| Select |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
| <div class="p-6"> |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
| <div class="flex-1 mb-4 md:mb-0"> |
| <div class="flex items-center"> |
| <img src="https://logo.clearbit.com/singaporeair.com" alt="Singapore Airlines" class="h-8 mr-4"> |
| <div> |
| <h3 class="text-lg font-medium text-gray-900">Singapore Airlines</h3> |
| <p class="text-sm text-gray-500">SQ 21 • Airbus A350</p> |
| </div> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <div class="flight-path flex items-center justify-between relative"> |
| <div class="text-center"> |
| <div class="flight-dot bg-blue-600 rounded-full w-4 h-4 mx-auto mb-1"></div> |
| <p class="text-sm font-medium">JFK</p> |
| <p class="text-xs text-gray-500">11:15 AM</p> |
| </div> |
| <div class="text-center mx-2"> |
| <p class="text-xs text-gray-500">18h 5m</p> |
| <i class="fas fa-plane text-gray-400 transform rotate-90"></i> |
| </div> |
| <div class="text-center"> |
| <div class="flight-dot bg-blue-600 rounded-full w-4 h-4 mx-auto mb-1"></div> |
| <p class="text-sm font-medium">SIN</p> |
| <p class="text-xs text-gray-500">5:20 AM (+2)</p> |
| </div> |
| </div> |
| </div> |
| <div class="w-full md:w-48 mt-4 md:mt-0"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-2xl font-bold text-blue-600">$1,599</p> |
| <p class="text-xs text-gray-500">Round trip</p> |
| </div> |
| <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| Select |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-50 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"> |
| Why choose SkyVoyage? |
| </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 overflow-hidden shadow rounded-lg"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| <i class="fas fa-bolt text-white"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <h3 class="text-lg font-medium text-gray-900">Instant Booking</h3> |
| <p class="mt-1 text-sm text-gray-500">Book your flights in seconds with our streamlined process.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| <i class="fas fa-shield-alt text-white"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <h3 class="text-lg font-medium text-gray-900">Flexible Cancellation</h3> |
| <p class="mt-1 text-sm text-gray-500">Change or cancel your booking with no hassle.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| <i class="fas fa-percentage text-white"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <h3 class="text-lg font-medium text-gray-900">Best Price Guarantee</h3> |
| <p class="mt-1 text-sm text-gray-500">We'll match any lower price you find elsewhere.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| <i class="fas fa-headset text-white"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <h3 class="text-lg font-medium text-gray-900">24/7 Support</h3> |
| <p class="mt-1 text-sm text-gray-500">Our travel experts are always here to help.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| <i class="fas fa-map-marked-alt text-white"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <h3 class="text-lg font-medium text-gray-900">Smart Recommendations</h3> |
| <p class="mt-1 text-sm text-gray-500">Personalized travel suggestions based on your preferences.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| <i class="fas fa-wallet text-white"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <h3 class="text-lg font-medium text-gray-900">Loyalty Rewards</h3> |
| <p class="mt-1 text-sm text-gray-500">Earn points on every booking and redeem for discounts.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| <div class="lg:text-center mb-12"> |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Simple Process</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| How to book your flight |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div class="text-center"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> |
| <span class="text-xl font-bold">1</span> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Search Flights</h3> |
| <p class="text-gray-500">Enter your travel details and find the best options.</p> |
| </div> |
| |
| <div class="text-center"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> |
| <span class="text-xl font-bold">2</span> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Select Flight</h3> |
| <p class="text-gray-500">Choose your preferred flight and cabin class.</p> |
| </div> |
| |
| <div class="text-center"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> |
| <span class="text-xl font-bold">3</span> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Enter Details</h3> |
| <p class="text-gray-500">Provide passenger information and payment.</p> |
| </div> |
| |
| <div class="text-center"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> |
| <span class="text-xl font-bold">4</span> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Get Tickets</h3> |
| <p class="text-gray-500">Receive e-tickets and boarding passes instantly.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <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 mb-12"> |
| <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| What our travelers say |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-lg shadow"> |
| <div class="flex items-center mb-4"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Sarah Johnson</h4> |
| <p class="text-blue-600">Frequent Traveler</p> |
| </div> |
| </div> |
| <p class="text-gray-600">"SkyVoyage made booking my business trips so much easier. The interface is intuitive and I always find the best deals."</p> |
| <div class="mt-4 flex text-yellow-400"> |
| <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 class="bg-white p-6 rounded-lg shadow"> |
| <div class="flex items-center mb-4"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen"> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Michael Chen</h4> |
| <p class="text-blue-600">Family Traveler</p> |
| </div> |
| </div> |
| <p class="text-gray-600">"Booking our family vacation was a breeze with SkyVoyage. The customer support team helped us find the perfect flights for our needs."</p> |
| <div class="mt-4 flex text-yellow-400"> |
| <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 class="bg-white p-6 rounded-lg shadow"> |
| <div class="flex items-center mb-4"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez"> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Emma Rodriguez</h4> |
| <p class="text-blue-600">Solo Traveler</p> |
| </div> |
| </div> |
| <p class="text-gray-600">"As someone who travels frequently alone, I appreciate how SkyVoyage makes it easy to manage all my bookings in one place."</p> |
| <div class="mt-4 flex text-yellow-400"> |
| <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> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-blue-600 text-white py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:flex lg:items-center lg:justify-between"> |
| <div class="lg:w-1/2 mb-8 lg:mb-0"> |
| <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl"> |
| Get travel deals straight to your inbox |
| </h2> |
| <p class="mt-3 text-lg text-blue-100"> |
| Sign up for our newsletter and be the first to know about exclusive offers and travel tips. |
| </p> |
| </div> |
| <div class="lg:w-1/2"> |
| <form class="sm:flex"> |
| <label for="email-address" class="sr-only">Email address</label> |
| <input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-transparent placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:outline-none sm:max-w-xs rounded-md text-gray-900" placeholder="Enter your email"> |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0"> |
| <button type="submit" class="w-full 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"> |
| Subscribe |
| </button> |
| </div> |
| </form> |
| <p class="mt-3 text-sm text-blue-100"> |
| We care about your data. Read our <a href="#" class="text-white font-medium underline">Privacy Policy</a>. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white"> |
| <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-5 gap-8"> |
| <div class="col-span-2"> |
| <div class="flex items-center"> |
| <i class="fas fa-plane text-blue-500 text-2xl mr-2"></i> |
| <span class="text-xl font-bold">SkyVoyage</span> |
| </div> |
| <p class="mt-4 text-gray-300"> |
| Making travel planning simple and enjoyable since 2015. Our mission is to connect people with the world's most amazing destinations. |
| </p> |
| <div class="mt-6 flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">About</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Press</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Support</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Help Center</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Safety</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Cancellation</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Report Issue</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Legal</h3> |
| <ul class="mt-4 space-y-4"> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Terms</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Cookie Policy</a></li> |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Accessibility</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between"> |
| <p class="text-gray-400 text-sm"> |
| © 2023 SkyVoyage, Inc. All rights reserved. |
| </p> |
| <div class="mt-4 md:mt-0 flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Sitemap</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="booking-modal" class="fixed z-10 inset-0 overflow-y-auto hidden" 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-4xl 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="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
| <div class="flex justify-between items-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"> |
| Complete Your Booking |
| </h3> |
| <button type="button" class="close-modal text-gray-400 hover:text-gray-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="mt-6"> |
| <div class="bg-blue-50 p-4 rounded-lg mb-6"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-info-circle text-blue-400"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-blue-700"> |
| Flight: <span class="font-medium">Emirates EK 215</span> • <span class="font-medium">JFK → DXB</span> • <span class="font-medium">Dec 15, 2023</span> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h4 class="text-lg font-medium text-gray-900 mb-4">Passenger Details</h4> |
| |
| <div class="mb-4"> |
| <label for="passenger-type" class="block text-sm font-medium text-gray-700 mb-1">Passenger Type</label> |
| <select id="passenger-type" class="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>Adult</option> |
| <option>Child</option> |
| <option>Infant</option> |
| </select> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label> |
| <input type="text" id="first-name" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
| </div> |
| <div> |
| <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label> |
| <input type="text" id="last-name" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="dob" class="block text-sm font-medium text-gray-700 mb-1">Date of Birth</label> |
| <input type="date" id="dob" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="passport" class="block text-sm font-medium text-gray-700 mb-1">Passport Number</label> |
| <input type="text" id="passport" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="nationality" class="block text-sm font-medium text-gray-700 mb-1">Nationality</label> |
| <select id="nationality" class="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>United States</option> |
| <option>Canada</option> |
| <option>United Kingdom</option> |
| <option>Australia</option> |
| <option>Other</option> |
| </select> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-medium text-gray-900 mb-4">Payment Details</h4> |
| |
| <div class="mb-4"> |
| <label for="card-number" class="block text-sm font-medium text-gray-700 mb-1">Card Number</label> |
| <input type="text" id="card-number" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="1234 5678 9012 3456"> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label for="expiry" class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label> |
| <input type="text" id="expiry" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="MM/YY"> |
| </div> |
| <div> |
| <label for="cvv" class="block text-sm font-medium text-gray-700 mb-1">CVV</label> |
| <input type="text" id="cvv" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="123"> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="card-name" class="block text-sm font-medium text-gray-700 mb-1">Name on Card</label> |
| <input type="text" id="card-name" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="billing-address" class="block text-sm font-medium text-gray-700 mb-1">Billing Address</label> |
| <input type="text" id="billing-address" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
| </div> |
| |
| <div class="flex items-center"> |
| <input id="save-card" name="save-card" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
| <label for="save-card" class="ml-2 block text-sm text-gray-700">Save card for future payments</label> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 bg-gray-50 p-4 rounded-lg"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-sm text-gray-500">Total Price</p> |
| <p class="text-2xl font-bold text-gray-900">$1,299.00</p> |
| <p class="text-xs text-gray-500">Includes all taxes and fees</p> |
| </div> |
| <button class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| Confirm Booking <i class="fas fa-check ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="success-modal" class="fixed z-10 inset-0 overflow-y-auto hidden" 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-green-100 sm:mx-0 sm:h-10 sm:w-10"> |
| <i class="fas fa-check text-green-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"> |
| Booking Confirmed! |
| </h3> |
| <div class="mt-2"> |
| <p class="text-sm text-gray-500"> |
| Your flight from JFK to DXB on December 15, 2023 has been successfully booked. Your e-ticket and itinerary have been sent to your email. |
| </p> |
| </div> |
| <div class="mt-6 ticket"> |
| <div class="ticket-inner bg-blue-50 p-4 rounded-lg border-2 border-blue-200 border-dashed"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-xs text-gray-500">Booking Reference</p> |
| <p class="text-lg font-bold text-blue-600">SV215JFK</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-xs text-gray-500">Total Paid</p> |
| <p class="text-lg font-bold text-blue-600">$1,299.00</p> |
| </div> |
| </div> |
| <div class="mt-4 flex justify-between items-center"> |
| <div> |
| <p class="text-sm font-medium">JFK</p> |
| <p class="text-xs text-gray-500">10:30 AM</p> |
| </div> |
| <div class="text-center"> |
| <i class="fas fa-plane text-gray-400 transform rotate-90"></i> |
| <p class="text-xs text-gray-500 mt-1">7h 30m</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm font-medium">DXB</p> |
| <p class="text-xs text-gray-500">6:00 AM (+1)</p> |
| </div> |
| </div> |
| </div> |
| </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 close-success-modal"> |
| View Itinerary |
| </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 close-success-modal"> |
| Close |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.querySelectorAll('.flight-card button').forEach(button => { |
| button.addEventListener('click', function() { |
| document.getElementById('booking-modal').classList.remove('hidden'); |
| document.body.classList.add('overflow-hidden'); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.close-modal').forEach(button => { |
| button.addEventListener('click', function() { |
| document.getElementById('booking-modal').classList.add('hidden'); |
| document.body.classList.remove('overflow-hidden'); |
| }); |
| }); |
| |
| |
| document.querySelector('#booking-modal button.bg-blue-600').addEventListener('click', function() { |
| document.getElementById('booking-modal').classList.add('hidden'); |
| document.getElementById('success-modal').classList.remove('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('.close-success-modal').forEach(button => { |
| button.addEventListener('click', function() { |
| document.getElementById('success-modal').classList.add('hidden'); |
| document.body.classList.remove('overflow-hidden'); |
| }); |
| }); |
| |
| |
| const today = new Date(); |
| const tomorrow = new Date(today); |
| tomorrow.setDate(tomorrow.getDate() + 1); |
| |
| const nextWeek = new Date(today); |
| nextWeek.setDate(nextWeek.getDate() + 7); |
| |
| document.getElementById('departure').valueAsDate = tomorrow; |
| document.getElementById('return').valueAsDate = nextWeek; |
| |
| |
| function formatDate(date) { |
| return date.toISOString().split('T')[0]; |
| } |
| </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=Zeeshsan/travelx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
