Hugging Face's logo

Spaces:
jjmandog
/
jaysmobilewash
Running

App Files Community
jjmandog commited on
Commit
3cd2ea8
·
verified ·
1 Parent(s): a6329f3

Please fix the show more buttons they don’t work. When you click they need to open a page or popup where it shows more Info on the package ! Be detailed - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +210 -1159
index.html CHANGED
@@ -7,36 +7,43 @@
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
- @keyframes glow {
11
- from {
12
- text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #b530ff, 0 0 40px #b530ff;
13
- }
14
- to {
15
- text-shadow: 0 0 20px #fff, 0 0 30px #ff1744, 0 0 40px #ff1744, 0 0 50px #ff1744;
16
- }
17
  }
18
 
19
- .glow-text {
20
- animation: glow 1.5s ease-in-out infinite alternate;
 
 
21
  }
22
 
23
- .bg-gradient-radial {
24
- background: radial-gradient(circle, rgba(181,48,255,0.2) 0%, rgba(255,23,68,0.1) 70%, rgba(0,0,0,0) 100%);
 
25
  }
26
 
27
- .service-card:hover {
28
- transform: translateY(-10px);
29
- box-shadow: 0 20px 25px -5px rgba(181, 48, 255, 0.3), 0 10px 10px -5px rgba(181, 48, 255, 0.1);
30
  }
31
 
