Merge version_1 into main #1
338
src/app/page.tsx
338
src/app/page.tsx
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user