bender/7ca704c8-6cd9-4b80-b03a-6277fef1a9a5
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-05-14 01:51:18 +00:00
parent ad4c022555
commit ff6437b9ad
1 changed files with 169 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

539
src/app/page.tsx
View File

@@ -17,387 +17,186 @@ import { ShieldCheck } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="gradient-radial"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="gradient-radial"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "services",
},
{
name: "About",
id: "about",
},
{
name: "Reviews",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Five Star Electric & Plumbing"
button={{
text: "Get a Quote",
href: "#contact",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
brandName="Five Star Electric & Plumbing"
button={{ text: "Get a Quote", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "plain",
}}
title="Charlotte's Trusted Plumbing & Electrical Experts"
description="Providing same-day service and reliable craftsmanship for all your home repair needs. Your satisfaction is our 5-star priority."
kpis={[
{
value: "4.6",
label: "Star Rating",
},
{
value: "40+",
label: "Verified Reviews",
},
{
value: "24/7",
label: "Service Availability",
},
]}
enableKpiAnimation={true}
buttons={[
{
text: "Get a Free Quote",
href: "#contact",
},
{
text: "Call Now",
href: "tel:5551234567",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/female-plumber-working-fix-problems-client-s-house_23-2150990733.jpg",
alt: "Female plumber working",
},
{
src: "http://img.b2bpic.net/free-photo/cheerful-workman-white-wall_23-2147772246.jpg",
alt: "Cheerful workman",
},
{
src: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990734.jpg",
alt: "Male plumber working",
},
{
src: "http://img.b2bpic.net/free-photo/coveralls-digitally-generated-car-cardboard-box-pointing_1134-941.jpg",
alt: "Technician in coveralls",
},
{
src: "http://img.b2bpic.net/free-photo/expressive-young-man-posing-winter-holidays_140725-138538.jpg",
alt: "Expressive young man",
},
]}
avatarText="Trusted by 1000+ local homes"
marqueeItems={[
{
type: "text",
text: "Licensed & Insured",
},
{
type: "text",
text: "24/7 Availability",
},
{
type: "text",
text: "Local Charlotte Experts",
},
{
type: "text",
text: "Upfront Pricing",
},
{
type: "text",
text: "Satisfaction Guaranteed",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "plain" }}
title="Charlotte's Trusted Plumbing & Electrical Experts"
description="Providing same-day service and reliable craftsmanship for all your home repair needs. Your satisfaction is our 5-star priority."
kpis={[
{ value: "4.6", label: "Star Rating" },
{ value: "40+", label: "Verified Reviews" },
{ value: "24/7", label: "Service Availability" }
]}
enableKpiAnimation={true}
buttons={[
{ text: "Get a Free Quote", href: "#contact" },
{ text: "Call Now", href: "tel:5551234567" }
]}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/female-plumber-working-fix-problems-client-s-house_23-2150990733.jpg", alt: "Female plumber working" },
{ src: "http://img.b2bpic.net/free-photo/cheerful-workman-white-wall_23-2147772246.jpg", alt: "Cheerful workman" },
{ src: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990734.jpg", alt: "Male plumber working" },
{ src: "http://img.b2bpic.net/free-photo/coveralls-digitally-generated-car-cardboard-box-pointing_1134-941.jpg", alt: "Technician in coveralls" },
{ src: "http://img.b2bpic.net/free-photo/expressive-young-man-posing-winter-holidays_140725-138538.jpg", alt: "Expressive young man" }
]}
avatarText="Trusted by 1000+ local homes"
marqueeItems={[
{ type: "text", text: "Licensed & Insured" },
{ type: "text", text: "24/7 Availability" },
{ type: "text", text: "Local Charlotte Experts" },
{ type: "text", text: "Upfront Pricing" },
{ type: "text", text: "Satisfaction Guaranteed" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
id: "f1",
title: "Fast Response",
author: "Dispatch",
description: "Same-day and next-day service options for your emergency needs.",
tags: [
"Speed",
"Emergency",
],
imageSrc: "http://img.b2bpic.net/free-photo/top-view-construction-tools-as-safety-helmet-paint-brush-open-end-wrench-white-background_141793-14410.jpg",
},
{
id: "f2",
title: "Upfront Pricing",
author: "Fairness",
description: "Transparent quotes with zero surprises. Honesty is our policy.",
tags: [
"Honest",
"Pricing",
],
imageSrc: "http://img.b2bpic.net/free-photo/young-loader-showing-something-clipboard-uniform-front-view_176474-21430.jpg",
},
{
id: "f3",
title: "Expert Technicians",
author: "Service",
description: "Derek, Jared, Roger, and Frederick provide professional results.",
tags: [
"Certified",
"Experienced",
],
imageSrc: "http://img.b2bpic.net/free-photo/electrician-installing-laying-electrical-cables-ceiling-inside-house_169016-53936.jpg",
},
]}
title="Why Choose Five Star?"
description="We treat every home like our own. Our commitment to honesty and fair pricing ensures you have a stress-free experience."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{ id: "f1", title: "Fast Response", author: "Dispatch", description: "Same-day and next-day service options for your emergency needs.", tags: ["Speed", "Emergency"], imageSrc: "http://img.b2bpic.net/free-photo/top-view-construction-tools-as-safety-helmet-paint-brush-open-end-wrench-white-background_141793-14410.jpg" },
{ id: "f2", title: "Upfront Pricing", author: "Fairness", description: "Transparent quotes with zero surprises. Honesty is our policy.", tags: ["Honest", "Pricing"], imageSrc: "http://img.b2bpic.net/free-photo/young-loader-showing-something-clipboard-uniform-front-view_176474-21430.jpg" },
{ id: "f3", title: "Expert Technicians", author: "Service", description: "Derek, Jared, Roger, and Frederick provide professional results.", tags: ["Certified", "Experienced"], imageSrc: "http://img.b2bpic.net/free-photo/electrician-installing-laying-electrical-cables-ceiling-inside-house_169016-53936.jpg" }
]}
title="Why Choose Five Star?"
description="We treat every home like our own. Our commitment to honesty and fair pricing ensures you have a stress-free experience."
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="Our Story"
title="Family-Owned, Professional Results"
description="Serving the Charlotte area for years, we combine the personal touch of a family business with the professional results you deserve."
subdescription="We are proud to be your local choice for comprehensive plumbing and electrical solutions."
icon={ShieldCheck}
imageSrc="http://img.b2bpic.net/free-photo/male-female-workers-wearing-work-clothes_273609-10806.jpg"
mediaAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="Our Story"
title="Family-Owned, Professional Results"
description="Serving the Charlotte area for years, we combine the personal touch of a family business with the professional results you deserve."
subdescription="We are proud to be your local choice for comprehensive plumbing and electrical solutions."
icon={ShieldCheck}
imageSrc="http://img.b2bpic.net/free-photo/male-female-workers-wearing-work-clothes_273609-10806.jpg"
mediaAnimation="blur-reveal"
/>
</div>
<div id="services" data-section="services">
<ProductCardThree
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "s1",
name: "Water Heater Repair",
price: "Expert Repair",
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-repairing-bicycle_23-2148138450.jpg",
},
{
id: "s2",
name: "Drain Clearing",
price: "Fast Service",
imageSrc: "http://img.b2bpic.net/free-photo/young-engineer-pointing-clipboard-uniform-looking-focused-front-view_176474-21311.jpg",
},
{
id: "s3",
name: "Septic Design",
price: "Custom Design",
imageSrc: "http://img.b2bpic.net/free-photo/investor-visiting-industry-40-solar-panels-plant-talking-with-engineers_482257-120497.jpg",
},
{
id: "s4",
name: "Electrical Panel Fix",
price: "Safety First",
imageSrc: "http://img.b2bpic.net/free-photo/animated-screwdriver-screw-still-life_23-2149911044.jpg",
},
{
id: "s5",
name: "Pipe Replacement",
price: "Renovation",
imageSrc: "http://img.b2bpic.net/free-photo/young-worker-holding-clipboard-pointing-side-uniform-front-view_176474-21694.jpg",
},
{
id: "s6",
name: "Garbage Disposal",
price: "Installation",
imageSrc: "http://img.b2bpic.net/free-photo/foreman-using-desktop-pc-writing-notes-while-working-auto-repair-office_637285-9304.jpg",
},
]}
title="Our Services"
description="Professional plumbing and electrical care to keep your home running smoothly."
/>
</div>
<div id="services" data-section="services">
<ProductCardThree
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{ id: "s1", name: "Water Heater Repair", price: "Expert Repair", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-repairing-bicycle_23-2148138450.jpg" },
{ id: "s2", name: "Drain Clearing", price: "Fast Service", imageSrc: "http://img.b2bpic.net/free-photo/young-engineer-pointing-clipboard-uniform-looking-focused-front-view_176474-21311.jpg" },
{ id: "s3", name: "Septic Design", price: "Custom Design", imageSrc: "http://img.b2bpic.net/free-photo/investor-visiting-industry-40-solar-panels-plant-talking-with-engineers_482257-120497.jpg" },
{ id: "s4", name: "Electrical Panel Fix", price: "Safety First", imageSrc: "http://img.b2bpic.net/free-photo/animated-screwdriver-screw-still-life_23-2149911044.jpg" },
{ id: "s5", name: "Pipe Replacement", price: "Renovation", imageSrc: "http://img.b2bpic.net/free-photo/young-worker-holding-clipboard-pointing-side-uniform-front-view_176474-21694.jpg" },
{ id: "s6", name: "Garbage Disposal", price: "Installation", imageSrc: "http://img.b2bpic.net/free-photo/foreman-using-desktop-pc-writing-notes-while-working-auto-repair-office_637285-9304.jpg" }
]}
title="Our Services"
description="Professional plumbing and electrical care to keep your home running smoothly."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "1000+",
description: "Jobs Completed",
},
{
id: "m2",
value: "5+",
description: "Experienced Staff",
},
{
id: "m3",
value: "4.6",
description: "Star Average",
},
]}
title="Our Impact"
description="Serving the local Charlotte community with integrity."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "1000+", description: "Jobs Completed" },
{ id: "m2", value: "5+", description: "Experienced Staff" },
{ id: "m3", value: "4.6", description: "Star Average" }
]}
title="Our Impact"
description="Serving the local Charlotte community with integrity."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
useInvertedBackground={true}
testimonial="Derek came out the same day to fix my water heater. Absolutely honest and fair price. Highly recommended!"
rating={5}
author="Sarah M."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/lifestyle-portrait-handsome-young-man-sitting-cafe-talking-friend-mobile-phone-with-wireless-earphones-laughing-smiling-listening-funny-podcast_1258-314334.jpg",
alt: "Sarah",
},
{
src: "http://img.b2bpic.net/free-photo/vertical-shot-young-musician-woman-learns-how-play-ukulele-sits-sofa-with-crossed-legs_1258-204931.jpg",
alt: "Customer One",
},
{
src: "http://img.b2bpic.net/free-photo/couple-changing-bulb-home_23-2147766978.jpg",
alt: "Customer Two",
},
{
src: "http://img.b2bpic.net/free-photo/person-paying-bill-restaurant-using-nfc-technology_23-2150039415.jpg",
alt: "Customer Three",
},
{
src: "http://img.b2bpic.net/free-photo/happy-young-girl-white-shirt-black-pants-pointing-with-index-finger-camera-smiling-cheerfully-sitting-chair-light-living-room_141793-94147.jpg",
alt: "Customer Four",
},
]}
ratingAnimation="slide-up"
avatarsAnimation="blur-reveal"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
useInvertedBackground={true}
testimonial="Derek came out the same day to fix my water heater. Absolutely honest and fair price. Highly recommended!"
rating={5}
author="Sarah M."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/lifestyle-portrait-handsome-young-man-sitting-cafe-talking-friend-mobile-phone-with-wireless-earphones-laughing-smiling-listening-funny-podcast_1258-314334.jpg", alt: "Sarah" },
{ src: "http://img.b2bpic.net/free-photo/vertical-shot-young-musician-woman-learns-how-play-ukulele-sits-sofa-with-crossed-legs_1258-204931.jpg", alt: "Customer One" },
{ src: "http://img.b2bpic.net/free-photo/couple-changing-bulb-home_23-2147766978.jpg", alt: "Customer Two" },
{ src: "http://img.b2bpic.net/free-photo/person-paying-bill-restaurant-using-nfc-technology_23-2150039415.jpg", alt: "Customer Three" },
{ src: "http://img.b2bpic.net/free-photo/happy-young-girl-white-shirt-black-pants-pointing-with-index-finger-camera-smiling-cheerfully-sitting-chair-light-living-room_141793-94147.jpg", alt: "Customer Four" }
]}
ratingAnimation="slide-up"
avatarsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "Do you offer emergency service?",
content: "Yes, we provide 24/7 service for your urgent plumbing and electrical issues.",
},
{
id: "q2",
title: "Are you licensed and insured?",
content: "Absolutely. Our technicians are fully qualified and experienced.",
},
{
id: "q3",
title: "What areas do you serve?",
content: "We proudly serve all of Charlotte, NC and the surrounding areas.",
},
]}
title="Common Questions"
description="Have questions about our plumbing or electrical services? Find answers here."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "Do you offer emergency service?", content: "Yes, we provide 24/7 service for your urgent plumbing and electrical issues." },
{ id: "q2", title: "Are you licensed and insured?", content: "Absolutely. Our technicians are fully qualified and experienced." },
{ id: "q3", title: "What areas do you serve?", content: "We proudly serve all of Charlotte, NC and the surrounding areas." }
]}
title="Common Questions"
description="Have questions about our plumbing or electrical services? Find answers here."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{
variant: "plain",
}}
title="Request a Free Quote"
description="Contact us today for professional and honest home service."
imageSrc="http://img.b2bpic.net/free-photo/expressive-young-man-posing-winter-holidays_140725-138557.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Contact Us"
useInvertedBackground={true}
background={{ variant: "plain" }}
title="Request a Free Quote"
description="Contact us today for professional and honest home service."
imageSrc="http://img.b2bpic.net/free-photo/expressive-young-man-posing-winter-holidays_140725-138557.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Five Star Electric & Plumbing"
columns={[
{
title: "Company",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Reviews",
href: "#testimonials",
},
],
},
{
title: "Services",
items: [
{
label: "Plumbing",
href: "#services",
},
{
label: "Electrical",
href: "#services",
},
],
},
{
title: "Contact",
items: [
{
label: "Charlotte, NC",
href: "#",
},
{
label: "555-123-4567",
href: "tel:5551234567",
},
],
},
]}
copyrightText="© 2024 Five Star Electric & Plumbing. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Five Star Electric & Plumbing"
columns={[
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Reviews", href: "#testimonials" }] },
{ title: "Services", items: [{ label: "Plumbing", href: "#services" }, { label: "Electrical", href: "#services" }] },
{ title: "Contact", items: [{ label: "Charlotte, NC", href: "#" }, { label: "555-123-4567", href: "tel:5551234567" }] }
]}
copyrightText="© 2024 Five Star Electric & Plumbing. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);