Update src/app/page.tsx
This commit is contained in:
403
src/app/page.tsx
403
src/app/page.tsx
@@ -28,298 +28,133 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="LocalServicePro"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "About", id: "metrics" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="LocalServicePro"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Your Trusted Local Experts for Home Services"
|
||||
description="Fast, reliable, and professional solutions right in your neighborhood. Book your free estimate today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:+18005550123",
|
||||
},
|
||||
{
|
||||
text: "Get Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=htof8a",
|
||||
imageAlt: "Technician working",
|
||||
},
|
||||
{
|
||||
imageSrc: "hero-2",
|
||||
imageAlt: "Home renovation",
|
||||
},
|
||||
{
|
||||
imageSrc: "hero-3",
|
||||
imageAlt: "Quality result",
|
||||
},
|
||||
{
|
||||
imageSrc: "hero-4",
|
||||
imageAlt: "Checking quality",
|
||||
},
|
||||
{
|
||||
imageSrc: "hero-5",
|
||||
imageAlt: "Service vehicle",
|
||||
},
|
||||
{
|
||||
imageSrc: "hero-6",
|
||||
imageAlt: "Tool workspace",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Your Trusted Local Experts for Home Services"
|
||||
description="Fast, reliable, and professional solutions right in your neighborhood. Book your free estimate today."
|
||||
buttons={[
|
||||
{ text: "Call Now", href: "tel:+18005550123" },
|
||||
{ text: "Get Free Quote", href: "#contact" }
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=htof8a", imageAlt: "Technician working" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ucnenn", imageAlt: "Home renovation" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6l5gf4", imageAlt: "Quality result" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j0u52j", imageAlt: "Checking quality" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2o28wt", imageAlt: "Service vehicle" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Google",
|
||||
"Yelp",
|
||||
"BBB",
|
||||
"Angi",
|
||||
"HomeAdvisor",
|
||||
"Thumbtack",
|
||||
"Houzz",
|
||||
]}
|
||||
title="Trusted by Local Homeowners"
|
||||
description="See where our customers share their experiences."
|
||||
/>
|
||||
</div>
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["Google", "Yelp", "BBB", "Angi", "HomeAdvisor", "Thumbtack", "Houzz"]}
|
||||
title="Trusted by Local Homeowners"
|
||||
description="See where our customers share their experiences."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Expert Repair",
|
||||
descriptions: [
|
||||
"Fast diagnosis and fix for all household issues.",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hjj8ah",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Installation",
|
||||
descriptions: [
|
||||
"Professional setup for new equipment and systems.",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ohklw1",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Maintenance",
|
||||
descriptions: [
|
||||
"Routine checks to ensure longevity and peak performance.",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=husz9h",
|
||||
},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="From emergency repairs to expert installations, we handle it all with care."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "1", title: "Expert Repair", descriptions: ["Fast diagnosis and fix for all household issues."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hjj8ah" },
|
||||
{ id: "2", title: "Installation", descriptions: ["Professional setup for new equipment and systems."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ohklw1" },
|
||||
{ id: "3", title: "Maintenance", descriptions: ["Routine checks to ensure longevity and peak performance."], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=husz9h" }
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="From emergency repairs to expert installations, we handle it all with care."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "15+",
|
||||
title: "Years in Business",
|
||||
description: "Serving the community since 2008.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "24/7",
|
||||
title: "Emergency Support",
|
||||
description: "Always ready to help when you need us.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "100%",
|
||||
title: "Satisfaction",
|
||||
description: "Your guarantee is our priority.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="Years of experience and local dedication set us apart."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "1", value: "15+", title: "Years in Business", description: "Serving the community since 2008.", icon: Award },
|
||||
{ id: "2", value: "24/7", title: "Emergency Support", description: "Always ready to help when you need us.", icon: Shield },
|
||||
{ id: "3", value: "100%", title: "Satisfaction", description: "Your guarantee is our priority.", icon: CheckCircle }
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="Years of experience and local dedication set us apart."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
handle: "@sarah_homeowner",
|
||||
testimonial: "Excellent service! Fixed my plumbing issue in no time. Highly recommend.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vtik39",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael R.",
|
||||
handle: "@mikey_r",
|
||||
testimonial: "Very professional and friendly team. My house looks amazing now.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=toz2vo",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily D.",
|
||||
handle: "@emily_d",
|
||||
testimonial: "Best service ever. Reliable, fast, and very affordable.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=najb1e",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David W.",
|
||||
handle: "@david_w",
|
||||
testimonial: "Super professional service. I will definitely call them again.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=awb8q2",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Linda M.",
|
||||
handle: "@linda_m",
|
||||
testimonial: "Great work! They arrived on time and finished very quickly.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6l1hbo",
|
||||
},
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="Read why local families trust us with their homes."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", handle: "@sarah_homeowner", testimonial: "Excellent service! Fixed my plumbing issue in no time. Highly recommend.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vtik39" },
|
||||
{ id: "2", name: "Michael R.", handle: "@mikey_r", testimonial: "Very professional and friendly team. My house looks amazing now.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=toz2vo" },
|
||||
{ id: "3", name: "Emily D.", handle: "@emily_d", testimonial: "Best service ever. Reliable, fast, and very affordable.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=najb1e" },
|
||||
{ id: "4", name: "David W.", handle: "@david_w", testimonial: "Super professional service. I will definitely call them again.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=awb8q2" },
|
||||
{ id: "5", name: "Linda M.", handle: "@linda_m", testimonial: "Great work! They arrived on time and finished very quickly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6l1hbo" }
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="Read why local families trust us with their homes."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do you offer same-day service?",
|
||||
content: "Yes, we offer emergency same-day services for urgent issues.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Are you licensed and insured?",
|
||||
content: "Absolutely, we are fully licensed and insured for your peace of mind.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you offer free estimates?",
|
||||
content: "Yes, we provide free estimates on all our service projects.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Get quick answers to common questions about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "Do you offer same-day service?", content: "Yes, we offer emergency same-day services for urgent issues." },
|
||||
{ id: "2", title: "Are you licensed and insured?", content: "Absolutely, we are fully licensed and insured for your peace of mind." },
|
||||
{ id: "3", title: "Do you offer free estimates?", content: "Yes, we provide free estimates on all our service projects." }
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Get quick answers to common questions about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Contact Us"
|
||||
title="Ready to Get Started?"
|
||||
description="Fill out the form below or give us a call today for a free quote."
|
||||
inputPlaceholder="Enter your email for inquiries"
|
||||
buttonText="Submit Inquiry"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Contact Us"
|
||||
title="Ready to Get Started?"
|
||||
description="Fill out the form below or give us a call today for a free quote."
|
||||
inputPlaceholder="Enter your email for inquiries"
|
||||
buttonText="Submit Inquiry"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#metrics",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Repairs",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Installations",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 LocalServicePro. All rights reserved."
|
||||
bottomRightText="Serving your community for over 15 years."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#metrics" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Services", items: [{ label: "Repairs", href: "#features" }, { label: "Installations", href: "#features" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 LocalServicePro. All rights reserved."
|
||||
bottomRightText="Serving your community for over 15 years."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user