patx/demo
add mac tires logo
Commit b6ab242 · patx · 2026-06-01T11:26:50-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index df14cbb..c9ff673 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,6 +7,7 @@
<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>
</ul>
</body>
</html>
diff --git a/docs/mac_tires.html b/docs/mac_tires.html
new file mode 100644
index 0000000..d11634a
--- /dev/null
+++ b/docs/mac_tires.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mac Tires Inc. | New Tires at Wholesale Prices</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@500;600;700&display=swap');
+
+ .logo-font { font-family: 'Space Grotesk', sans-serif; }
+ .hero-bg {
+ background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)),
+ url('https://picsum.photos/id/1074/2000/1200');
+ background-size: cover;
+ background-position: center;
+ }
+ .service-card:hover {
+ transform: translateY(-12px);
+ box-shadow: 0 25px 50px -12px rgb(14 165 233 / 0.3);
+ }
+ </style>
+</head>
+<body class="bg-zinc-950 text-white font-sans">
+
+ <!-- NAVBAR -->
+ <nav class="bg-black border-b border-zinc-800 fixed w-full z-50">
+ <div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
+ <div class="flex items-center gap-3">
+ <div>
+ <span class="text-3xl font-bold tracking-tighter logo-font"><img src="/demo/mac_tires_logo.png" alt="MAC TIRES"></span>
+ </div>
+ </div>
+
+ <div class="hidden md:flex items-center gap-8 text-sm font-medium">
+ <a href="#tires" class="hover:text-sky-400 transition">Wholesale Tires</a>
+ <a href="#services" class="hover:text-sky-400 transition">Services</a>
+ <a href="#reviews" class="hover:text-sky-400 transition">Reviews</a>
+ <a href="#contact" class="hover:text-sky-400 transition">Contact</a>
+ </div>
+
+ <div class="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>
+ <button onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"
+ class="bg-sky-500 hover:bg-sky-600 px-6 py-3 rounded-2xl font-semibold transition">
+ GET QUOTE
+ </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-4xl mx-auto">
+ <div class="inline-flex items-center gap-2 bg-emerald-600 text-white text-sm font-medium px-5 py-2.5 rounded-full mb-6">
+ <i class="fas fa-bolt"></i>
+ NEW TIRES AT WHOLESALE PRICES
+ </div>
+
+ <h1 class="text-6xl md:text-7xl font-bold tracking-tighter leading-none mb-6 logo-font">
+ DRIVE BETTER.<br>SPEND LESS.
+ </h1>
+
+ <p class="text-2xl md:text-3xl text-zinc-300 mb-10">
+ Premium new tires at true wholesale prices in Pompano Beach.
+ </p>
+
+ <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+ <button onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"
+ class="bg-white text-black hover:bg-emerald-400 hover:text-white w-full sm:w-auto px-10 py-6 rounded-3xl text-xl font-semibold flex items-center justify-center gap-3 transition">
+ SEE WHOLESALE PRICES
+ </button>
+
+ <a href="tel:9547862727"
+ class="border-2 border-white/60 hover:border-white 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 class="mt-12 flex justify-center items-center gap-8 text-sm">
+ <div class="flex items-center gap-2">
+ <span class="text-4xl text-amber-400">★★★★</span>
+ <div>
+ <div class="font-semibold">4.8 • 30 Reviews</div>
+ </div>
+ </div>
+ <div class="h-8 w-px bg-white/20"></div>
+ <div class="text-emerald-400 font-medium">Same Day Installation • Open Today</div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- TRUST BAR -->
+ <div class="bg-zinc-900 py-8 border-b border-zinc-800">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+ <div>
+ <div class="text-4xl font-bold text-sky-400">WHOLESALE</div>
+ <p class="text-zinc-400 text-sm">Direct Tire Pricing</p>
+ </div>
+ <div>
+ <div class="text-4xl font-bold text-sky-400">30+</div>
+ <p class="text-zinc-400 text-sm">Years Experience</p>
+ </div>
+ <div>
+ <div class="text-4xl font-bold text-sky-400">4.8</div>
+ <p class="text-zinc-400 text-sm">Customer Rating</p>
+ </div>
+ <div>
+ <div class="text-4xl font-bold text-sky-400">518 NE 26th Ct</div>
+ <p class="text-zinc-400 text-sm">Pompano Beach, FL</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- MAIN SELLING POINT SECTION -->
+ <section id="tires" class="py-24 bg-black">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="grid md:grid-cols-2 gap-16 items-center">
+ <div>
+ <h2 class="text-5xl font-bold tracking-tighter mb-6">New Tires at<br><span class="text-sky-400">Real Wholesale Prices</span></h2>
+ <p class="text-xl text-zinc-400 mb-8">
+ Why pay dealer or big-box markups? At Mac Tires, you get top-brand tires at prices most shops can’t match.
+ </p>
+ <ul class="space-y-4 text-lg">
+ <li class="flex items-start gap-3"><i class="fas fa-check text-emerald-400 mt-1"></i> Michelin, Bridgestone, Goodyear, Cooper & more</li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-emerald-400 mt-1"></i> Free mounting & balancing on most sets</li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-emerald-400 mt-1"></i> Road hazard protection included</li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-emerald-400 mt-1"></i> Price match guarantee</li>
+ </ul>
+ <button onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"
+ class="mt-10 bg-sky-500 hover:bg-sky-600 px-8 py-4 rounded-2xl font-semibold text-lg">
+ GET YOUR WHOLESALE QUOTE →
+ </button>
+ </div>
+ <div class="bg-zinc-900 rounded-3xl p-8 text-center">
+ <div class="text-6xl font-bold text-emerald-400 mb-2">SAVE UP TO</div>
+ <div class="text-8xl font-bold tracking-tighter logo-font text-white">30%</div>
+ <p class="text-zinc-400 mt-2">Compared to big chain stores</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- 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">Expert Services</h2>
+ <div class="grid md:grid-cols-3 gap-8">
+ <div class="service-card bg-black rounded-3xl p-8">
+ <h3 class="text-2xl font-semibold mb-4">Tire Sales & Installation</h3>
+ <p class="text-zinc-400">New tires at wholesale prices with professional installation, balancing, and alignment.</p>
+ </div>
+ <div class="service-card bg-black rounded-3xl p-8">
+ <h3 class="text-2xl font-semibold mb-4">Wheel Alignments</h3>
+ <p class="text-zinc-400">Precision alignments that make your Mercedes, BMW, or truck drive like new.</p>
+ </div>
+ <div class="service-card bg-black rounded-3xl p-8">
+ <h3 class="text-2xl font-semibold mb-4">Auto & Diesel Repair</h3>
+ <p class="text-zinc-400">Full-service mechanical repairs at honest, competitive prices.</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- REVIEWS -->
+ <section id="reviews" class="py-24 bg-black">
+ <div class="max-w-7xl mx-auto px-6">
+ <h2 class="text-center text-5xl font-bold tracking-tighter mb-12">Real Customers. Real Results.</h2>
+ <div class="grid md:grid-cols-3 gap-8">
+ <div class="bg-zinc-900 rounded-3xl p-8">
+ <div class="text-amber-400 text-2xl mb-4">★★★★★</div>
+ <p class="italic">"Tire prices are great and he does excellent mechanical work at fair prices. Don't go to the dealer — come here!"</p>
+ <p class="mt-6 font-medium">- Mike Z.</p>
+ </div>
+ <div class="bg-zinc-900 rounded-3xl p-8">
+ <div class="text-amber-400 text-2xl mb-4">★★★★★</div>
+ <p class="italic">"THE best place to buy tires in South Florida. Kevin is a great guy and does perfect alignments."</p>
+ <p class="mt-6 font-medium">- Christopher Warren</p>
+ </div>
+ <div class="bg-zinc-900 rounded-3xl p-8">
+ <div class="text-amber-400 text-2xl mb-4">★★★★★</div>
+ <p class="italic">"Great service and prices. Quick, easy, and Kevin always does what he promises."</p>
+ <p class="mt-6 font-medium">- Brian Dublynn</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- CONTACT / LOCATION -->
+ <section id="contact" class="py-24 bg-zinc-900">
+ <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 Today</h2>
+ <div class="space-y-6 text-lg">
+ <div class="flex gap-4">
+ <i class="fas fa-map-marker-alt text-sky-400 text-2xl mt-1"></i>
+ <div>
+ <p class="font-medium">518 NE 26th Court</p>
+ <p class="text-zinc-400">Pompano Beach, FL 33064</p>
+ </div>
+ </div>
+ <div class="flex gap-4">
+ <i class="fas fa-phone text-sky-400 text-2xl mt-1"></i>
+ <div>
+ <a href="tel:9547862727" class="font-medium hover:text-sky-400">(954) 786-2727</a>
+ </div>
+ </div>
+ <div class="flex gap-4">
+ <i class="fas fa-clock text-sky-400 text-2xl mt-1"></i>
+ <div>
+ <p class="font-medium">Open Today • Closes at 5:00 PM</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div>
+ <button onclick="window.open('https://www.google.com/maps/place/Mac+Tires+Inc./@26.2637622,-80.1149852,17z', '_blank')"
+ class="w-full bg-white text-black py-6 rounded-3xl text-xl font-semibold hover:bg-sky-400 hover:text-white transition">
+ GET DIRECTIONS
+ </button>
+ </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 text-sm">
+ <p>© 2026 Mac Tires Inc. • Pompano Beach, Florida</p>
+ <p class="mt-2">Expert Tire Service & Auto Repair • Honest Prices • Quality Work</p>
+ </div>
+ </footer>
+
+</body>
+</html>
diff --git a/docs/mac_tires_logo.png b/docs/mac_tires_logo.png
new file mode 100644
index 0000000..05d6706
Binary files /dev/null and b/docs/mac_tires_logo.png differ