565 lines
38 KiB
HTML
565 lines
38 KiB
HTML
<!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">© <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> |