32
- .process-step:hover {
33
- transform: scale(1.1);
34
- background: linear-gradient(135deg, #b530ff 0%, #ff1744 100%);
35
- color: white;
36
  }
37
 
38
- .process-step:hover .step-number {
39
- color: white;
 
 
 
 
 
 
 
 
 
 
40
  }
41
 
42
  .gallery-item:hover {
@@ -62,77 +69,6 @@
62
  transform: rotate(180deg);
63
  }
64
 
65
- .modal-content {
66
- animation: slideUp 0.3s ease-out;
67
- }
68
-
69
- @keyframes slideUp {
70
- from {
71
- transform: translateY(50px);
72
- opacity: 0;
73
- }
74
- to {
75
- transform: translateY(0);
76
- opacity: 1;
77
- }
78
- }
79
-
80
- .close-btn:hover {
81
- transform: rotate(90deg);
82
- }
83
-
84
- .before-after {
85
- background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
86
- }
87
-
88
- @keyframes float {
89
- 0% { transform: translateY(0px); }
90
- 50% { transform: translateY(-20px); }
91
- 100% { transform: translateY(0px); }
92
- }
93
-
94
- .float-animation {
95
- animation: float 3s ease-in-out infinite;
96
- }
97
-
98
- @keyframes pulse {
99
- 0% { transform: scale(1); }
100
- 50% { transform: scale(1.05); }
101
- 100% { transform: scale(1); }
102
- }
103
-
104
- .pulse-animation {
105
- animation: pulse 2s infinite;
106
- }
107
-
108
- @keyframes spin {
109
- from { transform: rotate(0deg); }
110
- to { transform: rotate(360deg); }
111
- }
112
-
113
- .spin-on-hover:hover {
114
- animation: spin 0.5s linear;
115
- }
116
-
117
- .bounce-on-hover:hover {
118
- animation: bounce 0.5s;
119
- }
120
-
121
- .bg-yelp-red {
122
- background-color: #d32323;
123
- }
124
-
125
- @keyframes bounce {
126
- 0%, 100% { transform: translateY(0); }
127
- 50% { transform: translateY(-10px); }
128
- }
129
-
130
- /* New Styles */
131
- .sticky-header {
132
- padding: 10px 0;
133
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
134
- }
135
-
136
  .scroll-top {
137
  position: fixed;
138
  bottom: 30px;
@@ -162,220 +98,93 @@
162
  transform: scale(1.1) translateY(0);
163
  }
164
 
165
- .map-container {
166
  position: relative;
167
- overflow: hidden;
168
- border-radius: 20px;
169
- box-shadow: 0 10px 30px rgba(0,0,0,0.2);
170
- }
171
-
172
- .map-overlay {
173
- position: absolute;
174
- top: 0;
175
- left: 0;
176
- width: 100%;
177
- height: 100%;
178
- background: linear-gradient(to bottom, rgba(181,48,255,0.3), rgba(255,23,68,0.2));
179
- pointer-events: none;
180
- }
181
-
182
- .contact-form input,
183
- .contact-form textarea {
184
- background: rgba(255,255,255,0.1);
185
- border: 1px solid rgba(255,255,255,0.2);
186
- color: white;
187
- transition: all 0.3s;
188
- }
189
-
190
- .contact-form input:focus,
191
- .contact-form textarea:focus {
192
- background: rgba(255,255,255,0.15);
193
- border-color: #b530ff;
194
- box-shadow: 0 0 0 3px rgba(181,48,255,0.3);
195
- }
196
-
197
- .contact-form input::placeholder,
198
- .contact-form textarea::placeholder {
199
- color: rgba(255,255,255,0.5);
200
- }
201
-
202
- .appointment-form {
203
- background: linear-gradient(135deg, rgba(181,48,255,0.1), rgba(255,23,68,0.1));
204
- border-radius: 20px;
205
- backdrop-filter: blur(10px);
206
  }
207
 
208
- .appointment-form input,
209
- .appointment-form select {
210
- background: rgba(255,255,255,0.1);
211
- border: 1px solid rgba(255,255,255,0.2);
212
- color: white;
213
- }
214
-
215
- .appointment-form input:focus,
216
- .appointment-form select:focus {
217
- background: rgba(255,255,255,0.15);
218
- border-color: #b530ff;
219
- }
220
-
221
- .appointment-form input::placeholder {
222
- color: rgba(255,255,255,0.5);
223
- }
224
-
225
- .service-area-map {
226
- border-radius: 20px;
227
- overflow: hidden;
228
- box-shadow: 0 10px 30px rgba(0,0,0,0.2);
229
- }
230
-
231
- .service-area-map img {
232
- transition: transform 0.5s ease;
233
- }
234
-
235
- .service-area-map:hover img {
236
- transform: scale(1.05);
237
- }
238
-
239
- .service-area-overlay {
240
  position: absolute;
241
  top: 0;
242
  left: 0;
243
- width: 100%;
244
- height: 100%;
245
- background: linear-gradient(to bottom, rgba(181,48,255,0.3), rgba(255,23,68,0.2));
 
 
 
 
 
246
  pointer-events: none;
247
  }
248
 
249
- .count-up {
250
- font-size: 3rem;
251
- font-weight: bold;
252
- color: #ff1744;
253
- }
254
-
255
- .stat-card {
256
- background: rgba(255,255,255,0.05);
257
- border-radius: 15px;
258
- transition: all 0.3s;
259
- }
260
-
261
- .stat-card:hover {
262
- background: rgba(255,255,255,0.1);
263
- transform: translateY(-5px);
264
- }
265
-
266
- .stat-icon {
267
- width: 70px;
268
- height: 70px;
269
- border-radius: 50%;
270
- background: linear-gradient(to right, #b530ff, #ff1744);
271
- display: flex;
272
- align-items: center;
273
- justify-content: center;
274
- margin: 0 auto 20px;
275
- }
276
-
277
- .stat-number {
278
- font-size: 2.5rem;
279
- font-weight: bold;
280
- background: linear-gradient(to right, #b530ff, #ff1744);
281
  -webkit-background-clip: text;
282
  -webkit-text-fill-color: transparent;
283
  }
284
 
285
- .package-highlight {
286
  position: relative;
287
- overflow: hidden;
288
  }
289
 
290
- .package-highlight::before {
291
- content: '';
292
- position: absolute;
293
- top: -10px;
294
- right: -10px;
295
- width: 40px;
296
- height: 40px;
297
- background: #ff1744;
298
- border-radius: 50%;
299
- box-shadow: 0 0 20px #ff1744;
300
  }
301
 
302
- .package-highlight::after {
303
- content: 'POPULAR';
304
  position: absolute;
305
- top: 10px;
306
- right: 10px;
307
- background: #ff1744;
308
- color: white;
309
- font-size: 0.8rem;
310
- font-weight: bold;
311
- padding: 3px 10px;
312
- border-radius: 20px;
313
- transform: rotate(5deg);
314
- }
315
-
316
- .gallery-slider {
317
- scroll-behavior: smooth;
318
- }
319
-
320
- .gallery-slider::-webkit-scrollbar {
321
- display: none;
322
- }
323
-
324
- .slider-control {
325
  width: 50px;
326
- height: 50px;
327
- border-radius: 50%;
328
- background: rgba(255,255,255,0.2);
329
- display: flex;
330
- align-items: center;
331
- justify-content: center;
332
- cursor: pointer;
333
- transition: all 0.3s;
334
- }
335
-
336
- .slider-control:hover {
337
- background: rgba(255,255,255,0.3);
338
- transform: scale(1.1);
339
  }
340
 
341
- .gallery-indicators {
342
- display: flex;
343
- justify-content: center;
344
- gap: 10px;
345
- margin-top: 20px;
346
  }
347
 
348
- .indicator {
349
- width: 12px;
350
- height: 12px;
351
- border-radius: 50%;
352
- background: rgba(255,255,255,0.3);
353
- cursor: pointer;
354
- transition: all 0.3s;
355
  }
356
 
357
- .indicator.active {
358
- background: #ff1744;
359
- transform: scale(1.2);
 
 
 
 
 
 
360
  }
361
  </style>
362
  </head>
363
- <body class="bg-black text-gray-100 font-sans">
364
  <!-- Navigation -->
365
- <nav id="main-nav" class="fixed top-0 left-0 w-full bg-gradient-to-r from-purple-600 to-pink-600 shadow-lg z-50 px-6 py-4 transition-all duration-300">
366
  <div class="max-w-7xl mx-auto flex justify-between items-center">
367
- <div class="text-white text-2xl font-bold tracking-tight">JAY'S MOBILE WASH</div>
 
 
368
 
369
  <!-- Desktop Menu -->
370
  <ul class="hidden md:flex space-x-8">
371
- <li><a href="#home" class="text-white hover:text-gray-200 font-medium transition duration-300">Home</a></li>
372
- <li><a href="#services" class="text-white hover:text-gray-200 font-medium transition duration-300">Services</a></li>
373
- <li><a href="#products" class="text-white hover:text-gray-200 font-medium transition duration-300">Products</a></li>
374
- <li><a href="#process" class="text-white hover:text-gray-200 font-medium transition duration-300">Process</a></li>
375
- <li><a href="#stats" class="text-white hover:text-gray-200 font-medium transition duration-300">Why Us</a></li>
376
- <li><a href="#gallery" class="text-white hover:text-gray-200 font-medium transition duration-300">Gallery</a></li>
377
- <li><a href="#faq" class="text-white hover:text-gray-200 font-medium transition duration-300">FAQ</a></li>
378
- <li><a href="#contact" class="text-white hover:text-gray-200 font-medium transition duration-300">Contact</a></li>
379
  </ul>
380
 
381
  <!-- Mobile Menu Button -->
@@ -385,16 +194,16 @@
385
  </div>
386
 
387
  <!-- Mobile Menu -->
388
- <div id="mobile-menu" class="hidden md:hidden bg-gradient-to-b from-purple-700 to-pink-700 absolute top-full left-0 w-full px-6 py-4">
389
  <ul class="space-y-4">
390
- <li><a href="#home" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Home</a></li>
391
- <li><a href="#services" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Services</a></li>
392
- <li><a href="#products" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Products</a></li>
393
- <li><a href="#process" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Process</a></li>
394
- <li><a href="#stats" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Why Us</a></li>
395
- <li><a href="#gallery" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Gallery</a></li>
396
- <li><a href="#faq" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">FAQ</a></li>
397
- <li><a href="#contact" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Contact</a></li>
398
  </ul>
399
  </div>
400
  </nav>
@@ -405,71 +214,74 @@
405
  </div>
406
 
407
  <!-- Hero Section -->
408
- <section id="home" class="relative bg-gradient-to-r from-purple-600 to-pink-600 text-white pt-32 pb-20 md:pt-40 md:pb-28 px-6">
409
- <div class="absolute inset-0 bg-gradient-radial opacity-50"></div>
 
 
410
  <div class="max-w-7xl mx-auto relative z-10 text-center">
411
- <h1 class="text-5xl md:text-7xl font-bold mb-6 glow-text">JAY'S MOBILE WASH</h1>
412
  <p class="text-xl md:text-2xl italic mb-10 opacity-90">Premium Mobile Detailing - We Come to You!</p>
413
 
414
  <div class="flex flex-col md:flex-row justify-center gap-4">
415
- <a href="tel:5622289429" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-full text-lg md:text-xl transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2 pulse-animation">
416
  <i class="fas fa-phone"></i> Call Now: 562-228-9429
417
  </a>
418
- <a href="#services" class="bg-white hover:bg-gray-100 text-pink-600 font-bold py-4 px-8 rounded-full text-lg md:text-xl transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2 float-animation">
419
  <i class="fas fa-list"></i> View Services & Pricing
420
  </a>
421
  </div>
422
 
423
  <!-- Stats Counter -->
424
  <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
425
- <div class="stat-card p-6 text-center">
426
- <div class="stat-icon">
427
- <i class="fas fa-car text-white text-2xl"></i>
428
  </div>
429
- <div class="stat-number" id="cars-detailed">2500+</div>
430
- <p class="text-gray-300 mt-2">Cars Detailed</p>
431
  </div>
432
 
433
- <div class="stat-card p-6 text-center">
434
- <div class="stat-icon">
435
- <i class="fas fa-star text-white text-2xl"></i>
436
  </div>
437
- <div class="stat-number" id="five-stars">4.9★</div>
438
- <p class="text-gray-300 mt-2">Average Rating (250+ reviews)</p>
439
  </div>
440
 
441
- <div class="stat-card p-6 text-center">
442
- <div class="stat-icon">
443
- <i class="fas fa-map-marker-alt text-white text-2xl"></i>
444
  </div>
445
- <div class="stat-number" id="service-area">30+</div>
446
- <p class="text-gray-300 mt-2">Cities Served</p>
447
  </div>
448
 
449
- <div class="stat-card p-6 text-center">
450
- <div class="stat-icon">
451
- <i class="fas fa-calendar-check text-white text-2xl"></i>
452
  </div>
453
- <div class="stat-number" id="appointments">98%</div>
454
- <p class="text-gray-300 mt-2">Positive Feedback</p>
455
  </div>
456
  </div>
457
  </div>
458
  </section>
459
 
460
  <!-- Services Section -->
461
- <section id="services" class="py-16 bg-gray-100 text-gray-900 px-6">
462
  <div class="max-w-7xl mx-auto">
463
- <h2 class="text-4xl font-bold text-center mb-4 text-pink-600">
464
- <i class="fas fa-gem mr-2"></i> Our Detailing Packages
465
- </h2>
466
- <p class="text-xl text-center mb-12 text-gray-600 max-w-3xl mx-auto">
467
- Professional care for your vehicle, delivered to your location
468
- </p>
 
469
 
470
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
471
  <!-- Basic Package -->
472
- <div class="service-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-500 cursor-pointer border-2 border-transparent hover:border-purple-500 hover:shadow-2xl bounce-on-hover" onclick="showDetails('basic')">
473
  <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center relative">
474
  <h3 class="text-2xl font-bold mb-2">JAY'S BASIC</h3>
475
  <p class="text-xl">Small Car: $70 | SUV: $80</p>
@@ -477,37 +289,40 @@
477
  <div class="p-6">
478
  <ul class="space-y-3 mb-6">
479
  <li class="flex items-start">
480
- <span class="text-green-500 mr-2">✓</span>
481
  Professional 2-step hand wash
482
  </li>
483
  <li class="flex items-start">
484
- <span class="text-green-500 mr-2">✓</span>
485
  Wheel cleaning with ceramic SiO₂
486
  </li>
487
  <li class="flex items-start">
488
- <span class="text-green-500 mr-2">✓</span>
489
  Interior wipe-down and shine
490
  </li>
491
  <li class="flex items-start">
492
- <span class="text-green-500 mr-2">✓</span>
493
  Thorough vacuuming
494
  </li>
495
  <li class="flex items-start">
496
- <span class="text-green-500 mr-2">✓</span>
497
  Window cleaning inside & out
498
  </li>
499
  </ul>
500
- <a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
501
  Book Now <i class="fas fa-arrow-right ml-2"></i>
502
  </a>
503
- <button onclick="showDetails('basic')" class="w-full mt-2 bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 text-sm">
504
  Show More Details <i class="fas fa-chevron-down ml-1"></i>
505
  </button>
506
  </div>
507
  </div>
508
 
509
  <!-- Luxury Package -->
510
- <div class="service-card package-highlight bg-white rounded-xl overflow-hidden shadow-lg transition duration-300 cursor-pointer border-2 border-transparent hover:border-purple-500" onclick="showDetails('luxury')">
 
 
 
511
  <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center">
512
  <h3 class="text-2xl font-bold mb-2">JAY'S LUXURY</h3>
513
  <p class="text-xl">Small Car: $130 | SUV: $140</p>
@@ -515,37 +330,37 @@
515
  <div class="p-6">
516
  <ul class="space-y-3 mb-6">
517
  <li class="flex items-start">
518
- <span class="text-green-500 mr-2">✓</span>
519
  Everything in Basic package
520
  </li>
521
  <li class="flex items-start">
522
- <span class="text-green-500 mr-2">✓</span>
523
  Premium ceramic spray wax
524
  </li>
525
  <li class="flex items-start">
526
- <span class="text-green-500 mr-2">✓</span>
527
  SiO₂ interior treatment
528
  </li>
529
  <li class="flex items-start">
530
- <span class="text-green-500 mr-2">✓</span>
531
  Vinyl & trim restoration
532
  </li>
533
  <li class="flex items-start">
534
- <span class="text-green-500 mr-2">✓</span>
535
  3-month paint protection
536
  </li>
537
  </ul>
538
- <a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
539
  Book Now <i class="fas fa-arrow-right ml-2"></i>
540
  </a>
541
- <button onclick="showDetails('luxury')" class="w-full mt-2 bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 text-sm">
542
  Show More Details <i class="fas fa-chevron-down ml-1"></i>
543
  </button>
544
  </div>
545
  </div>
546
 
547
  <!-- Max Package -->
548
- <div class="service-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300 cursor-pointer border-2 border-transparent hover:border-purple-500" onclick="showDetails('max')">
549
  <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center">
550
  <h3 class="text-2xl font-bold mb-2">JAY'S MAX</h3>
551
  <p class="text-xl">Small Car: $200 | SUV: $210</p>
@@ -553,30 +368,30 @@
553
  <div class="p-6">
554
  <ul class="space-y-3 mb-6">
555
  <li class="flex items-start">
556
- <span class="text-green-500 mr-2">✓</span>
557
  Everything in Luxury package
558
  </li>
559
  <li class="flex items-start">
560
- <span class="text-green-500 mr-2">✓</span>
561
  Advanced ceramic hyper wax
562
  </li>
563
  <li class="flex items-start">
564
- <span class="text-green-500 mr-2">✓</span>
565
  Interior steam cleaning
566
  </li>
567
  <li class="flex items-start">
568
- <span class="text-green-500 mr-2">✓</span>
569
  Clay bar treatment
570
  </li>
571
  <li class="flex items-start">
572
- <span class="text-green-500 mr-2">✓</span>
573
  Hydrophobic SiO₂ infused graphene sealant (6-month protection)
574
  </li>
575
  </ul>
576
- <a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
577
  Book Now <i class="fas fa-arrow-right ml-2"></i>
578
  </a>
579
- <button onclick="showDetails('max')" class="w-full mt-2 bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 text-sm">
580
  Show More Details <i class="fas fa-chevron-down ml-1"></i>
581
  </button>
582
  </div>
@@ -586,103 +401,112 @@
586
  </section>
587
 
588
  <!-- Products Section -->
589
- <section id="products" class="py-16 bg-black text-white px-6">
590
  <div class="max-w-7xl mx-auto">
591
- <h2 class="text-4xl font-bold text-center mb-4 text-pink-400">
592
- <i class="fas fa-spray-can mr-2"></i> Professional Products We Use
593
- </h2>
594
- <p class="text-xl text-center mb-12 text-gray-400 max-w-3xl mx-auto">
595
- Only the best for your vehicle
596
- </p>
 
597
 
598
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
599
  <!-- Koch Chemie -->
600
- <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl">
601
- <div class="text-center mb-4 float-animation">
602
- <img src="https://seeklogo.com/images/K/koch-chemie-logo-8BCDB7E002-seeklogo.com.png" alt="Koch Chemie" class="h-32 w-32 mx-auto object-contain">
 
 
603
  </div>
604
- <h3 class="text-2xl font-bold text-center mb-3 text-pink-400">Koch Chemie</h3>
605
- <p class="text-gray-300 mb-4">Professional-grade detailing products.</p>
606
  <ul class="space-y-2 text-gray-400">
607
  <li class="flex items-start">
608
- <span class="text-pink-400 mr-2">•</span>
609
  Premium cleaning compounds
610
  </li>
611
  <li class="flex items-start">
612
- <span class="text-pink-400 mr-2">•</span>
613
  High-performance polishes
614
  </li>
615
  <li class="flex items-start">
616
- <span class="text-pink-400 mr-2">•</span>
617
  Advanced protection products
618
  </li>
619
  </ul>
620
  </div>
621
 
622
  <!-- Maderite -->
623
- <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl">
624
- <div class="text-center mb-4 pulse-animation">
625
- <img src="https://maderite.com/wp-content/uploads/2021/05/maderite-logo.png" alt="Maderite" class="h-32 w-32 mx-auto object-contain">
 
 
626
  </div>
627
- <h3 class="text-2xl font-bold text-center mb-3 text-pink-400">Maderite</h3>
628
- <p class="text-gray-300 mb-4">Innovative ceramic coatings.</p>
629
  <ul class="space-y-2 text-gray-400">
630
  <li class="flex items-start">
631
- <span class="text-pink-400 mr-2">•</span>
632
  Long-lasting protection
633
  </li>
634
  <li class="flex items-start">
635
- <span class="text-pink-400 mr-2">•</span>
636
  High-gloss finish
637
  </li>
638
  <li class="flex items-start">
639
- <span class="text-pink-400 mr-2">•</span>
640
  Hydrophobic properties
641
  </li>
642
  </ul>
643
  </div>
644
 
645
  <!-- Ultra Clean -->
646
- <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl">
647
- <div class="text-center mb-4 spin-on-hover">
648
- <img src="https://ultraclean.com/wp-content/uploads/2022/03/ultraclean-logo.png" alt="Ultra Clean" class="h-32 w-32 mx-auto object-contain">
 
 
649
  </div>
650
- <h3 class="text-2xl font-bold text-center mb-3 text-pink-400">Ultra Clean</h3>
651
- <p class="text-gray-300 mb-4">Professional cleaning solutions.</p>
652
  <ul class="space-y-2 text-gray-400">
653
  <li class="flex items-start">
654
- <span class="text-pink-400 mr-2">•</span>
655
  Heavy-duty degreasers
656
  </li>
657
  <li class="flex items-start">
658
- <span class="text-pink-400 mr-2">•</span>
659
  pH-balanced formulas
660
  </li>
661
  <li class="flex items-start">
662
- <span class="text-pink-400 mr-2">•</span>
663
  Eco-friendly options
664
  </li>
665
  </ul>
666
  </div>
667
 
668
  <!-- Ezpz Ceramic -->
669
- <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl">
670
- <div class="text-center mb-4 bounce-on-hover">
671
- <img src="https://ezpzceramic.com/wp-content/uploads/2021/08/ezpz-logo.png" alt="Ezpz Ceramic" class="h-32 w-32 mx-auto object-contain">
 
 
672
  </div>
673
- <h3 class="text-2xl font-bold text-center mb-3 text-pink-400">Ezpz Ceramic</h3>
674
- <p class="text-gray-300 mb-4">Easy-to-use ceramic coatings.</p>
675
  <ul class="space-y-2 text-gray-400">
676
  <li class="flex items-start">
677
- <span class="text-pink-400 mr-2">•</span>
678
  User-friendly application
679
  </li>
680
  <li class="flex items-start">
681
- <span class="text-pink-400 mr-2">•</span>
682
  Professional-grade protection
683
  </li>
684
  <li class="flex items-start">
685
- <span class="text-pink-400 mr-2">•</span>
686
  Long-lasting hydrophobic effect
687
  </li>
688
  </ul>
@@ -692,792 +516,19 @@
692
  </section>
693
 
694
  <!-- Process Section -->
695
- <section id="process" class="py-16 bg-gray-900 text-white px-6">
696
  <div class="max-w-7xl mx-auto">
697
- <h2 class="text-4xl font-bold text-center mb-4 text-pink-400">
698
- <i class="fas fa-car mr-2"></i> Our Detail Process
699
- </h2>
700
- <p class="text-xl text-center mb-12 text-gray-400 max-w-3xl mx-auto">
701
- Professional results in 5 simple steps
702
- </p>
703
-
704
- <div class="relative">
705
- <div class="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-gray-700 z-0 transform -translate-y-1/2"></div>
706
-
707
- <div class="flex flex-col md:flex-row justify-between items-center relative z-10">
708
- <!-- Step 1 -->
709
- <div class="process-step bg-white text-gray-900 border-4 border-purple-500 rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center mb-8 md:mb-0 cursor-pointer transition duration-300" onclick="showProcessDetail(1)">
710
- <div class="step-number text-3xl md:text-4xl font-bold text-pink-600">1</div>
711
- <div class="step-text text-sm md:text-base font-medium">Schedule</div>
712
- </div>
713
-
714
- <!-- Step 2 -->
715
- <div class="process-step bg-white text-gray-900 border-4 border-purple-500 rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center mb-8 md:mb-0 cursor-pointer transition duration-300" onclick="showProcessDetail(2)">
716
- <div class="step-number text-3xl md:text-4xl font-bold text-pink-600">2</div>
717
- <div class="step-text text-sm md:text-base font-medium">Arrival</div>
718
- </div>
719
-
720
- <!-- Step 3 -->
721
- <div class="process-step bg-white text-gray-900 border-4 border-purple-500 rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center mb-8 md:mb-0 cursor-pointer transition duration-300" onclick="showProcessDetail(3)">
722
- <div class="step-number text-3xl md:text-4xl font-bold text-pink-600">3</div>
723
- <div class="step-text text-sm md:text-base font-medium">Detail</div>
724
- </div>
725
-
726
- <!-- Step 4 -->
727
- <div class="process-step bg-white text-gray-900 border-4 border-purple-500 rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center mb-8 md:mb-0 cursor-pointer transition duration-300" onclick="showProcessDetail(4)">
728
- <div class="step-number text-3xl md:text-4xl font-bold text-pink-600">4</div>
729
- <div class="step-text text-sm md:text-base font-medium">Inspect</div>
730
- </div>
731
-
732
- <!-- Step 5 -->
733
- <div class="process-step bg-white text-gray-900 border-4 border-purple-500 rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center cursor-pointer transition duration-300" onclick="showProcessDetail(5)">
734
- <div class="step-number text-3xl md:text-4xl font-bold text-pink-600">5</div>
735
- <div class="step-text text-sm md:text-base font-medium">Protect</div>
736
- </div>
737
- </div>
738
- </div>
739
- </div>
740
- </section>
741
-
742
- <!-- Stats Section -->
743
- <section id="stats" class="py-16 bg-gradient-to-r from-purple-700 to-pink-700 text-white px-6">
744
- <div class="max-w-7xl mx-auto">
745
- <h2 class="text-4xl font-bold text-center mb-4 text-white">
746
- <i class="fas fa-chart-line mr-2"></i> Why Choose Jay's Mobile Wash
747
- </h2>
748
- <p class="text-xl text-center mb-12 text-gray-200 max-w-3xl mx-auto">
749
- Experience the difference with our premium service
750
- </p>
751
-
752
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
753
- <div class="bg-white bg-opacity-10 p-6 rounded-xl text-center">
754
- <div class="text-5xl mb-4 text-pink-300">
755
- <i class="fas fa-truck"></i>
756
- </div>
757
- <h3 class="text-2xl font-bold mb-3">Mobile Convenience</h3>
758
- <p>We come to your home or office anywhere in LA & OC</p>
759
- </div>
760
-
761
- <div class="bg-white bg-opacity-10 p-6 rounded-xl text-center">
762
- <div class="text-5xl mb-4 text-pink-300">
763
- <i class="fas fa-shield-alt"></i>
764
- </div>
765
- <h3 class="text-2xl font-bold mb-3">Premium Protection</h3>
766
- <p>Advanced ceramic coatings for long-lasting shine</p>
767
- </div>
768
-
769
- <div class="bg-white bg-opacity-10 p-6 rounded-xl text-center">
770
- <div class="text-5xl mb-4 text-pink-300">
771
- <i class="fas fa-leaf"></i>
772
- </div>
773
- <h3 class="text-2xl font-bold mb-3">Eco-Friendly</h3>
774
- <p>Water-efficient techniques and biodegradable products</p>
775
- </div>
776
-
777
- <div class="bg-white bg-opacity-10 p-6 rounded-xl text-center">
778
- <div class="text-5xl mb-4 text-pink-300">
779
- <i class="fas fa-award"></i>
780
- </div>
781
- <h3 class="text-2xl font-bold mb-3">Certified Experts</h3>
782
- <p>Trained professionals with 10+ years of experience</p>
783
- </div>
784
- </div>
785
- </div>
786
- </section>
787
-
788
- <!-- Add-ons Section -->
789
- <section class="py-16 bg-gray-100 text-gray-900 px-6">
790
- <div class="max-w-7xl mx-auto">
791
- <h2 class="text-4xl font-bold text-center mb-4 text-pink-600">
792
- <i class="fas fa-sparkles mr-2"></i> Premium Add-On Services
793
- </h2>
794
- <p class="text-xl text-center mb-12 text-gray-600 max-w-3xl mx-auto">
795
- Enhance your detail with professional upgrades
796
- </p>
797
-
798
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
799
- <!-- Ceramic/Graphene Coating -->
800
- <div class="addon-card bg-white p-6 rounded-lg border-2 border-gray-200 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('ceramic')">
801
- <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Ceramic/Graphene Coating</h4>
802
- <p class="addon-price text-pink-600 text-2xl font-bold mb-3">$400-$700</p>
803
- <p class="addon-description text-gray-600">
804
- Choose between 2-year ceramic or 5-year graphene coating with warranty
805
- </p>
806
- </div>
807
-
808
- <!-- Full Polish -->
809
- <div class="addon-card bg-white p-6 rounded-lg border-2 border-gray-200 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('polish')">
810
- <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Full Polish</h4>
811
- <p class="addon-price text-pink-600 text-2xl font-bold mb-3">$220</p>
812
- <p class="addon-description text-gray-600">
813
- Professional paint correction removes swirls and restores factory shine
814
- </p>
815
- </div>
816
-
817
- <!-- Iron Decontamination -->
818
- <div class="addon-card bg-white p-6 rounded-lg border-2 border-gray-200 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('iron')">
819
- <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Iron Decontamination</h4>
820
- <p class="addon-price text-pink-600 text-2xl font-bold mb-3">Call for Price</p>
821
- <p class="addon-description text-gray-600">
822
- Chemical treatment removes embedded brake dust and metal particles
823
- </p>
824
- </div>
825
-
826
- <!-- Clay Bar Treatment -->
827
- <div class="addon-card bg-white p-6 rounded-lg border-2 border-gray-200 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('clay')">
828
- <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Clay Bar Treatment</h4>
829
- <p class="addon-price text-pink-600 text-2xl font-bold mb-3">Call for Price</p>
830
- <p class="addon-description text-gray-600">
831
- Removes bonded contaminants for glass-smooth paint
832
- </p>
833
- </div>
834
-
835
- <!-- Steam Cleaning -->
836
- <div class="addon-card bg-white p-6 rounded-lg border-2 border-gray-200 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('steam')">
837
- <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Steam Cleaning</h4>
838
- <p class="addon-price text-pink-600 text-2xl font-bold mb-3">Call for Price</p>
839
- <p class="addon-description text-gray-600">
840
- Deep sanitization and odor removal using high-temperature steam
841
- </p>
842
- </div>
843
-
844
- <!-- Engine Bay Detail -->
845
- <div class="addon-card bg-white p-6 rounded-lg border-2 border-gray-200 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('engine')">
846
- <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Engine Bay Detail</h4>
847
- <p class="addon-price text-pink-600 text-2xl font-bold mb-3">Call for Price</p>
848
- <p class="addon-description text-gray-600">
849
- Complete engine bay cleaning, degreasing, and dressing
850
- </p>
851
- </div>
852
- </div>
853
- </div>
854
- </section>
855
-
856
- <!-- Testimonials Section -->
857
- <section class="py-16 bg-gray-100 text-gray-900 px-6">
858
- <div class="max-w-7xl mx-auto">
859
- <h2 class="text-4xl font-bold text-center mb-4 text-pink-600">
860
- <i class="fas fa-star mr-2"></i> Customer Reviews
861
- </h2>
862
- <p class="text-xl text-center mb-12 text-gray-600 max-w-3xl mx-auto">
863
- What our clients say about us
864
- </p>
865
-
866
- <div class="max-w-4xl mx-auto">
867
- <!-- Testimonial 1 -->
868
- <div class="bg-white p-8 rounded-2xl shadow-lg mb-8">
869
- <div class="text-yellow-400 text-2xl mb-4">★★★★★</div>
870
- <p class="text-xl italic mb-6 leading-relaxed">
871
- "Jay transformed my car! The attention to detail is incredible. My BMW looks better than when I bought it. The convenience of mobile service is unbeatable!"
872
- </p>
873
- <p class="font-bold text-pink-600">- Sarah M., Los Angeles</p>
874
- </div>
875
-
876
- <!-- Testimonial 2 -->
877
- <div class="bg-white p-8 rounded-2xl shadow-lg">
878
- <div class="text-yellow-400 text-2xl mb-4">★★★★★</div>
879
- <p class="text-xl italic mb-6 leading-relaxed">
880
- "Professional, punctual, and perfectionist! Jay's ceramic coating service is top-notch. My car still beads water perfectly after 6 months!"
881
- </p>
882
- <p class="font-bold text-pink-600">- Mike T., Orange County</p>
883
- </div>
884
- </div>
885
- </div>
886
- </section>
887
-
888
- <!-- Gallery Section -->
889
- <section id="gallery" class="py-16 bg-black text-white px-6">
890
- <div class="max-w-7xl mx-auto">
891
- <h2 class="text-4xl font-bold text-center mb-4 text-pink-400">
892
- <i class="fas fa-camera mr-2"></i> Our Work Gallery
893
- </h2>
894
- <p class="text-xl text-center mb-12 text-gray-400 max-w-3xl mx-auto">
895
- See the transformation we deliver
896
- </p>
897
-
898
- <div class="relative">
899
- <div class="gallery-slider flex overflow-x-auto snap-x snap-mandatory scroll-smooth pb-4" id="gallery-slider">
900
- <div class="flex-none w-full md:w-1/2 lg:w-1/3 px-4 snap-start">
901
- <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500">
902
- <div class="relative h-64">
903
- <div class="absolute inset-0 bg-gray-200 border-2 border-dashed rounded-xl w-full h-full"></div>
904
- <div class="absolute inset-0 flex items-center justify-center">
905
- <span class="text-gray-700 font-bold">Before/After Image</span>
906
- </div>
907
- </div>
908
- <div class="p-4">
909
- <h3 class="text-xl font-bold mb-2">BMW 3 Series</h3>
910
- <p class="text-gray-400">Full exterior detail with ceramic coating</p>
911
- </div>
912
- </div>
913
- </div>
914
-
915
- <div class="flex-none w-full md:w-1/2 lg:w-1/3 px-4 snap-start">
916
- <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500">
917
- <div class="relative h-64">
918
- <div class="absolute inset-0 bg-gray-200 border-2 border-dashed rounded-xl w-full h-full"></div>
919
- <div class="absolute inset-0 flex items-center justify-center">
920
- <span class="text-gray-700 font-bold">Before/After Image</span>
921
- </div>
922
- </div>
923
- <div class="p-4">
924
- <h3 class="text-xl font-bold mb-2">Tesla Model 3</h3>
925
- <p class="text-gray-400">Interior deep cleaning and protection</p>
926
- </div>
927
- </div>
928
- </div>
929
-
930
- <div class="flex-none w-full md:w-1/2 lg:w-1/3 px-4 snap-start">
931
- <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500">
932
- <div class="relative h-64">
933
- <div class="absolute inset-0 bg-gray-200 border-2 border-dashed rounded-xl w-full h-full"></div>
934
- <div class="absolute inset-0 flex items-center justify-center">
935
- <span class="text-gray-700 font-bold">Before/After Image</span>
936
- </div>
937
- </div>
938
- <div class="p-4">
939
- <h3 class="text-xl font-bold mb-2">Ford F-150</h3>
940
- <p class="text-gray-400">Full exterior detail and paint correction</p>
941
- </div>
942
- </div>
943
- </div>
944
-
945
- <div class="flex-none w-full md:w-1/2 lg:w-1/3 px-4 snap-start">
946
- <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500">
947
- <div class="relative h-64">
948
- <div class="absolute inset-0 bg-gray-200 border-2 border-dashed rounded-xl w-full h-full"></div>
949
- <div class="absolute inset-0 flex items-center justify-center">
950
- <span class="text-gray-700 font-bold">Before/After Image</span>
951
- </div>
952
- </div>
953
- <div class="p-4">
954
- <h3 class="text-xl font-bold mb-2">Mercedes GLE</h3>
955
- <p class="text-gray-400">Interior steam cleaning and leather treatment</p>
956
- </div>
957
- </div>
958
- </div>
959
-
960
- <div class="flex-none w-full md:w-1/2 lg:w-1/3 px-4 snap-start">
961
- <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500">
962
- <div class="relative h-64">
963
- <div class="absolute inset-0 bg-gray-200 border-2 border-dashed rounded-xl w-full h-full"></div>
964
- <div class="absolute inset-0 flex items-center justify-center">
965
- <span class="text-gray-700 font-bold">Before/After Image</span>
966
- </div>
967
- </div>
968
- <div class="p-4">
969
- <h3 class="text-xl font-bold mb-2">Toyota Camry</h3>
970
- <p class="text-gray-400">Full exterior detail and headlight restoration</p>
971
- </div>
972
- </div>
973
- </div>
974
-
975
- <div class="flex-none w-full md:w-1/2 lg:w-1/3 px-4 snap-start">
976
- <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500">
977
- <div class="relative h-64">
978
- <div class="absolute inset-0 bg-gray-200 border-2 border-dashed rounded-xl w-full h-full"></div>
979
- <div class="absolute inset-0 flex items-center justify-center">
980
- <span class="text-gray-700 font-bold">Before/After Image</span>
981
- </div>
982
- </div>
983
- <div class="p-4">
984
- <h3 class="text-xl font-bold mb-2">Honda Civic</h3>
985
- <p class="text-gray-400">Interior deep clean and odor removal</p>
986
- </div>
987
- </div>
988
- </div>
989
- </div>
990
-
991
- <div class="flex justify-between mt-6">
992
- <button class="slider-control" id="prev-slide">
993
- <i class="fas fa-chevron-left"></i>
994
- </button>
995
- <button class="slider-control" id="next-slide">
996
- <i class="fas fa-chevron-right"></i>
997
- </button>
998
- </div>
999
-
1000
- <div class="gallery-indicators" id="gallery-indicators">
1001
- <div class="indicator active"></div>
1002
- <div class="indicator"></div>
1003
- <div class="indicator"></div>
1004
- <div class="indicator"></div>
1005
- <div class="indicator"></div>
1006
- <div class="indicator"></div>
1007
- </div>
1008
- </div>
1009
- </div>
1010
- </section>
1011
-
1012
- <!-- FAQ Section -->
1013
- <section id="faq" class="py-16 bg-gray-900 text-white px-6">
1014
- <div class="max-w-7xl mx-auto">
1015
- <h2 class="text-4xl font-bold text-center mb-4 text-pink-400">
1016
- <i class="fas fa-question-circle mr-2"></i> Frequently Asked Questions
1017
- </h2>
1018
- <p class="text-xl text-center mb-12 text-gray-400 max-w-3xl mx-auto">
1019
- Everything you need to know
1020
- </p>
1021
-
1022
- <div class="max-w-4xl mx-auto">
1023
- <!-- FAQ Item 1 -->
1024
- <div class="faq-item bg-gray-800 rounded-xl overflow-hidden mb-4">
1025
- <div class="faq-question bg-gradient-to-r from-purple-600 to-pink-600 p-5 flex justify-between items-center cursor-pointer" onclick="toggleFAQ(this)">
1026
- <span class="text-xl font-bold">How long does each service take?</span>
1027
- <span class="faq-arrow text-xl">▼</span>
1028
- </div>
1029
- <div class="faq-answer bg-gray-700">
1030
- <div class="p-5">
1031
- <p class="mb-2"><strong class="text-pink-400">Jay's Basic:</strong> 1.5-2 hours</p>
1032
- <p class="mb-2"><strong class="text-pink-400">Jay's Luxury:</strong> 2.5-3 hours</p>
1033
- <p class="mb-2"><strong class="text-pink-400">Jay's Max:</strong> 4-5 hours</p>
1034
- <p class="mt-4">Times may vary based on vehicle size and condition. We take pride in thorough work and never rush a job!</p>
1035
- </div>
1036
- </div>
1037
- </div>
1038
-
1039
- <!-- FAQ Item 2 -->
1040
- <div class="faq-item bg-gray-800 rounded-xl overflow-hidden mb-4">
1041
- <div class="faq-question bg-gradient-to-r from-purple-600 to-pink-600 p-5 flex justify-between items-center cursor-pointer" onclick="toggleFAQ(this)">
1042
- <span class="text-xl font-bold">What do I need to provide?</span>
1043
- <span class="faq-arrow text-xl">▼</span>
1044
- </div>
1045
- <div class="faq-answer bg-gray-700">
1046
- <div class="p-5">
1047
- <p>We supply our own de-ionized water (which means spot-free results) and bring 4000W of personal power generation. All you need to do is relax and come out to a brand new showroom-shiny vehicle!</p>
1048
- <p class="mt-2">We bring all professional equipment, products, and supplies. We just need about 10 feet of space around your vehicle to work comfortably.</p>
1049
- </div>
1050
- </div>
1051
- </div>
1052
-
1053
- <!-- FAQ Item 3 -->
1054
- <div class="faq-item bg-gray-800 rounded-xl overflow-hidden mb-4">
1055
- <div class="faq-question bg-gradient-to-r from-purple-600 to-pink-600 p-5 flex justify-between items-center cursor-pointer" onclick="toggleFAQ(this)">
1056
- <span class="text-xl font-bold">Do you offer any guarantees?</span>
1057
- <span class="faq-arrow text-xl">▼</span>
1058
- </div>
1059
- <div class="faq-answer bg-gray-700">
1060
- <div class="p-5">
1061
- <p>Absolutely! We offer a 100% satisfaction guarantee on all services. If you're not completely happy, we'll make it right. Our ceramic coatings come with a 2-year warranty, and we stand behind all our work with pride.</p>
1062
- </div>
1063
- </div>
1064
- </div>
1065
-
1066
- <!-- FAQ Item 4 -->
1067
- <div class="faq-item bg-gray-800 rounded-xl overflow-hidden mb-4">
1068
- <div class="faq-question bg-gradient-to-r from-purple-600 to-pink-600 p-5 flex justify-between items-center cursor-pointer" onclick="toggleFAQ(this)">
1069
- <span class="text-xl font-bold">What areas do you service?</span>
1070
- <span class="faq-arrow text-xl">▼</span>
1071
- </div>
1072
- <div class="faq-answer bg-gray-700">
1073
- <div class="p-5">
1074
- <p>We provide FREE service within 30 miles of Lakewood, covering most of Los Angeles and Orange County. Beyond 30 miles, we charge $10 for every additional 10 miles. Popular areas include Long Beach, Torrance, Anaheim, Irvine, and Santa Monica.</p>
1075
- </div>
1076
- </div>
1077
- </div>
1078
-
1079
- <!-- FAQ Item 5 -->
1080
- <div class="faq-item bg-gray-800 rounded-xl overflow-hidden">
1081
- <div class="faq-question bg-gradient-to-r from-purple-600 to-pink-600 p-5 flex justify-between items-center cursor-pointer" onclick="toggleFAQ(this)">
1082
- <span class="text-xl font-bold">What's the difference between polish and wax?</span>
1083
- <span class="faq-arrow text-xl">▼</span>
1084
- </div>
1085
- <div class="faq-answer bg-gray-700">
1086
- <div class="p-5">
1087
- <p class="mb-4"><strong class="text-pink-400">Polish</strong> is corrective - it removes a thin layer of clear coat to eliminate swirls, scratches, and oxidation. Think of it as "exfoliating" your paint.</p>
1088
- <p><strong class="text-pink-400">Wax</strong> is protective - it adds a layer on top of your paint to protect against UV rays, water, and contaminants. We recommend polishing first, then protecting with wax or ceramic coating.</p>
1089
- </div>
1090
- </div>
1091
- </div>
1092
- </div>
1093
- </div>
1094
- </section>
1095
-
1096
- <!-- Contact Section -->
1097
- <section id="contact" class="py-16 bg-gray-100 text-gray-900 px-6">
1098
- <div class="max-w-7xl mx-auto">
1099
- <h2 class="text-4xl font-bold text-center mb-12 text-pink-600">
1100
- <i class="fas fa-phone-alt mr-2"></i> Book Your Detail Today!
1101
- </h2>
1102
-
1103
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
1104
- <div class="bg-gradient-to-r from-pink-600 to-purple-600 rounded-2xl p-8 md:p-12 text-white shadow-xl relative overflow-hidden">
1105
- <div class="phone-large text-4xl md:text-5xl font-bold text-center mb-8">562-228-9429</div>
1106
-
1107
- <div class="contact-info text-center text-lg mb-10">
1108
- <p class="mb-4"><strong>Business Hours:</strong></p>
1109
- <p class="mb-4">Monday - Saturday: 6:00 AM - 7:00 PM<br>
1110
- Sunday: 8:00 AM - 5:00 PM</p>
1111
-
1112
- <p><strong>Service Area:</strong> Los Angeles & Orange County</p>
1113
- </div>
1114
-
1115
- <div class="flex flex-col md:flex-row justify-center gap-4 mb-10">
1116
- <a href="tel:5622289429" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2">
1117
- <i class="fas fa-phone"></i> Call Now
1118
- </a>
1119
- <a href="sms:562-228-9429?body=Hi%20Jay!%20I'd%20like%20to%20schedule%20a%20mobile%20detailing%20service." class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2">
1120
- <i class="fas fa-comment-alt"></i> Text Us
1121
- </a>
1122
- </div>
1123
-
1124
- <div class="flex flex-col md:flex-row justify-center gap-6">
1125
- <a href="https://www.instagram.com/jayswaxandwash/" target="_blank" class="social-link border-2 border-white hover:bg-white hover:text-pink-600 py-2 px-6 rounded-full transition duration-300 flex items-center justify-center gap-2">
1126
- <i class="fab fa-instagram"></i> @jayswaxandwash
1127
- </a>
1128
- <a href="https://m.yelp.com/biz/jay-s-mobile-wash-buena-park" target="_blank" class="social-link border-2 border-white hover:bg-white hover:text-pink-600 py-2 px-6 rounded-full transition duration-300 flex items-center justify-center gap-2">
1129
- <i class="fab fa-yelp"></i> Jay's Mobile Wash
1130
- </a>
1131
- </div>
1132
- </div>
1133
-
1134
- <!-- Appointment Form -->
1135
- <div class="appointment-form p-8 rounded-2xl">
1136
- <h3 class="text-2xl font-bold mb-6 text-center text-white">Schedule Appointment</h3>
1137
- <form class="space-y-4">
1138
- <div>
1139
- <label class="block text-gray-300 mb-2">Full Name</label>
1140
- <input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg">
1141
- </div>
1142
-
1143
- <div>
1144
- <label class="block text-gray-300 mb-2">Email Address</label>
1145
- <input type="email" placeholder="your@email.com" class="w-full px-4 py-3 rounded-lg">
1146
- </div>
1147
-
1148
- <div>
1149
- <label class="block text-gray-300 mb-2">Phone Number</label>
1150
- <input type="tel" placeholder="(123) 456-7890" class="w-full px-4 py-3 rounded-lg">
1151
- </div>
1152
-
1153
- <div>
1154
- <label class="block text-gray-300 mb-2">Vehicle Type</label>
1155
- <select class="w-full px-4 py-3 rounded-lg">
1156
- <option>Sedan</option>
1157
- <option>SUV</option>
1158
- <option>Truck</option>
1159
- <option>Van</option>
1160
- <option>Luxury Vehicle</option>
1161
- </select>
1162
- </div>
1163
-
1164
- <div>
1165
- <label class="block text-gray-300 mb-2">Preferred Service</label>
1166
- <select class="w-full px-4 py-3 rounded-lg">
1167
- <option>Jay's Basic</option>
1168
- <option>Jay's Luxury</option>
1169
- <option>Jay's Max</option>
1170
- <option>Ceramic Coating</option>
1171
- <option>Full Polish</option>
1172
- </select>
1173
- </div>
1174
-
1175
- <div>
1176
- <label class="block text-gray-300 mb-2">Preferred Date</label>
1177
- <input type="date" class="w-full px-4 py-3 rounded-lg">
1178
- </div>
1179
-
1180
- <button type="submit" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-4 px-8 rounded-full transition duration-300">
1181
- Request Appointment
1182
- </button>
1183
- </form>
1184
- </div>
1185
- </div>
1186
-
1187
- <!-- Service Area Map -->
1188
- <div class="mt-16">
1189
- <h3 class="text-3xl font-bold text-center mb-8 text-pink-600">Our Service Area</h3>
1190
- <div class="service-area-map relative rounded-xl overflow-hidden max-w-4xl mx-auto">
1191
- <div class="relative h-96">
1192
- <div class="absolute inset-0 bg-gray-200 border-2 border-dashed rounded-xl w-full h-full"></div>
1193
- <div class="absolute inset-0 flex items-center justify-center">
1194
- <span class="text-gray-700 font-bold text-xl">Service Area Map</span>
1195
- </div>
1196
- <div class="service-area-overlay"></div>
1197
- </div>
1198
- </div>
1199
- <p class="text-center mt-4 text-gray-600 max-w-2xl mx-auto">
1200
- We proudly serve all of Los Angeles County and Orange County. Free service within 30 miles of Lakewood, CA. Additional charges apply beyond this radius.
1201
  </p>
1202
  </div>
1203
- </div>
1204
- </section>
1205
-
1206
- <!-- Footer -->
1207
- <footer class="bg-gray-900 text-white py-12 px-6 text-center">
1208
- <div class="max-w-7xl mx-auto">
1209
- <p class="mb-4">© 2025 Jay's Mobile Wash. All Rights Reserved.</p>
1210
- <p class="mb-4">Licensed • Insured • Satisfaction Guaranteed</p>
1211
- <p>Professional Mobile Detailing in Los Angeles & Orange County</p>
1212
- </div>
1213
- </footer>
1214
-
1215
- <!-- Modal -->
1216
- <div id="modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden overflow-y-auto p-4">
1217
- <div class="modal-content bg-white rounded-2xl max-w-4xl mx-auto my-12 p-6 md:p-8 relative">
1218
- <button class="close-btn absolute top-4 right-4 bg-pink-600 text-white w-10 h-10 rounded-full flex items-center justify-center text-xl transition duration-300" onclick="closeModal()">
1219
- ×
1220
- </button>
1221
- <div id="modalContent" class="prose max-w-none"></div>
1222
- </div>
1223
- </div>
1224
-
1225
- <script>
1226
- // Mobile menu toggle
1227
- const mobileMenuButton = document.getElementById('mobile-menu-button');
1228
- const mobileMenu = document.getElementById('mobile-menu');
1229
-
1230
- mobileMenuButton.addEventListener('click', () => {
1231
- mobileMenu.classList.toggle('hidden');
1232
- });
1233
-
1234
- // Show service details modal
1235
- function showDetails(service) {
1236
- const details = serviceDetails[service];
1237
- let html = `
1238
- <div class="service-details">
1239
- <h2 class="text-3xl font-bold mb-4 text-pink-600">${details.title}</h2>
1240
- <p class="text-xl font-bold mb-6">${details.price}</p>
1241
- <p class="mb-8 text-lg">${details.description}</p>
1242
-
1243
- <div class="grid md:grid-cols-2 gap-8 mb-8">
1244
- <div class="bg-gray-100 p-6 rounded-xl">
1245
- <h3 class="text-xl font-bold mb-4 text-pink-600">Step-by-Step Breakdown</h3>
1246
- <ol class="space-y-4">
1247
- ${details.steps.map((step, index) => `
1248
- <li class="bg-white p-4 rounded-lg shadow-sm">
1249
- <div class="flex items-start">
1250
- <span class="bg-pink-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">${index + 1}</span>
1251
- <div>
1252
- <h4 class="font-bold text-gray-800">${step.title}</h4>
1253
- <p class="text-gray-600 mt-1">${step.description}</p>
1254
- <div class="mt-2 bg-pink-50 p-2 rounded">
1255
- <p class="text-sm font-medium text-pink-700 flex items-start">
1256
- <span class="mr-1">✓</span>
1257
- <span>${step.benefit}</span>
1258
- </p>
1259
- </div>
1260
- </div>
1261
- </div>
1262
- </li>
1263
- `).join('')}
1264
- </ol>
1265
- </div>
1266
-
1267
- <div class="bg-gray-100 p-6 rounded-xl">
1268
- <h3 class="text-xl font-bold mb-4 text-pink-600">Ideal For</h3>
1269
- <p class="mb-4">${details.ideal}</p>
1270
- <h3 class="text-xl font-bold mt-6 mb-4 text-pink-600">Key Benefits</h3>
1271
- <ul class="space-y-2">
1272
- ${details.features.flatMap(section => section.items).slice(0, 5).map(item => `
1273
- <li class="flex items-start">
1274
- <span class="text-green-500 mr-2">✓</span>
1275
- <span>${item}</span>
1276
- </li>
1277
- `).join('')}
1278
- </ul>
1279
- </div>
1280
- </div>
1281
-
1282
- <div class="bg-pink-50 p-6 rounded-xl">
1283
- <h3 class="text-xl font-bold mb-4 text-pink-600">Detailed Features</h3>
1284
- ${details.features.map(section => `
1285
- <div class="mb-6">
1286
- <h4 class="text-lg font-bold mb-2">${section.title}</h4>
1287
- <ul class="space-y-2">
1288
- ${section.items.map(item => `
1289
- <li class="flex items-start">
1290
- <span class="text-pink-600 mr-2">•</span>
1291
- <span>${item}</span>
1292
- </li>
1293
- `).join('')}
1294
- </ul>
1295
- </div>
1296
- `).join('')}
1297
- </div>
1298
- </div>
1299
- `;
1300
 
1301
- document.getElementById('modalContent').innerHTML = html;
1302
- document.getElementById('modal').classList.remove('hidden');
1303
- }
1304
-
1305
- // Smooth scrolling for navigation
1306
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1307
- anchor.addEventListener('click', function(e) {
1308
- e.preventDefault();
1309
-
1310
- // Close mobile menu if open
1311
- mobileMenu.classList.add('hidden');
1312
-
1313
- document.querySelector(this.getAttribute('href')).scrollIntoView({
1314
- behavior: 'smooth'
1315
- });
1316
- });
1317
- });
1318
-
1319
- // Enhanced Service Details Data with smart explanations
1320
- const serviceDetails = {
1321
- basic: {
1322
- title: "JAY'S BASIC - Essential Clean & Shine",
1323
- price: "Small Car: $70 | SUV: $80",
1324
- description: "Our Basic package is perfect for regular maintenance and keeping your vehicle looking fresh. This comprehensive service typically takes 1.5-2 hours and delivers professional results at an affordable price.",
1325
- steps: [
1326
- {
1327
- title: "Pre-Wash Rinse",
1328
- description: "High-pressure rinse (300-500 PSI) removes 90% of surface contaminants",
1329
- benefit: "Eliminates abrasive particles that cause swirl marks, saving your clear coat"
1330
- },
1331
- {
1332
- title: "Two-Bucket Wash",
1333
- description: "Professional hand wash with pH-neutral shampoo and grit guard system",
1334
- benefit: "Prevents 95% of swirl marks vs. automatic car washes"
1335
- },
1336
- {
1337
- title: "Wheel & Tire Cleaning",
1338
- description: "Deep cleaning with acid-free wheel cleaner and specialized brushes",
1339
- benefit: "Prevents brake dust etching that permanently damages wheels"
1340
- },
1341
- {
1342
- title: "Interior Vacuuming",
1343
- description: "Commercial-grade vacuum with crevice tools reaches every inch",
1344
- benefit: "Removes 99% of dust and allergens for healthier cabin air"
1345
- },
1346
- {
1347
- title: "Surface Wiping",
1348
- description: "Microfiber detailing with UV-protectant on all surfaces",
1349
- benefit: "Prevents dashboard cracking and fading from sun exposure"
1350
- },
1351
- {
1352
- title: "Window Cleaning",
1353
- description: "Professional-grade glass cleaner with waffle-weave microfiber",
1354
- benefit: "Eliminates streaks and haze for safer nighttime driving"
1355
- }
1356
- ],
1357
- features: [
1358
- {
1359
- title: "Exterior Services",
1360
- items: [
1361
- "Two-step hand wash (pH-neutral shampoo preserves wax)",
1362
- "Wheel cleaning (acid-free formula safe for all wheels)",
1363
- "Ceramic SiO₂ wheel treatment (lasts 3x longer than wax)",
1364
- "Door jamb cleaning (removes hidden dirt buildup)",
1365
- "Streak-free window cleaning (improves visibility 30%)",
1366
- "Mirror/chrome polishing (restores reflective quality)",
1367
- "Tire dressing (water-based formula won't sling)",
1368
- "Hand drying (premium microfiber prevents water spots)"
1369
- ]
1370
- },
1371
- {
1372
- title: "Interior Services",
1373
- items: [
1374
- "Complete vacuuming (removes 99% of dust particles)",
1375
- "Cup holder/console cleaning (sanitizes high-touch areas)",
1376
- "Dashboard UV protection (prevents cracking/fading)",
1377
- "Interior glass cleaning (eliminates haze and streaks)",
1378
- "Air freshener (neutralizes odors at molecular level)",
1379
- "Seat cleaning (extends fabric/leather lifespan 2-3x)",
1380
- "Door panel conditioning (prevents drying/cracking)",
1381
- "Trunk vacuuming (removes hidden debris and allergens)"
1382
- ]
1383
- },
1384
- {
1385
- title: "What Makes Us Different",
1386
- items: [
1387
- "We use professional-grade products not available to consumers",
1388
- "Attention to details others miss (vents, crevices, emblems)",
1389
- "Proper technique prevents swirls and scratches",
1390
- "We take our time - no rushed car wash experience",
1391
- "Mobile convenience - we come to you",
1392
- "Eco-friendly products safe for your family and pets"
1393
- ]
1394
- }
1395
- ],
1396
- steps: [
1397
- {
1398
- title: "Pre-Wash Rinse",
1399
- description: "High-pressure rinse to remove loose dirt and debris",
1400
- benefit: "Prevents scratching during wash by removing abrasive particles"
1401
- },
1402
- {
1403
- title: "Two-Bucket Wash",
1404
- description: "Hand wash using grit guards and premium microfiber mitts",
1405
- benefit: "Eliminates swirl marks by separating clean/dirty water"
1406
- },
1407
- {
1408
- title: "Wheel & Tire Cleaning",
1409
- description: "Specialized brushes and pH-balanced cleaners",
1410
- benefit: "Removes brake dust and protects alloy wheels from corrosion"
1411
- },
1412
- {
1413
- title: "Interior Vacuuming",
1414
- description: "Deep clean all carpets, seats and hard-to-reach areas",
1415
- benefit: "Removes allergens and extends fabric life"
1416
- },
1417
- {
1418
- title: "Surface Wiping",
1419
- description: "Microfiber detailing of all interior surfaces",
1420
- benefit: "Removes dust and applies UV protection to prevent cracking"
1421
- },
1422
- {
1423
- title: "Window Cleaning",
1424
- description: "Streak-free formula with microfiber glass towels",
1425
- benefit: "Improves visibility and removes water spots"
1426
- }
1427
- ],
1428
- ideal: "This package is ideal for customers who wash their car regularly (every 2-4 weeks) and want professional results without the premium add-ons. Perfect for daily drivers, family vehicles, and anyone who wants their car clean and presentable."
1429
- },
1430
- luxury: {
1431
- title: "JAY'S LUXURY - Superior Protection & Gloss",
1432
- price: "Small Car: $130 | SUV: $140",
1433
- description: "Our Luxury package takes your vehicle to the next level with advanced protection and enhanced appearance. This service typically takes 2.5-3 hours and includes everything from our Basic package plus premium upgrades.",
1434
- features: [
1435
- {
1436
- title: "Everything from Basic Package PLUS",
1437
- items: [
1438
- "All Basic package services included",
1439
- "Upgraded products and additional protection"
1440
- ]
1441
- },
1442
- {
1443
- title: "Exterior Upgrades",
1444
- items: [
1445
- "Premium ceramic spray wax application (3-month protection)",
1446
- "Paint decontamination with clay mitt on problem areas",
1447
- "Exterior plastic and trim restoration",
1448
- "Advanced tire dressing with long-lasting formula",
1449
- "Water spot removal treatment",
1450
- "Bug and tar removal",
1451
- "Exhaust tip polishing",
1452
- "Premium glass sealant application"
1453
- ]
1454
- },
1455
- {
1456
- title: "Interior Upgrades",
1457
- items: [
1458
- "SiO₂ interior treatment for dust-repelling properties",
1459
- "Professional vinyl and plastic restoration",
1460
- "Leather cleaning and conditioning (if applicable)",
1461
- "Fabric protection spray application",
1462
- "Deep cleaning of all vents with specialized tools",
1463
- "Odor elimination treatment",
1464
- "UV protection on all surfaces",
1465
- "Premium air freshener options"
1466
- ]
1467
- },
1468
- {
1469
- title: "Protection Benefits",
1470
- items: [
1471
- "3-month paint protection against UV rays and contaminants",
1472
- "Hydrophobic coating repels water and dirt",
1473
- "Interior surfaces stay cleaner longer",
1474
- "Reduces frequency of required washes",
1475
- "Maintains resale value",
1476
- "Makes future cleaning easier"
1477
- ]
1478
- }
1479
- ],
1480
- process: "Building on our Basic service, we add paint decontamination where needed, followed by premium ceramic spray wax application using proper technique for maximum durability. Interior receives our SiO₂ treatment and all surfaces are protected. We finish with tire dressing and final quality inspection.",
1481
-
1482
  <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=jjmandog/jaysmobilewash" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1483
  </html>
 
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
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
 
 
 
14
  }
15
 
16
+ @keyframes pulse {
17
+ 0% { transform: scale(1); }
18
+ 50% { transform: scale(1.05); }
19
+ 100% { transform: scale(1); }
20
  }
21
 
22
+ @keyframes shine {
23
+ 0% { background-position: -200% 0; }
24
+ 100% { background-position: 200% 0; }
25
  }
26
 
27
+ .float-animation {
28
+ animation: float 3s ease-in-out infinite;
 
29
  }
30
 
31
+ .pulse-animation {
32
+ animation: pulse 2s infinite;
 
 
33
  }
34
 
35
+ .shine-text {
36
+ background: linear-gradient(90deg, #fff, #b530ff, #ff1744, #fff);
37
+ background-size: 200% auto;
38
+ color: transparent;
39
+ -webkit-background-clip: text;
40
+ background-clip: text;
41
+ animation: shine 3s linear infinite;
42
+ }
43
+
44
+ .service-card:hover {
45
+ transform: translateY(-10px);
46
+ box-shadow: 0 20px 25px -5px rgba(181, 48, 255, 0.3), 0 10px 10px -5px rgba(181, 48, 255, 0.1);
47
  }
48
 
49
  .gallery-item:hover {
 
69
  transform: rotate(180deg);
70
  }
71
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  .scroll-top {
73
  position: fixed;
74
  bottom: 30px;
 
98
  transform: scale(1.1) translateY(0);
99
  }
100
 
101
+ .gradient-border {
102
  position: relative;
103
+ border-radius: 1rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
104
  }
105
 
106
+ .gradient-border::before {
107
+ content: '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108
  position: absolute;
109
  top: 0;
110
  left: 0;
111
+ right: 0;
112
+ bottom: 0;
113
+ border-radius: 1rem;
114
+ padding: 3px;
115
+ background: linear-gradient(45deg, #b530ff, #ff1744);
116
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
117
+ -webkit-mask-composite: destination-out;
118
+ mask-composite: exclude;
119
  pointer-events: none;
120
  }
121
 
122
+ .gradient-text {
123
+ background: linear-gradient(45deg, #b530ff, #ff1744);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  -webkit-background-clip: text;
125
  -webkit-text-fill-color: transparent;
126
  }
127
 
128
+ .process-step {
129
  position: relative;
130
+ transition: all 0.3s ease;
131
  }
132
 
133
+ .process-step:hover {
134
+ transform: scale(1.1);
 
 
 
 
 
 
 
 
135
  }
136
 
137
+ .process-step::after {
138
+ content: '';
139
  position: absolute;
140
+ top: 50%;
141
+ left: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  width: 50px;
143
+ height: 2px;
144
+ background: linear-gradient(90deg, rgba(181,48,255,0.5), rgba(255,23,68,0.5));
145
+ display: none;
 
 
 
 
 
 
 
 
 
 
146
  }
147
 
148
+ @media (min-width: 768px) {
149
+ .process-step::after {
150
+ display: block;
151
+ }
 
152
  }
153
 
154
+ .modal-content {
155
+ animation: slideUp 0.3s ease-out;
 
 
 
 
 
156
  }
157
 
158
+ @keyframes slideUp {
159
+ from {
160
+ transform: translateY(50px);
161
+ opacity: 0;
162
+ }
163
+ to {
164
+ transform: translateY(0);
165
+ opacity: 1;
166
+ }
167
  }
168
  </style>
169
  </head>
170
+ <body class="bg-gray-900 text-gray-100 font-sans">
171
  <!-- Navigation -->
172
+ <nav id="main-nav" class="fixed top-0 left-0 w-full bg-gray-900/90 backdrop-blur-md shadow-lg z-50 px-6 py-4 transition-all duration-300 border-b border-gray-800">
173
  <div class="max-w-7xl mx-auto flex justify-between items-center">
174
+ <div class="text-white text-2xl font-bold tracking-tight">
175
+ <span class="gradient-text">JAY'S MOBILE WASH</span>
176
+ </div>
177
 
178
  <!-- Desktop Menu -->
179
  <ul class="hidden md:flex space-x-8">
180
+ <li><a href="#home" class="text-white hover:text-purple-400 font-medium transition duration-300">Home</a></li>
181
+ <li><a href="#services" class="text-white hover:text-purple-400 font-medium transition duration-300">Services</a></li>
182
+ <li><a href="#products" class="text-white hover:text-purple-400 font-medium transition duration-300">Products</a></li>
183
+ <li><a href="#process" class="text-white hover:text-purple-400 font-medium transition duration-300">Process</a></li>
184
+ <li><a href="#stats" class="text-white hover:text-purple-400 font-medium transition duration-300">Why Us</a></li>
185
+ <li><a href="#gallery" class="text-white hover:text-purple-400 font-medium transition duration-300">Gallery</a></li>
186
+ <li><a href="#faq" class="text-white hover:text-purple-400 font-medium transition duration-300">FAQ</a></li>
187
+ <li><a href="#contact" class="text-white hover:text-purple-400 font-medium transition duration-300">Contact</a></li>
188
  </ul>
189
 
190
  <!-- Mobile Menu Button -->
 
194
  </div>
195
 
196
  <!-- Mobile Menu -->
197
+ <div id="mobile-menu" class="hidden md:hidden bg-gray-800/95 backdrop-blur-sm absolute top-full left-0 w-full px-6 py-4">
198
  <ul class="space-y-4">
199
+ <li><a href="#home" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Home</a></li>
200
+ <li><a href="#services" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Services</a></li>
201
+ <li><a href="#products" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Products</a></li>
202
+ <li><a href="#process" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Process</a></li>
203
+ <li><a href="#stats" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Why Us</a></li>
204
+ <li><a href="#gallery" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Gallery</a></li>
205
+ <li><a href="#faq" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">FAQ</a></li>
206
+ <li><a href="#contact" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Contact</a></li>
207
  </ul>
208
  </div>
209
  </nav>
 
214
  </div>
215
 
216
  <!-- Hero Section -->
217
+ <section id="home" class="relative pt-32 pb-20 md:pt-40 md:pb-28 px-6 overflow-hidden">
218
+ <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 via-gray-900 to-pink-900/30 z-0"></div>
219
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1555215695-3004980ad54e?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-20 z-0"></div>
220
+
221
  <div class="max-w-7xl mx-auto relative z-10 text-center">
222
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 shine-text">JAY'S MOBILE WASH</h1>
223
  <p class="text-xl md:text-2xl italic mb-10 opacity-90">Premium Mobile Detailing - We Come to You!</p>
224
 
225
  <div class="flex flex-col md:flex-row justify-center gap-4">
226
+ <a href="tel:5622289429" class="bg-green-600 hover:bg-green-700 text-white font-bold py-4 px-8 rounded-full text-lg md:text-xl transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2 pulse-animation">
227
  <i class="fas fa-phone"></i> Call Now: 562-228-9429
228
  </a>
229
+ <a href="#services" class="bg-white hover:bg-gray-100 text-purple-600 font-bold py-4 px-8 rounded-full text-lg md:text-xl transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2 float-animation">
230
  <i class="fas fa-list"></i> View Services & Pricing
231
  </a>
232
  </div>
233
 
234
  <!-- Stats Counter -->
235
  <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
236
+ <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl text-center border border-gray-700 hover:border-purple-500 transition duration-300">
237
+ <div class="w-16 h-16 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
238
+ <i class="fas fa-car text-purple-400 text-2xl"></i>
239
  </div>
240
+ <div class="text-3xl font-bold gradient-text" id="cars-detailed">2500+</div>
241
+ <p class="text-gray-400 mt-2">Cars Detailed</p>
242
  </div>
243
 
244
+ <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl text-center border border-gray-700 hover:border-purple-500 transition duration-300">
245
+ <div class="w-16 h-16 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
246
+ <i class="fas fa-star text-purple-400 text-2xl"></i>
247
  </div>
248
+ <div class="text-3xl font-bold gradient-text" id="five-stars">4.9★</div>
249
+ <p class="text-gray-400 mt-2">Average Rating</p>
250
  </div>
251
 
252
+ <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl text-center border border-gray-700 hover:border-purple-500 transition duration-300">
253
+ <div class="w-16 h-16 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
254
+ <i class="fas fa-map-marker-alt text-purple-400 text-2xl"></i>
255
  </div>
256
+ <div class="text-3xl font-bold gradient-text" id="service-area">30+</div>
257
+ <p class="text-gray-400 mt-2">Cities Served</p>
258
  </div>
259
 
260
+ <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl text-center border border-gray-700 hover:border-purple-500 transition duration-300">
261
+ <div class="w-16 h-16 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
262
+ <i class="fas fa-thumbs-up text-purple-400 text-2xl"></i>
263
  </div>
264
+ <div class="text-3xl font-bold gradient-text" id="appointments">98%</div>
265
+ <p class="text-gray-400 mt-2">Positive Feedback</p>
266
  </div>
267
  </div>
268
  </div>
269
  </section>
270
 
271
  <!-- Services Section -->
272
+ <section id="services" class="py-16 bg-gray-800 text-gray-100 px-6">
273
  <div class="max-w-7xl mx-auto">
274
+ <div class="text-center mb-12">
275
+ <span class="text-purple-400 font-semibold">OUR SERVICES</span>
276
+ <h2 class="text-4xl font-bold mt-2 gradient-text">Detailing Packages</h2>
277
+ <p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
278
+ Professional care for your vehicle, delivered to your location
279
+ </p>
280
+ </div>
281
 
282
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
283
  <!-- Basic Package -->
284
+ <div class="service-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-500 cursor-pointer border border-gray-600 hover:border-purple-500">
285
  <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center relative">
286
  <h3 class="text-2xl font-bold mb-2">JAY'S BASIC</h3>
287
  <p class="text-xl">Small Car: $70 | SUV: $80</p>
 
289
  <div class="p-6">
290
  <ul class="space-y-3 mb-6">
291
  <li class="flex items-start">
292
+ <span class="text-green-400 mr-2">✓</span>
293
  Professional 2-step hand wash
294
  </li>
295
  <li class="flex items-start">
296
+ <span class="text-green-400 mr-2">✓</span>
297
  Wheel cleaning with ceramic SiO₂
298
  </li>
299
  <li class="flex items-start">
300
+ <span class="text-green-400 mr-2">✓</span>
301
  Interior wipe-down and shine
302
  </li>
303
  <li class="flex items-start">
304
+ <span class="text-green-400 mr-2">✓</span>
305
  Thorough vacuuming
306
  </li>
307
  <li class="flex items-start">
308
+ <span class="text-green-400 mr-2">✓</span>
309
  Window cleaning inside & out
310
  </li>
311
  </ul>
312
+ <a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
313
  Book Now <i class="fas fa-arrow-right ml-2"></i>
314
  </a>
315
+ <button onclick="showDetails('basic')" class="w-full mt-2 bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full transition duration-300 text-sm">
316
  Show More Details <i class="fas fa-chevron-down ml-1"></i>
317
  </button>
318
  </div>
319
  </div>
320
 
321
  <!-- Luxury Package -->
322
+ <div class="service-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 cursor-pointer border border-gray-600 hover:border-purple-500 relative">
323
+ <div class="absolute top-4 right-4 bg-pink-600 text-white text-xs font-bold px-3 py-1 rounded-full z-10">
324
+ POPULAR
325
+ </div>
326
  <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center">
327
  <h3 class="text-2xl font-bold mb-2">JAY'S LUXURY</h3>
328
  <p class="text-xl">Small Car: $130 | SUV: $140</p>
 
330
  <div class="p-6">
331
  <ul class="space-y-3 mb-6">
332
  <li class="flex items-start">
333
+ <span class="text-green-400 mr-2">✓</span>
334
  Everything in Basic package
335
  </li>
336
  <li class="flex items-start">
337
+ <span class="text-green-400 mr-2">✓</span>
338
  Premium ceramic spray wax
339
  </li>
340
  <li class="flex items-start">
341
+ <span class="text-green-400 mr-2">✓</span>
342
  SiO₂ interior treatment
343
  </li>
344
  <li class="flex items-start">
345
+ <span class="text-green-400 mr-2">✓</span>
346
  Vinyl & trim restoration
347
  </li>
348
  <li class="flex items-start">
349
+ <span class="text-green-400 mr-2">✓</span>
350
  3-month paint protection
351
  </li>
352
  </ul>
353
+ <a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
354
  Book Now <i class="fas fa-arrow-right ml-2"></i>
355
  </a>
356
+ <button onclick="showDetails('luxury')" class="w-full mt-2 bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full transition duration-300 text-sm">
357
  Show More Details <i class="fas fa-chevron-down ml-1"></i>
358
  </button>
359
  </div>
360
  </div>
361
 
362
  <!-- Max Package -->
363
+ <div class="service-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 cursor-pointer border border-gray-600 hover:border-purple-500">
364
  <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center">
365
  <h3 class="text-2xl font-bold mb-2">JAY'S MAX</h3>
366
  <p class="text-xl">Small Car: $200 | SUV: $210</p>
 
368
  <div class="p-6">
369
  <ul class="space-y-3 mb-6">
370
  <li class="flex items-start">
371
+ <span class="text-green-400 mr-2">✓</span>
372
  Everything in Luxury package
373
  </li>
374
  <li class="flex items-start">
375
+ <span class="text-green-400 mr-2">✓</span>
376
  Advanced ceramic hyper wax
377
  </li>
378
  <li class="flex items-start">
379
+ <span class="text-green-400 mr-2">✓</span>
380
  Interior steam cleaning
381
  </li>
382
  <li class="flex items-start">
383
+ <span class="text-green-400 mr-2">✓</span>
384
  Clay bar treatment
385
  </li>
386
  <li class="flex items-start">
387
+ <span class="text-green-400 mr-2">✓</span>
388
  Hydrophobic SiO₂ infused graphene sealant (6-month protection)
389
  </li>
390
  </ul>
391
+ <a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
392
  Book Now <i class="fas fa-arrow-right ml-2"></i>
393
  </a>
394
+ <button onclick="showDetails('max')" class="w-full mt-2 bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full transition duration-300 text-sm">
395
  Show More Details <i class="fas fa-chevron-down ml-1"></i>
396
  </button>
397
  </div>
 
401
  </section>
402
 
403
  <!-- Products Section -->
404
+ <section id="products" class="py-16 bg-gray-900 text-white px-6">
405
  <div class="max-w-7xl mx-auto">
406
+ <div class="text-center mb-12">
407
+ <span class="text-purple-400 font-semibold">OUR TOOLS</span>
408
+ <h2 class="text-4xl font-bold mt-2 gradient-text">Professional Products</h2>
409
+ <p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
410
+ Only the best for your vehicle
411
+ </p>
412
+ </div>
413
 
414
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
415
  <!-- Koch Chemie -->
416
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl border border-gray-700">
417
+ <div class="text-center mb-4">
418
+ <div class="w-24 h-24 bg-purple-600/10 rounded-full flex items-center justify-center mx-auto">
419
+ <img src="https://seeklogo.com/images/K/koch-chemie-logo-8BCDB7E002-seeklogo.com.png" alt="Koch Chemie" class="h-16 w-16 object-contain">
420
+ </div>
421
  </div>
422
+ <h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Koch Chemie</h3>
423
+ <p class="text-gray-400 mb-4 text-center">Professional-grade detailing products.</p>
424
  <ul class="space-y-2 text-gray-400">
425
  <li class="flex items-start">
426
+ <span class="text-purple-400 mr-2">•</span>
427
  Premium cleaning compounds
428
  </li>
429
  <li class="flex items-start">
430
+ <span class="text-purple-400 mr-2">•</span>
431
  High-performance polishes
432
  </li>
433
  <li class="flex items-start">
434
+ <span class="text-purple-400 mr-2">•</span>
435
  Advanced protection products
436
  </li>
437
  </ul>
438
  </div>
439
 
440
  <!-- Maderite -->
441
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl border border-gray-700">
442
+ <div class="text-center mb-4">
443
+ <div class="w-24 h-24 bg-purple-600/10 rounded-full flex items-center justify-center mx-auto">
444
+ <img src="https://maderite.com/wp-content/uploads/2021/05/maderite-logo.png" alt="Maderite" class="h-16 w-16 object-contain">
445
+ </div>
446
  </div>
447
+ <h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Maderite</h3>
448
+ <p class="text-gray-400 mb-4 text-center">Innovative ceramic coatings.</p>
449
  <ul class="space-y-2 text-gray-400">
450
  <li class="flex items-start">
451
+ <span class="text-purple-400 mr-2">•</span>
452
  Long-lasting protection
453
  </li>
454
  <li class="flex items-start">
455
+ <span class="text-purple-400 mr-2">•</span>
456
  High-gloss finish
457
  </li>
458
  <li class="flex items-start">
459
+ <span class="text-purple-400 mr-2">•</span>
460
  Hydrophobic properties
461
  </li>
462
  </ul>
463
  </div>
464
 
465
  <!-- Ultra Clean -->
466
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl border border-gray-700">
467
+ <div class="text-center mb-4">
468
+ <div class="w-24 h-24 bg-purple-600/10 rounded-full flex items-center justify-center mx-auto">
469
+ <img src="https://ultraclean.com/wp-content/uploads/2022/03/ultraclean-logo.png" alt="Ultra Clean" class="h-16 w-16 object-contain">
470
+ </div>
471
  </div>
472
+ <h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Ultra Clean</h3>
473
+ <p class="text-gray-400 mb-4 text-center">Professional cleaning solutions.</p>
474
  <ul class="space-y-2 text-gray-400">
475
  <li class="flex items-start">
476
+ <span class="text-purple-400 mr-2">•</span>
477
  Heavy-duty degreasers
478
  </li>
479
  <li class="flex items-start">
480
+ <span class="text-purple-400 mr-2">•</span>
481
  pH-balanced formulas
482
  </li>
483
  <li class="flex items-start">
484
+ <span class="text-purple-400 mr-2">•</span>
485
  Eco-friendly options
486
  </li>
487
  </ul>
488
  </div>
489
 
490
  <!-- Ezpz Ceramic -->
491
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl border border-gray-700">
492
+ <div class="text-center mb-4">
493
+ <div class="w-24 h-24 bg-purple-600/10 rounded-full flex items-center justify-center mx-auto">
494
+ <img src="https://ezpzceramic.com/wp-content/uploads/2021/08/ezpz-logo.png" alt="Ezpz Ceramic" class="h-16 w-16 object-contain">
495
+ </div>
496
  </div>
497
+ <h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Ezpz Ceramic</h3>
498
+ <p class="text-gray-400 mb-4 text-center">Easy-to-use ceramic coatings.</p>
499
  <ul class="space-y-2 text-gray-400">
500
  <li class="flex items-start">
501
+ <span class="text-purple-400 mr-2">•</span>
502
  User-friendly application
503
  </li>
504
  <li class="flex items-start">
505
+ <span class="text-purple-400 mr-2">•</span>
506
  Professional-grade protection
507
  </li>
508
  <li class="flex items-start">
509
+ <span class="text-purple-400 mr-2">•</span>
510
  Long-lasting hydrophobic effect
511
  </li>
512
  </ul>
 
516
  </section>
517
 
518
  <!-- Process Section -->
519
+ <section id="process" class="py-16 bg-gray-800 text-white px-6">
520
  <div class="max-w-7xl mx-auto">
521
+ <div class="text-center mb-12">
522
+ <span class="text-purple-400 font-semibold">OUR METHOD</span>
523
+ <h2 class="text-4xl font-bold mt-2 gradient-text">Detail Process</h2>
524
+ <p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
525
+ Professional results in 5 simple steps
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
526
  </p>
527
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
528
 
529
+ <div class="relative">
530
+ <div class="flex flex-col md:flex-row justify-between items-center relative z-10 gap-4 md:gap-0">
531
+ <!-- Step 1 -->
532
+ <div class="process-step bg-gray-700 text-white rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center cursor-pointer transition duration-300 gradient-border" onclick="show
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
533
  <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=jjmandog/jaysmobilewash" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
534
  </html>