MAKE CUSTOM PACKAGES BOX LONG WAYS SO IT COVERED MORE OF THE PAGE - Follow Up Deployment

index.html

@@ -315,6 +315,68 @@
                     <div class="text-3xl font-bold gradient-text" id="appointments">98%</div>
                     <p class="text-gray-400 mt-2">Positive Feedback</p>
                 </div>
+
+                <!-- Custom Package - Full Width -->
+                <div class="col-span-4 service-card bg-gradient-to-br from-purple-900/50 to-pink-900/50 rounded-xl overflow-hidden shadow-lg transition duration-300 cursor-pointer border-2 border-purple-500/50 hover:border-purple-400 relative">
+                    <div class="flex flex-col md:flex-row">
+                        <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center md:text-left md:w-1/3">
+                            <h3 class="text-3xl font-bold mb-2">Custom Package</h3>
+                            <p class="text-xl mb-4">Tailored to your exact needs</p>
+                            <a href="tel:5622289429" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
+                                <i class="fas fa-phone mr-2"></i> Call to Customize
+                            </a>
+                        </div>
+                        <div class="p-6 md:w-2/3">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <h4 class="text-xl font-bold mb-3 text-yellow-400">Exterior Options</h4>
+                                    <ul class="space-y-2">
+                                        <li class="flex items-start">
+                                            <span class="text-yellow-400 mr-2">★</span>
+                                            Ceramic Coating (6mo-5yr)
+                                        </li>
+                                        <li class="flex items-start">
+                                            <span class="text-yellow-400 mr-2">★</span>
+                                            Paint Correction & Polish
+                                        </li>
+                                        <li class="flex items-start">
+                                            <span class="text-yellow-400 mr-2">★</span>
+                                            Headlight Restoration
+                                        </li>
+                                        <li class="flex items-start">
+                                            <span class="text-yellow-400 mr-2">★</span>
+                                            Wheel & Tire Detailing
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div>
+                                    <h4 class="text-xl font-bold mb-3 text-yellow-400">Interior Options</h4>
+                                    <ul class="space-y-2">
+                                        <li class="flex items-start">
+                                            <span class="text-yellow-400 mr-2">★</span>
+                                            Complete Leather Treatment
+                                        </li>
+                                        <li class="flex items-start">
+                                            <span class="text-yellow-400 mr-2">★</span>
+                                            Odor Elimination
+                                        </li>
+                                        <li class="flex items-start">
+                                            <span class="text-yellow-400 mr-2">★</span>
+                                            Carpet/Seat Shampoo
+                                        </li>
+                                        <li class="flex items-start">
+                                            <span class="text-yellow-400 mr-2">★</span>
+                                            Ceramic Interior Coating
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="mt-6 text-center md:text-left">
+                                <p class="text-gray-300">We'll work with you to create the perfect package for your vehicle and budget!</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </section>
@@ -466,7 +528,6 @@
                     </div>
                 </div>
                 
-                <!-- 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 relative">
                     <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>
@@ -741,7 +802,7 @@
             </div>
             
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
+                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300 cursor-pointer" onclick="showStatDetail('mobile')">
                     <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                         <i class="fas fa-truck text-purple-300 text-2xl"></i>
                     </div>
@@ -749,7 +810,7 @@
                     <p class="text-gray-300">We come to your home or office anywhere in LA & OC</p>
                 </div>
                 
-                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
+                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300 cursor-pointer" onclick="showStatDetail('satisfaction')">
                     <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                         <i class="fas fa-handshake text-purple-300 text-2xl"></i>
                     </div>
@@ -757,7 +818,7 @@
                     <p class="text-gray-300">We won't leave until you're 100% happy - your car gets treated like my own</p>
                 </div>
                 
-                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
+                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300 cursor-pointer" onclick="showStatDetail('selfsufficient')">
                     <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                         <i class="fas fa-bolt text-purple-300 text-2xl"></i>
                     </div>
@@ -765,7 +826,7 @@
                     <p class="text-gray-300">Fully spot-free deionized water & 4000W concurrent power</p>
                 </div>
                 
-                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
+                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300 cursor-pointer" onclick="showStatDetail('reputation')">
                     <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                         <i class="fas fa-handshake text-purple-300 text-2xl"></i>
                     </div>
