Premium Bike Service Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MOTO MASTERS - Premium Bike Service & Repair</title> <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#ea580c', secondary: '#1c1917', accent: '#292524', gold: '#f59e0b', dark: '#0c0a09', orange: '#f97316', red: '#dc2626' } } } } </script> <style> * { font-family: 'Rajdhani', sans-serif; scroll-behavior: smooth; } body { overflow-x: hidden; } /* Advanced Animations */ @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-15px) rotate(0.5deg); } 66% { transform: translateY(-8px) rotate(-0.5deg); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(14, 165, 233, 0.3); transform: scale(1); } 50% { box-shadow: 0 0 40px rgba(14, 165, 233, 0.6); transform: scale(1.05); } } @keyframes slideInFromLeft { 0% { transform: translateX(-100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slideInFromRight { 0% { transform: translateX(100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slideInFromBottom { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes slideInFromTop { 0% { transform: translateY(-100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes zoomIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes rotateIn { 0% { transform: rotate(-180deg) scale(0.5); opacity: 0; } 100% { transform: rotate(0deg) scale(1); opacity: 1; } } @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } @keyframes flipIn { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes text-glow { 0%, 100% { text-shadow: 0 0 10px rgba(14, 165, 233, 0.5); } 50% { text-shadow: 0 0 20px rgba(14, 165, 233, 0.8), 0 0 30px rgba(14, 165, 233, 0.6); } } @keyframes car-wash { 0% { transform: translateX(-100px) scale(0.8); opacity: 0; } 50% { transform: translateX(0) scale(1.1); opacity: 0.8; } 100% { transform: translateX(50px) scale(1); opacity: 1; } } @keyframes water-drop { 0% { transform: translateY(-20px) scale(0); opacity: 0; } 50% { transform: translateY(10px) scale(1.2); opacity: 0.8; } 100% { transform: translateY(30px) scale(1); opacity: 0; } } @keyframes shine-effect { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Animation Classes */ .float-animation { animation: float 6s ease-in-out infinite; } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } .slide-in-left { animation: slideInFromLeft 0.8s ease-out forwards; opacity: 0; } .slide-in-right { animation: slideInFromRight 0.8s ease-out forwards; opacity: 0; } .slide-in-bottom { animation: slideInFromBottom 0.8s ease-out forwards; opacity: 0; } .slide-in-top { animation: slideInFromTop 0.8s ease-out forwards; opacity: 0; } .zoom-in { animation: zoomIn 0.8s ease-out forwards; opacity: 0; } .rotate-in { animation: rotateIn 1s ease-out forwards; opacity: 0; } .bounce-in { animation: bounceIn 0.8s ease-out forwards; opacity: 0; } .flip-in { animation: flipIn 0.8s ease-out forwards; opacity: 0; } .car-wash-animation { animation: car-wash 2s ease-out forwards; } .water-drop { animation: water-drop 3s ease-in-out infinite; } .gradient-bg { background: linear-gradient(-45deg, #ea580c, #f97316, #f59e0b, #dc2626); background-size: 400% 400%; animation: gradient-shift 4s ease infinite; } .text-glow { animation: text-glow 2s ease-in-out infinite; } .card-3d-hover { transition: all 0.3s ease; transform-style: preserve-3d; } .card-3d-hover:hover { transform: translateY(-15px) rotateX(5deg); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); } /* Parallax Effect */ .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #1e293b; } ::-webkit-scrollbar-thumb { background: linear-gradient(45deg, #0ea5e9, #06b6d4); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(45deg, #06b6d4, #0ea5e9); } /* Morphing Button */ .morph-btn { position: relative; overflow: hidden; transition: all 0.3s ease; } .morph-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .morph-btn:hover::before { left: 100%; } /* Gear Animation */ .bubble { position: absolute; background: rgba(234, 88, 12, 0.1); border-radius: 50%; animation: float 8s linear infinite; } /* Loading Animation */ .loading-bar { width: 0%; height: 4px; background: linear-gradient(90deg, #0ea5e9, #06b6d4); transition: width 2s ease; } .loading-bar.loaded { width: 100%; } /* Intersection Observer Classes */ .fade-in-up { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .fade-in-up.visible { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease; } .fade-in-left.visible { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(50px); transition: all 0.8s ease; } .fade-in-right.visible { opacity: 1; transform: translateX(0); } .scale-up { opacity: 0; transform: scale(0.8); transition: all 0.8s ease; } .scale-up.visible { opacity: 1; transform: scale(1); } /* Advanced Hover Effects */ .hover-lift { transition: all 0.3s ease; } .hover-lift:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(14, 165, 233, 0.2); } .hover-glow { transition: all 0.3s ease; } .hover-glow:hover { box-shadow: 0 0 30px rgba(14, 165, 233, 0.4); transform: scale(1.05); } /* Shine Effect */ .shine-effect { position: relative; overflow: hidden; } .shine-effect::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: shine-effect 3s ease-in-out infinite; } /* Staggered Animation */ .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.2s; } .stagger-3 { animation-delay: 0.3s; } .stagger-4 { animation-delay: 0.4s; } .stagger-5 { animation-delay: 0.5s; } .stagger-6 { animation-delay: 0.6s; } /* Car Specific Animations */ .car-icon { transition: all 0.3s ease; } .car-icon:hover { transform: translateX(10px); color: #0ea5e9; } /* Gear Effect */ .gear-effect { background: linear-gradient(45deg, #ea580c, #f97316, #f59e0b); background-size: 200% 200%; animation: gradient-shift 3s ease infinite; } /* Mobile Responsive Animations */ @media (max-width: 768px) { .float-animation { animation-duration: 4s; } .card-3d-hover:hover { transform: translateY(-5px); } } /* Service Card Hover */ .service-card { background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(249, 115, 22, 0.1)); backdrop-filter: blur(10px); border: 1px solid rgba(234, 88, 12, 0.2); } .service-card:hover { background: linear-gradient(135deg, rgba(234, 88, 12, 0.2), rgba(249, 115, 22, 0.2)); border-color: rgba(234, 88, 12, 0.4); } </style> </head> <body class="bg-dark text-white"> <!-- Bubble Background --> <div class="fixed inset-0 z-0 overflow-hidden"> <div class="bubble" style="left: 10%; width: 20px; height: 20px; animation-delay: 0s;"></div> <div class="bubble" style="left: 20%; width: 15px; height: 15px; animation-delay: 2s;"></div> <div class="bubble" style="left: 35%; width: 25px; height: 25px; animation-delay: 4s;"></div> <div class="bubble" style="left: 50%; width: 18px; height: 18px; animation-delay: 1s;"></div> <div class="bubble" style="left: 65%; width: 22px; height: 22px; animation-delay: 3s;"></div> <div class="bubble" style="left: 80%; width: 16px; height: 16px; animation-delay: 5s;"></div> <div class="bubble" style="left: 90%; width: 24px; height: 24px; animation-delay: 2.5s;"></div> </div> <!-- Loading Bar --> <div class="fixed top-0 left-0 w-full z-50"> <div class="loading-bar" id="loadingBar"></div> </div> <!-- Navigation --> <nav class="fixed w-full z-40 transition-all duration-300" id="navbar"> <div class="container mx-auto px-6 py-4"> <div class="flex justify-between items-center"> <div class="text-3xl font-bold text-glow"> <i class="fas fa-motorcycle mr-2 text-primary"></i> <span class="gradient-bg bg-clip-text text-transparent">MOTO MASTERS</span> </div> <div class="hidden lg:flex space-x-8"> <a href="#home" class="nav-link text-white hover:text-primary transition-all duration-300 relative">Home</a> <a href="#about" class="nav-link text-white hover:text-primary transition-all duration-300 relative">About</a> <a href="#services" class="nav-link text-white hover:text-primary transition-all duration-300 relative">Services</a> <a href="#contact" class="nav-link text-white hover:text-primary transition-all duration-300 relative">Contact</a> </div> <button class="lg:hidden text-white text-2xl" id="mobileMenuBtn"> <i class="fas fa-bars"></i> </button> </div> </div> <!-- Mobile Menu --> <div class="lg:hidden bg-secondary/95 backdrop-blur-lg hidden" id="mobileMenu"> <div class="container mx-auto px-6 py-4"> <div class="flex flex-col space-y-4"> <a href="#home" class="text-white hover:text-primary transition-colors">Home</a> <a href="#about" class="text-white hover:text-primary transition-colors">About</a> <a href="#services" class="text-white hover:text-primary transition-colors">Services</a> <a href="#contact" class="text-white hover:text-primary transition-colors">Contact</a> </div> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="min-h-screen flex items-center relative overflow-hidden"> <div class="absolute inset-0 z-0"> <img src="https://plus.unsplash.com/premium_photo-1675810094933-14233747e1b5?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Bike Service Hero" class="w-full h-full object-cover"> <div class="absolute inset-0 bg-gradient-to-r from-dark/90 via-secondary/80 to-accent/70"></div> </div> <div class="container mx-auto px-6 relative z-10"> <div class="grid lg:grid-cols-2 gap-12 items-center"> <div class="space-y-8"> <div class="slide-in-left"> <h1 class="text-3xl lg:text-5xl font-black leading-tight"> <span class="block text-glow">EXPERT</span> <span class="block gradient-bg bg-clip-text text-transparent">BIKE</span> <span class="block text-primary">SERVICE</span> </h1> </div> <div class="slide-in-left stagger-2"> <p class="text-xl lg:text-2xl text-gray-300 max-w-lg leading-relaxed"> Professional motorcycle service and repair with certified mechanics, genuine parts, and cutting-edge diagnostic tools. </p> </div> <div class="flex flex-col sm:flex-row gap-6 slide-in-left stagger-3"> <button class="morph-btn bg-gradient-to-r from-primary to-orange text-white px-8 py-4 rounded-full font-bold text-lg hover:shadow-2xl transition-all duration-300 pulse-glow"> <i class="fas fa-wrench mr-2"></i>BOOK SERVICE </button> <button class="morph-btn border-2 border-primary text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-primary hover:text-white transition-all duration-300"> <i class="fas fa-phone mr-2"></i>CALL NOW </button> </div> <div class="flex space-x-8 slide-in-left stagger-4"> <div class="text-center"> <div class="text-3xl font-bold text-primary number-counter">3000+</div> <div class="text-gray-400">Bikes Serviced</div> </div> <div class="text-center"> <div class="text-3xl font-bold text-primary number-counter">20+</div> <div class="text-gray-400">Services</div> </div> <div class="text-center"> <div class="text-3xl font-bold text-primary number-counter">24/7</div> <div class="text-gray-400">Emergency</div> </div> </div> </div> <div class="relative slide-in-right"> <div class="float-animation"> <img src="https://images.pexels.com/photos/12741638/pexels-photo-12741638.jpeg" alt="Motorcycle Service" class="rounded-3xl shadow-2xl hover-glow shine-effect"> </div> <div class="absolute -top-10 -right-10 w-20 h-20 bg-primary rounded-full flex items-center justify-center pulse-glow"> <i class="fas fa-tools text-2xl text-white"></i> </div> <div class="absolute -bottom-10 -left-10 w-16 h-16 bg-gold rounded-full flex items-center justify-center float-animation"> <i class="fas fa-cog text-xl text-dark"></i> </div> <!-- Gear animations --> <div class="absolute top-20 left-10 w-3 h-3 bg-primary rounded-full" style="animation: spin 3s linear infinite;"></div> <div class="absolute top-32 right-20 w-4 h-4 bg-orange rounded-full" style="animation: spin 2s linear infinite reverse; animation-delay: 1s;"></div> <div class="absolute top-40 left-32 w-2 h-2 bg-gold rounded-full" style="animation: spin 4s linear infinite; animation-delay: 2s;"></div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="py-20 bg-gradient-to-b from-dark to-secondary relative"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-5xl lg:text-6xl font-black mb-6"> WHY CHOOSE <span class="gradient-bg bg-clip-text text-transparent">MOTO MASTERS</span>? </h2> <p class="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"> We're not just a repair shop - we're motorcycle specialists. Using advanced diagnostics, genuine parts, and expert craftsmanship for every bike. </p> </div> <div class="grid lg:grid-cols-2 gap-16 items-center mb-20"> <div class="fade-in-left"> <div class="relative"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Professional Bike Service" class="rounded-3xl shadow-2xl hover-lift"> <div class="absolute inset-0 bg-gradient-to-t from-primary/20 to-transparent rounded-3xl"></div> </div> </div> <div class="space-y-8 fade-in-right"> <div class="service-card flex items-start space-x-6 hover-lift p-6 rounded-2xl transition-all duration-300"> <div class="bg-gradient-to-r from-primary to-orange p-4 rounded-2xl"> <i class="fas fa-certificate text-2xl text-white"></i> </div> <div> <h3 class="text-2xl font-bold mb-3 text-primary">Certified Mechanics</h3> <p class="text-gray-300 leading-relaxed">ASE certified technicians with specialized training in all major motorcycle brands.</p> </div> </div> <div class="service-card flex items-start space-x-6 hover-lift p-6 rounded-2xl transition-all duration-300"> <div class="bg-gradient-to-r from-primary to-orange p-4 rounded-2xl"> <i class="fas fa-microchip text-2xl text-white"></i> </div> <div> <h3 class="text-2xl font-bold mb-3 text-primary">Advanced Diagnostics</h3> <p class="text-gray-300 leading-relaxed">State-of-the-art diagnostic equipment for accurate troubleshooting and repairs.</p> </div> </div> <div class="service-card flex items-start space-x-6 hover-lift p-6 rounded-2xl transition-all duration-300"> <div class="bg-gradient-to-r from-primary to-orange p-4 rounded-2xl"> <i class="fas fa-shield-alt text-2xl text-white"></i> </div> <div> <h3 class="text-2xl font-bold mb-3 text-primary">Genuine Parts</h3> <p class="text-gray-300 leading-relaxed">OEM and high-quality aftermarket parts with comprehensive warranty coverage.</p> </div> </div> </div> </div> <!-- Stats Section --> <div class="grid grid-cols-2 lg:grid-cols-4 gap-8 fade-in-up"> <div class="text-center p-8 rounded-2xl bg-gradient-to-b from-primary/20 to-transparent hover-glow"> <div class="text-4xl lg:text-5xl font-black text-primary mb-2">99%</div> <div class="text-gray-300 font-semibold">Satisfaction Rate</div> </div> <div class="text-center p-8 rounded-2xl bg-gradient-to-b from-primary/20 to-transparent hover-glow"> <div class="text-4xl lg:text-5xl font-black text-primary mb-2">24/7</div> <div class="text-gray-300 font-semibold">Service</div> </div> <div class="text-center p-8 rounded-2xl bg-gradient-to-b from-primary/20 to-transparent hover-glow"> <div class="text-4xl lg:text-5xl font-black text-primary mb-2">5★</div> <div class="text-gray-300 font-semibold">Rating</div> </div> <div class="text-center p-8 rounded-2xl bg-gradient-to-b from-primary/20 to-transparent hover-glow"> <div class="text-4xl lg:text-5xl font-black text-primary mb-2">10+</div> <div class="text-gray-300 font-semibold">Years Experience</div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-20 bg-gradient-to-b from-secondary to-accent relative"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-5xl lg:text-6xl font-black mb-6"> OUR <span class="gradient-bg bg-clip-text text-transparent">SERVICES</span> </h2> <p class="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"> From routine maintenance to major repairs, we provide comprehensive motorcycle services for all makes and models. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="card-3d-hover bg-gradient-to-b from-dark to-secondary rounded-3xl overflow-hidden shadow-2xl scale-up stagger-1"> <div class="relative"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Exterior Wash" class="w-full h-64 object-cover"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent"></div> <div class="absolute top-4 right-4 bg-primary px-3 py-1 rounded-full text-sm font-bold"> POPULAR </div> </div> <div class="p-8"> <h3 class="text-2xl font-bold mb-4 text-primary">Exterior Wash</h3> <p class="text-gray-300 mb-6 leading-relaxed">Complete exterior cleaning with premium soap, tire shine, and protective wax coating.</p> <div class="flex justify-between items-center mb-6"> <span class="text-primary font-bold text-2xl">$25</span> <div class="flex text-gold"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> <button class="w-full morph-btn bg-gradient-to-r from-primary to-cyan-500 text-white py-3 rounded-full font-bold hover:shadow-xl transition-all duration-300"> BOOK SERVICE </button> </div> </div> <div class="card-3d-hover bg-gradient-to-b from-dark to-secondary rounded-3xl overflow-hidden shadow-2xl scale-up stagger-2"> <div class="relative"> <img src="https://images.pexels.com/photos/12741638/pexels-photo-12741638.jpeg" alt="Interior Detailing" class="w-full h-64 object-cover"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent"></div> <div class="absolute top-4 right-4 bg-teal text-white px-3 py-1 rounded-full text-sm font-bold"> PREMIUM </div> </div> <div class="p-8"> <h3 class="text-2xl font-bold mb-4 text-primary">Interior Detailing</h3> <p class="text-gray-300 mb-6 leading-relaxed">Deep cleaning of seats, carpets, dashboard, and all interior surfaces with UV protection.</p> <div class="flex justify-between items-center mb-6"> <span class="text-primary font-bold text-2xl">$45</span> <div class="flex text-gold"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> <button class="w-full morph-btn bg-gradient-to-r from-primary to-cyan-500 text-white py-3 rounded-full font-bold hover:shadow-xl transition-all duration-300"> BOOK SERVICE </button> </div> </div> <div class="card-3d-hover bg-gradient-to-b from-dark to-secondary rounded-3xl overflow-hidden shadow-2xl scale-up stagger-3"> <div class="relative"> <img src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Full Detailing" class="w-full h-64 object-cover"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent"></div> <div class="absolute top-4 right-4 bg-gold text-dark px-3 py-1 rounded-full text-sm font-bold"> LUXURY </div> </div> <div class="p-8"> <h3 class="text-2xl font-bold mb-4 text-primary">Full Detailing</h3> <p class="text-gray-300 mb-6 leading-relaxed">Complete interior and exterior detailing with ceramic coating and paint correction.</p> <div class="flex justify-between items-center mb-6"> <span class="text-primary font-bold text-2xl">$85</span> <div class="flex text-gold"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> <button class="w-full morph-btn bg-gradient-to-r from-primary to-cyan-500 text-white py-3 rounded-full font-bold hover:shadow-xl transition-all duration-300"> BOOK SERVICE </button> </div> </div> <div class="card-3d-hover bg-gradient-to-b from-dark to-secondary rounded-3xl overflow-hidden shadow-2xl scale-up stagger-4"> <div class="relative"> <img src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Engine Cleaning" class="w-full h-64 object-cover"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent"></div> <div class="absolute top-4 right-4 bg-red-500 px-3 py-1 rounded-full text-sm font-bold"> SPECIALTY </div> </div> <div class="p-8"> <h3 class="text-2xl font-bold mb-4 text-primary">Engine Cleaning</h3> <p class="text-gray-300 mb-6 leading-relaxed">Professional engine bay cleaning and degreasing for optimal performance and appearance.</p> <div class="flex justify-between items-center mb-6"> <span class="text-primary font-bold text-2xl">$35</span> <div class="flex text-gold"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> <button class="w-full morph-btn bg-gradient-to-r from-primary to-cyan-500 text-white py-3 rounded-full font-bold hover:shadow-xl transition-all duration-300"> BOOK SERVICE </button> </div> </div> <div class="card-3d-hover bg-gradient-to-b from-dark to-secondary rounded-3xl overflow-hidden shadow-2xl scale-up stagger-5"> <div class="relative"> <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Paint Protection" class="w-full h-64 object-cover"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent"></div> <div class="absolute top-4 right-4 bg-purple-500 px-3 py-1 rounded-full text-sm font-bold"> ADVANCED </div> </div> <div class="p-8"> <h3 class="text-2xl font-bold mb-4 text-primary">Paint Protection</h3> <p class="text-gray-300 mb-6 leading-relaxed">Ceramic coating application for long-lasting paint protection and enhanced shine.</p> <div class="flex justify-between items-center mb-6"> <span class="text-primary font-bold text-2xl">$150</span> <div class="flex text-gold"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> <button class="w-full morph-btn bg-gradient-to-r from-primary to-cyan-500 text-white py-3 rounded-full font-bold hover:shadow-xl transition-all duration-300"> BOOK SERVICE </button> </div> </div> <div class="card-3d-hover bg-gradient-to-b from-dark to-secondary rounded-3xl overflow-hidden shadow-2xl scale-up stagger-6"> <div class="relative"> <img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Mobile Service" class="w-full h-64 object-cover"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent"></div> <div class="absolute top-4 right-4 bg-green-500 px-3 py-1 rounded-full text-sm font-bold"> CONVENIENT </div> </div> <div class="p-8"> <h3 class="text-2xl font-bold mb-4 text-primary">Mobile Service</h3> <p class="text-gray-300 mb-6 leading-relaxed">We come to you! Professional car washing at your home or office location.</p> <div class="flex justify-between items-center mb-6"> <span class="text-primary font-bold text-2xl">+$15</span> <div class="flex text-gold"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> <button class="w-full morph-btn bg-gradient-to-r from-primary to-cyan-500 text-white py-3 rounded-full font-bold hover:shadow-xl transition-all duration-300"> BOOK SERVICE </button> </div> </div> </div> </div> </section> <!-- Packages Section --> <section id="packages" class="py-20 bg-gradient-to-b from-accent to-dark relative"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-5xl lg:text-6xl font-black mb-6"> MEMBERSHIP <span class="gradient-bg bg-clip-text text-transparent">PACKAGES</span> </h2> <p class="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"> Save money with our membership packages designed for regular car care enthusiasts. </p> </div> <div class="grid lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> <div class="bg-gradient-to-b from-dark to-secondary rounded-3xl p-8 shadow-2xl hover-lift scale-up stagger-1"> <div class="text-center mb-8"> <h3 class="text-2xl font-bold mb-4 text-primary">BASIC WASH</h3> <div class="text-5xl font-black text-white mb-2">$39<span class="text-lg text-gray-400">/mo</span></div> <p class="text-gray-400">Perfect for regular maintenance</p> </div> <ul class="space-y-4 mb-8"> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-3"></i><span class="text-gray-300">4 exterior washes per month</span></li> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-3"></i><span class="text-gray-300">Tire shine included</span></li> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-3"></i><span class="text-gray-300">Basic vacuum service</span></li> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-3"></i><span class="text-gray-300">Mobile app booking</span></li> <li class="flex items-center"><i class="fas fa-times text-red-500 mr-3"></i><span class="text-gray-500">Interior detailing</span></li> <li class="flex items-center"><i class="fas fa-times text-red-500 mr-3"></i><span class="text-gray-500">Wax protection</span></li> </ul> <button class="w-full morph-btn bg-gradient-to-r from-gray-600 to-gray-700 text-white py-4 rounded-full font-bold hover:from-primary hover:to-cyan-500 transition-all duration-300"> CHOOSE BASIC </button> </div> <div class="bg-gradient-to-b from-primary to-cyan-500 rounded-3xl p-8 shadow-2xl hover-lift scale-up stagger-2 transform lg:scale-110 relative"> <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gold text-dark px-6 py-2 rounded-full font-bold text-sm"> MOST POPULAR </div> <div class="text-center mb-8"> <h3 class="text-2xl font-bold mb-4 text-white">PREMIUM CARE</h3> <div class="text-5xl font-black text-white mb-2">$79<span class="text-lg text-blue-200">/mo</span></div> <p class="text-blue-200">Complete car care solution</p> </div> <ul class="space-y-4 mb-8"> <li class="flex items-center"><i class="fas fa-check text-green-300 mr-3"></i><span class="text-white">Unlimited exterior washes</span></li> <li class="flex items-center"><i class="fas fa-check text-green-300 mr-3"></i><span class="text-white">2 interior details per month</span></li> <li class="flex items-center"><i class="fas fa-check text-green-300 mr-3"></i><span class="text-white">Monthly wax protection</span></li> <li class="flex items-center"><i class="fas fa-check text-green-300 mr-3"></i><span class="text-white">Priority booking</span></li> <li class="flex items-center"><i class="fas fa-check text-green-300 mr-3"></i><span class="text-white">Free mobile service</span></li> <li class="flex items-center"><i class="fas fa-check text-green-300 mr-3"></i><span class="text-white">24/7 customer support</span></li> </ul> <button class="w-full morph-btn bg-white text-primary py-4 rounded-full font-bold hover:bg-gold hover:text-dark transition-all duration-300"> CHOOSE PREMIUM </button> </div> <div class="bg-gradient-to-b from-dark to-secondary rounded-3xl p-8 shadow-2xl hover-lift scale-up stagger-3"> <div class="text-center mb-8"> <h3 class="text-2xl font-bold mb-4 text-primary">LUXURY ELITE</h3> <div class="text-5xl font-black text-white mb-2">$149<span class="text-lg text-gray-400">/mo</span></div> <p class="text-gray-400">Ultimate car care experience</p> </div> <ul class="space-y-4 mb-8"> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-3"></i><span class="text-gray-300">Unlimited all services</span></li> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-3"></i><span class="text-gray-300">Weekly full detailing</span></li> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-3"></i><span class="text-gray-300">Ceramic coating quarterly</span></li> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-3"></i><span class="text-gray-300">VIP express lane</span></li> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-3"></i><span class="text-gray-300">Concierge pickup/delivery</span></li> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-3"></i><span class="text-gray-300">Personal car care advisor</span></li> </ul> <button class="w-full morph-btn bg-gradient-to-r from-gold to-yellow-500 text-dark py-4 rounded-full font-bold hover:shadow-xl transition-all duration-300"> CHOOSE LUXURY </button> </div> </div> </div> </section> <!-- Team Section --> <section id="team" class="py-20 bg-gradient-to-b from-dark to-secondary relative"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-5xl lg:text-6xl font-black mb-6"> OUR EXPERT <span class="gradient-bg bg-clip-text text-transparent">TEAM</span> </h2> <p class="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"> Meet our certified car care professionals who are passionate about making your vehicle look its absolute best. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="text-center fade-in-left stagger-1"> <div class="relative mb-8 group"> <div class="w-64 h-64 mx-auto rounded-full overflow-hidden shadow-2xl hover-glow"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Mike Rodriguez" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> </div> <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-primary to-cyan-500 text-white px-6 py-2 rounded-full font-bold"> MASTER DETAILER </div> <div class="absolute top-4 right-4 bg-gold text-dark p-3 rounded-full"> <i class="fas fa-award"></i> </div> </div> <h3 class="text-3xl font-bold mb-2 text-primary">Mike Rodriguez</h3> <p class="text-gray-300 mb-4 leading-relaxed">15+ years of professional detailing experience. Certified in ceramic coating and paint correction techniques.</p> <div class="flex justify-center space-x-4 mb-4"> <div class="bg-accent p-2 rounded-full hover:bg-primary transition-colors cursor-pointer"> <i class="fab fa-instagram text-xl"></i> </div> <div class="bg-accent p-2 rounded-full hover:bg-primary transition-colors cursor-pointer"> <i class="fab fa-facebook text-xl"></i> </div> <div class="bg-accent p-2 rounded-full hover:bg-primary transition-colors cursor-pointer"> <i class="fab fa-linkedin text-xl"></i> </div> </div> <div class="flex justify-center space-x-2"> <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">Paint Correction</span> <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">Ceramic Coating</span> </div> </div> <div class="text-center fade-in-up stagger-2"> <div class="relative mb-8 group"> <div class="w-64 h-64 mx-auto rounded-full overflow-hidden shadow-2xl hover-glow"> <img src="https://images.unsplash.com/photo-1602233158242-3ba0ac4d2167?q=80&w=436&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Sarah Chen" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> </div> <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-primary to-cyan-500 text-white px-6 py-2 rounded-full font-bold"> INTERIOR SPECIALIST </div> <div class="absolute top-4 right-4 bg-teal text-white p-3 rounded-full"> <i class="fas fa-star"></i> </div> </div> <h3 class="text-3xl font-bold mb-2 text-primary">Sarah Chen</h3> <p class="text-gray-300 mb-4 leading-relaxed">Expert in leather care and fabric protection. Specializes in luxury vehicle interior restoration and maintenance.</p> <div class="flex justify-center space-x-4 mb-4"> <div class="bg-accent p-2 rounded-full hover:bg-primary transition-colors cursor-pointer"> <i class="fab fa-instagram text-xl"></i> </div> <div class="bg-accent p-2 rounded-full hover:bg-primary transition-colors cursor-pointer"> <i class="fab fa-facebook text-xl"></i> </div> <div class="bg-accent p-2 rounded-full hover:bg-primary transition-colors cursor-pointer"> <i class="fab fa-linkedin text-xl"></i> </div> </div> <div class="flex justify-center space-x-2"> <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">Leather Care</span> <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">Fabric Protection</span> </div> </div> <div class="text-center fade-in-right stagger-3"> <div class="relative mb-8 group"> <div class="w-64 h-64 mx-auto rounded-full overflow-hidden shadow-2xl hover-glow"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="David Thompson" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> </div> <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-primary to-cyan-500 text-white px-6 py-2 rounded-full font-bold"> MOBILE TEAM LEAD </div> <div class="absolute top-4 right-4 bg-green-500 text-white p-3 rounded-full"> <i class="fas fa-truck"></i> </div> </div> <h3 class="text-3xl font-bold mb-2 text-primary">David Thompson</h3> <p class="text-gray-300 mb-4 leading-relaxed">Leads our mobile detailing team with expertise in on-site service delivery and customer satisfaction.</p> <div class="flex justify-center space-x-4 mb-4"> <div class="bg-accent p-2 rounded-full hover:bg-primary transition-colors cursor-pointer"> <i class="fab fa-instagram text-xl"></i> </div> <div class="bg-accent p-2 rounded-full hover:bg-primary transition-colors cursor-pointer"> <i class="fab fa-facebook text-xl"></i> </div> <div class="bg-accent p-2 rounded-full hover:bg-primary transition-colors cursor-pointer"> <i class="fab fa-linkedin text-xl"></i> </div> </div> <div class="flex justify-center space-x-2"> <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">Mobile Service</span> <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">Team Leadership</span> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="py-20 bg-gradient-to-b from-secondary to-accent relative"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-5xl lg:text-6xl font-black mb-6"> BEFORE & <span class="gradient-bg bg-clip-text text-transparent">AFTER</span> </h2> <p class="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"> See the incredible transformations we achieve with our professional car detailing services. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="relative group overflow-hidden rounded-3xl shadow-2xl hover-lift scale-up stagger-1"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Car Transformation 1" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="absolute bottom-4 left-4 right-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <h4 class="text-xl font-bold mb-2">Luxury Sedan Detail</h4> <p class="text-sm">Complete exterior and interior transformation</p> </div> </div> <div class="relative group overflow-hidden rounded-3xl shadow-2xl hover-lift scale-up stagger-2"> <img src="https://images.unsplash.com/photo-1607860108855-64acf2078ed9?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Car Transformation 2" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="absolute bottom-4 left-4 right-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <h4 class="text-xl font-bold mb-2">SUV Paint Correction</h4> <p class="text-sm">Professional paint correction and ceramic coating</p> </div> </div> <div class="relative group overflow-hidden rounded-3xl shadow-2xl hover-lift scale-up stagger-3"> <img src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Car Transformation 3" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="absolute bottom-4 left-4 right-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <h4 class="text-xl font-bold mb-2">Sports Car Detailing</h4> <p class="text-sm">Premium detailing for high-performance vehicles</p> </div> </div> <div class="relative group overflow-hidden rounded-3xl shadow-2xl hover-lift scale-up stagger-4"> <img src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Car Transformation 4" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="absolute bottom-4 left-4 right-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <h4 class="text-xl font-bold mb-2">Classic Car Restoration</h4> <p class="text-sm">Specialized care for vintage and classic vehicles</p> </div> </div> <div class="relative group overflow-hidden rounded-3xl shadow-2xl hover-lift scale-up stagger-5"> <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Car Transformation 5" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="absolute bottom-4 left-4 right-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <h4 class="text-xl font-bold mb-2">Truck Deep Clean</h4> <p class="text-sm">Heavy-duty cleaning for work vehicles</p> </div> </div> <div class="relative group overflow-hidden rounded-3xl shadow-2xl hover-lift scale-up stagger-6"> <img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Car Transformation 6" class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="absolute bottom-4 left-4 right-4 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <h4 class="text-xl font-bold mb-2">Convertible Care</h4> <p class="text-sm">Specialized soft-top and interior protection</p> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="py-20 bg-gradient-to-b from-accent to-dark relative"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-5xl lg:text-6xl font-black mb-6"> CUSTOMER <span class="gradient-bg bg-clip-text text-transparent">REVIEWS</span> </h2> <p class="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"> Don't just take our word for it - hear what our satisfied customers have to say about our services. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-gradient-to-b from-secondary to-dark rounded-3xl p-8 shadow-2xl hover-lift scale-up stagger-1"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="John Martinez" class="w-16 h-16 rounded-full object-cover mr-4"> <div> <h4 class="font-bold text-primary text-lg">John Martinez</h4> <div class="flex text-gold text-sm"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> </div> <p class="text-gray-300 italic leading-relaxed mb-4"> "Absolutely incredible service! My car looks better than when I first bought it. The ceramic coating is amazing and the team is so professional." </p> <div class="text-primary font-semibold">BMW Owner • Premium Member</div> </div> <div class="bg-gradient-to-b from-secondary to-dark rounded-3xl p-8 shadow-2xl hover-lift scale-up stagger-2"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Sarah Wilson" class="w-16 h-16 rounded-full object-cover mr-4"> <div> <h4 class="font-bold text-primary text-lg">Sarah Wilson</h4> <div class="flex text-gold text-sm"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> </div> <p class="text-gray-300 italic leading-relaxed mb-4"> "The mobile service is a game-changer! They come to my office and my car is spotless when I'm done with work. Highly recommend!" </p> <div class="text-primary font-semibold">Tesla Owner • Mobile Service</div> </div> <div class="bg-gradient-to-b from-secondary to-dark rounded-3xl p-8 shadow-2xl hover-lift scale-up stagger-3"> <div class="flex items-center mb-6"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Mike Davis" class="w-16 h-16 rounded-full object-cover mr-4"> <div> <h4 class="font-bold text-primary text-lg">Mike Davis</h4> <div class="flex text-gold text-sm"> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> </div> </div> </div> <p class="text-gray-300 italic leading-relaxed mb-4"> "Been using Aqua Shine for 2 years now. Consistent quality, fair prices, and they really care about customer satisfaction. Five stars!" </p> <div class="text-primary font-semibold">Truck Owner • Luxury Member</div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-gradient-to-b from-dark to-secondary relative"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-5xl lg:text-6xl font-black mb-6"> BOOK YOUR <span class="gradient-bg bg-clip-text text-transparent">SERVICE</span> </h2> <p class="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"> Ready to give your car the premium treatment it deserves? Contact us today to schedule your appointment. </p> </div> <div class="grid lg:grid-cols-2 gap-16"> <div class="fade-in-left"> <h3 class="text-3xl font-bold mb-8 text-primary">Visit Aqua Shine</h3> <div class="space-y-6 mb-8"> <div class="flex items-center space-x-4"> <div class="bg-gradient-to-r from-primary to-cyan-500 p-4 rounded-2xl"> <i class="fas fa-map-marker-alt text-2xl text-white"></i> </div> <div> <h4 class="font-bold text-white text-lg">Location</h4> <p class="text-gray-300">1234 Clean Street, Wash City, WC 12345</p> </div> </div> <div class="flex items-center space-x-4"> <div class="bg-gradient-to-r from-primary to-cyan-500 p-4 rounded-2xl"> <i class="fas fa-phone text-2xl text-white"></i> </div> <div> <h4 class="font-bold text-white text-lg">Phone</h4> <p class="text-gray-300">(555) WASH-CAR</p> </div> </div> <div class="flex items-center space-x-4"> <div class="bg-gradient-to-r from-primary to-cyan-500 p-4 rounded-2xl"> <i class="fas fa-envelope text-2xl text-white"></i> </div> <div> <h4 class="font-bold text-white text-lg">Email</h4> <p class="text-gray-300">info@aquashine.com</p> </div> </div> <div class="flex items
CSS
JavaScript
Output Preview
Desktop
Mobile
Fullscreen