|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SwiftRide | Autonomous Vehicle Subscription</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, #6e8efb 0%, #a777e3 100%); |
|
|
} |
|
|
.vehicle-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); |
|
|
} |
|
|
.subscription-card:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
.map-container { |
|
|
height: 400px; |
|
|
border-radius: 1rem; |
|
|
overflow: hidden; |
|
|
} |
|
|
.animated-arrow { |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% {transform: translateX(0);} |
|
|
40% {transform: translateX(10px);} |
|
|
60% {transform: translateX(5px);} |
|
|
} |
|
|
.loading-spinner { |
|
|
border-top-color: #6e8efb; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
to {transform: rotate(360deg);} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-900"> |
|
|
|
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-bolt text-purple-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">Swift<span class="text-purple-600">Ride</span></span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#" class="border-purple-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">Ride</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">Subscribe</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">Business</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Sign In</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-purple-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> |
|
|
|
|
|
|
|
|
<div class="sm:hidden hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1"> |
|
|
<a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Ride</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Subscribe</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Business</a> |
|
|
<div class="mt-4 px-4"> |
|
|
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Sign In</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"> |
|
|
The Future of Mobility is Here |
|
|
</h1> |
|
|
<p class="mt-6 max-w-lg mx-auto text-xl"> |
|
|
Instant autonomous vehicle booking and flexible subscriptions for your lifestyle. |
|
|
</p> |
|
|
<div class="mt-10 flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-md text-lg font-semibold transition duration-150 ease-in-out"> |
|
|
Book a Ride <i class="fas fa-arrow-right ml-2 animated-arrow"></i> |
|
|
</button> |
|
|
<button class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-md text-lg font-semibold transition duration-150 ease-in-out"> |
|
|
Explore Subscriptions |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Book an Autonomous Ride in Seconds |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Our AI-powered fleet is available 24/7 with no surge pricing. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 p-8"> |
|
|
<div class="mb-6"> |
|
|
<label for="pickup" class="block text-sm font-medium text-gray-700 mb-1">Pickup Location</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<input type="text" id="pickup" class="focus:ring-purple-500 focus:border-purple-500 block w-full pl-4 pr-12 py-3 border-gray-300 rounded-md" placeholder="Current location"> |
|
|
<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 class="mb-6"> |
|
|
<label for="destination" class="block text-sm font-medium text-gray-700 mb-1">Destination</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<input type="text" id="destination" class="focus:ring-purple-500 focus:border-purple-500 block w-full pl-4 pr-12 py-3 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-flag text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<label for="vehicle-type" class="block text-sm font-medium text-gray-700 mb-1">Vehicle Type</label> |
|
|
<select id="vehicle-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 rounded-md"> |
|
|
<option>Swift (1-2 people)</option> |
|
|
<option>Comfort (1-4 people)</option> |
|
|
<option>Premium (1-4 people)</option> |
|
|
<option>XL (1-6 people)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="schedule" class="block text-sm font-medium text-gray-700 mb-1">Schedule</label> |
|
|
<select id="schedule" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 rounded-md"> |
|
|
<option>Ride now</option> |
|
|
<option>Schedule for later</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full gradient-bg hover:opacity-90 text-white font-bold py-3 px-4 rounded-md transition duration-150 ease-in-out"> |
|
|
Confirm Ride <i class="fas fa-car ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-gray-100 p-8"> |
|
|
<div class="map-container bg-gray-300 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-2"></i> |
|
|
<p class="text-gray-500">Interactive map will appear here</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Estimated Ride Details</h3> |
|
|
<div class="bg-white rounded-lg p-4 shadow"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-600">Distance:</span> |
|
|
<span class="font-medium">4.2 miles</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-600">Duration:</span> |
|
|
<span class="font-medium">12 minutes</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-600">Vehicle Type:</span> |
|
|
<span class="font-medium">Swift</span> |
|
|
</div> |
|
|
<div class="flex justify-between pt-2 mt-2 border-t border-gray-200"> |
|
|
<span class="text-gray-600 font-semibold">Total:</span> |
|
|
<span class="text-xl font-bold text-purple-600">$8.75</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Our Autonomous Fleet |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Choose the perfect vehicle for your needs. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="vehicle-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-bolt text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900">Swift</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Compact and efficient for 1-2 passengers</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm text-gray-500">Starting at</span> |
|
|
<span class="text-lg font-bold text-purple-600">$1.50/mile</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-4"> |
|
|
<ul class="grid grid-cols-2 gap-2 text-sm text-gray-600"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 24/7 Availability</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Fast Charging</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Climate Control</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> WiFi</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="vehicle-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-couch text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900">Comfort</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Spacious sedan for 1-4 passengers</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm text-gray-500">Starting at</span> |
|
|
<span class="text-lg font-bold text-blue-600">$2.00/mile</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-4"> |
|
|
<ul class="grid grid-cols-2 gap-2 text-sm text-gray-600"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Extra Legroom</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Premium Audio</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Climate Control</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> WiFi</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="vehicle-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-yellow-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-crown text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900">Premium</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Luxury experience for 1-4 passengers</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm text-gray-500">Starting at</span> |
|
|
<span class="text-lg font-bold text-yellow-600">$3.50/mile</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-4"> |
|
|
<ul class="grid grid-cols-2 gap-2 text-sm text-gray-600"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> Leather Seats</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> Massage Seats</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> Refreshments</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> WiFi</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="vehicle-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-users text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900">XL</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Large vehicle for groups of 1-6</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm text-gray-500">Starting at</span> |
|
|
<span class="text-lg font-bold text-green-600">$2.75/mile</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-4"> |
|
|
<ul class="grid grid-cols-2 gap-2 text-sm text-gray-600"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Extra Seats</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Cargo Space</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Climate Zones</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> WiFi</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-bg py-16 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
|
|
Subscription Plans |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-purple-100 mx-auto"> |
|
|
Unlimited access to our autonomous fleet with flexible plans. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="subscription-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 ease-in-out"> |
|
|
<div class="px-6 py-8"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">Basic</h3> |
|
|
<p class="text-gray-600 mb-6">For occasional riders</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-purple-600">$99</span> |
|
|
<span class="text-gray-500">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> 300 miles included</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Swift vehicles only</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> $0.50 per additional mile</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Priority booking</li> |
|
|
</ul> |
|
|
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-md transition duration-150 ease-in-out"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="subscription-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 ease-in-out transform scale-105 relative"> |
|
|
<div class="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg"> |
|
|
POPULAR |
|
|
</div> |
|
|
<div class="px-6 py-8"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">Premium</h3> |
|
|
<p class="text-gray-600 mb-6">For daily commuters</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-purple-600">$249</span> |
|
|
<span class="text-gray-500">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> 1,000 miles included</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> All vehicle types</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> $0.35 per additional mile</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> VIP booking</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Free premium upgrades</li> |
|
|
</ul> |
|
|
<button class="w-full gradient-bg hover:opacity-90 text-white font-bold py-3 px-4 rounded-md transition duration-150 ease-in-out"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="subscription-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 ease-in-out"> |
|
|
<div class="px-6 py-8"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">Business</h3> |
|
|
<p class="text-gray-600 mb-6">For companies and teams</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-purple-600">$499</span> |
|
|
<span class="text-gray-500">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> 3,000 miles included</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> All vehicle types</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> $0.25 per additional mile</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Dedicated fleet access</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Business analytics</li> |
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Multiple user accounts</li> |
|
|
</ul> |
|
|
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-md transition duration-150 ease-in-out"> |
|
|
Contact Sales |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
How SwiftRide Works |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Autonomous mobility made simple and efficient. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 text-purple-600 mb-4"> |
|
|
<span class="text-xl font-bold">1</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Book or Subscribe</h3> |
|
|
<p class="text-gray-600"> |
|
|
Request a ride instantly or choose a subscription plan that fits your lifestyle. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 text-purple-600 mb-4"> |
|
|
<span class="text-xl font-bold">2</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Vehicle Arrives</h3> |
|
|
<p class="text-gray-600"> |
|
|
Our autonomous vehicle arrives at your location within minutes, ready to go. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 text-purple-600 mb-4"> |
|
|
<span class="text-xl font-bold">3</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Enjoy the Ride</h3> |
|
|
<p class="text-gray-600"> |
|
|
Relax, work, or entertain yourself while our AI handles the driving. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16"> |
|
|
<div class="bg-gray-50 rounded-xl p-8 md:p-12"> |
|
|
<div class="md:flex items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Experience the Future Today</h3> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Our autonomous vehicles are equipped with state-of-the-art technology to ensure your safety and comfort. With real-time monitoring and 24/7 support, you're always in good hands. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<button class="gradient-bg hover:opacity-90 text-white font-bold py-3 px-6 rounded-md transition duration-150 ease-in-out"> |
|
|
Download the App |
|
|
</button> |
|
|
<button class="bg-white border-2 border-purple-600 text-purple-600 hover:bg-purple-50 font-bold py-3 px-6 rounded-md transition duration-150 ease-in-out"> |
|
|
Watch Demo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-gray-300 aspect-video rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-play-circle text-5xl text-purple-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
What Our Members Say |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Join thousands of happy riders experiencing autonomous mobility. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4"> |
|
|
AS |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Alex S.</h4> |
|
|
<div class="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> |
|
|
<p class="text-gray-600"> |
|
|
"The subscription model has completely changed how I commute. I save so much time and money compared to owning a car." |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4"> |
|
|
MJ |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Maria J.</h4> |
|
|
<div class="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> |
|
|
<p class="text-gray-600"> |
|
|
"I was skeptical about autonomous vehicles at first, but SwiftRide's technology is flawless. I feel safer than with human drivers." |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4"> |
|
|
TR |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Thomas R.</h4> |
|
|
<div class="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 |
|
|
<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=lattmamb/swiftride" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
