added more preview pages and more templates

This commit is contained in:
westfarn committed 2026-07-21 07:10:03 -05:00
1 parent c6119ffdf5
commit b19fdee30d
3726 files changed
+651487 -6169

No files matched your search

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+604
View File
@@ -0,0 +1,604 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Us – CleanHaul Junk Removal</title>
<meta name="description" content="Learn about CleanHaul's mission, values, and professional team. Licensed, insured, and committed to eco-friendly disposal." />
<meta property="og:title" content="About Us – CleanHaul Junk Removal" />
<meta property="og:description" content="Learn about CleanHaul's mission, values, and professional team. Licensed, insured, and committed to eco-friendly disposal." />
<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',
'slide-up': 'slideUp 0.5s ease-out',
'slide-down': 'slideDown 0.4s ease-out',
'bounce-subtle': 'bounceSubtle 2s ease-in-out infinite',
'scale-in': 'scaleIn 0.4s ease-out',
'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' } },
slideUp: { '0%': { opacity: '0', transform: 'translateY(30px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
slideDown: { '0%': { opacity: '0', transform: 'translateY(-20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
scaleIn: { '0%': { opacity: '0', transform: 'scale(0.9)' }, '100%': { opacity: '1', transform: 'scale(1)' } },
bounceSubtle: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-8px)' } },
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 about us...</p>
</div>
</div>
<!-- NAVIGATION (same as before) -->
<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-brand font-semibold transition-colors border-b-2 border-brand">About</a>
<a href="contact.html" class="text-sm font-medium text-foreground/80 hover:text-brand transition-colors">Contact</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="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 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 text-center relative" data-aos="fade-up">
<h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">About <span class="text-brand">CleanHaul</span></h1>
<p class="text-lg text-white/70 max-w-2xl mx-auto">Your trusted partner for fast, affordable, and responsible junk removal.</p>
</div>
</section>
<!-- OUR STORY + IMAGE -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="grid lg:grid-cols-2 gap-12 items-center rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all p-6">
<div data-aos="fade-right rounded-2xl bg-card border border-border">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Our Story</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold mb-6">Cleaning Up Communities Since 2015</h2>
<p class="text-muted-foreground leading-relaxed mb-4">CleanHaul started with a simple idea: make junk removal easy, affordable, and environmentally responsible. What began as a single truck operation has grown into a trusted team serving thousands of homes and businesses.</p>
<p class="text-muted-foreground leading-relaxed mb-4">Our mission is to help you reclaim your space while minimizing environmental impact. We sort, recycle, and donate items whenever possible, keeping up to 60% of collected items out of landfills.</p>
<p class="text-muted-foreground leading-relaxed">Every member of our team is trained, background-checked, and committed to providing exceptional service. We treat your property with the same care as our own.</p>
</div>
<div class="rounded-2xl overflow-hidden shadow-xl" data-aos="fade-left">
<img src="assets/team.jpg" alt="CleanHaul team" class="w-full h-auto object-cover" loading="lazy" />
</div>
</div>
</div>
</section>
<!-- OUR VALUES -->
<section class="section-padding bg-muted">
<div class="container-main">
<div class="text-center mb-14" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold">Our Values</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-2xl bg-card text-center border border-border hover:shadow-lg transition-shadow" data-aos="zoom-in" data-aos-delay="100">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4"><i data-lucide="shield" class="w-7 h-7"></i></div>
<h3 class="text-lg font-bold mb-2">Licensed & Insured</h3>
<p class="text-sm text-muted-foreground">Fully licensed and insured for your peace of mind on every job.</p>
</div>
<div class="p-6 rounded-2xl bg-card text-center border border-border hover:shadow-lg transition-shadow" data-aos="zoom-in" data-aos-delay="200">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4"><i data-lucide="award" class="w-7 h-7"></i></div>
<h3 class="text-lg font-bold mb-2">5-Star Rated</h3>
<p class="text-sm text-muted-foreground">Consistently rated 5 stars by satisfied customers across the region.</p>
</div>
<div class="p-6 rounded-2xl bg-card text-center border border-border hover:shadow-lg transition-shadow" data-aos="zoom-in" data-aos-delay="300">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4"><i data-lucide="leaf" class="w-7 h-7"></i></div>
<h3 class="text-lg font-bold mb-2">Eco-Conscious</h3>
<p class="text-sm text-muted-foreground">We recycle and donate up to 60% of the items we collect.</p>
</div>
<div class="p-6 rounded-2xl bg-card text-center border border-border hover:shadow-lg transition-shadow" data-aos="zoom-in" data-aos-delay="400">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4"><i data-lucide="users" class="w-7 h-7"></i></div>
<h3 class="text-lg font-bold mb-2">Expert Team</h3>
<p class="text-sm text-muted-foreground">Trained, background-checked professionals who treat your property with respect.</p>
</div>
</div>
</div>
</section>
<!-- MEET THE TEAM (NEW SECTION) -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="text-center mb-14" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Our People</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">Meet the Team</h2>
<p class="mt-4 text-muted-foreground max-w-xl mx-auto">The dedicated professionals who make CleanHaul the best in the business.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Team Member 1 -->
<div class="text-center group rounded-2xl bg-card border border-border p-2.5" data-aos="fade-up" data-aos-delay="100">
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-4 border-brand/20 group-hover:border-brand transition-all duration-300">
<img src="assets/team-1.jpg" alt="Michael Torres" class="w-full h-full object-cover" loading="lazy" />
</div>
<h3 class="font-bold text-lg">Michael Torres</h3>
<p class="text-brand text-sm font-medium">Founder & CEO</p>
<p class="text-muted-foreground text-xs mt-2">10+ years of industry experience. Passionate about eco-friendly solutions.</p>
</div>
<!-- Team Member 2 -->
<div class="text-center group rounded-2xl bg-card border border-border p-2.5" data-aos="fade-up" data-aos-delay="200">
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-4 border-brand/20 group-hover:border-brand transition-all duration-300">
<img src="assets/team-2.jpg" alt="Sarah Lin" class="w-full h-full object-cover" loading="lazy" />
</div>
<h3 class="font-bold text-lg">Sarah Lin</h3>
<p class="text-brand text-sm font-medium">Operations Manager</p>
<p class="text-muted-foreground text-xs mt-2">Ensuring every job runs smoothly and on time.</p>
</div>
<!-- Team Member 3 -->
<div class="text-center group rounded-2xl bg-card border border-border p-2.5" data-aos="fade-up" data-aos-delay="300">
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-4 border-brand/20 group-hover:border-brand transition-all duration-300">
<img src="assets/team-3.jpg" alt="David Okafor" class="w-full h-full object-cover" loading="lazy" />
</div>
<h3 class="font-bold text-lg">David Okafor</h3>
<p class="text-brand text-sm font-medium">Lead Disposal Specialist</p>
<p class="text-muted-foreground text-xs mt-2">Expert in sorting, recycling, and donation logistics.</p>
</div>
<!-- Team Member 4 -->
<div class="text-center group rounded-2xl bg-card border border-border p-2.5" data-aos="fade-up" data-aos-delay="400">
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-4 border-brand/20 group-hover:border-brand transition-all duration-300">
<img src="assets/team-4.jpg" alt="Emily Rodriguez" class="w-full h-full object-cover" loading="lazy" />
</div>
<h3 class="font-bold text-lg">Emily Rodriguez</h3>
<p class="text-brand text-sm font-medium">Customer Success Lead</p>
<p class="text-muted-foreground text-xs mt-2">Making sure every customer feels valued and heard.</p>
</div>
</div>
</div>
</section>
<!-- COMPANY MILESTONES (NEW TIMELINE) -->
<section class="section-padding bg-muted">
<div class="container-main">
<div class="text-center mb-14" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Our Journey</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">Company Milestones</h2>
</div>
<div class="max-w-3xl mx-auto">
<div class="relative pl-6 border-l-4 border-brand/30 space-y-10">
<div class="relative" data-aos="fade-right" data-aos-delay="100">
<div class="absolute -left-[2.25rem] w-5 h-5 rounded-full bg-brand border-4 border-muted"></div>
<p class="text-brand font-semibold text-sm">2015</p>
<h3 class="font-bold text-lg">Founded with One Truck</h3>
<p class="text-muted-foreground text-sm">CleanHaul began operations in a small garage with a single pickup truck and a big vision.</p>
</div>
<div class="relative" data-aos="fade-right" data-aos-delay="200">
<div class="absolute -left-[2.25rem] w-5 h-5 rounded-full bg-brand border-4 border-muted"></div>
<p class="text-brand font-semibold text-sm">2017</p>
<h3 class="font-bold text-lg">Expanded to Commercial Services</h3>
<p class="text-muted-foreground text-sm">Launched office and construction debris cleanouts, doubling our team size.</p>
</div>
<div class="relative" data-aos="fade-right" data-aos-delay="300">
<div class="absolute -left-[2.25rem] w-5 h-5 rounded-full bg-brand border-4 border-muted"></div>
<p class="text-brand font-semibold text-sm">2019</p>
<h3 class="font-bold text-lg">Reached 10,000 Happy Customers</h3>
<p class="text-muted-foreground text-sm">Awarded “Best Junk Removal Service” by the Metro Business Association.</p>
</div>
<div class="relative" data-aos="fade-right" data-aos-delay="400">
<div class="absolute -left-[2.25rem] w-5 h-5 rounded-full bg-brand border-4 border-muted"></div>
<p class="text-brand font-semibold text-sm">2022</p>
<h3 class="font-bold text-lg">Introduced Same-Day Guarantee</h3>
<p class="text-muted-foreground text-sm">Launched express same-day pickup, becoming one of the fastest services in the region.</p>
</div>
<div class="relative" data-aos="fade-right" data-aos-delay="500">
<div class="absolute -left-[2.25rem] w-5 h-5 rounded-full bg-brand border-4 border-muted"></div>
<p class="text-brand font-semibold text-sm">2025</p>
<h3 class="font-bold text-lg">Over 50,000 Jobs Completed</h3>
<p class="text-muted-foreground text-sm">Continued growth with a fleet of 12 trucks and a team of 40+ professionals.</p>
</div>
</div>
</div>
</div>
</section>
<!-- IMPACT STATISTICS (NEW COUNTERS) -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="text-center mb-14" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Our Impact</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">By the Numbers</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="text-center p-6 rounded-2xl bg-card border border-border" data-aos="zoom-in" data-aos-delay="100">
<div class="text-4xl font-extrabold text-brand mb-2">50K+</div>
<p class="text-muted-foreground font-medium">Jobs Completed</p>
</div>
<div class="text-center p-6 rounded-2xl bg-card border border-border" data-aos="zoom-in" data-aos-delay="200">
<div class="text-4xl font-extrabold text-brand mb-2">3,200 tons</div>
<p class="text-muted-foreground font-medium">Waste Diverted from Landfills</p>
</div>
<div class="text-center p-6 rounded-2xl bg-card border border-border" data-aos="zoom-in" data-aos-delay="300">
<div class="text-4xl font-extrabold text-brand mb-2">98%</div>
<p class="text-muted-foreground font-medium">Customer Satisfaction Rate</p>
</div>
<div class="text-center p-6 rounded-2xl bg-card border border-border" data-aos="zoom-in" data-aos-delay="400">
<div class="text-4xl font-extrabold text-brand mb-2">12+</div>
<p class="text-muted-foreground font-medium">Trucks in Fleet</p>
</div>
</div>
</div>
</section>
<!-- CERTIFICATIONS & PARTNERS (NEW) -->
<section class="section-padding bg-muted">
<div class="container-main">
<div class="text-center mb-10" data-aos="fade-up">
<h2 class="text-2xl md:text-3xl font-bold">Certifications & Partners</h2>
<p class="text-muted-foreground mt-2">We are proud to be recognized by leading industry organizations.</p>
</div>
<div class="flex flex-wrap justify-center items-center gap-10 opacity-70">
<div class="flex items-center gap-2 text-muted-foreground" data-aos="fade-up" data-aos-delay="100">
<i data-lucide="award" class="w-6 h-6 text-brand"></i>
<span class="font-semibold text-sm">NAID AAA Certified</span>
</div>
<div class="flex items-center gap-2 text-muted-foreground" data-aos="fade-up" data-aos-delay="200">
<i data-lucide="leaf" class="w-6 h-6 text-brand"></i>
<span class="font-semibold text-sm">Green Business Bureau</span>
</div>
<div class="flex items-center gap-2 text-muted-foreground" data-aos="fade-up" data-aos-delay="300">
<i data-lucide="shield-check" class="w-6 h-6 text-brand"></i>
<span class="font-semibold text-sm">Licensed & Insured</span>
</div>
<div class="flex items-center gap-2 text-muted-foreground" data-aos="fade-up" data-aos-delay="400">
<i data-lucide="heart-handshake" class="w-6 h-6 text-brand"></i>
<span class="font-semibold text-sm">Habitat for Humanity Partner</span>
</div>
</div>
</div>
</section>
<!-- CTA (same as before) -->
<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">Don't let clutter take over. Get fast, reliable junk removal at prices you'll love.</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 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">&copy; <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" 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();
// ===== ENHANCED AOS OBSERVER WITH PRELOADER FIX =====
let aosObserver = null;
function initAOS() {
if (aosObserver) {
aosObserver.disconnect();
aosObserver = null;
}
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 => {
// Reset any inline styles that might block animation
el.style.opacity = '';
el.style.transform = '';
aosObserver.observe(el);
});
}
// Preloader
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
setTimeout(() => {
preloader.classList.add('hidden-preloader');
setTimeout(() => {
initAOS();
}, 150);
}, 1800);
});
// Navbar scroll
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'); }
}
});
// Mobile menu
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();
});
// Scroll top
document.getElementById('scrollTop')?.addEventListener('click', () => window.scrollTo({top:0, behavior:'smooth'}));
// Year
document.getElementById('year').textContent = new Date().getFullYear();
// Initial AOS call (will be re-called after loader)
initAOS();
setTimeout(() => lucide.createIcons(), 200);
</script>
</body>
</html>
Binary file not shown.
Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

