noow i cant scrool down1 - Follow Up Deployment

index.html

@@ -8,20 +8,50 @@
     <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; }
+            0% { 
+                text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
+                box-shadow: 0 0 15px #ff0000;
+            }
+            16% { 
+                text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000;
+                box-shadow: 0 0 15px #ff8000;
+            }
+            33% { 
+                text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00;
+                box-shadow: 0 0 15px #ffff00;
+            }
+            50% { 
+                text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
+                box-shadow: 0 0 15px #00ff00;
+            }
+            66% { 
+                text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff;
+                box-shadow: 0 0 15px #0000ff;
+            }
+            83% { 
+                text-shadow: 0 0 10px #8000ff, 0 0 20px #8000ff;
+                box-shadow: 0 0 15px #8000ff;
+            }
+            100% { 
+                text-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080;
+                box-shadow: 0 0 15px #ff0080;
+            }
         }
 
 
         @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-            100% { transform: translateY(0px); }
+            0% { 
+                transform: translateY(0px) rotate(-2deg);
+                filter: drop-shadow(0 10px 5px rgba(181, 48, 255, 0.5));
+            }
+            50% { 
+                transform: translateY(-15px) rotate(2deg);
+                filter: drop-shadow(0 20px 10px rgba(181, 48, 255, 0.7));
+            }
+            100% { 
+                transform: translateY(0px) rotate(-2deg);
+                filter: drop-shadow(0 10px 5px rgba(181, 48, 255, 0.5));
+            }
         }
         
         @keyframes pulse {
@@ -44,17 +74,26 @@
         }
         
         .shine-text {
-            background: linear-gradient(90deg, #fff, #b530ff, #ff1744, #fff);
-            background-size: 200% auto;
+            background: linear-gradient(90deg, 
+                #fff 0%, 
+                #ff00ff 20%, 
+                #b530ff 40%, 
+                #ff1744 60%, 
+                #ff00ff 80%, 
+                #fff 100%);
+            background-size: 300% auto;
             color: transparent;
             -webkit-background-clip: text;
             background-clip: text;
-            animation: shine 3s linear infinite;
+            animation: shine 2s linear infinite;
+            text-shadow: 0 0 5px rgba(255,255,255,0.3);
         }
         
         .service-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 20px 25px -5px rgba(181, 48, 255, 0.3), 0 10px 10px -5px rgba(181, 48, 255, 0.1);
+            transform: translateY(-15px) rotate(1deg);
+            box-shadow: 0 25px 50px -10px rgba(181, 48, 255, 0.4);
+            background: linear-gradient(135deg, rgba(181, 48, 255, 0.1) 0%, rgba(255, 23, 68, 0.1) 100%);
+            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
         }
 
         .service-card::after {
@@ -79,11 +118,36 @@
         @keyframes foamDrip {
             0%, 100% {
                 transform: translateY(0) scaleX(0.9);
+                opacity: 0.7;
             }
             50% {
-                transform: translateY(5px) scaleX(1);
+                transform: translateY(10px) scaleX(1.1);
+                opacity: 1;
             }
         }
+
+        @keyframes bubble {
+            0% {
+                transform: translateY(0) scale(0.8);
+                opacity: 0;
+            }
+            50% {
+                transform: translateY(-20px) scale(1);
+                opacity: 0.8;
+            }
+            100% {
+                transform: translateY(-40px) scale(1.2);
+                opacity: 0;
+            }
+        }
+
+        .bubble {
+            position: absolute;
+            background: rgba(255,255,255,0.7);
+            border-radius: 50%;
+            animation: bubble 2s ease-out infinite;
+            pointer-events: none;
+        }
         
         .gallery-item:hover {
             transform: scale(1.05);
@@ -181,7 +245,8 @@
         }
     </style>
 </head>
-<body class="bg-gray-900 text-gray-100 font-sans">
+<body class="bg-gray-900 text-gray-100 font-sans relative overflow-hidden">
+    <div id="water-drops"></div>
     <!-- Navigation -->
     <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">
         <div class="max-w-7xl mx-auto flex justify-between items-center">
@@ -640,32 +705,61 @@
                 <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://ezpzceramic.com/wp-content/uploads/2021/08/ezpz-logo.png" alt="Ezpz Ceramic" class="h-16 w-16 object-contain">
+                            <img src="https://m.media-amazon.com/images/I/61vggPvlGQL.jpg" alt="Ezpz Ceramic" class="h-16 w-16 object-contain">
                         </div>
                     </div>
                     <h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Ezpz Ceramic</h3>
-                    <p class="text-gray-400 mb-4 text-center">Easy-to-use ceramic coatings.</p>
+                    <p class="text-gray-400 mb-4 text-center">Professional-Grade SiO₂ Ceramic Coatings</p>
                     <ul class="space-y-2 text-gray-400">
                         <li class="flex items-start">
                             <span class="text-purple-400 mr-2">•</span>
-                            User-friendly application
+                            <div>
+                                <strong>9H Hardness Rating</strong> - Scratch-resistant SiO₂ matrix
+                                <div class="text-xs text-gray-500 mt-1">Forms molecular bond with paint for permanent protection</div>
+                            </div>
                         </li>
                         <li class="flex items-start">
                             <span class="text-purple-400 mr-2">•</span>
-                            Professional-grade protection
+                            <div>
+                                <strong>2-5 Year Protection</strong> - Advanced hydrophobic properties
+                                <div class="text-xs text-gray-500 mt-1">110°+ water contact angle for superior beading</div>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-purple-400 mr-2">•</span>
+                            <div>
+                                <strong>UV & Chemical Resistant</strong> - Blocks 98% of UV rays
+                                <div class="text-xs text-gray-500 mt-1">Protects against acid rain, bird droppings, and tree sap</div>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-purple-400 mr-2">•</span>
+                            <div>
+                                <strong>Self-Cleaning Effect</strong> - Dirt and contaminants slide off
+                                <div class="text-xs text-gray-500 mt-1">Reduces maintenance washing by 70%</div>
+                            </div>
                         </li>
                         <li class="flex items-start">
                             <span class="text-purple-400 mr-2">•</span>
-                            Long-lasting hydrophobic effect
+                            <div>
+                                <strong>Enhanced Gloss</strong> - Deepens paint color and clarity
+                                <div class="text-xs text-gray-500 mt-1">Creates showroom-quality mirror finish</div>
+                            </div>
                         </li>
                     </ul>
+                    <div class="mt-4 text-xs text-gray-500 italic">
+                        *Professional application recommended for optimal results
+                    </div>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- Stats Section -->
-    <section id="stats" class="py-16 bg-gradient-to-br from-purple-900/80 to-pink-900/80 text-white px-6">
+    <section id="stats" class="py-16 bg-gradient-to-br from-purple-900/80 to-pink-900/80 text-white px-6 relative overflow-hidden">
+        <div class="absolute inset-0 opacity-20 pointer-events-none">
+            <div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(circle at 10% 20%, rgba(181, 48, 255, 0.5) 0%, transparent 2%), radial-gradient(circle at 20% 30%, rgba(181, 48, 255, 0.4) 0%, transparent 2%), radial-gradient(circle at 30% 40%, rgba(181, 48, 255, 0.4) 0%, transparent 2%), radial-gradient(circle at 40% 50%, rgba(181, 48, 255, 0.3) 0%, transparent 2%), radial-gradient(circle at 50% 60%, rgba(181, 48, 255, 0.3) 0%, transparent 2%), radial-gradient(circle at 60% 70%, rgba(181, 48, 255, 0.2) 0%, transparent 2%), radial-gradient(circle at 70% 80%, rgba(181, 48, 255, 0.2) 0%, transparent 2%), radial-gradient(circle at 80% 90%, rgba(181, 48, 255, 0.1) 0%, transparent 2%); background-size: 200px 200px;"></div>
+        </div>
         <div class="max-w-7xl mx-auto">
             <div class="text-center mb-12">
                 <span class="text-purple-300 font-semibold">Why Choose Us</span>
@@ -1112,23 +1206,18 @@
                             data[key] = value;
                         });
                         
