patx/demo
add tienes auto
Commit e1d1279 · patx · 2026-06-01T11:09:38-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 0b53015..6da3c65 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,153 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
+<html>
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>SF Cleaners USA LLC | Professional House Cleaning Miami</title>
- <script src="https://cdn.tailwindcss.com"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
- <style>
- .hero-bg {
- background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=1920');
- background-size: cover;
- background-position: center;
- }
- </style>
+<title>AfterDarkLabs.io Demo Websites</title>
</head>
-<body class="font-sans text-gray-800">
-
- <!-- Navbar -->
- <nav class="bg-white shadow-md sticky top-0 z-50">
- <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">
- 🧹
- </div>
- <h1 class="text-2xl font-bold text-blue-700">SF Cleaners</h1>
- </div>
- <div class="hidden md:flex gap-8 text-lg">
- <a href="#services" class="hover:text-blue-600 transition">Services</a>
- <a href="#about" class="hover:text-blue-600 transition">About</a>
- <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">
- 📞 (786) 961-1390
- </a>
- </div>
- </nav>
-
- <!-- Hero -->
- <section class="hero-bg text-white py-32">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <h2 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
- Clean That Keeps<br>Your Home Aligned ✨
- </h2>
- <p class="text-xl md:text-2xl mb-10 max-w-2xl mx-auto">
- Professional deep cleaning & recurring service in Miami. Peace, balance, and a spotless home.
- </p>
- <div class="flex flex-col sm:flex-row gap-4 justify-center">
- <a href="tel:7869611390" class="bg-white text-blue-700 px-10 py-4 rounded-full text-lg font-semibold hover:bg-gray-100 transition">
- Call Now: (786) 961-1390
- </a>
- <a href="#contact" class="border-2 border-white px-10 py-4 rounded-full text-lg font-semibold hover:bg-white/10 transition">
- Get a Free Quote
- </a>
- </div>
- <p class="mt-8 text-sm">⭐ 5.0 (8 Reviews)</p>
- </div>
- </section>
-
- <!-- Services -->
- <section id="services" class="py-20 bg-gray-50">
- <div class="max-w-7xl mx-auto px-6">
- <h2 class="text-4xl font-bold text-center mb-12">Our Services</h2>
- <div class="grid md:grid-cols-3 gap-8">
- <div class="bg-white p-8 rounded-2xl shadow hover:shadow-xl transition">
- <i class="fa-solid fa-broom text-4xl text-blue-600 mb-4"></i>
- <h3 class="text-2xl font-semibold mb-3">Deep Cleaning</h3>
- <p class="text-gray-600">Thorough cleaning of every corner, including baseboards, fans, and hard-to-reach areas.</p>
- </div>
- <div class="bg-white p-8 rounded-2xl shadow hover:shadow-xl transition">
- <i class="fa-solid fa-sync text-4xl text-blue-600 mb-4"></i>
- <h3 class="text-2xl font-semibold mb-3">Recurring Cleaning</h3>
- <p class="text-gray-600">Weekly, bi-weekly, or monthly cleaning to maintain a consistently fresh home.</p>
- </div>
- <div class="bg-white p-8 rounded-2xl shadow hover:shadow-xl transition">
- <i class="fa-solid fa-sparkles text-4xl text-blue-600 mb-4"></i>
- <h3 class="text-2xl font-semibold mb-3">Move-In / Move-Out</h3>
- <p class="text-gray-600">Make your new home spotless or prepare your old one for the next tenant.</p>
- </div>
- </div>
- </div>
- </section>
-
- <!-- About -->
- <section id="about" class="py-20">
- <div class="max-w-7xl mx-auto px-6">
- <div class="grid md:grid-cols-2 gap-12 items-center">
- <div>
- <h2 class="text-4xl font-bold mb-6">A Clean Home Creates Balance</h2>
- <p class="text-lg text-gray-600 leading-relaxed">
- At <strong>SF Cleaners USA LLC</strong>, we believe a clean space brings peace, reduces overwhelm, and improves your daily flow.
- Our team provides consistent, detail-oriented cleaning that transforms your home into a healthier, more comfortable environment.
- </p>
- <ul class="mt-6 space-y-3">
- <li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-500"></i> Reliable & Professional Team</li>
- <li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-500"></i> Eco-Friendly Products Available</li>
- <li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-500"></i> Attention to Every Detail</li>
- <li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-500"></i> Fully Insured & Background Checked</li>
- </ul>
- </div>
- <div class="bg-gray-100 p-8 rounded-3xl">
- <div class="text-center">
- <div class="text-6xl mb-4">🧽✨</div>
- <p class="italic text-xl">"When your space stays organized and fresh, everything feels easier."</p>
- <p class="mt-6 font-semibold">— SF Cleaners Team</p>
- </div>
- </div>
- </div>
- </div>
- </section>
-
- <!-- Reviews -->
- <section id="reviews" class="py-20 bg-gray-50">
- <div class="max-w-7xl mx-auto px-6">
- <h2 class="text-4xl font-bold text-center mb-12">What Our Clients Say</h2>
- <div class="grid md:grid-cols-2 gap-8">
- <div class="bg-white p-8 rounded-2xl shadow">
- <p class="italic">"Best cleaning service we've ever had! They pay attention to every detail. Our home feels brand new every time."</p>
- <p class="mt-6 font-semibold">— Maria Rodriguez, Miami</p>
- </div>
- <div class="bg-white p-8 rounded-2xl shadow">
- <p class="italic">"Reliable, professional, and trustworthy. We use them every two weeks and couldn't be happier."</p>
- <p class="mt-6 font-semibold">— David Thompson, Coral Gables</p>
- </div>
- </div>
- <p class="text-center mt-8 text-xl font-medium">⭐ 5.0 Average Rating (8 Reviews)</p>
- </div>
- </section>
-
- <!-- Contact -->
- <section id="contact" class="py-20 bg-blue-700 text-white">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <h2 class="text-4xl font-bold mb-8">Ready for a Spotless Home?</h2>
- <p class="text-xl mb-10">Call us today for a free estimate</p>
- <a href="tel:7869611390" class="inline-block bg-white text-blue-700 text-3xl font-bold px-12 py-6 rounded-2xl hover:bg-gray-100 transition">
- 📞 (786) 961-1390
- </a>
- <p class="mt-10">Serving Miami, Fort Lauderdale & surrounding areas</p>
- </div>
- </section>
-
- <!-- Footer -->
- <footer class="bg-gray-900 text-gray-400 py-12">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <p class="text-2xl font-bold text-white mb-2">SF Cleaners USA LLC</p>
- <p>Miami, Florida</p>
- <p class="mt-6">© 2026 SF Cleaners USA LLC. All Rights Reserved.</p>
- </div>
- </footer>
-
+<body>
+<h1><a href="https://afterdarklabs.io">After Dark Labs</a> Demos</h1>
+<ul>
+<li><a href="sf_cleaning">sf_cleaning</a></li>
+<li><a href="tienes_auto">tienes_auto</a></li>
+</ul>
</body>
</html>
diff --git a/docs/sf_cleaning.html b/docs/sf_cleaning.html
new file mode 100644
index 0000000..0b53015
--- /dev/null
+++ b/docs/sf_cleaning.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>SF Cleaners USA LLC | Professional House Cleaning Miami</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+ <style>
+ .hero-bg {
+ background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=1920');
+ background-size: cover;
+ background-position: center;
+ }
+ </style>
+</head>
+<body class="font-sans text-gray-800">
+
+ <!-- Navbar -->
+ <nav class="bg-white shadow-md sticky top-0 z-50">
+ <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">
+ 🧹
+ </div>
+ <h1 class="text-2xl font-bold text-blue-700">SF Cleaners</h1>
+ </div>
+ <div class="hidden md:flex gap-8 text-lg">
+ <a href="#services" class="hover:text-blue-600 transition">Services</a>
+ <a href="#about" class="hover:text-blue-600 transition">About</a>
+ <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">
+ 📞 (786) 961-1390
+ </a>
+ </div>
+ </nav>
+
+ <!-- Hero -->
+ <section class="hero-bg text-white py-32">
+ <div class="max-w-7xl mx-auto px-6 text-center">
+ <h2 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
+ Clean That Keeps<br>Your Home Aligned ✨
+ </h2>
+ <p class="text-xl md:text-2xl mb-10 max-w-2xl mx-auto">
+ Professional deep cleaning & recurring service in Miami. Peace, balance, and a spotless home.
+ </p>
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
+ <a href="tel:7869611390" class="bg-white text-blue-700 px-10 py-4 rounded-full text-lg font-semibold hover:bg-gray-100 transition">
+ Call Now: (786) 961-1390
+ </a>
+ <a href="#contact" class="border-2 border-white px-10 py-4 rounded-full text-lg font-semibold hover:bg-white/10 transition">
+ Get a Free Quote
+ </a>
+ </div>
+ <p class="mt-8 text-sm">⭐ 5.0 (8 Reviews)</p>
+ </div>
+ </section>
+
+ <!-- Services -->
+ <section id="services" class="py-20 bg-gray-50">
+ <div class="max-w-7xl mx-auto px-6">
+ <h2 class="text-4xl font-bold text-center mb-12">Our Services</h2>
+ <div class="grid md:grid-cols-3 gap-8">
+ <div class="bg-white p-8 rounded-2xl shadow hover:shadow-xl transition">
+ <i class="fa-solid fa-broom text-4xl text-blue-600 mb-4"></i>
+ <h3 class="text-2xl font-semibold mb-3">Deep Cleaning</h3>
+ <p class="text-gray-600">Thorough cleaning of every corner, including baseboards, fans, and hard-to-reach areas.</p>
+ </div>
+ <div class="bg-white p-8 rounded-2xl shadow hover:shadow-xl transition">
+ <i class="fa-solid fa-sync text-4xl text-blue-600 mb-4"></i>
+ <h3 class="text-2xl font-semibold mb-3">Recurring Cleaning</h3>
+ <p class="text-gray-600">Weekly, bi-weekly, or monthly cleaning to maintain a consistently fresh home.</p>
+ </div>
+ <div class="bg-white p-8 rounded-2xl shadow hover:shadow-xl transition">
+ <i class="fa-solid fa-sparkles text-4xl text-blue-600 mb-4"></i>
+ <h3 class="text-2xl font-semibold mb-3">Move-In / Move-Out</h3>
+ <p class="text-gray-600">Make your new home spotless or prepare your old one for the next tenant.</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- About -->
+ <section id="about" class="py-20">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="grid md:grid-cols-2 gap-12 items-center">
+ <div>
+ <h2 class="text-4xl font-bold mb-6">A Clean Home Creates Balance</h2>
+ <p class="text-lg text-gray-600 leading-relaxed">
+ At <strong>SF Cleaners USA LLC</strong>, we believe a clean space brings peace, reduces overwhelm, and improves your daily flow.
+ Our team provides consistent, detail-oriented cleaning that transforms your home into a healthier, more comfortable environment.
+ </p>
+ <ul class="mt-6 space-y-3">
+ <li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-500"></i> Reliable & Professional Team</li>
+ <li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-500"></i> Eco-Friendly Products Available</li>
+ <li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-500"></i> Attention to Every Detail</li>
+ <li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-500"></i> Fully Insured & Background Checked</li>
+ </ul>
+ </div>
+ <div class="bg-gray-100 p-8 rounded-3xl">
+ <div class="text-center">
+ <div class="text-6xl mb-4">🧽✨</div>
+ <p class="italic text-xl">"When your space stays organized and fresh, everything feels easier."</p>
+ <p class="mt-6 font-semibold">— SF Cleaners Team</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Reviews -->
+ <section id="reviews" class="py-20 bg-gray-50">
+ <div class="max-w-7xl mx-auto px-6">
+ <h2 class="text-4xl font-bold text-center mb-12">What Our Clients Say</h2>
+ <div class="grid md:grid-cols-2 gap-8">
+ <div class="bg-white p-8 rounded-2xl shadow">
+ <p class="italic">"Best cleaning service we've ever had! They pay attention to every detail. Our home feels brand new every time."</p>
+ <p class="mt-6 font-semibold">— Maria Rodriguez, Miami</p>
+ </div>
+ <div class="bg-white p-8 rounded-2xl shadow">
+ <p class="italic">"Reliable, professional, and trustworthy. We use them every two weeks and couldn't be happier."</p>
+ <p class="mt-6 font-semibold">— David Thompson, Coral Gables</p>
+ </div>
+ </div>
+ <p class="text-center mt-8 text-xl font-medium">⭐ 5.0 Average Rating (8 Reviews)</p>
+ </div>
+ </section>
+
+ <!-- Contact -->
+ <section id="contact" class="py-20 bg-blue-700 text-white">
+ <div class="max-w-7xl mx-auto px-6 text-center">
+ <h2 class="text-4xl font-bold mb-8">Ready for a Spotless Home?</h2>
+ <p class="text-xl mb-10">Call us today for a free estimate</p>
+ <a href="tel:7869611390" class="inline-block bg-white text-blue-700 text-3xl font-bold px-12 py-6 rounded-2xl hover:bg-gray-100 transition">
+ 📞 (786) 961-1390
+ </a>
+ <p class="mt-10">Serving Miami, Fort Lauderdale & surrounding areas</p>
+ </div>
+ </section>
+
+ <!-- Footer -->
+ <footer class="bg-gray-900 text-gray-400 py-12">
+ <div class="max-w-7xl mx-auto px-6 text-center">
+ <p class="text-2xl font-bold text-white mb-2">SF Cleaners USA LLC</p>
+ <p>Miami, Florida</p>
+ <p class="mt-6">© 2026 SF Cleaners USA LLC. All Rights Reserved.</p>
+ </div>
+ </footer>
+
+</body>
+</html>
diff --git a/docs/tienes_auto.html b/docs/tienes_auto.html
new file mode 100644
index 0000000..88295c6
--- /dev/null
+++ b/docs/tienes_auto.html
@@ -0,0 +1,792 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Tienes Auto Services – Pompano Beach, FL</title>
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
+<style>
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+ :root {
+ --black: #0f0f0f;
+ --red: #D52B1E;
+ --red-dark: #a81e13;
+ --off-white: #f5f2ed;
+ --gray: #888;
+ --light-gray: #e8e5e0;
+ }
+
+ html { scroll-behavior: smooth; }
+
+ body {
+ font-family: 'DM Sans', sans-serif;
+ background: var(--black);
+ color: var(--off-white);
+ overflow-x: hidden;
+ }
+
+ /* NAV */
+ nav {
+ position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+ display: flex; align-items: center; justify-content: space-between;
+ padding: 1.2rem 3rem;
+ background: rgba(15,15,15,0.92);
+ backdrop-filter: blur(8px);
+ border-bottom: 1px solid rgba(255,255,255,0.07);
+ }
+ .nav-logo {
+ font-family: 'Bebas Neue', sans-serif;
+ font-size: 1.6rem;
+ letter-spacing: 0.08em;
+ color: var(--off-white);
+ }
+ .nav-logo span { color: var(--red); }
+ .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
+ .nav-links a {
+ color: rgba(245,242,237,0.65);
+ text-decoration: none;
+ font-size: 0.85rem;
+ font-weight: 500;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ transition: color 0.2s;
+ }
+ .nav-links a:hover { color: var(--off-white); }
+ .nav-call {
+ background: var(--red);
+ color: #fff !important;
+ padding: 0.5rem 1.2rem;
+ border-radius: 4px;
+ }
+ .nav-call:hover { background: var(--red-dark); color: #fff !important; }
+ .nav-cta {
+ background: var(--red);
+ color: #fff !important;
+ padding: 0.5rem 1.2rem;
+ border-radius: 4px;
+ }
+ .nav-cta:hover { background: var(--red-dark); color: #fff !important; }
+ .nav-toggle {
+ display: none;
+ width: 44px;
+ height: 44px;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ gap: 5px;
+ border: 1px solid rgba(245,242,237,0.24);
+ border-radius: 4px;
+ background: rgba(255,255,255,0.04);
+ cursor: pointer;
+ }
+ .nav-toggle span {
+ display: block;
+ width: 20px;
+ height: 2px;
+ background: var(--off-white);
+ transition: transform 0.2s, opacity 0.2s;
+ }
+
+ /* HERO */
+ .hero {
+ min-height: 100vh;
+ display: flex; align-items: center;
+ padding: 8rem 3rem 4rem;
+ position: relative;
+ overflow: hidden;
+ }
+ .hero-bg {
+ position: absolute; inset: 0;
+ background: linear-gradient(135deg, #0f0f0f 0%, #1a0a08 50%, #0f0f0f 100%);
+ z-index: 0;
+ }
+ .hero-grid {
+ position: absolute; inset: 0; z-index: 0; opacity: 0.06;
+ background-image: linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);
+ background-size: 60px 60px;
+ }
+ .hero-accent {
+ position: absolute; right: -80px; top: 50%; transform: translateY(-50%);
+ width: 600px; height: 600px;
+ background: radial-gradient(circle, rgba(213,43,30,0.18) 0%, transparent 70%);
+ z-index: 0;
+ }
+ .brand-logo-cloud {
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ pointer-events: none;
+ opacity: 0.38;
+ }
+ .brand-logo {
+ position: absolute;
+ width: clamp(58px, 7vw, 92px);
+ height: clamp(42px, 5vw, 58px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.8rem;
+ border: 1px solid rgba(255,255,255,0.08);
+ border-radius: 8px;
+ background: rgba(255,255,255,0.035);
+ backdrop-filter: blur(3px);
+ box-shadow: 0 14px 40px rgba(0,0,0,0.28);
+ }
+ .brand-logo img {
+ display: block;
+ max-width: 100%;
+ max-height: 100%;
+ filter: invert(1) grayscale(1);
+ opacity: 0.72;
+ }
+ .brand-logo--text span {
+ font-family: 'Bebas Neue', sans-serif;
+ font-size: clamp(1.1rem, 2vw, 1.55rem);
+ letter-spacing: 0.08em;
+ color: rgba(245,242,237,0.78);
+ }
+ .brand-logo:nth-child(1) { left: 6%; top: 18%; }
+ .brand-logo:nth-child(2) { left: 22%; top: 11%; }
+ .brand-logo:nth-child(3) { right: 30%; top: 16%; }
+ .brand-logo:nth-child(4) { right: 12%; top: 24%; }
+ .brand-logo:nth-child(5) { left: 12%; bottom: 17%; }
+ .brand-logo:nth-child(6) { left: 34%; bottom: 11%; }
+ .brand-logo:nth-child(7) { right: 43%; bottom: 20%; }
+ .brand-logo:nth-child(8) { right: 18%; bottom: 13%; }
+ .brand-logo:nth-child(9) { left: 45%; top: 31%; }
+ .brand-logo:nth-child(10) { right: 5%; top: 49%; }
+ .brand-logo:nth-child(11) { left: 4%; top: 49%; }
+ .brand-logo:nth-child(12) { right: 35%; bottom: 39%; }
+ .hero-inner {
+ position: relative;
+ z-index: 2;
+ width: 100%;
+ max-width: 1180px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
+ gap: 4rem;
+ align-items: center;
+ }
+ .hero-content { position: relative; z-index: 2; max-width: 680px; }
+ .hero-storefront {
+ position: relative;
+ z-index: 2;
+ min-height: 480px;
+ display: flex;
+ align-items: center;
+ animation: fadeUp 0.6s 0.25s ease both;
+ }
+ .storefront-frame {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+ border: 1px solid rgba(255,255,255,0.12);
+ border-radius: 8px;
+ background: #111;
+ box-shadow: 0 28px 80px rgba(0,0,0,0.46);
+ }
+ .storefront-frame::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.62) 100%);
+ pointer-events: none;
+ }
+ .storefront-frame img {
+ display: block;
+ width: 100%;
+ aspect-ratio: 4 / 3;
+ object-fit: cover;
+ }
+ .storefront-caption {
+ position: absolute;
+ left: 1rem;
+ right: 1rem;
+ bottom: 1rem;
+ z-index: 1;
+ display: flex;
+ justify-content: space-between;
+ gap: 1rem;
+ align-items: center;
+ padding: 0.85rem 1rem;
+ border: 1px solid rgba(255,255,255,0.12);
+ border-radius: 6px;
+ background: rgba(15,15,15,0.78);
+ backdrop-filter: blur(6px);
+ }
+ .storefront-caption strong {
+ display: block;
+ font-size: 0.92rem;
+ color: var(--off-white);
+ }
+ .storefront-caption span {
+ display: block;
+ margin-top: 0.16rem;
+ font-size: 0.76rem;
+ color: rgba(245,242,237,0.58);
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ }
+ .hero-badge {
+ display: inline-flex; align-items: center; gap: 0.5rem;
+ background: rgba(213,43,30,0.15);
+ border: 1px solid rgba(213,43,30,0.4);
+ color: #ff6b5e;
+ font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
+ text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 50px;
+ margin-bottom: 1.5rem;
+ animation: fadeUp 0.6s ease both;
+ }
+ .hero-badge::before { content: '●'; font-size: 0.5rem; }
+ h1 {
+ font-family: 'Bebas Neue', sans-serif;
+ font-size: clamp(3.5rem, 9vw, 7.5rem);
+ line-height: 0.92;
+ letter-spacing: 0.02em;
+ color: var(--off-white);
+ margin-bottom: 1.5rem;
+ animation: fadeUp 0.6s 0.1s ease both;
+ }
+ h1 .accent { color: var(--red); }
+ .hero-sub {
+ font-size: 1.1rem; font-weight: 300; line-height: 1.7;
+ color: rgba(245,242,237,0.65); max-width: 520px;
+ margin-bottom: 2.5rem;
+ animation: fadeUp 0.6s 0.2s ease both;
+ }
+ .hero-actions {
+ display: flex; gap: 1rem; flex-wrap: wrap;
+ animation: fadeUp 0.6s 0.3s ease both;
+ }
+ .btn-primary {
+ background: var(--red); color: #fff;
+ padding: 0.85rem 2rem; border-radius: 4px;
+ font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em;
+ text-transform: uppercase; text-decoration: none;
+ transition: background 0.2s, transform 0.15s;
+ display: inline-flex; align-items: center; gap: 0.5rem;
+ }
+ .btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); }
+ .btn-outline {
+ border: 1px solid rgba(245,242,237,0.3); color: var(--off-white);
+ padding: 0.85rem 2rem; border-radius: 4px;
+ font-size: 0.9rem; font-weight: 500; letter-spacing: 0.05em;
+ text-transform: uppercase; text-decoration: none;
+ transition: border-color 0.2s, transform 0.15s;
+ display: inline-flex; align-items: center; gap: 0.5rem;
+ }
+ .btn-outline:hover { border-color: rgba(245,242,237,0.7); transform: translateY(-2px); }
+ .hero-stats {
+ display: flex; gap: 3rem; margin-top: 4rem;
+ border-top: 1px solid rgba(255,255,255,0.08);
+ padding-top: 2.5rem;
+ animation: fadeUp 0.6s 0.4s ease both;
+ }
+ .stat-num {
+ font-family: 'Bebas Neue', sans-serif;
+ font-size: 2.8rem; color: var(--off-white); letter-spacing: 0.03em;
+ }
+ .stat-num span { color: var(--red); }
+ .stat-label { font-size: 0.78rem; color: rgba(245,242,237,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
+
+ /* TICKER */
+ .ticker {
+ background: var(--red);
+ padding: 0.7rem 0; overflow: hidden; white-space: nowrap;
+ }
+ .ticker-track {
+ display: inline-flex; gap: 0;
+ animation: ticker 25s linear infinite;
+ }
+ .ticker-item {
+ font-family: 'Bebas Neue', sans-serif;
+ font-size: 1rem; letter-spacing: 0.12em;
+ color: rgba(255,255,255,0.9); padding: 0 2rem;
+ display: inline-flex; align-items: center; gap: 1rem;
+ }
+ .ticker-item::after { content: '◆'; font-size: 0.5rem; color: rgba(255,255,255,0.5); }
+
+ /* SERVICES */
+ .section { padding: 6rem 3rem; }
+ .section-label {
+ font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
+ text-transform: uppercase; color: var(--red); margin-bottom: 0.75rem;
+ }
+ .section-title {
+ font-family: 'Bebas Neue', sans-serif;
+ font-size: clamp(2.5rem, 5vw, 4rem);
+ line-height: 1; letter-spacing: 0.03em; margin-bottom: 1rem;
+ }
+ .section-desc { font-size: 1rem; color: rgba(245,242,237,0.55); max-width: 500px; font-weight: 300; line-height: 1.7; margin-bottom: 3rem; }
+
+ .services-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 1px;
+ background: rgba(255,255,255,0.07);
+ border: 1px solid rgba(255,255,255,0.07);
+ }
+ .service-card {
+ background: #111;
+ padding: 2rem;
+ transition: background 0.3s;
+ cursor: default;
+ }
+ .service-card:hover { background: #1a1a1a; }
+ .service-icon {
+ width: 48px; height: 48px;
+ background: rgba(213,43,30,0.12);
+ border: 1px solid rgba(213,43,30,0.25);
+ border-radius: 8px;
+ display: flex; align-items: center; justify-content: center;
+ margin-bottom: 1.25rem;
+ font-size: 1.4rem;
+ }
+ .service-name {
+ font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;
+ color: var(--off-white);
+ }
+ .service-desc { font-size: 0.88rem; color: rgba(245,242,237,0.5); line-height: 1.6; font-weight: 300; }
+
+ /* WHY US */
+ .why-grid {
+ display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
+ }
+ .why-left .big-number {
+ font-family: 'Bebas Neue', sans-serif;
+ font-size: 12rem; color: rgba(213,43,30,0.12);
+ line-height: 1; pointer-events: none; user-select: none;
+ margin-bottom: -3rem;
+ }
+ .why-list { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
+ .why-item { display: flex; gap: 1.25rem; align-items: flex-start; }
+ .why-check {
+ width: 28px; height: 28px; background: var(--red); border-radius: 50%;
+ display: flex; align-items: center; justify-content: center;
+ flex-shrink: 0; font-size: 0.75rem; color: #fff; margin-top: 2px;
+ }
+ .why-item-title { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
+ .why-item-desc { font-size: 0.88rem; color: rgba(245,242,237,0.5); line-height: 1.6; font-weight: 300; }
+
+ /* REVIEWS */
+ .reviews-section { background: #111; }
+ .reviews-grid {
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1.5rem;
+ }
+ .review-card {
+ background: #0f0f0f;
+ border: 1px solid rgba(255,255,255,0.07);
+ border-radius: 8px; padding: 1.75rem;
+ }
+ .stars { color: #f5a623; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 1rem; }
+ .review-text { font-size: 0.92rem; color: rgba(245,242,237,0.7); line-height: 1.7; margin-bottom: 1.25rem; font-weight: 300; font-style: italic; }
+ .reviewer { font-size: 0.82rem; font-weight: 600; color: var(--off-white); }
+
+ /* CONTACT */
+ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
+ .contact-info { display: flex; flex-direction: column; gap: 1.75rem; }
+ .contact-item { display: flex; gap: 1rem; align-items: flex-start; }
+ .contact-icon {
+ width: 44px; height: 44px;
+ border: 1px solid rgba(213,43,30,0.4);
+ border-radius: 8px;
+ display: flex; align-items: center; justify-content: center;
+ font-size: 1.1rem; flex-shrink: 0;
+ }
+ .contact-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--red); font-weight: 600; margin-bottom: 0.2rem; }
+ .contact-value { font-size: 1rem; font-weight: 500; }
+ .contact-value a { color: inherit; text-decoration: none; }
+ .contact-value a:hover { color: var(--red); }
+
+ .map-embed {
+ border-radius: 8px; overflow: hidden;
+ border: 1px solid rgba(255,255,255,0.08);
+ height: 320px;
+ background: #1a1a1a;
+ display: flex; align-items: center; justify-content: center;
+ flex-direction: column; gap: 0.75rem;
+ }
+ .map-placeholder { font-size: 2rem; }
+ .map-address { font-size: 0.9rem; color: rgba(245,242,237,0.5); text-align: center; max-width: 220px; line-height: 1.5; }
+
+ /* FOOTER */
+ footer {
+ border-top: 1px solid rgba(255,255,255,0.07);
+ padding: 2rem 3rem;
+ display: flex; align-items: center; justify-content: space-between;
+ flex-wrap: wrap; gap: 1rem;
+ }
+ .footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 0.08em; }
+ .footer-logo span { color: var(--red); }
+ .footer-right { font-size: 0.8rem; color: rgba(245,242,237,0.35); }
+
+ /* ANIMATIONS */
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(24px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+ @keyframes ticker {
+ from { transform: translateX(0); }
+ to { transform: translateX(-50%); }
+ }
+
+ @media (max-width: 900px) {
+ nav { padding: 1rem 1.5rem; }
+ .nav-toggle { display: inline-flex; }
+ .nav-links {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 0;
+ max-height: 0;
+ overflow: hidden;
+ padding: 0 1.5rem;
+ background: rgba(15,15,15,0.98);
+ border-bottom: 1px solid rgba(255,255,255,0.08);
+ opacity: 0;
+ pointer-events: none;
+ transform: translateY(-8px);
+ transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
+ }
+ nav.nav-open .nav-links {
+ max-height: 360px;
+ padding: 0.75rem 1.5rem 1.2rem;
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(0);
+ }
+ .nav-links li { width: 100%; }
+ .nav-links a {
+ display: flex;
+ padding: 0.85rem 0;
+ border-bottom: 1px solid rgba(255,255,255,0.08);
+ }
+ .nav-links .nav-call,
+ .nav-links .nav-cta {
+ justify-content: center;
+ margin-top: 0.65rem;
+ padding: 0.78rem 1rem;
+ border-bottom: 0;
+ }
+ nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+ nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
+ nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+ .hero { padding: 7rem 1.5rem 3rem; }
+ .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
+ .hero-storefront { min-height: auto; }
+ .brand-logo-cloud {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ align-content: space-between;
+ gap: 0.6rem;
+ padding: 6rem 1rem 2rem;
+ opacity: 0.24;
+ }
+ .brand-logo {
+ position: static;
+ width: 100%;
+ height: 34px;
+ padding: 0.45rem;
+ }
+ .brand-logo--text span { font-size: 1rem; }
+ .hero-stats { gap: 2rem; flex-wrap: wrap; }
+ .section { padding: 4rem 1.5rem; }
+ .why-grid, .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
+ .why-left .big-number { font-size: 7rem; }
+ footer { padding: 1.5rem; }
+ }
+</style>
+</head>
+<body>
+
+<nav>
+ <div class="nav-logo">Tienes<span>.</span>Auto</div>
+ <ul class="nav-links" id="primary-navigation">
+ <li><a href="#services">Services</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#reviews">Reviews</a></li>
+ <li><a href="tel:+19548653874" class="nav-call">Call (954) 865-3874</a></li>
+ <li><a href="#contact" class="nav-cta">Get Directions</a></li>
+ </ul>
+ <button class="nav-toggle" type="button" aria-controls="primary-navigation" aria-expanded="false" aria-label="Open menu">
+ <span></span>
+ <span></span>
+ <span></span>
+ </button>
+</nav>
+
+<!-- HERO -->
+ <section class="hero" id="home">
+ <div class="hero-bg"></div>
+ <div class="hero-grid"></div>
+ <div class="hero-accent"></div>
+ <div class="brand-logo-cloud" aria-hidden="true">
+ <div class="brand-logo"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/bmw.svg" alt=""></div>
+ <div class="brand-logo"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/ford.svg" alt=""></div>
+ <div class="brand-logo"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/chevrolet.svg" alt=""></div>
+ <div class="brand-logo brand-logo--text"><span>Dodge</span></div>
+ <div class="brand-logo"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/volkswagen.svg" alt=""></div>
+ <div class="brand-logo"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/mercedes.svg" alt=""></div>
+ <div class="brand-logo"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/hyundai.svg" alt=""></div>
+ <div class="brand-logo"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/kia.svg" alt=""></div>
+ <div class="brand-logo"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/landrover.svg" alt=""></div>
+ <div class="brand-logo brand-logo--text"><span>GMC</span></div>
+ <div class="brand-logo"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/cadillac.svg" alt=""></div>
+ <div class="brand-logo"><img src="https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/subaru.svg" alt=""></div>
+ </div>
+ <div class="hero-inner">
+ <div class="hero-content">
+ <div class="hero-badge">Open Now · Closes 6:30 PM</div>
+ <h1>Your Car<br>Deserves <span class="accent">The<br>Best.</span></h1>
+ <p class="hero-sub">Trusted auto repair in Pompano Beach, FL. From oil changes to full engine work — we keep South Florida moving.</p>
+ <div class="hero-actions">
+ <a href="tel:+19548653874" class="btn-primary">📞 Call (954) 865-3874</a>
+ <a href="#services" class="btn-outline">Our Services →</a>
+ </div>
+ <div class="hero-stats">
+ <div>
+ <div class="stat-num">4.9<span>★</span></div>
+ <div class="stat-label">Google Rating</div>
+ </div>
+ <div>
+ <div class="stat-num">21<span>+</span></div>
+ <div class="stat-label">Happy Reviews</div>
+ </div>
+ <div>
+ <div class="stat-num">10<span>+</span></div>
+ <div class="stat-label">Years Experience</div>
+ </div>
+ </div>
+ </div>
+ <div class="hero-storefront">
+ <div class="storefront-frame">
+ <img src="https://i.postimg.cc/QXmjVB6g/Screenshot-From-2026-06-01-10-41-44.png" alt="Tienes Auto Services storefront in Pompano Beach" loading="eager">
+ <div class="storefront-caption">
+ <div>
+ <strong>Tienes Auto Services</strong>
+ <span>Pompano Beach, FL</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+<!-- TICKER -->
+<div class="ticker">
+ <div class="ticker-track">
+ <span class="ticker-item">Oil Changes</span>
+ <span class="ticker-item">Brake Service</span>
+ <span class="ticker-item">Engine Repair</span>
+ <span class="ticker-item">Transmission</span>
+ <span class="ticker-item">A/C Service</span>
+ <span class="ticker-item">Diagnostics</span>
+ <span class="ticker-item">Tire Service</span>
+ <span class="ticker-item">Suspension</span>
+ <span class="ticker-item">Oil Changes</span>
+ <span class="ticker-item">Brake Service</span>
+ <span class="ticker-item">Engine Repair</span>
+ <span class="ticker-item">Transmission</span>
+ <span class="ticker-item">A/C Service</span>
+ <span class="ticker-item">Diagnostics</span>
+ <span class="ticker-item">Tire Service</span>
+ <span class="ticker-item">Suspension</span>
+ </div>
+</div>
+
+<!-- SERVICES -->
+<section class="section" id="services">
+ <div class="section-label">What We Do</div>
+ <div class="section-title">Full-Service<br>Auto Repair</div>
+ <div class="section-desc">From routine maintenance to complex repairs, our certified technicians handle it all with precision and care.</div>
+ <div class="services-grid">
+ <div class="service-card">
+ <div class="service-icon">🔧</div>
+ <div class="service-name">Engine Repair & Diagnostics</div>
+ <div class="service-desc">Full computer diagnostics, engine rebuilds, and tune-ups to keep your vehicle running at peak performance.</div>
+ </div>
+ <div class="service-card">
+ <div class="service-icon">🛞</div>
+ <div class="service-name">Brake Service</div>
+ <div class="service-desc">Brake pad replacement, rotor resurfacing, and complete brake system inspections for your safety.</div>
+ </div>
+ <div class="service-card">
+ <div class="service-icon">🌡️</div>
+ <div class="service-name">A/C Repair</div>
+ <div class="service-desc">Essential for South Florida! AC recharge, compressor repair, and full cooling system service.</div>
+ </div>
+ <div class="service-card">
+ <div class="service-icon">⚙️</div>
+ <div class="service-name">Transmission Service</div>
+ <div class="service-desc">Transmission fluid changes, repairs, and rebuilds for both automatic and manual vehicles.</div>
+ </div>
+ <div class="service-card">
+ <div class="service-icon">🛢️</div>
+ <div class="service-name">Oil Change & Lube</div>
+ <div class="service-desc">Conventional, synthetic, and high-mileage oil changes with filter replacement and multi-point inspection.</div>
+ </div>
+ <div class="service-card">
+ <div class="service-icon">🔩</div>
+ <div class="service-name">Suspension & Alignment</div>
+ <div class="service-desc">Shocks, struts, steering components, and precision wheel alignment for a smooth ride.</div>
+ </div>
+ </div>
+</section>
+
+<!-- WHY US -->
+<section class="section reviews-section" id="about">
+ <div class="why-grid">
+ <div class="why-left">
+ <div class="big-number">4.9</div>
+ <div class="section-label">Why Choose Us</div>
+ <div class="section-title">Pompano's<br>Most Trusted<br>Shop</div>
+ </div>
+ <div class="why-right">
+ <ul class="why-list">
+ <li class="why-item">
+ <div class="why-check">✓</div>
+ <div>
+ <div class="why-item-title">Honest, Transparent Pricing</div>
+ <div class="why-item-desc">We explain every repair before we start. No hidden fees, no surprises on your bill.</div>
+ </div>
+ </li>
+ <li class="why-item">
+ <div class="why-check">✓</div>
+ <div>
+ <div class="why-item-title">Experienced Technicians</div>
+ <div class="why-item-desc">Our mechanics have years of hands-on experience with domestic and foreign vehicles.</div>
+ </div>
+ </li>
+ <li class="why-item">
+ <div class="why-check">✓</div>
+ <div>
+ <div class="why-item-title">Wheelchair Accessible</div>
+ <div class="why-item-desc">Our facility is fully accessible to all customers. Everyone is welcome here.</div>
+ </div>
+ </li>
+ <li class="why-item">
+ <div class="why-check">✓</div>
+ <div>
+ <div class="why-item-title">Locally Owned & Operated</div>
+ <div class="why-item-desc">We're your Pompano Beach neighbors — invested in this community and your satisfaction.</div>
+ </div>
+ </li>
+ <li class="why-item">
+ <div class="why-check">✓</div>
+ <div>
+ <div class="why-item-title">Quick Turnaround</div>
+ <div class="why-item-desc">We value your time. Most services are completed same-day so you're back on the road fast.</div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+</section>
+
+<!-- REVIEWS -->
+<section class="section" id="reviews">
+ <div class="section-label">Customer Reviews</div>
+ <div class="section-title">What People<br>Are Saying</div>
+ <div class="section-desc" style="margin-bottom:2.5rem;">4.9 stars across 21 reviews on Google. Hear from real Pompano Beach customers.</div>
+ <div class="reviews-grid">
+ <div class="review-card">
+ <div class="stars">★★★★★</div>
+ <div class="review-text">"Best mechanic shop in Pompano Beach. They were honest about what my car needed and didn't try to upsell me on anything unnecessary. Will definitely be back!"</div>
+ <div class="reviewer">Maria G. — Pompano Beach, FL</div>
+ </div>
+ <div class="review-card">
+ <div class="stars">★★★★★</div>
+ <div class="review-text">"Fixed my A/C in the middle of summer — lifesaver! The price was fair and they had it done by the afternoon. Great team, very professional."</div>
+ <div class="reviewer">Carlos M. — Deerfield Beach, FL</div>
+ </div>
+ <div class="review-card">
+ <div class="stars">★★★★★</div>
+ <div class="review-text">"I've been bringing all three of my family's cars here for years. They always do great work and treat you like family. Highly recommend Tienes Auto."</div>
+ <div class="reviewer">Jennifer T. — Fort Lauderdale, FL</div>
+ </div>
+ </div>
+</section>
+
+<!-- CONTACT -->
+<section class="section reviews-section" id="contact">
+ <div class="section-label">Find Us</div>
+ <div class="section-title">Come See<br>Us Today</div>
+ <div style="height:1.5rem;"></div>
+ <div class="contact-grid">
+ <div class="contact-info">
+ <div class="contact-item">
+ <div class="contact-icon">📍</div>
+ <div>
+ <div class="contact-label">Address</div>
+ <div class="contact-value">2420 NE 5th Ave<br>Pompano Beach, FL 33064</div>
+ </div>
+ </div>
+ <div class="contact-item">
+ <div class="contact-icon">📞</div>
+ <div>
+ <div class="contact-label">Phone</div>
+ <div class="contact-value"><a href="tel:+19548653874">(954) 865-3874</a></div>
+ </div>
+ </div>
+ <div class="contact-item">
+ <div class="contact-icon">🕐</div>
+ <div>
+ <div class="contact-label">Hours</div>
+ <div class="contact-value" style="font-size:0.9rem; line-height:1.8;">
+ Mon – Fri: 8:00 AM – 6:30 PM<br>
+ Sat: By Appointment<br>
+ Sun: Closed
+ </div>
+ </div>
+ </div>
+ <a href="https://maps.google.com/?q=tienes+auto+services+pompano+beach" target="_blank" class="btn-primary" style="align-self:flex-start; margin-top:0.5rem;">
+ Get Directions →
+ </a>
+ </div>
+ <div class="map-embed">
+ <div class="map-placeholder">🗺️</div>
+ <div style="font-size:1rem;font-weight:600;">2420 NE 5th Ave</div>
+ <div class="map-address">Pompano Beach, FL 33064<br><br>
+ <a href="https://maps.google.com/?q=tienes+auto+services+pompano+beach" target="_blank" style="color:var(--red);text-decoration:none;font-size:0.82rem;font-weight:600;">Open in Google Maps →</a>
+ </div>
+ </div>
+ </div>
+</section>
+
+<!-- FOOTER -->
+<footer>
+ <div class="footer-logo">Tienes<span>.</span>Auto Services</div>
+ <div class="footer-right">© 2026 Tienes Auto Services · Pompano Beach, FL · (954) 865-3874</div>
+</footer>
+
+<script>
+ const nav = document.querySelector('nav');
+ const navToggle = document.querySelector('.nav-toggle');
+ const navMenu = document.getElementById('primary-navigation');
+
+ navToggle.addEventListener('click', () => {
+ const isOpen = nav.classList.toggle('nav-open');
+ navToggle.setAttribute('aria-expanded', String(isOpen));
+ navToggle.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');
+ });
+
+ navMenu.querySelectorAll('a').forEach((link) => {
+ link.addEventListener('click', () => {
+ nav.classList.remove('nav-open');
+ navToggle.setAttribute('aria-expanded', 'false');
+ navToggle.setAttribute('aria-label', 'Open menu');
+ });
+ });
+</script>
+
+</body>
+</html>