547 lines
34 KiB
HTML
547 lines
34 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<style>
|
||
.preview-concept-banner{position:relative;z-index:60;background:#0f1729;color:#fff;padding:9px 16px;text-align:center;font:600 13px/1.4 system-ui,sans-serif}.preview-concept-banner a{color:#dff0e3;text-decoration:underline;text-underline-offset:2px}.preview-concept-banner .sep{margin:0 7px;color:#b9c2cf}
|
||
</style>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>FAQ – Happy Hauling Junk Removal 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 – Happy Hauling Junk Removal 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">
|
||
<div class="preview-concept-banner">UX Concept Preview — Happy Hauling Junk Removal <span class="sep">·</span> Not the live website <span class="sep">·</span> <a href="ux-gallery.html">Feature gallery</a> <span class="sep">·</span> <a href="pricing.html">Pricing</a></div>
|
||
|
||
<!-- 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">Happy <span class="text-brand">Hauling</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">Happy <span class="text-brand">Hauling</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="service-rates.html" class="text-sm font-medium text-foreground/80 hover:text-brand transition-colors">Rates</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:+12246222526" 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="service-rates.html" class="py-2 text-base font-medium text-foreground/80 hover:text-brand">Rates</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:+12246222526" 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 Chicagoland area and surrounding counties, including Chicagoland 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. Happy Hauling Junk Removal 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:+12246222526" class="btn-brand"><i data-lucide="phone" class="w-4 h-4"></i> Call (224) 622-2526</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:+12246222526" 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">Happy <span class="text-brand">Hauling</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="service-rates.html" class="hover:text-brand transition-colors">Rates</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</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:+12246222526" class="hover:text-brand">(224) 622-2526</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="tel:+12246222526" class="hover:text-brand">(224) 622-2526</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>Serving Chicagoland and the local community</span></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>Clear, Upfront 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="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> Happy Hauling Junk Removal. All rights reserved.</p>
|
||
<div class="flex gap-6 text-sm text-white/50">
|
||
<a href="privacy.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:+12246222526" 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>
|
||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||
</body>
|
||
</html> |