-                        // Format email body
-                        const emailBody = `
-                            New Appointment Request:
-                            
-                            Name: ${data.name}
-                            Email: ${data.email}
-                            Phone: ${data.phone}
-                            Vehicle Type: ${data.vehicleType}
-                            Service: ${data.service}
-                            Preferred Date: ${data.date}
-                            
-                            Sent from Jay's Mobile Wash website
-                        `;
+                        // Format SMS body
+                        const smsBody = `New Appointment Request:%0A%0A` +
+                                       `Name: ${data.name}%0A` +
+                                       `Email: ${data.email}%0A` +
+                                       `Phone: ${data.phone}%0A` +
+                                       `Vehicle: ${data.vehicleType}%0A` +
+                                       `Service: ${data.service}%0A` +
+                                       `Date: ${data.date}%0A%0A` +
+                                       `Sent from website`;
                         
-                        // Send email using mailto link
-                        const mailtoLink = `mailto:[email protected]?subject=New Appointment Request&body=${encodeURIComponent(emailBody)}`;
-                        window.location.href = mailtoLink;
+                        // Send SMS
+                        window.location.href = `sms:562-228-9429?body=${smsBody}`;
                         
                         // Show success message
                         document.getElementById('formStatus').classList.remove('hidden');
@@ -1690,6 +1779,48 @@
             modal.classList.add('hidden');
             document.body.style.overflow = 'auto';
         }
+
+        // Create water drops
+        function createWaterDrops() {
+            const container = document.getElementById('water-drops');
+            const dropsCount = 50;
+            
+            for (let i = 0; i < dropsCount; i++) {
+                const drop = document.createElement('div');
+                drop.classList.add('bubble');
+                
+                // Random properties
+                const size = Math.random() * 15 + 5;
+                const left = Math.random() * 100;
+                const delay = Math.random() * 5;
+                const duration = Math.random() * 3 + 2;
+                
+                drop.style.width = `${size}px`;
+                drop.style.height = `${size}px`;
+                drop.style.left = `${left}%`;
+                drop.style.bottom = `-${size}px`;
+                drop.style.animationDelay = `${delay}s`;
+                drop.style.animationDuration = `${duration}s`;
+                
+                container.appendChild(drop);
+            }
+        }
+
+        // Initialize animations when page loads
+        window.addEventListener('DOMContentLoaded', () => {
+            createWaterDrops();
+            
+            // Add hover effects to all buttons
+            document.querySelectorAll('button, a[href]').forEach(btn => {
+                btn.addEventListener('mouseenter', () => {
+                    btn.style.transform = 'scale(1.05)';
+                    btn.style.transition = 'all 0.2s ease';
+                });
+                btn.addEventListener('mouseleave', () => {
+                    btn.style.transform = 'scale(1)';
+                });
+            });
+        });
         </script>
 <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>
 </html>