patx/demo
add speed51
Commit edf3950 · patx · 2026-06-01T11:53:50-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index c9ff673..a2e101e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,6 +8,7 @@
<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>
</ul>
</body>
</html>
diff --git a/docs/speed51.html b/docs/speed51.html
new file mode 100644
index 0000000..f84169b
--- /dev/null
+++ b/docs/speed51.html
@@ -0,0 +1,292 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Speed 51 Motorsport | Collision & Paint Specialists</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.75), rgba(0,0,0,0.85)),
+ url('https://picsum.photos/id/1071/2000/1200');
+ background-size: cover;
+ background-position: center;
+ }
+
+ .service-card:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 20px 40px -10px rgb(239 68 68 / 0.4);
+ }
+
+ .gallery-img {
+ transition: all 0.4s ease;
+ }
+
+ .gallery-img:hover {
+ transform: scale(1.05);
+ filter: brightness(1.1);
+ }
+
+ .red-accent { color: #ef4444; }
+ </style>
+</head>
+<body class="bg-zinc-950 text-white">
+
+ <!-- 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="https://i.postimg.cc/VNcfbTpj/Screenshot-From-2026-06-01-11-49-42.png" alt="SPEED 51" style="max-height: 64px;"></span>
+ </div>
+ </div>
+
+ <div class="hidden md:flex items-center gap-8 text-sm font-medium">
+ <a href="#services" class="hover:text-red-400 transition">Services</a>
+ <a href="#gallery" class="hover:text-red-400 transition">Gallery</a>
+ <a href="#contact" class="hover:text-red-400 transition">Contact</a>
+ </div>
+
+ <div class="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>
+ <button onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"
+ class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-2xl font-semibold transition">
+ 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-red-600 text-white text-sm font-medium px-6 py-3 rounded-full mb-6">
+ <i class="fas fa-car-crash"></i>
+ COLLISION & PAINT EXPERTS
+ </div>
+
+ <h1 class="text-6xl md:text-7xl font-bold tracking-tighter leading-none mb-6 logo-font">
+ YOUR CAR.<br>BACK TO PERFECTION.
+ </h1>
+
+ <p class="text-2xl text-zinc-300 mb-10">
+ Expert collision repair and flawless paint restoration in Pompano Beach.
+ </p>
+
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
+ <button onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"
+ class="bg-red-600 hover:bg-red-700 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:7542744514"
+ class="border-2 border-white/70 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>
+ </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 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+ <div>
+ <div class="text-4xl font-bold red-accent">501 NE</div>
+ <p class="text-zinc-400">26th Ct, Pompano Beach</p>
+ </div>
+ <div>
+ <div class="text-4xl font-bold red-accent">754</div>
+ <p class="text-zinc-400">274-4514</p>
+ </div>
+ <div>
+ <div class="text-4xl font-bold red-accent">FREE</div>
+ <p class="text-zinc-400">Estimates</p>
+ </div>
+ <div>
+ <div class="text-4xl font-bold red-accent">INSURANCE</div>
+ <p class="text-zinc-400">Approved</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- SERVICES -->
+ <section id="services" 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-16">Expert Collision & Paint Services</h2>
+
+ <div class="grid md:grid-cols-3 gap-8">
+ <div class="service-card bg-zinc-900 rounded-3xl p-8">
+ <div class="text-5xl mb-6">🚗</div>
+ <h3 class="text-2xl font-semibold mb-4">Collision Repair</h3>
+ <p class="text-zinc-400">Structural repairs, frame straightening, and full collision restoration.</p>
+ </div>
+
+ <div class="service-card bg-zinc-900 rounded-3xl p-8">
+ <div class="text-5xl mb-6">🎨</div>
+ <h3 class="text-2xl font-semibold mb-4">Premium Paint Work</h3>
+ <p class="text-zinc-400">Flawless color matching and high-end factory-like finishes.</p>
+ </div>
+
+ <div class="service-card bg-zinc-900 rounded-3xl p-8">
+ <div class="text-5xl mb-6">🔧</div>
+ <h3 class="text-2xl font-semibold mb-4">Full Restoration</h3>
+ <p class="text-zinc-400">From minor dents to major damage — we bring vehicles back to life.</p>
+ </div>
+ </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">Recent Work</h2>
+ <p class="text-zinc-400 mt-2">Real transformations from our Pompano Beach shop</p>
+ </div>
+ <a href="https://www.instagram.com/speed51motorsport/" target="_blank"
+ class="text-red-400 hover:text-red-500 flex items-center gap-2 text-sm font-medium">
+ VIEW FULL GALLERY 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">
+ <!-- Gallery Images (placeholders - replace with real Instagram images) -->
+ <div class="overflow-hidden rounded-3xl">
+ <img src="https://picsum.photos/id/1015/600/600" alt="Collision Repair" class="gallery-img w-full h-full object-cover">
+ </div>
+ <div class="overflow-hidden rounded-3xl">
+ <img src="https://picsum.photos/id/106/600/600" alt="Paint Restoration" 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="Before & After" 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="Premium Paint" class="gallery-img w-full h-full object-cover">
+ </div>
+ <div class="overflow-hidden rounded-3xl">
+ <img src="https://picsum.photos/id/237/600/600" alt="Car Restoration" 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="Detail Work" class="gallery-img w-full h-full object-cover">
+ </div>
+ <div class="overflow-hidden rounded-3xl">
+ <img src="https://picsum.photos/id/1018/600/600" alt="Collision Fix" 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="Final Result" class="gallery-img w-full h-full object-cover">
+ </div>
+ </div>
+
+ <p class="text-center text-zinc-500 text-sm mt-8">
+ More stunning transformations available on our <a href="https://www.instagram.com/speed51motorsport/" target="_blank" class="text-red-400 hover:underline">Instagram @speed51motorsport</a>
+ </p>
+ </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">
+ <!-- Contact Info -->
+ <div>
+ <h2 class="text-5xl font-bold tracking-tighter mb-8">Get Your Free Estimate</h2>
+ <p class="text-zinc-300 mb-8 text-lg">
+ Fill out the form below or call us directly. Most estimates are provided same-day.
+ </p>
+
+ <div class="space-y-8">
+ <div class="flex gap-4">
+ <i class="fas fa-map-marker-alt text-red-500 text-3xl"></i>
+ <div>
+ <p class="font-semibold text-xl">501 NE 26th Ct</p>
+ <p class="text-zinc-400">Pompano Beach, FL 33064</p>
+ </div>
+ </div>
+ <div class="flex gap-4">
+ <i class="fas fa-phone text-red-500 text-3xl"></i>
+ <div>
+ <a href="tel:7542744514" class="font-semibold text-xl hover:text-red-400">(754) 274-4514</a>
+ </div>
+ </div>
+ <div class="flex gap-4">
+ <i class="fas fa-envelope text-red-500 text-3xl"></i>
+ <div>
+ <a href="mailto:[email protected]" class="font-medium">[email protected]</a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Contact Form -->
+ <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-zinc-800 border border-zinc-700 rounded-2xl px-5 py-4 focus:outline-none focus:border-red-500">
+ </div>
+ <div>
+ <label class="block text-sm text-zinc-400 mb-2">Last Name</label>
+ <input type="text" required
+ class="w-full bg-zinc-800 border border-zinc-700 rounded-2xl px-5 py-4 focus:outline-none focus:border-red-500">
+ </div>
+ </div>
+
+ <div>
+ <label class="block text-sm text-zinc-400 mb-2">Phone Number</label>
+ <input type="tel" required
+ class="w-full bg-zinc-800 border border-zinc-700 rounded-2xl px-5 py-4 focus:outline-none focus:border-red-500">
+ </div>
+
+ <div>
+ <label class="block text-sm text-zinc-400 mb-2">Email Address</label>
+ <input type="email" required
+ class="w-full bg-zinc-800 border border-zinc-700 rounded-2xl px-5 py-4 focus:outline-none focus:border-red-500">
+ </div>
+
+ <div>
+ <label class="block text-sm text-zinc-400 mb-2">Describe Your Vehicle & Damage</label>
+ <textarea rows="4" required
+ class="w-full bg-zinc-800 border border-zinc-700 rounded-3xl px-5 py-4 focus:outline-none focus:border-red-500"></textarea>
+ </div>
+
+ <button type="submit"
+ class="w-full bg-red-600 hover:bg-red-700 py-6 rounded-3xl text-xl font-semibold transition">
+ SUBMIT FOR FREE ESTIMATE
+ </button>
+ </form>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- FOOTER -->
+ <footer class="bg-zinc-950 py-12 border-t border-zinc-800">
+ <div class="max-w-7xl mx-auto px-6 text-center text-zinc-500">
+ <p class="text-xl font-semibold text-white mb-2">SPEED 51 MOTORSPORT</p>
+ <p>Expert Collision Repair & Premium Paint Services • Pompano Beach, Florida</p>
+ <p class="mt-6 text-sm">© 2026 Speed 51 Motorsport. All Rights Reserved.</p>
+ </div>
+ </footer>
+
+ <script>
+ 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>