Merge version_1 into main #2
228
src/app/page.tsx
228
src/app/page.tsx
@@ -10,7 +10,7 @@ import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Grid, Shield } from "lucide-react";
|
||||
import { Grid, Shield, Fence } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -18,27 +18,24 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="D & R Fencing"
|
||||
/>
|
||||
@@ -46,221 +43,106 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Secure Your Home with Premium Fencing"
|
||||
description="At D & R Fencing, we provide high-quality, durable fencing solutions tailored to your property's security and aesthetic needs."
|
||||
background={{ variant: "plain" }}
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/gb785c9c32ae4a516289e97184f404ceeec27695e1bac0778a891c1c58ea113203dac543d749f6c797bdde773b40bc8952c053d759ec50222ee2244d9f82e78ae_1280.jpg?_wi=1",
|
||||
imageAlt: "Professional fence installation residential",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/gcca6447c3f8b263c76cbbecc0d942fad69d965991a68d631389150f303c5ad25e0a69b7caf8538c6af593d1a9653302243b90010e6eb5d83ffba7ced4003256c_1280.jpg?_wi=1",
|
||||
imageAlt: "Secure metal driveway gate",
|
||||
},
|
||||
{ imageSrc: "https://pixabay.com/get/gb785c9c32ae4a516289e97184f404ceeec27695e1bac0778a891c1c58ea113203dac543d749f6c797bdde773b40bc8952c053d759ec50222ee2244d9f82e78ae_1280.jpg", imageAlt: "Fencing Installation" },
|
||||
{ imageSrc: "https://pixabay.com/get/gcca6447c3f8b263c76cbbecc0d942fad69d965991a68d631389150f303c5ad25e0a69b7caf8538c6af593d1a9653302243b90010e6eb5d83ffba7ced4003256c_1280.jpg", imageAlt: "Security Gates" }
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/gcca6447c3f8b263c76cbbecc0d942fad69d965991a68d631389150f303c5ad25e0a69b7caf8538c6af593d1a9653302243b90010e6eb5d83ffba7ced4003256c_1280.jpg?_wi=2",
|
||||
imageAlt: "Secure metal driveway gate",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/gb785c9c32ae4a516289e97184f404ceeec27695e1bac0778a891c1c58ea113203dac543d749f6c797bdde773b40bc8952c053d759ec50222ee2244d9f82e78ae_1280.jpg?_wi=2",
|
||||
imageAlt: "Professional fence installation residential",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
{ imageSrc: "https://pixabay.com/get/gcca6447c3f8b263c76cbbecc0d942fad69d965991a68d631389150f303c5ad25e0a69b7caf8538c6af593d1a9653302243b90010e6eb5d83ffba7ced4003256c_1280.jpg", imageAlt: "Custom Gates" },
|
||||
{ imageSrc: "https://pixabay.com/get/gb785c9c32ae4a516289e97184f404ceeec27695e1bac0778a891c1c58ea113203dac543d749f6c797bdde773b40bc8952c053d759ec50222ee2244d9f82e78ae_1280.jpg", imageAlt: "Wooden Fencing" }
|
||||
]}
|
||||
buttons={[{ text: "Get a Quote", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Craftsmanship You Can Trust"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
buttons={[{ text: "Learn More", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
title="Our Professional Services"
|
||||
description="Expert solutions for all your residential and commercial fencing needs."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Custom Wood Fencing",
|
||||
description: "Beautiful, hand-crafted wood fences that enhance your property curb appeal.",
|
||||
icon: Grid,
|
||||
title: "Custom Wood Fencing", description: "Beautiful, hand-crafted wood fences that enhance your property curb appeal.", icon: Fence,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/g7f3b98c26713bc57a2a8bab29c70b50fe96f17c563460f2db76fe2eda6ae607d318d72472e5dfda948c8ccc953f003e7a3b7dc025e5bf0da8d07709a7b1b8521_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/g7f3b98c26713bc57a2a8bab29c70b50fe96f17c563460f2db76fe2eda6ae607d318d72472e5dfda948c8ccc953f003e7a3b7dc025e5bf0da8d07709a7b1b8521_1280.jpg?_wi=2",
|
||||
},
|
||||
],
|
||||
{ imageSrc: "https://pixabay.com/get/g7f3b98c26713bc57a2a8bab29c70b50fe96f17c563460f2db76fe2eda6ae607d318d72472e5dfda948c8ccc953f003e7a3b7dc025e5bf0da8d07709a7b1b8521_1280.jpg" },
|
||||
{ imageSrc: "https://pixabay.com/get/g7f3b98c26713bc57a2a8bab29c70b50fe96f17c563460f2db76fe2eda6ae607d318d72472e5dfda948c8ccc953f003e7a3b7dc025e5bf0da8d07709a7b1b8521_1280.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Security Ironwork",
|
||||
description: "Durable iron gates and perimeter fencing for maximum property security.",
|
||||
icon: Shield,
|
||||
title: "Security Ironwork", description: "Durable iron gates and perimeter fencing for maximum property security.", icon: Shield,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/geb6e753b69fc07f8e7d6e457a3c8d6322393d5d1d07d14671eb72eb14ff01f0dcc4024701186820260172d1275d1d54d46ce1b4db149988dcabb00cd44f2bda5_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/geb6e753b69fc07f8e7d6e457a3c8d6322393d5d1d07d14671eb72eb14ff01f0dcc4024701186820260172d1275d1d54d46ce1b4db149988dcabb00cd44f2bda5_1280.jpg?_wi=2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ imageSrc: "https://pixabay.com/get/geb6e753b69fc07f8e7d6e457a3c8d6322393d5d1d07d14671eb72eb14ff01f0dcc4024701186820260172d1275d1d54d46ce1b4db149988dcabb00cd44f2bda5_1280.jpg" },
|
||||
{ imageSrc: "https://pixabay.com/get/geb6e753b69fc07f8e7d6e457a3c8d6322393d5d1d07d14671eb72eb14ff01f0dcc4024701186820260172d1275d1d54d46ce1b4db149988dcabb00cd44f2bda5_1280.jpg" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="Expert solutions for all your residential and commercial fencing needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
title="Our Track Record"
|
||||
description="Proven results for our valued clients."
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15+",
|
||||
title: "Years Experience",
|
||||
items: [
|
||||
"Serving local areas",
|
||||
"Trusted expertise",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "500+",
|
||||
title: "Projects Completed",
|
||||
items: [
|
||||
"Residential & commercial",
|
||||
"High satisfaction",
|
||||
],
|
||||
},
|
||||
{ id: "m1", value: "15+", title: "Years Experience", items: ["Serving local areas", "Trusted expertise"] },
|
||||
{ id: "m2", value: "500+", title: "Projects Completed", items: ["Residential & commercial", "High satisfaction"] }
|
||||
]}
|
||||
title="Our Track Record"
|
||||
description="Proven results for our valued clients."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Homeowner",
|
||||
company: "Local Area",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g1953705298d5f279d97670a35964b1d02fb7e9faa92656fbc258b62989d1a3909089c975a81ba85aae5cc08caa6a3814b69b49fc3f0b9943efbb22db0e568315_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark R.",
|
||||
role: "Property Owner",
|
||||
company: "Local Area",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/ga2336c50e75eb770d793cbfc8891eba6e8e55943a501b27385a610bd5fe2c54e4ea1f94326ea1b76908209f4811ac288bfdbaf5fe23c98734eafc0a599b1e4b9_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily P.",
|
||||
role: "Homeowner",
|
||||
company: "Local Area",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g1f0935238a70897805f0d083cb910c221c9b34c83375a044bdc01c0505a31581cac948a1892516c0b9c9cb82367e458db17cd8c285c16f07b1366358786aa1c4_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David L.",
|
||||
role: "Business Owner",
|
||||
company: "Local Area",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g3d2d586ebc2cc8e0e88e6c4fd116bbb2739175fc4ade777f69b7d6f0bc77ac10f96bc93793b60e64dbc410ebfc0d22736c74bcb1498d1ce7ae87e6fd31ec475f_1280.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Average Rating",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
label: "Client Retention",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Projects Completed",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Hear from the happy homeowners we've helped secure their properties."
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
kpiItems={[
|
||||
{ value: "4.9/5", label: "Average Rating" },
|
||||
{ value: "98%", label: "Client Retention" },
|
||||
{ value: "100%", label: "Projects Completed" }
|
||||
]}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", role: "Homeowner", company: "Local Area", rating: 5, imageSrc: "https://pixabay.com/get/g1953705298d5f279d97670a35964b1d02fb7e9faa92656fbc258b62989d1a3909089c975a81ba85aae5cc08caa6a3814b69b49fc3f0b9943efbb22db0e568315_1280.jpg" },
|
||||
{ id: "2", name: "Mark R.", role: "Property Owner", company: "Local Area", rating: 5, imageSrc: "https://pixabay.com/get/ga2336c50e75eb770d793cbfc8891eba6e8e55943a501b27385a610bd5fe2c54e4ea1f94326ea1b76908209f4811ac288bfdbaf5fe23c98734eafc0a599b1e4b9_1280.jpg" },
|
||||
{ id: "3", name: "Emily P.", role: "Homeowner", company: "Local Area", rating: 5, imageSrc: "https://pixabay.com/get/g1f0935238a70897805f0d083cb910c221c9b34c83375a044bdc01c0505a31581cac948a1892516c0b9c9cb82367e458db17cd8c285c16f07b1366358786aa1c4_1280.jpg" },
|
||||
{ id: "4", name: "David L.", role: "Business Owner", company: "Local Area", rating: 5, imageSrc: "https://pixabay.com/get/g3d2d586ebc2cc8e0e88e6c4fd116bbb2739175fc4ade777f69b7d6f0bc77ac10f96bc93793b60e64dbc410ebfc0d22736c74bcb1498d1ce7ae87e6fd31ec475f_1280.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get In Touch"
|
||||
title="Ready for your new fence?"
|
||||
description="Contact us today for a free consultation and project estimate."
|
||||
imageSrc="https://pixabay.com/get/gdd2ef0d481ccb556b5f86abb85b4af803d83f556167b9500c93cef74345aedc3418cd544e58b2f43d9d6acb6170f16c31b4769db5ef8a6a5dcac9dae4630fb1f_1280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "D & R Fencing",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "Email",
|
||||
href: "mailto:info@drfencing.com",
|
||||
},
|
||||
{
|
||||
label: "Phone",
|
||||
href: "tel:5550123",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "D & R Fencing", items: [{ label: "Home", href: "/" }, { label: "About", href: "#about" }] },
|
||||
{ title: "Contact", items: [{ label: "Email", href: "mailto:info@drfencing.com" }, { label: "Phone", href: "tel:5550123" }] }
|
||||
]}
|
||||
copyrightText="© 2024 D & R Fencing. All rights reserved."
|
||||
/>
|
||||
@@ -268,4 +150,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user