726 lines
44 KiB
HTML
726 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="scroll-smooth">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<!-- Default SEO (Updated dynamically via JS router) -->
|
||
<title id="seo-title">Thornhill Construction | Deck Builders Placerville – 55 Years</title>
|
||
<meta name="description" id="seo-desc" content="Expert deck installation and repair in Placerville, CA. 4.9★ Angi rating, CSLB #336956, and 55 years of honest craftsmanship. Get your free estimate today.">
|
||
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<!-- Fonts: Merriweather (Headings) + Open Sans (Body) -->
|
||
<link href="https://cdn.jsdelivr.net/fontsource/fonts/merriweather@latest/latin-700.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/fontsource/fonts/merriweather@latest/latin-900.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/fontsource/fonts/open-sans@latest/latin-400.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/fontsource/fonts/open-sans@latest/latin-600.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/fontsource/fonts/open-sans@latest/latin-700.min.css" rel="stylesheet">
|
||
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
|
||
<!-- Favicon matching the new logo -->
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cpath d='M14 110 L120 20 L226 110' fill='none' stroke='%23C05621' stroke-width='18'/%3E%3Cpath d='M165 65 L165 35 L195 35 L195 90' fill='none' stroke='%23C05621' stroke-width='18'/%3E%3Crect x='105' y='60' width='12' height='12' fill='%23C05621'/%3E%3Crect x='123' y='60' width='12' height='12' fill='%23C05621'/%3E%3Crect x='105' y='78' width='12' height='12' fill='%23C05621'/%3E%3Crect x='123' y='78' width='12' height='12' fill='%23C05621'/%3E%3C/svg%3E">
|
||
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
brand: {
|
||
cream: '#FDFBF7',
|
||
forest: '#2A332C',
|
||
rust: '#C05621',
|
||
rustdark: '#9C4216',
|
||
cedar: '#8B5A2B',
|
||
stone: '#71716A',
|
||
line: '#E7E2D8'
|
||
}
|
||
},
|
||
fontFamily: {
|
||
serif: ['Merriweather', 'serif'],
|
||
sans: ['\"Open Sans\"', 'sans-serif'],
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page { animation: pageIn .4s ease both; }
|
||
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
|
||
/* Wood grain subtle texture overlay for hero */
|
||
.bg-wood-texture {
|
||
background-image: linear-gradient(rgba(42, 51, 44, 0.85), rgba(42, 51, 44, 0.7)), url('https://images.unsplash.com/photo-1591825729269-caeb344f6df2?q=80&w=2000&auto=format&fit=crop');
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="font-sans text-brand-forest bg-brand-cream antialiased selection:bg-brand-rust selection:text-white">
|
||
|
||
<!-- ================= HEADER ================= -->
|
||
<header class="sticky top-0 z-50 bg-brand-cream/95 backdrop-blur border-b border-brand-line shadow-sm">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 min-h-[100px] flex items-center justify-between gap-4 py-3">
|
||
|
||
<!-- Logo Lockup (Updated: 4-pane window + underline) -->
|
||
<a href="#home" data-goto="home" class="flex flex-col items-center leading-none shrink-0 group" aria-label="Thornhill Construction — home">
|
||
<svg viewBox="0 0 240 160" class="w-16 h-11 sm:w-20 sm:h-14 mb-1" aria-hidden="true">
|
||
<!-- Roof -->
|
||
<path d="M14 110 L120 20 L226 110" fill="none" stroke="#C05621" stroke-width="18" stroke-linejoin="miter"/>
|
||
<!-- Chimney -->
|
||
<path d="M165 65 L165 35 L195 35 L195 90" fill="none" stroke="#C05621" stroke-width="18" stroke-linejoin="miter"/>
|
||
<!-- 4-Pane Window -->
|
||
<rect x="105" y="60" width="12" height="12" fill="#C05621"/>
|
||
<rect x="123" y="60" width="12" height="12" fill="#C05621"/>
|
||
<rect x="105" y="78" width="12" height="12" fill="#C05621"/>
|
||
<rect x="123" y="78" width="12" height="12" fill="#C05621"/>
|
||
</svg>
|
||
<span class="font-serif font-black text-brand-rust text-center text-xl sm:text-2xl leading-[0.95] tracking-tight">THORNHILL</span>
|
||
<span class="font-serif font-bold text-brand-rust text-center text-lg sm:text-xl leading-[0.95] tracking-tight border-b-2 border-brand-rust pb-0.5 mt-0.5">CONSTRUCTION</span>
|
||
</a>
|
||
|
||
<!-- Desktop nav -->
|
||
<nav class="hidden md:flex items-center gap-8" aria-label="Main">
|
||
<button data-goto="home" class="nav-link text-sm font-bold uppercase tracking-wide text-brand-stone hover:text-brand-rust transition-colors">Home</button>
|
||
<button data-goto="decks" class="nav-link text-sm font-bold uppercase tracking-wide text-brand-stone hover:text-brand-rust transition-colors">Our Decks</button>
|
||
<button data-goto="contact" class="nav-link text-sm font-bold uppercase tracking-wide text-brand-stone hover:text-brand-rust transition-colors">About & Contact</button>
|
||
<a href="tel:+15303033950" class="flex items-center gap-2 bg-brand-rust hover:bg-brand-rustdark text-white text-sm font-bold px-5 py-3 rounded-sm transition-colors shadow-md">
|
||
<i data-lucide="phone" class="w-4 h-4"></i> (530) 303-3950
|
||
</a>
|
||
</nav>
|
||
|
||
<!-- Mobile buttons -->
|
||
<div class="flex md:hidden items-center gap-2">
|
||
<a href="tel:+15303033950" class="p-2.5 text-brand-rust border border-brand-line rounded-sm bg-white" aria-label="Call Thornhill Construction">
|
||
<i data-lucide="phone" class="w-5 h-5"></i>
|
||
</a>
|
||
<button id="menu-btn" class="p-2.5 text-brand-forest bg-white border border-brand-line rounded-sm" aria-label="Open menu"><i data-lucide="menu" class="w-6 h-6"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile menu -->
|
||
<div id="mobile-menu" class="hidden md:hidden border-t border-brand-line bg-brand-cream absolute w-full shadow-lg">
|
||
<div class="px-6 py-6 flex flex-col gap-5">
|
||
<button data-goto="home" class="text-left font-bold uppercase tracking-wide text-lg">Home</button>
|
||
<button data-goto="decks" class="text-left font-bold uppercase tracking-wide text-lg">Our Decks</button>
|
||
<button data-goto="contact" class="text-left font-bold uppercase tracking-wide text-lg">About & Contact</button>
|
||
<hr class="border-brand-line">
|
||
<a href="tel:+15303033950" class="font-bold text-brand-rust text-xl flex items-center gap-2"><i data-lucide="phone" class="w-5 h-5"></i> (530) 303-3950</a>
|
||
<p class="text-xs text-brand-stone font-semibold">Se habla español • CSLB #336956 • 55 Years in Business</p>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============================================================= -->
|
||
<!-- PAGE 1 : HOME -->
|
||
<!-- ============================================================= -->
|
||
<main id="page-home" class="page">
|
||
|
||
<!-- HERO -->
|
||
<section class="bg-wood-texture text-brand-cream py-20 lg:py-32 border-b-4 border-brand-rust">
|
||
<div class="max-w-5xl mx-auto px-4 sm:px-6 text-center">
|
||
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-rust/20 border border-brand-rust/40 text-brand-cream text-xs font-bold uppercase tracking-widest mb-6 backdrop-blur-sm">
|
||
<i data-lucide="award" class="w-4 h-4 text-brand-rust"></i> Family-Owned & Operated Since 1977
|
||
</div>
|
||
<h1 class="font-serif font-black text-4xl sm:text-5xl lg:text-6xl leading-tight mb-6 drop-shadow-md">
|
||
Placerville's Deck Experts for 55 Years.
|
||
</h1>
|
||
<p class="text-lg sm:text-xl text-brand-cream/90 mb-10 max-w-2xl mx-auto leading-relaxed font-light">
|
||
Custom deck installation and expert repair – we build outdoor spaces that last.
|
||
</p>
|
||
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
|
||
<button data-goto="contact" class="w-full sm:w-auto inline-flex justify-center items-center gap-2 bg-brand-rust hover:bg-brand-rustdark text-white font-bold text-lg px-8 py-4 rounded-sm transition-all shadow-lg hover:-translate-y-0.5">
|
||
Get Your Free Estimate <i data-lucide="arrow-right" class="w-5 h-5"></i>
|
||
</button>
|
||
<button data-goto="decks" class="w-full sm:w-auto inline-flex justify-center items-center gap-2 bg-transparent border-2 border-brand-cream/50 hover:bg-brand-cream/10 text-brand-cream font-bold text-lg px-8 py-4 rounded-sm transition-all">
|
||
View Our Decks
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Trust Badge Strip -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-4xl mx-auto pt-8 border-t border-brand-cream/20">
|
||
<div class="flex flex-col items-center gap-1">
|
||
<div class="flex gap-0.5 text-brand-rust mb-1">
|
||
<i data-lucide="star" class="w-5 h-5 fill-brand-rust"></i><i data-lucide="star" class="w-5 h-5 fill-brand-rust"></i><i data-lucide="star" class="w-5 h-5 fill-brand-rust"></i><i data-lucide="star" class="w-5 h-5 fill-brand-rust"></i><i data-lucide="star" class="w-5 h-5 fill-brand-rust"></i>
|
||
</div>
|
||
<span class="font-bold text-sm">4.9★ Average (118 Angi Reviews)</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1 border-x border-brand-cream/20 px-4">
|
||
<i data-lucide="badge-check" class="w-6 h-6 text-brand-rust mb-1"></i>
|
||
<span class="font-bold text-sm">BuildZoom Score 93 (Top 27% CA)</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-1">
|
||
<i data-lucide="shield-check" class="w-6 h-6 text-brand-rust mb-1"></i>
|
||
<span class="font-bold text-sm">CSLB #336956 • Licensed Since 1977</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TWO-SERVICE SPLIT -->
|
||
<section class="py-20 bg-brand-cream">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6">
|
||
<div class="text-center mb-16">
|
||
<h2 class="font-serif font-black text-3xl sm:text-4xl text-brand-forest mb-4">Specialists in Outdoor Wood & Composite</h2>
|
||
<p class="text-brand-stone text-lg max-w-2xl mx-auto">We don't do kitchens. We don't do bathrooms. We pour every ounce of our 55 years of experience into decks.</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<!-- Service A -->
|
||
<div class="bg-white border border-brand-line rounded-sm overflow-hidden shadow-sm hover:shadow-xl transition-shadow group">
|
||
<div class="h-2 bg-brand-cedar"></div>
|
||
<div class="p-8 sm:p-10">
|
||
<div class="w-14 h-14 bg-brand-cedar/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-brand-cedar group-hover:text-white transition-colors">
|
||
<i data-lucide="plus-square" class="w-7 h-7 text-brand-cedar group-hover:text-white"></i>
|
||
</div>
|
||
<h3 class="font-serif font-bold text-2xl text-brand-forest mb-4">New Deck Installation</h3>
|
||
<p class="text-brand-stone mb-6 leading-relaxed">
|
||
From custom designs to material selection—whether you prefer the classic warmth of redwood and cedar or the low-maintenance durability of modern composite—we build it right. Every structure is California code-compliant and engineered specifically to withstand our unique mountain and foothill climates.
|
||
</p>
|
||
<ul class="space-y-3 text-sm font-semibold text-brand-forest mb-8">
|
||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-brand-rust"></i> Custom Design Consultations</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-brand-rust"></i> Premium Wood & Composite Options</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-brand-rust"></i> Wheelchair Ramps & Accessibility Builds</li>
|
||
</ul>
|
||
<button data-goto="contact" class="text-brand-rust font-bold hover:text-brand-rustdark flex items-center gap-1 transition-colors">Schedule a site visit <i data-lucide="arrow-right" class="w-4 h-4"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Service B -->
|
||
<div class="bg-white border border-brand-line rounded-sm overflow-hidden shadow-sm hover:shadow-xl transition-shadow group">
|
||
<div class="h-2 bg-brand-rust"></div>
|
||
<div class="p-8 sm:p-10">
|
||
<div class="w-14 h-14 bg-brand-rust/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-brand-rust group-hover:text-white transition-colors">
|
||
<i data-lucide="hammer" class="w-7 h-7 text-brand-rust group-hover:text-white"></i>
|
||
</div>
|
||
<h3 class="font-serif font-bold text-2xl text-brand-forest mb-4">Deck Repair & Restoration</h3>
|
||
<p class="text-brand-stone mb-6 leading-relaxed">
|
||
Don't let a worn deck become a safety hazard. We perform thorough structural inspections, replace compromised joists and rotted wood, upgrade railings to current code, and restore stairs. As one homeowner noted, <em>"The deck is solid, safe, and built to last... the work area was kept clean once completed for the day."</em>
|
||
</p>
|
||
<ul class="space-y-3 text-sm font-semibold text-brand-forest mb-8">
|
||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-brand-rust"></i> Structural Safety Upgrades</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-brand-rust"></i> Rotted Wood & Joist Replacement</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-brand-rust"></i> Immaculately Clean Job Sites</li>
|
||
</ul>
|
||
<button data-goto="contact" class="text-brand-rust font-bold hover:text-brand-rustdark flex items-center gap-1 transition-colors">Get a repair quote <i data-lucide="arrow-right" class="w-4 h-4"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FEATURED REVIEW -->
|
||
<section class="py-20 bg-brand-forest text-brand-cream relative overflow-hidden">
|
||
<div class="absolute top-0 right-0 w-96 h-96 bg-brand-rust/5 rounded-full blur-3xl -mr-48 -mt-48 pointer-events-none"></div>
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 text-center relative z-10">
|
||
<i data-lucide="quote" class="w-12 h-12 text-brand-rust mx-auto mb-6 opacity-80"></i>
|
||
<blockquote class="font-serif text-2xl sm:text-3xl italic leading-relaxed mb-8 text-brand-cream/95">
|
||
"Larry did a beautiful job on our new deck. His work ethic and his and his team's (Danny) craftsmanship went beyond what I could have asked for! He said the job would be completed in 10 days, and it was. He quoted a more than reasonable price and stuck to that price. Larry is the real deal! If I could give him 10 out of 10 stars, I would!! Hire Thornhill Construction, you will not be disappointed!!"
|
||
</blockquote>
|
||
<div class="flex flex-col items-center">
|
||
<div class="flex gap-1 text-brand-rust mb-2">
|
||
<i data-lucide="star" class="w-5 h-5 fill-brand-rust"></i><i data-lucide="star" class="w-5 h-5 fill-brand-rust"></i><i data-lucide="star" class="w-5 h-5 fill-brand-rust"></i><i data-lucide="star" class="w-5 h-5 fill-brand-rust"></i><i data-lucide="star" class="w-5 h-5 fill-brand-rust"></i>
|
||
</div>
|
||
<cite class="not-italic font-bold text-lg text-brand-cream">Cynthia N.</cite>
|
||
<span class="text-sm text-brand-cream/60 mt-1">Project: Repair a Deck or Porch</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FINAL BANNER CTA -->
|
||
<section class="py-16 bg-brand-rust text-white">
|
||
<div class="max-w-5xl mx-auto px-4 sm:px-6 text-center">
|
||
<h2 class="font-serif font-black text-3xl sm:text-4xl mb-4">Ready to transform your outdoor space?</h2>
|
||
<p class="text-lg text-white/90 mb-8">Call Larry today for a straightforward conversation about your project.</p>
|
||
<a href="tel:+15303033950" class="inline-flex items-center gap-3 bg-white text-brand-rust hover:bg-brand-cream font-black text-2xl px-8 py-4 rounded-sm transition-colors shadow-xl">
|
||
<i data-lucide="phone-call" class="w-6 h-6"></i> (530) 303-3950
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ============================================================= -->
|
||
<!-- PAGE 2 : OUR DECKS -->
|
||
<!-- ============================================================= -->
|
||
<main id="page-decks" class="page hidden">
|
||
|
||
<!-- Header -->
|
||
<section class="bg-brand-forest text-brand-cream py-16 border-b-4 border-brand-rust">
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 text-center">
|
||
<h1 class="font-serif font-black text-4xl sm:text-5xl mb-6">Master Craftsmen, Built Decks Only.</h1>
|
||
<p class="text-lg text-brand-cream/80 leading-relaxed">
|
||
We don't do kitchens. We don't do bathrooms. We pour every ounce of our 55 years of experience into decks and outdoor structures. That singular focus means we know wood, we know load-bearing, we know drainage, and we know what survives a Placerville summer.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Service Details -->
|
||
<section class="py-20 bg-brand-cream">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 space-y-20">
|
||
|
||
<!-- Detail A -->
|
||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||
<div class="order-2 lg:order-1">
|
||
<span class="text-brand-rust font-bold uppercase tracking-widest text-sm mb-2 block">Service 01</span>
|
||
<h2 class="font-serif font-black text-3xl sm:text-4xl text-brand-forest mb-6">New Deck Installation</h2>
|
||
<p class="text-brand-stone text-lg leading-relaxed mb-6">
|
||
Building a new deck starts with a conversation. During our design consultation, we walk your property, discuss how you want to use the space, and help you select the perfect materials. Whether you want the rich, natural aroma of treated lumber, redwood, or cedar, or the fade-resistant longevity of modern composite, we source the best.
|
||
</p>
|
||
<p class="text-brand-stone text-lg leading-relaxed mb-6">
|
||
We integrate sturdy railing styles and code-compliant stair systems seamlessly into the design. Need accessibility? We also build custom wheelchair ramps designed for safety and ease of use. As Jesse C. shared: <em>"Larry, John, and the entire crew not only offered me the best price on the ramp build but also exceeded my expectations with their work."</em>
|
||
</p>
|
||
<button data-goto="contact" class="mt-4 inline-flex items-center gap-2 bg-brand-rust hover:bg-brand-rustdark text-white font-bold px-6 py-3 rounded-sm transition-colors">
|
||
Start Your Design <i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||
</button>
|
||
</div>
|
||
<div class="order-1 lg:order-2 relative">
|
||
<div class="absolute -inset-4 border-2 border-brand-cedar/20 rounded-sm transform translate-x-4 translate-y-4 hidden md:block"></div>
|
||
<!-- REPLACE with real photo: images/new-deck-install.jpg -->
|
||
<img src="https://images.unsplash.com/photo-1623162257016-049598551dbb?q=80&w=1000&auto=format&fit=crop" alt="Beautiful newly installed composite deck with sturdy railings overlooking trees" class="relative rounded-sm shadow-xl w-full aspect-[4/3] object-cover grayscale-[.2] sepia-[.1]">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Detail B -->
|
||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<span class="text-brand-rust font-bold uppercase tracking-widest text-sm mb-2 block">Service 02</span>
|
||
<h2 class="font-serif font-black text-3xl sm:text-4xl text-brand-forest mb-6">Deck Repair & Restoration</h2>
|
||
<p class="text-brand-stone text-lg leading-relaxed mb-6">
|
||
California heat, winter moisture, and decades of use take a toll on outdoor wood. If your deck is sagging, splintering, or feels soft underfoot, it's time for a professional inspection. We look past the surface to evaluate the structural integrity of your joists, beams, and footings.
|
||
</p>
|
||
<p class="text-brand-stone text-lg leading-relaxed mb-6">
|
||
We replace compromised framing and decking, upgrade older structures to meet current safety codes, and apply premium sealing and staining. Proper sealing isn't just about looks—it's critical for fire safety and weather resistance in the foothills. We leave your property cleaner than we found it.
|
||
</p>
|
||
<button data-goto="contact" class="mt-4 inline-flex items-center gap-2 bg-brand-forest hover:bg-brand-forest/90 text-white font-bold px-6 py-3 rounded-sm transition-colors">
|
||
Schedule an Inspection <i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||
</button>
|
||
</div>
|
||
<div class="relative">
|
||
<div class="absolute -inset-4 border-2 border-brand-rust/20 rounded-sm transform -translate-x-4 translate-y-4 hidden md:block"></div>
|
||
<!-- REPLACE with real photo: images/deck-repair.jpg -->
|
||
<img src="https://images.unsplash.com/photo-1599692994406-b8262d72212e?q=80&w=1000&auto=format&fit=crop" alt="Close up of sturdy wood deck boards being restored and stained" class="relative rounded-sm shadow-xl w-full aspect-[4/3] object-cover grayscale-[.2] sepia-[.1]">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- GALLERY SECTION -->
|
||
<section class="py-20 bg-white border-t border-brand-line">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6">
|
||
<div class="text-center mb-12">
|
||
<h2 class="font-serif font-black text-3xl sm:text-4xl text-brand-forest mb-4">The Thornhill Difference</h2>
|
||
<p class="text-brand-stone text-lg">See the difference quality makes. Real projects in El Dorado County.</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<!-- Before 1 -->
|
||
<figure class="group relative overflow-hidden rounded-sm border border-brand-line">
|
||
<!-- REPLACE: images/before-1.jpg -->
|
||
<img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?q=80&w=800&auto=format&fit=crop" alt="Before: Worn, faded wooden deck with peeling paint and warped boards in Placerville" class="w-full aspect-[4/3] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
|
||
<figcaption class="absolute bottom-0 left-0 right-0 bg-brand-forest/90 text-white text-xs font-bold uppercase tracking-wider p-3 flex items-center gap-2">
|
||
<span class="bg-brand-stone text-white px-2 py-0.5 rounded-sm">Before</span> Faded & Warped Boards
|
||
</figcaption>
|
||
</figure>
|
||
<!-- After 1 -->
|
||
<figure class="group relative overflow-hidden rounded-sm border border-brand-line">
|
||
<!-- REPLACE: images/after-1.jpg -->
|
||
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=800&auto=format&fit=crop" alt="After: Beautifully restored deck with rich cedar stain and new code-compliant railings" class="w-full aspect-[4/3] object-cover sepia-[.1] group-hover:sepia-0 transition-all duration-500">
|
||
<figcaption class="absolute bottom-0 left-0 right-0 bg-brand-rust/90 text-white text-xs font-bold uppercase tracking-wider p-3 flex items-center gap-2">
|
||
<span class="bg-white text-brand-rust px-2 py-0.5 rounded-sm">After</span> Rich Cedar Restoration
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<!-- Before 2 -->
|
||
<figure class="group relative overflow-hidden rounded-sm border border-brand-line">
|
||
<!-- REPLACE: images/before-2.jpg -->
|
||
<img src="https://images.unsplash.com/photo-1517581177682-a085bb7ffb15?q=80&w=800&auto=format&fit=crop" alt="Before: Damaged deck stairs with missing balusters and rotting stringers" class="w-full aspect-[4/3] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
|
||
<figcaption class="absolute bottom-0 left-0 right-0 bg-brand-forest/90 text-white text-xs font-bold uppercase tracking-wider p-3 flex items-center gap-2">
|
||
<span class="bg-brand-stone text-white px-2 py-0.5 rounded-sm">Before</span> Unsafe Stair Structure
|
||
</figcaption>
|
||
</figure>
|
||
<!-- After 2 -->
|
||
<figure class="group relative overflow-hidden rounded-sm border border-brand-line">
|
||
<!-- REPLACE: images/after-2.jpg -->
|
||
<img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=800&auto=format&fit=crop" alt="After: Brand new composite deck stairs with sturdy black aluminum handrails" class="w-full aspect-[4/3] object-cover sepia-[.1] group-hover:sepia-0 transition-all duration-500">
|
||
<figcaption class="absolute bottom-0 left-0 right-0 bg-brand-rust/90 text-white text-xs font-bold uppercase tracking-wider p-3 flex items-center gap-2">
|
||
<span class="bg-white text-brand-rust px-2 py-0.5 rounded-sm">After</span> Solid Composite Stairs
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<!-- Before 3 -->
|
||
<figure class="group relative overflow-hidden rounded-sm border border-brand-line">
|
||
<!-- REPLACE: images/before-3.jpg -->
|
||
<img src="https://images.unsplash.com/photo-1584622050111-993a426fbf0a?q=80&w=800&auto=format&fit=crop" alt="Before: Small, outdated porch area with inadequate railing height" class="w-full aspect-[4/3] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
|
||
<figcaption class="absolute bottom-0 left-0 right-0 bg-brand-forest/90 text-white text-xs font-bold uppercase tracking-wider p-3 flex items-center gap-2">
|
||
<span class="bg-brand-stone text-white px-2 py-0.5 rounded-sm">Before</span> Outdated & Non-Compliant
|
||
</figcaption>
|
||
</figure>
|
||
<!-- After 3 -->
|
||
<figure class="group relative overflow-hidden rounded-sm border border-brand-line">
|
||
<!-- REPLACE: images/after-3.jpg -->
|
||
<img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?q=80&w=800&auto=format&fit=crop" alt="After: Expansive new redwood deck built for family gatherings with mountain views" class="w-full aspect-[4/3] object-cover sepia-[.1] group-hover:sepia-0 transition-all duration-500">
|
||
<figcaption class="absolute bottom-0 left-0 right-0 bg-brand-rust/90 text-white text-xs font-bold uppercase tracking-wider p-3 flex items-center gap-2">
|
||
<span class="bg-white text-brand-rust px-2 py-0.5 rounded-sm">After</span> Expansive Redwood Build
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="text-center mt-16">
|
||
<p class="font-serif text-2xl text-brand-forest italic mb-6">See the difference quality makes.</p>
|
||
<button data-goto="contact" class="inline-flex items-center gap-2 bg-brand-rust hover:bg-brand-rustdark text-white font-bold text-lg px-8 py-4 rounded-sm transition-colors shadow-lg">
|
||
Contact us for a site visit <i data-lucide="arrow-right" class="w-5 h-5"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ============================================================= -->
|
||
<!-- PAGE 3 : ABOUT & CONTACT -->
|
||
<!-- ============================================================= -->
|
||
<main id="page-contact" class="page hidden">
|
||
|
||
<!-- Section 1: The Larry Story -->
|
||
<section class="py-20 bg-brand-cream border-b border-brand-line">
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 text-center">
|
||
<span class="text-brand-rust font-bold uppercase tracking-widest text-sm mb-2 block">Our Story</span>
|
||
<h1 class="font-serif font-black text-4xl sm:text-5xl text-brand-forest mb-8">A Handshake Still Means Something.</h1>
|
||
|
||
<div class="prose prose-lg text-brand-stone mx-auto text-left">
|
||
<p class="mb-6 text-lg leading-relaxed">
|
||
Larry Thornhill started framing decks in 1977. Back then, business was done on a promise, and a man's word was his bond. After 55 years in the trade, Larry still operates by that same code. He still walks every single job site personally, ensuring that the work meets the exact standard he'd demand for his own home.
|
||
</p>
|
||
<p class="mb-6 text-lg leading-relaxed">
|
||
At Thornhill Construction, we believe in sticking to the quoted price, showing up exactly when we say we will, and treating your property with absolute respect. When you hire us, you aren't getting a rotating cast of subcontractors. You're getting Larry, alongside his dedicated crew—Danny, John, and the team—who have worked together for years. They are part of the family, and they take immense pride in their craft.
|
||
</p>
|
||
<p class="text-lg leading-relaxed font-semibold text-brand-forest border-l-4 border-brand-rust pl-6 italic">
|
||
"Thornhill Construction built my deck and back stairs about 2 years ago. I had to move my house and the movers did a horrendous job [but the deck held strong]." — Sheila S.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 2 & 3: Hard Facts & Form -->
|
||
<section class="py-20 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6">
|
||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20">
|
||
|
||
<!-- Hard Facts -->
|
||
<div>
|
||
<h2 class="font-serif font-black text-3xl text-brand-forest mb-8">The Hard Facts</h2>
|
||
|
||
<div class="space-y-6 mb-10">
|
||
<div class="flex items-start gap-4">
|
||
<div class="mt-1 p-2 bg-brand-cream rounded-sm border border-brand-line"><i data-lucide="map-pin" class="w-5 h-5 text-brand-rust"></i></div>
|
||
<div>
|
||
<h3 class="font-bold text-brand-forest">Headquarters</h3>
|
||
<p class="text-brand-stone">2428 Rising Hill Rd<br>Placerville, CA 95667</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-4">
|
||
<div class="mt-1 p-2 bg-brand-cream rounded-sm border border-brand-line"><i data-lucide="phone" class="w-5 h-5 text-brand-rust"></i></div>
|
||
<div>
|
||
<h3 class="font-bold text-brand-forest">Call or Text</h3>
|
||
<p class="text-brand-stone">
|
||
Primary: <a href="tel:+15303033950" class="text-brand-rust font-bold hover:underline">(530) 303-3950</a><br>
|
||
Secondary: <a href="tel:+15303064629" class="text-brand-rust font-bold hover:underline">(530) 306-4629</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-4">
|
||
<div class="mt-1 p-2 bg-brand-cream rounded-sm border border-brand-line"><i data-lucide="mail" class="w-5 h-5 text-brand-rust"></i></div>
|
||
<div>
|
||
<h3 class="font-bold text-brand-forest">Email</h3>
|
||
<p class="text-brand-stone"><a href="mailto:thornhillconstruction.inc@gmail.com" class="hover:text-brand-rust break-all">thornhillconstruction.inc@gmail.com</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-4">
|
||
<div class="mt-1 p-2 bg-brand-cream rounded-sm border border-brand-line"><i data-lucide="shield-check" class="w-5 h-5 text-brand-rust"></i></div>
|
||
<div>
|
||
<h3 class="font-bold text-brand-forest">License & Service Area</h3>
|
||
<p class="text-brand-stone">CSLB #336956 (Active, B General Building)<br>Serving El Dorado County, Placerville, Cameron Park, Shingle Springs, and surrounding foothills.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Angi Rating repeated as requested -->
|
||
<div class="bg-brand-forest text-brand-cream p-6 rounded-sm flex items-center gap-6">
|
||
<div class="flex flex-col items-center justify-center border-r border-white/20 pr-6">
|
||
<span class="font-serif font-black text-4xl text-brand-rust leading-none">4.9★</span>
|
||
<span class="text-xs uppercase tracking-wider mt-1 text-white/70">118 Reviews</span>
|
||
</div>
|
||
<p class="text-sm leading-relaxed">
|
||
Proudly holding a 4.9-star average on Angi and a BuildZoom score of 93, placing us in the top 27% of licensed contractors in California.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Contact Form -->
|
||
<div class="bg-brand-cream p-8 sm:p-10 rounded-sm border border-brand-line shadow-sm">
|
||
<h2 class="font-serif font-black text-3xl text-brand-forest mb-2">Get Your Free Estimate</h2>
|
||
<p class="text-brand-stone mb-8 text-sm">Fill out the form below. Larry reviews every request personally.</p>
|
||
|
||
<form id="contact-form" class="space-y-5">
|
||
<div>
|
||
<label for="c-name" class="block text-xs font-bold uppercase tracking-wider text-brand-forest mb-1.5">Full Name *</label>
|
||
<input id="c-name" type="text" required class="w-full px-4 py-3 bg-white border border-brand-line rounded-sm focus:outline-none focus:border-brand-rust focus:ring-1 focus:ring-brand-rust transition-all" placeholder="Jane Doe">
|
||
</div>
|
||
|
||
<div class="grid sm:grid-cols-2 gap-5">
|
||
<div>
|
||
<label for="c-phone" class="block text-xs font-bold uppercase tracking-wider text-brand-forest mb-1.5">Phone Number *</label>
|
||
<input id="c-phone" type="tel" required class="w-full px-4 py-3 bg-white border border-brand-line rounded-sm focus:outline-none focus:border-brand-rust focus:ring-1 focus:ring-brand-rust transition-all" placeholder="(530) 000-0000">
|
||
</div>
|
||
<div>
|
||
<label for="c-email" class="block text-xs font-bold uppercase tracking-wider text-brand-forest mb-1.5">Email Address</label>
|
||
<input id="c-email" type="email" class="w-full px-4 py-3 bg-white border border-brand-line rounded-sm focus:outline-none focus:border-brand-rust focus:ring-1 focus:ring-brand-rust transition-all" placeholder="jane@example.com">
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="c-address" class="block text-xs font-bold uppercase tracking-wider text-brand-forest mb-1.5">Project Address *</label>
|
||
<input id="c-address" type="text" required class="w-full px-4 py-3 bg-white border border-brand-line rounded-sm focus:outline-none focus:border-brand-rust focus:ring-1 focus:ring-brand-rust transition-all" placeholder="123 Main St, Placerville, CA">
|
||
</div>
|
||
|
||
<div>
|
||
<label for="c-type" class="block text-xs font-bold uppercase tracking-wider text-brand-forest mb-1.5">Project Type *</label>
|
||
<select id="c-type" required class="w-full px-4 py-3 bg-white border border-brand-line rounded-sm focus:outline-none focus:border-brand-rust focus:ring-1 focus:ring-brand-rust transition-all text-brand-forest">
|
||
<option value="" disabled selected>Select an option...</option>
|
||
<option value="new">New Deck Installation</option>
|
||
<option value="repair">Deck Repair / Restoration</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="c-details" class="block text-xs font-bold uppercase tracking-wider text-brand-forest mb-1.5">Project Details</label>
|
||
<textarea id="c-details" rows="4" class="w-full px-4 py-3 bg-white border border-brand-line rounded-sm focus:outline-none focus:border-brand-rust focus:ring-1 focus:ring-brand-rust transition-all" placeholder="Tell us about the size of the deck, the materials you're interested in, or any specific issues..."></textarea>
|
||
</div>
|
||
|
||
<button type="submit" id="submit-btn" class="w-full bg-brand-rust hover:bg-brand-rustdark text-white font-bold uppercase tracking-wide py-4 rounded-sm transition-colors shadow-md flex justify-center items-center gap-2">
|
||
Send Request – Larry will call you.
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 4: Map -->
|
||
<section class="h-[400px] w-full bg-brand-stone/20 relative border-t border-brand-line">
|
||
<!-- Embedded Google Map iframe for 2428 Rising Hill Rd, Placerville, CA 95667 -->
|
||
<iframe
|
||
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8&q=2428+Rising+Hill+Rd,+Placerville,+CA+95667"
|
||
width="100%"
|
||
height="100%"
|
||
style="border:0; filter: grayscale(0.5) sepia(0.2) contrast(1.1);"
|
||
allowfullscreen=""
|
||
loading="lazy"
|
||
referrerpolicy="no-referrer-when-downgrade"
|
||
title="Thornhill Construction Location Map">
|
||
</iframe>
|
||
<div class="absolute bottom-6 left-6 bg-white p-4 rounded-sm shadow-xl border-l-4 border-brand-rust hidden md:block">
|
||
<p class="font-serif font-bold text-brand-forest text-lg">Thornhill Construction</p>
|
||
<p class="text-sm text-brand-stone">2428 Rising Hill Rd, Placerville, CA 95667</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ================= FOOTER ================= -->
|
||
<footer class="bg-brand-forest text-brand-cream/70 pt-16 pb-8 border-t-4 border-brand-rust">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6">
|
||
<div class="grid md:grid-cols-3 gap-12 mb-12">
|
||
|
||
<!-- Col 1: Logo & Tagline -->
|
||
<div class="flex flex-col items-center md:items-start">
|
||
<div class="flex flex-col items-center leading-none mb-6">
|
||
<svg viewBox="0 0 240 160" class="w-16 h-11 mb-1" aria-hidden="true">
|
||
<path d="M14 110 L120 20 L226 110" fill="none" stroke="#C05621" stroke-width="18" stroke-linejoin="miter"/>
|
||
<path d="M165 65 L165 35 L195 35 L195 90" fill="none" stroke="#C05621" stroke-width="18" stroke-linejoin="miter"/>
|
||
<rect x="105" y="60" width="12" height="12" fill="#C05621"/><rect x="123" y="60" width="12" height="12" fill="#C05621"/>
|
||
<rect x="105" y="78" width="12" height="12" fill="#C05621"/><rect x="123" y="78" width="12" height="12" fill="#C05621"/>
|
||
</svg>
|
||
<span class="font-serif font-black text-brand-rust text-center text-xl leading-[0.95] tracking-tight">THORNHILL</span>
|
||
<span class="font-serif font-bold text-brand-rust text-center text-lg leading-[0.95] tracking-tight border-b-2 border-brand-rust pb-0.5 mt-0.5">CONSTRUCTION</span>
|
||
</div>
|
||
<p class="text-sm text-center md:text-left italic font-serif text-brand-cream/90">
|
||
"Building decks that hold memories."
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Col 2: NAP (Name, Address, Phone) - Required on every page -->
|
||
<div class="text-sm space-y-3 text-center md:text-left">
|
||
<h3 class="font-bold text-white uppercase tracking-wider text-xs mb-4 border-b border-white/10 pb-2 inline-block md:block">Contact Us</h3>
|
||
<p class="font-bold text-brand-cream">Thornhill Construction</p>
|
||
<p>2428 Rising Hill Rd<br>Placerville, CA 95667</p>
|
||
<p class="pt-2">
|
||
<a href="tel:+15303033950" class="block hover:text-brand-rust transition-colors font-bold text-base">(530) 303-3950</a>
|
||
<a href="tel:+15303064629" class="block hover:text-brand-rust transition-colors">(530) 306-4629</a>
|
||
</p>
|
||
<p><a href="mailto:thornhillconstruction.inc@gmail.com" class="hover:text-brand-rust transition-colors break-all">thornhillconstruction.inc@gmail.com</a></p>
|
||
</div>
|
||
|
||
<!-- Col 3: Quick Links & License -->
|
||
<div class="text-sm space-y-3 text-center md:text-left">
|
||
<h3 class="font-bold text-white uppercase tracking-wider text-xs mb-4 border-b border-white/10 pb-2 inline-block md:block">Navigation</h3>
|
||
<ul class="space-y-2">
|
||
<li><button data-goto="home" class="hover:text-brand-rust transition-colors">Home</button></li>
|
||
<li><button data-goto="decks" class="hover:text-brand-rust transition-colors">Our Decks</button></li>
|
||
<li><button data-goto="contact" class="hover:text-brand-rust transition-colors">About & Contact</button></li>
|
||
</ul>
|
||
<p class="pt-4 text-xs text-brand-cream/50 border-t border-white/10 mt-4 pt-4">
|
||
CSLB License #336956<br>
|
||
Licensed, Bonded & Insured Since 1977
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-white/10 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-brand-cream/50">
|
||
<p>© 1977 - 2026 Thornhill Construction, Inc. All rights reserved.</p>
|
||
<p>Placerville, CA • El Dorado County</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
(function () {
|
||
lucide.createIcons();
|
||
|
||
/* ---------- SEO Metadata Configuration ---------- */
|
||
const seoData = {
|
||
home: {
|
||
title: "Thornhill Construction | Deck Builders Placerville – 55 Years",
|
||
desc: "Expert deck installation and repair in Placerville, CA. 4.9★ Angi rating, CSLB #336956, and 55 years of honest craftsmanship. Get your free estimate today."
|
||
},
|
||
decks: {
|
||
title: "Deck Installation & Repair Services | Thornhill Construction",
|
||
desc: "Specializing in custom decks and restoration in El Dorado County. See our before & after gallery and read reviews from real homeowners."
|
||
},
|
||
contact: {
|
||
title: "Contact Larry Thornhill | Deck Contractor Placerville, CA",
|
||
desc: "Reach out to Thornhill Construction for a site visit. Licensed, insured, and trusted since 1977. Call (530) 303-3950."
|
||
}
|
||
};
|
||
|
||
function updateSEO(page) {
|
||
document.getElementById('seo-title').textContent = seoData[page].title;
|
||
document.getElementById('seo-desc').setAttribute('content', seoData[page].desc);
|
||
}
|
||
|
||
/* ---------- 3-Page Router ---------- */
|
||
const pages = {
|
||
home: document.getElementById('page-home'),
|
||
decks: document.getElementById('page-decks'),
|
||
contact: document.getElementById('page-contact')
|
||
};
|
||
const navLinks = document.querySelectorAll('.nav-link');
|
||
let currentPage = 'home';
|
||
|
||
function showPage(name) {
|
||
if (!pages[name]) name = 'home';
|
||
currentPage = name;
|
||
|
||
// Toggle visibility
|
||
Object.keys(pages).forEach(key => {
|
||
pages[key].classList.toggle('hidden', key !== name);
|
||
});
|
||
|
||
// Restart entry animation
|
||
const target = pages[name];
|
||
target.classList.remove('page');
|
||
void target.offsetWidth; // trigger reflow
|
||
target.classList.add('page');
|
||
|
||
// Update Nav Active State
|
||
navLinks.forEach(link => {
|
||
if (link.getAttribute('data-goto') === name) {
|
||
link.classList.remove('text-brand-stone');
|
||
link.classList.add('text-brand-rust');
|
||
} else {
|
||
link.classList.add('text-brand-stone');
|
||
link.classList.remove('text-brand-rust');
|
||
}
|
||
});
|
||
|
||
// Update SEO
|
||
updateSEO(name);
|
||
|
||
// Scroll to top
|
||
window.scrollTo({ top: 0, behavior: 'instant' });
|
||
|
||
// Close mobile menu if open
|
||
mobileMenu.classList.add('hidden');
|
||
}
|
||
|
||
// Attach click events to all data-goto elements
|
||
document.querySelectorAll('[data-goto]').forEach(el => {
|
||
el.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
const targetPage = el.getAttribute('data-goto');
|
||
history.pushState({page: targetPage}, '', '#' + targetPage);
|
||
showPage(targetPage);
|
||
});
|
||
});
|
||
|
||
// Handle browser back/forward buttons
|
||
window.addEventListener('popstate', (e) => {
|
||
if (e.state && e.state.page) {
|
||
showPage(e.state.page);
|
||
} else {
|
||
const hash = window.location.hash.replace('#', '') || 'home';
|
||
showPage(hash);
|
||
}
|
||
});
|
||
|
||
// Initial Load routing
|
||
const initialHash = window.location.hash.replace('#', '') || 'home';
|
||
history.replaceState({page: initialHash}, '', '#' + initialHash);
|
||
showPage(initialHash);
|
||
|
||
|
||
/* ---------- Mobile Menu ---------- */
|
||
const menuBtn = document.getElementById('menu-btn');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
menuBtn.addEventListener('click', () => {
|
||
mobileMenu.classList.toggle('hidden');
|
||
});
|
||
|
||
/* ---------- Form Handler (Demo) ---------- */
|
||
const form = document.getElementById('contact-form');
|
||
const submitBtn = document.getElementById('submit-btn');
|
||
|
||
form.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const originalText = submitBtn.innerHTML;
|
||
|
||
submitBtn.disabled = true;
|
||
submitBtn.innerHTML = '<span>Sending...</span>';
|
||
submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
|
||
|
||
// Simulate network request
|
||
setTimeout(() => {
|
||
submitBtn.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5"></i> Request Sent! Larry will call you soon.';
|
||
submitBtn.classList.remove('bg-brand-rust', 'hover:bg-brand-rustdark', 'opacity-75', 'cursor-not-allowed');
|
||
submitBtn.classList.add('bg-brand-forest');
|
||
lucide.createIcons(); // Re-init icons for the checkmark
|
||
|
||
setTimeout(() => {
|
||
form.reset();
|
||
submitBtn.disabled = false;
|
||
submitBtn.innerHTML = originalText;
|
||
submitBtn.classList.add('bg-brand-rust', 'hover:bg-brand-rustdark');
|
||
submitBtn.classList.remove('bg-brand-forest');
|
||
}, 5000);
|
||
}, 1500);
|
||
});
|
||
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |