added more preview pages and more templates
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user