bender/81852875-69c6-41e5-aba3-7743d7fe3599
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-05-09 16:11:26 +00:00
Conversation 0 Commits 1 Files Changed 1 +139 -331
1 changed files with 139 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

470
src/app/page.tsx
View File

@@ -29,346 +29,154 @@ export default function LandingPage() {
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Products",
id: "products",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Fence Co. Miami"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Products", id: "products" },
{ name: "Contact", id: "contact" },
]}
brandName="Fence Co. Miami"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Securing Your Miami Home with Quality Fencing"
description="Expert fence installation services across Miami-Dade. From custom privacy fences to durable security solutions, we define your boundaries with style."
testimonials={[
{
name: "Maria Garcia",
handle: "@mariag",
testimonial: "Excellent workmanship. My new privacy fence is exactly what I wanted for my Miami backyard.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/gas-valve-with-fence-foreground_1182-762.jpg?_wi=1",
imageAlt: "residential fence installation Miami",
},
{
name: "John Smith",
handle: "@jsmith",
testimonial: "Professional, punctual, and high quality. The best fence company in the area.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/process-fence-renovation-bright-sunny-day-by-man-protective-gloves_613910-17102.jpg?_wi=1",
imageAlt: "residential fence installation Miami",
},
{
name: "Elena Rodriguez",
handle: "@elena_r",
testimonial: "The crew was fast, respectful, and the quality of the aluminum fence is top-notch.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/plasterer-renovating-indoor-walls_1150-9959.jpg?_wi=1",
imageAlt: "residential fence installation Miami",
},
{
name: "Mark Thompson",
handle: "@mark_t",
testimonial: "Very happy with the wood fence installation. It completely changed the look of my yard.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/bars_23-2148098630.jpg?_wi=1",
imageAlt: "residential fence installation Miami",
},
{
name: "Sarah Jenkins",
handle: "@sjenkins",
testimonial: "Seamless process from quote to completion. Highly recommended for Miami homeowners.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756573.jpg?_wi=1",
imageAlt: "residential fence installation Miami",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/gas-valve-with-fence-foreground_1182-762.jpg?_wi=2"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/young-man-stairs_181624-41082.jpg",
alt: "Portrait of client 1",
},
{
src: "http://img.b2bpic.net/free-photo/male-friends-handshaking-outdoors_23-2149073970.jpg",
alt: "Portrait of client 2",
},
{
src: "http://img.b2bpic.net/free-photo/man-standing-garden-showing-ok-gesture-looking-camera_259150-59030.jpg",
alt: "Portrait of client 3",
},
{
src: "http://img.b2bpic.net/free-photo/man-waving-hand-outside_23-2149447136.jpg",
alt: "Portrait of client 4",
},
{
src: "http://img.b2bpic.net/free-photo/low-angle-woman-enjoying-music_23-2148602721.jpg",
alt: "Portrait of client 5",
},
]}
avatarText="Trusted by 500+ Miami residents"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Securing Your Miami Home with Quality Fencing"
description="Expert fence installation services across Miami-Dade. From custom privacy fences to durable security solutions, we define your boundaries with style."
testimonials={[
{ name: "Maria Garcia", handle: "@mariag", testimonial: "Excellent workmanship. My new privacy fence is exactly what I wanted for my Miami backyard.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/gas-valve-with-fence-foreground_1182-762.jpg", imageAlt: "residential fence installation Miami" },
{ name: "John Smith", handle: "@jsmith", testimonial: "Professional, punctual, and high quality. The best fence company in the area.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/process-fence-renovation-bright-sunny-day-by-man-protective-gloves_613910-17102.jpg", imageAlt: "residential fence installation Miami" },
{ name: "Elena Rodriguez", handle: "@elena_r", testimonial: "The crew was fast, respectful, and the quality of the aluminum fence is top-notch.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/plasterer-renovating-indoor-walls_1150-9959.jpg", imageAlt: "residential fence installation Miami" },
{ name: "Mark Thompson", handle: "@mark_t", testimonial: "Very happy with the wood fence installation. It completely changed the look of my yard.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/bars_23-2148098630.jpg", imageAlt: "residential fence installation Miami" },
{ name: "Sarah Jenkins", handle: "@sjenkins", testimonial: "Seamless process from quote to completion. Highly recommended for Miami homeowners.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756573.jpg", imageAlt: "residential fence installation Miami" },
]}
imageSrc="http://img.b2bpic.net/free-photo/gas-valve-with-fence-foreground_1182-762.jpg"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/young-man-stairs_181624-41082.jpg", alt: "Portrait of client 1" },
{ src: "http://img.b2bpic.net/free-photo/male-friends-handshaking-outdoors_23-2149073970.jpg", alt: "Portrait of client 2" },
{ src: "http://img.b2bpic.net/free-photo/man-standing-garden-showing-ok-gesture-looking-camera_259150-59030.jpg", alt: "Portrait of client 3" },
{ src: "http://img.b2bpic.net/free-photo/man-waving-hand-outside_23-2149447136.jpg", alt: "Portrait of client 4" },
{ src: "http://img.b2bpic.net/free-photo/low-angle-woman-enjoying-music_23-2148602721.jpg", alt: "Portrait of client 5" },
]}
avatarText="Trusted by 500+ Miami residents"
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={true}
tag="About Us"
title="Crafting Boundaries with Integrity"
description="With over 15 years serving the Miami community, our family-owned business prides itself on delivering high-quality, durable fencing that withstands Florida's weather."
subdescription="We specialize in custom design, expert installation, and comprehensive maintenance."
icon={ShieldCheck}
imageSrc="http://img.b2bpic.net/free-photo/process-fence-renovation-bright-sunny-day-by-man-protective-gloves_613910-17102.jpg?_wi=2"
mediaAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={true}
tag="About Us"
title="Crafting Boundaries with Integrity"
description="With over 15 years serving the Miami community, our family-owned business prides itself on delivering high-quality, durable fencing that withstands Florida's weather."
subdescription="We specialize in custom design, expert installation, and comprehensive maintenance."
icon={ShieldCheck}
imageSrc="http://img.b2bpic.net/free-photo/process-fence-renovation-bright-sunny-day-by-man-protective-gloves_613910-17102.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="Why Choose Fence Co. Miami?"
description="We combine premium materials with meticulous installation to ensure your fence stands the test of time."
accordionItems={[
{
id: "f1",
title: "Weather-Resistant Materials",
content: "Our fences are built using marine-grade aluminum and UV-protected vinyl to survive harsh coastal weather.",
},
{
id: "f2",
title: "Precision Installation",
content: "Our certified technicians ensure every post is leveled and every panel is perfectly aligned.",
},
{
id: "f3",
title: "Custom Designs",
content: "Need something unique? We tailor every project to your specific architectural style and security needs.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/plasterer-renovating-indoor-walls_1150-9959.jpg?_wi=2"
mediaAnimation="opacity"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="Why Choose Fence Co. Miami?"
description="We combine premium materials with meticulous installation to ensure your fence stands the test of time."
accordionItems={[
{ id: "f1", title: "Weather-Resistant Materials", content: "Our fences are built using marine-grade aluminum and UV-protected vinyl to survive harsh coastal weather." },
{ id: "f2", title: "Precision Installation", content: "Our certified technicians ensure every post is leveled and every panel is perfectly aligned." },
{ id: "f3", title: "Custom Designs", content: "Need something unique? We tailor every project to your specific architectural style and security needs." },
]}
imageSrc="http://img.b2bpic.net/free-photo/plasterer-renovating-indoor-walls_1150-9959.jpg"
mediaAnimation="opacity"
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Aluminum Privacy",
price: "Contact for quote",
imageSrc: "http://img.b2bpic.net/free-photo/bars_23-2148098630.jpg?_wi=2",
},
{
id: "p2",
name: "Cedar Wood Privacy",
price: "Contact for quote",
imageSrc: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756573.jpg?_wi=2",
},
{
id: "p3",
name: "Vinyl Picket",
price: "Contact for quote",
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-wooden-fence-street_181624-15424.jpg",
},
{
id: "p4",
name: "Wrought Iron Style",
price: "Contact for quote",
imageSrc: "http://img.b2bpic.net/free-photo/rich-african-man-stylish-traditional-clothes-hat-posed-outdoor-background-his-mansion_627829-3365.jpg",
},
{
id: "p5",
name: "Heavy-Duty Chain Link",
price: "Contact for quote",
imageSrc: "http://img.b2bpic.net/free-photo/girl-gray-coat-with-sunglasses-small-street-stadium-football-gates_627829-8818.jpg",
},
{
id: "p6",
name: "Decorative Bamboo Screen",
price: "Contact for quote",
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15594.jpg",
},
]}
title="Our Fencing Solutions"
description="Explore our diverse range of styles designed for security, privacy, and aesthetic appeal."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Aluminum Privacy", price: "Contact for quote", imageSrc: "http://img.b2bpic.net/free-photo/bars_23-2148098630.jpg" },
{ id: "p2", name: "Cedar Wood Privacy", price: "Contact for quote", imageSrc: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756573.jpg" },
{ id: "p3", name: "Vinyl Picket", price: "Contact for quote", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-wooden-fence-street_181624-15424.jpg" },
{ id: "p4", name: "Wrought Iron Style", price: "Contact for quote", imageSrc: "http://img.b2bpic.net/free-photo/rich-african-man-stylish-traditional-clothes-hat-posed-outdoor-background-his-mansion_627829-3365.jpg" },
{ id: "p5", name: "Heavy-Duty Chain Link", price: "Contact for quote", imageSrc: "http://img.b2bpic.net/free-photo/girl-gray-coat-with-sunglasses-small-street-stadium-football-gates_627829-8818.jpg" },
{ id: "p6", name: "Decorative Bamboo Screen", price: "Contact for quote", imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15594.jpg" },
]}
title="Our Fencing Solutions"
description="Explore our diverse range of styles designed for security, privacy, and aesthetic appeal."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "15+",
title: "Years Experience",
items: [
"Serving Miami-Dade",
"Quality Guarantee",
],
},
{
id: "m2",
value: "2000+",
title: "Projects Completed",
items: [
"Residential",
"Commercial",
],
},
{
id: "m3",
value: "500+",
title: "Happy Clients",
items: [
"Top-rated service",
"Referrals",
],
},
]}
title="Quality by the Numbers"
description="Our commitment to quality has made us a trusted name in Miami."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "15+", title: "Years Experience", items: ["Serving Miami-Dade", "Quality Guarantee"] },
{ id: "m2", value: "2000+", title: "Projects Completed", items: ["Residential", "Commercial"] },
{ id: "m3", value: "500+", title: "Happy Clients", items: ["Top-rated service", "Referrals"] },
]}
title="Quality by the Numbers"
description="Our commitment to quality has made us a trusted name in Miami."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Sarah Miller",
date: "March 2024",
title: "Homeowner",
quote: "Fantastic service and professional install.",
tag: "Privacy Fence",
avatarSrc: "http://img.b2bpic.net/free-photo/man-looking-her-girlfriend-showing-engagement-ring_23-2147891267.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/man-leaning-railing-looking-nature_23-2148187271.jpg",
},
{
id: "t2",
name: "David Rivera",
date: "Jan 2024",
title: "Homeowner",
quote: "The fence looks stunning and the crew was tidy.",
tag: "Metal Fence",
avatarSrc: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/man-speaking-phone-while-walking-with-woman_23-2147779718.jpg",
},
{
id: "t3",
name: "Emily Chen",
date: "Dec 2023",
title: "Property Mgr",
quote: "Very durable, exactly what our community needed.",
tag: "Chain Link",
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-beautiful-woman-years-old-wearing-corporate-clothing-looking-happy_1258-194086.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-redhead-female-resting-outdoor_613910-10360.jpg",
},
{
id: "t4",
name: "Robert B.",
date: "Nov 2023",
title: "Homeowner",
quote: "Best price and service quality in Miami.",
tag: "Vinyl Fence",
avatarSrc: "http://img.b2bpic.net/free-photo/woman-gathering-beets-from-farm_23-2150454966.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-doing-arts-crafts_23-2151575714.jpg",
},
{
id: "t5",
name: "Linda G.",
date: "Oct 2023",
title: "Homeowner",
quote: "Fast installation and beautiful finish.",
tag: "Wood Fence",
avatarSrc: "http://img.b2bpic.net/free-photo/people-helping-each-other-community_23-2149139741.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/people-helping-each-other-community_23-2149139734.jpg",
},
]}
title="What Our Clients Say"
description="Customer satisfaction is our highest priority at Fence Co. Miami."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{ id: "t1", name: "Sarah Miller", date: "March 2024", title: "Homeowner", quote: "Fantastic service and professional install.", tag: "Privacy Fence", avatarSrc: "http://img.b2bpic.net/free-photo/man-looking-her-girlfriend-showing-engagement-ring_23-2147891267.jpg", imageSrc: "http://img.b2bpic.net/free-photo/man-leaning-railing-looking-nature_23-2148187271.jpg" },
{ id: "t2", name: "David Rivera", date: "Jan 2024", title: "Homeowner", quote: "The fence looks stunning and the crew was tidy.", tag: "Metal Fence", avatarSrc: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg", imageSrc: "http://img.b2bpic.net/free-photo/man-speaking-phone-while-walking-with-woman_23-2147779718.jpg" },
{ id: "t3", name: "Emily Chen", date: "Dec 2023", title: "Property Mgr", quote: "Very durable, exactly what our community needed.", tag: "Chain Link", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-beautiful-woman-years-old-wearing-corporate-clothing-looking-happy_1258-194086.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-redhead-female-resting-outdoor_613910-10360.jpg" },
{ id: "t4", name: "Robert B.", date: "Nov 2023", title: "Homeowner", quote: "Best price and service quality in Miami.", tag: "Vinyl Fence", avatarSrc: "http://img.b2bpic.net/free-photo/woman-gathering-beets-from-farm_23-2150454966.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-doing-arts-crafts_23-2151575714.jpg" },
{ id: "t5", name: "Linda G.", date: "Oct 2023", title: "Homeowner", quote: "Fast installation and beautiful finish.", tag: "Wood Fence", avatarSrc: "http://img.b2bpic.net/free-photo/people-helping-each-other-community_23-2149139741.jpg", imageSrc: "http://img.b2bpic.net/free-photo/people-helping-each-other-community_23-2149139734.jpg" },
]}
title="What Our Clients Say"
description="Customer satisfaction is our highest priority at Fence Co. Miami."
/>
</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 handle permits?",
content: "Yes, we handle all local Miami permitting processes for you.",
},
{
id: "q3",
title: "What materials last longest?",
content: "Aluminum and vinyl are generally the most weather-resistant materials for Florida.",
},
]}
sideTitle="Common Questions"
faqsAnimation="blur-reveal"
/>
</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 handle permits?", content: "Yes, we handle all local Miami permitting processes for you." },
{ id: "q3", title: "What materials last longest?", content: "Aluminum and vinyl are generally the most weather-resistant materials for Florida." },
]}
sideTitle="Common Questions"
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{
variant: "gradient-bars",
}}
title="Start Your Fencing Project Today"
description="Ready to secure your property? Contact us for a free estimate."
inputPlaceholder="Enter your zip code"
buttonText="Get Free Estimate"
imageSrc="http://img.b2bpic.net/free-photo/smiling-young-man-talking-cellphone-construction-site_23-2148204026.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Contact"
useInvertedBackground={true}
background={{ variant: "gradient-bars" }}
title="Start Your Fencing Project Today"
description="Ready to secure your property? Contact us for a free estimate."
inputPlaceholder="Enter your zip code"
buttonText="Get Free Estimate"
imageSrc="http://img.b2bpic.net/free-photo/smiling-young-man-talking-cellphone-construction-site_23-2148204026.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Fence Co. Miami"
leftLink={{
text: "Privacy Policy",
href: "#",
}}
rightLink={{
text: "Terms of Service",
href: "#",
}}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Fence Co. Miami"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}