patx/demo
add eagle painting
Commit 20ac440 · patx · 2026-06-08T11:37:38-04:00
Comments
No comments yet.
Diff
diff --git a/docs/eagle-1.png b/docs/eagle-1.png
new file mode 100644
index 0000000..2a07253
Binary files /dev/null and b/docs/eagle-1.png differ
diff --git a/docs/eagle-2.png b/docs/eagle-2.png
new file mode 100644
index 0000000..5942f03
Binary files /dev/null and b/docs/eagle-2.png differ
diff --git a/docs/eagle-3.png b/docs/eagle-3.png
new file mode 100644
index 0000000..dd1eb0e
Binary files /dev/null and b/docs/eagle-3.png differ
diff --git a/docs/eagle-4.png b/docs/eagle-4.png
new file mode 100644
index 0000000..a433552
Binary files /dev/null and b/docs/eagle-4.png differ
diff --git a/docs/eagle-5.png b/docs/eagle-5.png
new file mode 100644
index 0000000..ff7901a
Binary files /dev/null and b/docs/eagle-5.png differ
diff --git a/docs/eagle-hero.webp b/docs/eagle-hero.webp
new file mode 100644
index 0000000..3443cec
Binary files /dev/null and b/docs/eagle-hero.webp differ
diff --git a/docs/eagle-logo.png b/docs/eagle-logo.png
new file mode 100644
index 0000000..23b923c
Binary files /dev/null and b/docs/eagle-logo.png differ
diff --git a/docs/eagle_painting.html b/docs/eagle_painting.html
new file mode 100644
index 0000000..c731ea8
--- /dev/null
+++ b/docs/eagle_painting.html
@@ -0,0 +1,579 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Eagle Painting Solutions LLC | Professional Painting & Renovation</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=Playfair+Display:wght@700&display=swap');
+ body { font-family: 'Inter', system-ui, sans-serif; }
+ .hero-bg {
+ background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('eagle-hero.webp');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+ }
+ .nav-link {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ transition: all 0.3s ease;
+ }
+ .nav-link::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -0.35rem;
+ height: 2px;
+ border-radius: 999px;
+ background: #2563eb;
+ transform: scaleX(0);
+ transform-origin: center;
+ transition: transform 0.3s ease;
+ }
+ .nav-link:hover {
+ color: #2563eb;
+ transform: translateY(-2px);
+ }
+ .nav-link.active,
+ .nav-link[aria-current="location"] {
+ color: #2563eb;
+ }
+ .nav-link.active::after,
+ .nav-link[aria-current="location"]::after {
+ transform: scaleX(1);
+ }
+ .service-card {
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+ .service-card:hover {
+ transform: translateY(-12px);
+ box-shadow: 0 25px 50px -12px rgb(37 99 235 / 0.15);
+ }
+ #mobile-call-cta {
+ opacity: 0;
+ pointer-events: none;
+ transform: translateY(1.5rem);
+ }
+ #mobile-call-cta.is-visible {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(0);
+ }
+ .gallery-image-trigger {
+ display: block;
+ width: 100%;
+ border: 0;
+ background: transparent;
+ padding: 0;
+ cursor: zoom-in;
+ }
+ .gallery-image-trigger:focus-visible {
+ outline: 3px solid #2563eb;
+ outline-offset: 4px;
+ border-radius: 1.5rem;
+ }
+ .gallery-image-trigger img {
+ transition: transform 0.35s ease, filter 0.35s ease;
+ }
+ .gallery-image-trigger:hover img {
+ filter: saturate(1.05) contrast(1.05);
+ transform: scale(1.03);
+ }
+ .image-modal {
+ position: fixed;
+ inset: 0;
+ z-index: 1000;
+ display: grid;
+ place-items: center;
+ padding: clamp(1rem, 4vw, 3rem);
+ background: rgba(15, 23, 42, 0.48);
+ backdrop-filter: blur(18px);
+ -webkit-backdrop-filter: blur(18px);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transition: opacity 0.2s ease, visibility 0.2s ease;
+ }
+ .image-modal.is-open {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+ }
+ .image-modal img {
+ max-width: 100%;
+ max-height: 92vh;
+ object-fit: contain;
+ }
+ .image-modal-close {
+ position: fixed;
+ top: 1rem;
+ right: 1rem;
+ width: 44px;
+ height: 44px;
+ border: 0;
+ background: transparent;
+ color: #fff;
+ font: 300 2.5rem/1 'Inter', system-ui, sans-serif;
+ cursor: pointer;
+ }
+ .image-modal-close:focus-visible {
+ outline: 2px solid #93c5fd;
+ outline-offset: 4px;
+ }
+ body.modal-open {
+ overflow: hidden;
+ }
+ .quote-form.is-submitted > :not(#form-success) {
+ display: none;
+ }
+ </style>
+</head>
+<body class="bg-white text-gray-900 overflow-x-hidden">
+ <!-- Navbar -->
+ <nav class="bg-white border-b sticky top-0 z-50 shadow-sm">
+ <div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
+ <a href="#home" class="flex min-w-0 items-center" aria-label="Eagle Painting Solutions home">
+ <img src="eagle-logo.png" alt="Eagle Painting Solutions" class="h-14 w-auto max-w-[190px] object-contain sm:h-16 sm:max-w-[230px]">
+ </a>
+
+ <div class="hidden md:flex items-center gap-x-9 text-base font-medium">
+ <a href="#home" class="nav-link text-gray-700">Home</a>
+ <a href="#about" class="nav-link text-gray-700">About Us</a>
+ <a href="#services" class="nav-link text-gray-700">Services</a>
+ <a href="#areas" class="nav-link text-gray-700">Areas</a>
+ <a href="#gallery" class="nav-link text-gray-700">Gallery</a>
+ <a href="#contact" class="nav-link text-gray-700">Get Quote</a>
+ </div>
+
+ <div class="flex items-center gap-x-4">
+ <a href="tel:4705797636" class="hidden sm:flex items-center gap-x-2.5 bg-blue-600 hover:bg-blue-700 text-white px-7 py-3.5 rounded-2xl font-semibold transition-all active:scale-95">
+ <i class="fas fa-phone"></i>
+ <span>(470) 579-7636</span>
+ </a>
+ <button onclick="toggleMobileMenu()" class="md:hidden p-3 text-3xl">
+ <i class="fas fa-bars"></i>
+ </button>
+ </div>
+ </div>
+
+ <!-- Mobile Menu -->
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t py-6 px-6">
+ <div class="flex flex-col gap-y-6 text-lg font-medium">
+ <a href="#home" onclick="toggleMobileMenu()" class="nav-link">Home</a>
+ <a href="#about" onclick="toggleMobileMenu()" class="nav-link">About Us</a>
+ <a href="#services" onclick="toggleMobileMenu()" class="nav-link">Services</a>
+ <a href="#areas" onclick="toggleMobileMenu()" class="nav-link">Service Areas</a>
+ <a href="#gallery" onclick="toggleMobileMenu()" class="nav-link">Gallery</a>
+ <a href="#contact" onclick="toggleMobileMenu()" class="nav-link">Get Quote</a>
+ <a href="tel:4705797636" class="bg-blue-600 text-white text-center py-4 rounded-2xl font-semibold">Call (470) 579-7636</a>
+ </div>
+ </div>
+ </nav>
+
+ <!-- HERO -->
+ <section id="home" class="hero-bg h-screen flex items-center text-white relative">
+ <div class="max-w-5xl mx-auto px-6 text-center">
+ <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-md px-6 py-3 rounded-3xl mb-8">
+ <span class="uppercase tracking-[3px] text-sm font-medium">Cumming, GA • North Georgia</span>
+ </div>
+
+ <h1 class="text-6xl md:text-7xl font-bold leading-none tracking-tighter mb-6">
+ TRANSFORM YOUR SPACE<br>WITH EXPERT PAINTING
+ </h1>
+ <p class="max-w-xl mx-auto text-xl md:text-2xl opacity-90 mb-10">
+ Interior • Exterior • Renovations • Carpentry<br>
+ Professional. Reliable. Guaranteed.
+ </p>
+
+ <div class="flex flex-col sm:flex-row items-center justify-center gap-5">
+ <a href="#contact" class="px-12 py-6 bg-white text-blue-700 font-semibold text-xl rounded-3xl hover:bg-blue-50 transition flex items-center gap-x-4 group">
+ GET FREE QUOTE
+ <i class="fas fa-arrow-right group-active:rotate-45 transition"></i>
+ </a>
+ <a href="tel:4705797636" class="px-10 py-6 border-2 border-white font-semibold text-xl rounded-3xl hover:bg-white/10 transition flex items-center gap-x-3">
+ <i class="fas fa-phone"></i>
+ CALL US (470) 579-7636
+ </a>
+ </div>
+
+ <div class="mt-16 flex justify-center gap-x-12 text-sm opacity-75">
+ <div class="flex items-center gap-x-3">
+ <i class="fas fa-check-circle text-emerald-400"></i>
+ <span>1-Year Warranty</span>
+ </div>
+ <div class="flex items-center gap-x-3">
+ <i class="fas fa-check-circle text-emerald-400"></i>
+ <span>Licensed & Insured</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce">
+ <i class="fas fa-chevron-down text-4xl"></i>
+ </div>
+ </section>
+
+ <!-- ABOUT -->
+ <section id="about" class="py-28 bg-gray-50">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="grid lg:grid-cols-12 gap-16 items-center">
+ <div class="lg:col-span-7">
+ <div class="flex items-center gap-x-4 text-blue-600 mb-6">
+ <div class="h-px w-12 bg-blue-600"></div>
+ <span class="font-semibold tracking-widest text-sm">EST. 2023</span>
+ </div>
+ <h2 class="text-5xl md:text-6xl font-bold leading-none tracking-tighter mb-8">Eagle Painting Solutions LLC</h2>
+ <div class="max-w-2xl text-lg leading-relaxed text-gray-600">
+ <p class="mb-6">We are a family-owned and operated painting and renovation company serving Cumming, Georgia and surrounding North Georgia communities. With a passion for quality craftsmanship, we deliver beautiful, long-lasting results on every project.</p>
+ <p>From a fresh coat of paint to complete home transformations, our experienced team handles it all with care and attention to detail.</p>
+ </div>
+
+ <div class="mt-12 grid grid-cols-3 gap-8">
+ <div>
+ <div class="text-5xl font-bold text-blue-600 mb-1">500+</div>
+ <div class="font-medium">Projects Completed</div>
+ </div>
+ <div>
+ <div class="text-5xl font-bold text-blue-600 mb-1">100%</div>
+ <div class="font-medium">Satisfaction Rate</div>
+ </div>
+ <div>
+ <div class="text-5xl font-bold text-blue-600 mb-1">10+</div>
+ <div class="font-medium">Years Combined Exp.</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="lg:col-span-5">
+ <div class="relative">
+ <img src="eagle-1.png" alt="Our team at work" class="rounded-3xl shadow-2xl">
+ <div class="absolute -bottom-6 -right-6 bg-white p-8 rounded-3xl shadow-2xl max-w-xs">
+ <div class="flex gap-x-4 items-start">
+ <div class="text-6xl">🦅</div>
+ <div>
+ <div class="font-bold text-xl">Quality You Can Trust</div>
+ <div class="text-gray-500 mt-2">Licensed • Insured • Professional</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- SERVICES -->
+ <section id="services" class="py-28">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="text-center mb-16">
+ <span class="px-6 py-2 bg-blue-100 text-blue-700 rounded-3xl text-sm font-semibold">OUR SERVICES</span>
+ <h2 class="text-5xl font-bold mt-5">What We Offer</h2>
+ </div>
+
+ <div class="grid md:grid-cols-3 gap-8">
+ <div class="service-card bg-white p-10 rounded-3xl border">
+ <div class="text-7xl mb-8">🏠</div>
+ <h3 class="text-3xl font-semibold mb-4">Interior Painting</h3>
+ <ul class="space-y-4 text-gray-600">
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Walls, ceilings & trim</li>
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Color consulting</li>
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Cabinet refinishing</li>
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Drywall repair</li>
+ </ul>
+ </div>
+
+ <div class="service-card bg-white p-10 rounded-3xl border border-blue-200 relative">
+ <div class="absolute top-8 right-8 bg-blue-600 text-white text-xs font-bold px-4 py-1 rounded-full">MOST POPULAR</div>
+ <div class="text-7xl mb-8">🌳</div>
+ <h3 class="text-3xl font-semibold mb-4">Exterior Painting</h3>
+ <ul class="space-y-4 text-gray-600">
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> House siding</li>
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Decks & fences</li>
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Pressure washing</li>
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Gutter cleaning</li>
+ </ul>
+ </div>
+
+ <div class="service-card bg-white p-10 rounded-3xl border">
+ <div class="text-7xl mb-8">🔨</div>
+ <h3 class="text-3xl font-semibold mb-4">Renovation & Carpentry</h3>
+ <ul class="space-y-4 text-gray-600">
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Full home renovations</li>
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Trim & molding installation</li>
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Minor repairs</li>
+ <li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Commercial painting</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- SERVICE AREAS -->
+ <section id="areas" class="py-28 bg-gradient-to-b from-gray-900 to-black text-white">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="text-center mb-12">
+ <h2 class="text-5xl font-bold">Proudly Serving North Georgia</h2>
+ </div>
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
+ <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Cumming</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Alpharetta</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Milton</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Roswell</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Johns Creek</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Buford</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Duluth</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Forsyth County</div>
+ </div>
+ <p class="text-center mt-12 text-gray-400">And surrounding communities • Free estimates available</p>
+ </div>
+ </section>
+
+ <!-- GALLERY -->
+ <section id="gallery" class="py-28">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="text-center mb-16">
+ <h2 class="text-5xl font-bold">Our Recent Work</h2>
+ </div>
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+ <button type="button" class="gallery-image-trigger overflow-hidden rounded-3xl" aria-label="View full size image of exterior painting">
+ <img src="eagle-2.png" class="w-full h-80 object-cover" alt="Exterior painting" loading="lazy" decoding="async">
+ </button>
+ <button type="button" class="gallery-image-trigger overflow-hidden rounded-3xl" aria-label="View full size image of interior stairs">
+ <img src="eagle-3.png" class="w-full h-80 object-cover" alt="Interior stairs" loading="lazy" decoding="async">
+ </button>
+ <button type="button" class="gallery-image-trigger overflow-hidden rounded-3xl" aria-label="View full size image of renovation work">
+ <img src="eagle-4.png" class="w-full h-80 object-cover" alt="Renovation" loading="lazy" decoding="async">
+ </button>
+ <button type="button" class="gallery-image-trigger overflow-hidden rounded-3xl" aria-label="View full size image of deck work">
+ <img src="eagle-5.png" class="w-full h-80 object-cover" alt="Deck" loading="lazy" decoding="async">
+ </button>
+ </div>
+ </div>
+ </section>
+
+ <!-- QUOTE FORM -->
+ <section id="contact" class="py-28 bg-blue-50">
+ <div class="max-w-2xl mx-auto px-6">
+ <div class="bg-white rounded-3xl shadow-2xl p-6 sm:p-12">
+ <h2 class="text-center text-4xl font-bold mb-3">Request a Free Quote</h2>
+ <p class="text-center text-gray-600 mb-12">We'll respond within 24 hours</p>
+
+ <form id="quoteForm" class="quote-form space-y-8">
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+ <div>
+ <label class="block text-sm font-medium mb-2">Name</label>
+ <input id="name" type="text" required class="w-full px-6 py-4 border border-gray-200 rounded-2xl focus:outline-none focus:border-blue-600">
+ </div>
+ <div>
+ <label class="block text-sm font-medium mb-2">Phone</label>
+ <input id="phone" type="tel" required class="w-full px-6 py-4 border border-gray-200 rounded-2xl focus:outline-none focus:border-blue-600">
+ </div>
+ </div>
+
+ <div>
+ <label class="block text-sm font-medium mb-2">Email</label>
+ <input id="email" type="email" class="w-full px-6 py-4 border border-gray-200 rounded-2xl focus:outline-none focus:border-blue-600">
+ </div>
+
+ <div>
+ <label class="block text-sm font-medium mb-2">Tell us about your project</label>
+ <textarea id="project" rows="5" class="w-full px-6 py-4 border border-gray-200 rounded-3xl focus:outline-none focus:border-blue-600" placeholder="Interior painting, exterior, deck, renovation..."></textarea>
+ </div>
+
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 px-6 py-5 sm:px-8 sm:py-6 text-white text-lg sm:text-xl font-semibold rounded-3xl transition flex items-center justify-center gap-x-3 leading-tight">
+ <span>SUBMIT FREE QUOTE REQUEST</span>
+ <i class="fas fa-paper-plane"></i>
+ </button>
+ <div id="form-success" class="hidden rounded-3xl bg-blue-50 px-6 py-12 text-center text-blue-700" role="status">
+ <div class="mb-4 text-4xl"><i class="fas fa-check-circle"></i></div>
+ <div class="text-2xl font-bold text-gray-900">Quote Request Sent</div>
+ <p class="mx-auto mt-4 max-w-md text-base leading-relaxed text-gray-600">Thank you. Your quote request has been received, and we will contact you shortly.</p>
+ </div>
+ </form>
+ </div>
+ </div>
+ </section>
+
+ <!-- FOOTER -->
+ <footer class="bg-gray-950 text-gray-400 py-20">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="grid md:grid-cols-12 gap-y-12">
+ <div class="md:col-span-5">
+ <div class="mb-6 text-3xl font-bold tracking-tight text-white">Eagle Painting Solutions LLC</div>
+ <p class="max-w-sm">Professional painting and home improvement services in North Georgia.</p>
+ </div>
+
+ <div class="md:col-span-3">
+ <div class="font-semibold text-white mb-6">Contact</div>
+ <a href="tel:4705797636" class="flex items-center gap-x-4 hover:text-white mb-4">
+ <i class="fas fa-phone w-5"></i>
+ (470) 579-7636
+ </a>
+ <a href="mailto:[email protected]" class="flex items-center gap-x-4 hover:text-white">
+ <i class="fas fa-envelope w-5"></i>
+ [email protected]
+ </a>
+ </div>
+
+ <div class="md:col-span-4">
+ <div class="font-semibold text-white mb-6">Follow Us</div>
+ <a href="https://www.instagram.com/eaglespaintingsolutionsllc/" target="_blank" class="inline-flex items-center gap-x-3 hover:text-white">
+ <i class="fab fa-instagram text-3xl"></i>
+ <span>@eaglespaintingsolutionsllc</span>
+ </a>
+ </div>
+ </div>
+
+ <div class="text-center text-xs mt-20 pt-8 border-t border-gray-900">
+ © 2026 Eagle Painting Solutions LLC. All Rights Reserved. | Cumming, Georgia
+ </div>
+ </div>
+ </footer>
+
+ <div class="image-modal" id="image-modal" role="dialog" aria-modal="true" aria-hidden="true">
+ <button class="image-modal-close" type="button" aria-label="Close full screen image">×</button>
+ <img id="image-modal-img" src="" alt="">
+ </div>
+
+ <a id="mobile-call-cta"
+ href="tel:4705797636"
+ class="fixed inset-x-4 z-50 flex items-center justify-center gap-x-3 rounded-2xl bg-blue-600 px-6 py-4 text-lg font-semibold text-white shadow-2xl shadow-blue-950/25 transition-all duration-300 active:scale-95 md:hidden"
+ style="bottom: calc(1rem + env(safe-area-inset-bottom));"
+ aria-hidden="true">
+ <i class="fas fa-phone"></i>
+ <span>Call Now</span>
+ </a>
+
+ <script>
+ // Form handler
+ document.getElementById('quoteForm').addEventListener('submit', function(e) {
+ e.preventDefault();
+ const successMessage = document.getElementById('form-success');
+ this.reset();
+ this.classList.add('is-submitted');
+ this.querySelectorAll('input, textarea, button[type="submit"]').forEach(control => {
+ control.disabled = true;
+ });
+ successMessage.classList.remove('hidden');
+ successMessage.setAttribute('tabindex', '-1');
+ successMessage.focus();
+ });
+
+ function toggleMobileMenu() {
+ document.getElementById('mobile-menu').classList.toggle('hidden');
+ }
+
+ // Smooth scroll
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ if (target) {
+ setActiveSection(target.id);
+ target.scrollIntoView({ behavior: 'smooth' });
+ }
+ });
+ });
+
+ const navLinks = Array.from(document.querySelectorAll('.nav-link[href^="#"]'));
+ const sectionIds = [...new Set(navLinks.map(link => link.getAttribute('href').slice(1)))];
+ const sections = sectionIds.map(id => document.getElementById(id)).filter(Boolean);
+
+ function setActiveSection(sectionId) {
+ navLinks.forEach(link => {
+ const isActive = link.getAttribute('href') === `#${sectionId}`;
+ link.classList.toggle('active', isActive);
+ if (isActive) {
+ link.setAttribute('aria-current', 'location');
+ } else {
+ link.removeAttribute('aria-current');
+ }
+ });
+ }
+
+ const sectionObserver = new IntersectionObserver((entries) => {
+ const visibleSections = entries
+ .filter(entry => entry.isIntersecting)
+ .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
+
+ if (visibleSections.length) {
+ setActiveSection(visibleSections[0].target.id);
+ }
+ }, {
+ rootMargin: '-35% 0px -50% 0px',
+ threshold: [0.15, 0.35, 0.6]
+ });
+
+ sections.forEach(section => sectionObserver.observe(section));
+ setActiveSection('home');
+
+ const mobileCallCta = document.getElementById('mobile-call-cta');
+ const heroSection = document.getElementById('home');
+
+ function updateMobileCallCta() {
+ if (!mobileCallCta || !heroSection) return;
+ const heroBottom = heroSection.offsetTop + heroSection.offsetHeight;
+ const showCta = window.scrollY > heroBottom - 80;
+ mobileCallCta.classList.toggle('is-visible', showCta);
+ mobileCallCta.setAttribute('aria-hidden', showCta ? 'false' : 'true');
+ }
+
+ window.addEventListener('scroll', updateMobileCallCta, { passive: true });
+ window.addEventListener('resize', updateMobileCallCta);
+ updateMobileCallCta();
+
+ const imageModal = document.getElementById('image-modal');
+ const imageModalImg = document.getElementById('image-modal-img');
+ const imageModalClose = imageModal.querySelector('.image-modal-close');
+ let lastFocusedElement = null;
+
+ function openImageModal(image) {
+ lastFocusedElement = document.activeElement;
+ imageModalImg.src = image.currentSrc || image.src;
+ imageModalImg.alt = image.alt;
+ imageModal.classList.add('is-open');
+ imageModal.setAttribute('aria-hidden', 'false');
+ document.body.classList.add('modal-open');
+ imageModalClose.focus();
+ }
+
+ function closeImageModal() {
+ imageModal.classList.remove('is-open');
+ imageModal.setAttribute('aria-hidden', 'true');
+ document.body.classList.remove('modal-open');
+ imageModalImg.removeAttribute('src');
+ imageModalImg.alt = '';
+
+ if (lastFocusedElement) {
+ lastFocusedElement.focus();
+ }
+ }
+
+ document.querySelectorAll('.gallery-image-trigger').forEach(trigger => {
+ trigger.addEventListener('click', () => {
+ openImageModal(trigger.querySelector('img'));
+ });
+ });
+
+ imageModalClose.addEventListener('click', closeImageModal);
+
+ imageModal.addEventListener('click', event => {
+ if (event.target === imageModal) {
+ closeImageModal();
+ }
+ });
+
+ document.addEventListener('keydown', event => {
+ if (event.key === 'Escape' && imageModal.classList.contains('is-open')) {
+ closeImageModal();
+ }
+ });
+
+ // Tailwind script already active via CDN
+ </script>
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
index a8b0e42..0d71132 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -13,6 +13,7 @@
<li><a href="/demo/r_craft">r_craft</a></li>
<li><a href="/demo/delaney">delaney</a></li>
<li><a href="/demo/labounty">labounty</a></li>
+<li><a href="/demo/eagle_painting">eagle_painting</a></li>
</ul>
</body>
</html>