jjmandog/jaysmobilewash at main

jaysmobilewash

Ctrl+K

1 contributor

History: 35 commits

jjmandog

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

f24ef07 verified about 1 month ago

.gitattributes

1.52 kB

initial commit about 2 months ago
README.md

216 Bytes

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jay's Mobile Wash - Premium Mobile Detailing in LA & OC</title> <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 glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #b530ff, 0 0 40px #b530ff; } to { text-shadow: 0 0 20px #fff, 0 0 30px #ff1744, 0 0 40px #ff1744, 0 0 50px #ff1744; } } .glow-text { animation: glow 1.5s ease-in-out infinite alternate; } .bg-gradient-radial { background: radial-gradient(circle, rgba(181,48,255,0.2) 0%, rgba(255,23,68,0.1) 70%, rgba(0,0,0,0) 100%); } .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); } .process-step:hover { transform: scale(1.1); background: linear-gradient(135deg, #b530ff 0%, #ff1744 100%); color: white; } .process-step:hover .step-number { color: white; } .gallery-item:hover { transform: scale(1.05); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .faq-answer.active { max-height: 500px; } .faq-arrow { transition: transform 0.3s; } .faq-arrow.active { transform: rotate(180deg); } .modal-content { animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .close-btn:hover { transform: rotate(90deg); } .before-after { 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%); } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .float-animation { animation: float 3s ease-in-out infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse-animation { animation: pulse 2s infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin-on-hover:hover { animation: spin 0.5s linear; } .bounce-on-hover:hover { animation: bounce 0.5s; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } </style> </head> <body class="bg-black text-gray-100 font-sans">  <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"> <div class="max-w-7xl mx-auto flex justify-between items-center"> <div class="text-white text-2xl font-bold tracking-tight">JAY'S MOBILE WASH</div>  <ul class="hidden md:flex space-x-8"> <li><a href="#home" class="text-white hover:text-gray-200 font-medium transition duration-300">Home</a></li> <li><a href="#services" class="text-white hover:text-gray-200 font-medium transition duration-300">Services</a></li> <li><a href="#products" class="text-white hover:text-gray-200 font-medium transition duration-300">Products</a></li> <li><a href="#process" class="text-white hover:text-gray-200 font-medium transition duration-300">Process</a></li> <li><a href="#gallery" class="text-white hover:text-gray-200 font-medium transition duration-300">Gallery</a></li> <li><a href="#faq" class="text-white hover:text-gray-200 font-medium transition duration-300">FAQ</a></li> <li><a href="#contact" class="text-white hover:text-gray-200 font-medium transition duration-300">Contact</a></li> </ul>  <button id="mobile-menu-button" class="md:hidden text-white text-3xl focus:outline-none"> ☰ </button> </div>  <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"> <ul class="space-y-4"> <li><a href="#home" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Home</a></li> <li><a href="#services" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Services</a></li> <li><a href="#products" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Products</a></li> <li><a href="#process" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Process</a></li> <li><a href="#gallery" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Gallery</a></li> <li><a href="#faq" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">FAQ</a></li> <li><a href="#contact" class="block text-white hover:text-gray-200 font-medium transition duration-300 py-2">Contact</a></li> </ul> </div> </nav>  <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"> <div class="absolute inset-0 bg-gradient-radial opacity-50"></div> <div class="max-w-7xl mx-auto relative z-10 text-center"> <h1 class="text-5xl md:text-7xl font-bold mb-6 glow-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"> <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"> <i class="fas fa-phone"></i> Call Now: 562-228-9429 </a> <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"> <i class="fas fa-list"></i> View Services & Pricing </a> </div> </div> </section>  <section id="services" class="py-16 bg-gray-100 text-gray-900 px-6"> <div class="max-w-7xl mx-auto"> <h2 class="text-4xl font-bold text-center mb-4 text-pink-600"> <i class="fas fa-gem mr-2"></i> Our Detailing Packages </h2> <p class="text-xl text-center mb-12 text-gray-600 max-w-3xl mx-auto"> Professional care for your vehicle, delivered to your location </p> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">  <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')"> <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> <p class="text-xl">Small Car: $70 | SUV: $80</p> </div> <div class="p-6"> <ul class="space-y-3 mb-6"> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Professional 2-step hand wash </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Wheel cleaning with ceramic SiO₂ </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Interior wipe-down and shine </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Thorough vacuuming </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Window cleaning inside & out </li> </ul> <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300"> Learn More <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div>  <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('luxury')"> <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> <p class="text-xl">Small Car: $130 | SUV: $140</p> </div> <div class="p-6"> <ul class="space-y-3 mb-6"> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Everything in Basic package </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Premium ceramic spray wax </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> SiO₂ interior treatment </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Vinyl & trim restoration </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> 3-month paint protection </li> </ul> <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300"> Learn More <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div>  <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')"> <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> <p class="text-xl">Small Car: $200 | SUV: $210</p> </div> <div class="p-6"> <ul class="space-y-3 mb-6"> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Everything in Luxury package </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Advanced ceramic hyper wax </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Interior steam cleaning </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Clay bar treatment </li> <li class="flex items-start"> <span class="text-green-500 mr-2">✓</span> Hydrophobic SiO₂ infused graphene sealant (6-month protection) </li> </ul> <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300"> Learn More <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> </div> </div> </section>  <section id="products" class="py-16 bg-black text-white px-6"> <div class="max-w-7xl mx-auto"> <h2 class="text-4xl font-bold text-center mb-4 text-pink-400"> <i class="fas fa-spray-can mr-2"></i> Professional Products We Use </h2> <p class="text-xl text-center mb-12 text-gray-400 max-w-3xl mx-auto"> Only the best for your vehicle </p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">  <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl"> <div class="text-center mb-4 float-animation"> <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"> </div> <h3 class="text-2xl font-bold text-center mb-3 text-pink-400">Koch Chemie</h3> <p class="text-gray-300 mb-4">Professional-grade detailing products.</p> <ul class="space-y-2 text-gray-400"> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> Premium cleaning compounds </li> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> High-performance polishes </li> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> Advanced protection products </li> </ul> </div>  <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl"> <div class="text-center mb-4 pulse-animation"> <img src="https://maderite.com/wp-content/uploads/2021/05/maderite-logo.png" alt="Maderite" class="h-32 w-32 mx-auto object-contain"> </div> <h3 class="text-2xl font-bold text-center mb-3 text-pink-400">Maderite</h3> <p class="text-gray-300 mb-4">Innovative ceramic coatings.</p> <ul class="space-y-2 text-gray-400"> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> Long-lasting protection </li> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> High-gloss finish </li> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> Hydrophobic properties </li> </ul> </div>  <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl"> <div class="text-center mb-4 spin-on-hover"> <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"> </div> <h3 class="text-2xl font-bold text-center mb-3 text-pink-400">Ultra Clean</h3> <p class="text-gray-300 mb-4">Professional cleaning solutions.</p> <ul class="space-y-2 text-gray-400"> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> Heavy-duty degreasers </li> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> pH-balanced formulas </li> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> Eco-friendly options </li> </ul> </div>  <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl"> <div class="text-center mb-4 bounce-on-hover"> <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"> </div> <h3 class="text-2xl font-bold text-center mb-3 text-pink-400">Ezpz Ceramic</h3> <p class="text-gray-300 mb-4">Easy-to-use ceramic coatings.</p> <ul class="space-y-2 text-gray-400"> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> User-friendly application </li> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> Professional-grade protection </li> <li class="flex items-start"> <span class="text-pink-400 mr-2">•</span> Long-lasting hydrophobic effect </li> </ul> </div> </div> </div> </section>  <section id="process" class="py-16 bg-gray-900 text-white px-6"> <div class="max-w-7xl mx-auto"> <h2 class="text-4xl font-bold text-center mb-4 text-pink-400"> <i class="fas fa-car mr-2"></i> Our Detail Process </h2> <p class="text-xl text-center mb-12 text-gray-400 max-w-3xl mx-auto"> Professional results in 5 simple steps </p> <div class="relative"> <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> <div class="flex flex-col md:flex-row justify-between items-center relative z-10">  <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)"> <div class="step-number text-3xl md:text-4xl font-bold text-pink-600">1</div> <div class="step-text text-sm md:text-base font-medium">Schedule</div> </div>  <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)"> <div class="step-number text-3xl md:text-4xl font-bold text-pink-600">2</div> <div class="step-text text-sm md:text-base font-medium">Arrival</div> </div>  <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)"> <div class="step-number text-3xl md:text-4xl font-bold text-pink-600">3</div> <div class="step-text text-sm md:text-base font-medium">Detail</div> </div>  <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)"> <div class="step-number text-3xl md:text-4xl font-bold text-pink-600">4</div> <div class="step-text text-sm md:text-base font-medium">Inspect</div> </div>  <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)"> <div class="step-number text-3xl md:text-4xl font-bold text-pink-600">5</div> <div class="step-text text-sm md:text-base font-medium">Protect</div> </div> </div> </div> </div> </section>  <section class="py-16 bg-gray-100 text-gray-900 px-6"> <div class="max-w-7xl mx-auto"> <h2 class="text-4xl font-bold text-center mb-4 text-pink-600"> <i class="fas fa-sparkles mr-2"></i> Premium Add-On Services </h2> <p class="text-xl text-center mb-12 text-gray-600 max-w-3xl mx-auto"> Enhance your detail with professional upgrades </p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">  <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')"> <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Ceramic/Graphene Coating</h4> <p class="addon-price text-pink-600 text-2xl font-bold mb-3">$400-$700</p> <p class="addon-description text-gray-600"> Choose between 2-year ceramic or 5-year graphene coating with warranty </p> </div>  <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')"> <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Full Polish</h4> <p class="addon-price text-pink-600 text-2xl font-bold mb-3">$220</p> <p class="addon-description text-gray-600"> Professional paint correction removes swirls and restores factory shine </p> </div>  <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')"> <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Iron Decontamination</h4> <p class="addon-price text-pink-600 text-2xl font-bold mb-3">Call for Price</p> <p class="addon-description text-gray-600"> Chemical treatment removes embedded brake dust and metal particles </p> </div>  <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')"> <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Clay Bar Treatment</h4> <p class="addon-price text-pink-600 text-2xl font-bold mb-3">Call for Price</p> <p class="addon-description text-gray-600"> Removes bonded contaminants for glass-smooth paint </p> </div>  <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')"> <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Steam Cleaning</h4> <p class="addon-price text-pink-600 text-2xl font-bold mb-3">Call for Price</p> <p class="addon-description text-gray-600"> Deep sanitization and odor removal using high-temperature steam </p> </div>  <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')"> <h4 class="addon-name text-xl font-bold mb-2 text-gray-800">Engine Bay Detail</h4> <p class="addon-price text-pink-600 text-2xl font-bold mb-3">Call for Price</p> <p class="addon-description text-gray-600"> Complete engine bay cleaning, degreasing, and dressing </p> </div> </div> </div> </section>  <section class="py-16 bg-gray-100 text-gray-900 px-6"> <div class="max-w-7xl mx-auto"> <h2 class="text-4xl font-bold text-center mb-4 text-pink-600"> <i class="fas fa-star mr-2"></i> Customer Reviews </h2> <p class="text-xl text-center mb-12 text-gray-600 max-w-3xl mx-auto"> What our clients say about us </p> <div class="max-w-4xl mx-auto">  <div class="bg-white p-8 rounded-2xl shadow-lg mb-8"> <div class="text-yellow-400 text-2xl mb-4">★★★★★</div> <p class="text-xl italic mb-6 leading-relaxed"> "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!" </p> <p class="font-bold text-pink-600">- Sarah M., Los Angeles</p> </div>  <div class="bg-white p-8 rounded-2xl shadow-lg"> <div class="text-yellow-400 text-2xl mb-4">★★★★★</div> <p class="text-xl italic mb-6 leading-relaxed"> "Professional, punctual, and perfectionist! Jay's ceramic coating service is top-notch. My car still beads water perfectly after 6 months!" </p> <p class="font-bold text-pink-600">- Mike T., Orange County</p> </div> </div> </div> </section>  <section id="gallery" class="py-16 bg-black text-white px-6"> <div class="max-w-7xl mx-auto"> <h2 class="text-4xl font-bold text-center mb-4 text-pink-400"> <i class="fas fa-camera mr-2"></i> Our Work Gallery </h2> <p class="text-xl text-center mb-12 text-gray-400 max-w-3xl mx-auto"> See the transformation we deliver </p> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">  </div> </div> </section>  <section id="faq" class="py-16 bg-gray-900 text-white px-6"> <div class="max-w-7xl mx-auto"> <h2 class="text-4xl font-bold text-center mb-4 text-pink-400"> <i class="fas fa-question-circle mr-2"></i> Frequently Asked Questions </h2> <p class="text-xl text-center mb-12 text-gray-400 max-w-3xl mx-auto"> Everything you need to know </p> <div class="max-w-4xl mx-auto">  <div class="faq-item bg-gray-800 rounded-xl overflow-hidden mb-4"> <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)"> <span class="text-xl font-bold">How long does each service take?</span> <span class="faq-arrow text-xl">▼</span> </div> <div class="faq-answer bg-gray-700"> <div class="p-5"> <p class="mb-2"><strong class="text-pink-400">Jay's Basic:</strong> 1.5-2 hours</p> <p class="mb-2"><strong class="text-pink-400">Jay's Luxury:</strong> 2.5-3 hours</p> <p class="mb-2"><strong class="text-pink-400">Jay's Max:</strong> 4-5 hours</p> <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> </div> </div> </div>  <div class="faq-item bg-gray-800 rounded-xl overflow-hidden mb-4"> <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)"> <span class="text-xl font-bold">What do I need to provide?</span> <span class="faq-arrow text-xl">▼</span> </div> <div class="faq-answer bg-gray-700"> <div class="p-5"> <p>Just access to water and electricity! We bring all professional equipment, products, and supplies. We need about 10 feet of space around your vehicle to work comfortably. If you don't have access to water/power, let us know - we have solutions!</p> </div> </div> </div>  <div class="faq-item bg-gray-800 rounded-xl overflow-hidden mb-4"> <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)"> <span class="text-xl font-bold">Do you offer any guarantees?</span> <span class="faq-arrow text-xl">▼</span> </div> <div class="faq-answer bg-gray-700"> <div class="p-5"> <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> </div> </div> </div>  <div class="faq-item bg-gray-800 rounded-xl overflow-hidden mb-4"> <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)"> <span class="text-xl font-bold">What areas do you service?</span> <span class="faq-arrow text-xl">▼</span> </div> <div class="faq-answer bg-gray-700"> <div class="p-5"> <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> </div> </div> </div>  <div class="faq-item bg-gray-800 rounded-xl overflow-hidden"> <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)"> <span class="text-xl font-bold">What's the difference between polish and wax?</span> <span class="faq-arrow text-xl">▼</span> </div> <div class="faq-answer bg-gray-700"> <div class="p-5"> <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> <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> </div> </div> </div> </div> </div> </section>  <section id="contact" class="py-16 bg-gray-100 text-gray-900 px-6"> <div class="max-w-7xl mx-auto"> <h2 class="text-4xl font-bold text-center mb-12 text-pink-600"> <i class="fas fa-phone-alt mr-2"></i> Book Your Detail Today! </h2> <div class="bg-gradient-to-r from-pink-600 to-purple-600 rounded-2xl p-8 md:p-12 text-white shadow-xl max-w-4xl mx-auto relative overflow-hidden"> <div class="phone-large text-4xl md:text-5xl font-bold text-center mb-8">562-228-9429</div> <div class="contact-info text-center text-lg mb-10"> <p class="mb-4"><strong>Business Hours:</strong></p> <p class="mb-4">Monday - Saturday: 6:00 AM - 7:00 PM<br> Sunday: 8:00 AM - 5:00 PM</p> <p><strong>Service Area:</strong> Los Angeles & Orange County</p> </div> <div class="flex flex-col md:flex-row justify-center gap-4 mb-10"> <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"> <i class="fas fa-phone"></i> Call Now </a> <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"> <i class="fas fa-comment-alt"></i> Text Us </a> </div> <div class="flex flex-col md:flex-row justify-center gap-6"> <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"> <i class="fab fa-instagram"></i> @jayswaxandwash </a> <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"> <i class="fab fa-yelp"></i> Jay's Mobile Wash </a> </div> </div> </div> </section>  <footer class="bg-gray-900 text-white py-12 px-6 text-center"> <div class="max-w-7xl mx-auto"> <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> </div> </footer>  <div id="modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden overflow-y-auto p-4"> <div class="modal-content bg-white rounded-2xl max-w-4xl mx-auto my-12 p-6 md:p-8 relative"> <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()"> × </button> <div id="modalContent" class="prose max-w-none"></div> </div> </div> <script> // Mobile menu toggle const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Smooth scrolling for navigation document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); // Close mobile menu if open mobileMenu.classList.add('hidden'); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Service Details Data const serviceDetails = { basic: { title: "JAY'S BASIC - Essential Clean & Shine", price: "Small Car: $70 | SUV: $80", 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.", features: [ { title: "Exterior Services", items: [ "Two-step hand wash process using pH-neutral shampoo", "Wheel and tire cleaning with specialized alkaline cleaners", "Ceramic SiO₂ wheel treatment for long-lasting protection", "Door jamb cleaning and detailing", "Window cleaning with streak-free formula", "Mirror and chrome polishing", "Basic tire dressing application", "Hand drying with premium microfiber towels" ] }, { title: "Interior Services", items: [ "Complete interior vacuuming including seats, carpets, and mats", "Cup holder and console cleaning", "Dashboard and trim wipe-down with UV protectant", "Interior window cleaning", "Basic air freshener application", "Seat surface cleaning (fabric or leather)", "Door panel cleaning and conditioning", "Trunk vacuuming" ] }, { title: "What Makes Us Different", items: [ "We use professional-grade products not available to consumers", "Attention to details others miss (vents, crevices, emblems)", "Proper technique prevents swirls and scratches", "We take our time - no rushed car wash experience", "Mobile convenience - we come to you", "Eco-friendly products safe for your family and pets" ] } ], process: "We start with a thorough rinse, followed by our two-bucket wash method to prevent contamination. While the vehicle is being washed, we clean the wheels and tires with specialized tools. After drying, we move to the interior for complete vacuuming and wiping of all surfaces. The service concludes with window cleaning and a final inspection.", 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." }, luxury: { title: "JAY'S LUXURY - Superior Protection & Gloss", price: "Small Car: $130 | SUV: $140", 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.", features: [ { title: "Everything from Basic Package PLUS", items: [ "All Basic package services included", "Upgraded products and additional protection" ] }, { title: "Exterior Upgrades", items: [ "Premium ceramic spray wax application (3-month protection)", "Paint decontamination with clay mitt on problem areas", "Exterior plastic and trim restoration", "Advanced tire dressing with long-lasting formula", "Water spot removal treatment", "Bug and tar removal", "Exhaust tip polishing", "Premium glass sealant application" ] }, { title: "Interior Upgrades", items: [ "SiO₂ interior treatment for dust-repelling properties", "Professional vinyl and plastic restoration", "Leather cleaning and conditioning (if applicable)", "Fabric protection spray application", "Deep cleaning of all vents with specialized tools", "Odor elimination treatment", "UV protection on all surfaces", "Premium air freshener options" ] }, { title: "Protection Benefits", items: [ "3-month paint protection against UV rays and contaminants", "Hydrophobic coating repels water and dirt", "Interior surfaces stay cleaner longer", "Reduces frequency of required washes", "Maintains resale value", "Makes future cleaning easier" ] } ], 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.", ideal: "Perfect for car enthusiasts, luxury vehicle owners, or anyone preparing for a special event. This package is recommended every 3-4 months to maintain optimal protection and appearance. Great for vehicles exposed to harsh weather or those wanting to maintain showroom condition." }, max: { title: "JAY'S MAX - Ultimate Showroom Finish", price: "Small Car: $200 | SUV: $210", description: "Our premium package delivers the ultimate in appearance and protection. This comprehensive service takes 4-5 hours and includes our most advanced treatments and techniques for discerning customers.", features: [ { title: "Everything from Luxury Package PLUS", items: [ "All Basic and Luxury services included", "Maximum protection and correction" ] }, { title: "Advanced Exterior Services", items: [ "Full clay bar treatment on entire vehicle", "Machine or hand application of ceramic hyper wax", "6-month foam sealant protection", "Paint overspray removal", "Water spot and mineral deposit removal", "Headlight restoration (minor to moderate oxidation)", "Chrome and metal polishing", "Engine bay basic detailing", "Wheel well cleaning and dressing", "Professional grade ceramic coating on wheels" ] }, { title: "Premium Interior Services", items: [ "Hot water extraction cleaning for carpets and seats", "Professional steam cleaning and sanitization", "Leather deep cleaning and protection", "Complete stain removal treatment", "Headliner cleaning", "Seat belt cleaning", "Pedal and floor mat restoration", "Premium odor elimination with ozone treatment", "Anti-bacterial treatment on all surfaces", "Premium leather conditioner with 6-month protection" ] }, { title: "Exclusive MAX Benefits", items: [ "6-month paint protection warranty", "Free touch-up service within 30 days", "Priority booking for future services", "Detailed service report with photos", "Care instructions and maintenance tips", "Premium microfiber towel gift", "10% discount on next service", "Access to exclusive ceramic coating upgrades" ] } ], process: "Our most thorough process begins with complete decontamination using clay bar treatment. We then apply our advanced ceramic hyper wax using machine or hand application for maximum durability. Interior receives steam cleaning treatment and all protection products. We conclude with engine bay detailing and comprehensive final inspection.", ideal: "Designed for luxury and exotic car owners, collectors, or anyone wanting the absolute best for their vehicle. Recommended for vehicles being prepared for sale, car shows, or those that haven't been detailed in 6+ months. This is our 'reset' package that brings vehicles back to their best possible condition." } }; const addonDetails = { ceramic: { title: "Ceramic & Graphene Coatings", price: "Ceramic: $400-$500 | Graphene: $600-$700", description: "Choose between our premium ceramic or advanced graphene coating solutions for long-term protection.", features: [ "<strong>Ceramic Pro 9H (2-year):</strong>", "- 9H hardness rating", "- Extreme hydrophobic effect", "- UV & chemical resistance", "- Enhanced gloss & depth", "- 2-year warranty", "", "<strong>Gtechniq CSL Graphene (5-year):</strong>", "- Graphene-enhanced formula", "- Superior heat dissipation", "- Self-cleaning properties", "- 5-year warranty", "- Higher durability", "", "Both include:", "- Professional paint correction", "- Surface decontamination", "- Controlled environment application", "- 24-hour curing period", "- Maintenance kit included" ], process: "We start with thorough decontamination and paint correction to ensure a perfect surface. The coating is then applied in a controlled environment using specialized applicators. Multiple layers are applied and leveled for maximum protection. Vehicle must not get wet for 24 hours after application.", maintenance: "Wash every 2-3 weeks with pH-neutral shampoo, avoid automatic car washes, use only microfiber towels, annual inspection recommended for warranty." }, polish: { title: "Full Paint Polish & Correction", price: "$220", description: "Professional paint correction removes imperfections and restores your paint's original brilliance.", features: [ "Removes swirl marks and spider webbing", "Eliminates light to medium scratches", "Removes oxidation and fading", "Restores color depth and clarity", "Creates mirror-like finish", "Machine polishing with multiple stages", "Different pad and compound combinations", "Paint thickness measurement", "Focused on problem areas", "Removes water spots and etching", "Preps surface for protection", "Includes final jeweling stage" ], difference: "Unlike wax which adds protection on top of paint, polish actually corrects the paint by removing a microscopic layer. Think of polish as 'sanding' and wax as 'sealing'. Polish fixes problems, wax prevents them.", recommended: "Recommended annually or when you notice swirls, scratches, or dull paint. Essential before ceramic coating application. Not needed if paint is already in good condition." }, iron: { title: "Iron Decontamination Treatment", price: "Call for Quote", description: "Chemical decontamination removes embedded iron particles that washing and claying can't eliminate.", features: [ "Dissolves brake dust particles embedded in paint", "Removes rail dust and industrial fallout", "Purple/red reaction shows contamination", "Safe for all paint types and colors", "Prevents rust spots from forming", "Essential for white and light-colored cars", "Improves paint smoothness", "Recommended every 6-12 months", "pH-balanced formula", "No scrubbing required", "Prepares surface for coating", "Includes wheel treatment" ], process: "Product is sprayed on cool, clean paint and allowed to dwell for 3-5 minutes. Purple/red bleeding indicates iron particles dissolving. Thoroughly rinsed and neutralized. Often combined with clay bar for maximum decontamination.", signs: "Your car needs this if: paint feels rough after washing, you see tiny rust spots, brake dust is heavy, or you park near railways/industrial areas." }, clay: { title: "Clay Bar Treatment", price: "Call for Quote", description: "Removes bonded contaminants that washing alone cannot eliminate, leaving paint smooth as glass.", features: [ "Removes embedded contaminants", "Eliminates paint roughness", "Removes tree sap and overspray", "Pulls out industrial fallout", "Essential before polishing or coating", "Makes paint feel incredibly smooth", "Improves wax/sealant bonding", "Includes multiple clay grades", "Full vehicle treatment", "Glass and chrome included", "Lubricant prevents marring", "Final wipe down included" ], process: "Using specialized clay and lubricant, we systematically treat every painted surface. The clay pulls contaminants out of the paint. We use different clay grades based on contamination level. Followed by protective wax or sealant application.", frequency: "Recommended every 6-12 months or when paint feels rough. Essential before any paint correction or ceramic coating. More frequent for cars parked outside." }, steam: { title: "Professional Steam Cleaning", price: "Call for Quote", description: "High-temperature steam deep cleans and sanitizes without harsh chemicals.", features: [ "Kills 99.9% of bacteria and germs", "Removes stubborn stains and odors", "Safe for all interior surfaces", "No harsh chemicals needed", "Perfect for allergies and sensitivities", "Reaches tight spaces and crevices", "Removes gum and sticky substances", "Sanitizes air vents and ducts", "Pet hair and dander removal", "Smoke odor elimination", "Quick drying time", "Eco-friendly process" ], applications: "Ideal for: families with children, pet owners, allergy sufferers, vehicles with odor issues, ride-share vehicles, or anyone wanting chemical-free cleaning.", areas: "We steam clean: seats, carpets, headliners, door panels, cup holders, vents, seat belts, trunk areas, and any other interior surface." }, engine: { title: "Engine Bay Detailing", price: "Call for Quote", description: "Professional engine bay cleaning improves appearance, helps identify issues, and maintains value.", features: [ "Safe degreasing process", "Protects sensitive components", "Reveals leaks and issues early", "Improves resale value", "Makes maintenance easier", "Prevents corrosion", "Professional dressing applied", "Battery terminal cleaning", "Plastic and rubber conditioning", "Removes road salt and grime", "Before/after photos provided", "Safe for all engine types" ], process: "We protect sensitive components, apply specialized degreasers, use various brushes for agitation, rinse carefully with low pressure, blow dry thoroughly, and apply dressing for protection and appearance.", benefits: "Clean engines run cooler, problems are spotted earlier, maintains warranty requirements, essential for car shows or sales, and provides pride of ownership." } }; const processDetails = { 1: { title: "Schedule Your Service", description: "Booking your detail is easy and convenient!", details: [ "Call or text us at 562-228-9429", "We'll discuss your vehicle's needs and recommend the right package", "Choose a date and time that works for you", "We service 7 days a week with flexible hours", "Receive confirmation text with arrival window", "No deposit required - pay after service", "Free quotes available over the phone", "Same-day service often available" ] }, 2: { title: "We Arrive Prepared", description: "Our mobile unit comes fully equipped", details: [ "Professional van with all equipment and supplies", "Generator for power if needed", "Water tank for locations without water access", "Commercial-grade vacuum and extractor", "Professional polishers and steam cleaners", "Over 50 different products for every surface", "Uniformed and insured technicians", "We text when we're 15 minutes away" ] }, 3: { title: "Professional Detailing", description: "We perform your selected service with meticulous attention", details: [ "Follow systematic process for consistent results", "Use premium products not available in stores", "Take time needed - never rush quality", "Address any specific concerns you have", "Keep you updated on progress", "Document any existing damage", "Work in shade when possible", "Maintain clean work environment" ] }, 4: { title: "Quality Inspection", description: "We inspect every inch before calling it complete", details: [ "Systematic 50-point inspection checklist", "Check all areas in different lighting", "Ensure windows are streak-free", "Verify all products properly applied", "Touch up any missed spots", "Final wipe down of all surfaces", "Walk through vehicle with you", "Address any concerns immediately" ] }, 5: { title: "Protection & Care Tips", description: "We help you maintain that fresh-detailed look", details: [ "Provide care instructions for your service", "Recommend maintenance schedule", "Leave complimentary microfiber towel", "Suggest products for touch-ups", "Schedule your next appointment", "Available for questions anytime", "Follow up to ensure satisfaction", "Loyalty program for regular customers" ] } }; // Modal functions function showDetails(service) { const details = serviceDetails[service]; const modalContent = document.getElementById('modalContent'); let featuresHTML = ''; details.features.forEach(section => { featuresHTML += ` <h3 class="text-xl font-bold mt-6 mb-3 text-purple-600">${section.title}</h3> <ul class="list-none pl-0"> ${section.items.map(item => ` <li class="py-2 border-b border-gray-200 flex items-start"> <span class="text-green-500 font-bold mr-2">✓</span> ${item} </li> `).join('')} </ul> `; }); modalContent.innerHTML = ` <h2 class="text-3xl font-bold mb-4 text-pink-600">${details.title}</h2> <p class="text-2xl font-bold mb-6 text-purple-600">${details.price}</p> <p class="text-lg mb-8 leading-relaxed">${details.description}</p> ${featuresHTML} <div class="bg-gray-100 p-6 rounded-xl mt-8"> <h3 class="text-xl font-bold mb-3 text-pink-600">Our Process</h3> <p class="leading-relaxed">${details.process}</p> </div> <div class="bg-blue-50 p-6 rounded-xl mt-6"> <h3 class="text-xl font-bold mb-3 text-blue-600">Who Is This For?</h3> <p class="leading-relaxed">${details.ideal}</p> </div> <div class="text-center mt-10"> <a href="tel:562-228-9429" class="inline-block bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-full text-lg transition duration-300"> <i class="fas fa-phone mr-2"></i> Book This Package Now </a> </div> `; document.getElementById('modal').classList.remove('hidden'); } function showAddonDetail(addon) { const details = addonDetails[addon]; const modalContent = document.getElementById('modalContent'); let content = ` <h2 class="text-3xl font-bold mb-4 text-pink-600">${details.title}</h2> <p class="text-2xl font-bold mb-6 text-purple-600">${details.price}</p> <p class="text-lg mb-8 leading-relaxed">${details.description}</p> <h3 class="text-xl font-bold mb-3 text-purple-600">Features & Benefits</h3> <ul class="list-none pl-0"> ${details.features.map(feature => ` <li class="py-2 border-b border-gray-200 flex items-start"> <span class="text-green-500 font-bold mr-2">✓</span> ${feature} </li> `).join('')} </ul> `; if (details.process) { content += ` <div class="bg-gray-100 p-6 rounded-xl mt-8"> <h3 class="text-xl font-bold mb-3 text-pink-600">Process</h3> <p class="leading-relaxed">${details.process}</p> </div> `; } if (details.maintenance) { content += ` <div class="bg-yellow-50 p-6 rounded-xl mt-6"> <h3 class="text-xl font-bold mb-3 text-yellow-600">Maintenance Tips</h3> <p class="leading-relaxed">${details.maintenance}</p> </div> `; } if (details.difference) { content += ` <div class="bg-blue-50 p-6 rounded-xl mt-6"> <h3 class="text-xl font-bold mb-3 text-blue-600">Polish vs Wax</h3> <p class="leading-relaxed">${details.difference}</p> </div> `; } content += ` <div class="text-center mt-10"> <a href="tel:562-228-9429" class="inline-block bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-full text-lg transition duration-300"> <i class="fas fa-phone mr-2"></i> Add This Service </a> </div> `; modalContent.innerHTML = content; document.getElementById('modal').classList.remove('hidden'); } function showProcessDetail(step) { const details = processDetails[step]; const modalContent = document.getElementById('modalContent'); modalContent.innerHTML = ` <h2 class="text-3xl font-bold mb-4 text-pink-600">Step ${step}: ${details.title}</h2> <p class="text-lg mb-8 leading-relaxed">${details.description}</p> <ul class="list-none pl-0"> ${details.details.map(detail => ` <li class="py-3 border-b border-gray-200 flex items-start"> <span class="text-green-500 font-bold mr-2">✓</span> ${detail} </li> `).join('')} </ul> <div class="text-center mt-10"> <a href="tel:562-228-9429" class="inline-block bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-full text-lg transition duration-300"> <i class="fas fa-phone mr-2"></i> Schedule Your Detail </a> </div> `; document.getElementById('modal').classList.remove('hidden'); } function closeModal() { document.getElementById('modal').classList.add('hidden'); } function toggleFAQ(element) { const answer = element.nextElementSibling; const arrow = element.querySelector('.faq-arrow'); answer.classList.toggle('active'); arrow.classList.toggle('active'); } // Close modal when clicking outside window.onclick = function(event) { const modal = document.getElementById('modal'); if (event.target == modal) { closeModal(); } } </script> </body> </html> - Initial Deployment about 2 months ago
index.html

112 kB

MAKE CUSTOM PACKAGES BOX LONG WAYS SO IT COVERED MORE OF THE PAGE - Follow Up Deployment about 1 month ago
style.css

388 Bytes

initial commit about 2 months ago