@@ -774,6 +835,91 @@
                     <p class="text-gray-300">55 perfect 5★ reviews on OfferUp</p>
                 </div>
             </div>
+
+            <script>
+                // Stat details data
+                const statDetails = {
+                    mobile: {
+                        title: "Mobile Convenience",
+                        description: "We bring the full detailing experience directly to you, wherever you are in Los Angeles or Orange County.",
+                        benefits: [
+                            "No need to drive anywhere - we come to your home, office, or preferred location",
+                            "Flexible scheduling to fit your busy life",
+                            "Same professional results as a shop visit",
+                            "All equipment and supplies brought to you",
+                            "Service available 7 days a week"
+                        ],
+                        note: "We just need about 10 feet of space around your vehicle to work comfortably."
+                    },
+                    satisfaction: {
+                        title: "Satisfaction Guarantee",
+                        description: "Your complete satisfaction is our top priority. We stand behind our work 100%.",
+                        benefits: [
+                            "We won't leave until you're completely happy",
+                            "Free touch-ups if needed within 24 hours",
+                            "Your vehicle is treated with the same care as my own",
+                            "Honest assessments - we'll tell you what your car needs",
+                            "No rushed jobs - we take the time to do it right"
+                        ],
+                        note: "Over 98% of our customers report being 'extremely satisfied' with our services."
+                    },
+                    selfsufficient: {
+                        title: "Self-Sufficient Setup",
+                        description: "We bring everything needed for professional results, including our own water and power.",
+                        benefits: [
+                            "Deionized water system for spot-free rinsing",
+                            "4000W power generation for all equipment",
+                            "Professional-grade detailing tools and products",
+                            "No need to provide anything except your vehicle",
+                            "Environmentally responsible water reclamation"
+                        ],
+                        note: "Our mobile setup rivals fixed-location detailing shops in capability."
+                    },
+                    reputation: {
+                        title: "Proven Reputation",
+                        description: "Our track record speaks for itself with hundreds of satisfied customers.",
+                        benefits: [
+                            "4.9★ average rating across all platforms",
+                            "100+ verified 5-star reviews",
+                            "55 perfect ratings on OfferUp",
+                            "Featured in local automotive groups",
+                            "Repeat customers account for 65% of our business"
+                        ],
+                        note: "We've detailed over 2,500 vehicles since starting our mobile service."
+                    }
+                };
+
+                // Show stat details in modal
+                function showStatDetail(type) {
+                    const detail = statDetails[type];
+                    const modal = document.getElementById('modal');
+                    const modalContent = document.getElementById('modalContent');
+                    
+                    let html = `
+                        <h2 class="text-3xl font-bold mb-4 gradient-text">${detail.title}</h2>
+                        <p class="mb-6">${detail.description}</p>
+                        
+                        <div class="mb-6">
+                            <h3 class="text-xl font-bold mb-2 text-white">Key Benefits</h3>
+                            <ul class="space-y-2">
+                    `;
+                    
+                    detail.benefits.forEach(benefit => {
+                        html += `<li class="flex items-start"><span class="text-purple-400 mr-2">•</span> ${benefit}</li>`;
+                    });
+                    
+                    html += `
+                            </ul>
+                        </div>
+                        
+                        <p class="text-sm text-gray-400 italic">${detail.note}</p>
+                    `;
+                    
+                    modalContent.innerHTML = html;
+                    modal.classList.remove('hidden');
+                    document.body.style.overflow = 'hidden';
+                }
+            </script>
         </div>
     </section>
 
@@ -781,7 +927,7 @@
     <section 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">Upgrades</span>
+                <span class="text-purple-400 font-bold text-2xl md:text-3xl animate-pulse hover:animate-none hover:text-purple-300 transition-all duration-300" style="text-shadow: 0 0 8px rgba(181, 48, 255, 0.7);">Upgrades</span>
                 <h2 class="text-4xl font-bold mt-2 gradient-text">Premium Add-Ons</h2>
                 <p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
                     Enhance Your Detail With Professional Upgrades
