Hugging Face's logo

Spaces:
HakDEV
/
motorent
Running

App Files Community
HakDEV commited on
Commit
2909714
·
verified ·
1 Parent(s): c3a1678

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +553 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Motorent
3
- emoji: 🌖
4
- colorFrom: gray
5
- colorTo: gray
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: motorent
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,553 @@
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>RideEasy - Motorcycle Rentals</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
+ .hero-bg {
11
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+
16
+ .bike-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
19
+ }
20
+
21
+ .testimonial-card {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .testimonial-card:hover {
26
+ transform: scale(1.03);
27
+ }
28
+
29
+ .nav-link:hover::after {
30
+ content: '';
31
+ display: block;
32
+ width: 100%;
33
+ height: 2px;
34
+ background: #f59e0b;
35
+ margin-top: 2px;
36
+ }
37
+
38
+ @keyframes fadeIn {
39
+ from { opacity: 0; }
40
+ to { opacity: 1; }
41
+ }
42
+
43
+ .fade-in {
44
+ animation: fadeIn 1s ease-in;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="font-sans bg-gray-50">
49
+ <!-- Navigation -->
50
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
51
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
52
+ <div class="flex justify-between h-16">
53
+ <div class="flex items-center">
54
+ <div class="flex-shrink-0 flex items-center">
55
+ <i class="fas fa-motorcycle text-2xl text-yellow-500 mr-2"></i>
56
+ <span class="text-xl font-bold text-gray-900">RideEasy</span>
57
+ </div>
58
+ </div>
59
+ <div class="hidden md:flex items-center space-x-8">
60
+ <a href="#home" class="nav-link text-gray-900 hover:text-yellow-500 px-3 py-2 text-sm font-medium">Home</a>
61
+ <a href="#bikes" class="nav-link text-gray-900 hover:text-yellow-500 px-3 py-2 text-sm font-medium">Our Bikes</a>
62
+ <a href="#how" class="nav-link text-gray-900 hover:text-yellow-500 px-3 py-2 text-sm font-medium">How It Works</a>
63
+ <a href="#testimonials" class="nav-link text-gray-900 hover:text-yellow-500 px-3 py-2 text-sm font-medium">Testimonials</a>
64
+ <a href="#contact" class="nav-link text-gray-900 hover:text-yellow-500 px-3 py-2 text-sm font-medium">Contact</a>
65
+ </div>
66
+ <div class="md:hidden flex items-center">
67
+ <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900 focus:outline-none">
68
+ <i class="fas fa-bars text-2xl"></i>
69
+ </button>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Mobile menu -->
75
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
76
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
77
+ <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-yellow-500">Home</a>
78
+ <a href="#bikes" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-yellow-500">Our Bikes</a>
79
+ <a href="#how" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-yellow-500">How It Works</a>
80
+ <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-yellow-500">Testimonials</a>
81
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-yellow-500">Contact</a>
82
+ </div>
83
+ </div>
84
+ </nav>
85
+
86
+ <!-- Hero Section -->
87
+ <section id="home" class="hero-bg text-white py-20 md:py-32 fade-in">
88
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
89
+ <div class="md:w-1/2">
90
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Ride Your Adventure</h1>
91
+ <p class="text-lg md:text-xl mb-8">Explore the city or countryside with our premium motorcycle rentals. Affordable rates, flexible durations, and top-quality bikes.</p>
92
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
93
+ <a href="#bikes" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300">Browse Bikes</a>
94
+ <a href="#how" class="bg-transparent hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-6 border-2 border-white rounded-lg text-center transition duration-300">How It Works</a>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </section>
99
+
100
+ <!-- Stats Section -->
101
+ <section class="bg-gray-100 py-12">
102
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
103
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
104
+ <div class="bg-white p-6 rounded-lg shadow">
105
+ <div class="text-yellow-500 text-4xl mb-3">
106
+ <i class="fas fa-motorcycle"></i>
107
+ </div>
108
+ <h3 class="text-3xl font-bold text-gray-900">150+</h3>
109
+ <p class="text-gray-600">Bikes Available</p>
110
+ </div>
111
+ <div class="bg-white p-6 rounded-lg shadow">
112
+ <div class="text-yellow-500 text-4xl mb-3">
113
+ <i class="fas fa-map-marked-alt"></i>
114
+ </div>
115
+ <h3 class="text-3xl font-bold text-gray-900">25</h3>
116
+ <p class="text-gray-600">Cities Covered</p>
117
+ </div>
118
+ <div class="bg-white p-6 rounded-lg shadow">
119
+ <div class="text-yellow-500 text-4xl mb-3">
120
+ <i class="fas fa-smile"></i>
121
+ </div>
122
+ <h3 class="text-3xl font-bold text-gray-900">10,000+</h3>
123
+ <p class="text-gray-600">Happy Riders</p>
124
+ </div>
125
+ <div class="bg-white p-6 rounded-lg shadow">
126
+ <div class="text-yellow-500 text-4xl mb-3">
127
+ <i class="fas fa-clock"></i>
128
+ </div>
129
+ <h3 class="text-3xl font-bold text-gray-900">24/7</h3>
130
+ <p class="text-gray-600">Support Available</p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </section>
135
+
136
+ <!-- Bike Collection Section -->
137
+ <section id="bikes" class="py-16 bg-white">
138
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
139
+ <div class="text-center mb-12">
140
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Premium Bike Collection</h2>
141
+ <p class="text-gray-600 max-w-2xl mx-auto">Choose from our wide range of motorcycles for every type of rider and adventure.</p>
142
+ </div>
143
+
144
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
145
+ <!-- Bike Card 1 -->
146
+ <div class="bike-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300">
147
+ <div class="relative">
148
+ <img src="https://images.unsplash.com/photo-1589311467701-cd310caa87c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sport Bike" class="w-full h-64 object-cover">
149
+ <div class="absolute top-4 right-4 bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">Popular</div>
150
+ </div>
151
+ <div class="p-6">
152
+ <div class="flex justify-between items-start mb-2">
153
+ <h3 class="text-xl font-bold text-gray-900">Yamaha R1</h3>
154
+ <span class="text-yellow-500 font-bold">$99/day</span>
155
+ </div>
156
+ <div class="flex items-center text-gray-600 mb-4">
157
+ <i class="fas fa-gas-pump mr-2"></i>
158
+ <span class="mr-4">Petrol</span>
159
+ <i class="fas fa-tachometer-alt mr-2"></i>
160
+ <span>1000cc</span>
161
+ </div>
162
+ <p class="text-gray-600 mb-4">High-performance sport bike with cutting-edge technology for the ultimate riding experience.</p>
163
+ <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-300">
164
+ Rent Now
165
+ </button>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Bike Card 2 -->
170
+ <div class="bike-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300">
171
+ <div class="relative">
172
+ <img src="https://images.unsplash.com/photo-1558980394-4c7c9299fe96?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cruiser Bike" class="w-full h-64 object-cover">
173
+ </div>
174
+ <div class="p-6">
175
+ <div class="flex justify-between items-start mb-2">
176
+ <h3 class="text-xl font-bold text-gray-900">Harley Davidson</h3>
177
+ <span class="text-yellow-500 font-bold">$129/day</span>
178
+ </div>
179
+ <div class="flex items-center text-gray-600 mb-4">
180
+ <i class="fas fa-gas-pump mr-2"></i>
181
+ <span class="mr-4">Petrol</span>
182
+ <i class="fas fa-tachometer-alt mr-2"></i>
183
+ <span>1800cc</span>
184
+ </div>
185
+ <p class="text-gray-600 mb-4">Iconic American cruiser with powerful engine and classic styling for comfortable long rides.</p>
186
+ <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-300">
187
+ Rent Now
188
+ </button>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Bike Card 3 -->
193
+ <div class="bike-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300">
194
+ <div class="relative">
195
+ <img src="https://images.unsplash.com/photo-1568772585407-9361f9bf3a87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Adventure Bike" class="w-full h-64 object-cover">
196
+ <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold">Eco</div>
197
+ </div>
198
+ <div class="p-6">
199
+ <div class="flex justify-between items-start mb-2">
200
+ <h3 class="text-xl font-bold text-gray-900">BMW R1250GS</h3>
201
+ <span class="text-yellow-500 font-bold">$149/day</span>
202
+ </div>
203
+ <div class="flex items-center text-gray-600 mb-4">
204
+ <i class="fas fa-gas-pump mr-2"></i>
205
+ <span class="mr-4">Petrol</span>
206
+ <i class="fas fa-tachometer-alt mr-2"></i>
207
+ <span>1250cc</span>
208
+ </div>
209
+ <p class="text-gray-600 mb-4">Premium adventure bike with advanced suspension for both on-road and off-road adventures.</p>
210
+ <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-300">
211
+ Rent Now
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="text-center mt-12">
218
+ <button class="bg-gray-900 hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-lg transition duration-300">
219
+ View All Bikes
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </section>
224
+
225
+ <!-- How It Works Section -->
226
+ <section id="how" class="py-16 bg-gray-100">
227
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
228
+ <div class="text-center mb-12">
229
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">How It Works</h2>
230
+ <p class="text-gray-600 max-w-2xl mx-auto">Renting a motorcycle has never been easier. Just follow these simple steps.</p>
231
+ </div>
232
+
233
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
234
+ <div class="bg-white p-8 rounded-lg shadow text-center">
235
+ <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
236
+ <span class="text-yellow-500 text-2xl font-bold">1</span>
237
+ </div>
238
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Choose Your Bike</h3>
239
+ <p class="text-gray-600">Browse our collection and select the perfect bike for your adventure. Filter by type, price, or features.</p>
240
+ </div>
241
+
242
+ <div class="bg-white p-8 rounded-lg shadow text-center">
243
+ <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
244
+ <span class="text-yellow-500 text-2xl font-bold">2</span>
245
+ </div>
246
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Book Online</h3>
247
+ <p class="text-gray-600">Select your rental dates, add any accessories, and complete your booking with our secure payment system.</p>
248
+ </div>
249
+
250
+ <div class="bg-white p-8 rounded-lg shadow text-center">
251
+ <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
252
+ <span class="text-yellow-500 text-2xl font-bold">3</span>
253
+ </div>
254
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Pick Up & Ride</h3>
255
+ <p class="text-gray-600">Visit our location with your license and documents, complete the paperwork, and hit the road!</p>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="mt-12 bg-white rounded-lg shadow overflow-hidden">
260
+ <div class="md:flex">
261
+ <div class="md:w-1/2 p-8 md:p-12">
262
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Safety First</h3>
263
+ <p class="text-gray-600 mb-6">We provide all necessary safety gear with every rental, including helmets, gloves, and jackets. Our bikes undergo rigorous maintenance checks before each rental.</p>
264
+ <ul class="space-y-3">
265
+ <li class="flex items-start">
266
+ <i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i>
267
+ <span class="text-gray-700">Full-face helmets available in all sizes</span>
268
+ </li>
269
+ <li class="flex items-start">
270
+ <i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i>
271
+ <span class="text-gray-700">Protective riding jackets and pants</span>
272
+ </li>
273
+ <li class="flex items-start">
274
+ <i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i>
275
+ <span class="text-gray-700">24/7 roadside assistance</span>
276
+ </li>
277
+ </ul>
278
+ </div>
279
+ <div class="md:w-1/2">
280
+ <img src="https://images.unsplash.com/photo-1601758003122-53c40e686a19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Safety Gear" class="w-full h-full object-cover">
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <!-- Testimonials Section -->
288
+ <section id="testimonials" class="py-16 bg-white">
289
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
290
+ <div class="text-center mb-12">
291
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Customers Say</h2>
292
+ <p class="text-gray-600 max-w-2xl mx-auto">Don't just take our word for it. Here's what our riders have to say about their experiences.</p>
293
+ </div>
294
+
295
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
296
+ <!-- Testimonial 1 -->
297
+ <div class="testimonial-card bg-gray-100 p-8 rounded-lg">
298
+ <div class="flex items-center mb-4">
299
+ <div class="text-yellow-500 mr-2">
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star"></i>
302
+ <i class="fas fa-star"></i>
303
+ <i class="fas fa-star"></i>
304
+ <i class="fas fa-star"></i>
305
+ </div>
306
+ </div>
307
+ <p class="text-gray-700 mb-6">"Renting from RideEasy was a breeze! The bike was in perfect condition, and the staff was incredibly helpful. Will definitely use them again for my next trip."</p>
308
+ <div class="flex items-center">
309
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
310
+ <div>
311
+ <h4 class="font-bold text-gray-900">Sarah J.</h4>
312
+ <p class="text-gray-600">Adventure Rider</p>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Testimonial 2 -->
318
+ <div class="testimonial-card bg-gray-100 p-8 rounded-lg">
319
+ <div class="flex items-center mb-4">
320
+ <div class="text-yellow-500 mr-2">
321
+ <i class="fas fa-star"></i>
322
+ <i class="fas fa-star"></i>
323
+ <i class="fas fa-star"></i>
324
+ <i class="fas fa-star"></i>
325
+ <i class="fas fa-star"></i>
326
+ </div>
327
+ </div>
328
+ <p class="text-gray-700 mb-6">"As a first-time renter, I was nervous, but the team at RideEasy made everything so simple. The bike was fantastic, and I had an amazing weekend exploring the coast."</p>
329
+ <div class="flex items-center">
330
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
331
+ <div>
332
+ <h4 class="font-bold text-gray-900">Michael T.</h4>
333
+ <p class="text-gray-600">First-time Renter</p>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Testimonial 3 -->
339
+ <div class="testimonial-card bg-gray-100 p-8 rounded-lg">
340
+ <div class="flex items-center mb-4">
341
+ <div class="text-yellow-500 mr-2">
342
+ <i class="fas fa-star"></i>
343
+ <i class="fas fa-star"></i>
344
+ <i class="fas fa-star"></i>
345
+ <i class="fas fa-star"></i>
346
+ <i class="fas fa-star-half-alt"></i>
347
+ </div>
348
+ </div>
349
+ <p class="text-gray-700 mb-6">"I've rented from several companies, but RideEasy stands out for their customer service and bike quality. The Harley I rented was flawless and made my trip unforgettable."</p>
350
+ <div class="flex items-center">
351
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa M." class="w-12 h-12 rounded-full mr-4">
352
+ <div>
353
+ <h4 class="font-bold text-gray-900">Lisa M.</h4>
354
+ <p class="text-gray-600">Experienced Rider</p>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </section>
361
+
362
+ <!-- CTA Section -->
363
+ <section class="bg-yellow-500 py-16">
364
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
365
+ <h2 class="text-3xl font-bold text-white mb-6">Ready for Your Next Adventure?</h2>
366
+ <p class="text-xl text-white mb-8 max-w-3xl mx-auto">Join thousands of riders who've discovered the freedom of motorcycle travel with RideEasy.</p>
367
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
368
+ <a href="#bikes" class="bg-white hover:bg-gray-100 text-yellow-500 font-bold py-3 px-8 rounded-lg transition duration-300">Browse Bikes</a>
369
+ <a href="#contact" class="bg-transparent hover:bg-white hover:text-yellow-500 text-white font-bold py-3 px-8 border-2 border-white rounded-lg transition duration-300">Contact Us</a>
370
+ </div>
371
+ </div>
372
+ </section>
373
+
374
+ <!-- Contact Section -->
375
+ <section id="contact" class="py-16 bg-gray-100">
376
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
377
+ <div class="text-center mb-12">
378
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Contact Us</h2>
379
+ <p class="text-gray-600 max-w-2xl mx-auto">Have questions? We're here to help. Reach out to our friendly team.</p>
380
+ </div>
381
+
382
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
383
+ <div class="md:flex">
384
+ <div class="md:w-1/2 p-8 md:p-12">
385
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Get In Touch</h3>
386
+ <form>
387
+ <div class="mb-4">
388
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
389
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
390
+ </div>
391
+ <div class="mb-4">
392
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
393
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
394
+ </div>
395
+ <div class="mb-4">
396
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
397
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"></textarea>
398
+ </div>
399
+ <button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
400
+ Send Message
401
+ </button>
402
+ </form>
403
+ </div>
404
+ <div class="md:w-1/2 bg-gray-900 text-white p-8 md:p-12">
405
+ <h3 class="text-2xl font-bold mb-6">Our Locations</h3>
406
+ <div class="mb-8">
407
+ <h4 class="text-xl font-semibold mb-2">Headquarters</h4>
408
+ <p class="text-gray-300 mb-1">123 Motor Avenue</p>
409
+ <p class="text-gray-300 mb-1">Bike City, BC 12345</p>
410
+ <p class="text-gray-300">United States</p>
411
+ </div>
412
+ <div class="mb-8">
413
+ <h4 class="text-xl font-semibold mb-2">Contact Info</h4>
414
+ <p class="text-gray-300 mb-1 flex items-center">
415
+ <i class="fas fa-phone-alt mr-2 text-yellow-500"></i> (123) 456-7890
416
+ </p>
417
+ <p class="text-gray-300 mb-1 flex items-center">
418
+ <i class="fas fa-envelope mr-2 text-yellow-500"></i> [email protected]
419
+ </p>
420
+ </div>
421
+ <div>
422
+ <h4 class="text-xl font-semibold mb-4">Opening Hours</h4>
423
+ <div class="space-y-2">
424
+ <p class="text-gray-300 flex justify-between">
425
+ <span>Monday - Friday</span>
426
+ <span>8:00 AM - 8:00 PM</span>
427
+ </p>
428
+ <p class="text-gray-300 flex justify-between">
429
+ <span>Saturday</span>
430
+ <span>9:00 AM - 6:00 PM</span>
431
+ </p>
432
+ <p class="text-gray-300 flex justify-between">
433
+ <span>Sunday</span>
434
+ <span>10:00 AM - 4:00 PM</span>
435
+ </p>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </section>
443
+
444
+ <!-- Footer -->
445
+ <footer class="bg-gray-900 text-white py-12">
446
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
447
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
448
+ <div>
449
+ <div class="flex items-center mb-4">
450
+ <i class="fas fa-motorcycle text-2xl text-yellow-500 mr-2"></i>
451
+ <span class="text-xl font-bold">RideEasy</span>
452
+ </div>
453
+ <p class="text-gray-400 mb-4">Your trusted partner for motorcycle rentals and adventures.</p>
454
+ <div class="flex space-x-4">
455
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
456
+ <i class="fab fa-facebook-f"></i>
457
+ </a>
458
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
459
+ <i class="fab fa-twitter"></i>
460
+ </a>
461
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
462
+ <i class="fab fa-instagram"></i>
463
+ </a>
464
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
465
+ <i class="fab fa-youtube"></i>
466
+ </a>
467
+ </div>
468
+ </div>
469
+ <div>
470
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
471
+ <ul class="space-y-2">
472
+ <li><a href="#home" class="text-gray-400 hover:text-yellow-500 transition duration-300">Home</a></li>
473
+ <li><a href="#bikes" class="text-gray-400 hover:text-yellow-500 transition duration-300">Our Bikes</a></li>
474
+ <li><a href="#how" class="text-gray-400 hover:text-yellow-500 transition duration-300">How It Works</a></li>
475
+ <li><a href="#testimonials" class="text-gray-400 hover:text-yellow-500 transition duration-300">Testimonials</a></li>
476
+ <li><a href="#contact" class="text-gray-400 hover:text-yellow-500 transition duration-300">Contact</a></li>
477
+ </ul>
478
+ </div>
479
+ <div>
480
+ <h3 class="text-lg font-semibold mb-4">Bike Types</h3>
481
+ <ul class="space-y-2">
482
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Sport Bikes</a></li>
483
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Cruisers</a></li>
484
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Adventure Bikes</a></li>
485
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Touring Bikes</a></li>
486
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Scooters</a></li>
487
+ </ul>
488
+ </div>
489
+ <div>
490
+ <h3 class="text-lg font-semibold mb-4">Newsletter</h3>
491
+ <p class="text-gray-400 mb-4">Subscribe to get updates on new bikes and special offers.</p>
492
+ <form class="flex">
493
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full">
494
+ <button type="submit" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-r-lg transition duration-300">
495
+ <i class="fas fa-paper-plane"></i>
496
+ </button>
497
+ </form>
498
+ </div>
499
+ </div>
500
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
501
+ <p>&copy; 2023 RideEasy Motorcycle Rentals. All rights reserved.</p>
502
+ </div>
503
+ </div>
504
+ </footer>
505
+
506
+ <script>
507
+ // Mobile menu toggle
508
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
509
+ const menu = document.getElementById('mobile-menu');
510
+ menu.classList.toggle('hidden');
511
+ });
512
+
513
+ // Smooth scrolling for anchor links
514
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
515
+ anchor.addEventListener('click', function (e) {
516
+ e.preventDefault();
517
+
518
+ const targetId = this.getAttribute('href');
519
+ const targetElement = document.querySelector(targetId);
520
+
521
+ if (targetElement) {
522
+ targetElement.scrollIntoView({
523
+ behavior: 'smooth'
524
+ });
525
+
526
+ // Close mobile menu if open
527
+ const mobileMenu = document.getElementById('mobile-menu');
528
+ if (!mobileMenu.classList.contains('hidden')) {
529
+ mobileMenu.classList.add('hidden');
530
+ }
531
+ }
532
+ });
533
+ });
534
+
535
+ // Add fade-in animation to sections as they come into view
536
+ const sections = document.querySelectorAll('section');
537
+
538
+ const observer = new IntersectionObserver((entries) => {
539
+ entries.forEach(entry => {
540
+ if (entry.isIntersecting) {
541
+ entry.target.classList.add('fade-in');
542
+ }
543
+ });
544
+ }, {
545
+ threshold: 0.1
546
+ });
547
+
548
+ sections.forEach(section => {
549
+ observer.observe(section);
550
+ });
551
+ </script>
552
+ <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=HakDEV/motorent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
553
+ </html>