added more preview pages and more templates
This commit is contained in:
@@ -0,0 +1,599 @@
|
||||
<!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>About Us – Happy Hauling Junk Removal Junk Removal</title>
|
||||
<meta name="description" content="Learn about Happy Hauling Junk Removal's mission, values, and professional team. Licensed, insured, and committed to eco-friendly disposal." />
|
||||
<meta property="og:title" content="About Us – Happy Hauling Junk Removal Junk Removal" />
|
||||
<meta property="og:description" content="Learn about Happy Hauling Junk Removal'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">
|
||||
<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 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">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-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:+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="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 relative" data-aos="fade-up">
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">About <span class="text-brand">Happy Hauling Junk Removal</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">Happy Hauling Junk Removal 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="Happy Hauling Junk Removal 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">Clear, Upfront Service</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 Happy Hauling Junk Removal 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">Happy Hauling Junk Removal 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">Continued Prompt, Efficient Service</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">Clear, Upfront Service</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:+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 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" 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>
|
||||
<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>
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
@@ -0,0 +1,471 @@
|
||||
/* Shared UX gallery + pricing hub (platform proposals) */
|
||||
:root {
|
||||
--ink: #12141a;
|
||||
--muted: #5c6570;
|
||||
--surface: #f3f5f7;
|
||||
--card: #fff;
|
||||
--border: #d9dee5;
|
||||
--accent: #1a4f6e;
|
||||
--accent-2: #c45c26;
|
||||
--ok: #1a7f4b;
|
||||
--warn: #b45309;
|
||||
--banner: #111827;
|
||||
--radius: 4px;
|
||||
--font: "Segoe UI", system-ui, sans-serif;
|
||||
--display: Georgia, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
color: var(--ink);
|
||||
background: var(--surface);
|
||||
line-height: 1.5;
|
||||
}
|
||||
a { color: var(--accent); }
|
||||
.proposal-banner {
|
||||
background: var(--banner);
|
||||
color: #e5e7eb;
|
||||
font-size: 13px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.proposal-banner a { color: #93c5fd; text-decoration: none; }
|
||||
.proposal-banner a:hover { text-decoration: underline; }
|
||||
.proposal-banner .tag {
|
||||
display: inline-block;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.hub-hero {
|
||||
background: linear-gradient(135deg, #0b1f33 0%, #1a4f6e 55%, #2a6f8f 100%);
|
||||
color: #fff;
|
||||
padding: 56px 24px 48px;
|
||||
}
|
||||
.hub-hero.paint {
|
||||
background: linear-gradient(135deg, #1a2332 0%, #3d4a5c 50%, #c4a574 120%);
|
||||
}
|
||||
.hub-hero h1 {
|
||||
font-family: var(--display);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0 0 12px;
|
||||
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||||
}
|
||||
.hub-hero p { max-width: 560px; margin: 0; opacity: 0.92; }
|
||||
.hub-section {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px 8px;
|
||||
}
|
||||
.hub-section h2 {
|
||||
font-family: var(--display);
|
||||
font-size: 1.25rem;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
.hub-section .sec-lead {
|
||||
margin: 0 0 16px;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
.hub-grid {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto 40px;
|
||||
padding: 0 24px;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
}
|
||||
.hub-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
padding: 20px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
display: block;
|
||||
}
|
||||
.hub-card:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hub-card.planned {
|
||||
opacity: 0.85;
|
||||
border-style: dashed;
|
||||
}
|
||||
.hub-card .eyebrow {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.hub-card.paint .eyebrow { color: var(--accent-2); }
|
||||
.hub-card h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
font-family: var(--display);
|
||||
}
|
||||
.hub-card p { margin: 0; font-size: 14px; color: var(--muted); }
|
||||
.hub-card .status {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ok);
|
||||
}
|
||||
.hub-card.planned .status { color: var(--warn); }
|
||||
|
||||
/* Pricing */
|
||||
.pricing-layout {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px 64px;
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
grid-template-columns: 1fr minmax(240px, 300px);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.pricing-layout { grid-template-columns: 1fr; }
|
||||
}
|
||||
.price-panel, .price-summary {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
padding: 20px;
|
||||
}
|
||||
.price-panel h2, .price-summary h2 {
|
||||
font-family: var(--display);
|
||||
font-size: 1.15rem;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.feat-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.feat-row:last-child { border-bottom: none; }
|
||||
.feat-row.locked { background: #f8fafc; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
|
||||
.feat-row label { font-weight: 600; cursor: pointer; }
|
||||
.feat-row .desc { font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 2px; }
|
||||
.feat-row .amt { font-size: 13px; text-align: right; white-space: nowrap; color: var(--muted); }
|
||||
.feat-row .amt strong { display: block; color: var(--ink); font-size: 14px; }
|
||||
.feat-row input:disabled + .feat-text label { cursor: default; }
|
||||
.dep-note { font-size: 12px; color: var(--warn); margin-top: 4px; }
|
||||
.price-summary { position: sticky; top: 56px; }
|
||||
.price-summary .line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.price-summary .total {
|
||||
border-top: 2px solid var(--ink);
|
||||
margin-top: 12px;
|
||||
padding-top: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
font-family: var(--display);
|
||||
}
|
||||
.price-summary .disclaimer {
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.stub-page {
|
||||
min-height: calc(100vh - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
.stub-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
max-width: 480px;
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
.stub-card h1 { font-family: var(--display); font-size: 1.5rem; margin: 0 0 8px; }
|
||||
.stub-card p { color: var(--muted); margin: 0 0 20px; }
|
||||
.stub-card a.btn {
|
||||
display: inline-block;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 10px 18px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* —— Portal shell —— */
|
||||
body.portal { margin: 0; background: var(--surface); font-family: var(--font); color: var(--ink); }
|
||||
.portal-shell { display: flex; min-height: calc(100vh - 36px); }
|
||||
.portal-sidebar {
|
||||
width: 220px; flex-shrink: 0; background: #0b1f33; color: #cbd5e1;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.portal-brand {
|
||||
padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
|
||||
font-family: var(--display); font-weight: 700; color: #fff; font-size: 14px;
|
||||
text-decoration: none; display: block;
|
||||
}
|
||||
.portal-brand span { display: block; color: #7dd3da; font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-top: 2px; font-family: var(--font); }
|
||||
.portal-nav { padding: 12px 0; flex: 1; overflow-y: auto; }
|
||||
.portal-nav .nav-section {
|
||||
font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #64748b;
|
||||
padding: 14px 18px 6px;
|
||||
}
|
||||
.portal-nav a {
|
||||
display: block; padding: 9px 18px; color: #94a3b8; text-decoration: none; font-size: 13px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.portal-nav a:hover { color: #fff; background: rgba(255,255,255,.04); }
|
||||
.portal-nav a.active { color: #fff; background: rgba(26,79,110,.35); border-left-color: #7dd3da; }
|
||||
.portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||||
.portal-topbar {
|
||||
background: #fff; border-bottom: 1px solid var(--border);
|
||||
padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
||||
}
|
||||
.portal-topbar h1 { margin: 0; font-size: 20px; font-family: var(--display); font-weight: 600; }
|
||||
.portal-user { font-size: 13px; color: var(--muted); }
|
||||
.portal-user strong { color: var(--ink); }
|
||||
.portal-user a { color: var(--accent); }
|
||||
.portal-content { padding: 24px; flex: 1; }
|
||||
.proposal-note {
|
||||
border-left: 3px solid var(--accent); background: #e8f0f5; padding: 12px 16px;
|
||||
margin: 0 0 20px; font-size: 14px; color: #0d3a45;
|
||||
}
|
||||
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card { background: #fff; border: 1px solid var(--border); padding: 18px; }
|
||||
.stat-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
|
||||
.stat-card .value { font-size: 28px; font-weight: 700; font-family: var(--display); margin-top: 4px; }
|
||||
.stat-card .delta { font-size: 12px; margin-top: 4px; color: var(--ok); }
|
||||
.panel { background: #fff; border: 1px solid var(--border); margin-bottom: 20px; }
|
||||
.panel-h {
|
||||
padding: 14px 18px; border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
||||
}
|
||||
.panel-h h2 { margin: 0; font-size: 15px; font-family: var(--display); font-weight: 600; }
|
||||
.panel-b { padding: 18px; }
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
@media (max-width: 900px) {
|
||||
.portal-shell { flex-direction: column; }
|
||||
.portal-sidebar { width: 100%; }
|
||||
.portal-nav { display: flex; flex-wrap: wrap; padding: 8px; }
|
||||
.portal-nav .nav-section { display: none; }
|
||||
.portal-nav a { border-left: none; border-bottom: 2px solid transparent; padding: 8px 12px; }
|
||||
.portal-nav a.active { border-bottom-color: #7dd3da; background: transparent; }
|
||||
.split { grid-template-columns: 1fr; }
|
||||
}
|
||||
.btn {
|
||||
display: inline-block; padding: 9px 18px; font-size: 13px; font-weight: 600;
|
||||
border: none; cursor: pointer; text-decoration: none; font-family: var(--font);
|
||||
}
|
||||
.btn-primary { background: var(--accent); color: #fff; }
|
||||
.btn-primary:hover { background: #143d56; color: #fff; text-decoration: none; }
|
||||
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--ink); }
|
||||
.btn-sm { padding: 6px 12px; font-size: 12px; }
|
||||
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
.table th {
|
||||
text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
|
||||
color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600;
|
||||
}
|
||||
.table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
|
||||
.table tr:hover td { background: #f8fafc; }
|
||||
.table a { color: var(--accent); text-decoration: none; font-weight: 500; }
|
||||
.badge {
|
||||
display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
|
||||
border-radius: 2px; text-transform: uppercase; letter-spacing: .04em;
|
||||
}
|
||||
.badge-new { background: #d0eef0; color: #00626c; }
|
||||
.badge-contacted { background: #fef3c7; color: #92400e; }
|
||||
.badge-won { background: #d1fae5; color: #065f46; }
|
||||
.badge-lost { background: #fee2e2; color: #991b1b; }
|
||||
.badge-sent { background: #d0eef0; color: #00626c; }
|
||||
.badge-scheduled { background: #ede9fe; color: #5b21b6; }
|
||||
.badge-paid { background: #d1fae5; color: #065f46; }
|
||||
.badge-open { background: #fef3c7; color: #92400e; }
|
||||
.badge-draft { background: #f3f4f6; color: #4b5563; }
|
||||
.form-grid { display: grid; gap: 16px; }
|
||||
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
|
||||
@media (max-width: 700px) { .form-grid.cols-2 { grid-template-columns: 1fr; } }
|
||||
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #374151; }
|
||||
.field input, .field select, .field textarea {
|
||||
width: 100%; padding: 10px 12px; border: 1px solid var(--border); font: inherit; background: #fff; box-sizing: border-box;
|
||||
}
|
||||
.field textarea { min-height: 100px; resize: vertical; }
|
||||
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
|
||||
.login-wrap {
|
||||
min-height: calc(100vh - 36px); display: flex; align-items: center; justify-content: center;
|
||||
background: linear-gradient(160deg, #0b1f33, #1a4f6e 60%, #e8f0f5 60%); padding: 24px;
|
||||
}
|
||||
.login-card { background: #fff; width: 100%; max-width: 400px; padding: 36px 32px; border: 1px solid var(--border); }
|
||||
.login-card h1 { font-family: var(--display); font-size: 22px; margin: 0 0 6px; }
|
||||
.login-card .sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
|
||||
.chart-ph {
|
||||
height: 220px; background: linear-gradient(180deg, #e8f0f5 0%, #fff 100%);
|
||||
border: 1px dashed #a8d8dc; display: flex; align-items: flex-end; gap: 8px; padding: 24px 16px 16px;
|
||||
}
|
||||
.chart-ph .bar { flex: 1; background: var(--accent); opacity: .75; border-radius: 2px 2px 0 0; min-height: 20px; }
|
||||
.channel-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
|
||||
.channel-tabs a {
|
||||
padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--muted);
|
||||
text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
|
||||
}
|
||||
.channel-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
.connect-grid { display: grid; gap: 12px; }
|
||||
.connect-card {
|
||||
display: flex; gap: 14px; align-items: flex-start; text-align: left;
|
||||
padding: 14px; border: 1px solid var(--border); background: #fff; width: 100%;
|
||||
cursor: pointer; font: inherit; color: inherit;
|
||||
}
|
||||
.connect-card:hover { border-color: var(--accent); }
|
||||
.platform-icon {
|
||||
width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center;
|
||||
justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; font-size: 14px;
|
||||
}
|
||||
.platform-icon.meta { background: #1877f2; }
|
||||
.platform-icon.ig { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); font-size: 12px; }
|
||||
.platform-icon.li { background: #0a66c2; }
|
||||
.social-phone {
|
||||
width: 100%; max-width: 360px; background: #fff; border: 1px solid #d1d5db;
|
||||
box-shadow: 0 8px 30px rgba(15,23,42,.12); overflow: hidden; font-size: 14px;
|
||||
}
|
||||
.soc-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
|
||||
.soc-avatar {
|
||||
width: 40px; height: 40px; background: var(--accent); color: #fff; display: flex;
|
||||
align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; border-radius: 50%;
|
||||
}
|
||||
.soc-name { font-weight: 700; font-size: 13px; }
|
||||
.soc-meta { font-size: 11px; color: #6b7280; }
|
||||
.soc-caption { padding: 0 14px 12px; white-space: pre-wrap; line-height: 1.4; font-size: 13px; }
|
||||
.soc-image { height: 200px; background: linear-gradient(135deg, #e5e7eb, #cbd5e1); }
|
||||
.soc-actions { padding: 10px 14px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #4b5563; font-weight: 600; }
|
||||
.ai-chat { display: flex; flex-direction: column; height: min(640px, 75vh); background: #fff; border: 1px solid var(--border); }
|
||||
.ai-chat-h { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
|
||||
.ai-chat-h h2 { margin: 0; font-size: 15px; font-family: var(--display); }
|
||||
.ai-pill { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #e8f0f5; color: var(--accent); padding: 3px 8px; }
|
||||
.ai-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, #f8fafc, #fff 40%); }
|
||||
.ai-msg { max-width: 92%; font-size: 13px; line-height: 1.45; }
|
||||
.ai-msg.bot { align-self: flex-start; }
|
||||
.ai-msg.user { align-self: flex-end; }
|
||||
.ai-msg .bubble { padding: 10px 12px; border: 1px solid var(--border); background: #fff; }
|
||||
.ai-msg.user .bubble { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
.ai-msg .who { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
|
||||
.ai-draft { margin-top: 8px; padding: 10px; background: #f8fafc; border: 1px dashed #a8d8dc; white-space: pre-wrap; font-size: 12px; }
|
||||
.ai-chat-input { border-top: 1px solid var(--border); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-end; }
|
||||
.ai-chat-input textarea { flex: 1; min-height: 44px; max-height: 100px; resize: vertical; border: 1px solid var(--border); padding: 8px 10px; font: inherit; font-size: 13px; }
|
||||
.postcard {
|
||||
width: 100%; max-width: 420px; aspect-ratio: 6/4; position: relative; overflow: hidden;
|
||||
background: #111; box-shadow: 0 12px 40px rgba(15,23,42,.25); color: #fff;
|
||||
}
|
||||
.postcard-media { position: absolute; inset: 0; background: linear-gradient(135deg, #1a4f6e, #0b1f33 60%, #c45c26); }
|
||||
.postcard-copy { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
|
||||
.postcard-headline { font-family: var(--display); font-weight: 700; font-size: 26px; border-left: 4px solid #7dd3da; padding-left: 10px; line-height: 1.1; }
|
||||
.postcard-sub { margin-top: 8px; font-size: 14px; opacity: .95; }
|
||||
.size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.size-option {
|
||||
border: 1px solid var(--border); background: #fff; padding: 10px 12px; text-align: left;
|
||||
cursor: pointer; font: inherit; color: inherit;
|
||||
}
|
||||
.size-option.active { border-color: var(--accent); background: #e8f0f5; box-shadow: inset 3px 0 0 var(--accent); }
|
||||
.designer-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 20px; align-items: start; }
|
||||
@media (max-width: 960px) { .designer-layout { grid-template-columns: 1fr; } }
|
||||
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 12px; }
|
||||
.calendar-grid .dow { text-align: center; color: var(--muted); font-weight: 600; padding: 6px; }
|
||||
.calendar-grid .day {
|
||||
aspect-ratio: 1; border: 1px solid var(--border); background: #fff; padding: 6px; position: relative;
|
||||
}
|
||||
.calendar-grid .day.has-post { background: #e8f0f5; }
|
||||
.calendar-grid .day .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 4px; }
|
||||
.steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
.step {
|
||||
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
|
||||
padding: 8px 12px; background: #fff; border: 1px solid var(--border);
|
||||
}
|
||||
.step span {
|
||||
width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #374151;
|
||||
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
|
||||
}
|
||||
.step.active { border-color: var(--accent); color: var(--ink); }
|
||||
.step.active span { background: var(--accent); color: #fff; }
|
||||
.dropzone { border: 2px dashed var(--border); padding: 32px; text-align: center; background: #f8fafc; }
|
||||
.public-simple { max-width: 720px; margin: 40px auto; padding: 0 24px 64px; }
|
||||
.public-simple .card { background: #fff; border: 1px solid var(--border); padding: 32px; }
|
||||
.public-nav {
|
||||
background: #fff; border-bottom: 1px solid var(--border);
|
||||
padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
||||
}
|
||||
.public-nav .brand { font-family: var(--display); font-weight: 700; color: var(--ink); text-decoration: none; font-size: 18px; }
|
||||
.public-nav .links a { margin-left: 16px; font-size: 14px; color: var(--muted); text-decoration: none; }
|
||||
.public-nav .links a:hover { color: var(--accent); }
|
||||
.blog-list { display: grid; gap: 16px; }
|
||||
.blog-item { background: #fff; border: 1px solid var(--border); padding: 20px; text-decoration: none; color: inherit; display: block; }
|
||||
.blog-item:hover { border-color: var(--accent); color: inherit; text-decoration: none; }
|
||||
.blog-item h3 { margin: 0 0 6px; font-family: var(--display); }
|
||||
.blog-item .meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
|
||||
.blog-item p { margin: 0; font-size: 14px; color: var(--muted); }
|
||||
.pay-box { max-width: 480px; margin: 48px auto; background: #fff; border: 1px solid var(--border); padding: 32px; }
|
||||
.pay-box h1 { font-family: var(--display); margin: 0 0 8px; }
|
||||
.pay-amount { font-size: 36px; font-weight: 700; font-family: var(--display); margin: 16px 0; }
|
||||
.error-hero { text-align: center; padding: 80px 24px; }
|
||||
.error-hero h1 { font-family: var(--display); font-size: 4rem; margin: 0; color: var(--accent); }
|
||||
.muted { color: var(--muted); font-size: 12px; }
|
||||
.theme-paint {
|
||||
--accent: #c45c26;
|
||||
--accent-2: #1a2332;
|
||||
}
|
||||
.theme-paint .portal-sidebar { background: #1a2332; }
|
||||
.theme-paint .portal-nav a.active { background: rgba(196,92,38,.25); border-left-color: #c45c26; }
|
||||
.theme-paint .login-wrap { background: linear-gradient(160deg, #1a2332, #3d4a5c 60%, #f3efe8 60%); }
|
||||
.theme-paint .proposal-note { border-left-color: #c45c26; background: #faf6f1; color: #5c3d2e; }
|
||||
.theme-paint .btn-primary { background: #c45c26; }
|
||||
.theme-paint .btn-primary:hover { background: #a34a1e; }
|
||||
.theme-paint .portal-nav a.active { border-left-color: #e8b88a; }
|
||||
|
||||
/* Vendor credit */
|
||||
.aiml-site-credit {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
padding: 16px 24px 28px;
|
||||
}
|
||||
.aiml-site-credit a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
.aiml-site-credit a:hover { text-decoration: underline; }
|
||||
body.portal .aiml-site-credit {
|
||||
border-top: 1px solid var(--border);
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
|
||||
.brand-logo-link { display:inline-flex; align-items:center; }
|
||||
.brand-logo--hub { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
@@ -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: #157a48;
|
||||
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 #157a48;
|
||||
color: #157a48;
|
||||
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: #157a48;
|
||||
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: #157a48;
|
||||
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 #157a48;
|
||||
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 |
@@ -0,0 +1,470 @@
|
||||
<!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>5 Easy Steps to Declutter Your Home Before Summer – Happy Hauling Junk Removal 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 – Happy Hauling Junk Removal 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">
|
||||
<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 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">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-brand font-semibold 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>
|
||||
|
||||
<!-- 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 Happy Hauling Junk Removal, 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 Happy Hauling Junk Removal, 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. Happy Hauling Junk Removal 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 Happy Hauling Junk Removal, 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:+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();
|
||||
|
||||
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>
|
||||
<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>
|
||||
@@ -0,0 +1,500 @@
|
||||
<!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>Blog – Happy Hauling Junk Removal Junk Removal</title>
|
||||
<meta name="description" content="Read tips, guides, and company updates from Happy Hauling Junk Removal – your trusted junk removal experts." />
|
||||
<meta property="og:title" content="Blog – Happy Hauling Junk Removal Junk Removal" />
|
||||
<meta property="og:description" content="Read tips, guides, and company updates from Happy Hauling Junk Removal – 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">
|
||||
<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 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">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-brand font-semibold 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">Happy Hauling Junk Removal <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:+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();
|
||||
|
||||
// Initial AOS (will re-init after loader)
|
||||
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>
|
||||
@@ -0,0 +1,684 @@
|
||||
<!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>Contact Us – Happy Hauling Junk Removal Junk Removal</title>
|
||||
<meta name="description"
|
||||
content="Get in touch with Happy Hauling Junk Removal for a free junk removal quote. Call us, email us, or fill out our online form." />
|
||||
<meta property="og:title" content="Contact Us – Happy Hauling Junk Removal Junk Removal" />
|
||||
<meta property="og:description"
|
||||
content="Get in touch with Happy Hauling Junk Removal 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">
|
||||
<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 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">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-brand font-semibold transition-colors border-b-2 border-brand">Contact</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="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">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:+12246222526"
|
||||
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">Contact</p><a href="tel:+12246222526"
|
||||
class="text-sm text-muted-foreground hover:text-brand transition-colors">Call or text (224) 622-2526</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">Chicagoland and the local community</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">Availability</p>
|
||||
<p class="text-sm text-muted-foreground">Call or text to discuss your hauling needs and availability.</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 Chicagoland area
|
||||
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">Chicagoland 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:+12246222526" class="btn-brand-dark btn-xl"><i data-lucide="phone" class="w-5 h-5"></i>Call
|
||||
(224) 622-2526</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">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();
|
||||
|
||||
// ===== 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>
|
||||
<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>
|
||||
@@ -0,0 +1,547 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,889 @@
|
||||
<!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>Happy Hauling Junk Removal | Chicagoland Junk Removal</title>
|
||||
<meta name="description"
|
||||
content="Happy Hauling Junk Removal serves Chicagoland homes and businesses with prompt, transparent hauling, recycling, and donation when possible." />
|
||||
<meta property="og:title" content="Happy Hauling Junk Removal | Chicagoland Junk Removal" />
|
||||
<meta property="og:description"
|
||||
content="Happy Hauling Junk Removal serves Chicagoland homes and businesses with prompt, transparent hauling, recycling, and donation when possible." />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<link rel="canonical" href="https://happy-hauling-junk-removal-preview.aimloperations.com/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://happy-hauling-junk-removal-preview.aimloperations.com/" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="Happy Hauling Junk Removal | Chicagoland Junk Removal" />
|
||||
<meta name="twitter:description" content="Prompt residential and commercial junk removal with transparent, no-obligation estimates." />
|
||||
<script type="application/ld+json">{"@context":"https://schema.org","@type":"LocalBusiness","name":"Happy Hauling Junk Removal","url":"https://happy-hauling-junk-removal-preview.aimloperations.com/","telephone":"+1-224-622-2526","areaServed":"Chicagoland","description":"Residential and commercial junk removal with recycling and donation when possible."}</script>
|
||||
<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>
|
||||
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: '#157a48',
|
||||
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">
|
||||
<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="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">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 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">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-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="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="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="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 ============ -->
|
||||
<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="Happy Hauling Junk Removal truck and team" class="w-full h-full object-cover opacity-25" width="1600" height="900" decoding="async" />
|
||||
<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-white/10 text-[#b8ebc9] text-xs font-semibold border border-white/20"><i
|
||||
data-lucide="clock" class="w-3.5 h-3.5"></i>Prompt Service</span>
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/10 text-[#b8ebc9] text-xs font-semibold border border-white/20"><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-white/10 text-[#b8ebc9] text-xs font-semibold border border-white/20"><i
|
||||
data-lucide="shield" class="w-3.5 h-3.5"></i>Transparent Estimates</span>
|
||||
</div>
|
||||
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-tight">We Make Your Junk <span
|
||||
class="text-brand">Our Joy</span></h1>
|
||||
<p class="mt-6 text-lg text-white/70 max-w-lg leading-relaxed">Residential and commercial hauling across Chicagoland. Call or text for a transparent, no-obligation estimate — no hidden fees.</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:+12246222526" 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">Household junk removal details <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">Office cleanout services <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">Construction debris cleanup <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">Yard waste removal details <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 Happy Hauling Junk Removal?</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">Prompt 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">Prompt, efficient service with transparent, no-obligation estimates.</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 after junk removal"
|
||||
class="w-full h-84 object-cover group-hover:scale-105 transition-transform duration-500" width="800" height="600" loading="lazy" decoding="async" />
|
||||
</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 after debris removal"
|
||||
class="w-full h-84 object-cover group-hover:scale-105 transition-transform duration-500" width="800" height="600" loading="lazy" decoding="async" />
|
||||
</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 after commercial hauling"
|
||||
class="w-full h-84 object-cover group-hover:scale-105 transition-transform duration-500" width="800" height="600" loading="lazy" decoding="async" />
|
||||
</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: 'Happy Hauling Junk Removal 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 Happy Hauling Junk Removal 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:+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>
|
||||
|
||||
<!-- ============ 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">
|
||||
<div>
|
||||
<label class="sr-only" for="quote-name">Full name</label>
|
||||
<input id="quote-name" type="text" placeholder="Full Name" required
|
||||
class="w-full rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="sr-only" for="quote-phone">Phone number</label>
|
||||
<input id="quote-phone" type="tel" placeholder="Phone Number" required
|
||||
class="w-full rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="sr-only" for="quote-email">Email address</label>
|
||||
<input id="quote-email" type="email" placeholder="Email Address" required
|
||||
class="w-full rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="sr-only" for="quote-service">Service type</label>
|
||||
<select id="quote-service" required
|
||||
class="w-full 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>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="sr-only" for="quote-address">Pickup address</label>
|
||||
<input id="quote-address" type="text" placeholder="Pickup Address" required
|
||||
class="w-full rounded-xl border border-border bg-white px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-brand" />
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="sr-only" for="quote-details">Junk removal details</label>
|
||||
<textarea id="quote-details" placeholder="Tell us about your junk removal needs..." rows="4"
|
||||
class="w-full 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>
|
||||
<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">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>
|
||||
<p class="font-semibold text-lg mb-4">Services</p>
|
||||
<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>
|
||||
<p class="font-semibold text-lg mb-4">Quick Links</p>
|
||||
<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>
|
||||
<p class="font-semibold text-lg mb-4">Service Areas</p>
|
||||
<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>
|
||||
<p class="font-semibold text-lg mb-4">Contact</p>
|
||||
<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>
|
||||
<p class="font-semibold text-lg mb-1">Subscribe to Our Newsletter</p>
|
||||
<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">
|
||||
<label class="sr-only" for="newsletter-email">Email for newsletter</label>
|
||||
<input id="newsletter-email" 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 type="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-white/10 text-[#b8ebc9] text-xs font-semibold border border-white/20"><i
|
||||
data-lucide="shield-check" class="w-3.5 h-3.5"></i>Transparent Estimates</span>
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/10 text-[#b8ebc9] text-xs font-semibold border border-white/20"><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-white/10 text-[#b8ebc9] text-xs font-semibold border border-white/20"><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>
|
||||
<!-- ============ FLOATING BUTTONS ============ -->
|
||||
<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>
|
||||
|
||||
<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 src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<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>
|
||||
<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>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>UTM analytics · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="active" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>UTM analytics</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Included with every client portal — leads by source/campaign over time.</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-card"><div class="label">Leads (30d)</div><div class="value">42</div><div class="delta">+12% vs prior</div></div>
|
||||
<div class="stat-card"><div class="label">Top source</div><div class="value" style="font-size:18px;margin-top:10px">Google</div><div class="delta">18 leads</div></div>
|
||||
<div class="stat-card"><div class="label">Top campaign</div><div class="value" style="font-size:18px;margin-top:10px">spring-promo</div><div class="delta">11 leads</div></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Leads by week</h2></div>
|
||||
<div class="panel-b"><div class="chart-ph"><div class="bar" style="height:40%"></div><div class="bar" style="height:65%"></div><div class="bar" style="height:35%"></div><div class="bar" style="height:80%"></div><div class="bar" style="height:55%"></div><div class="bar" style="height:70%"></div><div class="bar" style="height:90%"></div></div></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>By source / campaign</h2></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Source</th><th>Campaign</th><th>Leads</th><th>Won</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>google</td><td>emergency</td><td>12</td><td>3</td></tr>
|
||||
<tr><td>facebook</td><td>spring-promo</td><td>11</td><td>2</td></tr>
|
||||
<tr><td>direct</td><td>(none)</td><td>9</td><td>4</td></tr>
|
||||
<tr><td>postcard</td><td>march-mailer</td><td>6</td><td>1</td></tr>
|
||||
<tr><td>yelp</td><td>profile</td><td>4</td><td>1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Blog editor · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="active" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Blog editor</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Create and edit posts; publish or keep as draft.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Edit post</h2>
|
||||
<div><button class="btn btn-sm btn-ghost" type="button">Save draft</button>
|
||||
<button class="btn btn-sm btn-primary" type="button">Publish</button></div>
|
||||
</div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Title</label><input value="When to schedule an electrical safety inspection"></div>
|
||||
<div class="field"><label>Slug</label><input value="when-to-schedule-electrical-safety-inspection"></div>
|
||||
<div class="field"><label>Excerpt</label><textarea style="min-height:60px">How a safety inspection can catch problems before they become emergencies.</textarea></div>
|
||||
<div class="field"><label>Body</label><textarea style="min-height:180px">Customers often wait too long. Here's what to watch for…
|
||||
|
||||
(Mock editor — production uses a rich text field.)</textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Blog list · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="active" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Blog list</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Client manages drafts and published posts.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Blog posts</h2><a class="btn btn-sm btn-primary" href="portal-blog-edit.html">New post</a></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table"><thead><tr><th>Title</th><th>Date</th><th>Status</th></tr></thead><tbody><tr><td><a href="portal-blog-edit.html">When to schedule an electrical safety inspection</a></td><td>Mar 12, 2026</td><td><span class="badge badge-won">Published</span></td></tr><tr><td><a href="portal-blog-edit.html">Signs your electrical panel needs an upgrade</a></td><td>Feb 28, 2026</td><td><span class="badge badge-draft">Draft</span></td></tr><tr><td><a href="portal-blog-edit.html">Benefits of installing ceiling fans</a></td><td>Jan 15, 2026</td><td><span class="badge badge-draft">Draft</span></td></tr></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Email engagement · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="active" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Email engagement</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Opens, clicks, bounces, unsubscribes per campaign.</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-card"><div class="label">Delivered</div><div class="value">178</div><div class="delta">of 186</div></div>
|
||||
<div class="stat-card"><div class="label">Opens</div><div class="value">64%</div><div class="delta">114 opens</div></div>
|
||||
<div class="stat-card"><div class="label">Clicks</div><div class="value">18%</div><div class="delta">32 clicks</div></div>
|
||||
<div class="stat-card"><div class="label">Unsubscribes</div><div class="value">2</div><div class="delta">1 bounce</div></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Panel safety inspection reminder</h2><span class="badge badge-sent">Sent</span></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Recipient</th><th>Opened</th><th>Clicked</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>jordan@example.com</td><td>Yes</td><td>Yes</td><td>Engaged</td></tr>
|
||||
<tr><td>sam@example.com</td><td>Yes</td><td>—</td><td>Opened</td></tr>
|
||||
<tr><td>avery@example.com</td><td>—</td><td>—</td><td>Delivered</td></tr>
|
||||
<tr><td>bad@example.com</td><td>—</td><td>—</td><td>Bounced</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Campaign composer · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="active" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Campaign composer</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Email, SMS, or postcard — select recipients, schedule, send.</div>
|
||||
|
||||
<div class="channel-tabs">
|
||||
<a class="active" href="#">Email</a>
|
||||
<a href="#">SMS</a>
|
||||
<a href="portal-direct-mail.html">Postcard</a>
|
||||
</div>
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Compose</h2></div>
|
||||
<div class="panel-b">
|
||||
<form class="form-grid">
|
||||
<div class="field"><label>Campaign name</label><input value="Panel safety inspection reminder"></div>
|
||||
<div class="field"><label>Subject</label><input value="A quick note from Happy Hauling Junk Removal"></div>
|
||||
<div class="field"><label>Recipients</label><select><option>All email-consent contacts (186)</option><option>Tagged: customers</option></select></div>
|
||||
<div class="field"><label>Body</label><textarea>Hi {{first_name}},
|
||||
|
||||
Just a friendly reminder we're here when you need us in Chicagoland and local community.
|
||||
|
||||
— Happy Hauling Junk Removal</textarea></div>
|
||||
<div class="field"><label>Send</label><select><option>Schedule for Fri 10:00am</option><option>Send now</option><option>Save draft</option></select></div>
|
||||
<button class="btn btn-primary" type="button">Schedule campaign</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Preview</h2></div>
|
||||
<div class="panel-b" style="background:#f8fafc;min-height:200px;font-size:14px">
|
||||
<strong>Subject:</strong> A quick note from Happy Hauling Junk Removal<br><br>
|
||||
Hi Jordan,<br><br>
|
||||
Just a friendly reminder we're here when you need us in Chicagoland and the local community.<br><br>
|
||||
— Happy Hauling Junk Removal
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Import contacts · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="active" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Import contacts</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> CSV/Excel upload, column mapping, consent defaults, duplicate merge.</div>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step active"><span>1</span> Upload</div>
|
||||
<div class="step"><span>2</span> Map columns</div>
|
||||
<div class="step"><span>3</span> Consent defaults</div>
|
||||
<div class="step"><span>4</span> Review duplicates</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Upload CSV / Excel</h2></div>
|
||||
<div class="panel-b">
|
||||
<div class="dropzone">Drop file here or <strong>browse</strong><div class="muted" style="margin-top:8px">.csv, .xlsx · max 5MB mock</div></div>
|
||||
<p class="hint-block muted" style="margin-top:16px">After upload: map name/email/phone, set default consent, merge duplicates.</p>
|
||||
<a class="btn btn-primary" href="portal-contacts.html" style="margin-top:16px">Continue (mock)</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Mailing list · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="active" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Mailing list</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Contacts with per-channel consent (email / SMS / postcard).</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h">
|
||||
<h2>Mailing list</h2>
|
||||
<div>
|
||||
<a class="btn btn-sm btn-ghost" href="portal-contacts-import.html">Import</a>
|
||||
<a class="btn btn-sm btn-primary" href="portal-campaign.html">New campaign</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Name</th><th>Email</th><th>Email</th><th>SMS</th><th>Postcard</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Jordan Lee</td><td>jordan@example.com</td><td>✓</td><td>✓</td><td>—</td></tr>
|
||||
<tr><td>Sam Ortiz</td><td>sam@example.com</td><td>✓</td><td>—</td><td>✓</td></tr>
|
||||
<tr><td>Avery Chen</td><td>avery@example.com</td><td>✓</td><td>✓</td><td>✓</td></tr>
|
||||
<tr><td>Morgan Diaz</td><td>morgan@example.com</td><td>—</td><td>✓</td><td>✓</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Dashboard · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="active" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Dashboard</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Portal home — glanceable widgets for leads, list health, and scheduled work.</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-card"><div class="label">New leads</div><div class="value">7</div><div class="delta">+3 this week</div></div>
|
||||
<div class="stat-card"><div class="label">Open pipeline</div><div class="value">18</div><div class="delta">4 contacted</div></div>
|
||||
<div class="stat-card"><div class="label">Mailing list</div><div class="value">412</div><div class="delta">8 opted out (30d)</div></div>
|
||||
<div class="stat-card"><div class="label">Open invoices</div><div class="value">2</div><div class="delta">Next due Fri</div></div>
|
||||
</div>
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Recent leads</h2><a class="btn btn-sm btn-ghost" href="portal-leads.html">View all</a></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table"><thead><tr><th>Name</th><th>Source</th><th>Status</th></tr></thead><tbody><tr><td><a href="portal-lead-detail.html">Jordan Lee</a></td><td>google / emergency</td><td><span class="badge badge-new">New</span></td></tr><tr><td><a href="portal-lead-detail.html">Sam Ortiz</a></td><td>facebook / spring-promo</td><td><span class="badge badge-contacted">Contacted</span></td></tr><tr><td><a href="portal-lead-detail.html">Avery Chen</a></td><td>direct / contact-form</td><td><span class="badge badge-new">New</span></td></tr></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Upcoming outreach</h2><a class="btn btn-sm btn-ghost" href="portal-campaign.html">Compose</a></div>
|
||||
<div class="panel-b">
|
||||
<p style="margin:0 0 12px;font-size:14px"><strong>Panel safety inspection reminder</strong> — Email · scheduled Fri 10:00 · 186 recipients</p>
|
||||
<p style="margin:0 0 12px;font-size:14px"><strong>Job reminder SMS</strong> — Draft · 42 recipients</p>
|
||||
<p style="margin:0;font-size:14px"><strong>EV charger promo</strong> — Postcard · queued · 120 pieces</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Direct mail campaign · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="active" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Direct mail campaign</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Recipient selection from contacts with postcard consent; vendor send.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Direct mail campaign</h2><a class="btn btn-sm btn-ghost" href="portal-postcard-designer.html">Edit design</a></div>
|
||||
<div class="panel-b">
|
||||
<form class="form-grid cols-2">
|
||||
<div class="field"><label>Name</label><input value="Neighborhood just listed — March"></div>
|
||||
<div class="field"><label>Piece</label><select><option>Need an EV outlet? (4×6)</option></select></div>
|
||||
<div class="field"><label>Recipients</label><select><option>Postcard-consent contacts (120)</option></select></div>
|
||||
<div class="field"><label>Schedule</label><input type="date" value="2026-03-28"></div>
|
||||
</form>
|
||||
<p class="muted" style="margin:16px 0">Print + postage pass-through billed separately.</p>
|
||||
<button class="btn btn-primary" type="button">Queue for print</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Create invoice · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="active" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Create invoice</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Amount, line items, customer email; pay link via email.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Create invoice</h2></div>
|
||||
<div class="panel-b">
|
||||
<form class="form-grid cols-2">
|
||||
<div class="field"><label>Customer name</label><input value="Jordan Lee"></div>
|
||||
<div class="field"><label>Customer email</label><input type="email" value="jordan@example.com"></div>
|
||||
<div class="field"><label>Line item</label><input value="Service call — diagnosis"></div>
|
||||
<div class="field"><label>Amount</label><input value="480.00"></div>
|
||||
<div class="field" style="grid-column:1/-1"><label>Notes</label><textarea style="min-height:70px">Due on receipt. Pay link emailed via Email add-on.</textarea></div>
|
||||
</form>
|
||||
<p class="muted" style="margin:12px 0">Stripe processing fees billed separately. Email notification requires Email & SMS add-on.</p>
|
||||
<a class="btn btn-primary" href="portal-invoice-detail.html">Create & send</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Invoice detail · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="active" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Invoice detail</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Status and payment history; resend pay link.</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>INV-1042</h2><span class="badge badge-open">Open</span></div>
|
||||
<div class="panel-b">
|
||||
<p><strong>Customer:</strong> Jordan Lee</p>
|
||||
<p><strong>Email:</strong> jordan@example.com</p>
|
||||
<p><strong>Amount:</strong> $480.00</p>
|
||||
<p><strong>Created:</strong> Mar 18, 2026</p>
|
||||
<p><strong>Pay link:</strong> <a href="public-pay.html">public-pay.html</a></p>
|
||||
<button class="btn btn-ghost btn-sm" type="button">Resend email</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Activity</h2></div>
|
||||
<div class="panel-b" style="font-size:14px">
|
||||
<p>Mar 18 · Invoice created</p>
|
||||
<p>Mar 18 · Pay-link email sent</p>
|
||||
<p>Mar 19 · Customer opened email</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Invoices · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="active" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Invoices</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Paid / open / past due. Requires Email & SMS for pay-link notifications.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Invoices</h2><a class="btn btn-sm btn-primary" href="portal-invoice-create.html">Create invoice</a></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table"><thead><tr><th>Number</th><th>Customer</th><th>Amount</th><th>Status</th></tr></thead><tbody><tr><td><a href="portal-invoice-detail.html">INV-1042</a></td><td>Jordan Lee</td><td>$480.00</td><td><span class="badge badge-open">Open</span></td></tr><tr><td><a href="portal-invoice-detail.html">INV-1041</a></td><td>Morgan Diaz</td><td>$1,250.00</td><td><span class="badge badge-paid">Paid</span></td></tr><tr><td><a href="portal-invoice-detail.html">INV-1040</a></td><td>Sam Ortiz</td><td>$320.00</td><td><span class="badge badge-open">Open</span></td></tr></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lead detail · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="active" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Lead detail</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Notes, UTM attribution, linked contact consent.</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Jordan Lee</h2><span class="badge badge-new">New</span></div>
|
||||
<div class="panel-b">
|
||||
<p><strong>Need:</strong> Panel upgrade quote</p>
|
||||
<p><strong>Email:</strong> jordan@example.com</p>
|
||||
<p><strong>Phone:</strong> (224) 622-2526</p>
|
||||
<p><strong>Area:</strong> Chicagoland and the local community</p>
|
||||
<div class="field" style="margin-top:16px">
|
||||
<label>Internal notes</label>
|
||||
<textarea>Called back — scheduling site visit Thursday AM.</textarea>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="button" style="margin-top:12px">Save notes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>UTM attribution</h2></div>
|
||||
<div class="panel-b">
|
||||
<table class="table">
|
||||
<tr><td>Source</td><td><strong>google</strong></td></tr>
|
||||
<tr><td>Medium</td><td>cpc</td></tr>
|
||||
<tr><td>Campaign</td><td>emergency</td></tr>
|
||||
<tr><td>Landing</td><td>/contact.html</td></tr>
|
||||
<tr><td>First touch</td><td>Mar 18, 2026 · 9:14am</td></tr>
|
||||
</table>
|
||||
<p class="muted" style="margin-top:12px">Linked contact consent: email ✓ · SMS ✓ · postcard —</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lead inbox · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="active" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Lead inbox</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Statuses, source attribution, quick filter. Contact form submissions land here.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h">
|
||||
<h2>Lead inbox</h2>
|
||||
<div>
|
||||
<select style="padding:6px 10px;border:1px solid var(--border);font:inherit;margin-right:8px">
|
||||
<option>All statuses</option><option>New</option><option>Contacted</option><option>Won</option>
|
||||
</select>
|
||||
<input placeholder="Filter…" style="padding:6px 10px;border:1px solid var(--border);font:inherit;width:160px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Name</th><th>Source / UTM</th><th>Need</th><th>Status</th></tr></thead>
|
||||
<tbody><tr><td><a href="portal-lead-detail.html">Jordan Lee</a></td><td>google / emergency</td><td>Panel upgrade quote</td><td><span class="badge badge-new">New</span></td></tr><tr><td><a href="portal-lead-detail.html">Sam Ortiz</a></td><td>facebook / spring-promo</td><td>EV charger install</td><td><span class="badge badge-contacted">Contacted</span></td></tr><tr><td><a href="portal-lead-detail.html">Avery Chen</a></td><td>direct / contact-form</td><td>Recessed lighting</td><td><span class="badge badge-new">New</span></td></tr><tr><td><a href="portal-lead-detail.html">Morgan Diaz</a></td><td>postcard / march-mailer</td><td>GFCI / outlet upgrade</td><td><span class="badge badge-won">Won</span></td></tr><tr><td><a href="portal-lead-detail.html">Riley Park</a></td><td>google / brand</td><td>Ceiling fan install</td><td><span class="badge badge-lost">Lost</span></td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Sign in · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="login-wrap">
|
||||
<div class="login-card">
|
||||
<div class="proposal-note" style="margin-bottom:20px"><strong>UX note:</strong> Private client login (Django auth). Not public.</div>
|
||||
<h1>Select Portal</h1>
|
||||
<p class="sub">Happy Hauling Junk Removal · leads, campaigns, and billing in one place.</p>
|
||||
<form class="form-grid" action="portal-dashboard.html" method="get">
|
||||
<div class="field"><label for="email">Email</label><input id="email" type="email" value="select8020@gmail.com"></div>
|
||||
<div class="field"><label for="password">Password</label><input id="password" type="password" value="••••••••"></div>
|
||||
<button class="btn btn-primary" type="submit">Sign in</button>
|
||||
</form>
|
||||
<p style="margin-top:16px;font-size:13px;color:#6b7280"><a href="ux-gallery.html">← Back to proposal gallery</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Postcard designer · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="active" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Postcard designer</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Size picker, reusable media library, live front/back preview.</div>
|
||||
|
||||
<div class="designer-layout">
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Size</h2></div>
|
||||
<div class="panel-b">
|
||||
<div class="size-grid">
|
||||
<button type="button" class="size-option active"><div class="sz-name">4×6</div><div class="muted">Standard</div></button>
|
||||
<button type="button" class="size-option"><div class="sz-name">6×9</div><div class="muted">Large</div></button>
|
||||
<button type="button" class="size-option"><div class="sz-name">6×11</div><div class="muted">Jumbo</div></button>
|
||||
<button type="button" class="size-option"><div class="sz-name">Square</div><div class="muted">6×6</div></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Copy</h2></div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Headline</label><input value="Need an electrician?"></div>
|
||||
<div class="field"><label>Subline</label><input value="Junk removal service · Call or text · (224) 622-2526"></div>
|
||||
<a class="btn btn-primary" href="portal-direct-mail.html">Use in campaign</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Live preview — front</h2></div>
|
||||
<div class="panel-b" style="display:flex;justify-content:center">
|
||||
<div class="postcard">
|
||||
<div class="postcard-media"></div>
|
||||
<div class="postcard-copy">
|
||||
<div class="postcard-headline">Need an electrician?</div>
|
||||
<div class="postcard-sub">Junk removal service · Call or text · (224) 622-2526</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Social accounts · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="active" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Social accounts</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> OAuth connect / reconnect when tokens expire; health + disconnect.</div>
|
||||
|
||||
<div class="connect-grid">
|
||||
<button type="button" class="connect-card">
|
||||
<div class="platform-icon meta">f</div>
|
||||
<div><strong>Facebook Page</strong><p class="muted" style="margin:4px 0 0">Connected · token healthy</p></div>
|
||||
</button>
|
||||
<button type="button" class="connect-card">
|
||||
<div class="platform-icon ig">IG</div>
|
||||
<div><strong>Instagram</strong><p class="muted" style="margin:4px 0 0">Reconnect required · token expired</p></div>
|
||||
</button>
|
||||
<button type="button" class="connect-card">
|
||||
<div class="platform-icon li">in</div>
|
||||
<div><strong>LinkedIn</strong><p class="muted" style="margin:4px 0 0">Not connected · Add via OAuth</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>AI social generator · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="active" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>AI social generator</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Prompt → draft variants → insert into social composer. Ollama local.</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="ai-chat">
|
||||
<div class="ai-chat-h"><h2>AI social generator</h2><span class="ai-pill">Ollama · local</span></div>
|
||||
<div class="ai-messages">
|
||||
<div class="ai-msg bot"><div class="who">Assistant</div><div class="bubble">Describe the post. I'll draft captions you can send to the composer.</div></div>
|
||||
<div class="ai-msg user"><div class="who">You</div><div class="bubble">Spring promo for local customers, friendly, include phone.</div></div>
|
||||
<div class="ai-msg bot"><div class="who">Assistant</div><div class="bubble">Draft A:
|
||||
<div class="ai-draft">Need an EV outlet or panel upgrade? Junk removal service serving Chicagoland homes and businesses.
|
||||
|
||||
Call (224) 622-2526</div>
|
||||
<div style="margin-top:8px"><a class="btn btn-sm btn-primary" href="portal-social.html">Insert into composer</a></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="ai-chat-input">
|
||||
<textarea placeholder="Ask for another tone or length…"></textarea>
|
||||
<button class="btn btn-primary" type="button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>How it works</h2></div>
|
||||
<div class="panel-b" style="font-size:14px">
|
||||
<p>Runs against your <strong>local LLM via Ollama</strong> — no cloud LLM required.</p>
|
||||
<p>Requires <strong>Social consolidation</strong> so drafts hand off to compose → preview → schedule.</p>
|
||||
<p class="muted">Mock only — production streams from your Ollama host.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Social calendar · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose</a>
|
||||
<a class="active" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Social calendar</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Schedule and queue upcoming posts.</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>March 2026</h2><a class="btn btn-sm btn-primary" href="portal-social.html">New post</a></div>
|
||||
<div class="panel-b">
|
||||
<div class="calendar-grid">
|
||||
<div class="dow">Sun</div><div class="dow">Mon</div><div class="dow">Tue</div><div class="dow">Wed</div><div class="dow">Thu</div><div class="dow">Fri</div><div class="dow">Sat</div>
|
||||
<div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day has-post">5<div class="dot"></div></div><div class="day">6</div><div class="day">7</div><div class="day">8</div><div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day has-post">12<div class="dot"></div></div><div class="day">13</div><div class="day">14</div><div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day has-post">18<div class="dot"></div></div><div class="day">19</div><div class="day">20</div><div class="day">21</div><div class="day">22</div><div class="day">23</div><div class="day has-post">24<div class="dot"></div></div><div class="day">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div><div class="day">29</div><div class="day">30</div><div class="day">31</div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div>
|
||||
</div>
|
||||
<p class="muted" style="margin-top:16px">Dots = scheduled posts. Click through to composer in production.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Social composer · Portal · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html">Happy Hauling Junk Removal<span>Client portal</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">UTM analytics</a>
|
||||
<div class="nav-section">Email & SMS</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-campaign-report.html">Engagement</a>
|
||||
<div class="nav-section">Direct mail</div>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<a class="" href="portal-direct-mail.html">Mail campaigns</a>
|
||||
<div class="nav-section">Blog</div>
|
||||
<a class="" href="portal-blog.html">Posts</a>
|
||||
<div class="nav-section">Payments</div>
|
||||
<a class="" href="portal-invoices.html">Invoices</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="active" href="portal-social.html">Compose</a>
|
||||
<a class="" href="portal-social-calendar.html">Calendar</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
<a class="" href="portal-social-ai.html">AI generator</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Social composer</h1>
|
||||
<div class="portal-user">Signed in as <strong>Select Admin</strong> · <a href="portal-login.html">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Compose once; live FB / IG / LinkedIn previews update as you type.</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Compose</h2><a class="btn btn-sm btn-ghost" href="portal-social-ai.html">AI assist</a></div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Networks</label>
|
||||
<div style="display:flex;gap:12px;font-size:14px"><label><input type="checkbox" checked> Facebook</label>
|
||||
<label><input type="checkbox" checked> Instagram</label>
|
||||
<label><input type="checkbox"> LinkedIn</label></div>
|
||||
</div>
|
||||
<div class="field"><label>Caption</label><textarea id="cap">Need an EV outlet or panel upgrade? Junk removal service serving Chicagoland homes and businesses.
|
||||
|
||||
Call (224) 622-2526</textarea></div>
|
||||
<div class="field"><label>Schedule</label><select><option>Post now</option><option>Tomorrow 9:00am</option><option>Add to calendar</option></select></div>
|
||||
<button class="btn btn-primary" type="button">Schedule post</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Facebook preview</h2></div>
|
||||
<div class="panel-b" style="display:flex;justify-content:center">
|
||||
<div class="social-phone">
|
||||
<div class="soc-header">
|
||||
<div class="soc-avatar">E</div>
|
||||
<div><div class="soc-name">Happy Hauling Junk Removal</div><div class="soc-meta">Just now · Public</div></div>
|
||||
</div>
|
||||
<div class="soc-caption">Clearing out clutter? Happy Hauling Junk Removal serves Chicagoland homes and businesses with prompt, transparent estimates.
|
||||
|
||||
Call (224) 622-2526</div>
|
||||
<div class="soc-image"></div>
|
||||
<div class="soc-actions">Like · Comment · Share</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Happy Hauling Junk Removal — Feature pricing</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — pricing picker (not a quote)</div>
|
||||
<div>
|
||||
<a href="ux-gallery.html">All screens</a> ·
|
||||
<a href="index.html">Marketing home</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hub-hero">
|
||||
<h1>Build your package</h1>
|
||||
<p>Base public site + client portal (with UTM) always included. Toggle add-ons to see one-time build and monthly totals. Stripe / SMS / postage usage billed separately.</p>
|
||||
</section>
|
||||
|
||||
<div class="pricing-layout">
|
||||
<div class="price-panel">
|
||||
<h2>Features</h2>
|
||||
|
||||
<div class="feat-row locked">
|
||||
<input type="checkbox" checked disabled id="f-public" data-build="300" data-month="10" data-base>
|
||||
<div class="feat-text">
|
||||
<label for="f-public">Public site</label>
|
||||
<div class="desc">Landing, about, contact (+ your service pages).</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$300</strong> build</div>
|
||||
<div class="amt"><strong>$10</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row locked">
|
||||
<input type="checkbox" checked disabled id="f-portal" data-build="300" data-month="30" data-base>
|
||||
<div class="feat-text">
|
||||
<label for="f-portal">Client portal + UTM</label>
|
||||
<div class="desc">Login, dashboard, leads, UTM analytics — every client.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$300</strong> build</div>
|
||||
<div class="amt"><strong>$30</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-email" data-build="500" data-month="10" checked>
|
||||
<div class="feat-text">
|
||||
<label for="f-email">Email & SMS</label>
|
||||
<div class="desc">Campaigns, mailing list, engagement reports.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$500</strong> build</div>
|
||||
<div class="amt"><strong>$10</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-mail" data-build="500" data-month="5">
|
||||
<div class="feat-text">
|
||||
<label for="f-mail">Direct mail</label>
|
||||
<div class="desc">Postcard designer + print/send. Postage separate.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$500</strong> build</div>
|
||||
<div class="amt"><strong>$5</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-blog" data-build="500" data-month="10">
|
||||
<div class="feat-text">
|
||||
<label for="f-blog">Blog</label>
|
||||
<div class="desc">Public blog + portal post management.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$500</strong> build</div>
|
||||
<div class="amt"><strong>$10</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-pay" data-build="500" data-month="20" data-requires="f-email" checked>
|
||||
<div class="feat-text">
|
||||
<label for="f-pay">Payments (Stripe)</label>
|
||||
<div class="desc">Invoices + pay links. Requires Email & SMS.</div>
|
||||
<div class="dep-note" id="dep-pay" hidden>Requires Email & SMS — auto-selected.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$500</strong> build</div>
|
||||
<div class="amt"><strong>$20</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-social" data-build="500" data-month="20">
|
||||
<div class="feat-text">
|
||||
<label for="f-social">Social consolidation</label>
|
||||
<div class="desc">Accounts, composer, scheduling.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$500</strong> build</div>
|
||||
<div class="amt"><strong>$20</strong> /mo</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-row">
|
||||
<input type="checkbox" id="f-ai" data-build="300" data-month="20" data-requires="f-social">
|
||||
<div class="feat-text">
|
||||
<label for="f-ai">AI social generator</label>
|
||||
<div class="desc">Ollama drafts. Requires Social consolidation.</div>
|
||||
<div class="dep-note" id="dep-ai" hidden>Requires Social — auto-selected.</div>
|
||||
</div>
|
||||
<div class="amt"><strong>$300</strong> build</div>
|
||||
<div class="amt"><strong>$20</strong> /mo</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="price-summary">
|
||||
<h2>Estimate</h2>
|
||||
<div class="line"><span>One-time build</span><strong id="sum-build">$0</strong></div>
|
||||
<div class="line"><span>Monthly</span><strong id="sum-month">$0</strong></div>
|
||||
<div class="line total"><span>Selected</span><span id="sum-count">0 features</span></div>
|
||||
<p class="disclaimer">Draft catalog pricing from platform <code>features.md</code>. Not a formal quote. Third-party usage (Stripe fees, SMS, postage) not included.</p>
|
||||
<p class="disclaimer"><a href="ux-gallery.html">← Back to UX gallery</a></p>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const boxes = [...document.querySelectorAll('.price-panel input[type=checkbox]')];
|
||||
const sumBuild = document.getElementById('sum-build');
|
||||
const sumMonth = document.getElementById('sum-month');
|
||||
const sumCount = document.getElementById('sum-count');
|
||||
|
||||
function enforceDeps(changed) {
|
||||
const pay = document.getElementById('f-pay');
|
||||
const email = document.getElementById('f-email');
|
||||
const ai = document.getElementById('f-ai');
|
||||
const social = document.getElementById('f-social');
|
||||
const depPay = document.getElementById('dep-pay');
|
||||
const depAi = document.getElementById('dep-ai');
|
||||
|
||||
if (pay.checked && !email.checked) {
|
||||
email.checked = true;
|
||||
depPay.hidden = false;
|
||||
} else if (!pay.checked) {
|
||||
depPay.hidden = true;
|
||||
}
|
||||
|
||||
if (ai.checked && !social.checked) {
|
||||
social.checked = true;
|
||||
depAi.hidden = false;
|
||||
} else if (!ai.checked) {
|
||||
depAi.hidden = true;
|
||||
}
|
||||
|
||||
if (changed === email && !email.checked && pay.checked) {
|
||||
pay.checked = false;
|
||||
depPay.hidden = true;
|
||||
}
|
||||
if (changed === social && !social.checked && ai.checked) {
|
||||
ai.checked = false;
|
||||
depAi.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
function totals() {
|
||||
let build = 0, month = 0, n = 0;
|
||||
boxes.forEach((el) => {
|
||||
if (!el.checked) return;
|
||||
build += Number(el.dataset.build || 0);
|
||||
month += Number(el.dataset.month || 0);
|
||||
n += 1;
|
||||
});
|
||||
sumBuild.textContent = '$' + build.toLocaleString();
|
||||
sumMonth.textContent = '$' + month.toLocaleString();
|
||||
sumCount.textContent = n + (n === 1 ? ' feature' : ' features');
|
||||
}
|
||||
|
||||
boxes.forEach((el) => {
|
||||
el.addEventListener('change', () => {
|
||||
enforceDeps(el);
|
||||
totals();
|
||||
});
|
||||
});
|
||||
enforceDeps(null);
|
||||
totals();
|
||||
})();
|
||||
</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>
|
||||
@@ -0,0 +1,438 @@
|
||||
<!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>Privacy Policy – Happy Hauling Junk Removal Junk Removal</title>
|
||||
<meta name="description" content="Learn how Happy Hauling Junk Removal collects, uses, and protects your personal information. Your privacy is important to us." />
|
||||
<meta property="og:title" content="Privacy Policy – Happy Hauling Junk Removal Junk Removal" />
|
||||
<meta property="og:description" content="Learn how Happy Hauling Junk Removal 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">
|
||||
<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 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">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">
|
||||
<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 Happy Hauling Junk Removal, 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:+12246222526" class="text-brand hover:underline">(224) 622-2526</a></li>
|
||||
<li><strong>Phone / text:</strong> <a href="tel:+12246222526" class="text-brand hover:underline">(224) 622-2526</a></li>
|
||||
<li><strong>Service area:</strong> Serving Chicagoland and the local community.</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:+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();
|
||||
|
||||
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>
|
||||
<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>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>404 · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<header class="public-nav">
|
||||
<a class="brand brand-logo-link" href="index.html"><img src="assets/images/dustbin.png" alt="Happy Hauling Junk Removal" class="brand-logo brand-logo--hub"></a>
|
||||
<div class="links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html#about">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="public-blog.html">Blog</a>
|
||||
<a href="portal-login.html">Portal</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="public-simple">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Branded error page with path home or to contact.</div>
|
||||
|
||||
<div class="error-hero">
|
||||
<h1>404</h1>
|
||||
<p style="font-size:18px">Page not found</p>
|
||||
<p class="muted">That URL doesn't exist on Happy Hauling Junk Removal.</p>
|
||||
<p style="margin-top:24px">
|
||||
<a class="btn btn-primary" href="index.html">Go home</a>
|
||||
<a class="btn btn-ghost" href="index.html#contact" style="margin-left:8px">Contact</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>When to schedule an electrical safety inspection · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<header class="public-nav">
|
||||
<a class="brand brand-logo-link" href="index.html"><img src="assets/images/dustbin.png" alt="Happy Hauling Junk Removal" class="brand-logo brand-logo--hub"></a>
|
||||
<div class="links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html#about">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="public-blog.html">Blog</a>
|
||||
<a href="portal-login.html">Portal</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="public-simple">
|
||||
|
||||
|
||||
<p class="muted">Mar 12, 2026 · <a href="public-blog.html">All posts</a></p>
|
||||
<h1 style="font-family:var(--display);margin:8px 0 16px">When to schedule an electrical safety inspection</h1>
|
||||
<div class="card" style="font-size:15px;line-height:1.6">
|
||||
<p>How a safety inspection can catch problems before they become emergencies.</p>
|
||||
<p>This is a mock article body for the proposal. In production, posts are managed from the client portal blog editor and rendered on the public site.</p>
|
||||
<p><a href="index.html#contact">Contact Happy Hauling Junk Removal</a> if you need help sooner.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Blog · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<header class="public-nav">
|
||||
<a class="brand brand-logo-link" href="index.html"><img src="assets/images/dustbin.png" alt="Happy Hauling Junk Removal" class="brand-logo brand-logo--hub"></a>
|
||||
<div class="links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html#about">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="public-blog.html">Blog</a>
|
||||
<a href="portal-login.html">Portal</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="public-simple">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Public readers view posts; client manages them in the portal.</div>
|
||||
<h1 style="font-family:var(--display);margin:0 0 8px">Blog</h1><p class="muted" style="margin:0 0 24px;font-size:14px">Tips from Happy Hauling Junk Removal</p><div class="blog-list"><a class="blog-item" href="public-blog-post.html"><div class="meta">Mar 12, 2026</div><h3>When to schedule an electrical safety inspection</h3><p>How a safety inspection can catch problems before they become emergencies.</p></a><a class="blog-item" href="public-blog-post.html"><div class="meta">Feb 28, 2026</div><h3>Signs your electrical panel needs an upgrade</h3><p>Breakers tripping, outdated fuse boxes, and when to call a licensed electrician.</p></a><a class="blog-item" href="public-blog-post.html"><div class="meta">Jan 15, 2026</div><h3>Benefits of installing ceiling fans</h3><p>Lower utility bills and better airflow — installed to code.</p></a></div>
|
||||
</div>
|
||||
<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>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Pay invoice · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
|
||||
<div class="pay-box">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Stripe Checkout (hosted). Email add-on delivered this link.</div>
|
||||
<p class="muted">Invoice INV-1042 · Jordan Lee</p>
|
||||
<h1>Pay Happy Hauling Junk Removal</h1>
|
||||
<div class="pay-amount">$480.00</div>
|
||||
<p style="font-size:14px;color:var(--muted)">Secure payment via Stripe. Card details never touch our servers in this mock.</p>
|
||||
<button class="btn btn-primary" type="button" style="width:100%;margin-top:16px" onclick="alert('Mock only — Stripe Checkout in production.')">Pay with card</button>
|
||||
<p class="muted" style="margin-top:16px;text-align:center"><a href="index.html">Back to site</a></p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Under construction · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<header class="public-nav">
|
||||
<a class="brand brand-logo-link" href="index.html"><img src="assets/images/dustbin.png" alt="Happy Hauling Junk Removal" class="brand-logo brand-logo--hub"></a>
|
||||
<div class="links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html#about">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="public-blog.html">Blog</a>
|
||||
<a href="portal-login.html">Portal</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="public-simple">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Pre-launch / maintenance holding page with notify-me email.</div>
|
||||
|
||||
<div class="card" style="text-align:center;padding:48px 32px">
|
||||
<h1 style="font-family:var(--display);margin:0 0 12px">Under construction</h1>
|
||||
<p style="color:var(--muted)">We're finishing something new for Happy Hauling Junk Removal. Leave your email and we'll notify you.</p>
|
||||
<form class="form-grid" style="max-width:360px;margin:24px auto 0" onsubmit="alert('Mock notify-me only');return false;">
|
||||
<div class="field"><input type="email" placeholder="you@example.com" required></div>
|
||||
<button class="btn btn-primary" type="submit">Notify me</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Unsubscribe · Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div><a href="ux-gallery.html">All screens</a> · <a href="pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<header class="public-nav">
|
||||
<a class="brand brand-logo-link" href="index.html"><img src="assets/images/dustbin.png" alt="Happy Hauling Junk Removal" class="brand-logo brand-logo--hub"></a>
|
||||
<div class="links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="index.html#about">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="public-blog.html">Blog</a>
|
||||
<a href="portal-login.html">Portal</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="public-simple">
|
||||
<div class="proposal-note"><strong>UX note:</strong> One-click email unsubscribe and per-channel preference.</div>
|
||||
|
||||
<div class="card">
|
||||
<h1 style="font-family:var(--display);margin:0 0 8px">Email preferences</h1>
|
||||
<p class="muted" style="font-size:14px;margin:0 0 20px">Manage how Happy Hauling Junk Removal contacts you.</p>
|
||||
<form class="form-grid">
|
||||
<div class="field"><label><input type="checkbox"> Marketing email</label></div>
|
||||
<div class="field"><label><input type="checkbox" checked> Transactional / job updates</label></div>
|
||||
<div class="field"><label><input type="checkbox"> SMS</label></div>
|
||||
<div class="field"><label><input type="checkbox"> Postcard mail</label></div>
|
||||
<button class="btn btn-primary" type="button">Save preferences</button>
|
||||
</form>
|
||||
<p class="muted" style="margin-top:16px"><a href="#">Unsubscribe from all marketing</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
@@ -0,0 +1,561 @@
|
||||
<!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>Our Services – Happy Hauling Junk Removal 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 – Happy Hauling Junk Removal 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">
|
||||
<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 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">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-brand font-semibold transition-colors border-b-2 border-brand">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="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="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">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, Happy Hauling Junk Removal 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 Happy Hauling Junk Removal 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">Clear, Upfront Service</h3><p class="text-sm text-muted-foreground">Transparent, no-obligation estimates with no hidden fees.</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:+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 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();
|
||||
|
||||
// ===== 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>
|
||||
<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>
|
||||
@@ -0,0 +1,569 @@
|
||||
<!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>Our Services – Happy Hauling Junk Removal 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 – Happy Hauling Junk Removal 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">
|
||||
<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 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">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-brand font-semibold transition-colors border-b-2 border-brand">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="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="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">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, Happy Hauling Junk Removal 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>
|
||||
|
||||
|
||||
<section class="section-padding bg-muted">
|
||||
<div class="container-main max-w-5xl mx-auto">
|
||||
<div class="text-center mb-10"><p class="text-brand font-semibold text-sm uppercase tracking-wider">What we haul</p><h2 class="mt-2 text-3xl md:text-4xl font-bold">Happy Hauling services</h2><p class="mt-4 text-muted-foreground">Call or text for a no-obligation estimate. We recycle or donate when possible.</p></div>
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3 text-sm text-foreground">
|
||||
<p>Furniture Removal</p><p>Storage Unit Cleanout</p><p>Estate Cleanout</p><p>Tire Disposal</p><p>Mattress Removal</p><p>Commercial Services</p><p>Household Chemical Disposal</p><p>Hot Tub Pickup & Removal</p><p>Appliance Removal</p><p>Garbage & Recycling Removal</p><p>Post-Construction Cleanup</p><p>Yard Debris Cleanup</p><p>Christmas Tree Removal</p><p>Exercise Equipment Removal</p><p>Storm Debris Removal</p>
|
||||
</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 Happy Hauling Junk Removal 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">Prompt & Efficient Service</h3><p class="text-sm text-muted-foreground">We work to make each haul straightforward, prompt, and efficient.</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">No Hidden Fees</h3><p class="text-sm text-muted-foreground">Clear, no-obligation estimates help you know what to expect before we haul.</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:+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 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>No Hidden Fees</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();
|
||||
|
||||
// ===== 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>
|
||||
<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>
|
||||
@@ -0,0 +1,437 @@
|
||||
<!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>Terms and Conditions – Happy Hauling Junk Removal Junk Removal</title>
|
||||
<meta name="description" content="Read the terms and conditions for Happy Hauling Junk Removal junk removal services. Understand our policies, pricing, and liability." />
|
||||
<meta property="og:title" content="Terms and Conditions – Happy Hauling Junk Removal Junk Removal" />
|
||||
<meta property="og:description" content="Read the terms and conditions for Happy Hauling Junk Removal 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">
|
||||
<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 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">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">
|
||||
<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 Happy Hauling Junk Removal. 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>Happy Hauling Junk Removal 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>Happy Hauling Junk Removal 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 Happy Hauling Junk Removal website, including logos, text, images, and design, is the property of Happy Hauling Junk Removal 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:+12246222526" class="text-brand hover:underline">(224) 622-2526</a></li>
|
||||
<li><strong>Phone / text:</strong> <a href="tel:+12246222526" class="text-brand hover:underline">(224) 622-2526</a></li>
|
||||
<li><strong>Service area:</strong> Serving Chicagoland and the local community.</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:+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();
|
||||
|
||||
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>
|
||||
<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>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Happy Hauling Junk Removal — UX proposal gallery</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body class="hub-page">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Happy Hauling Junk Removal — UX examples (not production)</div>
|
||||
<div>
|
||||
<a href="pricing.html">Pricing picker</a> ·
|
||||
<a href="index.html">Marketing home</a> ·
|
||||
<a href="ux-gallery.html">All screens</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hub-hero">
|
||||
<h1>Happy Hauling Junk Removal — UX proposal</h1>
|
||||
<p>Click-through mocks for the public marketing site and Django client portal: leads, UTM analytics, and optional add-ons (email/SMS, direct mail, blog, Stripe payments, social, AI social).</p>
|
||||
</section>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Proposal</h2>
|
||||
<p class="sec-lead">Scope and interactive estimate.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="pricing.html">
|
||||
<div class="eyebrow">Proposal · Pricing</div>
|
||||
<h3>Feature pricing</h3>
|
||||
<p>Toggle add-ons; live build + monthly totals. Dependencies enforced.</p>
|
||||
<span class="status">Ready</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Public site · base</h2>
|
||||
<p class="sec-lead">What visitors see.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="index.html"><div class="eyebrow">Public · base</div><h3>Marketing home</h3><p>Happy Hauling overview, services, and phone-first CTA.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="about.html"><div class="eyebrow">Public · base</div><h3>About</h3><p>Values, recycling, and donation approach.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="services.html"><div class="eyebrow">Public · extras</div><h3>Services</h3><p>Residential, commercial, cleanouts, debris, and more.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="contact.html"><div class="eyebrow">Public · base</div><h3>Contact</h3><p>Phone-first quote request.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="service-rates.html"><div class="eyebrow">Public · extras</div><h3>Service rates</h3><p>Haul pricing and estimate details.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="public-404.html"><div class="eyebrow">Public · system</div><h3>404 not found</h3><p>Branded error page.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="public-under-construction.html"><div class="eyebrow">Public · system</div><h3>Under construction</h3><p>Pre-launch holding page.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Client portal · base (+ UTM)</h2>
|
||||
<p class="sec-lead">Private Django UI. UTM tracking included with every portal.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="portal-login.html"><div class="eyebrow">Portal · base</div><h3>Login</h3><p>Client authentication.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-dashboard.html"><div class="eyebrow">Portal · base</div><h3>Dashboard</h3><p>New leads, campaign health, add-on widgets.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-leads.html"><div class="eyebrow">Portal · base</div><h3>Lead inbox</h3><p>Statuses, source attribution, filters.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-lead-detail.html"><div class="eyebrow">Portal · base</div><h3>Lead detail</h3><p>Notes, UTM, linked contact.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-analytics.html"><div class="eyebrow">Portal · base</div><h3>UTM analytics</h3><p>Leads by source/campaign over time.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Email & SMS</h2>
|
||||
<p class="sec-lead">Add-on. Required for payment notifications.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="portal-contacts.html"><div class="eyebrow">Portal · Email/SMS</div><h3>Mailing list</h3><p>Contacts with per-channel consent.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-contacts-import.html"><div class="eyebrow">Portal · Email/SMS</div><h3>Import contacts</h3><p>CSV upload, mapping, consent defaults.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-campaign.html"><div class="eyebrow">Portal · Email/SMS</div><h3>Campaign composer</h3><p>Email or SMS — recipients, schedule, send.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-campaign-report.html"><div class="eyebrow">Portal · Email/SMS</div><h3>Email engagement</h3><p>Opens, clicks, bounces, unsubscribes.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="public-unsubscribe.html"><div class="eyebrow">Public · Email/SMS</div><h3>Opt-out / unsubscribe</h3><p>One-click and per-channel preference.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Direct mail</h2>
|
||||
<p class="sec-lead">Add-on. Postcards / print vendor handoff.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="portal-postcard-designer.html"><div class="eyebrow">Portal · Direct mail</div><h3>Postcard designer</h3><p>Sizes, media library, front/back preview.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-direct-mail.html"><div class="eyebrow">Portal · Direct mail</div><h3>Direct mail campaign</h3><p>Recipients, schedule, send.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Blog</h2>
|
||||
<p class="sec-lead">Add-on. Public posts + portal management.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="public-blog.html"><div class="eyebrow">Public · Blog</div><h3>Blog index</h3><p>Public post listing.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="public-blog-post.html"><div class="eyebrow">Public · Blog</div><h3>Blog post</h3><p>Single article view.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-blog.html"><div class="eyebrow">Portal · Blog</div><h3>Blog list</h3><p>Draft / published management.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-blog-edit.html"><div class="eyebrow">Portal · Blog</div><h3>Blog editor</h3><p>Create and edit posts.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Payments (Stripe)</h2>
|
||||
<p class="sec-lead">Add-on. Requires Email & SMS.</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="portal-invoices.html"><div class="eyebrow">Portal · Payments</div><h3>Invoices</h3><p>Open / paid / past due list.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-invoice-create.html"><div class="eyebrow">Portal · Payments</div><h3>Create invoice</h3><p>Line items, customer email, send.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-invoice-detail.html"><div class="eyebrow">Portal · Payments</div><h3>Invoice detail</h3><p>Status and payment history.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="public-pay.html"><div class="eyebrow">Public · Payments</div><h3>Pay invoice</h3><p>Stripe checkout / confirmation.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
|
||||
<div class="hub-section">
|
||||
<h2>Social & AI social</h2>
|
||||
<p class="sec-lead">Add-ons. AI generator requires social consolidation (Ollama).</p>
|
||||
</div>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="portal-social-accounts.html"><div class="eyebrow">Portal · Social</div><h3>Social accounts</h3><p>OAuth connect, health, disconnect.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-social.html"><div class="eyebrow">Portal · Social</div><h3>Social composer</h3><p>Live FB / IG / LinkedIn previews.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-social-calendar.html"><div class="eyebrow">Portal · Social</div><h3>Social calendar</h3><p>Schedule and queue.</p><span class="status">Ready</span></a>
|
||||
<a class="hub-card" href="portal-social-ai.html"><div class="eyebrow">Portal · AI Social</div><h3>AI social generator</h3><p>Ollama drafts → insert into composer.</p><span class="status">Ready</span></a>
|
||||
</div>
|
||||
<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>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Planned UX screen — Happy Hauling Junk Removal</title>
|
||||
<link rel="stylesheet" href="assets/css/ux-hub.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> Screen planned — not designed yet</div>
|
||||
<div><a href="ux-gallery.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="stub-page">
|
||||
<div class="stub-card">
|
||||
<div class="eyebrow" id="eyebrow" style="font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#1a4f6e;font-weight:600;margin-bottom:8px">Portal</div>
|
||||
<h1 id="title">Planned screen</h1>
|
||||
<p id="desc">This feature screen is scoped in the proposal but not mocked yet. Public marketing pages are ready; portal and add-on UIs come next.</p>
|
||||
<a class="btn" href="ux-gallery.html">Back to gallery</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const catalog = {
|
||||
'public-404': { eyebrow: 'Public · system', title: '404 not found', desc: 'Branded error page with paths home or to contact.' },
|
||||
'portal-login': { eyebrow: 'Portal · base', title: 'Login', desc: 'Private client authentication for the Django portal.' },
|
||||
'portal-dashboard': { eyebrow: 'Portal · base', title: 'Dashboard', desc: 'Home widgets: new leads, campaign health, scheduled activity.' },
|
||||
'portal-leads': { eyebrow: 'Portal · base', title: 'Lead inbox', desc: 'Statuses, source attribution, quick filter.' },
|
||||
'portal-lead-detail': { eyebrow: 'Portal · base', title: 'Lead detail', desc: 'Notes, UTM attribution, linked contact consent.' },
|
||||
'portal-analytics': { eyebrow: 'Portal · base', title: 'UTM analytics', desc: 'Leads by source/campaign over time — included with every portal.' },
|
||||
'portal-contacts': { eyebrow: 'Portal · Email/SMS', title: 'Mailing list', desc: 'Contacts with per-channel consent (email / SMS / postcard).' },
|
||||
'portal-contacts-import': { eyebrow: 'Portal · Email/SMS', title: 'Import contacts', desc: 'CSV/Excel upload, column mapping, consent defaults.' },
|
||||
'portal-campaign': { eyebrow: 'Portal · Email/SMS', title: 'Campaign composer', desc: 'Email or SMS — select recipients, schedule, send.' },
|
||||
'portal-campaign-report': { eyebrow: 'Portal · Email/SMS', title: 'Email engagement', desc: 'Opens, clicks, bounces, unsubscribes per campaign.' },
|
||||
'public-unsubscribe': { eyebrow: 'Public · Email/SMS', title: 'Opt-out / unsubscribe', desc: 'One-click email unsubscribe and per-channel preference.' },
|
||||
'portal-postcard-designer': { eyebrow: 'Portal · Direct mail', title: 'Postcard designer', desc: 'Size picker, media library, live front/back preview.' },
|
||||
'portal-direct-mail': { eyebrow: 'Portal · Direct mail', title: 'Direct mail campaign', desc: 'Recipients, schedule, vendor send.' },
|
||||
'public-blog': { eyebrow: 'Public · Blog', title: 'Blog index', desc: 'Public listing of posts.' },
|
||||
'public-blog-post': { eyebrow: 'Public · Blog', title: 'Blog post', desc: 'Single article view.' },
|
||||
'portal-blog': { eyebrow: 'Portal · Blog', title: 'Blog list', desc: 'Draft and published post management.' },
|
||||
'portal-blog-edit': { eyebrow: 'Portal · Blog', title: 'Blog editor', desc: 'Create and edit posts.' },
|
||||
'portal-invoices': { eyebrow: 'Portal · Payments', title: 'Invoices', desc: 'Invoice list with payment status.' },
|
||||
'portal-invoice-create': { eyebrow: 'Portal · Payments', title: 'Create invoice', desc: 'Line items, customer email, send pay link.' },
|
||||
'portal-invoice-detail': { eyebrow: 'Portal · Payments', title: 'Invoice detail', desc: 'Status, history, resend.' },
|
||||
'public-pay': { eyebrow: 'Public · Payments', title: 'Pay invoice', desc: 'Stripe checkout and confirmation states.' },
|
||||
'portal-social-accounts': { eyebrow: 'Portal · Social', title: 'Social accounts', desc: 'OAuth connect, reconnect, disconnect.' },
|
||||
'portal-social': { eyebrow: 'Portal · Social', title: 'Social composer', desc: 'Compose with live network previews.' },
|
||||
'portal-social-calendar': { eyebrow: 'Portal · Social', title: 'Social calendar', desc: 'Schedule and upcoming posts.' },
|
||||
'portal-social-ai': { eyebrow: 'Portal · AI Social', title: 'AI social generator', desc: 'Ollama prompt → draft → hand off to composer.' }
|
||||
};
|
||||
const key = new URLSearchParams(location.search).get('p') || '';
|
||||
const item = catalog[key];
|
||||
if (item) {
|
||||
document.getElementById('eyebrow').textContent = item.eyebrow;
|
||||
document.getElementById('title').textContent = item.title;
|
||||
document.getElementById('desc').textContent = item.desc;
|
||||
document.title = item.title + " — planned UX";
|
||||
}
|
||||
</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>
|
||||
@@ -0,0 +1,28 @@
|
||||
# Happy Hauling Junk Removal — Notes
|
||||
|
||||
## Client facts
|
||||
|
||||
- **Business:** Happy Hauling Junk Removal
|
||||
- **Phone / text:** (224) 622-2526
|
||||
- **Email:** _TBD_
|
||||
- **Address:** Not provided; the preview says only that the business serves Chicagoland / the local community.
|
||||
- **Current site:** https://happyhaul.carrd.co/
|
||||
- **Preview:** https://happy-hauling-junk-removal-preview.aimloperations.com/
|
||||
- **Tagline direction:** “We make your junk our joy!”
|
||||
|
||||
## Confirmed service direction
|
||||
|
||||
Residential and commercial hauling; furniture, storage unit and estate cleanouts, tires, mattresses, appliances, hot tubs, household chemicals, garbage/recycling, post-construction, yard and storm debris, Christmas trees, and exercise equipment. Recycling or donation is preferred when possible.
|
||||
|
||||
## Preview sitemap
|
||||
|
||||
- Public: home, about, services, contact, service rates, FAQ, blog, blog detail, privacy, terms, 404, under construction
|
||||
- Proposal: UX gallery and feature-pricing picker
|
||||
- Portal: base portal + mock screens for catalog add-ons
|
||||
|
||||
## Follow-up before launch
|
||||
|
||||
- Confirm service-area wording and operating hours.
|
||||
- Supply public email, approved images, and verified customer reviews if desired.
|
||||
- Confirm any prohibited items, rate structure, and booking/estimate workflow.
|
||||
- Keep this preview concept-labeled until the live site is approved.
|
||||
@@ -0,0 +1,42 @@
|
||||
# Happy Hauling Junk Removal — Draft Scope
|
||||
|
||||
## Recommended package
|
||||
|
||||
Base platform is always included:
|
||||
|
||||
| Feature | Build | Monthly |
|
||||
|---|---:|---:|
|
||||
| Public site | $300 | $10 |
|
||||
| Client portal + UTM | $300 | $30 |
|
||||
|
||||
Recommended add-ons:
|
||||
|
||||
| Feature | Why | Build | Monthly |
|
||||
|---|---|---:|---:|
|
||||
| Email & SMS | Estimate follow-up, quote and appointment communication | $500 | $10 |
|
||||
| Payments (Stripe) | Create haul invoices and send payment links | $500 | $20 |
|
||||
|
||||
Payments requires Email & SMS, included above.
|
||||
|
||||
## Draft totals
|
||||
|
||||
| Total | One-time build | Monthly |
|
||||
|---|---:|---:|
|
||||
| Base + recommended add-ons | **$1,600** | **$70** |
|
||||
|
||||
Catalog amounts are draft placeholders from `features.md`, not a formal quote. Stripe processing fees, SMS segments, and email send costs are separate usage charges.
|
||||
|
||||
## Optional add-on
|
||||
|
||||
| Feature | Why | Build | Monthly |
|
||||
|---|---|---:|---:|
|
||||
| Social consolidation | Consolidate and schedule social presence; useful for maintaining the existing Yelp-facing reputation and future social channels | $500 | $20 |
|
||||
|
||||
If added, total becomes **$2,100 build** and **$90/month**. AI social generator is not recommended at this stage; if selected later, it requires Social consolidation.
|
||||
|
||||
## Included screens
|
||||
|
||||
- Public marketing site, lead form, service pages, and system pages
|
||||
- Client login, dashboard, leads, lead detail, and UTM analytics
|
||||
- Email/SMS contact list, import, campaign, engagement, and unsubscribe screens
|
||||
- Invoice list, creation, detail, and public payment screens
|
||||
Reference in New Issue
Block a user