Merge version_1 into main #1
459
src/app/page.tsx
459
src/app/page.tsx
@@ -29,337 +29,152 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="GreenScapes"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="GreenScapes"
|
||||
button={{ text: "Get a Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Bringing Your Landscape to Life"
|
||||
description="Professional residential and commercial landscaping services tailored to your needs. From garden design to regular maintenance, we create outdoor living spaces you will love."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xztj49"
|
||||
imageAlt="Professional landscaping project"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ji0gu9",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xy2pow",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jztn4x",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ryeah4",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fauerx",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ happy homeowners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Garden Design",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Lawn Care",
|
||||
icon: Sun,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Tree Pruning",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Irrigation",
|
||||
icon: Droplets,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hardscaping",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Bringing Your Landscape to Life"
|
||||
description="Professional residential and commercial landscaping services tailored to your needs. From garden design to regular maintenance, we create outdoor living spaces you will love."
|
||||
buttons={[{ text: "Get a Quote", href: "#contact" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xztj49"
|
||||
imageAlt="Professional landscaping project"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ji0gu9", alt: "Client 1" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xy2pow", alt: "Client 2" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jztn4x", alt: "Client 3" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ryeah4", alt: "Client 4" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fauerx", alt: "Client 5" },
|
||||
]}
|
||||
avatarText="Trusted by 500+ happy homeowners"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Garden Design" },
|
||||
{ type: "text-icon", text: "Lawn Care", icon: Sun },
|
||||
{ type: "text", text: "Tree Pruning" },
|
||||
{ type: "text-icon", text: "Irrigation", icon: Droplets },
|
||||
{ type: "text", text: "Hardscaping" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Our Philosophy of Care",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ubo71d",
|
||||
alt: "Garden design process",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Our Philosophy of Care" },
|
||||
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ubo71d", alt: "Garden design process" },
|
||||
]}
|
||||
buttons={[{ text: "Learn More", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
icon: Leaf,
|
||||
title: "Garden Design",
|
||||
description: "Customized garden concepts designed for year-round beauty.",
|
||||
},
|
||||
{
|
||||
icon: Sun,
|
||||
title: "Lawn Care",
|
||||
description: "Regular maintenance to keep your lawn green and healthy.",
|
||||
},
|
||||
{
|
||||
icon: Droplets,
|
||||
title: "Irrigation",
|
||||
description: "Smart irrigation systems to optimize water use.",
|
||||
},
|
||||
]}
|
||||
title="Our Expert Services"
|
||||
description="Comprehensive landscaping solutions to transform your outdoor space."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ icon: Leaf, title: "Garden Design", description: "Customized garden concepts designed for year-round beauty." },
|
||||
{ icon: Sun, title: "Lawn Care", description: "Regular maintenance to keep your lawn green and healthy." },
|
||||
{ icon: Droplets, title: "Irrigation", description: "Smart irrigation systems to optimize water use." },
|
||||
]}
|
||||
title="Our Expert Services"
|
||||
description="Comprehensive landscaping solutions to transform your outdoor space."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
icon: Leaf,
|
||||
title: "Projects Completed",
|
||||
value: "500+",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
icon: Trophy,
|
||||
title: "Satisfied Clients",
|
||||
value: "450+",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
icon: Clock,
|
||||
title: "Years Experience",
|
||||
value: "15",
|
||||
},
|
||||
]}
|
||||
title="Measured Excellence"
|
||||
description="Quality we track every step of the way."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", icon: Leaf, title: "Projects Completed", value: "500+" },
|
||||
{ id: "2", icon: Trophy, title: "Satisfied Clients", value: "450+" },
|
||||
{ id: "3", icon: Clock, title: "Years Experience", value: "15" },
|
||||
]}
|
||||
title="Measured Excellence"
|
||||
description="Quality we track every step of the way."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Homeowner",
|
||||
testimonial: "Excellent service, truly transformed our backyard.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ji0gu9",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark R.",
|
||||
role: "Homeowner",
|
||||
testimonial: "Reliable and professional team. Highly recommended.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xy2pow",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Anna P.",
|
||||
role: "Business Owner",
|
||||
testimonial: "Their design work for our commercial front is perfect.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jztn4x",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David W.",
|
||||
role: "Homeowner",
|
||||
testimonial: "Finally have the garden I've always dreamed of.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ryeah4",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Helen K.",
|
||||
role: "Homeowner",
|
||||
testimonial: "So pleased with the maintenance schedule they set up.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fauerx",
|
||||
},
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="What our homeowners say about our work."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", role: "Homeowner", testimonial: "Excellent service, truly transformed our backyard.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ji0gu9" },
|
||||
{ id: "2", name: "Mark R.", role: "Homeowner", testimonial: "Reliable and professional team. Highly recommended.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xy2pow" },
|
||||
{ id: "3", name: "Anna P.", role: "Business Owner", testimonial: "Their design work for our commercial front is perfect.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jztn4x" },
|
||||
{ id: "4", name: "David W.", role: "Homeowner", testimonial: "Finally have the garden I've always dreamed of.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ryeah4" },
|
||||
{ id: "5", name: "Helen K.", role: "Homeowner", testimonial: "So pleased with the maintenance schedule they set up.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fauerx" },
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="What our homeowners say about our work."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"LawnCo",
|
||||
"GardenPro",
|
||||
"BioPlants",
|
||||
"AquaFlow",
|
||||
"TreeMasters",
|
||||
"SoilBest",
|
||||
"GreenTech",
|
||||
]}
|
||||
title="Trusted Partners"
|
||||
description="We collaborate with the industry's finest."
|
||||
/>
|
||||
</div>
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
names={["LawnCo", "GardenPro", "BioPlants", "AquaFlow", "TreeMasters", "SoilBest", "GreenTech"]}
|
||||
title="Trusted Partners"
|
||||
description="We collaborate with the industry's finest."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you do site consultations?",
|
||||
content: "Yes, we offer complimentary on-site consultations.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Are you licensed and insured?",
|
||||
content: "Yes, we are fully licensed and carry complete liability insurance.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What areas do you serve?",
|
||||
content: "We serve a 50-mile radius around our home base.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common answers about our processes and services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you do site consultations?", content: "Yes, we offer complimentary on-site consultations." },
|
||||
{ id: "f2", title: "Are you licensed and insured?", content: "Yes, we are fully licensed and carry complete liability insurance." },
|
||||
{ id: "f3", title: "What areas do you serve?", content: "We serve a 50-mile radius around our home base." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common answers about our processes and services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Get in touch"
|
||||
title="Ready to transform your garden?"
|
||||
description="Reach out today to discuss your project needs and get a free estimate."
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule Consultation",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get in touch"
|
||||
title="Ready to transform your garden?"
|
||||
description="Reach out today to discuss your project needs and get a free estimate."
|
||||
buttons={[{ text: "Schedule Consultation", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="GreenScapes"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Lawn Care",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Garden Design",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="GreenScapes"
|
||||
columns={[
|
||||
{ title: "Services", items: [{ label: "Lawn Care", href: "#" }, { label: "Garden Design", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user