Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 10a24a3def | |||
| 9e4ceed542 | |||
| e70f1fb008 | |||
| 60bee6db66 |
303
src/app/page.tsx
303
src/app/page.tsx
@@ -3,17 +3,13 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Facebook, Instagram, ShieldCheck, Twitter } from "lucide-react";
|
||||
import { Facebook, Instagram, ShieldCheck } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -30,223 +26,98 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Clog Busters"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Overview", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Clog Busters"
|
||||
button={{ text: "Get Help", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Fast, Reliable Plumbing Solutions for Your Home."
|
||||
description="Clog Busters provides expert drain cleaning and plumbing repairs 24/7. Get your home flowing again with our certified professionals."
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721545.jpg", imageAlt: "Professional plumber inspecting pipes"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-adjusting-water-tap-with-wrench_259150-58269.jpg", imageAlt: "Plumbing tools and service"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coveralls-digitally-generated-car-cardboard-box-pointing_1134-941.jpg", imageAlt: "Expert plumber technician"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-cleaning-home_23-2150453313.jpg", imageAlt: "Professional plumbing service"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feathers-falling-from-orange-plastic-glasses-against-blue-backdrop_23-2148051905.jpg", imageAlt: "Drain inspection tools"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Clog Busters: Expert Plumbing, 24/7 Service"
|
||||
description="Professional drain cleaning, leak repairs, and emergency plumbing solutions when you need them most."
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721545.jpg", imageAlt: "Professional plumber" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-adjusting-water-tap-with-wrench_259150-58269.jpg", imageAlt: "Repairing faucet" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-cleaning-home_23-2150453313.jpg", imageAlt: "Drain inspection" },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="About Us"
|
||||
title="Your Trusted Plumbing Experts"
|
||||
description="At Clog Busters, we understand that plumbing emergencies are stressful. Our dedicated team of licensed professionals is committed to delivering quality, fast, and transparent plumbing services to every client."
|
||||
subdescription="With over 15 years in the industry, we pride ourselves on honesty, punctuality, and excellence in every job we take."
|
||||
icon={ShieldCheck}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367548.jpg"
|
||||
imageAlt="Our lead technician"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
tag="Overview"
|
||||
title="Professional Plumbing You Can Rely On"
|
||||
description="For years, Clog Busters has been the go-to partner for homeowners needing fast, effective, and reliable plumbing support. Our 24/7 availability ensures that when disaster strikes, we are only a call away."
|
||||
subdescription="We combine modern technology with expert techniques to provide long-lasting repairs for every client."
|
||||
icon={ShieldCheck}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367548.jpg"
|
||||
imageAlt="Our team"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="Complete Plumbing Services"
|
||||
description="From minor clogs to full-scale pipe replacement, Clog Busters covers all your plumbing needs with precision."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "f1", title: "Drain Cleaning", content: "Professional-grade drain clearing for sinks, showers, and toilets."},
|
||||
{
|
||||
id: "f2", title: "Pipe Repair", content: "Leak detection and repair using non-invasive technologies."},
|
||||
{
|
||||
id: "f3", title: "Water Heater Maintenance", content: "Complete water heater repair, replacement, and installation."},
|
||||
{
|
||||
id: "f4", title: "Emergency Services", content: "24/7 rapid response for your most urgent plumbing problems."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/plumber-doing-victory-gesture_1368-6312.jpg"
|
||||
imageAlt="Plumbing tools"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
title="Our Core Services"
|
||||
description="Comprehensive plumbing services to keep your home systems running smoothly."
|
||||
accordionItems={[
|
||||
{ id: "s1", title: "Drain Cleaning", content: "Advanced clearing for any blockage type." },
|
||||
{ id: "s2", title: "24/7 Emergency Repairs", content: "Fast response times to minimize damage." },
|
||||
{ id: "s3", title: "Leak Detection", content: "Accurate diagnosis of hidden leaks." },
|
||||
{ id: "s4", title: "Fixture Installation", content: "Professional setup of sinks, faucets, and more." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/plumber-doing-victory-gesture_1368-6312.jpg"
|
||||
imageAlt="Plumbing services"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic", badge: "Standard", price: "$99", subtitle: "For simple drain clearing", buttons: [
|
||||
{
|
||||
text: "Book Now", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Drain snaking", "Visual inspection", "30-day warranty"],
|
||||
},
|
||||
{
|
||||
id: "pro", badge: "Popular", price: "$199", subtitle: "Comprehensive plumbing check", buttons: [
|
||||
{
|
||||
text: "Book Now", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Pipe hydro-jetting", "Complete leak audit", "60-day warranty"],
|
||||
},
|
||||
{
|
||||
id: "elite", badge: "Pro", price: "$349", subtitle: "Major repair solutions", buttons: [
|
||||
{
|
||||
text: "Book Now", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Deep pipe cleaning", "Advanced camera inspection", "1-year warranty"],
|
||||
},
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
description="Simple, upfront pricing with no hidden costs."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="What Our Customers Say"
|
||||
description="Consistently rated high for our fast response and professional quality."
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", date: "Recent", title: "Fast Arrival", quote: "Clog Busters came out on a holiday to fix my sink. Incredible service!", tag: "Emergency", avatarSrc: "http://img.b2bpic.net/free-photo/serious-african-man-looking_171337-9848.jpg" },
|
||||
{ id: "t2", name: "Mike D.", date: "Recent", title: "Professional", quote: "Really knowledgeable about my pipe issue and left everything clean.", tag: "Maintenance", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-afro-hairstyle_23-2150677136.jpg" },
|
||||
]}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "15,000+", title: "Happy Customers", description: "Served homes across the region.", imageSrc: "http://img.b2bpic.net/free-photo/event-smiling-man-hugging-happy-wife-showing-new-keys-camera_259150-58347.jpg"},
|
||||
{
|
||||
id: "m2", value: "24/7", title: "Availability", description: "Ready to help around the clock.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-working-as-plumber_23-2150746299.jpg"},
|
||||
{
|
||||
id: "m3", value: "100%", title: "Satisfaction", description: "Licensed and certified technicians.", imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721522.jpg"},
|
||||
]}
|
||||
title="Results You Can Trust"
|
||||
description="We are proud of our history of service and dedication to our local community."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Contact Us"
|
||||
title="Call Clog Busters Today"
|
||||
description="We offer 24/7 service. Contact us now to resolve your plumbing issues immediately."
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "t1", name: "John Doe", role: "Lead Plumber", imageSrc: "http://img.b2bpic.net/free-photo/young-loader-uniform-holding-cup-turkish-coffee-front-view_176474-21389.jpg"},
|
||||
{
|
||||
id: "t2", name: "Jane Smith", role: "Service Tech", imageSrc: "http://img.b2bpic.net/free-photo/young-female-standing-with-crossed-arms-worker-uniform-looking-hesitant-front-view_176474-34535.jpg"},
|
||||
{
|
||||
id: "t3", name: "Mike Ross", role: "Pipe Specialist", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-male-builder-wearing-uniform-safety-helmet-showing-okey-gesture-purple_141793-74515.jpg"},
|
||||
{
|
||||
id: "t4", name: "Sarah Lee", role: "Water Systems", imageSrc: "http://img.b2bpic.net/free-photo/young-female-male-plumbers-keep-hand-as-pray_273609-8786.jpg"},
|
||||
]}
|
||||
title="Meet Our Expert Team"
|
||||
description="Highly trained specialists who put your needs first."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", date: "Jan 2025", title: "Excellent Service", quote: "Clog Busters arrived on time and cleared my drain in under an hour!", tag: "Plumbing", avatarSrc: "http://img.b2bpic.net/free-photo/serious-african-man-looking_171337-9848.jpg", imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-354.jpg"},
|
||||
{
|
||||
id: "2", name: "David Kim", date: "Dec 2024", title: "Fast & Professional", quote: "The technician was super polite and left my place spotless.", tag: "Emergency", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-african-american-person-smiling-looking-camera-expressing-happiness-positive-emotions-young-man-with-authentic-smile-white-teeth-feeling-happy-cheerful_482257-40956.jpg", imageSrc: "http://img.b2bpic.net/free-photo/person-enjoying-relaxing-time-home_23-2149106965.jpg"},
|
||||
{
|
||||
id: "3", name: "Emily Rose", date: "Nov 2024", title: "Highly Recommend", quote: "Great communication and fair pricing for my pipe leak fix.", tag: "Leak Repair", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-afro-hairstyle_23-2150677136.jpg", imageSrc: "http://img.b2bpic.net/free-photo/african-american-caucasian-couple-hugging-happily-indoors-newly-purchased-home-joyful-moment_482257-134711.jpg"},
|
||||
{
|
||||
id: "4", name: "Mark Miller", date: "Oct 2024", title: "Top Notch Quality", quote: "Best experience I've had with a local plumber, period.", tag: "Repairs", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-african-american-person-casual-grey-hoodie-smiling_482257-122367.jpg", imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-smiling-looking-confident-happy-standing-suit-street-leans-her_1258-193996.jpg"},
|
||||
{
|
||||
id: "5", name: "Laura Webb", date: "Sep 2024", title: "Peace of Mind", quote: "They really care about doing the job right. Very trustworthy.", tag: "Support", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-shot-amused-enthusiastic-good-looking-malaysian-woman-smiling-feeling-positive_176420-44079.jpg", imageSrc: "http://img.b2bpic.net/free-photo/head-shot-happy-beautiful-young-woman-posing-indoors-looking-camera-smiling_74855-10218.jpg"},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Real feedback from satisfied homeowners we've helped over the years."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "Do you offer emergency services?", content: "Yes, we are available 24/7 for all plumbing emergencies."},
|
||||
{
|
||||
id: "q2", title: "How quickly can you arrive?", content: "Our service vans are distributed strategically for fast response."},
|
||||
{
|
||||
id: "q3", title: "Are your technicians licensed?", content: "All our team members are fully licensed, bonded, and insured."},
|
||||
{
|
||||
id: "q4", title: "What payment methods do you accept?", content: "We accept all major credit cards and digital payments."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common answers about our service procedures."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-animated"}}
|
||||
tag="Contact Us"
|
||||
title="Need Help? Get in Touch."
|
||||
description="Whether it's an emergency or maintenance request, send us your details and we'll be there fast."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Clog Busters"
|
||||
copyrightText="© 2025 Clog Busters Plumbing. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "#", ariaLabel: "Facebook"},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#", ariaLabel: "Twitter"},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#", ariaLabel: "Instagram"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Clog Busters"
|
||||
copyrightText="© 2025 Clog Busters. 24/7 Plumbing Experts."
|
||||
socialLinks={[
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user