bender/5565cebc-ef07-4c02-8ebd-70362e6cd35b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-04-21 07:25:05 +00:00
parent 0243a39030
commit 9f9081efa0
1 changed files with 143 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

468
src/app/page.tsx
View File

@@ -17,342 +17,160 @@ import { Wrench } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
defaultButtonVariant="icon-arrow"
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">
<NavbarStyleCentered
navItems={[
{
name: "Services",
id: "#features",
},
{
name: "About",
id: "#about",
},
{
name: "Testimonials",
id: "#testimonials",
},
{
name: "FAQ",
id: "#faq",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="DNW Plumbing"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Services", id: "#features" },
{ name: "About", id: "#about" },
{ name: "Testimonials", id: "#testimonials" },
{ name: "FAQ", id: "#faq" },
{ name: "Contact", id: "#contact" },
]}
brandName="DNW Plumbing"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{
variant: "gradient-bars",
}}
title="DNW Plumbing & Heating"
description="Professional, reliable heating and plumbing services in your area. Emergency repairs, maintenance, and installations at your doorstep."
buttons={[
{
text: "Get a Quote",
href: "#contact",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/plumber-holding-plunger_1368-742.jpg",
imageAlt: "professional plumber smiling tools",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/happy-plumber_1368-717.jpg",
imageAlt: "professional plumber smiling tools",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-security-helmet-holding-wrench-hammer-hands-with-smile-face-looking-confident-standing-isolated-orange-wall_141793-14010.jpg",
imageAlt: "professional plumber smiling tools",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/electrician-is-mounting-electric-sockets-white-wall-indoors_169016-17659.jpg",
imageAlt: "professional plumber smiling tools",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/sad-plumber_1368-715.jpg",
imageAlt: "professional plumber smiling tools",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/service-man-instelling-house-heating-system-floor_1303-26531.jpg",
imageAlt: "professional plumber smiling tools",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{ variant: "gradient-bars" }}
title="DNW Plumbing & Heating"
description="Professional, reliable heating and plumbing services in your area. Emergency repairs, maintenance, and installations at your doorstep."
buttons={[{ text: "Get a Quote", href: "#contact" }]}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/plumber-holding-plunger_1368-742.jpg", imageAlt: "professional plumber smiling tools" },
{ imageSrc: "http://img.b2bpic.net/free-photo/happy-plumber_1368-717.jpg", imageAlt: "professional plumber smiling tools" },
{ imageSrc: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-security-helmet-holding-wrench-hammer-hands-with-smile-face-looking-confident-standing-isolated-orange-wall_141793-14010.jpg", imageAlt: "professional plumber smiling tools" },
{ imageSrc: "http://img.b2bpic.net/free-photo/electrician-is-mounting-electric-sockets-white-wall-indoors_169016-17659.jpg", imageAlt: "professional plumber smiling tools" },
{ imageSrc: "http://img.b2bpic.net/free-photo/sad-plumber_1368-715.jpg", imageAlt: "professional plumber smiling tools" },
{ imageSrc: "http://img.b2bpic.net/free-photo/service-man-instelling-house-heating-system-floor_1303-26531.jpg", imageAlt: "professional plumber smiling tools" },
]}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="About Us"
title="Experience You Can Trust"
description="With years of expertise, DNW Plumbing & Heating provides quality workmanship. We pride ourselves on reliability and transparency."
subdescription="Whether it's a minor leak or a full boiler installation, we handle every job with care and professionalism."
imageSrc="http://img.b2bpic.net/free-photo/young-bearded-builder-man-construction-uniform-safety-helmet-holding-adjustable-wrenches-raised-hands-looking-camera-with-aggressive-expression_141793-30087.jpg"
mediaAnimation="slide-up"
imageAlt="plumber repairing radiator pipe"
icon={Wrench}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="About Us"
title="Experience You Can Trust"
description="With years of expertise, DNW Plumbing & Heating provides quality workmanship. We pride ourselves on reliability and transparency."
subdescription="Whether it's a minor leak or a full boiler installation, we handle every job with care and professionalism."
imageSrc="http://img.b2bpic.net/free-photo/young-bearded-builder-man-construction-uniform-safety-helmet-holding-adjustable-wrenches-raised-hands-looking-camera-with-aggressive-expression_141793-30087.jpg"
mediaAnimation="slide-up"
imageAlt="plumber repairing radiator pipe"
icon={Wrench}
/>
</div>
<div id="features" data-section="features">
<FeatureCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
features={[
{
title: "Plumbing Maintenance",
description: "Regular inspections and quick fixes to ensure longevity.",
imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990705.jpg",
imageAlt: "bathroom pipe maintenance service",
},
{
title: "Heating Installation",
description: "Expert boiler and heating system installs.",
imageSrc: "http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334226.jpg",
imageAlt: "heating boiler system service",
},
{
title: "Emergency Repairs",
description: "Rapid response for all plumbing emergencies.",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-plumber_23-2150746394.jpg",
imageAlt: "emergency plumbing rapid response",
},
]}
title="Our Services"
description="Comprehensive solutions for all your plumbing and heating needs."
/>
</div>
<div id="features" data-section="features">
<FeatureCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
features={[
{ title: "Plumbing Maintenance", description: "Regular inspections and quick fixes to ensure longevity.", imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990705.jpg", imageAlt: "bathroom pipe maintenance service" },
{ title: "Heating Installation", description: "Expert boiler and heating system installs.", imageSrc: "http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334226.jpg", imageAlt: "heating boiler system service" },
{ title: "Emergency Repairs", description: "Rapid response for all plumbing emergencies.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-plumber_23-2150746394.jpg", imageAlt: "emergency plumbing rapid response" },
]}
title="Our Services"
description="Comprehensive solutions for all your plumbing and heating needs."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "15+",
title: "Years Experience",
description: "Decades of plumbing expertise.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-holding-pencil_23-2148372127.jpg",
imageAlt: "happy customer thumbs up",
},
{
id: "m2",
value: "500+",
title: "Projects Completed",
description: "Satisfied households and businesses.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-impressed-gorgeous-middle-aged-woman-showing-thumb-up_176420-43864.jpg",
imageAlt: "happy customer thumbs up",
},
{
id: "m3",
value: "24/7",
title: "Support Ready",
description: "Always here when you need us.",
imageSrc: "http://img.b2bpic.net/free-photo/young-male-cook-blue-apron-shirt_176474-49624.jpg",
imageAlt: "happy customer thumbs up",
},
]}
title="Quality Assured"
description="Numbers that reflect our dedication to local families and homes."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "15+", title: "Years Experience", description: "Decades of plumbing expertise.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-holding-pencil_23-2148372127.jpg", imageAlt: "happy customer thumbs up" },
{ id: "m2", value: "500+", title: "Projects Completed", description: "Satisfied households and businesses.", imageSrc: "http://img.b2bpic.net/free-photo/happy-impressed-gorgeous-middle-aged-woman-showing-thumb-up_176420-43864.jpg", imageAlt: "happy customer thumbs up" },
{ id: "m3", value: "24/7", title: "Support Ready", description: "Always here when you need us.", imageSrc: "http://img.b2bpic.net/free-photo/young-male-cook-blue-apron-shirt_176474-49624.jpg", imageAlt: "happy customer thumbs up" },
]}
title="Quality Assured"
description="Numbers that reflect our dedication to local families and homes."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "John Doe",
role: "Homeowner",
company: "Local Resident",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15686.jpg",
imageAlt: "client testimonial satisfied",
},
{
id: "t2",
name: "Jane Smith",
role: "Homeowner",
company: "Local Resident",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/african-american-caucasian-couple-hugging-happily-indoors-newly-purchased-home-joyful-moment_482257-134711.jpg",
imageAlt: "client testimonial satisfied",
},
{
id: "t3",
name: "Alice Brown",
role: "Property Manager",
company: "City Apartments",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg",
imageAlt: "client testimonial satisfied",
},
{
id: "t4",
name: "Bob White",
role: "Homeowner",
company: "Local Resident",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/supportive-cute-blond-girlfriend-cheering-liking-interesting-concept-cool-idea-thumbsup-smiling_1258-229510.jpg",
imageAlt: "client testimonial satisfied",
},
{
id: "t5",
name: "Charlie Green",
role: "Homeowner",
company: "Local Resident",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-middle-age-man-holding-screwdriver-new-home-mouth-lips-shut-as-zip-with-fingers-secret-silent-taboo-talking_839833-5351.jpg",
imageAlt: "client testimonial satisfied",
},
]}
title="What Our Customers Say"
description="Trusted by hundreds of local residents."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
testimonials={[
{ id: "t1", name: "John Doe", role: "Homeowner", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15686.jpg", imageAlt: "client testimonial satisfied" },
{ id: "t2", name: "Jane Smith", role: "Homeowner", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/african-american-caucasian-couple-hugging-happily-indoors-newly-purchased-home-joyful-moment_482257-134711.jpg", imageAlt: "client testimonial satisfied" },
{ id: "t3", name: "Alice Brown", role: "Property Manager", company: "City Apartments", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg", imageAlt: "client testimonial satisfied" },
{ id: "t4", name: "Bob White", role: "Homeowner", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/supportive-cute-blond-girlfriend-cheering-liking-interesting-concept-cool-idea-thumbsup-smiling_1258-229510.jpg", imageAlt: "client testimonial satisfied" },
{ id: "t5", name: "Charlie Green", role: "Homeowner", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-middle-age-man-holding-screwdriver-new-home-mouth-lips-shut-as-zip-with-fingers-secret-silent-taboo-talking_839833-5351.jpg", imageAlt: "client testimonial satisfied" },
]}
title="What Our Customers Say"
description="Trusted by hundreds of local residents."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Do you provide free quotes?",
content: "Yes, we offer free estimates for all new installations.",
},
{
id: "f2",
title: "Are you fully insured?",
content: "Absolutely, all work is fully insured and guaranteed.",
},
{
id: "f3",
title: "Do you work on weekends?",
content: "We handle emergency calls 24/7, weekends included.",
},
]}
title="Common Questions"
description="Answers to typical heating and plumbing concerns."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Do you provide free quotes?", content: "Yes, we offer free estimates for all new installations." },
{ id: "f2", title: "Are you fully insured?", content: "Absolutely, all work is fully insured and guaranteed." },
{ id: "f3", title: "Do you work on weekends?", content: "We handle emergency calls 24/7, weekends included." },
]}
title="Common Questions"
description="Answers to typical heating and plumbing concerns."
faqsAnimation="slide-up"
/>
</div>
<div id="blog" data-section="blog">
<BlogCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
title="Heating Tips"
description="Stay efficient and save money with our latest blog posts."
blogs={[
{
id: "b1",
category: "Tips",
title: "Winterizing Your Home",
excerpt: "Essential steps to keep your pipes safe during winter.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-using-rotary-switch_23-2149308989.jpg",
imageAlt: "winter radiator tips guide",
authorName: "Admin",
authorAvatar: "http://img.b2bpic.net/free-photo/low-angle-man-working-as-plumber_23-2150746301.jpg",
date: "Jan 2025",
},
{
id: "b2",
category: "Heating",
title: "Boiler Efficiency",
excerpt: "Signs your boiler needs a service.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-busy-freelancer-with-afro-haircut-works-online-project_273609-18025.jpg",
imageAlt: "winter radiator tips guide",
authorName: "Admin",
authorAvatar: "http://img.b2bpic.net/free-photo/home-repair-renovation-interior-design-concept_53876-120421.jpg",
date: "Dec 2024",
},
{
id: "b3",
category: "Plumbing",
title: "Preventing Leaks",
excerpt: "How to catch potential issues early.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-warming-up-near-heater_23-2149335074.jpg",
imageAlt: "winter radiator tips guide",
authorName: "Admin",
authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-woman-turning-heater_23-2149339523.jpg",
date: "Nov 2024",
},
]}
/>
</div>
<div id="blog" data-section="blog">
<BlogCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
title="Heating Tips"
description="Stay efficient and save money with our latest blog posts."
blogs={[
{ id: "b1", category: "Tips", title: "Winterizing Your Home", excerpt: "Essential steps to keep your pipes safe during winter.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-using-rotary-switch_23-2149308989.jpg", imageAlt: "winter radiator tips guide", authorName: "Admin", authorAvatar: "http://img.b2bpic.net/free-photo/low-angle-man-working-as-plumber_23-2150746301.jpg", date: "Jan 2025" },
{ id: "b2", category: "Heating", title: "Boiler Efficiency", excerpt: "Signs your boiler needs a service.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-busy-freelancer-with-afro-haircut-works-online-project_273609-18025.jpg", imageAlt: "winter radiator tips guide", authorName: "Admin", authorAvatar: "http://img.b2bpic.net/free-photo/home-repair-renovation-interior-design-concept_53876-120421.jpg", date: "Dec 2024" },
{ id: "b3", category: "Plumbing", title: "Preventing Leaks", excerpt: "How to catch potential issues early.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-warming-up-near-heater_23-2149335074.jpg", imageAlt: "winter radiator tips guide", authorName: "Admin", authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-woman-turning-heater_23-2149339523.jpg", date: "Nov 2024" },
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "rotated-rays-static",
}}
text="Ready to get started? Contact DNW Plumbing & Heating today for reliable service and professional advice."
buttons={[
{
text: "Contact Us Now",
href: "mailto:info@dnwplumbing.com",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{ variant: "rotated-rays-static" }}
text="Ready to get started? Contact DNW Plumbing & Heating today for reliable service and professional advice."
buttons={[{ text: "Contact Us Now", href: "mailto:info@dnwplumbing.com" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="DNW Plumbing & Heating"
columns={[
{
title: "Services",
items: [
{
label: "Maintenance",
href: "#",
},
{
label: "Boilers",
href: "#",
},
],
},
{
title: "Company",
items: [
{
label: "About",
href: "#",
},
{
label: "Contact",
href: "#",
},
],
},
]}
copyrightText="© 2025 DNW Plumbing & Heating"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="DNW Plumbing & Heating"
columns={[
{ title: "Services", items: [{ label: "Maintenance", href: "#" }, { label: "Boilers", href: "#" }] },
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }] },
]}
copyrightText="© 2025 DNW Plumbing & Heating"
/>
</div>
</ReactLenis>
</ThemeProvider>
);