Files
b3b31aed-2d2b-49ac-a267-015…/src/app/page.tsx
2026-03-30 03:08:33 +00:00

386 lines
12 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Award, CheckCircle, Clock, DollarSign, Leaf, Search, Shield, ShieldCheck, Wrench, Zap } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="smallMedium"
sizing="medium"
background="blurBottom"
cardStyle="glass-depth"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Services",
id: "#services",
},
{
name: "About",
id: "#about",
},
{
name: "Testimonials",
id: "#testimonials",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="PS Plumbing"
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{
variant: "radial-gradient",
}}
title="Professional Plumbing Services You Can Trust"
description="Fast, reliable, and expert plumbing solutions for your home. From emergency repairs to comprehensive installations, PS Plumbing is here to help."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/blissful-girl-expressing-happiness-drinking-coffee-her-cozy-kitchen_197531-6718.jpg",
alt: "Customer 1",
},
{
src: "http://img.b2bpic.net/free-photo/beautiful-middle-age-woman-working-office-ordering-delivery-food-looking-camera-smiling-with-open-arms-hug-cheerful-expression-embracing-happiness_839833-19451.jpg",
alt: "Customer 2",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-smiling-beautiful-girl-her-handsome-boyfriend-woman-casual-summer-jeans-clothes_158538-5499.jpg",
alt: "Customer 3",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-senior-woman-listening-music-headphone-through-cellphone_23-2147918265.jpg",
alt: "Customer 4",
},
{
src: "http://img.b2bpic.net/free-photo/blissful-girl-expressing-happiness-drinking-coffee-her-cozy-kitchen_197531-6718.jpg",
alt: "Customer 5",
},
]}
avatarText="Trusted by 1000+ local families"
buttons={[
{
text: "Get a Free Quote",
href: "#contact",
},
{
text: "Our Services",
href: "#services",
},
]}
marqueeItems={[
{
type: "text-icon",
text: "24/7 Emergency Support",
icon: Clock,
},
{
type: "text-icon",
text: "Licensed & Insured",
icon: ShieldCheck,
},
{
type: "text-icon",
text: "Flat-Rate Pricing",
icon: DollarSign,
},
{
type: "text-icon",
text: "Same-Day Service",
icon: Zap,
},
{
type: "text-icon",
text: "Eco-Friendly Solutions",
icon: Leaf,
},
]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={true}
title="Decades of Plumbing Excellence"
description="Founded with a commitment to integrity and quality, PS Plumbing serves our community with top-tier technical skills and customer-centric service. We treat every home like our own."
metrics={[
{
value: "15+",
title: "Years Experience",
},
{
value: "5k+",
title: "Successful Jobs",
},
{
value: "100%",
title: "Satisfaction Rate",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/woman-calling-plumber-solve-kitchen-problems_23-2150990674.jpg?_wi=1"
mediaAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "s1",
title: "Drain & Pipe Repair",
description: "Clear blockages, fix leaks, and restore flow with our professional-grade tools.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-cleaning-pipe-with-cup-plunger_1398-4154.jpg?_wi=1",
},
items: [
{
icon: Wrench,
text: "Fast emergency response",
},
{
icon: CheckCircle,
text: "Permanent solutions",
},
{
icon: Shield,
text: "Insured repairs",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/plumber-doing-victory-gesture_1368-6312.jpg",
imageAlt: "professional plumber smiling tools",
},
{
id: "s2",
title: "Water Heater Services",
description: "Installation, maintenance, and repair of all water heater types including tankless.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334231.jpg",
},
items: [
{
icon: Zap,
text: "Energy-efficient install",
},
{
icon: Award,
text: "Certified technicians",
},
{
icon: CheckCircle,
text: "Warranty included",
},
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/woman-calling-plumber-solve-kitchen-problems_23-2150990674.jpg?_wi=2",
imageAlt: "plumber repairing pipe focus",
},
{
id: "s3",
title: "Leak Detection",
description: "Advanced diagnostics to find hidden leaks before they cause structural damage.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/pipeline-workers-measuring-tube-length-construction-gas-oil-pipes_342744-48.jpg",
},
items: [
{
icon: Search,
text: "Precision tools",
},
{
icon: Shield,
text: "Preventive inspections",
},
{
icon: CheckCircle,
text: "Safe for property",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-cleaning-pipe-with-cup-plunger_1398-4154.jpg?_wi=2",
imageAlt: "plumbing repair sink pipe",
},
]}
title="Comprehensive Plumbing Solutions"
description="Whatever your plumbing need, we bring the right tools, knowledge, and dedication to resolve it efficiently."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "John Doe",
handle: "@johndoe",
testimonial: "Excellent service and very prompt response for a burst pipe!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/blissful-girl-expressing-happiness-drinking-coffee-her-cozy-kitchen_197531-6718.jpg?_wi=1",
},
{
id: "2",
name: "Sarah Miller",
handle: "@sarahmill",
testimonial: "They installed my new water heater perfectly. Highly recommend.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-middle-age-woman-working-office-ordering-delivery-food-looking-camera-smiling-with-open-arms-hug-cheerful-expression-embracing-happiness_839833-19451.jpg",
},
{
id: "3",
name: "Mike Ross",
handle: "@mikeross",
testimonial: "Very professional and fair pricing. Will definitely call them again.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-beautiful-girl-her-handsome-boyfriend-woman-casual-summer-jeans-clothes_158538-5499.jpg",
},
{
id: "4",
name: "Emily Blunt",
handle: "@emilyb",
testimonial: "They helped fix a complex drainage issue others couldn't solve.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-woman-listening-music-headphone-through-cellphone_23-2147918265.jpg",
},
{
id: "5",
name: "David Clark",
handle: "@dclark",
testimonial: "Trustworthy, clean, and efficient. Exactly what I look for in a plumber.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/blissful-girl-expressing-happiness-drinking-coffee-her-cozy-kitchen_197531-6718.jpg?_wi=2",
},
]}
showRating={true}
title="What Our Community Says"
description="Customer satisfaction is our greatest endorsement."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Do you offer 24/7 service?",
content: "Yes, we handle emergency plumbing issues round the clock.",
},
{
id: "f2",
title: "Are your plumbers insured?",
content: "Absolutely, all our technicians are fully licensed, insured, and background checked.",
},
{
id: "f3",
title: "How long until you arrive?",
content: "For emergencies, we aim to be on-site within 60 minutes.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/young-male-cook-blue-apron-shirt_176474-49624.jpg"
title="Common Plumbing Questions"
description="Answers to the questions we hear most often from our customers."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Ready to Solve Your Plumbing Issues?"
description="Send us a message and our team will get back to you shortly to schedule an appointment."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
},
{
name: "email",
type: "email",
placeholder: "Your Email",
},
{
name: "phone",
type: "tel",
placeholder: "Your Phone Number",
},
]}
textarea={{
name: "message",
placeholder: "Tell us how we can help...",
}}
imageSrc="http://img.b2bpic.net/free-photo/young-successful-businessman-speaking-phone-smiling-office_176420-945.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/close-up-young-man-working-bike_23-2149039021.jpg"
columns={[
{
title: "Quick Links",
items: [
{
label: "Services",
href: "#services",
},
{
label: "About Us",
href: "#about",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}