Merge version_1 into main #2
452
src/app/page.tsx
452
src/app/page.tsx
@@ -26,341 +26,135 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="The Fence Man"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="The Fence Man"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Expert Fencing Solutions Built to Last"
|
||||
description="From installation to repairs, The Fence Man delivers quality craftsmanship and honest service to homeowners and businesses. Get a free estimate today."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg?_wi=1",
|
||||
imageAlt: "Professional fence installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg?_wi=1",
|
||||
imageAlt: "Commercial fencing project",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg?_wi=2",
|
||||
imageAlt: "Residential gate installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg?_wi=2",
|
||||
imageAlt: "Backyard fence repair",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg?_wi=3",
|
||||
imageAlt: "Custom wood fence",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg?_wi=3",
|
||||
imageAlt: "Fence installation expert",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg?_wi=4",
|
||||
imageAlt: "Beautiful privacy fence",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg?_wi=4",
|
||||
imageAlt: "Modern metal gate",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg?_wi=5",
|
||||
imageAlt: "Backyard fence renovation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg?_wi=5",
|
||||
imageAlt: "Industrial perimeter fencing",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Request Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-smiling-man-with-beard-shirt-happily-eating-pizza-while-spending-time-work-modern-office_574295-5876.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151098617.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-handsome-cheerful-gardener-smiling-taking-care-plants_176420-3838.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 2000+ local homeowners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Residential",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Commercial",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Custom Gates",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Repairs",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Security",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{ variant: "plain" }}
|
||||
title="Expert Fencing Solutions Built to Last"
|
||||
description="From installation to repairs, The Fence Man delivers quality craftsmanship and honest service to homeowners and businesses. Get a free estimate today."
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg", imageAlt: "Professional fence installation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg", imageAlt: "Commercial fencing project" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg", imageAlt: "Residential gate installation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg", imageAlt: "Backyard fence repair" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg", imageAlt: "Custom wood fence" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg", imageAlt: "Fence installation expert" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg", imageAlt: "Beautiful privacy fence" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg", imageAlt: "Modern metal gate" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg", imageAlt: "Backyard fence renovation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg", imageAlt: "Industrial perimeter fencing" },
|
||||
]}
|
||||
buttons={[{ text: "Request Free Quote", href: "#contact" }]}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-smiling-man-with-beard-shirt-happily-eating-pizza-while-spending-time-work-modern-office_574295-5876.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151098617.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-handsome-cheerful-gardener-smiling-taking-care-plants_176420-3838.jpg", alt: "Client 5" },
|
||||
]}
|
||||
avatarText="Trusted by 2000+ local homeowners"
|
||||
marqueeItems={[{ type: "text", text: "Residential" }, { type: "text", text: "Commercial" }, { type: "text", text: "Custom Gates" }, { type: "text", text: "Repairs" }, { type: "text", text: "Security" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Crafting Quality Boundaries"
|
||||
description="With over a decade of experience, we specialize in building durable, aesthetically pleasing fences for residential and commercial spaces. Our commitment to reliability and quality ensures your property is protected with integrity."
|
||||
metrics={[
|
||||
{
|
||||
value: "15+ Years",
|
||||
title: "Experience",
|
||||
},
|
||||
{
|
||||
value: "2000+",
|
||||
title: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Client Satisfaction",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/back-view-young-man-basketball-field_23-2148767587.jpg?_wi=1"
|
||||
imageAlt="Professional fence craftsman working"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Crafting Quality Boundaries"
|
||||
description="With over a decade of experience, we specialize in building durable, aesthetically pleasing fences for residential and commercial spaces. Our commitment to reliability and quality ensures your property is protected with integrity."
|
||||
metrics={[{ value: "15+ Years", title: "Experience" }, { value: "2000+", title: "Projects Completed" }, { value: "100%", title: "Client Satisfaction" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/back-view-young-man-basketball-field_23-2148767587.jpg"
|
||||
imageAlt="Professional fence craftsman working"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Residential Wood Fencing",
|
||||
description: "Premium wood installations providing privacy, aesthetic appeal, and long-term durability for your home.",
|
||||
icon: Building2,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149682001.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149682001.jpg?_wi=2",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5910.jpg?_wi=6",
|
||||
imageAlt: "residential fence installation professional",
|
||||
},
|
||||
{
|
||||
title: "Commercial Metal Fencing",
|
||||
description: "Robust security perimeters designed for business premises requiring strength and professional maintenance.",
|
||||
icon: Shield,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-background-with-floor_23-2149207761.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-background-with-floor_23-2149207761.jpg?_wi=2",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-fence-with-parking-background_23-2148242252.jpg?_wi=6",
|
||||
imageAlt: "commercial metal fencing industrial",
|
||||
},
|
||||
{
|
||||
title: "Repair & Replacement",
|
||||
description: "Expert diagnostic services and repairs for storm damage, wear, or complete fence system updates.",
|
||||
icon: RefreshCw,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149682001.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-background-with-floor_23-2149207761.jpg?_wi=3",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/back-view-young-man-basketball-field_23-2148767587.jpg?_wi=2",
|
||||
imageAlt: "professional fencing expert work",
|
||||
},
|
||||
]}
|
||||
title="Our Specialized Fencing Services"
|
||||
description="Whether you need a new privacy fence or a commercial security system, we provide tailored solutions that combine durability with expert installation."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Residential Wood Fencing", description: "Premium wood installations providing privacy, aesthetic appeal, and long-term durability for your home.", icon: Building2,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149682001.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149682001.jpg" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Commercial Metal Fencing", description: "Robust security perimeters designed for business premises requiring strength and professional maintenance.", icon: Shield,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-background-with-floor_23-2149207761.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-background-with-floor_23-2149207761.jpg" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Repair & Replacement", description: "Expert diagnostic services and repairs for storm damage, wear, or complete fence system updates.", icon: RefreshCw,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149682001.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-background-with-floor_23-2149207761.jpg" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Specialized Fencing Services"
|
||||
description="Whether you need a new privacy fence or a commercial security system, we provide tailored solutions that combine durability with expert installation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
handle: "@ homeowner",
|
||||
testimonial: "The Fence Man installed a beautiful wood fence for our backyard. Quality and speed were outstanding.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
handle: "@ small business owner",
|
||||
testimonial: "Top-notch work on our shop's perimeter fence. Very professional and highly recommended for any commercial needs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
handle: "@ homeowner",
|
||||
testimonial: "The repair work they did after the storm was fast and perfect. Truly reliable local experts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-man-with-beard-shirt-happily-eating-pizza-while-spending-time-work-modern-office_574295-5876.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
handle: "@ property manager",
|
||||
testimonial: "We use them for all our property fencing requirements. Always on time and excellent workmanship.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151098617.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Linda Thompson",
|
||||
handle: "@ homeowner",
|
||||
testimonial: "Wonderful service! The new privacy fence looks better than I imagined. Very affordable and professional.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-cheerful-gardener-smiling-taking-care-plants_176420-3838.jpg",
|
||||
},
|
||||
]}
|
||||
title="Trusted by Our Local Community"
|
||||
description="Hear what our clients have to say about the quality, professionalism, and reliability of our fencing services."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Johnson", handle: "@ homeowner", testimonial: "The Fence Man installed a beautiful wood fence for our backyard. Quality and speed were outstanding.", imageSrc: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg" },
|
||||
{ id: "2", name: "Michael Chen", handle: "@ small business owner", testimonial: "Top-notch work on our shop's perimeter fence. Very professional and highly recommended for any commercial needs.", imageSrc: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg" },
|
||||
{ id: "3", name: "Emily Rodriguez", handle: "@ homeowner", testimonial: "The repair work they did after the storm was fast and perfect. Truly reliable local experts.", imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-man-with-beard-shirt-happily-eating-pizza-while-spending-time-work-modern-office_574295-5876.jpg" },
|
||||
{ id: "4", name: "David Kim", handle: "@ property manager", testimonial: "We use them for all our property fencing requirements. Always on time and excellent workmanship.", imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151098617.jpg" },
|
||||
{ id: "5", name: "Linda Thompson", handle: "@ homeowner", testimonial: "Wonderful service! The new privacy fence looks better than I imagined. Very affordable and professional.", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-cheerful-gardener-smiling-taking-care-plants_176420-3838.jpg" },
|
||||
]}
|
||||
title="Trusted by Our Local Community"
|
||||
description="Hear what our clients have to say about the quality, professionalism, and reliability of our fencing services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Ready for a Fence Upgrade?"
|
||||
description="Send us your request for a free, no-obligation estimate. We'll get back to you within 24 hours."
|
||||
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...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/people-helping-each-other-community_23-2149139760.jpg"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Ready for a Fence Upgrade?"
|
||||
description="Send us your request for a free, no-obligation estimate. We'll get back to you within 24 hours."
|
||||
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...", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/people-helping-each-other-community_23-2149139760.jpg"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="The Fence Man"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Support", items: [{ label: "Free Quote", href: "#contact" }, { label: "FAQ", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
logoText="The Fence Man"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user