Mediusa/AV-Yard-Pro-AI-Pilots-Client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement bilingual English/Spanish toggle with lossless i18n translation engine across all pages

Browse Source
This commit is contained in:
Mediusa
2026-09-11 21:07:34 -07:00
parent 8cd0fbce52
commit 7b483b8020
17 changed files with 877 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+49 -30
View File
@@ -28,7 +28,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles.css?v=4">
<!-- Structured Data: LocalBusiness Schema -->
<script type="application/ld+json">
@@ -78,8 +78,12 @@
<svg class="icon-svg" width="13" height="13" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 5px;"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
High Desert Notice
</span>
<span>LA & Kern County Fire Clearance Deadlines Approaching! Fast 48-Hour Weed Abatement Available.</span>
<a href="#calculator" class="announcement-link">Get Instant Estimate &rarr;</a>
<span data-i18n="topbar.notice">LA & Kern County Fire Clearance Deadlines Approaching! Fast 48-Hour Weed Abatement Available.</span>
<a href="#calculator" class="announcement-link" data-i18n="topbar.cta">Get Instant Estimate &rarr;</a>
<div class="lang-switch" role="group" aria-label="Language selector" style="margin-left: 8px;">
<button type="button" class="lang-btn active" data-lang="en">EN</button>
<button type="button" class="lang-btn" data-lang="es">ES</button>
</div>
</div>
</aside>
@@ -98,22 +102,26 @@
<!-- Desktop Navigation -->
<nav class="nav-desktop" aria-label="Main Navigation">
<a href="#services" class="nav-link">Services</a>
<a href="#calculator" class="nav-link">Cost Calculator</a>
<a href="#transformation" class="nav-link">Before & After</a>
<a href="#projects" class="nav-link">Projects</a>
<a href="#areas" class="nav-link">Service Areas</a>
<a href="#reviews" class="nav-link">Reviews</a>
<a href="contact.html" class="nav-link">Contact</a>
<a href="#services" class="nav-link" data-i18n="nav.services">Services</a>
<a href="#calculator" class="nav-link" data-i18n="nav.calculator">Cost Calculator</a>
<a href="#transformation" class="nav-link" data-i18n="nav.transformation">Before & After</a>
<a href="#projects" class="nav-link" data-i18n="nav.projects">Projects</a>
<a href="#areas" class="nav-link" data-i18n="nav.areas">Service Areas</a>
<a href="#reviews" class="nav-link" data-i18n="nav.reviews">Reviews</a>
<a href="contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
</nav>
<!-- Header CTAs -->
<div class="header-cta-group">
<div class="lang-switch" role="group" aria-label="Language selector">
<button type="button" class="lang-btn active" data-lang="en">EN</button>
<button type="button" class="lang-btn" data-lang="es">ES</button>
</div>
<a href="tel:6615817278" class="phone-direct" aria-label="Call Next Gen Landscaping">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
<span class="phone-text">(661) 581-7278</span>
</a>
<button class="btn btn-primary open-quote-btn" id="header-quote-btn">
<button class="btn btn-primary open-quote-btn" id="header-quote-btn" data-i18n="nav.estimate">
Free Estimate
</button>
<button class="mobile-menu-btn" id="mobile-toggle" aria-label="Toggle navigation menu">
@@ -131,6 +139,16 @@
<a href="#areas" class="nav-link mobile-link">Service Areas</a>
<a href="#reviews" class="nav-link mobile-link">Customer Reviews</a>
<a href="contact.html" class="nav-link mobile-link">Contact Us</a>
<div class="mobile-lang-wrap">
<span class="mobile-lang-label">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
Language / Idioma:
</span>
<div class="lang-switch" role="group" aria-label="Language selector">
<button type="button" class="lang-btn active" data-lang="en">EN</button>
<button type="button" class="lang-btn" data-lang="es">ES</button>
</div>
</div>
<button class="btn btn-primary open-quote-btn" style="width: 100%; margin-top: 10px;">Request Instant Quote</button>
</div>
</header>
@@ -143,25 +161,25 @@
<div class="hero-badge-row">
<span class="badge">
<span class="badge-dot"></span>
Antelope Valley High-Desert Yard Specialists
<span data-i18n="hero.badge">Antelope Valley High-Desert Yard Specialists</span>
</span>
</div>
<h1 class="hero-title">
Rugged Desert. <br>
<span class="neon-text">Precision Lawns.</span><br>
Zero Compromise.
<span data-i18n="hero.title.1">Rugged Desert.</span> <br>
<span class="neon-text" data-i18n="hero.title.2">Precision Lawns.</span><br>
<span data-i18n="hero.title.3">Zero Compromise.</span>
</h1>
<p class="hero-subtitle">
<p class="hero-subtitle" data-i18n="hero.subtitle">
Tumbleweeds, unkempt desert brush, or high water bills? Next Gen transforms harsh Antelope Valley properties into pristine, fire-safe showpieces. Fast turnarounds across Palmdale, Lancaster, Quartz Hill, and surrounding desert communities.
</p>
<div class="hero-actions">
<a href="#calculator" class="btn btn-primary btn-lg">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
Calculate Your Estimate
<span data-i18n="hero.cta.calculate">Calculate Your Estimate</span>
</a>
<a href="tel:6615817278" class="btn btn-secondary btn-lg">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
Call (661) 581-7278
<span data-i18n="hero.cta.phone">Call (661) 581-7278</span>
</a>
</div>
@@ -251,7 +269,7 @@
</div>
<div>
<div class="stat-num">48<span>h</span></div>
<div class="stat-label">Emergency Storm Cleanups</div>
<div class="stat-label"><span data-i18n="stat.emergency.title">Emergency Storm Cleanups</span></div>
</div>
</div>
<div class="stat-item">
@@ -262,7 +280,7 @@
</div>
<div>
<div class="stat-num">75<span>%</span></div>
<div class="stat-label">Avg Water Bill Savings</div>
<div class="stat-label"><span data-i18n="stat.water.title">Avg Water Bill Savings</span></div>
</div>
</div>
</div>
@@ -274,7 +292,7 @@
<div class="container">
<div class="section-header">
<div class="section-tag"><span class="badge">Instant Estimation Engine</span></div>
<h2 class="section-title">Transparent Pricing for <span class="neon-text">High Desert Yards</span></h2>
<h2 class="section-title" data-i18n-html="calc.title">Transparent Pricing for <span class="neon-text">High Desert Yards</span></h2>
<p class="section-description">
Customize your property parameters below. Get an immediate ballpark estimate tailored for Antelope Valley parcel sizes, soil types, and fire safety codes.
</p>
@@ -448,7 +466,7 @@
<div class="container">
<div class="section-header">
<div class="section-tag"><span class="badge">Authentic High Desert Results</span></div>
<h2 class="section-title">See the <span class="neon-text">Same-Day Cleanup</span></h2>
<h2 class="section-title" data-i18n-html="ba.title">See the <span class="neon-text">Same-Day Cleanup</span></h2>
<p class="section-description">
Slide the divider to see the exact same property before and after our crew arrived: waist-high weeds, tumbleweeds, and yard trash completely cleared down to clean, raked, fire-safe ground.
</p>
@@ -481,7 +499,7 @@
<div class="ba-hint">
<span style="display: inline-flex; align-items: center; gap: 8px;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--neon-green)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path></svg>
Drag the neon divider or tap anywhere to compare before &amp; after
<span data-i18n="ba.hint">Drag the neon divider or tap anywhere to compare before &amp; after</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--neon-green)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
</span>
</div>
@@ -521,7 +539,7 @@
<div class="container">
<div class="section-header">
<div class="section-tag"><span class="badge">Featured AV Installations</span></div>
<h2 class="section-title">Beyond Cleanouts: <span class="neon-text">Custom Desert Living</span></h2>
<h2 class="section-title" data-i18n-html="projects.title">Beyond Cleanouts: <span class="neon-text">Custom Desert Living</span></h2>
<p class="section-description">
Explore drought-tolerant xeriscaping, decorative river rockscapes, and synthetic turf installations engineered to withstand 105°F+ High Desert heat and heavy seasonal winds.
</p>
@@ -576,7 +594,7 @@
<div class="container">
<div class="section-header">
<div class="section-tag"><span class="badge">Built For Antelope Valley</span></div>
<h2 class="section-title">Complete Yard & Landscaping <span class="neon-text">Services</span></h2>
<h2 class="section-title" data-i18n-html="services.title">Complete Yard & Landscaping <span class="neon-text">Services</span></h2>
<p class="section-description">
We don't do cookie-cutter coastal landscaping. Our equipment, crews, and materials are engineered for High Desert caliche soil, seasonal windstorms, and California drought restrictions.
</p>
@@ -825,7 +843,7 @@
<div class="container">
<div class="section-header">
<div class="section-tag"><span class="badge">Local Territory Coverage</span></div>
<h2 class="section-title">Proudly Serving the Entire <span class="neon-text">Antelope Valley</span></h2>
<h2 class="section-title" data-i18n-html="areas.title">Proudly Serving the Entire <span class="neon-text">Antelope Valley</span></h2>
<p class="section-description">
Our crews live and work right here in the High Desert. We arrive equipped with commercial-grade trimmers, mowers, haul trailers, and hand tools suited for residential yards and neighborhood properties alike.
</p>
@@ -947,7 +965,7 @@
<div class="container">
<div class="section-header">
<div class="section-tag"><span class="badge">Real Antelope Valley Feedback</span></div>
<h2 class="section-title">What High Desert <span class="neon-text">Homeowners Say</span></h2>
<h2 class="section-title" data-i18n-html="reviews.title">What High Desert <span class="neon-text">Homeowners Say</span></h2>
<p class="section-description">
Don't just take our word for it. Here is how Next Gen has helped neighbors in Palmdale, Lancaster, and Quartz Hill regain control of their properties.
</p>
@@ -1028,7 +1046,7 @@
<div class="container">
<div class="section-header">
<div class="section-tag"><span class="badge">Common Questions</span></div>
<h2 class="section-title">Frequently Asked <span class="neon-text">Questions</span></h2>
<h2 class="section-title" data-i18n-html="faq.title">Frequently Asked <span class="neon-text">Questions</span></h2>
<p class="section-description">
Everything you need to know about our Antelope Valley yard care, county weed deadlines, and pricing.
</p>
@@ -1077,7 +1095,7 @@
<section class="cta-banner-section">
<div class="container">
<div class="cta-banner-card">
<h2>Ready To Reclaim Your <span class="neon-text">High Desert Yard?</span></h2>
<h2 data-i18n-html="cta.title">Ready To Reclaim Your <span class="neon-text">High Desert Yard?</span></h2>
<p>
Don't let windblown tumbleweeds and fire hazards take over. Get an honest, zero-pressure quote from the local Next Gen team that knows Antelope Valley soil inside and out.
</p>
@@ -1175,7 +1193,7 @@
</button>
<div class="modal-header">
<span class="badge" style="margin-bottom: 8px;">Quick Response Guarantee</span>
<h3 id="modal-title">Request Your <span class="neon-text">Free Estimate</span></h3>
<h3 id="modal-title" data-i18n-html="modal.title">Request Your <span class="neon-text">Free Estimate</span></h3>
<p>Fill out the form below or call us directly. Next Gen responds within 15 minutes during daylight hours.</p>
</div>
@@ -1276,6 +1294,7 @@
</div>
</div>
<script src="translations.js"></script>
<script src="app.js"></script>
</body>
</html>