make sound fancier with some science! - Follow Up Deployment

index.html

@@ -7,6 +7,20 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        @keyframes rainbowGlow {
+            0% { text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000; }
+            16% { text-shadow: 0 0 5px #ff8000, 0 0 10px #ff8000; }
+            33% { text-shadow: 0 0 5px #ffff00, 0 0 10px #ffff00; }
+            50% { text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00; }
+            66% { text-shadow: 0 0 5px #0000ff, 0 0 10px #0000ff; }
+            83% { text-shadow: 0 0 5px #8000ff, 0 0 10px #8000ff; }
+            100% { text-shadow: 0 0 5px #ff0080, 0 0 10px #ff0080; }
+        }
+
+        * {
+            animation: rainbowGlow 8s linear infinite;
+        }
+
         @keyframes float {
             0% { transform: translateY(0px); }
             50% { transform: translateY(-10px); }
@@ -174,7 +188,7 @@
         <div class="max-w-7xl mx-auto flex justify-between items-center">
             <div class="flex items-center">
                 <img src="https://i.ibb.co/1Yk0MChV/F91-F533-E-C5-CF-4-D18-A295-7-B40-C430-B8-E6-1.png" alt="Jay's Mobile Wash Logo" class="h-16 mr-3 pulse-animation">
-                <span class="text-white text-2xl font-bold tracking-tight gradient-text">JAY'S MOBILE WASH</span>
+                <span class="text-white text-2xl font-bold tracking-tight gradient-text">Jay's Mobile Wash</span>
             </div>
             
             <!-- Desktop Menu -->
@@ -184,7 +198,6 @@
                 <li><a href="#products" class="text-white hover:text-purple-400 font-medium transition duration-300">Products</a></li>
                 <li><a href="#process" class="text-white hover:text-purple-400 font-medium transition duration-300">Process</a></li>
                 <li><a href="#stats" class="text-white hover:text-purple-400 font-medium transition duration-300">Why Us</a></li>
-                <li><a href="#gallery" class="text-white hover:text-purple-400 font-medium transition duration-300">Gallery</a></li>
                 <li><a href="#faq" class="text-white hover:text-purple-400 font-medium transition duration-300">FAQ</a></li>
                 <li><a href="#contact" class="text-white hover:text-purple-400 font-medium transition duration-300">Contact</a></li>
             </ul>
@@ -203,7 +216,6 @@
                 <li><a href="#products" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Products</a></li>
                 <li><a href="#process" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Process</a></li>
                 <li><a href="#stats" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Why Us</a></li>
-                <li><a href="#gallery" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Gallery</a></li>
                 <li><a href="#faq" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">FAQ</a></li>
                 <li><a href="#contact" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Contact</a></li>
             </ul>
@@ -222,7 +234,7 @@
         
         <div class="max-w-7xl mx-auto relative z-10 text-center">
             <img src="https://i.ibb.co/1Yk0MChV/F91-F533-E-C5-CF-4-D18-A295-7-B40-C430-B8-E6-1.png" alt="Jay's Mobile Wash Logo" class="h-32 mx-auto mb-6 float-animation">
-            <h1 class="text-5xl md:text-7xl font-bold mb-6 shine-text">JAY'S MOBILE WASH</h1>
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 shine-text">Jay's Mobile Wash</h1>
             <p class="text-xl md:text-2xl italic mb-10 opacity-90">Premium Mobile Detailing - We Come to You!</p>
             
             <div class="flex flex-col md:flex-row justify-center gap-4">
@@ -286,7 +298,7 @@
                 <!-- Basic Package -->
                 <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">
                     <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center relative">
-                        <h3 class="text-2xl font-bold mb-2">JAY'S BASIC</h3>
+                        <h3 class="text-2xl font-bold mb-2">Jay's Basic</h3>
                         <p class="text-xl">Small Car: $70 | SUV: $80</p>
                     </div>
                     <div class="p-6">
@@ -360,7 +372,7 @@
                         POPULAR
                     </div>
                     <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center">
-                        <h3 class="text-2xl font-bold mb-2">JAY'S LUXURY</h3>
+                        <h3 class="text-2xl font-bold mb-2">Jay's Luxury</h3>
                         <p class="text-xl">Small Car: $130 | SUV: $140</p>
                     </div>
                     <div class="p-6">
@@ -371,11 +383,11 @@
                             </li>
                             <li class="flex items-start">
                                 <span class="text-green-400 mr-2">✓</span>
-                                Premium ceramic spray wax
+                                SiO₂-infused ceramic spray wax with intense gloss enhancers
                             </li>
                             <li class="flex items-start">
                                 <span class="text-green-400 mr-2">✓</span>
-                                SiO₂ interior treatment
+                                Full textile cleaning with brushes and scrub pads
                             </li>
                             <li class="flex items-start">
                                 <span class="text-green-400 mr-2">✓</span>
@@ -425,7 +437,7 @@
                 <!-- Max Package -->
                 <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">
                     <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center">
-                        <h3 class="text-2xl font-bold mb-2">JAY'S MAX</h3>
+                        <h3 class="text-2xl font-bold mb-2">Jay's Max</h3>
                         <p class="text-xl">Small Car: $200 | SUV: $210</p>
                     </div>
                     <div class="p-6">
@@ -440,7 +452,7 @@
                             </li>
                             <li class="flex items-start">
                                 <span class="text-green-400 mr-2">✓</span>
-                                Interior steam cleaning
+                                High-temperature (212°F/100°C) steam sanitation with vapor distillation technology
                             </li>
                             <li class="flex items-start">
                                 <span class="text-green-400 mr-2">✓</span>
@@ -539,7 +551,7 @@
                 <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">
                     <div class="text-center mb-4">
                         <div class="w-24 h-24 bg-purple-600/10 rounded-full flex items-center justify-center mx-auto">
-                            <img src="https://maderite.com/wp-content/uploads/2021/05/maderite-logo.png" alt="Maderite" class="h-16 w-16 object-contain">
+                            <img src="https://i.ibb.co/rfx12vbq/IMG-1463.jpg" alt="Maderite" class="h-16 w-16 object-contain">
                         </div>
                     </div>
                     <h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Maderite</h3>
@@ -564,7 +576,7 @@
                 <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">
                     <div class="text-center mb-4">
                         <div class="w-24 h-24 bg-purple-600/10 rounded-full flex items-center justify-center mx-auto">
-                            <img src="https://ultraclean.com/wp-content/uploads/2022/03/ultraclean-logo.png" alt="Ultra Clean" class="h-16 w-16 object-contain">
+                            <img src="https://i.ibb.co/RGdtBLXQ/IMG-1466-2-1.jpg" alt="Ultra Clean" class="h-16 w-16 object-contain">
                         </div>
                     </div>
                     <h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Ultra Clean</h3>
@@ -887,102 +899,53 @@
         </div>
     </section>
 
-    <!-- Gallery Section -->
-    <section id="gallery" class="py-16 bg-gray-900 text-white px-6">
+    <!-- Conditions Section -->
+    <section id="conditions" class="py-16 bg-gray-900 text-white px-6">
         <div class="max-w-7xl mx-auto">
             <div class="text-center mb-12">
-                <span class="text-purple-400 font-semibold">Our Work</span>
-                <h2 class="text-4xl font-bold mt-2 gradient-text">Transformation Gallery</h2>
+                <span class="text-purple-400 font-semibold">Policies</span>
+                <h2 class="text-4xl font-bold mt-2 gradient-text">Service Conditions</h2>
                 <p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
-                    See The Difference We Make
+                    Important information about our services
                 </p>
             </div>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
-                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
-                        <i class="fas fa-car text-gray-600 text-6xl"></i>
-                        <div class="absolute inset-0 flex items-center justify-center">
-                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
-                        </div>
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold mb-2">BMW 3 Series</h3>
-                        <p class="text-gray-400">Full exterior detail with ceramic coating</p>
-                    </div>
-                </div>
-                
-                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
-                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
-                        <i class="fas fa-car text-gray-600 text-6xl"></i>
-                        <div class="absolute inset-0 flex items-center justify-center">
-                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
-                        </div>
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold mb-2">Tesla Model 3</h3>
-                        <p class="text-gray-400">Interior deep cleaning and protection</p>
-                    </div>
-                </div>
-                
-                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
-                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
-                        <i class="fas fa-car text-gray-600 text-6xl"></i>
-                        <div class="absolute inset-0 flex items-center justify-center">
-                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
-                        </div>
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold mb-2">Ford F-150</h3>
-                        <p class="text-gray-400">Full exterior detail and paint correction</p>
-                    </div>
-                </div>
-                
-                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
-                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
-                        <i class="fas fa-car text-gray-600 text-6xl"></i>
-                        <div class="absolute inset-0 flex items-center justify-center">
-                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
-                        </div>
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold mb-2">Mercedes GLE</h3>
-                        <p class="text-gray-400">Interior steam cleaning and leather treatment</p>
-                    </div>
-                </div>
-                
-                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
-                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
-                        <i class="fas fa-car text-gray-600 text-6xl"></i>
-                        <div class="absolute inset-0 flex items-center justify-center">
-                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
-                        </div>
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold mb-2">Toyota Camry</h3>
-                        <p class="text-gray-400">Full exterior detail and headlight restoration</p>
-                    </div>
+
+            <div class="bg-gray-800 rounded-xl p-8 md:p-12 border border-gray-700 max-w-4xl mx-auto">
+                <h3 class="text-2xl font-bold mb-6 text-purple-400">CONDITIONAL SURCHARGES <span class="text-gray-400 text-lg">(Added to Base Price)</span></h3>
+                <ul class="space-y-4 mb-8">
+                    <li class="flex items-start">
+                        <span class="text-red-400 font-bold mr-3">+30%</span>
+                        <span>Heavy dirt, gum, or embedded grime</span>
+                    </li>
+                    <li class="flex items-start">
+                        <span class="text-red-400 font-bold mr-3">+50%</span>
+                        <span>Biohazards (vomit, urine, mold)</span>
+                    </li>
+                    <li class="flex items-start">
+                        <span class="text-red-400 font-bold mr-3">+$50</span>
+                        <span>After-Dark Work: Professional lighting provided <span class="text-gray-400">(Guarantee void)</span></span>
+                    </li>
+                </ul>
+
+                <div class="border-t border-gray-700 pt-8 mb-8">
+                    <h3 class="text-2xl font-bold mb-6 text-purple-400">QUALITY GUARANTEE</h3>
+                    <p class="mb-4 text-gray-300"><em>Guaranteed results require:</em></p>
+                    <ol class="list-decimal list-inside space-y-3 mb-6">
+                        <li><strong>Daylight/Proper Lighting</strong> (No guarantees for night work)</li>
+                        <li><strong>Full Disclosure</strong> (Severe messes reported upfront)</li>
+                        <li><strong>No Interruptions</strong> (Asking "Why is it so long?" or "Can you hurry?" voids guarantee. We are detailers not car washers. Trust our process)</li>
+                    </ol>
+                    <p class="text-sm text-gray-400 italic">Note: 92% of detailing flaws occur in low light (LA Detailing Institute, 2023).</p>
                 </div>
-                
-                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
-                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
-                        <i class="fas fa-car text-gray-600 text-6xl"></i>
-                        <div class="absolute inset-0 flex items-center justify-center">
-                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
-                        </div>
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold mb-2">Honda Civic</h3>
-                        <p class="text-gray-400">Interior deep clean and odor removal</p>
-                    </div>
+
+                <div class="border-t border-gray-700 pt-8">
+                    <h3 class="text-2xl font-bold mb-6 text-purple-400">NOTES</h3>
+                    <ul class="space-y-3">
+                        <li><strong>1.75% card processing fee</strong> applies to all transactions.</li>
+                        <li><strong>$10 travel fee</strong> for every 10 miles beyond 30 miles.</li>
+                    </ul>
                 </div>
             </div>
-            
-            <div class="text-center mt-12">
-                <a href="#" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">
-                    View More Transformations
-                </a>
-            </div>
         </div>
     </section>
 
@@ -1084,7 +1047,7 @@
             
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                 <div class="bg-gray-800 rounded-2xl p-8 md:p-12 text-white shadow-xl relative overflow-hidden border border-gray-700">
-                    <div class="text-4xl md:text-5xl font-bold text-center mb-8 gradient-text">562-228-9429</div>
+                    <div class="text-4xl md:text-5xl font-bold text-center mb-8 gradient-text">(562) 228-9429</div>
                     
                     <div class="contact-info text-center text-lg mb-10">
                         <p class="mb-4"><strong>Business Hours:</strong></p>
@@ -1173,12 +1136,12 @@
                     <div class="relative h-96 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
                         <i class="fas fa-map-marked-alt text-gray-600 text-6xl"></i>
                         <div class="absolute inset-0 flex items-center justify-center">
-                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full text-xl">Los Angeles & Orange County</span>
+                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full text-xl">Los Angeles & OC</span>
                         </div>
                     </div>
                 </div>
                 <p class="text-center mt-4 text-gray-400 max-w-2xl mx-auto">
-                    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.
+                    We proudly serve all of Los Angeles & OC. Free service within 30 miles of Lakewood, CA. Additional charges apply beyond this radius.
                 </p>
             </div>
         </div>
@@ -1188,7 +1151,7 @@
     <footer class="bg-gray-900 text-white py-12 px-6 text-center border-t border-gray-800">
         <div class="max-w-7xl mx-auto">
             <div class="flex justify-center mb-8">
-                <a href="#" class="text-2xl font-bold gradient-text">JAY'S MOBILE WASH</a>
+                <a href="#" class="text-2xl font-bold gradient-text">Jay's Mobile Wash</a>
             </div>
             <div class="flex justify-center space-x-6 mb-8">
                 <a href="https://www.instagram.com/jayswaxandwash/" target="_blank" class="text-gray-400 hover:text-purple-400 transition duration-300">
@@ -1201,9 +1164,9 @@
                     <i class="fas fa-phone text-2xl"></i>
                 </a>
             </div>
-            <p class="mb-4">© 2025 Jay's Mobile Wash. All Rights Reserved.</p>
-            <p class="mb-4">Licensed • Insured • Satisfaction Guaranteed</p>
-            <p>Professional Mobile Detailing in Los Angeles & Orange County</p>
+            <p class="mb-4">© 2025 Jay's Mobile Wash. All rights reserved.</p>
+            <p class="mb-4">Licensed • Insured • Satisfaction guaranteed</p>
+            <p>Professional mobile detailing in Los Angeles and Orange County</p>
         </div>
     </footer>