177 lines
8.1 KiB
TypeScript
177 lines
8.1 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="pill"
|
||
contentWidth="medium"
|
||
sizing="medium"
|
||
background="circleGradient"
|
||
cardStyle="glass-elevated"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="normal"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingInline
|
||
navItems={[
|
||
{ name: "Services", id: "services" },
|
||
{ name: "Why Choose", id: "why-choose" },
|
||
{ name: "Testimonials", id: "testimonials" },
|
||
{ name: "Contact", id: "contact" },
|
||
]}
|
||
brandName="JD Plumbing"
|
||
button={{ text: "Contact", href: "#contact" }}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboard
|
||
background={{ variant: "gradient-bars" }}
|
||
title="Fast, Reliable Plumbing — Done Right the First Time"
|
||
description="4.7★ Rated with 60+ Reviews — Trusted for same-day service, honest pricing, and quality work."
|
||
buttons={[
|
||
{ text: "Call Now", href: "tel:5550123" },
|
||
{ text: "Get Free Estimate", href: "#contact" }
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/side-view-construction-tools-as-brick-hammer-pipe-wrench-safety-helmet-wooden-background_141793-14293.jpg"
|
||
avatars={[
|
||
{ src: "http://img.b2bpic.net/free-photo/set-repair-equipments-flask_23-2148067773.jpg", alt: "Customer profile 1" },
|
||
{ src: "http://img.b2bpic.net/free-photo/fathers-day-concept-with-copyspace-left_23-2147812024.jpg", alt: "Customer profile 2" },
|
||
{ src: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-different-construction-tools-wooden-background_169016-24026.jpg", alt: "Customer profile 3" },
|
||
{ src: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-different-construction-tools-wooden-background_169016-24024.jpg", alt: "Customer profile 4" },
|
||
{ src: "http://img.b2bpic.net/free-photo/front-view-woman-celebrating-birthday-together_23-2150598991.jpg", alt: "Customer profile 5" }
|
||
]}
|
||
avatarText="Trusted by 500+ Local Homeowners"
|
||
marqueeItems={[
|
||
{ type: "text", text: "Licensed & Insured" },
|
||
{ type: "text", text: "Same-Day Service" },
|
||
{ type: "text", text: "Upfront Pricing" },
|
||
{ type: "text", text: "Professional Quality" },
|
||
{ type: "text", text: "100% Satisfaction" }
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardTwentySeven
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{ id: "s1", title: "Leak Detection", descriptions: ["Expert diagnosis for hidden leaks."], imageSrc: "http://img.b2bpic.net/free-photo/set-repair-equipments-flask_23-2148067773.jpg" },
|
||
{ id: "s2", title: "Drain Cleaning", descriptions: ["Professional clog removal services."], imageSrc: "http://img.b2bpic.net/free-photo/fathers-day-concept-with-copyspace-left_23-2147812024.jpg" },
|
||
{ id: "s3", title: "Water Heaters", descriptions: ["Installation and repair for all brands."], imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-different-construction-tools-wooden-background_169016-24026.jpg" }
|
||
]}
|
||
title="Complete Plumbing Services"
|
||
description="Done right the first time — no shortcuts, no surprises."
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-choose" data-section="why-choose">
|
||
<MetricCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
gridVariant="bento-grid"
|
||
useInvertedBackground={false}
|
||
metrics={[
|
||
{ id: "m1", value: "1-2 Hr", description: "Response Time" },
|
||
{ id: "m2", value: "60+", description: "Happy Reviews" },
|
||
{ id: "m3", value: "1 Year", description: "Work Warranty" }
|
||
]}
|
||
title="Why Customers Call JD Plumbing"
|
||
description="Reliable experts dedicated to quality."
|
||
/>
|
||
</div>
|
||
|
||
<div id="emergency" data-section="emergency">
|
||
<TextSplitAbout
|
||
useInvertedBackground={false}
|
||
title="Plumbing Emergency? We’ll Be There Fast."
|
||
description={["Customers consistently report same-day service, fast response times, and immediate solutions."]}
|
||
buttons={[{ text: "Call For Help", href: "tel:5550123" }]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{ id: "t1", name: "Steph D", role: "Homeowner", testimonial: "Jason arrived in less than 2 hours and had everything fixed.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-african-american-woman-smiling-cheerful-friendly-face-laughing-confident_839833-29956.jpg" },
|
||
{ id: "t2", name: "Thyrapy S", role: "Homeowner", testimonial: "Showed up within the hour and replaced my entire pipe system.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-pleased-woman-seated-sofa-looking-ahead_259150-60489.jpg" },
|
||
{ id: "t3", name: "Alisa K", role: "Homeowner", testimonial: "Our water heater broke on New Year’s — he came the next day.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe-with-laptop_273609-12676.jpg" },
|
||
{ id: "t4", name: "Debbie G", role: "Homeowner", testimonial: "Fixed everything perfectly. Honest and skilled.", imageSrc: "http://img.b2bpic.net/free-photo/confident-smiling-young-woman-standing-kitchen_23-2147916396.jpg" },
|
||
{ id: "t5", name: "Frances A", role: "Homeowner", testimonial: "Quick, fair pricing, and very professional.", imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-home-with-book_23-2147611420.jpg" }
|
||
]}
|
||
title="Trusted by Homeowners"
|
||
description="See why neighbors trust JD Plumbing."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqBase
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{ id: "f1", title: "Do you offer emergency service?", content: "Yes, we offer emergency plumbing services." },
|
||
{ id: "f2", title: "Do you provide free estimates?", content: "Yes, please reach out for your estimate." },
|
||
{ id: "f3", title: "What areas do you serve?", content: "We serve Perris, Riverside, and Moreno Valley." }
|
||
]}
|
||
title="Common Questions"
|
||
description="Answers about our plumbing services."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCenter
|
||
useInvertedBackground={false}
|
||
background={{ variant: "plain" }}
|
||
tag="Contact"
|
||
title="Get Your Plumbing Fixed Today"
|
||
description="Call now for reliable service."
|
||
buttonText="Call Now"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseReveal
|
||
logoText="JD Plumbing"
|
||
columns={[
|
||
{
|
||
title: "Services", items: [
|
||
{ label: "Leak Repair", href: "#services" },
|
||
{ label: "Drain Cleaning", href: "#services" }
|
||
]
|
||
},
|
||
{
|
||
title: "Support", items: [
|
||
{ label: "Call Us", href: "tel:5550123" },
|
||
{ label: "Email", href: "mailto:hello@jdplumbing.com" }
|
||
]
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|