+318
View File
@@ -0,0 +1,318 @@
.btn-brand,
.btn-brand-dark,
.btn-brand-outline {
display: inline-flex;
gap: 0.5rem;
font-weight: 600;
transition: 0.2s;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Inter, sans-serif;
background: #f7f8fa;
color: #0f1729;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Poppins, sans-serif;
}
.container-main {
max-width: 95rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.container-main {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.container-main {
padding-left: 2rem;
padding-right: 2rem;
}
}
.section-padding {
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.section-padding {
padding-top: 6rem;
padding-bottom: 6rem;
}
}
.btn-brand {
align-items: center;
justify-content: center;
background: #1f9b5e;
color: #fff;
padding: 0.75rem 1.75rem;
border-radius: 0.75rem;
box-shadow: 0 4px 14px rgba(31, 155, 94, 0.25);
}
.btn-brand:hover {
background: #197a4a;
transform: translateY(-2px);
}
.btn-brand-outline {
align-items: center;
justify-content: center;
border: 2px solid #1f9b5e;
color: #1f9b5e;
padding: 0.625rem 1.625rem;
border-radius: 0.75rem;
background: 0 0;
}
#preloader,
.btn-brand-dark {
background: #0f1729;
align-items: center;
}
.btn-brand-outline:hover {
background: #1f9b5e;
color: #fff;
}
.btn-brand-dark {
justify-content: center;
color: #fff;
padding: 0.75rem 1.75rem;
border-radius: 0.75rem;
}
.btn-brand-dark:hover {
background: #1c2541;
transform: translateY(-2px);
}
.btn-xl {
padding: 1rem 2.25rem;
font-size: 1rem;
}
.btn-lg {
padding: 0.65rem 1.5rem;
font-size: 0.95rem;
}
[data-aos] {
opacity: 0;
transition: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-aos="fade-up"] {
transform: translateY(40px);
}
[data-aos="fade-down"] {
transform: translateY(-40px);
}
[data-aos="fade-left"] {
transform: translateX(-40px);
}
[data-aos="fade-right"] {
transform: translateX(40px);
}
[data-aos="zoom-in"] {
transform: scale(0.85);
}
[data-aos="flip-left"] {
transform: perspective(600px) rotateY(-25deg);
}
[data-aos="flip-right"] {
transform: perspective(600px) rotateY(25deg);
}
[data-aos].aos-in {
opacity: 1;
transform: translateY(0) translateX(0) scale(1) perspective(600px) rotateY(0);
}
[data-aos-delay="100"] {
transition-delay: 0.1s;
}
[data-aos-delay="200"] {
transition-delay: 0.2s;
}
[data-aos-delay="300"] {
transition-delay: 0.3s;
}
[data-aos-delay="400"] {
transition-delay: 0.4s;
}
[data-aos-delay="500"] {
transition-delay: 0.5s;
}
[data-aos-delay="600"] {
transition-delay: 0.6s;
}
[data-aos-delay="700"] {
transition-delay: 0.7s;
}
[data-aos-delay="800"] {
transition-delay: 0.8s;
}
#navbar {
background-color: #fff;
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
display: flex;
justify-content: center;
transition: opacity 0.5s, visibility 0.5s;
opacity: 1;
visibility: visible;
}
#preloader.hidden-preloader {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
#preloader .loader-inner {
text-align: center;
}
#preloader .loader-truck {
animation: 2s ease-in-out infinite float;
display: inline-block;
}
#preloader .loader-bar {
width: 180px;
height: 6px;
background: rgba(255, 255, 255, 0.15);
border-radius: 10px;
margin: 20px auto 0;
overflow: hidden;
}
#preloader .loader-bar-fill {
width: 0%;
height: 100%;
background: #1f9b5e;
border-radius: 10px;
animation: 1.6s ease-in-out forwards loaderFill;
}
@keyframes loaderFill {
0% {
width: 0%;
}
60% {
width: 85%;
}
90% {
width: 98%;
}
100% {
width: 100%;
}
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-14px);
}
}
.footer-newsletter-input:focus {
outline: 0;
box-shadow: 0 0 0 3px rgba(31, 155, 94, 0.3);
}
.map-placeholder {
background: #e5e7eb;
height: 300px;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-weight: 500;
border: 2px dashed #d1d5db;
}
.article-content p {
margin-bottom: 1.25rem;
line-height: 1.75;
color: #374151;
}
.article-content h2 {
font-size: 1.75rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
color: #0f1729;
}
.article-content h3 {
font-size: 1.4rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.article-content ul {
list-style-type: disc;
padding-left: 1.5rem;
margin-bottom: 1.25rem;
}
.article-content ul li {
margin-bottom: 0.5rem;
color: #374151;
}
.article-content blockquote {
border-left: 4px solid #1f9b5e;
padding-left: 1.5rem;
font-style: italic;
color: #4b5563;
margin: 1.5rem 0;
}
.privacy-content h2,
.terms-content h2 {
font-size: 1.5rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 0.75rem;
color: #0f1729;
}
.privacy-content h3,
.terms-content h3 {
font-size: 1.2rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.privacy-content p,
.terms-content p {
margin-bottom: 1rem;
line-height: 1.7;
color: #374151;
}
.privacy-content ul,
.terms-content ul {
list-style-type: disc;
padding-left: 1.5rem;
margin-bottom: 1rem;
color: #374151;
}
.privacy-content ul li,
.terms-content ul li {
margin-bottom: 0.5rem;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s, padding 0.4s;
}
.faq-item.active .faq-answer {
max-height: 300px;
padding-bottom: 1rem;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
}
.faq-icon {
transition: transform 0.3s;
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

+475
View File
@@ -0,0 +1,475 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>5 Easy Steps to Declutter Your Home Before Summer – CleanHaul Blog</title>
<meta name="description" content="Summer is the perfect time to clear out the old and welcome the new. Follow these 5 simple steps to declutter your home fast." />
<meta property="og:title" content="5 Easy Steps to Declutter Your Home Before Summer – CleanHaul Blog" />
<meta property="og:description" content="Summer is the perfect time to clear out the old and welcome the new. Follow these 5 simple steps to declutter your home fast." />
<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 article...</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-brand font-semibold 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>
<!-- ARTICLE HERO -->
<section class="pt-32 pb-12 bg-muted">
<div class="container-main max-w-7xl mx-auto">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-3" data-aos="fade-up">
<span>·</span>
<span class="px-2 py-0.5 rounded-full bg-brand-accent text-brand font-medium">Home Organization</span>
<span>·</span>
<span>May 28, 2025</span>
</div>
<h1 class="text-3xl md:text-4xl font-extrabold mb-4" data-aos="fade-up">5 Easy Steps to Declutter Your Home Before Summer</h1>
<div class="flex items-center gap-3 text-sm text-muted-foreground" data-aos="fade-up">
<img src="assets/team-1.jpg" alt="Author" class="w-10 h-10 rounded-full object-cover" />
<div>
<p class="font-semibold text-foreground">Sarah Mitchell</p>
<p>Home Organization Expert</p>
</div>
</div>
</div>
</section>
<!-- FEATURED IMAGE -->
<div class="container-main max-w-4xl mx-auto -mt-8 mb-10 px-4" data-aos="fade-up">
<img src="https://img.magnific.com/free-photo/smiley-volunteers-preparing-food-donation_23-2148732655.jpg" alt="Decluttering a living room" class="w-full h-auto max-h-96 object-cover rounded-2xl shadow-xl" loading="lazy" />
</div>
<!-- ARTICLE CONTENT -->
<section class="pb-16">
<div class="container-main max-w-7xl mx-auto article-content rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all aos-in" data-aos="fade-up">
<p><strong>Summer is just around the corner, and with it comes the desire for a fresh, open, and clutter‑free home.</strong> Whether you're planning backyard barbecues or simply want to enjoy more space, decluttering is the first step. At CleanHaul, we've helped thousands of homeowners clear out the old – and we've distilled the process into five manageable steps.</p>
<h2>1. Start with a Plan and a Goal</h2>
<p>Without a clear goal, decluttering can quickly become overwhelming. Decide on a specific area: one room, the garage, or even just a closet. Set a timer for two hours and stick to it. Write down what "success" looks like – for example, "garage floor completely clear" or "all old clothes donated".</p>
<p>Having a plan keeps you focused and motivated. At CleanHaul, we always recommend tackling the most cluttered space first; the visual impact gives you an immediate win and the energy to continue.</p>
<h2>2. Sort Items into Four Categories</h2>
<p>The golden rule of decluttering: divide everything into <strong>Keep, Donate, Recycle, and Trash</strong>. Use large bins or labeled areas in the room. Be ruthless – if you haven't used an item in a year, it's likely time to let it go.</p>
<ul>
<li><strong>Keep:</strong> Essentials and items with real sentimental value.</li>
<li><strong>Donate:</strong> Gently used clothing, furniture, electronics – things someone else can use.</li>
<li><strong>Recycle:</strong> Paper, cardboard, glass, plastics – we'll handle these through our eco‑friendly disposal.</li>
<li><strong>Trash:</strong> Broken, worn‑out, or hazardous materials that need professional removal.</li>
</ul>
<p>If sorting feels like too much work, give us a call. We can remove everything in one go and sort it responsibly off‑site.</p>
<blockquote>
"I couldn't believe how much stuff I had accumulated. CleanHaul came the same day and cleared the garage in under two hours. Now I have room for my car again!" – Emily C., satisfied customer
</blockquote>
<h2>3. Enlist Help (Professional if Needed)</h2>
<p>Heavy furniture, old appliances, and piles of junk are not a one‑person job. Trying to move them alone risks injury and property damage. Our trained two‑person crews do all the heavy lifting – they'll come to your home, load everything onto the truck, and even sweep up afterward.</p>
<p>You'll be amazed at how quickly the space transforms when you have extra hands. And because we recycle and donate up to 60% of what we collect, you can feel good about where your items end up.</p>
<h2>4. Deep Clean the Cleared Space</h2>
<p>Once the clutter is gone, it's time for a deep clean. Scrub floors, wipe down walls, and open windows to let in fresh air. An empty room is the perfect canvas for your next project – whether it's a home gym, office, or just a peaceful retreat.</p>
<p>Don't forget about vertical space! Clearing out also lets you see what storage solutions you might need, like shelving or hooks.</p>
<h2>5. Schedule a Recurring Cleanout</h2>
<p>The hardest part of decluttering is maintaining it. We recommend scheduling a seasonal cleanout – once every spring and fall. Many of our customers book in advance so they never have to think about junk piling up again. It's a small investment for year‑round peace of mind.</p>
<div class="bg-brand-accent/40 rounded-xl p-6 my-8">
<p class="font-bold text-lg">Ready to get started?</p>
<p class="text-sm mb-4">Call us for a free, no‑obligation estimate or book your same‑day appointment online.</p>
<a href="contact.html" class="btn-brand">Get Free Quote</a>
</div>
<p>Decluttering doesn't have to be stressful. With a clear plan and the right support, you can reclaim your space and start the summer fresh. At CleanHaul, we're here to help every step of the way – from a single item pickup to a full house cleanout.</p>
</div>
</section>
<!-- RELATED POSTS -->
<section class="section-padding bg-muted">
<div class="container-main">
<h2 class="text-2xl md:text-3xl font-bold mb-8 text-center" data-aos="fade-up">Related Articles</h2>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
<article class="rounded-2xl bg-card border border-border overflow-hidden hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="100">
<div class="h-48 overflow-hidden">
<img src="https://img.magnific.com/free-photo/pleased-volunteer-choosing-items-clothing-donation_259150-59408.jpg" alt="Eco disposal" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="p-5">
<p class="text-xs text-muted-foreground mb-2">May 20, 2025</p>
<h3 class="font-bold text-sm group-hover:text-brand transition-colors">Where Does Your Junk Go? Inside Our Eco‑Friendly Disposal</h3>
<a href="#" class="inline-flex items-center gap-1 text-brand text-xs font-semibold mt-2">Read More <i data-lucide="arrow-right" class="w-3 h-3"></i></a>
</div>
</article>
<article class="rounded-2xl bg-card border border-border overflow-hidden hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="200">
<div class="h-48 overflow-hidden">
<img src="https://img.magnific.com/free-photo/smiley-volunteers-preparing-food-donation_23-2148732655.jpg" alt="Garage checklist" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="p-5">
<p class="text-xs text-muted-foreground mb-2">May 12, 2025</p>
<h3 class="font-bold text-sm group-hover:text-brand transition-colors">The Ultimate Garage Cleanout Checklist</h3>
<a href="#" class="inline-flex items-center gap-1 text-brand text-xs font-semibold mt-2">Read More <i data-lucide="arrow-right" class="w-3 h-3"></i></a>
</div>
</article>
<article class="rounded-2xl bg-card border border-border overflow-hidden hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="300">
<div class="h-48 overflow-hidden">
<img src="https://img.magnific.com/free-photo/person-their-job-position_23-2150163574.jpg" alt="Same day service" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="p-5">
<p class="text-xs text-muted-foreground mb-2">Apr 28, 2025</p>
<h3 class="font-bold text-sm group-hover:text-brand transition-colors">Need It Gone Fast? How Same‑Day Junk Removal Works</h3>
<a href="#" class="inline-flex items-center gap-1 text-brand text-xs font-semibold mt-2">Read More <i data-lucide="arrow-right" class="w-3 h-3"></i></a>
</div>
</article>
</div>
</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">Ready to Declutter?</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">&copy; <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>
+505
View File
@@ -0,0 +1,505 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog – CleanHaul Junk Removal</title>
<meta name="description" content="Read tips, guides, and company updates from CleanHaul – your trusted junk removal experts." />
<meta property="og:title" content="Blog – CleanHaul Junk Removal" />
<meta property="og:description" content="Read tips, guides, and company updates from CleanHaul – your trusted junk removal experts." />
<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 blog...</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-brand font-semibold 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 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 text-center" data-aos="fade-up">
<h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">CleanHaul <span class="text-brand">Blog</span></h1>
<p class="text-lg text-white/70 max-w-2xl mx-auto">Tips, guides, and insights for a clutter‑free life – from our team to you.</p>
</div>
</section>
<!-- BLOG POSTS GRID -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Post 1 -->
<article class="rounded-2xl bg-card border border-border overflow-hidden hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="100">
<div class="h-50 overflow-hidden">
<img src="https://img.magnific.com/free-photo/pleased-volunteer-choosing-items-clothing-donation_259150-59408.jpg" alt="Decluttering tips" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="p-6">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-3">
<span class="px-2 py-0.5 rounded-full bg-brand-accent text-brand font-medium">Home Organization</span>
<span>·</span>
<span>May 28, 2025</span>
</div>
<h2 class="text-lg font-bold mb-2 group-hover:text-brand transition-colors">5 Easy Steps to Declutter Your Home Before Summer</h2>
<p class="text-sm text-muted-foreground mb-4">Summer is coming – it's the perfect time to clear out the old and make space for new memories. Here's how to start.</p>
<a href="blog-detail.html" class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:gap-2 transition-all">Read More <i data-lucide="arrow-right" class="w-4 h-4"></i></a>
</div>
</article>
<!-- Post 2 -->
<article class="rounded-2xl bg-card border border-border overflow-hidden hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="200">
<div class="h-50 overflow-hidden">
<img src="https://img.magnific.com/free-photo/boy-girl-plastic-garbage-collection_1268-20093.jpg" alt="Eco-friendly disposal" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="p-6">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-3">
<span class="px-2 py-0.5 rounded-full bg-brand-accent text-brand font-medium">Eco Tips</span>
<span>·</span>
<span>May 20, 2025</span>
</div>
<h2 class="text-lg font-bold mb-2 group-hover:text-brand transition-colors">Where Does Your Junk Go? Inside Our Eco‑Friendly Disposal Process</h2>
<p class="text-sm text-muted-foreground mb-4">We recycle and donate up to 60% of what we collect. Learn how we make a difference for the planet.</p>
<a href="blog-detail.html" class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:gap-2 transition-all">Read More <i data-lucide="arrow-right" class="w-4 h-4"></i></a>
</div>
</article>
<!-- Post 3 -->
<article class="rounded-2xl bg-card border border-border overflow-hidden hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="300">
<div class="h-50 overflow-hidden">
<img src="https://img.magnific.com/free-photo/woman-measuring-wood-medium-shot_23-2148966864.jpg" alt="Garage cleanout" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="p-6">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-3">
<span class="px-2 py-0.5 rounded-full bg-brand-accent text-brand font-medium">Garage Makeover</span>
<span>·</span>
<span>May 12, 2025</span>
</div>
<h2 class="text-lg font-bold mb-2 group-hover:text-brand transition-colors">The Ultimate Garage Cleanout Checklist</h2>
<p class="text-sm text-muted-foreground mb-4">Transform your cluttered garage into a functional space with our step‑by‑step guide.</p>
<a href="blog-detail.html" class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:gap-2 transition-all">Read More <i data-lucide="arrow-right" class="w-4 h-4"></i></a>
</div>
</article>
<!-- Post 4 -->
<article class="rounded-2xl bg-card border border-border overflow-hidden hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="100">
<div class="h-50 overflow-hidden">
<img src="https://img.magnific.com/free-photo/smiley-volunteers-preparing-food-donation_23-2148732655.jpg" alt="Donation pickup" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="p-6">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-3">
<span class="px-2 py-0.5 rounded-full bg-brand-accent text-brand font-medium">Community</span>
<span>·</span>
<span>May 5, 2025</span>
</div>
<h2 class="text-lg font-bold mb-2 group-hover:text-brand transition-colors">How We Partner with Local Charities to Donate Reusable Items</h2>
<p class="text-sm text-muted-foreground mb-4">Your unwanted furniture could change a family's life. Find out how we give back.</p>
<a href="blog-detail.html" class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:gap-2 transition-all">Read More <i data-lucide="arrow-right" class="w-4 h-4"></i></a>
</div>
</article>
<!-- Post 5 -->
<article class="rounded-2xl bg-card border border-border overflow-hidden hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="200">
<div class="h-50 overflow-hidden">
<img src="https://img.magnific.com/free-photo/person-their-job-position_23-2150163574.jpg" alt="Same day junk removal" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="p-6">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-3">
<span class="px-2 py-0.5 rounded-full bg-brand-accent text-brand font-medium">Service Tips</span>
<span>·</span>
<span>Apr 28, 2025</span>
</div>
<h2 class="text-lg font-bold mb-2 group-hover:text-brand transition-colors">Need It Gone Fast? How Same‑Day Junk Removal Works</h2>
<p class="text-sm text-muted-foreground mb-4">From a phone call to a clean space in hours – discover our lightning‑fast service.</p>
<a href="blog-detail.html" class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:gap-2 transition-all">Read More <i data-lucide="arrow-right" class="w-4 h-4"></i></a>
</div>
</article>
<!-- Post 6 -->
<article class="rounded-2xl bg-card border border-border overflow-hidden hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="300">
<div class="h-50 overflow-hidden">
<img src="https://img.magnific.com/free-vector/office-cleaning-isometric-composition_1284-35883.jpg" alt="Office cleanout" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="p-6">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-3">
<span class="px-2 py-0.5 rounded-full bg-brand-accent text-brand font-medium">Business</span>
<span>·</span>
<span>Apr 20, 2025</span>
</div>
<h2 class="text-lg font-bold mb-2 group-hover:text-brand transition-colors">Office Relocation? Why Professional Cleanout Saves Time & Money</h2>
<p class="text-sm text-muted-foreground mb-4">Don't let old furniture slow down your move. We'll handle the disposal while you focus on business.</p>
<a href="blog-detail.html" class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:gap-2 transition-all">Read More <i data-lucide="arrow-right" class="w-4 h-4"></i></a>
</div>
</article>
</div>
<!-- PAGINATION -->
<div class="flex justify-center items-center gap-2 mt-12" data-aos="fade-up">
<button class="w-10 h-10 rounded-full bg-brand text-white flex items-center justify-center font-bold shadow">1</button>
<button class="w-10 h-10 rounded-full border border-border flex items-center justify-center hover:bg-muted">2</button>
<button class="w-10 h-10 rounded-full border border-border flex items-center justify-center hover:bg-muted">3</button>
<button class="w-10 h-10 rounded-full border border-border flex items-center justify-center hover:bg-muted"><i data-lucide="chevron-right" class="w-4 h-4"></i></button>
</div>
</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">Ready to Clear the Clutter?</h2>
<p class="text-lg text-white/80 mb-8 max-w-lg mx-auto">Let us do the heavy lifting. Get a free, no‑obligation quote today.</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="contact.html" class="btn-brand-dark btn-xl">Get Free Quote</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">&copy; <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();
// AOS Observer
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);
});
}
// Preloader
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
setTimeout(() => {
preloader.classList.add('hidden-preloader');
setTimeout(() => initAOS(), 150);
}, 1800);
});
// Navbar scroll
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'); }
}
});
// Mobile menu
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();
});
// Scroll top
document.getElementById('scrollTop')?.addEventListener('click', () => window.scrollTo({top:0, behavior:'smooth'}));
// Year
document.getElementById('year').textContent = new Date().getFullYear();
// Initial AOS (will re-init after loader)
initAOS();
setTimeout(() => lucide.createIcons(), 200);
</script>
</body>
</html>
+693
View File
@@ -0,0 +1,693 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us – CleanHaul Junk Removal</title>
<meta name="description"
content="Get in touch with CleanHaul for a free junk removal quote. Call us, email us, or fill out our online form." />
<meta property="og:title" content="Contact Us – CleanHaul Junk Removal" />
<meta property="og:description"
content="Get in touch with CleanHaul for a free junk removal quote. Call us, email us, or fill out our online form." />
<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',
'slide-up': 'slideUp 0.5s ease-out',
'slide-down': 'slideDown 0.4s ease-out',
'bounce-subtle': 'bounceSubtle 2s ease-in-out infinite',
'scale-in': 'scaleIn 0.4s ease-out',
'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' } },
slideUp: { '0%': { opacity: '0', transform: 'translateY(30px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
slideDown: { '0%': { opacity: '0', transform: 'translateY(-20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
scaleIn: { '0%': { opacity: '0', transform: 'scale(0.9)' }, '100%': { opacity: '1', transform: 'scale(1)' } },
bounceSubtle: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-8px)' } },
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 contact info...</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-brand font-semibold transition-colors border-b-2 border-brand">Contact</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="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 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 text-center" data-aos="fade-up">
<h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">Get In <span class="text-brand">Touch</span>
</h1>
<p class="text-lg text-white/70 max-w-2xl mx-auto">Ready to clear the clutter? Contact us today for a free,
no-obligation quote.</p>
</div>
</section>
<!-- CONTACT FORM + INFO -->
<section class="section-padding bg-background">
<div class="container-main">
<div
class="grid lg:grid-cols-5 gap-12 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all p-6">
<div class="lg:col-span-2 space-y-6">
<h2 class="text-2xl font-bold mb-6" data-aos="fade-up">Contact Information</h2>
<div class="flex items-start gap-4 p-4 rounded-xl bg-muted hover:shadow-md transition-shadow"
data-aos="fade-right" data-aos-delay="100">
<div
class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0">
<i data-lucide="phone" class="w-5 h-5"></i>
</div>
<div>
<p class="text-sm font-semibold">Phone</p><a href="tel:+18005551234"
class="text-sm text-muted-foreground hover:text-brand transition-colors">(800)
555-1234</a>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-muted hover:shadow-md transition-shadow"
data-aos="fade-right" data-aos-delay="200">
<div
class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0">
<i data-lucide="mail" class="w-5 h-5"></i>
</div>
<div>
<p class="text-sm font-semibold">Email</p><a href="mailto:info@cleanhaul.com"
class="text-sm text-muted-foreground hover:text-brand transition-colors">info@cleanhaul.com</a>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-muted hover:shadow-md transition-shadow"
data-aos="fade-right" data-aos-delay="300">
<div
class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0">
<i data-lucide="map-pin" class="w-5 h-5"></i>
</div>
<div>
<p class="text-sm font-semibold">Service Area</p>
<p class="text-sm text-muted-foreground">Greater Metro Area & Surroundings</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-muted hover:shadow-md transition-shadow"
data-aos="fade-right" data-aos-delay="400">
<div
class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0">
<i data-lucide="clock" class="w-5 h-5"></i>
</div>
<div>
<p class="text-sm font-semibold">Business Hours</p>
<p class="text-sm text-muted-foreground">Mon–Fri: 6AM – 8PM</p>
<p class="text-sm text-muted-foreground">Sat: 7AM – 6PM</p>
<p class="text-sm text-muted-foreground">Sun: 8AM – 4PM</p>
<p class="text-sm text-muted-foreground font-medium mt-1">24/7 Emergency Support</p>
</div>
</div>
<!-- Social Links -->
<div class="flex gap-3 mt-6" data-aos="fade-up" data-aos-delay="500">
<!-- 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>
<div class="lg:col-span-3" data-aos="fade-left">
<h2 class="text-2xl font-bold mb-6">Request a Free Quote</h2>
<form id="bookingForm" class="grid sm:grid-cols-2 gap-4">
<input type="text" placeholder="Full Name" required
class="rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
<input type="tel" placeholder="Phone Number" required
class="rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
<input type="email" placeholder="Email Address" required
class="rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
<select required
class="rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand text-muted-foreground">
<option value="" disabled selected>Service Type</option>
<option>Household Junk Removal</option>
<option>Office Cleanouts</option>
<option>Construction Debris</option>
<option>Yard Waste Removal</option>
</select>
<input type="text" placeholder="Pickup Address" required
class="sm:col-span-2 rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
<textarea placeholder="Tell us about your junk removal needs..." rows="4"
class="sm:col-span-2 rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand resize-none"></textarea>
<div class="sm:col-span-2"><button type="submit"
class="btn-brand btn-xl w-full sm:w-auto">Request Free Quote</button></div>
</form>
<div id="bookingSuccess" class="hidden text-center py-12">
<div
class="w-16 h-16 rounded-full bg-brand-accent flex items-center justify-center mx-auto mb-4">
<i data-lucide="send" class="w-7 h-7 text-brand"></i>
</div>
<h3 class="text-2xl font-bold mb-2">Thank You!</h3>
<p class="text-muted-foreground">We'll get back to you within 24 hours with a free quote.</p>
</div>
</div>
</div>
</div>
</section>
<!-- MAP & SERVICE AREA (NEW) -->
<section class="section-padding bg-muted">
<div class="container-main">
<div class="text-center mb-10" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Coverage</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">Our Service Area</h2>
<p class="mt-4 text-muted-foreground max-w-xl mx-auto">Proudly serving the entire Greater Metro region
and surrounding counties.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="map-placeholder" data-aos="zoom-in">
<div class="text-center">
<p>Interactive Map Placeholder</p>
<p class="text-xs">Greater Metro Area</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center gap-2 p-3 rounded-lg bg-white/60"><i data-lucide="map-pin"
class="w-4 h-4 text-brand"></i><span class="text-sm font-medium">Downtown Metro</span></div>
<div class="flex items-center gap-2 p-3 rounded-lg bg-white/60"><i data-lucide="map-pin"
class="w-4 h-4 text-brand"></i><span class="text-sm font-medium">North Suburbs</span></div>
<div class="flex items-center gap-2 p-3 rounded-lg bg-white/60"><i data-lucide="map-pin"
class="w-4 h-4 text-brand"></i><span class="text-sm font-medium">South County</span></div>
<div class="flex items-center gap-2 p-3 rounded-lg bg-white/60"><i data-lucide="map-pin"
class="w-4 h-4 text-brand"></i><span class="text-sm font-medium">East Valley</span></div>
<div class="flex items-center gap-2 p-3 rounded-lg bg-white/60"><i data-lucide="map-pin"
class="w-4 h-4 text-brand"></i><span class="text-sm font-medium">West Hills</span></div>
<div class="flex items-center gap-2 p-3 rounded-lg bg-white/60"><i data-lucide="map-pin"
class="w-4 h-4 text-brand"></i><span class="text-sm font-medium">Lakewood</span></div>
<div class="flex items-center gap-2 p-3 rounded-lg bg-white/60"><i data-lucide="map-pin"
class="w-4 h-4 text-brand"></i><span class="text-sm font-medium">Riverside</span></div>
<div class="flex items-center gap-2 p-3 rounded-lg bg-white/60"><i data-lucide="map-pin"
class="w-4 h-4 text-brand"></i><span class="text-sm font-medium">Surrounding Counties</span>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ QUICK LINKS (NEW) -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="text-center mb-10" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">FAQ</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">Frequently Asked Questions</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
<div class="p-5 rounded-xl bg-card border border-border" data-aos="fade-up" data-aos-delay="100">
<h3 class="font-semibold mb-2">How quickly can you come?</h3>
<p class="text-sm text-muted-foreground">We offer same‑day service for most jobs when you call
before 2 PM.</p>
</div>
<div class="p-5 rounded-xl bg-card border border-border" data-aos="fade-up" data-aos-delay="200">
<h3 class="font-semibold mb-2">How is pricing calculated?</h3>
<p class="text-sm text-muted-foreground">Based on volume and weight. We provide free, transparent
estimates before work begins.</p>
</div>
<div class="p-5 rounded-xl bg-card border border-border" data-aos="fade-up" data-aos-delay="300">
<h3 class="font-semibold mb-2">Do you recycle items?</h3>
<p class="text-sm text-muted-foreground">Yes! We recycle or donate up to 60% of what we collect,
keeping waste out of landfills.</p>
</div>
<div class="p-5 rounded-xl bg-card border border-border" data-aos="fade-up" data-aos-delay="100">
<h3 class="font-semibold mb-2">Are you licensed & insured?</h3>
<p class="text-sm text-muted-foreground">Absolutely. We are fully licensed and carry liability
insurance for your protection.</p>
</div>
<div class="p-5 rounded-xl bg-card border border-border" data-aos="fade-up" data-aos-delay="200">
<h3 class="font-semibold mb-2">What items can't you take?</h3>
<p class="text-sm text-muted-foreground">Hazardous materials require special handling. Contact us
for details on specific items.</p>
</div>
<div class="p-5 rounded-xl bg-card border border-border" data-aos="fade-up" data-aos-delay="300">
<h3 class="font-semibold mb-2">Do I need to be present?</h3>
<p class="text-sm text-muted-foreground">You or a representative should be on-site to confirm the
items for removal.</p>
</div>
</div>
</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">Prefer a Phone Call?</h2>
<p class="text-lg text-white/80 mb-8 max-w-lg mx-auto">Our friendly team is standing by to answer your
questions and provide a free estimate.</p>
<a href="tel:+18005551234" class="btn-brand-dark btn-xl"><i data-lucide="phone" class="w-5 h-5"></i>Call
(800) 555-1234</a>
</div>
</section>
<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">&copy; <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();
// ===== ENHANCED AOS OBSERVER WITH PRELOADER FIX =====
let aosObserver = null;
function initAOS() {
if (aosObserver) {
aosObserver.disconnect();
aosObserver = null;
}
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 => {
// Reset any inline styles that might block animation
el.style.opacity = '';
el.style.transform = '';
aosObserver.observe(el);
});
}
// ===== PRELOADER =====
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
setTimeout(() => {
preloader.classList.add('hidden-preloader');
setTimeout(() => {
initAOS();
}, 150);
}, 1800);
});
// ===== NAVBAR SCROLL =====
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'); }
}
});
// ===== MOBILE MENU =====
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();
});
// ===== SCROLL TOP =====
document.getElementById('scrollTop')?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
// ===== YEAR =====
document.getElementById('year').textContent = new Date().getFullYear();
// ===== BOOKING FORM =====
const form = document.getElementById('bookingForm');
form?.addEventListener('submit', (e) => {
e.preventDefault();
form.style.display = 'none';
const success = document.getElementById('bookingSuccess');
success.classList.remove('hidden');
// Add AOS class to success message for animation
success.setAttribute('data-aos', 'zoom-in');
success.style.opacity = '0';
success.style.transform = 'scale(0.85)';
setTimeout(() => {
success.classList.add('aos-in');
}, 50);
});
// ===== INITIAL AOS CALL =====
initAOS();
setTimeout(() => lucide.createIcons(), 200);
</script>
</body>
</html>
Binary file not shown.
+605
View File
@@ -0,0 +1,605 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CleanHaul – Junk Removal HTML Template Documentation</title>
<!-- Google Fonts (CleanHaul brand) -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
heading: ['Poppins', 'sans-serif'],
body: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
colors: {
brand: {
DEFAULT: '#1f9b5e',
light: '#2dd47f',
dark: '#166b40',
accent: '#e0b143',
'accent-foreground': '#2a2415',
glow: 'rgba(31,155,94,0.25)',
soft: 'rgba(31,155,94,0.08)',
},
dark: {
1: '#0f1729',
2: '#1e293b',
3: '#334155',
},
muted: {
DEFAULT: '#64748b',
light: '#94a3b8',
},
border: {
DEFAULT: 'rgba(31,155,94,0.2)',
light: 'rgba(203,213,225,0.12)',
},
},
}
}
}
</script>
<style>
:root {
--clr-primary: #1f9b5e;
--clr-primary-dark: #166b40;
--clr-accent: #e0b143;
--clr-dark: #0f1729;
--clr-dark2: #1e293b;
--clr-muted: #64748b;
--clr-muted-light: #94a3b8;
--ff-heading: 'Poppins', sans-serif;
--ff-body: 'Inter', sans-serif;
--ff-mono: 'JetBrains Mono', monospace;
--radius-lg: 12px;
--radius-md: 8px;
}
body {
margin: 0;
font-family: var(--ff-body);
background: var(--clr-dark);
color: #f8fafc;
line-height: 1.7;
display: flex;
min-height: 100vh;
}
.sidebar {
width: 280px;
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(20px);
border-right: 1px solid rgba(31,155,94,0.2);
padding: 32px 24px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
flex-shrink: 0;
}
.sidebar h2 {
font-family: var(--ff-heading);
font-size: 24px;
font-weight: 800;
letter-spacing: 0.5px;
color: #fff;
margin-top: 0;
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 8px;
}
.sidebar h2 span {
background: linear-gradient(135deg, #1f9b5e 0%, #e0b143 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sidebar a {
display: block;
color: var(--clr-muted-light);
text-decoration: none;
margin-bottom: 14px;
font-size: 14px;
font-family: var(--ff-heading);
font-weight: 600;
letter-spacing: 0.3px;
transition: all 0.3s;
padding: 6px 0;
border-bottom: 1px solid transparent;
}
.sidebar a:hover {
color: #2dd47f;
border-bottom-color: #2dd47f;
transform: translateX(4px);
}
.content {
flex: 1;
max-width: 960px;
padding: 48px 60px;
background: #1e293b;
}
h1, h2, h3, h4 {
font-family: var(--ff-heading);
color: #fff;
margin-top: 0;
}
h1 {
font-size: 44px;
font-weight: 900;
border-bottom: 3px solid var(--clr-primary);
display: inline-block;
padding-bottom: 8px;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
h2 {
font-size: 32px;
font-weight: 700;
margin-top: 56px;
margin-bottom: 20px;
color: #2dd47f;
}
h3 {
font-size: 22px;
font-weight: 700;
margin-top: 36px;
margin-bottom: 12px;
color: #f8fafc;
}
.section {
margin-bottom: 60px;
}
.code {
background: #0f1729;
border: 1px solid rgba(31,155,94,0.2);
color: #bbf7d0;
padding: 20px;
border-radius: var(--radius-lg);
overflow-x: auto;
font-family: var(--ff-mono);
font-size: 14px;
white-space: pre-wrap;
margin: 16px 0;
}
.note {
background: rgba(31,155,94,0.08);
border-left: 4px solid var(--clr-primary);
padding: 16px 20px;
border-radius: var(--radius-lg);
margin: 20px 0;
color: var(--clr-muted-light);
font-size: 15px;
}
.note strong {
color: #2dd47f;
}
.tag {
display: inline-block;
background: var(--clr-primary);
color: #fff;
padding: 2px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
margin-left: 8px;
font-family: var(--ff-heading);
letter-spacing: 0.5px;
text-transform: uppercase;
}
ul {
padding-left: 24px;
color: var(--clr-muted-light);
}
li {
margin-bottom: 8px;
}
a {
color: #2dd47f;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.divider-primary {
width: 60px;
height: 3px;
background: linear-gradient(90deg, #1f9b5e, #e0b143);
margin: 16px 0 24px;
}
@media (max-width: 768px) {
body { flex-direction: column; }
.sidebar {
width: 100%; height: auto; position: relative;
padding: 20px; border-right: none;
border-bottom: 1px solid rgba(31,155,94,0.2);
}
.content { padding: 24px 20px; }
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f1729; }
::-webkit-scrollbar-thumb { background: #1f9b5e; border-radius: 3px; }
</style>
</head>
<body>
<!-- Sidebar -->
<aside class="sidebar">
<h2>🧹 <span>CLEANHAUL</span> DOCS</h2>
<a href="#intro">Introduction</a>
<a href="#installation">Installation</a>
<a href="#structure">Folder Structure</a>
<a href="#tech">Tech Stack</a>
<a href="#pages">Pages & Templates</a>
<a href="#features">Key Features</a>
<a href="#customize">Customization</a>
<a href="#images">Images & Assets</a>
<a href="#forms">Forms & Inquiries</a>
<a href="#faq">FAQ & Legal</a>
<a href="#credits">Credits</a>
</aside>
<!-- Main Content -->
<main class="content">
<!-- Introduction -->
<section id="intro" class="section">
<h1>CleanHaul<br /><span style="color:#2dd47f;">Junk Removal & Hauling Service Template</span></h1>
<p style="color:#94a3b8; font-size:18px; margin-top:16px;">
Welcome to <strong>CleanHaul</strong> – a complete, modern HTML template designed specifically for junk removal, hauling, and cleanout businesses. With its clean green palette, smooth animations, and conversion‑focused layout, CleanHaul helps you turn website visitors into paying customers.
</p>
<p style="color:#94a3b8;">
The template includes <strong>10 professionally designed pages</strong> covering everything from an attention‑grabbing home page and service catalog to a blog, FAQ, and essential legal pages. Built with Tailwind CSS and vanilla JavaScript, it's lightweight, easy to customize, and ready to deploy.
</p>
<div class="divider-primary"></div>
<p><strong style="color:#fff;">Version:</strong> 1.0 &nbsp;|&nbsp; <strong style="color:#fff;">Last Updated:</strong> June 2026</p>
</section>
<!-- Installation -->
<section id="installation" class="section">
<h2>🚀 Installation</h2>
<p style="color:#94a3b8;">
CleanHaul is built with pure HTML, Tailwind CSS (via CDN), and vanilla JavaScript. No build tools, no npm installs, no complex configuration – just unzip and open in your browser.
</p>
<div class="code">1. Download and unzip the package.
2. Open the project folder.
3. Double‑click any .html file (e.g., index.html) to preview in your browser.
4. We recommend using VS Code with the Live Server extension for development.</div>
<div class="note">
<strong>Quick Start:</strong> Open <code>index.html</code> and start customizing. All external resources (Tailwind CSS, Lucide Icons, Google Fonts, AOS) are loaded from CDNs. Custom styles are embedded within each HTML file via <code>&lt;style&gt;</code> tags – no extra CSS files to manage.
</div>
</section>
<!-- Folder Structure -->
<section id="structure" class="section">
<h2>📁 Folder Structure</h2>
<pre class="code">/cleanhaul-theme
│
├── index.html ← Home page (preloader, hero, services, etc.)
├── about.html ← About us with team, milestones, impact stats
├── services.html ← Services catalog (6 service cards)
├── pricing.html ← Pricing plans (small, medium, full truck)
├── contact.html ← Contact form + location/FAQ
├── blog.html ← Blog listing with pagination
├── blog-detail.html ← Single article detail page
├── faq.html ← FAQ with accordion & search
├── terms.html ← Terms & Conditions
├── privacy.html ← Privacy Policy
│
├── assets/
│ ├── images/ ← Place your own images here
│ └── uploads/ ← (optional) uploaded content
│
└── documentation.html ← This file</pre>
<div class="note">
All external dependencies (Tailwind CSS, Lucide Icons, Google Fonts, AOS) are loaded from CDNs. You only need to upload the HTML files and any local assets like images.
</div>
</section>
<!-- Tech Stack -->
<section id="tech" class="section">
<h2>⚙️ Tech Stack</h2>
<ul style="color:#94a3b8;">
<li><strong style="color:#fff;">HTML5</strong> – semantic, accessible markup</li>
<li><strong style="color:#fff;">Tailwind CSS (via CDN)</strong> – utility‑first responsive framework with custom configuration</li>
<li><strong style="color:#fff;">AOS (Animate on Scroll)</strong> – smooth scroll‑triggered animations</li>
<li><strong style="color:#fff;">Lucide Icons</strong> – lightweight, customizable SVG icon library</li>
<li><strong style="color:#fff;">Google Fonts</strong> – Poppins (headings) + Inter (body)</li>
<li><strong style="color:#fff;">Vanilla JavaScript</strong> – preloader, mobile menu, sticky navbar, testimonial slider, booking form simulation, accordion FAQ, scroll‑to‑top, and more</li>
</ul>
<div class="code">&lt;!-- Tailwind CSS --&gt;
&lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
&lt;!-- Lucide Icons --&gt;
&lt;script src="https://unpkg.com/lucide@latest"&gt;&lt;/script&gt;
&lt;!-- Google Fonts --&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Inter:...&family=Poppins:..." rel="stylesheet" /&gt;</div>
<div class="note">
All custom styles are embedded inside each HTML file within a <code>&lt;style&gt;</code> tag. This makes the template self‑contained and easy to edit. You can extract these styles into a separate <code>style.css</code> if preferred.
</div>
</section>
<!-- Pages & Templates -->
<section id="pages" class="section">
<h2>📄 Pages & Templates</h2>
<h3>Home Page <span class="tag">index.html</span></h3>
<ul>
<li>Preloader with truck animation and loading bar</li>
<li>Sticky navbar (transparent → white on scroll) with mobile hamburger menu</li>
<li>Hero section with background image, gradient overlay, badge pills (Same‑Day Service, Eco‑Friendly, Licensed & Insured)</li>
<li>Services grid with icon cards (Household, Office, Construction, Yard Waste)</li>
<li>How It Works – 4‑step process with numbered circles</li>
<li>Why Choose Us – 4 feature cards (Same‑Day, Affordable, Eco, Professional)</li>
<li>Before & After photo gallery (3 images)</li>
<li>Testimonials slider (prev/next, auto‑rotate)</li>
<li>CTA banner</li>
<li>Free quote form (name, phone, email, service, address, message)</li>
<li>Comprehensive footer with services, quick links, contact info, social icons, newsletter, payment methods, legal links</li>
<li>Scroll‑to‑top button, mobile call button</li>
</ul>
<h3>About Us <span class="tag">about.html</span></h3>
<ul>
<li>Hero section with gradient background</li>
<li>Our Story – two‑column with image and text</li>
<li>Our Values – 4 cards (Licensed, 5‑Star, Eco, Expert Team)</li>
<li>Meet the Team – 4 profile cards with photos</li>
<li>Company Milestones – vertical timeline (2015‑2025)</li>
<li>Impact Statistics – counter cards (Jobs Completed, Tons Diverted, Satisfaction Rate, Fleet Size)</li>
<li>Certifications & Partners row</li>
<li>CTA banner</li>
</ul>
<h3>Services <span class="tag">services.html</span></h3>
<ul>
<li>Hero section</li>
<li>6 service cards in a responsive grid: Household Junk, Office Cleanouts, Construction Debris, Yard Waste, Appliance Removal, Furniture Removal – each with icon, description, bullet points, "Get Quote" button</li>
<li>"We Make Junk Removal Easy" – 4 benefit cards</li>
<li>"From Booking to Cleanup" – 4‑step process visualization</li>
<li>CTA banner</li>
</ul>
<h3>Pricing <span class="tag">pricing.html</span></h3>
<ul>
<li>Hero section</li>
<li>3 pricing cards: Small Load ($149), Medium Load ($299 – highlighted as Most Popular), Full Truck ($499). Each with feature list and Book Now button</li>
<li>"Always Included" – 4 guarantee cards (Free Estimate, Labor, Eco Disposal, Satisfaction)</li>
<li>Specialty Removal Pricing table (appliances, mattresses, electronics, yard waste)</li>
<li>Price Match Guarantee banner</li>
<li>Free quote form</li>
</ul>
<h3>Contact Us <span class="tag">contact.html</span></h3>
<ul>
<li>Hero section</li>
<li>Two‑column layout: contact information cards (Phone, Email, Service Area, Business Hours) with social icons, and a booking form</li>
<li>Service Area Map placeholder with location grid</li>
<li>FAQ quick links (6 common questions)</li>
<li>CTA banner with phone call focus</li>
</ul>
<h3>Blog Listing <span class="tag">blog.html</span></h3>
<ul>
<li>Hero section</li>
<li>Grid of 6 blog post cards with images, category badges, dates, titles, excerpts, "Read More" links</li>
<li>Pagination component</li>
<li>CTA banner</li>
</ul>
<h3>Blog Detail <span class="tag">blog-detail.html</span></h3>
<ul>
<li>Article header with category, date, author avatar & name</li>
<li>Featured image</li>
<li>Rich article content with headings, paragraphs, blockquote, bullet list, embedded CTA banner</li>
<li>Related articles grid (3 cards)</li>
<li>CTA banner</li>
</ul>
<h3>FAQ <span class="tag">faq.html</span></h3>
<ul>
<li>Hero section</li>
<li>Accordion categorized into: General Questions, Our Services, Pricing & Payment, Booking & Cancellation</li>
<li>Plus/minus icon toggle, smooth expand/collapse (only one open at a time)</li>
<li>Still have questions? CTA card</li>
<li>CTA banner</li>
</ul>
<h3>Terms & Conditions <span class="tag">terms.html</span></h3>
<ul>
<li>Last updated date</li>
<li>Sections: Services Provided, Pricing & Payment, Customer Responsibilities, Cancellation, Liability, Disposal Policy, Privacy, Intellectual Property, Changes to Terms, Contact Info</li>
</ul>
<h3>Privacy Policy <span class="tag">privacy.html</span></h3>
<ul>
<li>Last updated date</li>
<li>Sections: Information We Collect, How We Use Your Info, Security, Cookies, Third‑Party Services, Data Retention, Your Rights, Children's Privacy, Changes, Contact Info</li>
</ul>
</section>
<!-- Key Features -->
<section id="features" class="section">
<h2>✨ Key Features</h2>
<h3>Clean, Professional Design</h3>
<p style="color:#94a3b8;">A green‑and‑white color palette with subtle shadows and rounded corners gives a fresh, trustworthy feel. Poppins headings and Inter body text ensure readability and modern aesthetics.</p>
<h3>Fully Responsive</h3>
<p style="color:#94a3b8;">Every page looks great on mobile, tablet, and desktop. The navigation collapses into a hamburger menu, cards stack vertically, and forms are touch‑friendly.</p>
<h3>Interactive Components</h3>
<ul>
<li>Preloader with truck animation</li>
<li>Sticky glassmorphism‑style navbar (transparent → white on scroll)</li>
<li>Testimonial slider with manual controls</li>
<li>FAQ accordion with smooth open/close</li>
<li>Scroll‑triggered AOS animations (fade, zoom, slide)</li>
<li>Before & After image gallery with hover zoom</li>
<li>Quote forms with success message</li>
<li>Scroll‑to‑top button</li>
<li>Mobile floating call button</li>
</ul>
<h3>Conversion‑Optimized</h3>
<p style="color:#94a3b8;">Multiple CTAs ("Get Free Quote", "Call Now"), trust badges (Licensed, Insured, Eco‑Friendly), and social proof (testimonials, stats) are strategically placed to build confidence and drive inquiries.</p>
<h3>Easy to Customize</h3>
<p style="color:#94a3b8;">Change colors, fonts, images, and text by editing a few lines in the HTML. Tailwind utility classes make layout adjustments intuitive. The code is well‑commented and organized.</p>
<h3>SEO‑Ready</h3>
<p style="color:#94a3b8;">Semantic HTML5, descriptive meta tags, Open Graph tags, and fast CDN‑loaded resources help your site rank better.</p>
</section>
<!-- Customization -->
<section id="customize" class="section">
<h2>🎨 Customization</h2>
<h3>Change the Color Scheme</h3>
<p style="color:#94a3b8;">
The brand colors are defined in the <code>tailwind.config</code> JavaScript block inside each page. Modify these values to instantly rebrand the entire template.
</p>
<pre class="code">// Inside the &lt;script&gt; tailwind.config
colors: {
brand: {
DEFAULT: '#1f9b5e', // primary green
foreground: '#ffffff',
secondary: '#e0b143', // accent gold
accent: '#dff0e3',
dark: '#0f1729',
light: '#f7f8fa',
},
}</pre>
<h3>Typography</h3>
<p style="color:#94a3b8;">
The template uses Google Fonts: <strong>Poppins</strong> (headings) and <strong>Inter</strong> (body). To change them, update the Google Fonts link in the <code>&lt;head&gt;</code> and modify the <code>fontFamily</code> entries in the Tailwind config.
</p>
<h3>Editing Content</h3>
<p style="color:#94a3b8;">
All text, pricing, services, and testimonials are inside the HTML files. For the blog, the article data is stored in JavaScript arrays (<code>window.__testimonials</code> for testimonials, blog posts are hardcoded). To add or modify blog articles, duplicate the article card structure.
</p>
<div class="note">
<strong>Tailwind Classes:</strong> Since the template uses Tailwind CSS, you can adjust spacing, colors, and layout by simply changing utility classes directly in the HTML – no need to dig into CSS files.
</div>
</section>
<!-- Images & Assets -->
<section id="images" class="section">
<h2>🖼️ Images & Assets</h2>
<p style="color:#94a3b8;">
The template uses placeholder images (e.g., <code>assets/hero-truck.jpg</code>, <code>assets/team.jpg</code>, <code>assets/before-after-*.jpg</code>). Replace them with your own photography:
</p>
<ul>
<li>Add your images to the <code>assets/images/</code> folder.</li>
<li>Update the <code>src</code> attributes in the <code>&lt;img&gt;</code> tags.</li>
<li>For blog posts, update the image paths in the respective HTML files.</li>
<li>Replace team member photos, before/after shots, and the hero truck image with your own.</li>
</ul>
<div class="note">
<strong>Image License:</strong> The placeholder images used in the demo are from Unsplash and are free to use. However, for a commercial project, we recommend replacing them with your own licensed photography to avoid any attribution issues.
</div>
</section>
<!-- Forms -->
<section id="forms" class="section">
<h2>📋 Forms & Inquiries</h2>
<p style="color:#94a3b8;">The template includes several demo forms:</p>
<ul>
<li><strong style="color:#fff;">Free Quote Form</strong> – on Home, Pricing, and Contact pages</li>
<li><strong style="color:#fff;">Contact Form</strong> – on Contact page</li>
<li><strong style="color:#fff;">Newsletter Subscription</strong> – in the footer</li>
</ul>
<p style="color:#94a3b8;">Currently, forms show a demo success message. To connect them to a real service, modify the <code>addEventListener('submit', ...)</code> handler to send data to:</p>
<ul>
<li>PHP Mail</li>
<li>Formspree</li>
<li>Netlify Forms</li>
<li>Zapier / Make webhooks</li>
<li>Your own API endpoint</li>
</ul>
<div class="code">// Example: modify the free quote form
document.getElementById('bookingForm').addEventListener('submit', function(e) {
e.preventDefault();
// add your integration here
// fetch('/your-endpoint', { method: 'POST', body: new FormData(this) });
document.getElementById('bookingSuccess').classList.remove('hidden');
this.style.display = 'none';
});</div>
</section>
<!-- FAQ & Legal -->
<section id="faq" class="section">
<h2>❓ FAQ & Legal Pages</h2>
<p style="color:#94a3b8;">
The <strong>FAQ page</strong> (<code>faq.html</code>) features a categorized accordion. Questions are grouped into General, Services, Pricing, and Booking categories. Clicking a question expands the answer with a smooth animation and rotates the plus icon to a minus.
</p>
<p style="color:#94a3b8;">
The <strong>Terms & Conditions</strong> and <strong>Privacy Policy</strong> pages contain comprehensive sample legal text tailored for a junk removal business. You must replace this placeholder content with your own company's actual policies before publishing.
</p>
<div class="note">
<strong>Important:</strong> The legal information provided is generic sample text and is not legal advice. Consult with a qualified attorney to create your final policies that comply with your local regulations and business operations.
</div>
</section>
<!-- Credits -->
<section id="credits" class="section">
<h2>🙏 Credits</h2>
<ul>
<li><strong style="color:#fff;">Tailwind CSS</strong> – utility‑first CSS framework</li>
<li><strong style="color:#fff;">Lucide Icons</strong> – open‑source SVG icons</li>
<li><strong style="color:#fff;">Google Fonts</strong> – Poppins, Inter</li>
<li><strong style="color:#fff;">Unsplash</strong> – demo placeholder images (replace with your own licensed photography)</li>
<li><strong style="color:#fff;">AOS</strong> – Animate On Scroll (included via CDN)</li>
</ul>
</section>
<p style="margin-top:60px; color:#64748b; font-size:14px;">
CleanHaul – Junk Removal & Hauling Service HTML Template. Built for speed, designed for trust.
</p>
</main>
</body>
</html>
+552
View File
@@ -0,0 +1,552 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FAQ – CleanHaul Junk Removal</title>
<meta name="description" content="Find answers to common questions about our junk removal services, pricing, booking, and eco-friendly disposal." />
<meta property="og:title" content="FAQ – CleanHaul Junk Removal" />
<meta property="og:description" content="Find answers to common questions about our junk removal services, pricing, booking, and eco-friendly disposal." />
<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 FAQ...</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 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 text-center" data-aos="fade-up">
<h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">Frequently Asked <span class="text-brand">Questions</span></h1>
<p class="text-lg text-white/70 max-w-2xl mx-auto">Can't find what you're looking for? Give us a call – we're happy to help.</p>
</div>
</section>
<!-- FAQ CONTENT -->
<section class="section-padding bg-background">
<div class="container-main max-w-7xl mx-auto" data-aos="fade-up">
<!-- Category: General -->
<h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
<i data-lucide="help-circle" class="w-6 h-6 text-brand"></i> General Questions
</h2>
<div class="space-y-4 mb-12">
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="100">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">What areas do you serve?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
We proudly serve the entire Greater Metro Area and surrounding counties, including Downtown Metro, North Suburbs, South County, East Valley, West Hills, Lakewood, Riverside, and nearby communities. Don't see your city? Call us – we may still cover your location.
</div>
</div>
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="150">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">Are you licensed and insured?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
Absolutely. CleanHaul is fully licensed and carries comprehensive liability insurance. Our crew members are also background‑checked and professionally trained. We treat every property with the utmost respect.
</div>
</div>
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="200">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">What items can't you take?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
For safety and regulatory reasons, we cannot accept hazardous materials such as paint, chemicals, oil, gasoline, asbestos, or biological waste. If you're unsure, just ask – we'll guide you to the right disposal solution.
</div>
</div>
</div>
<!-- Category: Services -->
<h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
<i data-lucide="truck" class="w-6 h-6 text-brand"></i> Our Services
</h2>
<div class="space-y-4 mb-12">
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="100">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">Do you offer same-day service?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
Yes! If you call before 2 PM, we can often have a truck at your door the same day. Availability depends on our schedule, but we always do our best to accommodate urgent requests.
</div>
</div>
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="150">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">What happens to my junk after pickup?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
We sort everything carefully. Usable items are donated to local charities, recyclable materials go to processing centers, and only true waste ends up in the landfill. Our goal is to divert up to 60% of collected items from landfills.
</div>
</div>
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="200">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">Can you pick up from multiple rooms or floors?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
Absolutely. Our trained teams can remove items from any room, upstairs or downstairs, as long as access is safe. There's no extra charge for stairs or multiple rooms – we include it in the upfront price.
</div>
</div>
</div>
<!-- Category: Pricing -->
<h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
<i data-lucide="dollar-sign" class="w-6 h-6 text-brand"></i> Pricing & Payment
</h2>
<div class="space-y-4 mb-12">
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="100">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">How do you calculate pricing?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
Prices are based on the volume and weight of the items we remove. We provide a free, no‑obligation on‑site estimate before any work begins. You'll know the exact cost upfront – no hidden fees.
</div>
</div>
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="150">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">What payment methods do you accept?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
We accept cash, all major credit/debit cards (Visa, Mastercard, Amex), Apple Pay, Google Pay, and mobile payment apps. Payment is due at the time of service unless other arrangements have been made.
</div>
</div>
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="200">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">Do you match competitor prices?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
Yes! If you have a written estimate from a licensed junk removal company, we'll beat it by 10%. We're committed to fair, transparent pricing for everyone.
</div>
</div>
</div>
<!-- Category: Booking & Cancellation -->
<h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
<i data-lucide="calendar-check" class="w-6 h-6 text-brand"></i> Booking & Cancellation
</h2>
<div class="space-y-4 mb-12">
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="100">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">Do I need to be home during the pickup?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
Yes, you (or a representative) should be present to confirm the items for removal and provide access. This ensures everything goes smoothly and according to your wishes.
</div>
</div>
<div class="faq-item bg-card border border-border rounded-xl p-5 cursor-pointer hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="150">
<div class="flex justify-between items-center">
<h3 class="font-semibold text-foreground">What is your cancellation policy?</h3>
<i data-lucide="plus" class="w-5 h-5 text-brand flex-shrink-0 faq-icon"></i>
</div>
<div class="faq-answer text-sm text-muted-foreground mt-3">
We ask for at least 24 hours' notice to cancel or reschedule without charge. Late cancellations may incur a small $50 fee, but we always work with our customers in case of genuine emergencies.
</div>
</div>
</div>
<!-- Still have questions? -->
<div class="text-center mt-12 p-8 bg-brand-accent/30 rounded-2xl" data-aos="fade-up">
<h3 class="text-xl font-bold mb-2">Still have questions?</h3>
<p class="text-muted-foreground mb-4">Our friendly team is here to help. Call or send us a message – we'll get back to you quickly.</p>
<div class="flex flex-wrap justify-center gap-3">
<a href="tel:+18005551234" class="btn-brand"><i data-lucide="phone" class="w-4 h-4"></i> Call (800) 555-1234</a>
<a href="contact.html" class="btn-brand-outline">Contact Us</a>
</div>
</div>
</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">Don't let clutter take over. Get fast, reliable junk removal at prices you'll love.</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">&copy; <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();
// AOS Observer
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);
});
}
// Preloader
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
setTimeout(() => {
preloader.classList.add('hidden-preloader');
setTimeout(() => initAOS(), 150);
}, 1800);
});
// Navbar scroll
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'); }
}
});
// Mobile menu
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();
});
// Scroll top
document.getElementById('scrollTop')?.addEventListener('click', () => window.scrollTo({top:0, behavior:'smooth'}));
// Year
document.getElementById('year').textContent = new Date().getFullYear();
// FAQ Accordion
document.querySelectorAll('.faq-item').forEach(item => {
item.addEventListener('click', () => {
const isActive = item.classList.contains('active');
// Close all open items
document.querySelectorAll('.faq-item.active').forEach(activeItem => {
if (activeItem !== item) {
activeItem.classList.remove('active');
const icon = activeItem.querySelector('.faq-icon');
if (icon) icon.setAttribute('data-lucide', 'plus');
}
});
// Toggle current
item.classList.toggle('active');
const icon = item.querySelector('.faq-icon');
if (icon) {
icon.setAttribute('data-lucide', item.classList.contains('active') ? 'x' : 'plus');
}
lucide.createIcons();
});
});
initAOS();
setTimeout(() => lucide.createIcons(), 200);
</script>
</body>
</html>
+872
View File
@@ -0,0 +1,872 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CleanHaul – Fast & Affordable Junk Removal Services</title>
<meta name="description"
content="Professional junk removal services. Same-day pickup, eco-friendly disposal, transparent pricing. Get a free quote today." />
<meta property="og:title" content="CleanHaul – Fast & Affordable Junk Removal Services" />
<meta property="og:description"
content="Professional junk removal services. Same-day pickup, eco-friendly disposal, transparent pricing. Get a free quote today." />
<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',
'slide-up': 'slideUp 0.5s ease-out',
'slide-down': 'slideDown 0.4s ease-out',
'bounce-subtle': 'bounceSubtle 2s ease-in-out infinite',
'scale-in': 'scaleIn 0.4s ease-out',
'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' },
},
slideUp: {
'0%': { opacity: '0', transform: 'translateY(30px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
slideDown: {
'0%': { opacity: '0', transform: 'translateY(-20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
scaleIn: {
'0%': { opacity: '0', transform: 'scale(0.9)' },
'100%': { opacity: '1', transform: 'scale(1)' },
},
bounceSubtle: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-8px)' },
},
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="loader-inner">
<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 amazing service...</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-brand font-semibold transition-colors border-b-2 border-brand">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="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="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 ============ -->
<section class="relative min-h-[90vh] flex items-center bg-brand-dark overflow-hidden">
<div class="absolute inset-0">
<img src="assets/hero-truck.jpg" alt="CleanHaul truck and team" class="w-full h-full object-cover opacity-25" />
<div class="absolute inset-0 bg-gradient-to-r from-brand-dark via-brand-dark/90 to-brand-dark/60"></div>
</div>
<div class="container-main py-32 w-full">
<div class="max-w-2xl" data-aos="fade-up">
<div class="flex flex-wrap gap-3 mb-6">
<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="clock" class="w-3.5 h-3.5"></i>Same-Day Service</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-Friendly Disposal</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="shield" class="w-3.5 h-3.5"></i>Licensed & Insured</span>
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-tight">Fast & Affordable <span
class="text-brand">Junk Removal</span> Services</h1>
<p class="mt-6 text-lg text-white/70 max-w-lg leading-relaxed">We remove unwanted junk quickly, safely, and
responsibly. Same-day service available — call now or get a free quote online.</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="contact.html" class="btn-brand btn-xl">Get Free Quote</a>
<a href="tel:+18005551234" class="btn-brand-outline btn-xl"
style="border-color:rgba(255,255,255,.3); color:#fff;"><i data-lucide="phone" class="w-5 h-5"></i>Call
Now</a>
</div>
</div>
</div>
</section>
<!-- ============ SERVICES SECTION ============ -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="text-center mb-14" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">What We Do</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">Our Services</h2>
<p class="mt-4 text-muted-foreground max-w-xl mx-auto">From household clutter to construction debris, we handle
all types of junk removal with care and efficiency.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div
class="group p-6 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
data-aos="fade-up" data-aos-delay="100">
<div
class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="home" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h3 class="text-lg font-bold mb-2">Household Junk Removal</h3>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Furniture, appliances, clutter removal from your
home. We handle everything from single items to full house cleanouts.</p>
<a href="services.html"
class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:gap-2 transition-all">Learn
More <i data-lucide="arrow-right" class="w-4 h-4"></i></a>
</div>
<div
class="group p-6 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
data-aos="fade-up" data-aos-delay="200">
<div
class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="building" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h3 class="text-lg font-bold mb-2">Office Cleanouts</h3>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Commercial junk and office waste removal. Desks,
chairs, electronics, and more cleared efficiently.</p>
<a href="services.html"
class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:gap-2 transition-all">Learn
More <i data-lucide="arrow-right" class="w-4 h-4"></i></a>
</div>
<div
class="group p-6 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
data-aos="fade-up" data-aos-delay="300">
<div
class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="hammer" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h3 class="text-lg font-bold mb-2">Construction Debris</h3>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Cleanup after renovation projects. We remove
drywall, lumber, concrete, and construction waste.</p>
<a href="services.html"
class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:gap-2 transition-all">Learn
More <i data-lucide="arrow-right" class="w-4 h-4"></i></a>
</div>
<div
class="group p-6 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
data-aos="fade-up" data-aos-delay="400">
<div
class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="leaf" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h3 class="text-lg font-bold mb-2">Yard Waste Removal</h3>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Branches, grass, outdoor waste removal. Keep
your yard clean and beautiful year-round.</p>
<a href="services.html"
class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:gap-2 transition-all">Learn
More <i data-lucide="arrow-right" class="w-4 h-4"></i></a>
</div>
</div>
</div>
</section>
<!-- ============ HOW IT WORKS ============ -->
<section class="section-padding bg-muted">
<div class="container-main">
<div class="text-center mb-14" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">How It Works</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">Simple 4-Step Process</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="text-center relative rounded-2xl bg-card border border-border p-8" data-aos="zoom-in"
data-aos-delay="100">
<div
class="w-16 h-16 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-5 shadow-lg">
<i data-lucide="calendar-check" class="w-7 h-7"></i>
</div>
<span
class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-2 w-7 h-7 rounded-full bg-brand-secondary text-brand-secondary-foreground text-xs font-bold flex items-center justify-center">1</span>
<h3 class="text-lg font-bold mb-2">Book Appointment</h3>
<p class="text-sm text-muted-foreground">Schedule online or call us for a convenient time slot.</p>
</div>
<div class="text-center relative rounded-2xl bg-card border border-border p-8" data-aos="zoom-in"
data-aos-delay="200">
<div
class="w-16 h-16 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-5 shadow-lg">
<i data-lucide="truck" class="w-7 h-7"></i>
</div>
<span
class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-2 w-7 h-7 rounded-full bg-brand-secondary text-brand-secondary-foreground text-xs font-bold flex items-center justify-center">2</span>
<h3 class="text-lg font-bold mb-2">We Arrive</h3>
<p class="text-sm text-muted-foreground">Our professional team arrives on time, ready to work.</p>
</div>
<div class="text-center relative rounded-2xl bg-card border border-border p-8" data-aos="zoom-in"
data-aos-delay="300">
<div
class="w-16 h-16 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-5 shadow-lg">
<i data-lucide="trash-2" class="w-7 h-7"></i>
</div>
<span
class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-2 w-7 h-7 rounded-full bg-brand-secondary text-brand-secondary-foreground text-xs font-bold flex items-center justify-center">3</span>
<h3 class="text-lg font-bold mb-2">Junk Removal</h3>
<p class="text-sm text-muted-foreground">We load and remove all your unwanted items quickly.</p>
</div>
<div class="text-center relative rounded-2xl bg-card border border-border p-8" data-aos="zoom-in"
data-aos-delay="400">
<div
class="w-16 h-16 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-5 shadow-lg">
<i data-lucide="recycle" class="w-7 h-7"></i>
</div>
<span
class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-2 w-7 h-7 rounded-full bg-brand-secondary text-brand-secondary-foreground text-xs font-bold flex items-center justify-center">4</span>
<h3 class="text-lg font-bold mb-2">Eco Disposal</h3>
<p class="text-sm text-muted-foreground">Items are recycled, donated, or disposed responsibly.</p>
</div>
</div>
</div>
</section>
<!-- ============ WHY CHOOSE US ============ -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="text-center mb-14" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Why Us</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">Why Choose CleanHaul?</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 rounded-2xl bg-brand-accent/50 text-center hover:shadow-lg transition-shadow duration-300"
data-aos="flip-left" data-aos-delay="100">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4"><i
data-lucide="clock" class="w-7 h-7"></i></div>
<h3 class="text-lg font-bold mb-2">Same-Day Service</h3>
<p class="text-sm text-muted-foreground">Need it gone today? We offer same-day pickup for most jobs.</p>
</div>
<div class="p-6 rounded-2xl bg-brand-accent/50 text-center hover:shadow-lg transition-shadow duration-300"
data-aos="flip-left" data-aos-delay="200">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4"><i
data-lucide="dollar-sign" class="w-7 h-7"></i></div>
<h3 class="text-lg font-bold mb-2">Affordable Pricing</h3>
<p class="text-sm text-muted-foreground">Transparent pricing with no hidden fees. Free estimates always.</p>
</div>
<div class="p-6 rounded-2xl bg-brand-accent/50 text-center hover:shadow-lg transition-shadow duration-300"
data-aos="flip-right" data-aos-delay="300">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4"><i
data-lucide="leaf" class="w-7 h-7"></i></div>
<h3 class="text-lg font-bold mb-2">Eco-Friendly Disposal</h3>
<p class="text-sm text-muted-foreground">We recycle and donate whenever possible to minimize landfill waste.
</p>
</div>
<div class="p-6 rounded-2xl bg-brand-accent/50 text-center hover:shadow-lg transition-shadow duration-300"
data-aos="flip-right" data-aos-delay="400">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4"><i
data-lucide="users" class="w-7 h-7"></i></div>
<h3 class="text-lg font-bold mb-2">Professional Team</h3>
<p class="text-sm text-muted-foreground">Licensed, insured, and trained professionals handle every job.</p>
</div>
</div>
</div>
</section>
<!-- ============ BEFORE & AFTER ============ -->
<section class="section-padding bg-muted">
<div class="container-main">
<div class="text-center mb-14" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Results</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">Before & After</h2>
<p class="mt-4 text-muted-foreground max-w-xl mx-auto">See the dramatic transformations we deliver for our
customers.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-shadow" data-aos="fade-right"
data-aos-delay="100">
<img src="assets/before-after-1.jpg" alt="Garage cleanout"
class="w-full h-84 object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="group rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-shadow" data-aos="fade-up"
data-aos-delay="200">
<img src="assets/before-after-2.jpg" alt="Yard cleanup"
class="w-full h-84 object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
<div class="group rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-shadow" data-aos="fade-left"
data-aos-delay="300">
<img src="assets/before-after-3.jpg" alt="Office cleanout"
class="w-full h-84 object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
</div>
</div>
</div>
</section>
<!-- ============ TESTIMONIALS ============ -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="text-center mb-14" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Testimonials</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">What Our Customers Say</h2>
</div>
<div class="max-w-2xl mx-auto text-center" data-aos="zoom-in">
<i data-lucide="quote" class="w-10 h-10 text-brand/30 mx-auto mb-4"></i>
<p id="tText" class="text-lg leading-relaxed mb-6"></p>
<div id="tStars" class="flex justify-center gap-1 mb-3"></div>
<p id="tName" class="font-bold"></p>
<p id="tLocation" class="text-sm text-muted-foreground"></p>
<div class="flex justify-center gap-4 mt-8">
<button id="tPrev"
class="w-10 h-10 rounded-full border border-border flex items-center justify-center hover:bg-muted transition-colors"
aria-label="Previous"><i data-lucide="chevron-left" class="w-5 h-5"></i></button>
<button id="tNext"
class="w-10 h-10 rounded-full border border-border flex items-center justify-center hover:bg-muted transition-colors"
aria-label="Next"><i data-lucide="chevron-right" class="w-5 h-5"></i></button>
</div>
</div>
</div>
</section>
<script>
window.__testimonials = [
{
name: 'Sarah Mitchell', location: 'Homeowner', rating: 5,
text: 'CleanHaul was incredible! They showed up on time, cleared out our entire garage in under two hours, and the price was very fair. Highly recommend!'
},
{
name: 'James Rodriguez', location: 'Business Owner', rating: 5,
text: 'We used CleanHaul for our office relocation. They handled all the old furniture and equipment disposal professionally. Will use again for sure.'
},
{
name: 'Emily Chen', location: 'Homeowner', rating: 5,
text: 'Same-day service that actually delivered! Called in the morning, they were here by afternoon. Friendly crew, great work. Five stars all around.'
},
];
</script>
<!-- ============ CTA SECTION ============ -->
<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">Don't let clutter take over. Get fast, reliable junk
removal at prices you'll love.</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>
<!-- ============ QUOTE FORM ============ -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="max-w-3xl mx-auto">
<div class="text-center mb-10" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Get Started</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">Request a Free Quote</h2>
<p class="mt-4 text-muted-foreground">Fill out the form below and we'll get back to you within 24 hours.</p>
</div>
<form id="bookingForm" class="grid sm:grid-cols-2 gap-4" data-aos="fade-up" data-aos-delay="200">
<input type="text" placeholder="Full Name" required
class="rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
<input type="tel" placeholder="Phone Number" required
class="rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
<input type="email" placeholder="Email Address" required
class="rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
<select required
class="rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand text-muted-foreground">
<option value="" disabled selected>Service Type</option>
<option>Household Junk Removal</option>
<option>Office Cleanouts</option>
<option>Construction Debris</option>
<option>Yard Waste Removal</option>
</select>
<input type="text" placeholder="Pickup Address" required
class="sm:col-span-2 rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
<textarea placeholder="Tell us about your junk removal needs..." rows="4"
class="sm:col-span-2 rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand resize-none"></textarea>
<div class="sm:col-span-2"><button type="submit" class="btn-brand btn-xl w-full sm:w-auto">Request Free
Quote</button></div>
</form>
<div id="bookingSuccess" class="hidden text-center py-12" data-aos="scale-in">
<div class="w-16 h-16 rounded-full bg-brand-accent flex items-center justify-center mx-auto mb-4"><i
data-lucide="send" class="w-7 h-7 text-brand"></i></div>
<h3 class="text-2xl font-bold mb-2">Thank You!</h3>
<p class="text-muted-foreground">We'll get back to you within 24 hours with a free quote.</p>
</div>
</div>
</div>
</section>
<!-- ============ ENHANCED 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">&copy; <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>
<!-- ============ FLOATING BUTTONS ============ -->
<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>
<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>
<!-- ============ SCRIPTS ============ -->
<script>
lucide.createIcons();
// ===== GLOBAL AOS OBSERVER =====
let aosObserver = null;
function initAOS() {
// Disconnect any existing observer to avoid duplicate triggers
if (aosObserver) {
aosObserver.disconnect();
aosObserver = null;
}
aosObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('aos-in');
// Optional: stop observing after animation
// aosObserver.unobserve(entry.target);
}
});
}, {
threshold: 0.15,
rootMargin: '0px 0px -40px 0px'
});
// Observe all elements with [data-aos]
document.querySelectorAll('[data-aos]').forEach(el => {
// Remove any previously added inline styles that might block animation
el.style.opacity = '';
el.style.transform = '';
aosObserver.observe(el);
});
}
// ===== PRELOADER =====
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
setTimeout(() => {
preloader.classList.add('hidden-preloader');
// Re‑initialize AOS after the loader is fully hidden
setTimeout(() => {
initAOS();
}, 150); // small delay to ensure smooth transition
}, 1800);
});
// ===== NAVBAR SCROLL =====
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');
}
}
});
// ===== MOBILE MENU =====
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();
});
// ===== SCROLL TOP =====
document.getElementById('scrollTop')?.addEventListener('click', () =>
window.scrollTo({ top: 0, behavior: 'smooth' })
);
// ===== YEAR =====
const y = document.getElementById('year');
if (y) y.textContent = new Date().getFullYear();
// ===== BOOKING FORM =====
const form = document.getElementById('bookingForm');
form?.addEventListener('submit', (e) => {
e.preventDefault();
form.style.display = 'none';
const success = document.getElementById('bookingSuccess');
success.classList.remove('hidden');
success.setAttribute('data-aos', 'scale-in');
success.style.opacity = '0';
success.style.transform = 'scale(0.85)';
setTimeout(() => {
success.classList.add('aos-in');
}, 50);
});
// ===== TESTIMONIAL SLIDER =====
const testimonials = window.__testimonials || [];
let tIdx = 0;
function renderTestimonial() {
const t = testimonials[tIdx];
if (!t) return;
const tTextEl = document.getElementById('tText');
const tNameEl = document.getElementById('tName');
const tLocationEl = document.getElementById('tLocation');
const starsEl = document.getElementById('tStars');
tTextEl.style.opacity = '0';
tTextEl.style.transform = 'translateY(10px)';
tNameEl.style.opacity = '0';
tLocationEl.style.opacity = '0';
starsEl.style.opacity = '0';
setTimeout(() => {
tTextEl.textContent = '"' + t.text + '"';
tNameEl.textContent = t.name;
tLocationEl.textContent = t.location;
starsEl.innerHTML = '';
for (let i = 0; i < t.rating; i++)
starsEl.innerHTML += '<i data-lucide="star" class="w-5 h-5 text-brand-secondary fill-current"></i>';
lucide.createIcons();
tTextEl.style.transition = 'all 0.4s ease';
tTextEl.style.opacity = '1';
tTextEl.style.transform = 'translateY(0)';
tNameEl.style.transition = 'all 0.4s ease 0.1s';
tNameEl.style.opacity = '1';
tLocationEl.style.transition = 'all 0.4s ease 0.15s';
tLocationEl.style.opacity = '1';
starsEl.style.transition = 'all 0.4s ease 0.05s';
starsEl.style.opacity = '1';
}, 300);
}
document.getElementById('tPrev')?.addEventListener('click', () => {
tIdx = (tIdx - 1 + testimonials.length) % testimonials.length;
renderTestimonial();
});
document.getElementById('tNext')?.addEventListener('click', () => {
tIdx = (tIdx + 1) % testimonials.length;
renderTestimonial();
});
if (testimonials.length) renderTestimonial();
// ===== NEWSLETTER SUBSCRIPTION =====
const newsletterBtn = document.querySelector('.footer-newsletter-input + .btn-brand');
const newsletterInput = document.querySelector('.footer-newsletter-input');
newsletterBtn?.addEventListener('click', () => {
const email = newsletterInput.value.trim();
if (email && email.includes('@') && email.includes('.')) {
newsletterInput.value = '';
newsletterInput.placeholder = 'Subscribed! ✓';
setTimeout(() => { newsletterInput.placeholder = 'Enter your email'; }, 3000);
} else if (!email) {
newsletterInput.placeholder = 'Please enter your email';
newsletterInput.style.borderColor = '#ef4444';
setTimeout(() => {
newsletterInput.style.borderColor = '';
newsletterInput.placeholder = 'Enter your email';
}, 2000);
} else {
newsletterInput.placeholder = 'Invalid email address';
newsletterInput.style.borderColor = '#ef4444';
setTimeout(() => {
newsletterInput.style.borderColor = '';
newsletterInput.placeholder = 'Enter your email';
}, 2000);
}
});
// ===== INITIAL AOS CALL (will be re‑called after loader) =====
// We still call it once so elements that appear before the loader hides are ready.
initAOS();
// Re‑create icons after all dynamic changes
setTimeout(() => lucide.createIcons(), 200);
</script>
</body>
</html>
+566
View File
@@ -0,0 +1,566 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our Services – CleanHaul Junk Removal</title>
<meta name="description" content="Household junk, office cleanouts, construction debris, yard waste – we handle it all. Fast, eco-friendly disposal." />
<meta property="og:title" content="Our Services – CleanHaul Junk Removal" />
<meta property="og:description" content="Household junk, office cleanouts, construction debris, yard waste – we handle it all. Fast, eco-friendly disposal." />
<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',
'slide-up': 'slideUp 0.5s ease-out',
'slide-down': 'slideDown 0.4s ease-out',
'bounce-subtle': 'bounceSubtle 2s ease-in-out infinite',
'scale-in': 'scaleIn 0.4s ease-out',
'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' } },
slideUp: { '0%': { opacity: '0', transform: 'translateY(30px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
slideDown: { '0%': { opacity: '0', transform: 'translateY(-20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
scaleIn: { '0%': { opacity: '0', transform: 'scale(0.9)' }, '100%': { opacity: '1', transform: 'scale(1)' } },
bounceSubtle: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-8px)' } },
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 services...</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-brand font-semibold transition-colors border-b-2 border-brand">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="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="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 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 text-center" data-aos="fade-up">
<h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">Our <span class="text-brand">Services</span></h1>
<p class="text-lg text-white/70 max-w-2xl mx-auto">From household clutter to construction debris, CleanHaul handles it all with professionalism and care.</p>
</div>
</section>
<!-- SERVICES CARDS -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="100">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="home" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Household Junk Removal</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Old furniture, appliances, electronics, clothing, and general household clutter. We carefully remove items from any room and handle everything from single pieces to full house cleanouts.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Furniture & mattress removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Appliance disposal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Garage & attic cleanouts</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Estate cleanouts</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="200">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="building" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Office Cleanouts</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Complete commercial junk removal for offices, warehouses, and retail spaces. We work around your schedule to minimize disruption to your business.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Desk & chair removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Electronics recycling</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>File & document disposal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Warehouse cleanouts</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="300">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="hammer" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Construction Debris</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Post-renovation and construction site cleanup. We remove drywall, lumber, concrete, tiles, and all types of building materials.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Drywall & lumber removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Concrete & tile disposal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Renovation cleanup</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Job site clearing</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="400">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="leaf" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Yard Waste Removal</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Branches, stumps, grass clippings, soil, and all types of outdoor debris. Keep your property looking its best year-round.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Branch & stump removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Grass & leaf cleanup</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Soil & dirt hauling</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Storm damage cleanup</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="500">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="wrench" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Appliance Removal</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Safe removal and disposal of old appliances including refrigerators, washers, dryers, ovens, and more. We handle disconnection and hauling.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Refrigerator removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Washer & dryer disposal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Oven & dishwasher hauling</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Proper Freon handling</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="600">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="sofa" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Furniture Removal</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Heavy furniture pickup including sofas, beds, tables, dressers, and more. No item is too big or too heavy for our trained team.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Sofa & couch removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Bed & mattress disposal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Table & desk hauling</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Multi-story pickup</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
</div>
</div>
</section>
<!-- HOW WE STAND OUT (NEW) -->
<section class="section-padding bg-muted">
<div class="container-main max-w-4xl mx-auto">
<div class="text-center mb-12" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Why Our Service</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">We Make Junk Removal Easy</h2>
<p class="mt-4 text-muted-foreground">Our process is designed to be as stress‑free as possible. Here's what sets CleanHaul apart.</p>
</div>
<div class="grid sm:grid-cols-2 gap-6">
<div class="flex gap-4 p-4 bg-white/80 rounded-xl" data-aos="fade-right" data-aos-delay="100">
<div class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0"><i data-lucide="calendar-check" class="w-5 h-5"></i></div>
<div><h3 class="font-bold mb-1">Same‑Day Booking</h3><p class="text-sm text-muted-foreground">Call before 2 PM and we'll be there the same day. Fast, reliable, and convenient.</p></div>
</div>
<div class="flex gap-4 p-4 bg-white/80 rounded-xl" data-aos="fade-left" data-aos-delay="200">
<div class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0"><i data-lucide="badge-check" class="w-5 h-5"></i></div>
<div><h3 class="font-bold mb-1">Licensed & Insured</h3><p class="text-sm text-muted-foreground">Fully licensed and carry liability insurance for your peace of mind.</p></div>
</div>
<div class="flex gap-4 p-4 bg-white/80 rounded-xl" data-aos="fade-right" data-aos-delay="300">
<div class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0"><i data-lucide="recycle" class="w-5 h-5"></i></div>
<div><h3 class="font-bold mb-1">Eco‑Friendly Disposal</h3><p class="text-sm text-muted-foreground">We sort and recycle or donate up to 60% of the items we collect.</p></div>
</div>
<div class="flex gap-4 p-4 bg-white/80 rounded-xl" data-aos="fade-left" data-aos-delay="400">
<div class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0"><i data-lucide="dollar-sign" class="w-5 h-5"></i></div>
<div><h3 class="font-bold mb-1">Upfront Pricing</h3><p class="text-sm text-muted-foreground">Free on‑site estimates with no hidden fees. You know the cost before we start.</p></div>
</div>
</div>
</div>
</section>
<!-- SERVICE PROCESS (NEW) -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="text-center mb-12" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">How It Works</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">From Booking to Cleanup</h2>
<p class="mt-4 text-muted-foreground max-w-xl mx-auto">We've streamlined the entire process so you can get your space back in no time.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="text-center p-6 rounded-2xl bg-card border border-border aos-in" data-aos="fade-up" data-aos-delay="100">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4 shadow-lg"><i data-lucide="phone-call" class="w-6 h-6"></i></div>
<h3 class="font-bold mb-2">1. Book a Time</h3>
<p class="text-sm text-muted-foreground">Call or request a quote online. We'll schedule a convenient appointment.</p>
</div>
<div class="text-center p-6 rounded-2xl bg-card border border-border aos-in" data-aos="fade-up" data-aos-delay="200">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4 shadow-lg"><i data-lucide="eye" class="w-6 h-6"></i></div>
<h3 class="font-bold mb-2">2. Get an Estimate</h3>
<p class="text-sm text-muted-foreground">Our team arrives, assesses the items, and provides a firm, no‑obligation price.</p>
</div>
<div class="text-center p-6 rounded-2xl bg-card border border-border aos-in" data-aos="fade-up" data-aos-delay="300">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4 shadow-lg"><i data-lucide="truck" class="w-6 h-6"></i></div>
<h3 class="font-bold mb-2">3. Removal & Loading</h3>
<p class="text-sm text-muted-foreground">We do all the heavy lifting, loading everything into our truck efficiently.</p>
</div>
<div class="text-center p-6 rounded-2xl bg-card border border-border aos-in" data-aos="fade-up" data-aos-delay="400">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4 shadow-lg"><i data-lucide="leaf" class="w-6 h-6"></i></div>
<h3 class="font-bold mb-2">4. Responsible Disposal</h3>
<p class="text-sm text-muted-foreground">We recycle, donate, or properly dispose of your items – guaranteed.</p>
</div>
</div>
</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">Don't let clutter take over. Get fast, reliable junk removal at prices you'll love.</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 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">&copy; <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();
// ===== ENHANCED AOS OBSERVER WITH PRELOADER FIX =====
let aosObserver = null;
function initAOS() {
if (aosObserver) {
aosObserver.disconnect();
aosObserver = null;
}
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);
});
}
// ===== PRELOADER =====
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
setTimeout(() => {
preloader.classList.add('hidden-preloader');
setTimeout(() => {
initAOS();
}, 150);
}, 1800);
});
// ===== NAVBAR SCROLL =====
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'); }
}
});
// ===== MOBILE MENU =====
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();
});
// ===== SCROLL TOP =====
document.getElementById('scrollTop')?.addEventListener('click', () => window.scrollTo({top:0, behavior:'smooth'}));
// ===== YEAR =====
document.getElementById('year').textContent = new Date().getFullYear();
// ===== INITIAL AOS CALL =====
initAOS();
setTimeout(() => lucide.createIcons(), 200);
</script>
</body>
</html>
+443
View File
@@ -0,0 +1,443 @@
<!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">&copy; <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>
+565
View File
@@ -0,0 +1,565 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our Services – CleanHaul Junk Removal</title>
<meta name="description" content="Household junk, office cleanouts, construction debris, yard waste – we handle it all. Fast, eco-friendly disposal." />
<meta property="og:title" content="Our Services – CleanHaul Junk Removal" />
<meta property="og:description" content="Household junk, office cleanouts, construction debris, yard waste – we handle it all. Fast, eco-friendly disposal." />
<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',
'slide-up': 'slideUp 0.5s ease-out',
'slide-down': 'slideDown 0.4s ease-out',
'bounce-subtle': 'bounceSubtle 2s ease-in-out infinite',
'scale-in': 'scaleIn 0.4s ease-out',
'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' } },
slideUp: { '0%': { opacity: '0', transform: 'translateY(30px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
slideDown: { '0%': { opacity: '0', transform: 'translateY(-20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
scaleIn: { '0%': { opacity: '0', transform: 'scale(0.9)' }, '100%': { opacity: '1', transform: 'scale(1)' } },
bounceSubtle: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-8px)' } },
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 services...</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-brand font-semibold transition-colors border-b-2 border-brand">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="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="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 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 text-center" data-aos="fade-up">
<h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">Our <span class="text-brand">Services</span></h1>
<p class="text-lg text-white/70 max-w-2xl mx-auto">From household clutter to construction debris, CleanHaul handles it all with professionalism and care.</p>
</div>
</section>
<!-- SERVICES CARDS -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="100">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="home" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Household Junk Removal</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Old furniture, appliances, electronics, clothing, and general household clutter. We carefully remove items from any room and handle everything from single pieces to full house cleanouts.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Furniture & mattress removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Appliance disposal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Garage & attic cleanouts</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Estate cleanouts</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="200">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="building" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Office Cleanouts</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Complete commercial junk removal for offices, warehouses, and retail spaces. We work around your schedule to minimize disruption to your business.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Desk & chair removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Electronics recycling</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>File & document disposal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Warehouse cleanouts</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="300">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="hammer" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Construction Debris</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Post-renovation and construction site cleanup. We remove drywall, lumber, concrete, tiles, and all types of building materials.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Drywall & lumber removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Concrete & tile disposal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Renovation cleanup</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Job site clearing</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="400">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="leaf" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Yard Waste Removal</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Branches, stumps, grass clippings, soil, and all types of outdoor debris. Keep your property looking its best year-round.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Branch & stump removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Grass & leaf cleanup</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Soil & dirt hauling</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Storm damage cleanup</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="500">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="wrench" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Appliance Removal</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Safe removal and disposal of old appliances including refrigerators, washers, dryers, ovens, and more. We handle disconnection and hauling.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Refrigerator removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Washer & dryer disposal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Oven & dishwasher hauling</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Proper Freon handling</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
<div class="group p-8 rounded-2xl bg-card border border-border hover:shadow-xl hover:-translate-y-1 transition-all" data-aos="zoom-in" data-aos-delay="600">
<div class="w-14 h-14 rounded-xl bg-brand-accent flex items-center justify-center mb-5 group-hover:bg-brand transition-colors">
<i data-lucide="sofa" class="w-7 h-7 text-brand group-hover:text-white transition-colors"></i>
</div>
<h2 class="text-xl font-bold mb-3">Furniture Removal</h2>
<p class="text-sm text-muted-foreground leading-relaxed mb-4">Heavy furniture pickup including sofas, beds, tables, dressers, and more. No item is too big or too heavy for our trained team.</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Sofa & couch removal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Bed & mattress disposal</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Table & desk hauling</li>
<li class="flex items-center gap-2 text-sm"><i data-lucide="arrow-right" class="w-3.5 h-3.5 text-brand flex-shrink-0"></i>Multi-story pickup</li>
</ul>
<a href="contact.html" class="btn-brand">Get Quote</a>
</div>
</div>
</div>
</section>
<!-- HOW WE STAND OUT (NEW) -->
<section class="section-padding bg-muted">
<div class="container-main max-w-4xl mx-auto">
<div class="text-center mb-12" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">Why Our Service</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">We Make Junk Removal Easy</h2>
<p class="mt-4 text-muted-foreground">Our process is designed to be as stress‑free as possible. Here's what sets CleanHaul apart.</p>
</div>
<div class="grid sm:grid-cols-2 gap-6">
<div class="flex gap-4 p-4 bg-white/80 rounded-xl" data-aos="fade-right" data-aos-delay="100">
<div class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0"><i data-lucide="calendar-check" class="w-5 h-5"></i></div>
<div><h3 class="font-bold mb-1">Same‑Day Booking</h3><p class="text-sm text-muted-foreground">Call before 2 PM and we'll be there the same day. Fast, reliable, and convenient.</p></div>
</div>
<div class="flex gap-4 p-4 bg-white/80 rounded-xl" data-aos="fade-left" data-aos-delay="200">
<div class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0"><i data-lucide="badge-check" class="w-5 h-5"></i></div>
<div><h3 class="font-bold mb-1">Licensed & Insured</h3><p class="text-sm text-muted-foreground">Fully licensed and carry liability insurance for your peace of mind.</p></div>
</div>
<div class="flex gap-4 p-4 bg-white/80 rounded-xl" data-aos="fade-right" data-aos-delay="300">
<div class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0"><i data-lucide="recycle" class="w-5 h-5"></i></div>
<div><h3 class="font-bold mb-1">Eco‑Friendly Disposal</h3><p class="text-sm text-muted-foreground">We sort and recycle or donate up to 60% of the items we collect.</p></div>
</div>
<div class="flex gap-4 p-4 bg-white/80 rounded-xl" data-aos="fade-left" data-aos-delay="400">
<div class="w-10 h-10 rounded-lg bg-brand text-white flex items-center justify-center flex-shrink-0"><i data-lucide="dollar-sign" class="w-5 h-5"></i></div>
<div><h3 class="font-bold mb-1">Upfront Pricing</h3><p class="text-sm text-muted-foreground">Free on‑site estimates with no hidden fees. You know the cost before we start.</p></div>
</div>
</div>
</div>
</section>
<!-- SERVICE PROCESS (NEW) -->
<section class="section-padding bg-background">
<div class="container-main">
<div class="text-center mb-12" data-aos="fade-up">
<span class="text-brand font-semibold text-sm uppercase tracking-wider">How It Works</span>
<h2 class="mt-2 text-3xl md:text-4xl font-bold">From Booking to Cleanup</h2>
<p class="mt-4 text-muted-foreground max-w-xl mx-auto">We've streamlined the entire process so you can get your space back in no time.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="text-center p-6 rounded-2xl bg-card border border-border" data-aos="fade-up" data-aos-delay="100">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4 shadow-lg"><i data-lucide="phone-call" class="w-6 h-6"></i></div>
<h3 class="font-bold mb-2">1. Book a Time</h3>
<p class="text-sm text-muted-foreground">Call or request a quote online. We'll schedule a convenient appointment.</p>
</div>
<div class="text-center p-6 rounded-2xl bg-card border border-border" data-aos="fade-up" data-aos-delay="200">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4 shadow-lg"><i data-lucide="eye" class="w-6 h-6"></i></div>
<h3 class="font-bold mb-2">2. Get an Estimate</h3>
<p class="text-sm text-muted-foreground">Our team arrives, assesses the items, and provides a firm, no‑obligation price.</p>
</div>
<div class="text-center p-6 rounded-2xl bg-card border border-border" data-aos="fade-up" data-aos-delay="300">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4 shadow-lg"><i data-lucide="truck" class="w-6 h-6"></i></div>
<h3 class="font-bold mb-2">3. Removal & Loading</h3>
<p class="text-sm text-muted-foreground">We do all the heavy lifting, loading everything into our truck efficiently.</p>
</div>
<div class="text-center p-6 rounded-2xl bg-card border border-border" data-aos="fade-up" data-aos-delay="400">
<div class="w-14 h-14 rounded-full bg-brand text-white flex items-center justify-center mx-auto mb-4 shadow-lg"><i data-lucide="leaf" class="w-6 h-6"></i></div>
<h3 class="font-bold mb-2">4. Responsible Disposal</h3>
<p class="text-sm text-muted-foreground">We recycle, donate, or properly dispose of your items – guaranteed.</p>
</div>
</div>
</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">Don't let clutter take over. Get fast, reliable junk removal at prices you'll love.</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 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">&copy; <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();
// ===== ENHANCED AOS OBSERVER WITH PRELOADER FIX =====
let aosObserver = null;
function initAOS() {
if (aosObserver) {
aosObserver.disconnect();
aosObserver = null;
}
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);
});
}
// ===== PRELOADER =====
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
setTimeout(() => {
preloader.classList.add('hidden-preloader');
setTimeout(() => {
initAOS();
}, 150);
}, 1800);
});
// ===== NAVBAR SCROLL =====
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'); }
}
});
// ===== MOBILE MENU =====
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();
});
// ===== SCROLL TOP =====
document.getElementById('scrollTop')?.addEventListener('click', () => window.scrollTo({top:0, behavior:'smooth'}));
// ===== YEAR =====
document.getElementById('year').textContent = new Date().getFullYear();
// ===== INITIAL AOS CALL =====
initAOS();
setTimeout(() => lucide.createIcons(), 200);
</script>
</body>
</html>
+442
View File
@@ -0,0 +1,442 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Terms and Conditions – CleanHaul Junk Removal</title>
<meta name="description" content="Read the terms and conditions for CleanHaul junk removal services. Understand our policies, pricing, and liability." />
<meta property="og:title" content="Terms and Conditions – CleanHaul Junk Removal" />
<meta property="og:description" content="Read the terms and conditions for CleanHaul junk removal services. Understand our policies, pricing, and liability." />
<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 terms...</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">Terms and <span class="text-brand">Conditions</span></h1>
<p class="text-lg text-white/70 max-w-2xl mx-auto">Please read these terms carefully before using our services.</p>
</div>
</section>
<!-- TERMS 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>Welcome to CleanHaul. By accessing or using our junk removal services, you agree to be bound by the following terms and conditions. If you do not agree with any part of these terms, please do not use our services.</p>
<h2>1. Services Provided</h2>
<p>CleanHaul offers junk removal, debris cleanup, and disposal services for residential and commercial properties. Our services include, but are not limited to:</p>
<ul>
<li>Household junk removal (furniture, appliances, general clutter)</li>
<li>Office and commercial cleanouts</li>
<li>Construction debris removal</li>
<li>Yard waste and outdoor debris cleanup</li>
<li>Specialty item pickup (mattresses, electronics, etc.)</li>
</ul>
<p>We reserve the right to refuse any item we deem hazardous, unsafe, or beyond our capacity to transport legally.</p>
<h2>2. Pricing and Payment</h2>
<p>Our pricing is based on the volume and weight of items removed. We provide free, no-obligation estimates before any work begins. The final price will be communicated and agreed upon prior to removal.</p>
<ul>
<li>Payment is due at the time of service unless otherwise arranged.</li>
<li>We accept cash, credit/debit cards, and mobile payments.</li>
<li>Any additional items added after the estimate may result in a revised price.</li>
</ul>
<h2>3. Customer Responsibilities</h2>
<p>You agree to:</p>
<ul>
<li>Provide clear access to the items being removed.</li>
<li>Identify any hazardous materials before our arrival.</li>
<li>Be present (or have a representative present) during the removal.</li>
<li>Ensure that all items intended for removal are clearly indicated.</li>
</ul>
<h2>4. Cancellation and Rescheduling</h2>
<p>We understand plans change. Please notify us at least 24 hours in advance to cancel or reschedule your appointment without penalty. Late cancellations may be subject to a $50 fee.</p>
<h2>5. Liability and Damages</h2>
<p>CleanHaul is fully licensed and insured. While we take every precaution to protect your property, we are not liable for:</p>
<ul>
<li>Pre-existing damages, scratches, or dents in walls, floors, or doorways.</li>
<li>Items left behind that were not clearly marked for removal.</li>
<li>Damage caused by items that were improperly packed or unstable.</li>
</ul>
<p>We will, however, work with you to resolve any issues that arise during our service.</p>
<h2>6. Disposal and Environmental Policy</h2>
<p>We strive to recycle or donate up to 60% of the items we collect. Items that cannot be reused are disposed of in accordance with local, state, and federal regulations. Hazardous waste (paint, chemicals, oil, etc.) will not be collected unless special arrangements are made.</p>
<h2>7. Privacy</h2>
<p>We respect your privacy. Any personal information collected during booking or service is used solely for scheduling, communication, and billing purposes. We do not sell or share your data with third parties. For more details, please review our <a href="#" class="text-brand hover:underline">Privacy Policy</a>.</p>
<h2>8. Intellectual Property</h2>
<p>All content on the CleanHaul website, including logos, text, images, and design, is the property of CleanHaul and protected by copyright laws. Unauthorized use is prohibited.</p>
<h2>9. Changes to Terms</h2>
<p>We may update these terms from time to time. Any changes will be posted on this page with an updated revision date. Continued use of our services after changes constitutes acceptance of the new terms.</p>
<h2>10. Contact Information</h2>
<p>If you have any questions about these Terms and Conditions, please contact us:</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">&copy; <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>