Merge version_1 into main #1

Merged
bender merged 1 commits from version_1 into main 2026-04-15 16:36:56 +00:00

View File

@@ -17,239 +17,129 @@ export default function LandingPage() {
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
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">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "services",
},
{
name: "Why Us",
id: "why-us",
},
{
name: "Gallery",
id: "gallery",
},
{
name: "FAQ",
id: "faq",
},
]}
brandName="John's Plumbing, Inc"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "Why Us", id: "why-us" },
{ name: "Gallery", id: "gallery" },
{ name: "FAQ", id: "faq" }
]}
brandName="John's Plumbing, Inc"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="John's Plumbing, Inc."
description="Professional and reliable plumbing services in Grand Blanc, MI. Serving the community with quality craftsmanship since day one."
buttons={[
{
text: "Schedule Service",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/man-with-tools-looking-closely-lamp-hand_259150-58241.jpg"
imageAlt="Professional plumbing services in Grand Blanc"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="John's Plumbing, Inc."
description="Professional and reliable plumbing services in Grand Blanc, MI. Serving the community with quality craftsmanship since day one."
buttons={[{ text: "Schedule Service", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/man-with-tools-looking-closely-lamp-hand_259150-58241.jpg"
imageAlt="Professional plumbing services in Grand Blanc"
/>
</div>
<div id="services" data-section="services">
<FeatureCardSix
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Emergency Repairs",
description: "Available when you need us most for urgent leaks and pipe bursts.",
imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721540.jpg",
imageAlt: "emergency plumbing repair service",
},
{
title: "Drain Cleaning",
description: "Professional cleaning for slow or clogged drains to restore functionality.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-studio_23-2150275711.jpg",
imageAlt: "drain cleaning service professional",
},
{
title: "Water Heater Services",
description: "Expert repair and replacement of residential water heaters.",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-as-plumber_23-2150746311.jpg",
imageAlt: "water heater repair installation",
},
]}
title="Our Plumbing Services"
description="Comprehensive plumbing solutions to keep your home running smoothly."
/>
</div>
<div id="services" data-section="services">
<FeatureCardSix
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Emergency Repairs", description: "Available when you need us most for urgent leaks and pipe bursts.", imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721540.jpg", imageAlt: "emergency plumbing repair service"},
{
title: "Drain Cleaning", description: "Professional cleaning for slow or clogged drains to restore functionality.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-studio_23-2150275711.jpg", imageAlt: "drain cleaning service professional"},
{
title: "Water Heater Services", description: "Expert repair and replacement of residential water heaters.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-as-plumber_23-2150746311.jpg", imageAlt: "water heater repair installation"},
]}
title="Our Plumbing Services"
description="Comprehensive plumbing solutions to keep your home running smoothly."
/>
</div>
<div id="why-us" data-section="why-us">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Why Choose Us"
description="Quality service at 8515 Perry Rd. We treat every home as if it were our own."
bulletPoints={[
{
title: "5-Star Service",
description: "Consistently rated 5 stars by our local customers.",
},
{
title: "Licensed & Insured",
description: "Professional care for complete peace of mind.",
},
{
title: "Fair Pricing",
description: "Transparent and honest estimates on all work.",
},
]}
mediaAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-working-as-plumber_23-2150746299.jpg"
imageAlt="Full shot man working as plumber"
/>
</div>
<div id="why-us" data-section="why-us">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Why Choose Us"
description="Quality service at 8515 Perry Rd. We treat every home as if it were our own."
bulletPoints={[
{ title: "5-Star Service", description: "Consistently rated 5 stars by our local customers." },
{ title: "Licensed & Insured", description: "Professional care for complete peace of mind." },
{ title: "Fair Pricing", description: "Transparent and honest estimates on all work." },
]}
mediaAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-working-as-plumber_23-2150746299.jpg"
imageAlt="Full shot man working as plumber"
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Fixing Leaks",
price: "Featured",
imageSrc: "http://img.b2bpic.net/free-photo/colorful-bike-pieces-arrangement_23-2148932614.jpg",
},
{
id: "2",
name: "Pipe Work",
price: "Featured",
imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721529.jpg",
},
{
id: "3",
name: "Heaters",
price: "Featured",
imageSrc: "http://img.b2bpic.net/free-photo/architectural-blueprints_1359-498.jpg",
},
{
id: "4",
name: "Professional Tech",
price: "Featured",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-working-as-plumber_23-2150746298.jpg",
},
{
id: "5",
name: "Maintenance",
price: "Featured",
imageSrc: "http://img.b2bpic.net/free-photo/factory-workshop-interior-machines-glass-industry-background-process-production_645730-439.jpg",
},
{
id: "6",
name: "Remodels",
price: "Featured",
imageSrc: "http://img.b2bpic.net/free-photo/man-white-terry-bathrobe-filling-bathtub-with-water_259150-59739.jpg",
},
]}
title="Our Recent Work"
description="Check out some of our recent installations and repairs."
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "1", name: "Fixing Leaks", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/colorful-bike-pieces-arrangement_23-2148932614.jpg" },
{ id: "2", name: "Pipe Work", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721529.jpg" },
{ id: "3", name: "Heaters", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/architectural-blueprints_1359-498.jpg" },
{ id: "4", name: "Professional Tech", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-working-as-plumber_23-2150746298.jpg" },
{ id: "5", name: "Maintenance", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/factory-workshop-interior-machines-glass-industry-background-process-production_645730-439.jpg" },
{ id: "6", name: "Remodels", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/man-white-terry-bathrobe-filling-bathtub-with-water_259150-59739.jpg" },
]}
title="Our Recent Work"
description="Check out some of our recent installations and repairs."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "Do you offer emergency service?",
content: "Yes, we are available to help you when you need it most.",
},
{
id: "2",
title: "What areas do you serve?",
content: "We primarily serve Grand Blanc and surrounding areas.",
},
{
id: "3",
title: "Are your plumbers licensed?",
content: "Yes, all our technicians are licensed, insured, and professional.",
},
]}
title="Common Questions"
description="Answers to our customers' most frequent concerns."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "1", title: "Do you offer emergency service?", content: "Yes, we are available to help you when you need it most." },
{ id: "2", title: "What areas do you serve?", content: "We primarily serve Grand Blanc and surrounding areas." },
{ id: "3", title: "Are your plumbers licensed?", content: "Yes, all our technicians are licensed, insured, and professional." },
]}
title="Common Questions"
description="Answers to our customers' most frequent concerns."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Get in touch"
title="Need a Professional Plumber?"
description="Call us today at (810) 636-7235 or fill out our form to book your appointment."
buttons={[
{
text: "(810) 636-7235",
href: "tel:8106367235",
},
{
text: "Contact Us Now",
href: "#form",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Get in touch"
title="Need a Professional Plumber?"
description="Call us today at (810) 636-7235 or fill out our form to book your appointment."
buttons={[
{ text: "(810) 636-7235", href: "tel:8106367235" },
{ text: "Contact Us Now", href: "#form" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Home",
href: "#hero",
},
{
label: "Services",
href: "#services",
},
{
label: "Gallery",
href: "#gallery",
},
],
},
{
items: [
{
label: "Contact",
href: "#contact",
},
{
label: "FAQ",
href: "#faq",
},
],
},
]}
logoText="John's Plumbing, Inc."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Gallery", href: "#gallery" }] },
{ items: [{ label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }] },
]}
logoText="John's Plumbing, Inc."
/>
</div>
</ReactLenis>
</ThemeProvider>
);