309 lines
17 KiB
HTML
309 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>404 Page Not Found | Next Gen Landscaping & Yard Care</title>
|
||
<meta name="description" content="The requested yard care page cannot be found. Return to Next Gen Landscaping homepage or explore our Antelope Valley service areas.">
|
||
<meta name="robots" content="noindex, follow">
|
||
|
||
<!-- Favicon & Brand Manifest -->
|
||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||
<link rel="manifest" href="site.webmanifest">
|
||
<meta name="theme-color" content="#00e676">
|
||
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<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">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Top Announcement Bar -->
|
||
<div class="top-bar">
|
||
<div class="container top-bar-inner">
|
||
<div class="top-bar-notice">
|
||
<span class="pulse-dot"></span>
|
||
<span>Antelope Valley Dispatch: Mon–Sat 6:30 AM – 7:00 PM • Emergency Storm Calls 24/7</span>
|
||
</div>
|
||
<div class="top-bar-contact">
|
||
<a href="tel:6617439600" style="color: var(--neon-lime); font-weight: 700; text-decoration: none;">
|
||
Direct: (661) 743-9600
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Header -->
|
||
<header class="site-header" id="header">
|
||
<div class="container header-inner">
|
||
<a href="index.html" class="brand-logo" aria-label="Next Gen Landscaping Home">
|
||
<div class="logo-symbol">
|
||
<img src="logo-mark.svg" alt="Next Gen Landscaping & Yardwork Logo" width="44" height="44" class="custom-logo-mark">
|
||
</div>
|
||
<div class="logo-text">
|
||
<span class="brand-name">NEXT <span style="color: var(--neon-lime);">GEN</span></span>
|
||
<span class="brand-tagline">Landscaping & Yardwork</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Desktop Navigation -->
|
||
<nav class="nav-desktop" aria-label="Main Navigation">
|
||
<a href="index.html#services" class="nav-link">Services</a>
|
||
<a href="index.html#calculator" class="nav-link">Cost Calculator</a>
|
||
<a href="service-areas.html" class="nav-link">Service Areas</a>
|
||
<a href="weed-abatement.html" class="nav-link">Weed Abatement</a>
|
||
<a href="tumbleweed-removal.html" class="nav-link">Tumbleweed</a>
|
||
<a href="contact.html" class="nav-link">Contact</a>
|
||
</nav>
|
||
|
||
<!-- CTA -->
|
||
<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:6617439600" 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>(661) 743-9600</span>
|
||
</a>
|
||
<button class="btn btn-primary open-quote-btn" data-scope="General Inquiry">Free Estimate</button>
|
||
</div>
|
||
|
||
<!-- Mobile Hamburger -->
|
||
<button class="hamburger-btn" id="mobile-toggle" aria-label="Toggle Mobile Menu">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Mobile Drawer -->
|
||
<div class="mobile-drawer" id="mobile-drawer">
|
||
<div class="mobile-drawer-inner">
|
||
<a href="index.html" class="mobile-link">Home</a>
|
||
<a href="index.html#services" class="mobile-link">Services</a>
|
||
<a href="service-areas.html" class="mobile-link">Service Areas</a>
|
||
<a href="weed-abatement.html" class="mobile-link">Weed Abatement</a>
|
||
<a href="tumbleweed-removal.html" class="mobile-link">Tumbleweed Removal</a>
|
||
<a href="contact.html" class="mobile-link">Contact</a>
|
||
<div style="margin-top: 24px;">
|
||
<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" style="width: 100%;" data-scope="Mobile Menu">Get Free Estimate</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 404 Main Section -->
|
||
<main class="page-content" style="padding: 100px 0 120px; background: radial-gradient(circle at 50% 20%, rgba(0, 230, 118, 0.08), transparent 70%);">
|
||
<div class="container" style="max-width: 860px; text-align: center;">
|
||
<div style="display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 90px; background: rgba(0, 230, 118, 0.1); border: 2px solid var(--neon-lime); border-radius: 24px; margin-bottom: 24px; box-shadow: 0 0 30px rgba(0, 230, 118, 0.3);">
|
||
<img src="logo-mark.svg" alt="Next Gen Logo" width="56" height="56" class="custom-logo-mark">
|
||
</div>
|
||
|
||
<div style="font-size: 5rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--brand-black); margin-bottom: 12px; font-family: 'Outfit', sans-serif;">
|
||
404 <span class="neon-text">LOST</span>
|
||
</div>
|
||
|
||
<h1 style="font-size: 2.2rem; font-weight: 800; margin-bottom: 16px; color: var(--brand-black);">
|
||
This Yard Has Been Thoroughly Cleared.
|
||
</h1>
|
||
|
||
<p style="font-size: 1.15rem; color: #475569; max-width: 620px; margin: 0 auto 36px; line-height: 1.6;">
|
||
The page you're searching for might have blown away in a 45-mph Antelope Valley windstorm or was moved to our new territory directory. Don't worry, our yard care dispatch is standing by.
|
||
</p>
|
||
|
||
<div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px;">
|
||
<a href="index.html" class="btn btn-primary" style="padding: 14px 28px; font-size: 1.05rem;">
|
||
← Return to Homepage
|
||
</a>
|
||
<a href="service-areas.html" class="btn btn-secondary" style="padding: 14px 28px; font-size: 1.05rem;">
|
||
Explore All Service Areas →
|
||
</a>
|
||
<a href="tel:6617439600" class="btn btn-dark" style="padding: 14px 28px; font-size: 1.05rem;">
|
||
Call Dispatch (661) 743-9600
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Quick Directory Cards -->
|
||
<div style="text-align: left; background: var(--card-bg, #ffffff); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-lg, 16px); padding: 36px; box-shadow: 0 10px 30px rgba(0,0,0,0.04);">
|
||
<h3 style="font-size: 1.25rem; font-weight: 800; margin-bottom: 20px; color: var(--brand-black); display: flex; align-items: center; gap: 10px;">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--neon-text-shade, #00a34c)" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
|
||
Popular Antelope Valley Destinations
|
||
</h3>
|
||
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;">
|
||
<a href="palmdale-landscaping.html" style="padding: 16px; background: #f8fafc; border-radius: 10px; text-decoration: none; border: 1px solid #e2e8f0; display: block; transition: all 0.2s ease;">
|
||
<div style="font-weight: 800; color: #0f172a; font-size: 1rem;">Palmdale Landscaping</div>
|
||
<div style="font-size: 0.82rem; color: #64748b; margin-top: 4px;">Rancho Vista, Anaverde & Foothills</div>
|
||
</a>
|
||
|
||
<a href="lancaster-landscaping.html" style="padding: 16px; background: #f8fafc; border-radius: 10px; text-decoration: none; border: 1px solid #e2e8f0; display: block; transition: all 0.2s ease;">
|
||
<div style="font-weight: 800; color: #0f172a; font-size: 1rem;">Lancaster Landscaping</div>
|
||
<div style="font-size: 0.82rem; color: #64748b; margin-top: 4px;">West Lancaster & Desert Estates</div>
|
||
</a>
|
||
|
||
<a href="weed-abatement.html" style="padding: 16px; background: #f8fafc; border-radius: 10px; text-decoration: none; border: 1px solid #e2e8f0; display: block; transition: all 0.2s ease;">
|
||
<div style="font-weight: 800; color: #0f172a; font-size: 1rem;">LA County Weed Abatement</div>
|
||
<div style="font-size: 0.82rem; color: #64748b; margin-top: 4px;">Fire clearance & Notice compliance</div>
|
||
</a>
|
||
|
||
<a href="tumbleweed-removal.html" style="padding: 16px; background: #f8fafc; border-radius: 10px; text-decoration: none; border: 1px solid #e2e8f0; display: block; transition: all 0.2s ease;">
|
||
<div style="font-weight: 800; color: #0f172a; font-size: 1rem;">Tumbleweed Cleanouts</div>
|
||
<div style="font-size: 0.82rem; color: #64748b; margin-top: 4px;">Fence piles, windstorm clearing</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Site Footer -->
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<div class="footer-top">
|
||
<div class="footer-brand">
|
||
<div class="brand-logo">
|
||
<div class="logo-symbol">
|
||
<img src="logo-mark.svg" alt="Next Gen Landscaping & Yardwork Logo" width="44" height="44" class="custom-logo-mark">
|
||
</div>
|
||
<div class="logo-text">
|
||
<span class="brand-name">NEXT <span style="color: var(--neon-lime);">GEN</span></span>
|
||
<span class="brand-tagline">Landscaping & Yardwork</span>
|
||
</div>
|
||
</div>
|
||
<p>
|
||
Antelope Valley's premier landscaping, fire hazard weed abatement, desert rockscaping, and synthetic turf contractor. Palmdale & Lancaster, California.
|
||
</p>
|
||
<div style="margin-top: 14px; font-size: 0.85rem; color: var(--neon-lime); font-weight: 700;">
|
||
Direct: (661) 743-9600 • info@avyardpro.com
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="footer-heading">Services</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="weed-abatement.html">LA County Weed Abatement</a></li>
|
||
<li><a href="tumbleweed-removal.html">Tumbleweed Removal</a></li>
|
||
<li><a href="index.html#services">Synthetic Turf Installation</a></li>
|
||
<li><a href="index.html#services">Desert Xeriscape & Rock</a></li>
|
||
<li><a href="index.html#services">Tree Trimming & Palms</a></li>
|
||
<li><a href="index.html#services">Smart Irrigation Repair</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="footer-heading">Service Areas</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="service-areas.html" style="color: var(--neon-lime); font-weight: 700;">All Service Areas →</a></li>
|
||
<li><a href="palmdale-landscaping.html">Palmdale, CA (93550, 93551)</a></li>
|
||
<li><a href="lancaster-landscaping.html">Lancaster, CA (93534, 93535)</a></li>
|
||
<li><a href="quartz-hill-landscaping.html">Quartz Hill, CA (93536)</a></li>
|
||
<li><a href="acton-landscaping.html">Acton & Agua Dulce</a></li>
|
||
<li><a href="rosamond-landscaping.html">Rosamond & Mojave</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="footer-heading">Working Hours</h4>
|
||
<ul class="footer-links" style="font-size: 0.85rem; color: #cbd5e1;">
|
||
<li><strong>Mon – Fri:</strong> 6:30 AM – 7:00 PM</li>
|
||
<li><strong>Saturday:</strong> 7:00 AM – 6:00 PM</li>
|
||
<li><strong>Sunday:</strong> Emergency Storm Calls</li>
|
||
<li style="margin-top: 10px; color: var(--neon-lime); display: flex; align-items: center; gap: 6px;">
|
||
<svg width="15" height="15" 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>
|
||
24-Hr Antelope Valley Dispatch
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<div>
|
||
© <span id="current-year">2026</span> Next Gen Landscaping & Yard Care. All rights reserved. • <a href="privacy-policy.html" style="color: #94a3b8; text-decoration: underline;">Privacy Policy (CCPA / CPRA)</a> • <a href="terms-of-service.html" style="color: #94a3b8; text-decoration: underline;">Terms of Service</a>
|
||
</div>
|
||
<div>
|
||
Licensed, Bonded & Insured • Residential Hand-Tool Precision
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Modal Dialog -->
|
||
<dialog id="quote-dialog" aria-labelledby="modal-title">
|
||
<div class="modal-content">
|
||
<button class="modal-close-btn" id="modal-close" aria-label="Close quote modal">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||
</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>
|
||
<p>Fill out the form below or call us directly. Next Gen responds within 15 minutes during daylight hours.</p>
|
||
</div>
|
||
<form id="quote-form">
|
||
<div class="form-group">
|
||
<label for="lead-name">Full Name *</label>
|
||
<input type="text" id="lead-name" class="form-control" placeholder="e.g. John Doe" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="lead-phone">Mobile Phone (for quote text) *</label>
|
||
<input type="tel" id="lead-phone" class="form-control" placeholder="(661) 555-0123" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="lead-address">Property Address / City *</label>
|
||
<input type="text" id="lead-address" class="form-control" placeholder="e.g. 38200 10th St W, Palmdale, CA" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="lead-service">Service Needed</label>
|
||
<select id="lead-service" class="form-control">
|
||
<option value="Weed Abatement">Weed Abatement (Fire Notice / Hazard)</option>
|
||
<option value="Tumbleweed Removal">Tumbleweed Removal & Clearing</option>
|
||
<option value="General Yard Cleanup">Comprehensive Yard Cleanup</option>
|
||
<option value="Desert Xeriscaping">Desert Xeriscape & Rockscape</option>
|
||
<option value="Synthetic Turf">Artificial Turf Installation</option>
|
||
<option value="Tree Trimming">Tree Trimming & Palm Pruning</option>
|
||
<option value="Irrigation Repair">Smart Irrigation & Drip Repair</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="lead-notes">Notes / Yard Size</label>
|
||
<textarea id="lead-notes" class="form-control" rows="3" placeholder="Briefly describe lot size, weed height, or specific requirements..."></textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary" style="width: 100%; font-size: 1.05rem; padding: 14px;">
|
||
Submit for Fast Quote →
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</dialog>
|
||
|
||
<!-- Toast Notification -->
|
||
<div class="toast" id="toast" role="alert">
|
||
<div class="toast-icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||
</div>
|
||
<div class="toast-content">
|
||
<strong>Estimate Request Dispatched!</strong>
|
||
<p>A Next Gen crew lead will review your property and text/call you within 15 minutes.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="translations.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|