Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Glide | Global Ride-Sharing</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; | |
| overflow-x: hidden; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| } | |
| .card-hover: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); | |
| } | |
| .driver-card:hover .driver-image { | |
| transform: scale(1.05); | |
| } | |
| .input-focus:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .scroll-hidden::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm fixed w-full 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-car text-blue-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">Glide</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#" class="text-gray-900 hover:text-blue-500 px-3 py-2 text-sm font-medium">Ride</a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 px-3 py-2 text-sm font-medium">Drive</a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 px-3 py-2 text-sm font-medium">Business</a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 px-3 py-2 text-sm font-medium">Cities</a> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 px-3 py-2 text-sm font-medium">Safety</a> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center"> | |
| <button class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Sign Up | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-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"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-500 hover:bg-gray-50">Ride</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-500 hover:bg-gray-50">Drive</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-500 hover:bg-gray-50">Business</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-500 hover:bg-gray-50">Cities</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-500 hover:bg-gray-50">Safety</a> | |
| <button class="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-white bg-blue-500 hover:bg-blue-600"> | |
| Sign Up | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient pt-24 pb-32 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="mt-12 lg:mt-0"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6"> | |
| Ride. Drive. <span class="text-yellow-300">Glide.</span> | |
| </h1> | |
| <p class="text-xl text-blue-100 max-w-3xl mb-8"> | |
| The smartest way to get around. Available in 500+ cities across 80 countries. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-8 py-3 bg-white text-blue-600 font-bold rounded-lg hover:bg-gray-100 transition duration-300"> | |
| Download App | |
| </button> | |
| <button class="px-8 py-3 border-2 border-white text-white font-bold rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300"> | |
| Sign Up to Ride | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative hidden lg:block"> | |
| <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Car ride" | |
| class="rounded-2xl shadow-2xl w-full max-w-lg animate-float"> | |
| <div class="absolute -bottom-8 -left-8 bg-white p-4 rounded-xl shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-clock text-blue-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Average wait time</p> | |
| <p class="text-gray-900 font-bold text-xl">2 min</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| How Glide Works | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Get where you're going in just a few taps | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-map-marker-alt text-blue-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-center text-lg font-bold text-gray-900 mb-3">Set your location</h3> | |
| <p class="text-center text-gray-500"> | |
| Enter your destination or browse the map to see estimated fares and wait times. | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-car text-purple-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-center text-lg font-bold text-gray-900 mb-3">Choose your ride</h3> | |
| <p class="text-center text-gray-500"> | |
| Select from economy, premium, or shared rides. See driver details and vehicle info. | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-green-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-center text-lg font-bold text-gray-900 mb-3">Hop in and go</h3> | |
| <p class="text-center text-gray-500"> | |
| Your driver will meet you at the pickup location. Enjoy the ride and pay seamlessly. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Ride Options --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Ride Options For Every Need | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Choose what works best for you | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition duration-300"> | |
| <div class="h-40 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-car text-blue-500 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl mb-2 text-gray-900">Glide Basic</h3> | |
| <p class="text-gray-500 mb-4">Affordable, everyday rides</p> | |
| <div class="flex items-center text-yellow-400 mb-3"> | |
| <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> | |
| <span class="text-gray-500 ml-2">4.8</span> | |
| </div> | |
| <button class="w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition duration-300"> | |
| <div class="h-40 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-car-side text-purple-500 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl mb-2 text-gray-900">Glide Premium</h3> | |
| <p class="text-gray-500 mb-4">Luxury vehicles with top-rated drivers</p> | |
| <div class="flex items-center text-yellow-400 mb-3"> | |
| <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> | |
| <span class="text-gray-500 ml-2">4.9</span> | |
| </div> | |
| <button class="w-full py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition duration-300"> | |
| <div class="h-40 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-users text-green-500 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl mb-2 text-gray-900">Glide Share</h3> | |
| <p class="text-gray-500 mb-4">Share the ride, split the cost</p> | |
| <div class="flex items-center text-yellow-400 mb-3"> | |
| <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> | |
| <span class="text-gray-500 ml-2">4.7</span> | |
| </div> | |
| <button class="w-full py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition duration-300"> | |
| <div class="h-40 bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-bus text-yellow-500 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl mb-2 text-gray-900">Glide XL</h3> | |
| <p class="text-gray-500 mb-4">Extra space for groups</p> | |
| <div class="flex items-center text-yellow-400 mb-3"> | |
| <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> | |
| <span class="text-gray-500 ml-2">4.8</span> | |
| </div> | |
| <button class="w-full py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Driver Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="mb-12 lg:mb-0"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl mb-6"> | |
| Drive when you want, earn what you need | |
| </h2> | |
| <p class="text-lg text-gray-500 mb-8"> | |
| Make money on your schedule as an independent contractor. You're in control with Glide's driver platform. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-dollar-sign text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-900">Flexible earnings</h3> | |
| <p class="text-gray-500">You keep 80% of every fare plus 100% of tips.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-clock text-purple-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-900">Work on your time</h3> | |
| <p class="text-gray-500">Drive anytime—days, nights, or weekends.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-green-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-shield-alt text-green-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-900">Safe rides</h3> | |
| <p class="text-gray-500">24/7 support and insurance protection.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-8 px-8 py-3 bg-black text-white font-bold rounded-lg hover:bg-gray-800 transition duration-300"> | |
| Sign Up to Drive | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <div class="driver-card bg-gray-50 rounded-2xl p-6 overflow-hidden transition duration-300"> | |
| <div class="flex items-center mb-6"> | |
| <div class="driver-image overflow-hidden rounded-full w-16 h-16 border-4 border-white shadow-md transition duration-300"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Driver" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold text-gray-900">Sarah J.</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="text-gray-700">4.98</span> | |
| <span class="mx-2 text-gray-300">•</span> | |
| <span class="text-gray-500">2,450 trips</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl p-4 mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-500">Earnings this week</span> | |
| <span class="font-bold text-gray-900">$1,245</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-500 h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-white rounded-xl p-4 text-center"> | |
| <div class="text-blue-500 mb-2"> | |
| <i class="fas fa-car text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-900">Tesla Model 3</h4> | |
| <p class="text-gray-500 text-sm">2022</p> | |
| </div> | |
| <div class="bg-white rounded-xl p-4 text-center"> | |
| <div class="text-purple-500 mb-2"> | |
| <i class="fas fa-map-marker-alt text-2xl"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-900">Los Angeles</h4> | |
| <p class="text-gray-500 text-sm">Primary city</p> | |
| </div> | |
| </div> | |
| <button class="w-full py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300"> | |
| View Driver Dashboard | |
| </button> | |
| </div> | |
| <div class="absolute -bottom-8 -right-8 bg-white p-4 rounded-xl shadow-lg hidden lg:block"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-money-bill-wave text-green-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Average earnings</p> | |
| <p class="text-gray-900 font-bold text-xl">$32/hr</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- App Download --> | |
| <section class="py-20 bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="mb-12 lg:mb-0 text-center lg:text-left"> | |
| <h2 class="text-3xl font-extrabold sm:text-4xl mb-6"> | |
| Get the Glide app today | |
| </h2> | |
| <p class="text-lg text-gray-300 mb-8 max-w-lg mx-auto lg:mx-0"> | |
| Download the app for iOS or Android and get a ride in minutes. Or sign up online to start riding. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="flex items-center justify-center px-6 py-3 bg-black bg-opacity-30 rounded-lg hover:bg-opacity-50 transition duration-300"> | |
| <i class="fab fa-apple text-2xl mr-3"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Download on the</div> | |
| <div class="font-bold">App Store</div> | |
| </div> | |
| </button> | |
| <button class="flex items-center justify-center px-6 py-3 bg-black bg-opacity-30 rounded-lg hover:bg-opacity-50 transition duration-300"> | |
| <i class="fab fa-google-play text-2xl mr-3"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Get it on</div> | |
| <div class="font-bold">Google Play</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="max-w-md mx-auto"> | |
| <div class="relative"> | |
| <div class="absolute -top-8 -left-8 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse"></div> | |
| <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse"></div> | |
| <div class="relative bg-gray-800 rounded-3xl p-4 shadow-2xl"> | |
| <div class="bg-black rounded-2xl overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="App screenshot" | |
| class="w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Cities --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Glide in Cities Worldwide | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Available in 500+ cities across 80 countries | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12"> | |
| <div class="group relative overflow-hidden rounded-xl h-48"> | |
| <img src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="New York" | |
| class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="text-xl font-bold text-white">New York</h3> | |
| <p class="text-blue-200">United States</p> | |
| </div> | |
| </div> | |
| <div class="group relative overflow-hidden rounded-xl h-48"> | |
| <img src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" | |
| alt="Paris" | |
| class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="text-xl font-bold text-white">Paris</h3> | |
| <p class="text-blue-200">France</p> | |
| </div> | |
| </div> | |
| <div class="group relative overflow-hidden rounded-xl h-48"> | |
| <img src="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Tokyo" | |
| class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="text-xl font-bold text-white">Tokyo</h3> | |
| <p class="text-blue-200">Japan</p> | |
| </div> | |
| </div> | |
| <div class="group relative overflow-hidden rounded-xl h-48"> | |
| <img src="https://images.unsplash.com/photo-1523482580672-f109ba8cb9be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1630&q=80" | |
| alt="London" | |
| class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="text-xl font-bold text-white">London</h3> | |
| <p class="text-blue-200">United Kingdom</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button class="px-8 py-3 border-2 border-blue-500 text-blue-500 font-bold rounded-lg hover:bg-blue-500 hover:text-white transition duration-300"> | |
| View All Cities | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Frequently Asked Questions | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Can't find what you're looking for? <a href="#" class="text-blue-500 hover:underline">Contact us</a> | |
| </p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none"> | |
| <h3 class="text-lg font-medium text-gray-900">How do I request a ride?</h3> | |
| <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6"> | |
| <p class="text-gray-500"> | |
| To request a ride, open the Glide app and enter your destination in the "Where to?" box. The app will show you ride options and estimated fares. Choose your preferred ride type and tap "Request" to be matched with a driver. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none"> | |
| <h3 class="text-lg font-medium text-gray-900">How does Glide pricing work?</h3> | |
| <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6"> | |
| <p class="text-gray-500 mb-3"> | |
| Glide uses dynamic pricing, which means fares may increase during times of high demand to ensure reliability. You'll always see the fare upfront before requesting your ride. | |
| </p> | |
| <p class="text-gray-500"> | |
| Base fares are calculated using time and distance for your trip, plus any applicable tolls, taxes, and fees. During busy times, you may see higher than normal fares. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none"> | |
| <h3 class="text-lg font-medium text-gray-900">How do I become a Glide driver?</h3> | |
| <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6"> | |
| <p class="text-gray-500 mb-3"> | |
| To drive with Glide, you must meet the following requirements: | |
| </p> | |
| <ul class="list-disc pl-5 text-gray-500 space-y-1"> | |
| <li>Meet the minimum age to drive in your city</li> | |
| <li>Have at least one year of licensed driving experience</li> | |
| <li>Have a valid driver's license</li> | |
| <li>Use an eligible 4-door vehicle</li> | |
| <li>Have a clean driving record</li> | |
| </ul> | |
| <p class="text-gray-500 mt-3"> | |
| You can apply to drive in the Driver section of our app or website. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none"> | |
| <h3 class="text-lg font-medium text-gray-900">Is Glide available in my city?</h3> | |
| <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6"> | |
| <p class="text-gray-500"> | |
| Glide is available in 500+ cities across 80 countries. You can check availability in your city by entering your location in the app or on our website. If Glide isn't available in your area yet, you can sign up to be notified when we launch in your city. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-20 bg-blue-500 text-white"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-extrabold sm:text-4xl mb-6"> | |
| Stay Updated | |
| </h2> | |
| <p class="text-xl text-blue-100 max-w-3xl mx-auto mb-8"> | |
| Subscribe to our newsletter for the latest updates, promotions, and news about Glide. | |
| </p> | |
| <div class="max-w-md mx-auto"> | |
| <form class="sm:flex"> | |
| <label for="email" class="sr-only">Email address</label> | |
| <input id="email" type="email" required class="w-full px-5 py-3 placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-blue-200 focus:outline-none rounded-md text-gray-900 input-focus" placeholder="Enter your email"> | |
| <button type="submit" class="mt-3 w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-500 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white sm:mt-0 sm:ml-3 sm:w-auto sm:flex-shrink-0"> | |
| Subscribe | |
| </button> | |
| </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> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-car text-blue-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">Glide</span> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| The smartest way to get around. Available in 500+ cities across 80 countries. | |
| </p> | |
| <div class="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-400 tracking-wider uppercase mb-4"> | |
| Ride | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Request a ride</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Ride options</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Airports</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Cities</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4"> | |
| Drive | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Apply to drive</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Driver requirements</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Driver earnings</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Driver resources</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4"> | |
| Company | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">About us</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Contact us</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 Glide Technologies 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">Privacy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Cookies</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Accessibility</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // FAQ accordion | |
| const faqToggles = document.querySelectorAll('.faq-toggle'); | |
| faqToggles.forEach(toggle => { | |
| toggle.addEventListener('click', () => { | |
| const content = toggle.nextElementSibling; | |
| const icon = toggle.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('transform'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Form submission | |
| const form = document.querySelector('form'); | |
| if (form) { | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const email = document.getElementById('email').value; | |
| alert(`Thank you for subscribing with ${email}! We'll keep you updated.`); | |
| form.reset(); | |
| }); | |
| } | |
| </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=Ronnie5562/glide" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |