Merge version_1 into main #2
359
src/app/page.tsx
359
src/app/page.tsx
@@ -25,275 +25,108 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Fence Builders Inc."
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Fence Builders Inc."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Sturdy Fences, Solid Craftsmanship."
|
||||
description="Fence Builders Inc. provides top-tier fencing solutions for residential and commercial properties. Secure your perimeter with style and durability."
|
||||
tag="Expert Fencing Services"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-spraying-powder-paint_23-2149714280.jpg?_wi=1",
|
||||
imageAlt: "Professional fence installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-spraying-powder-paint_23-2149714280.jpg?_wi=2",
|
||||
imageAlt: "Residential fencing project",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/landscape-shot-brown-wooden-fence-mini-forest-with-clear-blue-sky_181624-17330.jpg?_wi=1",
|
||||
imageAlt: "Cedar privacy fence installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-field-grasses-with-wooden-gate-surrounded-by-green-trees_181624-19068.jpg?_wi=1",
|
||||
imageAlt: "Farm post and rail fencing",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/charming-girl-stands-near-gate_8353-7875.jpg?_wi=1",
|
||||
imageAlt: "Decorative garden fencing",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Trusted by over 500+ Local Families"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Sturdy Fences, Solid Craftsmanship."
|
||||
description="Fence Builders Inc. provides top-tier fencing solutions for residential and commercial properties. Secure your perimeter with style and durability."
|
||||
tag="Expert Fencing Services"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-spraying-powder-paint_23-2149714280.jpg", imageAlt: "Professional fence installation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/landscape-shot-brown-wooden-fence-mini-forest-with-clear-blue-sky_181624-17330.jpg", imageAlt: "Cedar privacy fence installation" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Trusted by over 500+ Local Families"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardEight
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Premium Materials",
|
||||
description: "We source only the best wood, vinyl, and metal materials for maximum durability.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/old-embankment-along-seashore-sky-with-wisps-cloud-natural-concept-awaiting-winter-storm-season_166373-8779.jpg",
|
||||
imageAlt: "Premium materials",
|
||||
},
|
||||
{
|
||||
title: "Expert Installation",
|
||||
description: "Our certified team ensures precision in every fence post and gate alignment.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-leaning-garden-fence-with-holding-travelling-suitcase-bag-outdoors_23-2148221980.jpg",
|
||||
imageAlt: "Expert installation",
|
||||
},
|
||||
{
|
||||
title: "Custom Designs",
|
||||
description: "We build fences tailored to your property's unique landscape and style requirements.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/charming-girl-stands-near-gate_8353-7875.jpg?_wi=2",
|
||||
imageAlt: "Custom designs",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Fence Builders Inc."
|
||||
description="We blend quality materials, expert workmanship, and timeless design to provide fences that stand the test of time."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardEight
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Premium Materials", description: "We source only the best wood, vinyl, and metal materials for maximum durability.", imageSrc: "http://img.b2bpic.net/free-photo/old-embankment-along-seashore-sky-with-wisps-cloud-natural-concept-awaiting-winter-storm-season_166373-8779.jpg", imageAlt: "Premium materials" },
|
||||
{ title: "Expert Installation", description: "Our certified team ensures precision in every fence post and gate alignment.", imageSrc: "http://img.b2bpic.net/free-photo/woman-leaning-garden-fence-with-holding-travelling-suitcase-bag-outdoors_23-2148221980.jpg", imageAlt: "Expert installation" },
|
||||
{ title: "Custom Designs", description: "We build fences tailored to your property's unique landscape and style requirements.", imageSrc: "http://img.b2bpic.net/free-photo/charming-girl-stands-near-gate_8353-7875.jpg", imageAlt: "Custom designs" },
|
||||
]}
|
||||
title="Why Choose Fence Builders Inc."
|
||||
description="We blend quality materials, expert workmanship, and timeless design to provide fences that stand the test of time."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Cedar Wood Privacy",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/landscape-shot-brown-wooden-fence-mini-forest-with-clear-blue-sky_181624-17330.jpg?_wi=2",
|
||||
imageAlt: "Cedar fence",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Black Aluminum Picket",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/charming-girl-stands-near-gate_8353-7875.jpg?_wi=3",
|
||||
imageAlt: "Aluminum fence",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "White Vinyl Privacy",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg",
|
||||
imageAlt: "Vinyl fence",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Chain Link Security",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/night-portrait-girl-model-wear-jeans-leather-jacket-against-iron-fence_627829-11279.jpg",
|
||||
imageAlt: "Chain link fence",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Farm Post & Rail",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-field-grasses-with-wooden-gate-surrounded-by-green-trees_181624-19068.jpg?_wi=2",
|
||||
imageAlt: "Farm fence",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Modern Composite Panel",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/night-portrait-girl-model-wear-jeans-leather-jacket-against-iron-fence_627829-11275.jpg",
|
||||
imageAlt: "Composite fence",
|
||||
},
|
||||
]}
|
||||
title="Our Recent Installations"
|
||||
description="Explore our portfolio of completed projects ranging from privacy fences to decorative gates."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Cedar Wood Privacy", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/landscape-shot-brown-wooden-fence-mini-forest-with-clear-blue-sky_181624-17330.jpg", imageAlt: "Cedar fence" },
|
||||
{ id: "p2", name: "Black Aluminum Picket", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/charming-girl-stands-near-gate_8353-7875.jpg", imageAlt: "Aluminum fence" },
|
||||
{ id: "p3", name: "White Vinyl Privacy", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg", imageAlt: "Vinyl fence" },
|
||||
{ id: "p4", name: "Chain Link Security", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/night-portrait-girl-model-wear-jeans-leather-jacket-against-iron-fence_627829-11279.jpg", imageAlt: "Chain link fence" },
|
||||
{ id: "p5", name: "Farm Post & Rail", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-field-grasses-with-wooden-gate-surrounded-by-green-trees_181624-19068.jpg", imageAlt: "Farm fence" },
|
||||
{ id: "p6", name: "Modern Composite Panel", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/night-portrait-girl-model-wear-jeans-leather-jacket-against-iron-fence_627829-11275.jpg", imageAlt: "Composite fence" },
|
||||
]}
|
||||
title="Our Recent Installations"
|
||||
description="Explore our portfolio of completed projects ranging from privacy fences to decorative gates."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
role: "Homeowner",
|
||||
company: "Local Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-outdoors-portrait-young-attractive-bearded-caucasian-male-gardener-blue-t-shirt-smiling-camera-planting-seeds-garden-watering-plants_176420-19925.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jane Smith",
|
||||
role: "Homeowner",
|
||||
company: "Local Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-couple-sitting-patio-rooftop_23-2147891200.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mike Johnson",
|
||||
role: "Property Owner",
|
||||
company: "Local Business",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-u-outdoors-portrait-beautiful-joyful-hispanic-man-blue-shirt-smiling-with-teeth-holding-pot-with-microgreens-working-garden_176420-19929.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Emily Davis",
|
||||
role: "Homeowner",
|
||||
company: "Local Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-indigenous-person-integrating-society_23-2151102430.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Robert Brown",
|
||||
role: "Homeowner",
|
||||
company: "Local Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-outdoors-portrait-young-cheerful-bearded-man-blue-t-shirt-smiling-working-garden-with-tools-cutting-leaves-watering-flowers_176420-19907.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "15+",
|
||||
label: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
label: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "99%",
|
||||
label: "Customer Satisfaction",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Read about the experiences of our valued customers."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", role: "Homeowner", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-outdoors-portrait-young-attractive-bearded-caucasian-male-gardener-blue-t-shirt-smiling-camera-planting-seeds-garden-watering-plants_176420-19925.jpg" },
|
||||
{ id: "2", name: "Jane Smith", role: "Homeowner", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-couple-sitting-patio-rooftop_23-2147891200.jpg" },
|
||||
{ id: "3", name: "Mike Johnson", role: "Property Owner", company: "Local Business", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-u-outdoors-portrait-beautiful-joyful-hispanic-man-blue-shirt-smiling-with-teeth-holding-pot-with-microgreens-working-garden_176420-19929.jpg" },
|
||||
{ id: "4", name: "Emily Davis", role: "Homeowner", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-indigenous-person-integrating-society_23-2151102430.jpg" },
|
||||
{ id: "5", name: "Robert Brown", role: "Homeowner", company: "Local Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-outdoors-portrait-young-cheerful-bearded-man-blue-t-shirt-smiling-working-garden-with-tools-cutting-leaves-watering-flowers_176420-19907.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "15+", label: "Years Experience" },
|
||||
{ value: "500+", label: "Projects Completed" },
|
||||
{ value: "99%", label: "Customer Satisfaction" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Read about the experiences of our valued customers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Ready to secure your property? Get a free quote today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Ready to secure your property? Get a free quote today."
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Fence Builders Inc."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "About Us", href: "#" }, { label: "Services", href: "#services" }, { label: "Portfolio", href: "#portfolio" }] },
|
||||
{ items: [{ label: "Contact", href: "#contact" }, { label: "FAQ", href: "#" }, { label: "Privacy Policy", href: "#" }] },
|
||||
]}
|
||||
logoText="Fence Builders Inc."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user