Hugging Face's logo

Spaces:
oahgod
/
shineauto
Running

App Files Community
oahgod commited on
Commit
40b8e1d
·
verified ·
1 Parent(s): 8c984e1

Create a landing page for a car detailing business, make it flashy and modern. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +630 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Shineauto
3
- emoji: 👁
4
- colorFrom: yellow
5
- colorTo: blue
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: shineauto
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
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,630 @@
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>ShineAuto | Premium Car Detailing</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-gradient {
11
+ background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
12
+ }
13
+ .service-card:hover {
14
+ transform: translateY(-10px);
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
+ .before-after {
18
+ position: relative;
19
+ overflow: hidden;
20
+ }
21
+ .before-after img {
22
+ transition: all 0.5s ease;
23
+ }
24
+ .before-after:hover img {
25
+ transform: scale(1.05);
26
+ }
27
+ .testimonial-card {
28
+ transition: all 0.3s ease;
29
+ }
30
+ .testimonial-card:hover {
31
+ transform: scale(1.02);
32
+ }
33
+ .nav-link {
34
+ position: relative;
35
+ }
36
+ .nav-link:after {
37
+ content: '';
38
+ position: absolute;
39
+ width: 0;
40
+ height: 2px;
41
+ bottom: -2px;
42
+ left: 0;
43
+ background-color: #3b82f6;
44
+ transition: width 0.3s ease;
45
+ }
46
+ .nav-link:hover:after {
47
+ width: 100%;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="font-sans bg-gray-50">
52
+ <!-- Navigation -->
53
+ <nav class="fixed w-full bg-white shadow-md z-50">
54
+ <div class="container mx-auto px-6 py-4">
55
+ <div class="flex justify-between items-center">
56
+ <div class="flex items-center">
57
+ <div class="text-2xl font-bold text-blue-600">SHINE<span class="text-gray-800">AUTO</span></div>
58
+ </div>
59
+ <div class="hidden md:flex space-x-8">
60
+ <a href="#home" class="nav-link text-gray-800 hover:text-blue-600">Home</a>
61
+ <a href="#services" class="nav-link text-gray-800 hover:text-blue-600">Services</a>
62
+ <a href="#gallery" class="nav-link text-gray-800 hover:text-blue-600">Gallery</a>
63
+ <a href="#testimonials" class="nav-link text-gray-800 hover:text-blue-600">Testimonials</a>
64
+ <a href="#contact" class="nav-link text-gray-800 hover:text-blue-600">Contact</a>
65
+ </div>
66
+ <div class="md:hidden">
67
+ <button id="menu-btn" class="text-gray-800 focus:outline-none">
68
+ <i class="fas fa-bars text-2xl"></i>
69
+ </button>
70
+ </div>
71
+ </div>
72
+ <!-- Mobile Menu -->
73
+ <div id="mobile-menu" class="hidden md:hidden mt-4">
74
+ <a href="#home" class="block py-2 text-gray-800 hover:text-blue-600">Home</a>
75
+ <a href="#services" class="block py-2 text-gray-800 hover:text-blue-600">Services</a>
76
+ <a href="#gallery" class="block py-2 text-gray-800 hover:text-blue-600">Gallery</a>
77
+ <a href="#testimonials" class="block py-2 text-gray-800 hover:text-blue-600">Testimonials</a>
78
+ <a href="#contact" class="block py-2 text-gray-800 hover:text-blue-600">Contact</a>
79
+ </div>
80
+ </div>
81
+ </nav>
82
+
83
+ <!-- Hero Section -->
84
+ <section id="home" class="relative h-screen flex items-center justify-center bg-gray-900 overflow-hidden">
85
+ <div class="absolute inset-0">
86
+ <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
87
+ alt="Luxury Car" class="w-full h-full object-cover">
88
+ <div class="absolute inset-0 hero-gradient"></div>
89
+ </div>
90
+ <div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
91
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Professional <span class="text-blue-400">Car Detailing</span> Services</h1>
92
+ <p class="text-xl text-gray-300 mb-8">We bring back the showroom shine to your vehicle with our premium detailing packages.</p>
93
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
94
+ <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
95
+ Book Now
96
+ </a>
97
+ <a href="#services" class="bg-transparent hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-8 border-2 border-white rounded-full transition duration-300 transform hover:scale-105">
98
+ Our Services
99
+ </a>
100
+ </div>
101
+ </div>
102
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center">
103
+ <a href="#services" class="text-white animate-bounce">
104
+ <i class="fas fa-chevron-down text-3xl"></i>
105
+ </a>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Services Section -->
110
+ <section id="services" class="py-20 bg-white">
111
+ <div class="container mx-auto px-6">
112
+ <div class="text-center mb-16">
113
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our <span class="text-blue-600">Premium</span> Services</h2>
114
+ <p class="text-gray-600 max-w-2xl mx-auto">We offer a range of detailing services to meet every need and budget, from basic washes to complete ceramic coatings.</p>
115
+ </div>
116
+
117
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
118
+ <!-- Service 1 -->
119
+ <div class="service-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300">
120
+ <div class="relative h-48 overflow-hidden">
121
+ <img src="https://images.unsplash.com/photo-1607860108855-64acf2078ed9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
122
+ alt="Exterior Detailing" class="w-full h-full object-cover">
123
+ <div class="absolute inset-0 bg-blue-600 bg-opacity-30"></div>
124
+ </div>
125
+ <div class="p-6">
126
+ <div class="flex items-center mb-4">
127
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
128
+ <i class="fas fa-car text-blue-600 text-xl"></i>
129
+ </div>
130
+ <h3 class="text-xl font-bold text-gray-800">Exterior Detailing</h3>
131
+ </div>
132
+ <p class="text-gray-600 mb-4">Complete exterior cleaning, polishing, and protection to restore your vehicle's shine.</p>
133
+ <ul class="space-y-2 mb-6">
134
+ <li class="flex items-center">
135
+ <i class="fas fa-check text-blue-600 mr-2"></i>
136
+ <span>Hand wash & dry</span>
137
+ </li>
138
+ <li class="flex items-center">
139
+ <i class="fas fa-check text-blue-600 mr-2"></i>
140
+ <span>Clay bar treatment</span>
141
+ </li>
142
+ <li class="flex items-center">
143
+ <i class="fas fa-check text-blue-600 mr-2"></i>
144
+ <span>Paint correction</span>
145
+ </li>
146
+ <li class="flex items-center">
147
+ <i class="fas fa-check text-blue-600 mr-2"></i>
148
+ <span>Sealant application</span>
149
+ </li>
150
+ </ul>
151
+ <div class="flex justify-between items-center">
152
+ <span class="text-2xl font-bold text-gray-800">$149+</span>
153
+ <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium">Book Now</a>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Service 2 -->
159
+ <div class="service-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300">
160
+ <div class="relative h-48 overflow-hidden">
161
+ <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
162
+ alt="Interior Detailing" class="w-full h-full object-cover">
163
+ <div class="absolute inset-0 bg-blue-600 bg-opacity-30"></div>
164
+ </div>
165
+ <div class="p-6">
166
+ <div class="flex items-center mb-4">
167
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
168
+ <i class="fas fa-couch text-blue-600 text-xl"></i>
169
+ </div>
170
+ <h3 class="text-xl font-bold text-gray-800">Interior Detailing</h3>
171
+ </div>
172
+ <p class="text-gray-600 mb-4">Deep cleaning and conditioning of all interior surfaces for a fresh, like-new appearance.</p>
173
+ <ul class="space-y-2 mb-6">
174
+ <li class="flex items-center">
175
+ <i class="fas fa-check text-blue-600 mr-2"></i>
176
+ <span>Vacuum & shampoo</span>
177
+ </li>
178
+ <li class="flex items-center">
179
+ <i class="fas fa-check text-blue-600 mr-2"></i>
180
+ <span>Leather conditioning</span>
181
+ </li>
182
+ <li class="flex items-center">
183
+ <i class="fas fa-check text-blue-600 mr-2"></i>
184
+ <span>Dashboard cleaning</span>
185
+ </li>
186
+ <li class="flex items-center">
187
+ <i class="fas fa-check text-blue-600 mr-2"></i>
188
+ <span>Odor elimination</span>
189
+ </li>
190
+ </ul>
191
+ <div class="flex justify-between items-center">
192
+ <span class="text-2xl font-bold text-gray-800">$129+</span>
193
+ <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium">Book Now</a>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Service 3 -->
199
+ <div class="service-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300">
200
+ <div class="relative h-48 overflow-hidden">
201
+ <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80"
202
+ alt="Ceramic Coating" class="w-full h-full object-cover">
203
+ <div class="absolute inset-0 bg-blue-600 bg-opacity-30"></div>
204
+ </div>
205
+ <div class="p-6">
206
+ <div class="flex items-center mb-4">
207
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
208
+ <i class="fas fa-shield-alt text-blue-600 text-xl"></i>
209
+ </div>
210
+ <h3 class="text-xl font-bold text-gray-800">Ceramic Coating</h3>
211
+ </div>
212
+ <p class="text-gray-600 mb-4">Advanced nanotechnology protection that creates an ultra-durable, hydrophobic surface.</p>
213
+ <ul class="space-y-2 mb-6">
214
+ <li class="flex items-center">
215
+ <i class="fas fa-check text-blue-600 mr-2"></i>
216
+ <span>Paint decontamination</span>
217
+ </li>
218
+ <li class="flex items-center">
219
+ <i class="fas fa-check text-blue-600 mr-2"></i>
220
+ <span>Multi-stage correction</span>
221
+ </li>
222
+ <li class="flex items-center">
223
+ <i class="fas fa-check text-blue-600 mr-2"></i>
224
+ <span>Professional application</span>
225
+ </li>
226
+ <li class="flex items-center">
227
+ <i class="fas fa-check text-blue-600 mr-2"></i>
228
+ <span>5+ years protection</span>
229
+ </li>
230
+ </ul>
231
+ <div class="flex justify-between items-center">
232
+ <span class="text-2xl font-bold text-gray-800">$599+</span>
233
+ <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium">Book Now</a>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Gallery Section -->
242
+ <section id="gallery" class="py-20 bg-gray-100">
243
+ <div class="container mx-auto px-6">
244
+ <div class="text-center mb-16">
245
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our <span class="text-blue-600">Work</span> Gallery</h2>
246
+ <p class="text-gray-600 max-w-2xl mx-auto">See the stunning transformations we've achieved for our clients.</p>
247
+ </div>
248
+
249
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
250
+ <!-- Before/After 1 -->
251
+ <div class="before-after group relative rounded-xl overflow-hidden shadow-lg">
252
+ <div class="relative h-64 overflow-hidden">
253
+ <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
254
+ alt="Before Detailing" class="w-full h-full object-cover">
255
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-100 group-hover:opacity-0 transition duration-500">
256
+ <span class="text-white text-xl font-bold">BEFORE</span>
257
+ </div>
258
+ </div>
259
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition duration-500 flex items-center justify-center opacity-0 group-hover:opacity-100">
260
+ <span class="text-white text-xl font-bold">AFTER</span>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Before/After 2 -->
265
+ <div class="before-after group relative rounded-xl overflow-hidden shadow-lg">
266
+ <div class="relative h-64 overflow-hidden">
267
+ <img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2083&q=80"
268
+ alt="Before Detailing" class="w-full h-full object-cover">
269
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-100 group-hover:opacity-0 transition duration-500">
270
+ <span class="text-white text-xl font-bold">BEFORE</span>
271
+ </div>
272
+ </div>
273
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition duration-500 flex items-center justify-center opacity-0 group-hover:opacity-100">
274
+ <span class="text-white text-xl font-bold">AFTER</span>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Before/After 3 -->
279
+ <div class="before-after group relative rounded-xl overflow-hidden shadow-lg">
280
+ <div class="relative h-64 overflow-hidden">
281
+ <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
282
+ alt="Before Detailing" class="w-full h-full object-cover">
283
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-100 group-hover:opacity-0 transition duration-500">
284
+ <span class="text-white text-xl font-bold">BEFORE</span>
285
+ </div>
286
+ </div>
287
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition duration-500 flex items-center justify-center opacity-0 group-hover:opacity-100">
288
+ <span class="text-white text-xl font-bold">AFTER</span>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Before/After 4 -->
293
+ <div class="before-after group relative rounded-xl overflow-hidden shadow-lg">
294
+ <div class="relative h-64 overflow-hidden">
295
+ <img src="https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
296
+ alt="Before Detailing" class="w-full h-full object-cover">
297
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-100 group-hover:opacity-0 transition duration-500">
298
+ <span class="text-white text-xl font-bold">BEFORE</span>
299
+ </div>
300
+ </div>
301
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition duration-500 flex items-center justify-center opacity-0 group-hover:opacity-100">
302
+ <span class="text-white text-xl font-bold">AFTER</span>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Before/After 5 -->
307
+ <div class="before-after group relative rounded-xl overflow-hidden shadow-lg">
308
+ <div class="relative h-64 overflow-hidden">
309
+ <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
310
+ alt="Before Detailing" class="w-full h-full object-cover">
311
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-100 group-hover:opacity-0 transition duration-500">
312
+ <span class="text-white text-xl font-bold">BEFORE</span>
313
+ </div>
314
+ </div>
315
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition duration-500 flex items-center justify-center opacity-0 group-hover:opacity-100">
316
+ <span class="text-white text-xl font-bold">AFTER</span>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Before/After 6 -->
321
+ <div class="before-after group relative rounded-xl overflow-hidden shadow-lg">
322
+ <div class="relative h-64 overflow-hidden">
323
+ <img src="https://images.unsplash.com/photo-1607860108855-64acf2078ed9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
324
+ alt="Before Detailing" class="w-full h-full object-cover">
325
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-100 group-hover:opacity-0 transition duration-500">
326
+ <span class="text-white text-xl font-bold">BEFORE</span>
327
+ </div>
328
+ </div>
329
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition duration-500 flex items-center justify-center opacity-0 group-hover:opacity-100">
330
+ <span class="text-white text-xl font-bold">AFTER</span>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </section>
336
+
337
+ <!-- Testimonials Section -->
338
+ <section id="testimonials" class="py-20 bg-white">
339
+ <div class="container mx-auto px-6">
340
+ <div class="text-center mb-16">
341
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Customer <span class="text-blue-600">Testimonials</span></h2>
342
+ <p class="text-gray-600 max-w-2xl mx-auto">Don't just take our word for it - hear what our clients have to say.</p>
343
+ </div>
344
+
345
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
346
+ <!-- Testimonial 1 -->
347
+ <div class="testimonial-card bg-gray-50 rounded-xl p-8 shadow-md">
348
+ <div class="flex items-center mb-6">
349
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
350
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="John D." class="w-full h-full object-cover">
351
+ </div>
352
+ <div>
353
+ <h4 class="font-bold text-gray-800">John D.</h4>
354
+ <div class="flex text-yellow-400">
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star"></i>
359
+ <i class="fas fa-star"></i>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ <p class="text-gray-600 italic">"I've tried several detailing services before, but ShineAuto is in a league of their own. My 10-year-old BMW looks brand new after their ceramic coating package. Worth every penny!"</p>
364
+ </div>
365
+
366
+ <!-- Testimonial 2 -->
367
+ <div class="testimonial-card bg-gray-50 rounded-xl p-8 shadow-md">
368
+ <div class="flex items-center mb-6">
369
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
370
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah M." class="w-full h-full object-cover">
371
+ </div>
372
+ <div>
373
+ <h4 class="font-bold text-gray-800">Sarah M.</h4>
374
+ <div class="flex text-yellow-400">
375
+ <i class="fas fa-star"></i>
376
+ <i class="fas fa-star"></i>
377
+ <i class="fas fa-star"></i>
378
+ <i class="fas fa-star"></i>
379
+ <i class="fas fa-star"></i>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <p class="text-gray-600 italic">"As a mom with three kids, my minivan was a disaster. The team at ShineAuto worked miracles on both the interior and exterior. It's so clean now I almost don't want to let the kids back in!"</p>
384
+ </div>
385
+
386
+ <!-- Testimonial 3 -->
387
+ <div class="testimonial-card bg-gray-50 rounded-xl p-8 shadow-md">
388
+ <div class="flex items-center mb-6">
389
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
390
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael T." class="w-full h-full object-cover">
391
+ </div>
392
+ <div>
393
+ <h4 class="font-bold text-gray-800">Michael T.</h4>
394
+ <div class="flex text-yellow-400">
395
+ <i class="fas fa-star"></i>
396
+ <i class="fas fa-star"></i>
397
+ <i class="fas fa-star"></i>
398
+ <i class="fas fa-star"></i>
399
+ <i class="fas fa-star"></i>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ <p class="text-gray-600 italic">"The paint correction service removed years of swirl marks from my black Porsche. The attention to detail is incredible - they even cleaned the engine bay! I'll be a customer for life."</p>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </section>
408
+
409
+ <!-- CTA Section -->
410
+ <section class="py-20 bg-blue-600 text-white">
411
+ <div class="container mx-auto px-6 text-center">
412
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Restore Your Vehicle's Shine?</h2>
413
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Book your detailing service today and experience the ShineAuto difference.</p>
414
+ <a href="#contact" class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 inline-block">
415
+ Get a Free Quote
416
+ </a>
417
+ </div>
418
+ </section>
419
+
420
+ <!-- Contact Section -->
421
+ <section id="contact" class="py-20 bg-white">
422
+ <div class="container mx-auto px-6">
423
+ <div class="flex flex-col lg:flex-row">
424
+ <div class="w-full lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
425
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Contact <span class="text-blue-600">Us</span></h2>
426
+ <p class="text-gray-600 mb-8">Have questions or ready to book an appointment? Fill out the form or give us a call.</p>
427
+
428
+ <div class="space-y-6">
429
+ <div class="flex items-start">
430
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
431
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
432
+ </div>
433
+ <div>
434
+ <h4 class="font-bold text-gray-800 mb-1">Our Location</h4>
435
+ <p class="text-gray-600">123 Auto Detail Lane, Suite 100<br>Detroit, MI 48201</p>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="flex items-start">
440
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
441
+ <i class="fas fa-phone-alt text-blue-600"></i>
442
+ </div>
443
+ <div>
444
+ <h4 class="font-bold text-gray-800 mb-1">Call Us</h4>
445
+ <p class="text-gray-600">(555) 123-4567<br>Mon-Sat: 8am - 6pm</p>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="flex items-start">
450
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
451
+ <i class="fas fa-envelope text-blue-600"></i>
452
+ </div>
453
+ <div>
454
+ <h4 class="font-bold text-gray-800 mb-1">Email Us</h4>
455
+ <p class="text-gray-600">info@shineauto.com<br>We respond within 24 hours</p>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="w-full lg:w-1/2">
462
+ <form class="bg-gray-50 p-8 rounded-xl shadow-md">
463
+ <div class="mb-6">
464
+ <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label>
465
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
466
+ </div>
467
+
468
+ <div class="mb-6">
469
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
470
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
471
+ </div>
472
+
473
+ <div class="mb-6">
474
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
475
+ <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
476
+ </div>
477
+
478
+ <div class="mb-6">
479
+ <label for="service" class="block text-gray-700 font-medium mb-2">Service Interested In</label>
480
+ <select id="service" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
481
+ <option value="">Select a service</option>
482
+ <option value="exterior">Exterior Detailing</option>
483
+ <option value="interior">Interior Detailing</option>
484
+ <option value="full">Full Detail</option>
485
+ <option value="ceramic">Ceramic Coating</option>
486
+ <option value="other">Other</option>
487
+ </select>
488
+ </div>
489
+
490
+ <div class="mb-6">
491
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
492
+ <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
493
+ </div>
494
+
495
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
496
+ Send Message
497
+ </button>
498
+ </form>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </section>
503
+
504
+ <!-- Footer -->
505
+ <footer class="bg-gray-900 text-white py-12">
506
+ <div class="container mx-auto px-6">
507
+ <div class="flex flex-col md:flex-row justify-between">
508
+ <div class="mb-8 md:mb-0">
509
+ <div class="text-2xl font-bold text-blue-400 mb-4">SHINE<span class="text-white">AUTO</span></div>
510
+ <p class="text-gray-400 max-w-xs">Premium car detailing services that bring back the showroom shine to your vehicle.</p>
511
+ </div>
512
+
513
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
514
+ <div>
515
+ <h4 class="text-lg font-bold mb-4">Services</h4>
516
+ <ul class="space-y-2">
517
+ <li><a href="#" class="text-gray-400 hover:text-white">Exterior Detailing</a></li>
518
+ <li><a href="#" class="text-gray-400 hover:text-white">Interior Detailing</a></li>
519
+ <li><a href="#" class="text-gray-400 hover:text-white">Ceramic Coating</a></li>
520
+ <li><a href="#" class="text-gray-400 hover:text-white">Paint Correction</a></li>
521
+ </ul>
522
+ </div>
523
+
524
+ <div>
525
+ <h4 class="text-lg font-bold mb-4">Company</h4>
526
+ <ul class="space-y-2">
527
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
528
+ <li><a href="#" class="text-gray-400 hover:text-white">Gallery</a></li>
529
+ <li><a href="#" class="text-gray-400 hover:text-white">Testimonials</a></li>
530
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
531
+ </ul>
532
+ </div>
533
+
534
+ <div>
535
+ <h4 class="text-lg font-bold mb-4">Connect</h4>
536
+ <div class="flex space-x-4 mb-4">
537
+ <a href="#" class="text-gray-400 hover:text-white">
538
+ <i class="fab fa-facebook-f text-xl"></i>
539
+ </a>
540
+ <a href="#" class="text-gray-400 hover:text-white">
541
+ <i class="fab fa-instagram text-xl"></i>
542
+ </a>
543
+ <a href="#" class="text-gray-400 hover:text-white">
544
+ <i class="fab fa-twitter text-xl"></i>
545
+ </a>
546
+ <a href="#" class="text-gray-400 hover:text-white">
547
+ <i class="fab fa-yelp text-xl"></i>
548
+ </a>
549
+ </div>
550
+ <p class="text-gray-400">Subscribe to our newsletter</p>
551
+ <div class="flex mt-2">
552
+ <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l focus:outline-none">
553
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 rounded-r">
554
+ <i class="fas fa-paper-plane"></i>
555
+ </button>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
562
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 ShineAuto. All rights reserved.</p>
563
+ <div class="flex space-x-6">
564
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
565
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </footer>
570
+
571
+ <!-- Back to Top Button -->
572
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
573
+ <i class="fas fa-arrow-up"></i>
574
+ </button>
575
+
576
+ <script>
577
+ // Mobile menu toggle
578
+ const menuBtn = document.getElementById('menu-btn');
579
+ const mobileMenu = document.getElementById('mobile-menu');
580
+
581
+ menuBtn.addEventListener('click', () => {
582
+ mobileMenu.classList.toggle('hidden');
583
+ });
584
+
585
+ // Smooth scrolling for navigation links
586
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
587
+ anchor.addEventListener('click', function (e) {
588
+ e.preventDefault();
589
+
590
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
591
+ behavior: 'smooth'
592
+ });
593
+
594
+ // Close mobile menu if open
595
+ mobileMenu.classList.add('hidden');
596
+ });
597
+ });
598
+
599
+ // Back to top button
600
+ const backToTopBtn = document.getElementById('back-to-top');
601
+
602
+ window.addEventListener('scroll', () => {
603
+ if (window.pageYOffset > 300) {
604
+ backToTopBtn.classList.remove('opacity-0', 'invisible');
605
+ backToTopBtn.classList.add('opacity-100', 'visible');
606
+ } else {
607
+ backToTopBtn.classList.remove('opacity-100', 'visible');
608
+ backToTopBtn.classList.add('opacity-0', 'invisible');
609
+ }
610
+ });
611
+
612
+ backToTopBtn.addEventListener('click', () => {
613
+ window.scrollTo({
614
+ top: 0,
615
+ behavior: 'smooth'
616
+ });
617
+ });
618
+
619
+ // Form submission
620
+ const form = document.querySelector('form');
621
+ if (form) {
622
+ form.addEventListener('submit', (e) => {
623
+ e.preventDefault();
624
+ alert('Thank you for your message! We will contact you shortly.');
625
+ form.reset();
626
+ });
627
+ }
628
+ </script>
629
+ <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=oahgod/shineauto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
630
+ </html>