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

This commit is contained in:
2026-09-11 21:07:34 -07:00
parent 8cd0fbce52
commit 7b483b8020
17 changed files with 877 additions and 45 deletions
+17 -1
View File
@@ -120,7 +120,11 @@
<!-- Header CTAs -->
<div class="header-cta-group">
<a href="tel:6615817278" class="phone-direct" aria-label="Call Next Gen Landscaping">
<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>
@@ -141,6 +145,17 @@
<a href="index.html#projects" class="nav-link mobile-link">Featured Projects</a>
<a href="service-areas.html" class="nav-link mobile-link">Service Areas</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-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" data-scope="General Inquiry" style="width: 100%; margin-top: 10px;">Get Free Estimate</button>
</div>
</header>
@@ -469,6 +484,7 @@
</div>
<div id="toast" class="toast-notification"></div>
<script src="translations.js"></script>
<script src="app.js"></script>
</body>
</html>