Hugging Face's logo

Spaces:
lattmamb
/
swiftride
Running

App Files Community
lattmamb commited on
Commit
bbfdc94
·
verified ·
1 Parent(s): 4cc3d8c

Uber alternative but for a faster more streamlined autonomous vehicle booking and subscription take home model - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +544 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Swiftride
3
- emoji: 🏢
4
- colorFrom: gray
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: swiftride
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,544 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SwiftRide | Autonomous Vehicle Subscription</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
12
+ }
13
+ .vehicle-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .subscription-card:hover {
18
+ transform: scale(1.03);
19
+ }
20
+ .map-container {
21
+ height: 400px;
22
+ border-radius: 1rem;
23
+ overflow: hidden;
24
+ }
25
+ .animated-arrow {
26
+ animation: bounce 2s infinite;
27
+ }
28
+ @keyframes bounce {
29
+ 0%, 20%, 50%, 80%, 100% {transform: translateX(0);}
30
+ 40% {transform: translateX(10px);}
31
+ 60% {transform: translateX(5px);}
32
+ }
33
+ .loading-spinner {
34
+ border-top-color: #6e8efb;
35
+ animation: spin 1s linear infinite;
36
+ }
37
+ @keyframes spin {
38
+ to {transform: rotate(360deg);}
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="font-sans antialiased text-gray-900">
43
+ <!-- Navigation -->
44
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
45
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
46
+ <div class="flex justify-between h-16">
47
+ <div class="flex items-center">
48
+ <div class="flex-shrink-0 flex items-center">
49
+ <i class="fas fa-bolt text-purple-600 text-2xl mr-2"></i>
50
+ <span class="text-xl font-bold text-gray-900">Swift<span class="text-purple-600">Ride</span></span>
51
+ </div>
52
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
53
+ <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>
54
+ <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>
55
+ <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>
56
+ <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>
57
+ </div>
58
+ </div>
59
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
60
+ <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>
61
+ </div>
62
+ <div class="-mr-2 flex items-center sm:hidden">
63
+ <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">
64
+ <span class="sr-only">Open main menu</span>
65
+ <i class="fas fa-bars"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Mobile menu -->
72
+ <div class="sm:hidden hidden" id="mobile-menu">
73
+ <div class="pt-2 pb-3 space-y-1">
74
+ <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>
75
+ <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>
76
+ <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>
77
+ <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>
78
+ <div class="mt-4 px-4">
79
+ <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>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </nav>
84
+
85
+ <!-- Hero Section -->
86
+ <div class="gradient-bg text-white">
87
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
88
+ <div class="text-center">
89
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
90
+ The Future of Mobility is Here
91
+ </h1>
92
+ <p class="mt-6 max-w-lg mx-auto text-xl">
93
+ Instant autonomous vehicle booking and flexible subscriptions for your lifestyle.
94
+ </p>
95
+ <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
96
+ <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">
97
+ Book a Ride <i class="fas fa-arrow-right ml-2 animated-arrow"></i>
98
+ </button>
99
+ <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">
100
+ Explore Subscriptions
101
+ </button>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Booking Section -->
108
+ <div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8">
109
+ <div class="max-w-7xl mx-auto">
110
+ <div class="text-center mb-12">
111
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
112
+ Book an Autonomous Ride in Seconds
113
+ </h2>
114
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
115
+ Our AI-powered fleet is available 24/7 with no surge pricing.
116
+ </p>
117
+ </div>
118
+
119
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
120
+ <div class="md:flex">
121
+ <div class="md:w-1/2 p-8">
122
+ <div class="mb-6">
123
+ <label for="pickup" class="block text-sm font-medium text-gray-700 mb-1">Pickup Location</label>
124
+ <div class="mt-1 relative rounded-md shadow-sm">
125
+ <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">
126
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
127
+ <i class="fas fa-map-marker-alt text-gray-400"></i>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ <div class="mb-6">
132
+ <label for="destination" class="block text-sm font-medium text-gray-700 mb-1">Destination</label>
133
+ <div class="mt-1 relative rounded-md shadow-sm">
134
+ <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?">
135
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
136
+ <i class="fas fa-flag text-gray-400"></i>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ <div class="grid grid-cols-2 gap-4 mb-6">
141
+ <div>
142
+ <label for="vehicle-type" class="block text-sm font-medium text-gray-700 mb-1">Vehicle Type</label>
143
+ <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">
144
+ <option>Swift (1-2 people)</option>
145
+ <option>Comfort (1-4 people)</option>
146
+ <option>Premium (1-4 people)</option>
147
+ <option>XL (1-6 people)</option>
148
+ </select>
149
+ </div>
150
+ <div>
151
+ <label for="schedule" class="block text-sm font-medium text-gray-700 mb-1">Schedule</label>
152
+ <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">
153
+ <option>Ride now</option>
154
+ <option>Schedule for later</option>
155
+ </select>
156
+ </div>
157
+ </div>
158
+ <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">
159
+ Confirm Ride <i class="fas fa-car ml-2"></i>
160
+ </button>
161
+ </div>
162
+ <div class="md:w-1/2 bg-gray-100 p-8">
163
+ <div class="map-container bg-gray-300 flex items-center justify-center">
164
+ <div class="text-center">
165
+ <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-2"></i>
166
+ <p class="text-gray-500">Interactive map will appear here</p>
167
+ </div>
168
+ </div>
169
+ <div class="mt-6">
170
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Estimated Ride Details</h3>
171
+ <div class="bg-white rounded-lg p-4 shadow">
172
+ <div class="flex justify-between mb-2">
173
+ <span class="text-gray-600">Distance:</span>
174
+ <span class="font-medium">4.2 miles</span>
175
+ </div>
176
+ <div class="flex justify-between mb-2">
177
+ <span class="text-gray-600">Duration:</span>
178
+ <span class="font-medium">12 minutes</span>
179
+ </div>
180
+ <div class="flex justify-between mb-2">
181
+ <span class="text-gray-600">Vehicle Type:</span>
182
+ <span class="font-medium">Swift</span>
183
+ </div>
184
+ <div class="flex justify-between pt-2 mt-2 border-t border-gray-200">
185
+ <span class="text-gray-600 font-semibold">Total:</span>
186
+ <span class="text-xl font-bold text-purple-600">$8.75</span>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Vehicle Options -->
197
+ <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
198
+ <div class="max-w-7xl mx-auto">
199
+ <div class="text-center mb-12">
200
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
201
+ Our Autonomous Fleet
202
+ </h2>
203
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
204
+ Choose the perfect vehicle for your needs.
205
+ </p>
206
+ </div>
207
+
208
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
209
+ <!-- Vehicle Card 1 -->
210
+ <div class="vehicle-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out">
211
+ <div class="p-6">
212
+ <div class="flex items-center mb-4">
213
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
214
+ <i class="fas fa-bolt text-purple-600 text-xl"></i>
215
+ </div>
216
+ <h3 class="text-lg font-bold text-gray-900">Swift</h3>
217
+ </div>
218
+ <p class="text-gray-600 mb-4">Compact and efficient for 1-2 passengers</p>
219
+ <div class="flex items-center justify-between">
220
+ <span class="text-sm text-gray-500">Starting at</span>
221
+ <span class="text-lg font-bold text-purple-600">$1.50/mile</span>
222
+ </div>
223
+ </div>
224
+ <div class="bg-gray-50 px-6 py-4">
225
+ <ul class="grid grid-cols-2 gap-2 text-sm text-gray-600">
226
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 24/7 Availability</li>
227
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Fast Charging</li>
228
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Climate Control</li>
229
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> WiFi</li>
230
+ </ul>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Vehicle Card 2 -->
235
+ <div class="vehicle-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out">
236
+ <div class="p-6">
237
+ <div class="flex items-center mb-4">
238
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
239
+ <i class="fas fa-couch text-blue-600 text-xl"></i>
240
+ </div>
241
+ <h3 class="text-lg font-bold text-gray-900">Comfort</h3>
242
+ </div>
243
+ <p class="text-gray-600 mb-4">Spacious sedan for 1-4 passengers</p>
244
+ <div class="flex items-center justify-between">
245
+ <span class="text-sm text-gray-500">Starting at</span>
246
+ <span class="text-lg font-bold text-blue-600">$2.00/mile</span>
247
+ </div>
248
+ </div>
249
+ <div class="bg-gray-50 px-6 py-4">
250
+ <ul class="grid grid-cols-2 gap-2 text-sm text-gray-600">
251
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Extra Legroom</li>
252
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Premium Audio</li>
253
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Climate Control</li>
254
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> WiFi</li>
255
+ </ul>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Vehicle Card 3 -->
260
+ <div class="vehicle-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out">
261
+ <div class="p-6">
262
+ <div class="flex items-center mb-4">
263
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
264
+ <i class="fas fa-crown text-yellow-600 text-xl"></i>
265
+ </div>
266
+ <h3 class="text-lg font-bold text-gray-900">Premium</h3>
267
+ </div>
268
+ <p class="text-gray-600 mb-4">Luxury experience for 1-4 passengers</p>
269
+ <div class="flex items-center justify-between">
270
+ <span class="text-sm text-gray-500">Starting at</span>
271
+ <span class="text-lg font-bold text-yellow-600">$3.50/mile</span>
272
+ </div>
273
+ </div>
274
+ <div class="bg-gray-50 px-6 py-4">
275
+ <ul class="grid grid-cols-2 gap-2 text-sm text-gray-600">
276
+ <li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> Leather Seats</li>
277
+ <li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> Massage Seats</li>
278
+ <li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> Refreshments</li>
279
+ <li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> WiFi</li>
280
+ </ul>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Vehicle Card 4 -->
285
+ <div class="vehicle-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 ease-in-out">
286
+ <div class="p-6">
287
+ <div class="flex items-center mb-4">
288
+ <div class="bg-green-100 p-3 rounded-full mr-4">
289
+ <i class="fas fa-users text-green-600 text-xl"></i>
290
+ </div>
291
+ <h3 class="text-lg font-bold text-gray-900">XL</h3>
292
+ </div>
293
+ <p class="text-gray-600 mb-4">Large vehicle for groups of 1-6</p>
294
+ <div class="flex items-center justify-between">
295
+ <span class="text-sm text-gray-500">Starting at</span>
296
+ <span class="text-lg font-bold text-green-600">$2.75/mile</span>
297
+ </div>
298
+ </div>
299
+ <div class="bg-gray-50 px-6 py-4">
300
+ <ul class="grid grid-cols-2 gap-2 text-sm text-gray-600">
301
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Extra Seats</li>
302
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Cargo Space</li>
303
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Climate Zones</li>
304
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> WiFi</li>
305
+ </ul>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Subscription Plans -->
313
+ <div class="gradient-bg py-16 px-4 sm:px-6 lg:px-8">
314
+ <div class="max-w-7xl mx-auto">
315
+ <div class="text-center mb-12">
316
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
317
+ Subscription Plans
318
+ </h2>
319
+ <p class="mt-4 max-w-2xl text-xl text-purple-100 mx-auto">
320
+ Unlimited access to our autonomous fleet with flexible plans.
321
+ </p>
322
+ </div>
323
+
324
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
325
+ <!-- Basic Plan -->
326
+ <div class="subscription-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 ease-in-out">
327
+ <div class="px-6 py-8">
328
+ <h3 class="text-2xl font-bold text-gray-900 mb-2">Basic</h3>
329
+ <p class="text-gray-600 mb-6">For occasional riders</p>
330
+ <div class="mb-6">
331
+ <span class="text-4xl font-bold text-purple-600">$99</span>
332
+ <span class="text-gray-500">/month</span>
333
+ </div>
334
+ <ul class="space-y-3 mb-8">
335
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> 300 miles included</li>
336
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Swift vehicles only</li>
337
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> $0.50 per additional mile</li>
338
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Priority booking</li>
339
+ </ul>
340
+ <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">
341
+ Get Started
342
+ </button>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Popular Plan -->
347
+ <div class="subscription-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 ease-in-out transform scale-105 relative">
348
+ <div class="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
349
+ POPULAR
350
+ </div>
351
+ <div class="px-6 py-8">
352
+ <h3 class="text-2xl font-bold text-gray-900 mb-2">Premium</h3>
353
+ <p class="text-gray-600 mb-6">For daily commuters</p>
354
+ <div class="mb-6">
355
+ <span class="text-4xl font-bold text-purple-600">$249</span>
356
+ <span class="text-gray-500">/month</span>
357
+ </div>
358
+ <ul class="space-y-3 mb-8">
359
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> 1,000 miles included</li>
360
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> All vehicle types</li>
361
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> $0.35 per additional mile</li>
362
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> VIP booking</li>
363
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Free premium upgrades</li>
364
+ </ul>
365
+ <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">
366
+ Get Started
367
+ </button>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Business Plan -->
372
+ <div class="subscription-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 ease-in-out">
373
+ <div class="px-6 py-8">
374
+ <h3 class="text-2xl font-bold text-gray-900 mb-2">Business</h3>
375
+ <p class="text-gray-600 mb-6">For companies and teams</p>
376
+ <div class="mb-6">
377
+ <span class="text-4xl font-bold text-purple-600">$499</span>
378
+ <span class="text-gray-500">/month</span>
379
+ </div>
380
+ <ul class="space-y-3 mb-8">
381
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> 3,000 miles included</li>
382
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> All vehicle types</li>
383
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> $0.25 per additional mile</li>
384
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Dedicated fleet access</li>
385
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Business analytics</li>
386
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-3"></i> Multiple user accounts</li>
387
+ </ul>
388
+ <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">
389
+ Contact Sales
390
+ </button>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- How It Works -->
398
+ <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
399
+ <div class="max-w-7xl mx-auto">
400
+ <div class="text-center mb-12">
401
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
402
+ How SwiftRide Works
403
+ </h2>
404
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
405
+ Autonomous mobility made simple and efficient.
406
+ </p>
407
+ </div>
408
+
409
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
410
+ <!-- Step 1 -->
411
+ <div class="text-center">
412
+ <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 text-purple-600 mb-4">
413
+ <span class="text-xl font-bold">1</span>
414
+ </div>
415
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Book or Subscribe</h3>
416
+ <p class="text-gray-600">
417
+ Request a ride instantly or choose a subscription plan that fits your lifestyle.
418
+ </p>
419
+ </div>
420
+
421
+ <!-- Step 2 -->
422
+ <div class="text-center">
423
+ <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 text-purple-600 mb-4">
424
+ <span class="text-xl font-bold">2</span>
425
+ </div>
426
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Vehicle Arrives</h3>
427
+ <p class="text-gray-600">
428
+ Our autonomous vehicle arrives at your location within minutes, ready to go.
429
+ </p>
430
+ </div>
431
+
432
+ <!-- Step 3 -->
433
+ <div class="text-center">
434
+ <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 text-purple-600 mb-4">
435
+ <span class="text-xl font-bold">3</span>
436
+ </div>
437
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Enjoy the Ride</h3>
438
+ <p class="text-gray-600">
439
+ Relax, work, or entertain yourself while our AI handles the driving.
440
+ </p>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="mt-16">
445
+ <div class="bg-gray-50 rounded-xl p-8 md:p-12">
446
+ <div class="md:flex items-center">
447
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
448
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Experience the Future Today</h3>
449
+ <p class="text-gray-600 mb-6">
450
+ 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.
451
+ </p>
452
+ <div class="flex flex-col sm:flex-row gap-4">
453
+ <button class="gradient-bg hover:opacity-90 text-white font-bold py-3 px-6 rounded-md transition duration-150 ease-in-out">
454
+ Download the App
455
+ </button>
456
+ <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">
457
+ Watch Demo
458
+ </button>
459
+ </div>
460
+ </div>
461
+ <div class="md:w-1/2">
462
+ <div class="bg-gray-300 aspect-video rounded-lg flex items-center justify-center">
463
+ <i class="fas fa-play-circle text-5xl text-purple-600"></i>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Testimonials -->
473
+ <div class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
474
+ <div class="max-w-7xl mx-auto">
475
+ <div class="text-center mb-12">
476
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
477
+ What Our Members Say
478
+ </h2>
479
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
480
+ Join thousands of happy riders experiencing autonomous mobility.
481
+ </p>
482
+ </div>
483
+
484
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
485
+ <!-- Testimonial 1 -->
486
+ <div class="bg-white p-8 rounded-xl shadow">
487
+ <div class="flex items-center mb-4">
488
+ <div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">
489
+ AS
490
+ </div>
491
+ <div>
492
+ <h4 class="font-bold text-gray-900">Alex S.</h4>
493
+ <div class="flex text-yellow-400">
494
+ <i class="fas fa-star"></i>
495
+ <i class="fas fa-star"></i>
496
+ <i class="fas fa-star"></i>
497
+ <i class="fas fa-star"></i>
498
+ <i class="fas fa-star"></i>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ <p class="text-gray-600">
503
+ "The subscription model has completely changed how I commute. I save so much time and money compared to owning a car."
504
+ </p>
505
+ </div>
506
+
507
+ <!-- Testimonial 2 -->
508
+ <div class="bg-white p-8 rounded-xl shadow">
509
+ <div class="flex items-center mb-4">
510
+ <div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">
511
+ MJ
512
+ </div>
513
+ <div>
514
+ <h4 class="font-bold text-gray-900">Maria J.</h4>
515
+ <div class="flex text-yellow-400">
516
+ <i class="fas fa-star"></i>
517
+ <i class="fas fa-star"></i>
518
+ <i class="fas fa-star"></i>
519
+ <i class="fas fa-star"></i>
520
+ <i class="fas fa-star"></i>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ <p class="text-gray-600">
525
+ "I was skeptical about autonomous vehicles at first, but SwiftRide's technology is flawless. I feel safer than with human drivers."
526
+ </p>
527
+ </div>
528
+
529
+ <!-- Testimonial 3 -->
530
+ <div class="bg-white p-8 rounded-xl shadow">
531
+ <div class="flex items-center mb-4">
532
+ <div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">
533
+ TR
534
+ </div>
535
+ <div>
536
+ <h4 class="font-bold text-gray-900">Thomas R.</h4>
537
+ <div class="flex text-yellow-400">
538
+ <i class="fas fa-star"></i>
539
+ <i class="fas fa-star"></i>
540
+ <i class="fas fa-star"></i>
541
+ <i class="fas fa-star"></i>
542
+ <i class
543
+ <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>
544
+ </html>