Merge version_1 into main #1
469
src/app/page.tsx
469
src/app/page.tsx
@@ -17,340 +17,163 @@ import { Award, Clock, Home, PhoneCall, Shield, ShieldCheck } from "lucide-react
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Precision Plumbing"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Precision Plumbing"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Licensed plumbers you can trust, available now"
|
||||
description="Emergency repairs, maintenance, and installations for homes and businesses across the City/Region. Same-day appointments available."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cheerful-attractive-dark-haired-latin-man-posing-kitchen_74855-7991.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/feedback-comment-survey-support-response-bar-word_53876-133786.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-with-delicious-pizza_23-2150307059.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-man-working-as-plumber_23-2150746421.jpg",
|
||||
alt: "Happy client",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule Your Service",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Licensed & Insured",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "24/7 Availability",
|
||||
icon: Clock,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Family Owned",
|
||||
icon: Home,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Satisfaction Guaranteed",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Emergency Response",
|
||||
icon: PhoneCall,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroCentered
|
||||
background={{ variant: "plain" }}
|
||||
title="Licensed plumbers you can trust, available now"
|
||||
description="Emergency repairs, maintenance, and installations for homes and businesses across the City/Region. Same-day appointments available."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/cheerful-attractive-dark-haired-latin-man-posing-kitchen_74855-7991.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/feedback-comment-survey-support-response-bar-word_53876-133786.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-with-delicious-pizza_23-2150307059.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/high-angle-man-working-as-plumber_23-2150746421.jpg", alt: "Happy client" },
|
||||
]}
|
||||
buttons={[{ text: "Schedule Your Service", href: "#contact" }]}
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "Licensed & Insured", icon: ShieldCheck },
|
||||
{ type: "text-icon", text: "24/7 Availability", icon: Clock },
|
||||
{ type: "text-icon", text: "Family Owned", icon: Home },
|
||||
{ type: "text-icon", text: "Satisfaction Guaranteed", icon: Award },
|
||||
{ type: "text-icon", text: "Emergency Response", icon: PhoneCall },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose Precision Plumbing?"
|
||||
metrics={[
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Licensed Professionals",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Emergency Response",
|
||||
value: "24/7",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Successful Repairs",
|
||||
value: "10k+",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose Precision Plumbing?"
|
||||
metrics={[
|
||||
{ icon: Shield, label: "Licensed Professionals", value: "100%" },
|
||||
{ icon: Clock, label: "Emergency Response", value: "24/7" },
|
||||
{ icon: Award, label: "Successful Repairs", value: "10k+" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Emergency Repairs",
|
||||
tags: [
|
||||
"Fast",
|
||||
"24/7",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-tank-container-water-storage_23-2151748328.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Water Heaters",
|
||||
tags: [
|
||||
"Install",
|
||||
"Maintain",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-plumber-working-fix-problems_23-2150990693.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Fixture Installation",
|
||||
tags: [
|
||||
"Kitchen",
|
||||
"Bath",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-man-inspecting-repairing-kitchen-faucet_662251-2682.jpg",
|
||||
},
|
||||
]}
|
||||
title="Professional Plumbing Solutions"
|
||||
description="We deliver top-tier maintenance and repair services designed to keep your home or office plumbing system in peak condition."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Emergency Repairs", tags: ["Fast", "24/7"], imageSrc: "http://img.b2bpic.net/free-photo/view-tank-container-water-storage_23-2151748328.jpg" },
|
||||
{ id: "f2", title: "Water Heaters", tags: ["Install", "Maintain"], imageSrc: "http://img.b2bpic.net/free-photo/view-plumber-working-fix-problems_23-2150990693.jpg" },
|
||||
{ id: "f3", title: "Fixture Installation", tags: ["Kitchen", "Bath"], imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-man-inspecting-repairing-kitchen-faucet_662251-2682.jpg" },
|
||||
]}
|
||||
title="Professional Plumbing Solutions"
|
||||
description="We deliver top-tier maintenance and repair services designed to keep your home or office plumbing system in peak condition."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="catalog" data-section="catalog">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Basic Leak Check",
|
||||
price: "$89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-cleaning-man-wearing-casual-clothes-cap-holding-basin-looking-it-confused-standing-green-wall_141793-60670.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Heater Maintenance",
|
||||
price: "$149",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334228.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Drain Cleaning",
|
||||
price: "$129",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/compost-still-life-concept_23-2149068973.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Emergency Repair",
|
||||
price: "$199",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-as-plumber_23-2150746312.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Faucet Replacement",
|
||||
price: "$179",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/collection-aluminum-products-packaging_23-2150820949.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Full Home Inspection",
|
||||
price: "$249",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/carpenter-holds-glue-attaches-window_1150-23995.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Service Packages"
|
||||
description="Select from our curated maintenance and repair service packages for your residential or commercial needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="catalog" data-section="catalog">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Basic Leak Check", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/young-cleaning-man-wearing-casual-clothes-cap-holding-basin-looking-it-confused-standing-green-wall_141793-60670.jpg" },
|
||||
{ id: "p2", name: "Heater Maintenance", price: "$149", imageSrc: "http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334228.jpg" },
|
||||
{ id: "p3", name: "Drain Cleaning", price: "$129", imageSrc: "http://img.b2bpic.net/free-photo/compost-still-life-concept_23-2149068973.jpg" },
|
||||
{ id: "p4", name: "Emergency Repair", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-as-plumber_23-2150746312.jpg" },
|
||||
{ id: "p5", name: "Faucet Replacement", price: "$179", imageSrc: "http://img.b2bpic.net/free-photo/collection-aluminum-products-packaging_23-2150820949.jpg" },
|
||||
{ id: "p6", name: "Full Home Inspection", price: "$249", imageSrc: "http://img.b2bpic.net/free-photo/carpenter-holds-glue-attaches-window_1150-23995.jpg" },
|
||||
]}
|
||||
title="Our Service Packages"
|
||||
description="Select from our curated maintenance and repair service packages for your residential or commercial needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Essential",
|
||||
price: "$89",
|
||||
subtitle: "Basic maintenance package",
|
||||
features: [
|
||||
"Leak detection",
|
||||
"Pipe inspection",
|
||||
"Standard cleaning",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Popular",
|
||||
price: "$149",
|
||||
subtitle: "Comprehensive protection",
|
||||
features: [
|
||||
"All basic",
|
||||
"Heater check",
|
||||
"Priority support",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
badge: "Elite",
|
||||
price: "$299",
|
||||
subtitle: "Full residential care",
|
||||
features: [
|
||||
"All pro features",
|
||||
"24/7 emergency",
|
||||
"Fixture updates",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
description="Clear and upfront pricing for every plumbing job. No hidden fees, just reliable service."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "basic", badge: "Essential", price: "$89", subtitle: "Basic maintenance package", features: ["Leak detection", "Pipe inspection", "Standard cleaning"] },
|
||||
{ id: "pro", badge: "Popular", price: "$149", subtitle: "Comprehensive protection", features: ["All basic", "Heater check", "Priority support"] },
|
||||
{ id: "premium", badge: "Elite", price: "$299", subtitle: "Full residential care", features: ["All pro features", "24/7 emergency", "Fixture updates"] },
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
description="Clear and upfront pricing for every plumbing job. No hidden fees, just reliable service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Precision Plumbing saved our office building from a major flood. Professional, fast, and transparent about costs. Highly recommend!"
|
||||
rating={5}
|
||||
author="Sarah Jenkins"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cheerful-woman-with-speech-bubble_53876-119706.jpg",
|
||||
alt: "Sarah Jenkins",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-walks-woman-street_1398-1574.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-shirt-smiling-posing-kitchen_23-2148414940.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-waving-hand-outside_23-2149447136.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-successful-young-business-woman-standing-with-arms-folded-posing-co-working-coffee-shop-interior-looking-camera-smiling_74855-10036.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Precision Plumbing saved our office building from a major flood. Professional, fast, and transparent about costs. Highly recommend!"
|
||||
rating={5}
|
||||
author="Sarah Jenkins"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/cheerful-woman-with-speech-bubble_53876-119706.jpg", alt: "Sarah Jenkins" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-walks-woman-street_1398-1574.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-shirt-smiling-posing-kitchen_23-2148414940.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-waving-hand-outside_23-2149447136.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-successful-young-business-woman-standing-with-arms-folded-posing-co-working-coffee-shop-interior-looking-camera-smiling_74855-10036.jpg", alt: "Client 5" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you offer emergency services?",
|
||||
content: "Yes, we are available 24/7 for any plumbing emergency.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Are you licensed and insured?",
|
||||
content: "Absolutely, our team is fully licensed and insured for your protection.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you offer free estimates?",
|
||||
content: "We offer detailed estimates upon visual inspection of your plumbing needs.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Need more information? Check our common FAQs to understand how we can help you today."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you offer emergency services?", content: "Yes, we are available 24/7 for any plumbing emergency." },
|
||||
{ id: "q2", title: "Are you licensed and insured?", content: "Absolutely, our team is fully licensed and insured for your protection." },
|
||||
{ id: "q3", title: "Do you offer free estimates?", content: "We offer detailed estimates upon visual inspection of your plumbing needs." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Need more information? Check our common FAQs to understand how we can help you today."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
text="Ready to get your plumbing fixed? Our team is standing by to help you resolve your plumbing issues promptly."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
text="Ready to get your plumbing fixed? Our team is standing by to help you resolve your plumbing issues promptly."
|
||||
buttons={[{ text: "Contact Us Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Precision Plumbing"
|
||||
copyrightText="© 2025 Precision Plumbing. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Precision Plumbing"
|
||||
copyrightText="© 2025 Precision Plumbing. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user