443 lines
27 KiB
HTML
443 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Privacy Policy – CleanHaul Junk Removal</title>
|
||
<meta name="description" content="Learn how CleanHaul collects, uses, and protects your personal information. Your privacy is important to us." />
|
||
<meta property="og:title" content="Privacy Policy – CleanHaul Junk Removal" />
|
||
<meta property="og:description" content="Learn how CleanHaul collects, uses, and protects your personal information. Your privacy is important to us." />
|
||
<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@400;500;600;700&family=Poppins:wght@600;700;800;900&display=swap" rel="stylesheet" />
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
fontFamily: {
|
||
sans: ['Inter', 'sans-serif'],
|
||
heading: ['Poppins', 'sans-serif'],
|
||
},
|
||
colors: {
|
||
background: '#f7f8fa',
|
||
foreground: '#0f1729',
|
||
card: '#ffffff',
|
||
'card-foreground': '#0f1729',
|
||
muted: '#f1f3f6',
|
||
'muted-foreground': '#6b7280',
|
||
border: '#e4e7ec',
|
||
brand: {
|
||
DEFAULT: '#1f9b5e',
|
||
foreground: '#ffffff',
|
||
secondary: '#e0b143',
|
||
'secondary-foreground': '#2a2415',
|
||
accent: '#dff0e3',
|
||
dark: '#0f1729',
|
||
light: '#f7f8fa',
|
||
},
|
||
},
|
||
animation: {
|
||
'fade-in': 'fadeIn 0.3s ease-out',
|
||
'spin-slow': 'spin 3s linear infinite',
|
||
'pulse-grow': 'pulseGrow 1.8s ease-in-out infinite',
|
||
'float': 'float 3s ease-in-out infinite',
|
||
},
|
||
keyframes: {
|
||
fadeIn: { '0%': { opacity: '0', transform: 'translateY(-4px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
|
||
pulseGrow: { '0%, 100%': { transform: 'scale(1)', opacity: '1' }, '50%': { transform: 'scale(1.08)', opacity: '0.8' } },
|
||
float: { '0%, 100%': { transform: 'translateY(0px)' }, '50%': { transform: 'translateY(-10px)' } },
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<link rel="stylesheet" href="assets/style.css">
|
||
<link rel="icon" href="assets/dustbin.png">
|
||
|
||
</head>
|
||
<body class="bg-background text-foreground antialiased">
|
||
|
||
<!-- PRELOADER -->
|
||
<div id="preloader">
|
||
<div class="text-center">
|
||
<div class="loader-truck">
|
||
<i data-lucide="truck" class="w-16 h-16 text-brand" style="width:64px;height:64px;"></i>
|
||
</div>
|
||
<p class="text-white font-heading font-bold text-xl mt-4">Clean<span class="text-brand">Haul</span></p>
|
||
<div class="loader-bar"><div class="loader-bar-fill"></div></div>
|
||
<p class="text-white/50 text-xs mt-3">Loading privacy policy...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- NAVIGATION -->
|
||
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-transparent">
|
||
<div class="container-main flex items-center justify-between h-16 md:h-20">
|
||
<a href="index.html" class="flex items-center gap-2 group">
|
||
<i data-lucide="truck" class="w-8 h-8 text-brand transition-transform group-hover:scale-110"></i>
|
||
<span class="text-xl font-bold font-heading">Clean<span class="text-brand">Haul</span></span>
|
||
</a>
|
||
<div class="hidden md:flex items-center gap-8">
|
||
<a href="index.html" class="text-sm font-medium text-foreground/80 hover:text-brand transition-colors">Home</a>
|
||
<a href="services.html" class="text-sm font-medium text-foreground/80 hover:text-brand transition-colors">Services</a>
|
||
<a href="pricing.html" class="text-sm font-medium text-foreground/80 hover:text-brand transition-colors">Pricing</a>
|
||
<a href="about.html" class="text-sm font-medium text-foreground/80 hover:text-brand transition-colors">About</a>
|
||
<a href="contact.html" class="text-sm font-medium text-foreground/80 hover:text-brand transition-colors">Contact</a>
|
||
<a href="blog.html" class="text-sm font-medium text-foreground/80 hover:text-brand transition-colors">Blog</a>
|
||
<a href="tel:+18005551234" class="btn-brand btn-lg"><i data-lucide="phone" class="w-4 h-4"></i>Call Now</a>
|
||
</div>
|
||
<button id="mobileToggle" class="md:hidden p-2 text-foreground" aria-label="Toggle menu">
|
||
<i data-lucide="menu" class="w-6 h-6"></i>
|
||
</button>
|
||
</div>
|
||
<div id="mobileMenu" class="hidden md:hidden bg-white/98 backdrop-blur-md border-t border-border animate-fade-in">
|
||
<div class="container-main py-4 flex flex-col gap-3">
|
||
<a href="index.html" class="py-2 text-base font-medium text-foreground/80 hover:text-brand">Home</a>
|
||
<a href="services.html" class="py-2 text-base font-medium text-foreground/80 hover:text-brand">Services</a>
|
||
<a href="pricing.html" class="py-2 text-base font-medium text-foreground/80 hover:text-brand">Pricing</a>
|
||
<a href="about.html" class="py-2 text-base font-medium text-foreground/80 hover:text-brand">About</a>
|
||
<a href="contact.html" class="py-2 text-base font-medium text-foreground/80 hover:text-brand">Contact</a>
|
||
<a href="blog.html" class="py-2 text-base font-medium text-foreground/80 hover:text-brand">Blog</a>
|
||
<a href="tel:+18005551234" class="btn-brand mt-2"><i data-lucide="phone" class="w-4 h-4"></i>Call Now</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="pt-32 pb-16 bg-brand-dark">
|
||
<div class="container-main text-center" data-aos="fade-up">
|
||
<h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">Privacy <span class="text-brand">Policy</span></h1>
|
||
<p class="text-lg text-white/70 max-w-2xl mx-auto">Your privacy is important to us. Here's how we handle your data.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRIVACY CONTENT -->
|
||
<section class="section-padding bg-background">
|
||
<div class="container-main max-w-7xl mx-auto terms-content group p-6 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all duration-300 aos-in" data-aos="fade-up">
|
||
<p class="text-sm text-muted-foreground mb-6"><strong>Last Updated:</strong> June 1, 2026</p>
|
||
<p>At CleanHaul, we take your privacy seriously. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website or use our services. Please read it carefully.</p>
|
||
|
||
<h2>1. Information We Collect</h2>
|
||
<p>We may collect the following types of personal information:</p>
|
||
<ul>
|
||
<li><strong>Personal Identification Information:</strong> Name, email address, phone number, and service address when you request a quote or book a service.</li>
|
||
<li><strong>Service Details:</strong> Descriptions of the items you want removed, pickup location, and preferred dates.</li>
|
||
<li><strong>Payment Information:</strong> Credit/debit card details are processed securely; we do not store full card numbers on our servers.</li>
|
||
<li><strong>Website Usage Data:</strong> IP address, browser type, pages visited, and time spent on our site (via cookies and analytics).</li>
|
||
</ul>
|
||
|
||
<h2>2. How We Use Your Information</h2>
|
||
<p>We use the collected data for the following purposes:</p>
|
||
<ul>
|
||
<li>To provide, schedule, and improve our junk removal services.</li>
|
||
<li>To communicate with you about your appointments, quotes, and inquiries.</li>
|
||
<li>To process payments and send invoices.</li>
|
||
<li>To send occasional promotional emails or special offers (you can opt out anytime).</li>
|
||
<li>To analyze website traffic and improve user experience.</li>
|
||
</ul>
|
||
|
||
<h2>3. How We Protect Your Information</h2>
|
||
<p>We implement industry-standard security measures to protect your personal data:</p>
|
||
<ul>
|
||
<li>All data is transmitted over encrypted connections (SSL).</li>
|
||
<li>Access to personal information is restricted to authorized personnel only.</li>
|
||
<li>We regularly review our data collection, storage, and processing practices to prevent unauthorized access.</li>
|
||
</ul>
|
||
|
||
<h2>4. Cookies and Tracking Technologies</h2>
|
||
<p>Our website uses cookies to enhance your browsing experience. Cookies are small text files stored on your device that help us remember your preferences and understand how you use our site. You can disable cookies in your browser settings, but some features may not function properly.</p>
|
||
|
||
<h2>5. Third-Party Services</h2>
|
||
<p>We do not sell, trade, or rent your personal information to third parties. We may share data with trusted service providers who assist us in operating our business, such as payment processors, analytics platforms, and email services. These parties are required to keep your information confidential and use it solely for the services we contract them to perform.</p>
|
||
|
||
<h2>6. Data Retention</h2>
|
||
<p>We retain your personal information only for as long as necessary to fulfill the purposes outlined in this policy, unless a longer retention period is required by law. When we no longer need your data, we securely delete or anonymize it.</p>
|
||
|
||
<h2>7. Your Rights</h2>
|
||
<p>Depending on your location, you may have the following rights regarding your personal data:</p>
|
||
<ul>
|
||
<li>Access: Request a copy of the data we hold about you.</li>
|
||
<li>Correction: Request that we correct any inaccurate or incomplete data.</li>
|
||
<li>Deletion: Request that we delete your personal information.</li>
|
||
<li>Opt-out: Unsubscribe from marketing communications at any time.</li>
|
||
</ul>
|
||
<p>To exercise these rights, please contact us using the details below. We will respond within 30 days.</p>
|
||
|
||
<h2>8. Children's Privacy</h2>
|
||
<p>Our services are not directed to individuals under the age of 18. We do not knowingly collect personal information from children. If you believe we have inadvertently collected such data, please contact us immediately.</p>
|
||
|
||
<h2>9. Changes to This Policy</h2>
|
||
<p>We may update this Privacy Policy from time to time. Any changes will be posted on this page with an updated revision date. We encourage you to review this page periodically for the latest information.</p>
|
||
|
||
<h2>10. Contact Us</h2>
|
||
<p>If you have any questions or concerns about this Privacy Policy, please reach out:</p>
|
||
<ul>
|
||
<li><strong>Phone:</strong> <a href="tel:+18005551234" class="text-brand hover:underline">(800) 555-1234</a></li>
|
||
<li><strong>Email:</strong> <a href="mailto:info@cleanhaul.com" class="text-brand hover:underline">info@cleanhaul.com</a></li>
|
||
<li><strong>Address:</strong> 123 Clean Street, Suite 100, Metro City, ST 12345</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA BANNER -->
|
||
<section class="py-20 bg-brand relative overflow-hidden">
|
||
<div class="absolute inset-0 opacity-10">
|
||
<div class="absolute top-0 left-0 w-72 h-72 bg-white rounded-full -translate-x-1/2 -translate-y-1/2"></div>
|
||
<div class="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full translate-x-1/3 translate-y-1/3"></div>
|
||
</div>
|
||
<div class="container-main relative text-center" data-aos="fade-up">
|
||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4">Need Junk Removed Today?</h2>
|
||
<p class="text-lg text-white/80 mb-8 max-w-lg mx-auto">Get a free, no‑obligation estimate and let us do the heavy lifting.</p>
|
||
<div class="flex flex-wrap justify-center gap-4">
|
||
<a href="contact.html" class="btn-brand-dark btn-xl">Book Service</a>
|
||
<a href="tel:+18005551234" class="btn-brand-outline btn-xl" style="border-color:#fff; color:#fff;"><i data-lucide="phone" class="w-5 h-5"></i>Call Now</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="bg-brand-dark text-white">
|
||
<!-- Main Footer -->
|
||
<div class="container-main section-padding pb-8">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10">
|
||
|
||
<!-- Brand Column -->
|
||
<div class="lg:col-span-1">
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<i data-lucide="truck" class="w-7 h-7 text-brand"></i>
|
||
<span class="text-xl font-bold font-heading">Clean<span class="text-brand">Haul</span></span>
|
||
</div>
|
||
<p class="text-sm text-white/70 leading-relaxed mb-4">Fast, affordable, and eco-friendly junk removal
|
||
services. We handle the heavy lifting so you don't have to.</p>
|
||
<!-- Social Media Links -->
|
||
<div class="flex gap-3">
|
||
<!-- Facebook -->
|
||
<a href="#"
|
||
class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand transition-colors"
|
||
aria-label="Facebook">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||
<path
|
||
d="M22 12.07C22 6.5 17.52 2 12 2S2 6.5 2 12.07c0 5.02 3.66 9.18 8.44 9.93v-7.03H7.9v-2.9h2.54V9.85c0-2.52 1.49-3.92 3.78-3.92 1.09 0 2.23.2 2.23.2v2.47H15.2c-1.24 0-1.63.78-1.63 1.57v1.89h2.77l-.44 2.9h-2.33V22c4.78-.75 8.43-4.91 8.43-9.93z" />
|
||
</svg>
|
||
</a>
|
||
|
||
<!-- Instagram -->
|
||
<a href="#"
|
||
class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand transition-colors"
|
||
aria-label="Instagram">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||
<path
|
||
d="M7 2C4.24 2 2 4.24 2 7v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5H7zm10 2a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10zm-5 3.5A5.5 5.5 0 1 0 17.5 13 5.51 5.51 0 0 0 12 7.5zm0 2A3.5 3.5 0 1 1 8.5 13 3.5 3.5 0 0 1 12 9.5zm5.75-3.25a1.25 1.25 0 1 0 1.25 1.25 1.25 1.25 0 0 0-1.25-1.25z" />
|
||
</svg>
|
||
</a>
|
||
|
||
<!-- X (Twitter) -->
|
||
<a href="#"
|
||
class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand transition-colors"
|
||
aria-label="X">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||
<path
|
||
d="M18.9 2H22l-6.77 7.74L23.2 22h-6.26l-4.9-6.4L6.45 22H3.34l7.24-8.28L.8 2h6.36l4.43 5.84L18.9 2zm-1.1 18h1.73L6.26 3.9H4.4L17.8 20z" />
|
||
</svg>
|
||
</a>
|
||
|
||
<!-- LinkedIn -->
|
||
<a href="#"
|
||
class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand transition-colors"
|
||
aria-label="LinkedIn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||
<path
|
||
d="M4.98 3.5A2.48 2.48 0 1 0 5 8.46a2.48 2.48 0 0 0-.02-4.96zM3 9h4v12H3zM9 9h3.83v1.71h.05c.53-1.01 1.84-2.08 3.79-2.08C20.22 8.63 21 10.97 21 14v7h-4v-6.21c0-1.48-.03-3.39-2.06-3.39-2.07 0-2.39 1.61-2.39 3.28V21H9z" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- Services Column -->
|
||
<div>
|
||
<h4 class="font-semibold text-lg mb-4">Services</h4>
|
||
<ul class="space-y-2 text-sm text-white/70">
|
||
<li><a href="services.html" class="hover:text-brand transition-colors">Household Junk Removal</a></li>
|
||
<li><a href="services.html" class="hover:text-brand transition-colors">Office Cleanouts</a></li>
|
||
<li><a href="services.html" class="hover:text-brand transition-colors">Construction Debris</a></li>
|
||
<li><a href="services.html" class="hover:text-brand transition-colors">Yard Waste Removal</a></li>
|
||
<li><a href="services.html" class="hover:text-brand transition-colors">Appliance Removal</a></li>
|
||
<li><a href="services.html" class="hover:text-brand transition-colors">Furniture Disposal</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Quick Links Column -->
|
||
<div>
|
||
<h4 class="font-semibold text-lg mb-4">Quick Links</h4>
|
||
<ul class="space-y-2 text-sm text-white/70">
|
||
<li><a href="index.html" class="hover:text-brand transition-colors">Home</a></li>
|
||
<li><a href="pricing.html" class="hover:text-brand transition-colors">Pricing</a></li>
|
||
<li><a href="about.html" class="hover:text-brand transition-colors">About Us</a></li>
|
||
<li><a href="contact.html" class="hover:text-brand transition-colors">Contact</a></li>
|
||
<li><a href="blog-detail.html" class="hover:text-brand transition-colors">Blog</a></li>
|
||
<li><a href="faq.html" class="hover:text-brand transition-colors">FAQ</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Service Areas Column -->
|
||
<div>
|
||
<h4 class="font-semibold text-lg mb-4">Service Areas</h4>
|
||
<ul class="space-y-2 text-sm text-white/70">
|
||
<li class="flex items-center gap-2"><i data-lucide="map-pin"
|
||
class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Downtown Metro</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="map-pin"
|
||
class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>North Suburbs</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="map-pin"
|
||
class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>South County</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="map-pin"
|
||
class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>East Valley</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="map-pin"
|
||
class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>West Hills</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="map-pin"
|
||
class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Surrounding Counties</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Contact & Business Hours Column -->
|
||
<div>
|
||
<h4 class="font-semibold text-lg mb-4">Contact & Hours</h4>
|
||
<ul class="space-y-3 text-sm text-white/70">
|
||
<li class="flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4 text-brand flex-shrink-0"></i><a
|
||
href="tel:+18005551234" class="hover:text-brand">(800) 555-1234</a></li>
|
||
<li class="flex items-center gap-2"><i data-lucide="mail" class="w-4 h-4 text-brand flex-shrink-0"></i><a
|
||
href="mailto:info@cleanhaul.com" class="hover:text-brand">info@cleanhaul.com</a></li>
|
||
<li class="flex items-start gap-2"><i data-lucide="map-pin"
|
||
class="w-4 h-4 text-brand flex-shrink-0 mt-0.5"></i><span>123 Clean Street, Suite 100<br />Metro City,
|
||
ST 12345</span></li>
|
||
<li class="border-t border-white/10 pt-3 mt-3">
|
||
<p class="font-semibold text-white mb-1">Business Hours</p>
|
||
<p class="text-xs">Mon – Fri: 6:00 AM – 8:00 PM</p>
|
||
<p class="text-xs">Saturday: 7:00 AM – 6:00 PM</p>
|
||
<p class="text-xs">Sunday: 8:00 AM – 4:00 PM</p>
|
||
</li>
|
||
<li class="border-t border-white/10 pt-3 mt-3">
|
||
<p class="font-semibold text-white mb-1">24/7 Support</p>
|
||
<p class="text-xs">Emergency services available</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Newsletter Signup -->
|
||
<div class="mt-10 pt-8 border-t border-white/10">
|
||
<div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
|
||
<div>
|
||
<h4 class="font-semibold text-lg mb-1">Subscribe to Our Newsletter</h4>
|
||
<p class="text-sm text-white/60">Get tips, special offers, and updates straight to your inbox.</p>
|
||
</div>
|
||
<div class="flex w-full md:w-auto gap-2">
|
||
<input type="email" placeholder="Enter your email"
|
||
class="footer-newsletter-input flex-1 md:w-64 rounded-xl bg-white/10 border border-white/20 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-brand transition-all" />
|
||
<button class="btn-brand btn-lg whitespace-nowrap">Subscribe</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Payment Methods & Badges -->
|
||
<div class="mt-8 pt-8 border-t border-white/10">
|
||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
||
<div class="flex items-center gap-4 flex-wrap justify-center">
|
||
<span class="text-sm text-white/50">We Accept:</span>
|
||
<span class="px-3 py-1.5 rounded-lg bg-white/10 text-xs font-semibold text-white/80">💳 Visa</span>
|
||
<span class="px-3 py-1.5 rounded-lg bg-white/10 text-xs font-semibold text-white/80">💳 Mastercard</span>
|
||
<span class="px-3 py-1.5 rounded-lg bg-white/10 text-xs font-semibold text-white/80">💳 Amex</span>
|
||
<span class="px-3 py-1.5 rounded-lg bg-white/10 text-xs font-semibold text-white/80">💵 Cash</span>
|
||
<span class="px-3 py-1.5 rounded-lg bg-white/10 text-xs font-semibold text-white/80">📱 Apple Pay</span>
|
||
</div>
|
||
<div class="flex items-center gap-4 flex-wrap justify-center">
|
||
<span
|
||
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-brand/20 text-brand text-xs font-semibold border border-brand/30"><i
|
||
data-lucide="shield-check" class="w-3.5 h-3.5"></i>Licensed & Insured</span>
|
||
<span
|
||
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-brand/20 text-brand text-xs font-semibold border border-brand/30"><i
|
||
data-lucide="award" class="w-3.5 h-3.5"></i>5-Star Rated</span>
|
||
<span
|
||
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-brand/20 text-brand text-xs font-semibold border border-brand/30"><i
|
||
data-lucide="leaf" class="w-3.5 h-3.5"></i>Eco Certified</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom Bar -->
|
||
<div class="border-t border-white/10">
|
||
<div
|
||
class="container-main py-6 flex flex-col md:flex-row items-center justify-between gap-4 text-center md:text-left">
|
||
<p class="text-sm text-white/50">© <span id="year"></span> CleanHaul. All rights reserved.</p>
|
||
<div class="flex gap-6 text-sm text-white/50">
|
||
<a href="pricing.html" class="hover:text-brand transition-colors">Privacy Policy</a>
|
||
<a href="terms.html" class="hover:text-brand transition-colors">Terms of Service</a>
|
||
<a href="faq.html" class="hover:text-brand transition-colors">FAQs</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- MOBILE CALL BUTTON -->
|
||
<a href="tel:+18005551234" class="md:hidden fixed bottom-6 left-6 z-50 w-14 h-14 rounded-full bg-brand text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform animate-pulse-grow" aria-label="Call now">
|
||
<i data-lucide="phone" class="w-6 h-6"></i>
|
||
</a>
|
||
|
||
<!-- SCROLL TOP -->
|
||
<button id="scrollTop" class="fixed bottom-6 right-6 z-50 w-12 h-12 rounded-full bg-brand text-white shadow-xl items-center justify-center hover:scale-110 transition-all hidden" aria-label="Scroll to top">
|
||
<i data-lucide="arrow-up" class="w-5 h-5"></i>
|
||
</button>
|
||
|
||
<script>
|
||
lucide.createIcons();
|
||
|
||
let aosObserver = null;
|
||
function initAOS() {
|
||
if (aosObserver) aosObserver.disconnect();
|
||
aosObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('aos-in'); });
|
||
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
|
||
document.querySelectorAll('[data-aos]').forEach(el => {
|
||
el.style.opacity = ''; el.style.transform = ''; aosObserver.observe(el);
|
||
});
|
||
}
|
||
|
||
window.addEventListener('load', () => {
|
||
const preloader = document.getElementById('preloader');
|
||
setTimeout(() => {
|
||
preloader.classList.add('hidden-preloader');
|
||
setTimeout(() => initAOS(), 150);
|
||
}, 1800);
|
||
});
|
||
|
||
const nav = document.getElementById('navbar');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 20) {
|
||
nav.classList.remove('bg-transparent');
|
||
nav.classList.add('bg-white/95','backdrop-blur-md','shadow-lg');
|
||
} else {
|
||
nav.classList.add('bg-transparent');
|
||
nav.classList.remove('bg-white/95','backdrop-blur-md','shadow-lg');
|
||
}
|
||
const st = document.getElementById('scrollTop');
|
||
if (st) {
|
||
if (window.scrollY > 400) { st.classList.remove('hidden'); st.classList.add('flex'); }
|
||
else { st.classList.add('hidden'); st.classList.remove('flex'); }
|
||
}
|
||
});
|
||
|
||
const toggle = document.getElementById('mobileToggle');
|
||
const menu = document.getElementById('mobileMenu');
|
||
toggle?.addEventListener('click', () => {
|
||
menu.classList.toggle('hidden');
|
||
const icon = toggle.querySelector('i');
|
||
icon.setAttribute('data-lucide', menu.classList.contains('hidden') ? 'menu' : 'x');
|
||
lucide.createIcons();
|
||
});
|
||
|
||
document.getElementById('scrollTop')?.addEventListener('click', () => window.scrollTo({top:0, behavior:'smooth'}));
|
||
document.getElementById('year').textContent = new Date().getFullYear();
|
||
|
||
initAOS();
|
||
setTimeout(() => lucide.createIcons(), 200);
|
||
</script>
|
||
</body>
|
||
</html> |