bender/a2fc5c26-5554-45da-babc-4b7fb6626368
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-22 03:36:34 +00:00
parent 5f7be49619
commit 6e4250f3d7
1 changed files with 175 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

546
src/app/page.tsx
View File

@@ -17,388 +17,192 @@ import { Award, CheckCircle, Star } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmallSizeLargeTitles"
background="fluid"
cardStyle="inset"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="medium"
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmallSizeLargeTitles"
background="fluid"
cardStyle="inset"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Services",
id: "features",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="TYH"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Services", id: "features" },
{ name: "Contact", id: "contact" },
]}
brandName="TYH"
button={{ text: "Get Quote", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "gradient-bars",
}}
title="Professional Landscaping for Your Home"
description="TYH Landscaping provides high-quality, reliable garden design and maintenance services tailored to your outdoor space needs."
kpis={[
{
value: "15+",
label: "Years Experience",
},
{
value: "500+",
label: "Projects Completed",
},
{
value: "98%",
label: "Satisfaction Rate",
},
]}
enableKpiAnimation={true}
imageSrc="http://img.b2bpic.net/free-photo/concentrated-gardener-growing-evergreen-plants-grey-haired-man-eyeglasses-wearing-blue-shirt-apron-caring-small-thujas-greenhouse-commercial-gardening-activity-summer-concept_74855-12740.jpg"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/man-growing-cultivating-plants-indoors_23-2149854847.jpg",
alt: "Man growing plants",
},
{
src: "http://img.b2bpic.net/free-photo/gardening_23-2148013403.jpg",
alt: "Gardening",
},
{
src: "http://img.b2bpic.net/free-photo/male-gardener-harvesting-flower-with-secateurs_23-2148165189.jpg",
alt: "Male gardener",
},
{
src: "http://img.b2bpic.net/free-photo/young-woman-taking-care-her-plants-greenhouse_23-2149037281.jpg",
alt: "Woman in greenhouse",
},
{
src: "http://img.b2bpic.net/free-photo/bush-pruning-with-hedge-trimmer_342744-536.jpg",
alt: "Bush pruning",
},
]}
avatarText="Trusted by over 500+ happy families"
marqueeItems={[
{
type: "text",
text: "Sustainable Garden Design",
},
{
type: "text",
text: "Eco-Friendly Lawn Care",
},
{
type: "text",
text: "Hardscape Installation",
},
{
type: "text",
text: "Year-Round Maintenance",
},
{
type: "text",
text: "Professional Horticulture",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "gradient-bars" }}
title="Professional Landscaping for Your Home"
description="TYH Landscaping provides high-quality, reliable garden design and maintenance services tailored to your outdoor space needs."
kpis={[
{ value: "15+", label: "Years Experience" },
{ value: "500+", label: "Projects Completed" },
{ value: "98%", label: "Satisfaction Rate" },
]}
enableKpiAnimation={true}
imageSrc="http://img.b2bpic.net/free-photo/concentrated-gardener-growing-evergreen-plants-grey-haired-man-eyeglasses-wearing-blue-shirt-apron-caring-small-thujas-greenhouse-commercial-gardening-activity-summer-concept_74855-12740.jpg"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/man-growing-cultivating-plants-indoors_23-2149854847.jpg", alt: "Man growing plants" },
{ src: "http://img.b2bpic.net/free-photo/gardening_23-2148013403.jpg", alt: "Gardening" },
{ src: "http://img.b2bpic.net/free-photo/male-gardener-harvesting-flower-with-secateurs_23-2148165189.jpg", alt: "Male gardener" },
{ src: "http://img.b2bpic.net/free-photo/young-woman-taking-care-her-plants-greenhouse_23-2149037281.jpg", alt: "Woman in greenhouse" },
{ src: "http://img.b2bpic.net/free-photo/bush-pruning-with-hedge-trimmer_342744-536.jpg", alt: "Bush pruning" },
]}
avatarText="Trusted by over 500+ happy families"
marqueeItems={[
{ type: "text", text: "Sustainable Garden Design" },
{ type: "text", text: "Eco-Friendly Lawn Care" },
{ type: "text", text: "Hardscape Installation" },
{ type: "text", text: "Year-Round Maintenance" },
{ type: "text", text: "Professional Horticulture" },
]}
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={true}
title="About TYH Landscaping"
description="We are a team of passionate landscapers dedicated to turning your outdoor dreams into reality. With deep expertise in horticulture and design, we ensure your property looks its best year-round."
imageSrc="http://img.b2bpic.net/free-photo/closeup-shot-hand-trowel-green-grass_181624-26501.jpg"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={true}
title="About TYH Landscaping"
description="We are a team of passionate landscapers dedicated to turning your outdoor dreams into reality. With deep expertise in horticulture and design, we ensure your property looks its best year-round."
imageSrc="http://img.b2bpic.net/free-photo/closeup-shot-hand-trowel-green-grass_181624-26501.jpg"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="Our Specialized Services"
description="From routine maintenance to complete landscape renovations, we cover it all."
accordionItems={[
{
id: "1",
title: "Lawn Maintenance",
content: "Regular mowing, trimming, and aeration to keep your lawn healthy.",
},
{
id: "2",
title: "Garden Design",
content: "Custom landscape architecture to fit your lifestyle.",
},
{
id: "3",
title: "Hardscaping",
content: "Expert installation of paths, driveways, and walls.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-gardening-compositio_23-2148127875.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="Our Specialized Services"
description="From routine maintenance to complete landscape renovations, we cover it all."
accordionItems={[
{ id: "1", title: "Lawn Maintenance", content: "Regular mowing, trimming, and aeration to keep your lawn healthy." },
{ id: "2", title: "Garden Design", content: "Custom landscape architecture to fit your lifestyle." },
{ id: "3", title: "Hardscaping", content: "Expert installation of paths, driveways, and walls." },
]}
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-gardening-compositio_23-2148127875.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="portfolio" data-section="portfolio">
<ProductCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "1",
name: "Modern Patio Design",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-photo/town-square-shenzhen_1359-1110.jpg",
},
{
id: "2",
name: "Backyard Garden",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-photo/walkway-tree_1150-12643.jpg",
},
{
id: "3",
name: "Driveway Stone",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-photo/bobblestone-path-with-moss_23-2151942457.jpg",
},
{
id: "4",
name: "Flower Bed Install",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-garden_23-2147695738.jpg",
},
{
id: "5",
name: "Garden Pond Area",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-gardener-holding-trimmer-working-yard_342744-541.jpg",
},
{
id: "6",
name: "Full Garden Revamp",
price: "Custom",
imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-irises-garden-daytime_181624-17342.jpg",
},
]}
title="Recent Landscape Projects"
description="Browse some of our favorite transformations."
/>
</div>
<div id="portfolio" data-section="portfolio">
<ProductCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{ id: "1", name: "Modern Patio Design", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/town-square-shenzhen_1359-1110.jpg" },
{ id: "2", name: "Backyard Garden", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/walkway-tree_1150-12643.jpg" },
{ id: "3", name: "Driveway Stone", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/bobblestone-path-with-moss_23-2151942457.jpg" },
{ id: "4", name: "Flower Bed Install", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-garden_23-2147695738.jpg" },
{ id: "5", name: "Garden Pond Area", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-gardener-holding-trimmer-working-yard_342744-541.jpg" },
{ id: "6", name: "Full Garden Revamp", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-irises-garden-daytime_181624-17342.jpg" },
]}
title="Recent Landscape Projects"
description="Browse some of our favorite transformations."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "100+",
title: "Happy Clients",
description: "Families served",
icon: CheckCircle,
},
{
id: "m2",
value: "50+",
title: "Trees Planted",
description: "Supporting local nature",
icon: Star,
},
{
id: "m3",
value: "12",
title: "Awards Won",
description: "Recognition for design",
icon: Award,
},
]}
title="Our Impact"
description="Numbers speak to our commitment to excellence."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "100+", title: "Happy Clients", description: "Families served", icon: CheckCircle },
{ id: "m2", value: "50+", title: "Trees Planted", description: "Supporting local nature", icon: Star },
{ id: "m3", value: "12", title: "Awards Won", description: "Recognition for design", icon: Award },
]}
title="Our Impact"
description="Numbers speak to our commitment to excellence."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Sarah J.",
role: "Homeowner",
company: "Client",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-senior-couple-dancing_23-2149071573.jpg",
},
{
id: "2",
name: "Mike D.",
role: "Business Owner",
company: "Client",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-good-looking-young-caucasian-man-blue-t-shirt-gloves-smiling-with-teeth-being-tired-from-hard-work-garden-farmer-planting-leaves-countryside-house_176420-19908.jpg",
},
{
id: "3",
name: "Lisa R.",
role: "Architect",
company: "Client",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/old-women-balcony-with-coffee_1398-4083.jpg",
},
{
id: "4",
name: "Tom K.",
role: "Developer",
company: "Client",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/fork-harrows-grass_1339-7746.jpg",
},
{
id: "5",
name: "Jane W.",
role: "Homeowner",
company: "Client",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-outdoors-portrait-beautiful-cheerful-bearded-caucasian-farmer-blue-shirt-gloves-smiling-working-with-garden-tools-his-farm-near-countryside-house_176420-19905.jpg",
},
]}
kpiItems={[
{
value: "5.0",
label: "Avg Rating",
},
{
value: "100%",
label: "Reliability",
},
{
value: "100+",
label: "Referrals",
},
]}
title="What Clients Say"
description="Trust the experience of our satisfied clients."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{ id: "1", name: "Sarah J.", role: "Homeowner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-senior-couple-dancing_23-2149071573.jpg" },
{ id: "2", name: "Mike D.", role: "Business Owner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-good-looking-young-caucasian-man-blue-t-shirt-gloves-smiling-with-teeth-being-tired-from-hard-work-garden-farmer-planting-leaves-countryside-house_176420-19908.jpg" },
{ id: "3", name: "Lisa R.", role: "Architect", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/old-women-balcony-with-coffee_1398-4083.jpg" },
{ id: "4", name: "Tom K.", role: "Developer", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fork-harrows-grass_1339-7746.jpg" },
{ id: "5", name: "Jane W.", role: "Homeowner", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-outdoors-portrait-beautiful-cheerful-bearded-caucasian-farmer-blue-shirt-gloves-smiling-working-with-garden-tools-his-farm-near-countryside-house_176420-19905.jpg" },
]}
kpiItems={[
{ value: "5.0", label: "Avg Rating" },
{ value: "100%", label: "Reliability" },
{ value: "100+", label: "Referrals" },
]}
title="What Clients Say"
description="Trust the experience of our satisfied clients."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Do you provide free estimates?",
content: "Yes, we offer complimentary on-site consultations.",
},
{
id: "f2",
title: "What areas do you service?",
content: "We cover a 30-mile radius around our HQ.",
},
{
id: "f3",
title: "Are you licensed and insured?",
content: "Absolutely, we are fully licensed and insured.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/greenhouse-owner-presenting-flowers-options-potential-customer-retailer_158595-7007.jpg"
title="Common Questions"
description="Find quick answers to your landscaping concerns."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Do you provide free estimates?", content: "Yes, we offer complimentary on-site consultations." },
{ id: "f2", title: "What areas do you service?", content: "We cover a 30-mile radius around our HQ." },
{ id: "f3", title: "Are you licensed and insured?", content: "Absolutely, we are fully licensed and insured." },
]}
imageSrc="http://img.b2bpic.net/free-photo/greenhouse-owner-presenting-flowers-options-potential-customer-retailer_158595-7007.jpg"
title="Common Questions"
description="Find quick answers to your landscaping concerns."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Get a Free Quote"
description="Ready for a beautiful yard? Reach out to our expert landscaping team today."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Tell us about your project...",
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/positive-male-landscaper-cutting-top-overgrown-thujas-with-motorized-hedge-trimmer-park-side_7502-10163.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Get a Free Quote"
description="Ready for a beautiful yard? Reach out to our expert landscaping team today."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true },
]}
textarea={{ name: "message", placeholder: "Tell us about your project...", required: true }}
imageSrc="http://img.b2bpic.net/free-photo/positive-male-landscaper-cutting-top-overgrown-thujas-with-motorized-hedge-trimmer-park-side_7502-10163.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="TYH"
columns={[
{
title: "Services",
items: [
{
label: "Lawn Care",
href: "#",
},
{
label: "Garden Design",
href: "#",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "#",
},
{
label: "Careers",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="TYH"
columns={[
{
title: "Services", items: [
{ label: "Lawn Care", href: "#" },
{ label: "Garden Design", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Careers", href: "#" },
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);