Merge version_3 into main #1
456
src/app/page.tsx
456
src/app/page.tsx
@@ -29,343 +29,143 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="FencePro"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="FencePro"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Secure Your Property with Professional Fencing"
|
||||
description="Providing durable, stylish, and high-quality fencing solutions for residential and commercial properties. Expert installation that lasts."
|
||||
tag="Expert Fencing Contractors"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-wall-with-tree-leaf-wall_74190-7307.jpg",
|
||||
imageAlt: "Professional fence installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/south-asian-agronomist-farmer-looking-diagram-papers-farm-agriculture-production-concept_627829-7300.jpg",
|
||||
imageAlt: "Team at work",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/metal-fence-with-barb-wire-metal-canoes-it-with-blue-sky_181624-3959.jpg",
|
||||
imageAlt: "Metal fence with barb wire",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/japanese-house-entrance-with-fence_23-2149301041.jpg",
|
||||
imageAlt: "Japanese house entrance with fence",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-fence-texture_1137-222.jpg",
|
||||
imageAlt: "Wooden fence texture",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Trusted by 500+ Local Homeowners"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Secure Your Property with Professional Fencing"
|
||||
description="Providing durable, stylish, and high-quality fencing solutions for residential and commercial properties. Expert installation that lasts."
|
||||
tag="Expert Fencing Contractors"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/white-wall-with-tree-leaf-wall_74190-7307.jpg", imageAlt: "Professional fence installation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/south-asian-agronomist-farmer-looking-diagram-papers-farm-agriculture-production-concept_627829-7300.jpg", imageAlt: "Team at work" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Trusted by 500+ Local Homeowners"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Built for Durability and Style"
|
||||
metrics={[
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Projects Completed",
|
||||
value: "1,200+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Years Experience",
|
||||
value: "15+",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Client Satisfaction",
|
||||
value: "99%",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Built for Durability and Style"
|
||||
metrics={[
|
||||
{ icon: Shield, label: "Projects Completed", value: "1,200+" },
|
||||
{ icon: Award, label: "Years Experience", value: "15+" },
|
||||
{ icon: CheckCircle, label: "Client Satisfaction", value: "99%" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Premium Materials",
|
||||
subtitle: "Top-grade wood, vinyl, and metal options.",
|
||||
category: "Material",
|
||||
value: "High Quality",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Expert Installation",
|
||||
subtitle: "Craftsmen with attention to detail.",
|
||||
category: "Service",
|
||||
value: "Professional",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Custom Designs",
|
||||
subtitle: "Tailored to your specific landscape.",
|
||||
category: "Design",
|
||||
value: "Unique",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="We combine premium materials with precise craftsmanship to enhance your property's value and security."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Premium Materials", subtitle: "Top-grade wood, vinyl, and metal options.", category: "Material", value: "High Quality" },
|
||||
{ id: "f2", title: "Expert Installation", subtitle: "Craftsmen with attention to detail.", category: "Service", value: "Professional" },
|
||||
{ id: "f3", title: "Custom Designs", subtitle: "Tailored to your specific landscape.", category: "Design", value: "Unique" },
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="We combine premium materials with precise craftsmanship to enhance your property's value and security."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "s1",
|
||||
name: "Wood Fencing",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-walking-paved-street_23-2148296654.jpg",
|
||||
imageAlt: "Wood Fence",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
name: "Vinyl Fencing",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-protective-gloves-is-painting-wooden-fence-bright-summer-day_613910-17100.jpg",
|
||||
imageAlt: "Vinyl Fence",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
name: "Chain Link",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/big-fence-urban-park_53876-32203.jpg",
|
||||
imageAlt: "Chain Link",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
name: "Aluminum Fence",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/parasol-located-old-quarter-seville_268835-15567.jpg",
|
||||
imageAlt: "Aluminum Fence",
|
||||
},
|
||||
{
|
||||
id: "s5",
|
||||
name: "Privacy Panels",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-female-tourist-carrying-camera-shoulder-looking-building-city_23-2148027183.jpg",
|
||||
imageAlt: "Privacy Fence",
|
||||
},
|
||||
{
|
||||
id: "s6",
|
||||
name: "Gate Installation",
|
||||
price: "Custom Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-doing-arts-crafts_23-2151575709.jpg",
|
||||
imageAlt: "Gate",
|
||||
},
|
||||
]}
|
||||
title="Our Fencing Services"
|
||||
description="Comprehensive solutions from privacy to decorative fencing."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "s1", name: "Wood Fencing", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/young-man-walking-paved-street_23-2148296654.jpg", imageAlt: "Wood Fence" },
|
||||
{ id: "s2", name: "Vinyl Fencing", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/man-protective-gloves-is-painting-wooden-fence-bright-summer-day_613910-17100.jpg", imageAlt: "Vinyl Fence" },
|
||||
{ id: "s3", name: "Chain Link", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/big-fence-urban-park_53876-32203.jpg", imageAlt: "Chain Link" },
|
||||
]}
|
||||
title="Our Fencing Services"
|
||||
description="Comprehensive solutions from privacy to decorative fencing."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "500+",
|
||||
title: "Satisfied Customers",
|
||||
description: "Families served",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/illustration-blank-sign-vector_53876-3917.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "150km",
|
||||
title: "Total Fencing",
|
||||
description: "Total length installed",
|
||||
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: "m3",
|
||||
value: "24/7",
|
||||
title: "Support",
|
||||
description: "Always ready to assist",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l4nmqx",
|
||||
},
|
||||
]}
|
||||
title="Our Impact in Numbers"
|
||||
description="We are proud of the work we've done across the community."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "500+", title: "Satisfied Customers", description: "Families served", imageSrc: "http://img.b2bpic.net/free-vector/illustration-blank-sign-vector_53876-3917.jpg" },
|
||||
{ id: "m2", value: "150km", title: "Total Fencing", description: "Total length installed", 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: "m3", value: "24/7", title: "Support", description: "Always ready to assist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l4nmqx" },
|
||||
]}
|
||||
title="Our Impact in Numbers"
|
||||
description="We are proud of the work we've done across the community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
role: "Homeowner",
|
||||
company: "Local Area",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-picture-handsome-stylish-young-european-male-with-thick-beard-spending-sunny-summer-day_343059-3585.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mike R.",
|
||||
role: "Homeowner",
|
||||
company: "Local Area",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/employee-working-with-trendy-clothes_482257-78860.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena D.",
|
||||
role: "Homeowner",
|
||||
company: "Local Area",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-thinking_93675-133241.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Robert B.",
|
||||
role: "Homeowner",
|
||||
company: "Local Area",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-young-man-walking-street-with-backpack-his-shoulders_58466-16223.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Linda M.",
|
||||
role: "Homeowner",
|
||||
company: "Local Area",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-using-laptop-computer-smart-phone-beautiful-student-girl-working-laptop-outdoor_1328-637.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Homeowners Say"
|
||||
description="Don't just take our word for it."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", role: "Homeowner", company: "Local Area", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/outdoor-picture-handsome-stylish-young-european-male-with-thick-beard-spending-sunny-summer-day_343059-3585.jpg" },
|
||||
{ id: "t2", name: "Mike R.", role: "Homeowner", company: "Local Area", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/employee-working-with-trendy-clothes_482257-78860.jpg" },
|
||||
{ id: "t3", name: "Elena D.", role: "Homeowner", company: "Local Area", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-thinking_93675-133241.jpg" },
|
||||
]}
|
||||
title="What Homeowners Say"
|
||||
description="Don't just take our word for it."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How long does installation take?",
|
||||
content: "Most residential projects are completed within 2-3 days.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you offer warranties?",
|
||||
content: "Yes, all installations include a comprehensive 5-year workmanship warranty.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do I need permits?",
|
||||
content: "Our team handles all necessary permitting and compliance paperwork for you.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How long does installation take?", content: "Most residential projects are completed within 2-3 days." },
|
||||
{ id: "q2", title: "Do you offer warranties?", content: "Yes, all installations include a comprehensive 5-year workmanship warranty." },
|
||||
{ id: "q3", title: "Do I need permits?", content: "Our team handles all necessary permitting and compliance paperwork for you." },
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Ready to enhance your home security and aesthetics? Contact us today for a free consultation."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Ready to enhance your home security and aesthetics? Contact us today for a free consultation."
|
||||
buttons={[{ text: "Get a Free Quote", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="FencePro"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#hero" }, { label: "About Us", href: "#about" }] },
|
||||
{ items: [{ label: "Services", href: "#services" }, { label: "Privacy Policy", href: "#" }] },
|
||||
]}
|
||||
logoText="FencePro"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user