@@ -797,10 +943,20 @@
                     </div>
                     <p class="text-purple-400 text-2xl font-bold mb-3">$400-$700</p>
                     <p class="text-gray-400 mb-4">
-                        Choose between 2-year ceramic or 5-year graphene coating with warranty
+                        Advanced nanotechnology protection - choose between:
                     </p>
+                    <ul class="text-gray-300 mb-4 space-y-2">
+                        <li class="flex items-start">
+                            <span class="text-purple-400 mr-2">•</span>
+                            <span><strong>Ceramic (2yr):</strong> SiO₂-based with superior water beading</span>
+                        </li>
+                        <li class="flex items-start">
+                            <span class="text-purple-400 mr-2">•</span>
+                            <span><strong>Graphene (5yr):</strong> Carbon matrix with thermal conductivity</span>
+                        </li>
+                    </ul>
                     <button class="text-purple-400 font-medium flex items-center gap-2">
-                        Learn more <i class="fas fa-arrow-right"></i>
+                        Compare Technologies <i class="fas fa-arrow-right"></i>
                     </button>
                 </div>
                 
@@ -1300,23 +1456,56 @@
         // Addon details data
         const addonDetails = {
             ceramic: {
-                title: "Ceramic/Graphene Coating",
+                title: "Ceramic vs Graphene Coatings",
                 price: "$400-$700",
-                description: "Professional-grade ceramic or graphene coating that provides long-lasting protection for your vehicle's paint.",
+                description: "Cutting-edge nanotechnology protection with distinct advantages for different needs.",
+                comparison: {
+                    ceramic: {
+                        name: "Ceramic Coating (SiO₂)",
+                        properties: [
+                            "Silicon dioxide (SiO₂) matrix",
+                            "Forms glass-like layer when cured",
+                            "Superior water beading (110°+ contact angle)",
+                            "Excellent chemical resistance",
+                            "2-year protection warranty"
+                        ],
+                        bestFor: "Daily drivers in moderate climates, those prioritizing water repellency"
+                    },
+                    graphene: {
+                        name: "Graphene Coating",
+                        properties: [
+                            "Carbon nanostructure matrix",
+                            "Thermal conductive properties",
+                            "More flexible than ceramic (better impact resistance)",
+                            "Self-cleaning effect lasts longer",
+                            "5-year protection warranty"
+                        ],
+                        bestFor: "High-end vehicles, extreme climates, long-term protection"
+                    },
+                    shared: [
+                        "9H hardness rating (scratch resistant)",
+                        "UV protection (blocks 98% of UV rays)",
+                        "Hydrophobic surface (repels water/dirt)",
+                        "Chemical stain resistance",
+                        "Professional application required"
+                    ]
+                },
                 benefits: [
-                    "2-year ceramic or 5-year graphene coating options",
-                    "Creates an ultra-hard, hydrophobic surface that repels water, dirt, and contaminants",
-                    "Protects against UV rays, oxidation, and chemical stains",
-                    "Maintains showroom shine with minimal maintenance",
-                    "Includes warranty for peace of mind"
+                    "<strong>Ceramic Advantage:</strong> More affordable, easier application, immediate high-gloss finish",
+                    "<strong>Graphene Advantage:</strong> Longer durability, better heat dissipation, superior self-cleaning",
+                    "<strong>Shared Benefits:</strong> Paint protection, easier maintenance, enhanced resale value"
                 ],
                 process: [
-                    "Full paint decontamination and preparation",
-                    "Multi-stage paint correction (if needed)",
-                    "Application of ceramic or graphene coating",
-                    "Curing process with infrared lamps",
-                    "Final inspection and aftercare instructions"
-                ]
+                    "72-hour paint decontamination (iron removal, clay bar)",
+                    "Multi-stage paint correction (swirl/scratch removal)",
+                    "Precision application in controlled environment",
+                    "48-hour curing with infrared assistance",
+                    "Final inspection with contact angle tester"
+                ],
+                science: {
+                    ceramic: "SiO₂ forms covalent bonds with paint's clear coat, creating semi-permanent glass-like layer",
+                    graphene: "Carbon nanostructures create conductive network that dissipates heat and flexes with temperature changes"
+                }
             },
             polish: {
                 title: "Full Polish",