patx/demo
add garage 81
Commit 8c9f286 · patx · 2026-06-01T12:40:30-04:00
Comments
No comments yet.
Diff
diff --git a/docs/garage81.html b/docs/garage81.html
new file mode 100644
index 0000000..e9fa9b7
--- /dev/null
+++ b/docs/garage81.html
@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Garage 81 USA | Full Service Auto Repair</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+ <style>
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&display=swap');
+
+ .logo-font { font-family: 'Space Grotesk', sans-serif; }
+
+ .hero-bg {
+ background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.85)),
+ url('https://picsum.photos/id/1071/2000/1200');
+ background-size: cover;
+ background-position: center;
+ }
+
+ .gold-accent { color: #c98232; }
+ .service-card:hover {
+ transform: translateY(-12px);
+ box-shadow: 0 25px 50px -12px rgb(201 130 50 / 0.3);
+ }
+ .gallery-img:hover {
+ transform: scale(1.06);
+ }
+ .review-card {
+ transition: all 0.3s ease;
+ }
+ .review-card:hover {
+ transform: translateY(-8px);
+ }
+ </style>
+</head>
+<body class="bg-zinc-950 text-white">
+
+ <!-- NAVBAR -->
+ <nav class="bg-black border-b border-zinc-800 fixed w-full z-50" aria-label="Primary navigation">
+ <div class="max-w-7xl mx-auto px-6 py-3 flex items-center justify-between">
+ <a href="#" class="flex min-w-0 items-center" aria-label="Garage 81 USA home">
+ <img src="garage81_logo.png" alt="Garage 81 USA" class="h-16 w-auto max-w-[180px] object-contain sm:h-20 sm:max-w-[220px]">
+ </a>
+
+ <div class="hidden md:flex items-center gap-8 text-sm font-medium">
+ <a href="#services" class="hover:text-[#c98232] transition">Services</a>
+ <a href="#reviews" class="hover:text-[#c98232] transition">Reviews</a>
+ <a href="#gallery" class="hover:text-[#c98232] transition">Gallery</a>
+ <a href="#contact" class="hover:text-[#c98232] transition">Contact</a>
+ </div>
+
+ <div class="hidden md:flex items-center gap-4">
+ <a href="tel:7543025371" class="hidden sm:flex items-center gap-2 bg-white text-black px-6 py-3 rounded-2xl font-semibold hover:bg-[#c98232] hover:text-black transition">
+ <i class="fas fa-phone"></i> (754) 302-5371
+ </a>
+ <button onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"
+ class="bg-[#c98232] hover:bg-[#d99546] text-black px-6 py-3 rounded-2xl font-semibold transition">
+ FREE ESTIMATE
+ </button>
+ </div>
+
+ <button type="button"
+ class="md:hidden inline-flex h-12 w-12 items-center justify-center rounded-xl border border-zinc-700 bg-zinc-900 text-white transition hover:bg-zinc-800"
+ aria-controls="garage81-mobile-menu"
+ aria-expanded="false"
+ aria-label="Open menu"
+ data-mobile-menu-button>
+ <i class="fas fa-bars text-xl" data-menu-icon></i>
+ </button>
+ </div>
+ <div id="garage81-mobile-menu" class="hidden md:hidden border-t border-zinc-800 bg-black px-6 pb-6" data-mobile-menu>
+ <div class="flex flex-col gap-3 pt-4 text-base font-medium">
+ <a href="#services" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-[#c98232] transition">Services</a>
+ <a href="#reviews" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-[#c98232] transition">Reviews</a>
+ <a href="#gallery" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-[#c98232] transition">Gallery</a>
+ <a href="#contact" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-[#c98232] transition">Contact</a>
+ <a href="tel:7543025371" class="mt-2 flex items-center justify-center gap-2 rounded-2xl bg-white px-5 py-4 font-semibold text-black transition hover:bg-[#c98232]">
+ <i class="fas fa-phone"></i> (754) 302-5371
+ </a>
+ <button onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"
+ class="rounded-2xl bg-[#c98232] px-5 py-4 font-semibold text-black transition hover:bg-[#d99546]">
+ FREE ESTIMATE
+ </button>
+ </div>
+ </div>
+ </nav>
+
+ <!-- HERO -->
+ <header class="hero-bg min-h-screen flex items-center pt-20">
+ <div class="max-w-7xl mx-auto px-6 text-center">
+ <div class="max-w-3xl mx-auto">
+ <div class="inline-flex items-center gap-2 bg-black/70 backdrop-blur-md text-[#c98232] text-sm font-medium px-6 py-3 rounded-full mb-6 border border-[#c98232]/30">
+ <i class="fas fa-crown"></i>
+ 30+ YEARS EXPERIENCE
+ </div>
+
+ <h1 class="text-6xl md:text-7xl font-bold tracking-tighter leading-none mb-6 logo-font">
+ FULL SERVICE<br>AUTO REPAIR
+ </h1>
+
+ <p class="text-2xl text-zinc-300 mb-10">
+ Classic • Modern • Exotic • Electric & Hybrid Vehicles
+ </p>
+
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
+ <button onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"
+ class="bg-[#c98232] hover:bg-[#d99546] text-black w-full sm:w-auto px-10 py-6 rounded-3xl text-xl font-semibold flex items-center justify-center gap-3 transition">
+ GET FREE ESTIMATE
+ </button>
+
+ <a href="tel:7543025371"
+ class="border-2 border-white/70 hover:border-[#c98232] w-full sm:w-auto px-8 py-6 rounded-3xl text-xl font-medium flex items-center justify-center gap-3 transition">
+ <i class="fas fa-phone"></i> CALL NOW
+ </a>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- TRUST BAR -->
+ <div class="bg-black py-8 border-b border-zinc-800">
+ <div class="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+ <div>
+ <div class="text-4xl font-bold gold-accent">2760 A NE</div>
+ <p class="text-zinc-400">7th Ave, Pompano Beach, FL</p>
+ </div>
+ <div>
+ <div class="text-4xl font-bold gold-accent">30+</div>
+ <p class="text-zinc-400">Years Experience</p>
+ </div>
+ <div>
+ <div class="flex items-center justify-center gap-1 text-4xl text-[#c98232]">
+ ★★★★★
+ </div>
+ <p class="text-zinc-400">5.0 (21 Reviews)</p>
+ </div>
+ <div>
+ <div class="text-4xl font-bold gold-accent">EXOTIC</div>
+ <p class="text-zinc-400">Specialists</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- SERVICES -->
+ <section id="services" class="py-24 bg-zinc-900">
+ <div class="max-w-7xl mx-auto px-6">
+ <h2 class="text-center text-5xl font-bold tracking-tighter mb-16">Full Service Auto Repair</h2>
+
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+ <div class="service-card bg-black rounded-3xl p-8">
+ <h3 class="text-2xl font-semibold mb-4 gold-accent">Engine</h3>
+ <p class="text-zinc-400">Diagnostics & Repair</p>
+ </div>
+ <div class="service-card bg-black rounded-3xl p-8">
+ <h3 class="text-2xl font-semibold mb-4 gold-accent">Transmission</h3>
+ <p class="text-zinc-400">Service & Replacement</p>
+ </div>
+ <div class="service-card bg-black rounded-3xl p-8">
+ <h3 class="text-2xl font-semibold mb-4 gold-accent">Brakes</h3>
+ <p class="text-zinc-400">Pads, Rotors & Calipers</p>
+ </div>
+ <div class="service-card bg-black rounded-3xl p-8">
+ <h3 class="text-2xl font-semibold mb-4 gold-accent">Suspension & Steering</h3>
+ <p class="text-zinc-400">Full service and repairs</p>
+ </div>
+ <div class="service-card bg-black rounded-3xl p-8">
+ <h3 class="text-2xl font-semibold mb-4 gold-accent">Tires</h3>
+ <p class="text-zinc-400">Installation, Rotation & Balancing</p>
+ </div>
+ <div class="service-card bg-black rounded-3xl p-8">
+ <h3 class="text-2xl font-semibold mb-4 gold-accent">A/C Service</h3>
+ <p class="text-zinc-400">Inspection, Recharge & Repair</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- REVIEWS -->
+ <section id="reviews" class="py-24 bg-black">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="text-center mb-16">
+ <div class="flex justify-center text-6xl text-[#c98232] mb-4">★★★★★</div>
+ <h2 class="text-5xl font-bold tracking-tighter">5.0 out of 5</h2>
+ <p class="text-zinc-400 text-xl mt-2">Based on 21 Google Reviews</p>
+ </div>
+
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+ <div class="review-card bg-zinc-900 rounded-3xl p-8">
+ <div class="text-[#c98232] text-2xl mb-4">★★★★★</div>
+ <p class="italic">"Garage81 USA is the real deal... honest work. They took the time to explain exactly what my car needed."</p>
+ <p class="mt-6 font-medium">- Jay Cuthbertson</p>
+ </div>
+
+ <div class="review-card bg-zinc-900 rounded-3xl p-8">
+ <div class="text-[#c98232] text-2xl mb-4">★★★★★</div>
+ <p class="italic">"I have all my vehicles fixed at Garage 81. My first reason is because he's honest and trustworthy."</p>
+ <p class="mt-6 font-medium">- John Bates</p>
+ </div>
+
+ <div class="review-card bg-zinc-900 rounded-3xl p-8">
+ <div class="text-[#c98232] text-2xl mb-4">★★★★★</div>
+ <p class="italic">"Rodrigo is the best! He fixed my overheating Kia quickly and efficiently. Thank you so much!"</p>
+ <p class="mt-6 font-medium">- Chantal C</p>
+ </div>
+
+ <div class="review-card bg-zinc-900 rounded-3xl p-8">
+ <div class="text-[#c98232] text-2xl mb-4">★★★★★</div>
+ <p class="italic">"Very Good Mechanic shop. Always takes care of my cars... Lots of experience and professional!"</p>
+ <p class="mt-6 font-medium">- Maksim Gorodkin</p>
+ </div>
+
+ <div class="review-card bg-zinc-900 rounded-3xl p-8">
+ <div class="text-[#c98232] text-2xl mb-4">★★★★★</div>
+ <p class="italic">"Excellent mechanics, trust, and quality; you can take your car to them with confidence."</p>
+ <p class="mt-6 font-medium">- On the Go Auto Detailing</p>
+ </div>
+
+ <div class="review-card bg-zinc-900 rounded-3xl p-8">
+ <div class="text-[#c98232] text-2xl mb-4">★★★★★</div>
+ <p class="italic">"Rodrigo is an excellent professional, fair and honest! I will definitely return."</p>
+ <p class="mt-6 font-medium">- Lucas Garcia</p>
+ </div>
+ </div>
+
+ <div class="text-center mt-12">
+ <p class="text-zinc-400">And many more satisfied customers...</p>
+ </div>
+ </div>
+ </section>
+
+ <!-- GALLERY -->
+ <section id="gallery" class="py-24 bg-zinc-900">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="flex justify-between items-end mb-12">
+ <div>
+ <h2 class="text-5xl font-bold tracking-tighter">Our Work</h2>
+ <p class="text-zinc-400 mt-2">Pompano Beach's Premier Auto Repair Shop</p>
+ </div>
+ <a href="https://www.instagram.com/garage81usa/" target="_blank"
+ class="text-[#c98232] hover:text-[#d99546] flex items-center gap-2 text-sm font-medium">
+ VIEW MORE ON INSTAGRAM <i class="fas fa-external-link-alt"></i>
+ </a>
+ </div>
+
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+ <div class="overflow-hidden rounded-3xl"><img src="https://picsum.photos/id/1015/600/600" alt="Ferrari" class="gallery-img w-full h-full object-cover"></div>
+ <div class="overflow-hidden rounded-3xl"><img src="https://picsum.photos/id/870/600/600" alt="Lamborghini" class="gallery-img w-full h-full object-cover"></div>
+ <div class="overflow-hidden rounded-3xl"><img src="https://picsum.photos/id/133/600/600" alt="BMW" class="gallery-img w-full h-full object-cover"></div>
+ <div class="overflow-hidden rounded-3xl"><img src="https://picsum.photos/id/201/600/600" alt="Mercedes" class="gallery-img w-full h-full object-cover"></div>
+ </div>
+ </div>
+ </section>
+
+ <!-- CONTACT FORM -->
+ <section id="contact" class="py-24 bg-black">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="grid md:grid-cols-2 gap-16">
+ <div>
+ <h2 class="text-5xl font-bold tracking-tighter mb-8">Visit Us</h2>
+ <div class="space-y-8">
+ <div class="flex gap-4">
+ <i class="fas fa-map-marker-alt text-[#c98232] text-3xl"></i>
+ <div>
+ <p class="font-semibold text-xl">2760 A NE 7th Ave</p>
+ <p class="text-zinc-400">Pompano Beach, FL 33064</p>
+ </div>
+ </div>
+ <div class="flex gap-4">
+ <i class="fas fa-phone text-[#c98232] text-3xl"></i>
+ <div>
+ <a href="tel:7543025371" class="font-semibold text-xl hover:text-[#c98232]">(754) 302-5371</a>
+ </div>
+ </div>
+ </div>
+ <p class="mt-10 text-lg text-zinc-300">
+ 30+ years specializing in everything from classic cars to exotic supercars and modern electric & hybrid vehicles.
+ </p>
+ </div>
+
+ <div class="bg-zinc-900 rounded-3xl p-8 md:p-10">
+ <form id="estimate-form" onsubmit="handleSubmit(event)" class="space-y-6">
+ <div class="grid grid-cols-2 gap-4">
+ <div>
+ <label class="block text-sm text-zinc-400 mb-2">First Name</label>
+ <input type="text" required class="w-full bg-black border border-zinc-700 rounded-2xl px-5 py-4 focus:outline-none focus:border-[#c98232]">
+ </div>
+ <div>
+ <label class="block text-sm text-zinc-400 mb-2">Last Name</label>
+ <input type="text" required class="w-full bg-black border border-zinc-700 rounded-2xl px-5 py-4 focus:outline-none focus:border-[#c98232]">
+ </div>
+ </div>
+
+ <div>
+ <label class="block text-sm text-zinc-400 mb-2">Phone Number</label>
+ <input type="tel" required class="w-full bg-black border border-zinc-700 rounded-2xl px-5 py-4 focus:outline-none focus:border-[#c98232]">
+ </div>
+
+ <div>
+ <label class="block text-sm text-zinc-400 mb-2">Vehicle Make & Model</label>
+ <input type="text" required placeholder="e.g. Ferrari 488, BMW M3..."
+ class="w-full bg-black border border-zinc-700 rounded-2xl px-5 py-4 focus:outline-none focus:border-[#c98232]">
+ </div>
+
+ <div>
+ <label class="block text-sm text-zinc-400 mb-2">Service Needed</label>
+ <textarea rows="4" required placeholder="Engine repair, brakes, tires, etc."
+ class="w-full bg-black border border-zinc-700 rounded-3xl px-5 py-4 focus:outline-none focus:border-[#c98232]"></textarea>
+ </div>
+
+ <button type="submit" class="w-full bg-[#c98232] hover:bg-[#d99546] text-black py-6 rounded-3xl text-xl font-semibold transition">
+ REQUEST FREE ESTIMATE
+ </button>
+ </form>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- FOOTER -->
+ <footer class="bg-black py-12 border-t border-zinc-800">
+ <div class="max-w-7xl mx-auto px-6 text-center text-zinc-500">
+ <p class="text-2xl font-bold logo-font text-[#c98232] mb-2">GARAGE 81 USA</p>
+ <p class="mb-6">Full Service Auto Repair • Pompano Beach, Florida</p>
+ <p class="text-sm">© 2026 Garage 81 USA • 30+ Years Experience • All Rights Reserved</p>
+ </div>
+ </footer>
+
+ <script>
+ function initMobileMenu(menuId) {
+ const menu = document.getElementById(menuId);
+ const button = document.querySelector(`[aria-controls="${menuId}"]`);
+ if (!menu || !button) return;
+
+ const icon = button.querySelector('[data-menu-icon]');
+ const setOpen = (isOpen) => {
+ menu.classList.toggle('hidden', !isOpen);
+ button.setAttribute('aria-expanded', String(isOpen));
+ button.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');
+ if (icon) {
+ icon.classList.toggle('fa-bars', !isOpen);
+ icon.classList.toggle('fa-xmark', isOpen);
+ }
+ };
+
+ button.addEventListener('click', () => {
+ setOpen(button.getAttribute('aria-expanded') !== 'true');
+ });
+ menu.addEventListener('click', (event) => {
+ const menuItem = event.target.closest('a, button');
+ if (menuItem && menu.contains(menuItem)) setOpen(false);
+ });
+ document.addEventListener('keydown', (event) => {
+ if (event.key === 'Escape') setOpen(false);
+ });
+ window.matchMedia('(min-width: 768px)').addEventListener('change', (event) => {
+ if (event.matches) setOpen(false);
+ });
+ }
+
+ initMobileMenu('garage81-mobile-menu');
+
+ function handleSubmit(e) {
+ e.preventDefault();
+ alert("Thank you! Your estimate request has been received. We'll contact you shortly.");
+ e.target.reset();
+ }
+ </script>
+
+</body>
+</html>
diff --git a/docs/garage81_logo.png b/docs/garage81_logo.png
new file mode 100644
index 0000000..71aab7b
Binary files /dev/null and b/docs/garage81_logo.png differ
diff --git a/docs/index.html b/docs/index.html
index a2e101e..5da1210 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,10 +5,11 @@
<body>
<h1><a href="https://afterdarklabs.io">After Dark Labs</a> Demos</h1>
<ul>
-<li><a href="demo/sf_cleaning">sf_cleaning</a></li>
-<li><a href="demo/tienes_auto">tienes_auto</a></li>
-<li><a href="demo/mac_tires">mac_tires</a></li>
-<li><a href="demo/speed51">speed51</a></li>
+<li><a href="/demo/sf_cleaning">sf_cleaning</a></li>
+<li><a href="/demo/tienes_auto">tienes_auto</a></li>
+<li><a href="/demo/mac_tires">mac_tires</a></li>
+<li><a href="/demo/speed51">speed51</a></li>
+<li><a href="/demo/garage81">garage81</a></li>
</ul>
</body>
</html>
diff --git a/docs/mac_tires.html b/docs/mac_tires.html
index edd4b22..260cd4a 100644
--- a/docs/mac_tires.html
+++ b/docs/mac_tires.html
@@ -25,7 +25,7 @@
<body class="bg-zinc-950 text-white font-sans">
<!-- NAVBAR -->
- <nav class="bg-black border-b border-zinc-800 fixed w-full z-50">
+ <nav class="bg-black border-b border-zinc-800 fixed w-full z-50" aria-label="Primary navigation">
<div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
<div class="flex items-center gap-3">
<div>
@@ -40,7 +40,7 @@
<a href="#contact" class="hover:text-sky-400 transition">Contact</a>
</div>
- <div class="flex items-center gap-4">
+ <div class="hidden md:flex items-center gap-4">
<a href="tel:9547862727" class="hidden sm:flex items-center gap-2 bg-white text-black px-6 py-3 rounded-2xl font-semibold hover:bg-sky-400 hover:text-white transition">
<i class="fas fa-phone"></i> (954) 786-2727
</a>
@@ -49,6 +49,30 @@
GET QUOTE
</button>
</div>
+
+ <button type="button"
+ class="md:hidden inline-flex h-12 w-12 items-center justify-center rounded-xl border border-zinc-700 bg-zinc-900 text-white transition hover:bg-zinc-800"
+ aria-controls="mac-tires-mobile-menu"
+ aria-expanded="false"
+ aria-label="Open menu"
+ data-mobile-menu-button>
+ <i class="fas fa-bars text-xl" data-menu-icon></i>
+ </button>
+ </div>
+ <div id="mac-tires-mobile-menu" class="hidden md:hidden border-t border-zinc-800 bg-black px-6 pb-6" data-mobile-menu>
+ <div class="flex flex-col gap-3 pt-4 text-base font-medium">
+ <a href="#tires" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-sky-400 transition">Wholesale Tires</a>
+ <a href="#services" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-sky-400 transition">Services</a>
+ <a href="#reviews" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-sky-400 transition">Reviews</a>
+ <a href="#contact" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-sky-400 transition">Contact</a>
+ <a href="tel:9547862727" class="mt-2 flex items-center justify-center gap-2 rounded-2xl bg-white px-5 py-4 font-semibold text-black transition hover:bg-sky-400 hover:text-white">
+ <i class="fas fa-phone"></i> (954) 786-2727
+ </a>
+ <button onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"
+ class="rounded-2xl bg-sky-500 px-5 py-4 font-semibold transition hover:bg-sky-600">
+ GET QUOTE
+ </button>
+ </div>
</div>
</nav>
@@ -239,5 +263,40 @@
</div>
</footer>
+ <script>
+ function initMobileMenu(menuId) {
+ const menu = document.getElementById(menuId);
+ const button = document.querySelector(`[aria-controls="${menuId}"]`);
+ if (!menu || !button) return;
+
+ const icon = button.querySelector('[data-menu-icon]');
+ const setOpen = (isOpen) => {
+ menu.classList.toggle('hidden', !isOpen);
+ button.setAttribute('aria-expanded', String(isOpen));
+ button.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');
+ if (icon) {
+ icon.classList.toggle('fa-bars', !isOpen);
+ icon.classList.toggle('fa-xmark', isOpen);
+ }
+ };
+
+ button.addEventListener('click', () => {
+ setOpen(button.getAttribute('aria-expanded') !== 'true');
+ });
+ menu.addEventListener('click', (event) => {
+ const menuItem = event.target.closest('a, button');
+ if (menuItem && menu.contains(menuItem)) setOpen(false);
+ });
+ document.addEventListener('keydown', (event) => {
+ if (event.key === 'Escape') setOpen(false);
+ });
+ window.matchMedia('(min-width: 768px)').addEventListener('change', (event) => {
+ if (event.matches) setOpen(false);
+ });
+ }
+
+ initMobileMenu('mac-tires-mobile-menu');
+ </script>
+
</body>
</html>
diff --git a/docs/sf_cleaning.html b/docs/sf_cleaning.html
index 0b53015..45f6179 100644
--- a/docs/sf_cleaning.html
+++ b/docs/sf_cleaning.html
@@ -17,7 +17,7 @@
<body class="font-sans text-gray-800">
<!-- Navbar -->
- <nav class="bg-white shadow-md sticky top-0 z-50">
+ <nav class="bg-white shadow-md sticky top-0 z-50" aria-label="Primary navigation">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center text-white text-2xl">
@@ -31,9 +31,28 @@
<a href="#reviews" class="hover:text-blue-600 transition">Reviews</a>
<a href="#contact" class="hover:text-blue-600 transition">Contact</a>
</div>
- <a href="tel:7869611390" class="bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition font-semibold">
+ <a href="tel:7869611390" class="hidden md:inline-flex bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition font-semibold">
📞 (786) 961-1390
</a>
+ <button type="button"
+ class="md:hidden inline-flex h-12 w-12 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-900 shadow-sm transition hover:bg-gray-50"
+ aria-controls="sf-cleaning-mobile-menu"
+ aria-expanded="false"
+ aria-label="Open menu"
+ data-mobile-menu-button>
+ <i class="fa-solid fa-bars text-xl" data-menu-icon></i>
+ </button>
+ </div>
+ <div id="sf-cleaning-mobile-menu" class="hidden md:hidden border-t border-gray-100 bg-white px-6 pb-6" data-mobile-menu>
+ <div class="flex flex-col gap-2 pt-4 text-lg font-medium">
+ <a href="#services" class="rounded-2xl px-4 py-3 hover:bg-blue-50 hover:text-blue-700 transition">Services</a>
+ <a href="#about" class="rounded-2xl px-4 py-3 hover:bg-blue-50 hover:text-blue-700 transition">About</a>
+ <a href="#reviews" class="rounded-2xl px-4 py-3 hover:bg-blue-50 hover:text-blue-700 transition">Reviews</a>
+ <a href="#contact" class="rounded-2xl px-4 py-3 hover:bg-blue-50 hover:text-blue-700 transition">Contact</a>
+ <a href="tel:7869611390" class="mt-3 flex items-center justify-center rounded-full bg-blue-600 px-5 py-4 font-semibold text-white transition hover:bg-blue-700">
+ 📞 (786) 961-1390
+ </a>
+ </div>
</div>
</nav>
@@ -149,5 +168,40 @@
</div>
</footer>
+ <script>
+ function initMobileMenu(menuId) {
+ const menu = document.getElementById(menuId);
+ const button = document.querySelector(`[aria-controls="${menuId}"]`);
+ if (!menu || !button) return;
+
+ const icon = button.querySelector('[data-menu-icon]');
+ const setOpen = (isOpen) => {
+ menu.classList.toggle('hidden', !isOpen);
+ button.setAttribute('aria-expanded', String(isOpen));
+ button.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');
+ if (icon) {
+ icon.classList.toggle('fa-bars', !isOpen);
+ icon.classList.toggle('fa-xmark', isOpen);
+ }
+ };
+
+ button.addEventListener('click', () => {
+ setOpen(button.getAttribute('aria-expanded') !== 'true');
+ });
+ menu.addEventListener('click', (event) => {
+ const menuItem = event.target.closest('a, button');
+ if (menuItem && menu.contains(menuItem)) setOpen(false);
+ });
+ document.addEventListener('keydown', (event) => {
+ if (event.key === 'Escape') setOpen(false);
+ });
+ window.matchMedia('(min-width: 768px)').addEventListener('change', (event) => {
+ if (event.matches) setOpen(false);
+ });
+ }
+
+ initMobileMenu('sf-cleaning-mobile-menu');
+ </script>
+
</body>
</html>
diff --git a/docs/speed51.html b/docs/speed51.html
index c4870c5..ad5b922 100644
--- a/docs/speed51.html
+++ b/docs/speed51.html
@@ -38,7 +38,7 @@
<body class="bg-zinc-950 text-white">
<!-- NAVBAR -->
- <nav class="bg-black border-b border-zinc-800 fixed w-full z-50">
+ <nav class="bg-black border-b border-zinc-800 fixed w-full z-50" aria-label="Primary navigation">
<div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
<div class="flex items-center gap-3">
<div>
@@ -52,7 +52,7 @@
<a href="#contact" class="hover:text-red-400 transition">Contact</a>
</div>
- <div class="flex items-center gap-4">
+ <div class="hidden md:flex items-center gap-4">
<a href="tel:7542744514" class="hidden sm:flex items-center gap-2 bg-white text-black px-6 py-3 rounded-2xl font-semibold hover:bg-red-500 hover:text-white transition">
<i class="fas fa-phone"></i> (754) 274-4514
</a>
@@ -61,6 +61,29 @@
FREE ESTIMATE
</button>
</div>
+
+ <button type="button"
+ class="md:hidden inline-flex h-12 w-12 items-center justify-center rounded-xl border border-zinc-700 bg-zinc-900 text-white transition hover:bg-zinc-800"
+ aria-controls="speed51-mobile-menu"
+ aria-expanded="false"
+ aria-label="Open menu"
+ data-mobile-menu-button>
+ <i class="fas fa-bars text-xl" data-menu-icon></i>
+ </button>
+ </div>
+ <div id="speed51-mobile-menu" class="hidden md:hidden border-t border-zinc-800 bg-black px-6 pb-6" data-mobile-menu>
+ <div class="flex flex-col gap-3 pt-4 text-base font-medium">
+ <a href="#services" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-red-400 transition">Services</a>
+ <a href="#gallery" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-red-400 transition">Gallery</a>
+ <a href="#contact" class="rounded-xl px-4 py-3 hover:bg-zinc-900 hover:text-red-400 transition">Contact</a>
+ <a href="tel:7542744514" class="mt-2 flex items-center justify-center gap-2 rounded-2xl bg-white px-5 py-4 font-semibold text-black transition hover:bg-red-500 hover:text-white">
+ <i class="fas fa-phone"></i> (754) 274-4514
+ </a>
+ <button onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"
+ class="rounded-2xl bg-red-600 px-5 py-4 font-semibold transition hover:bg-red-700">
+ FREE ESTIMATE
+ </button>
+ </div>
</div>
</nav>
@@ -255,6 +278,39 @@
<script src="https://elfsightcdn.com/platform.js" async></script>
<script>
+ function initMobileMenu(menuId) {
+ const menu = document.getElementById(menuId);
+ const button = document.querySelector(`[aria-controls="${menuId}"]`);
+ if (!menu || !button) return;
+
+ const icon = button.querySelector('[data-menu-icon]');
+ const setOpen = (isOpen) => {
+ menu.classList.toggle('hidden', !isOpen);
+ button.setAttribute('aria-expanded', String(isOpen));
+ button.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');
+ if (icon) {
+ icon.classList.toggle('fa-bars', !isOpen);
+ icon.classList.toggle('fa-xmark', isOpen);
+ }
+ };
+
+ button.addEventListener('click', () => {
+ setOpen(button.getAttribute('aria-expanded') !== 'true');
+ });
+ menu.addEventListener('click', (event) => {
+ const menuItem = event.target.closest('a, button');
+ if (menuItem && menu.contains(menuItem)) setOpen(false);
+ });
+ document.addEventListener('keydown', (event) => {
+ if (event.key === 'Escape') setOpen(false);
+ });
+ window.matchMedia('(min-width: 768px)').addEventListener('change', (event) => {
+ if (event.matches) setOpen(false);
+ });
+ }
+
+ initMobileMenu('speed51-mobile-menu');
+
function handleSubmit(e) {
e.preventDefault();
alert("Thank you! Your estimate request has been received. We'll contact you shortly.");
diff --git a/docs/tienes_auto.html b/docs/tienes_auto.html
index 88295c6..190b4c7 100644
--- a/docs/tienes_auto.html
+++ b/docs/tienes_auto.html
@@ -508,7 +508,7 @@
</head>
<body>
-<nav>
+<nav aria-label="Primary navigation">
<div class="nav-logo">Tienes<span>.</span>Auto</div>
<ul class="nav-links" id="primary-navigation">
<li><a href="#services">Services</a></li>
@@ -779,12 +779,29 @@
navToggle.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');
});
- navMenu.querySelectorAll('a').forEach((link) => {
- link.addEventListener('click', () => {
+ navMenu.addEventListener('click', (event) => {
+ const menuItem = event.target.closest('a, button');
+ if (menuItem && navMenu.contains(menuItem)) {
nav.classList.remove('nav-open');
navToggle.setAttribute('aria-expanded', 'false');
navToggle.setAttribute('aria-label', 'Open menu');
- });
+ }
+ });
+
+ document.addEventListener('keydown', (event) => {
+ if (event.key === 'Escape') {
+ nav.classList.remove('nav-open');
+ navToggle.setAttribute('aria-expanded', 'false');
+ navToggle.setAttribute('aria-label', 'Open menu');
+ }
+ });
+
+ window.matchMedia('(min-width: 901px)').addEventListener('change', (event) => {
+ if (event.matches) {
+ nav.classList.remove('nav-open');
+ navToggle.setAttribute('aria-expanded', 'false');
+ navToggle.setAttribute('aria-label', 'Open menu');
+ }
});
</script>