Merge version_2 into main #2
335
src/app/page.tsx
335
src/app/page.tsx
@@ -32,69 +32,27 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Gallery", id: "products" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Henry's Fence Inc"
|
||||
brandName="Henry's Fence Inc."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Securing Your Property with Quality Craftsmanship"
|
||||
description="At Henry's Fence Inc, we build lasting, durable, and aesthetically pleasing fences to protect and define your sanctuary."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Professional Fencing Solutions"
|
||||
description="Henry's Fence Inc. provides expert residential and commercial fencing installation. We are dedicated to quality, security, and aesthetic excellence."
|
||||
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/american-colors-household-decorations-independence-day-celebration_23-2151469813.jpg?_wi=1",
|
||||
imageAlt: "Fence installation project",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-wall-with-tree-leaf-wall_74190-7307.jpg?_wi=1",
|
||||
imageAlt: "Classic picket fence",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg?_wi=1",
|
||||
imageAlt: "Horizontal modern fence",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/boxes-with-flowers-preparing-plants-planting-planting-spring-primrose-flowers-park-hello-spring-gardening-spring_166373-3537.jpg",
|
||||
imageAlt: "Fence installation project",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-wooden-white-entrance-steps-beautiful-wooden-house_181624-48256.jpg",
|
||||
imageAlt: "Classic picket fence",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-bicycle-basket_23-2149682001.jpg",
|
||||
imageAlt: "Horizontal modern fence",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/american-colors-household-decorations-independence-day-celebration_23-2151469813.jpg?_wi=1", imageAlt: "Fence installation project" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/white-wall-with-tree-leaf-wall_74190-7307.jpg?_wi=1", imageAlt: "Classic picket fence" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg?_wi=1", imageAlt: "Horizontal modern fence" },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
@@ -104,26 +62,10 @@ export default function LandingPage() {
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Built to Last,",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/woman-standing-fence-holding-basket-hand_23-2147907320.jpg",
|
||||
alt: "Fence construction",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: "Designed for Beauty",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
{ type: "text", content: "Crafting Excellence in Every Fence" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/woman-standing-fence-holding-basket-hand_23-2147907320.jpg", alt: "Quality fencing" }
|
||||
]}
|
||||
buttons={[{ text: "Learn More", href: "#about" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -134,30 +76,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Wood Fences",
|
||||
description: "Classic and durable cedar or pressure-treated wood fences.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/japanese-rusty-house-entrance_23-2149301049.jpg?_wi=1",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15744.jpg",
|
||||
buttonText: "See More",
|
||||
},
|
||||
{
|
||||
title: "Metal Fencing",
|
||||
description: "Sturdy and elegant iron or aluminum options for security.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/background-with-metallic-fence-texture_23-2150275519.jpg?_wi=1",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301817.jpg",
|
||||
buttonText: "See More",
|
||||
},
|
||||
{
|
||||
title: "Vinyl Solutions",
|
||||
description: "Low maintenance, weather-resistant vinyl fencing.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-gate-edge-field-azores_493961-1121.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/wooden-fence-background-with-grass-border_1398-94.jpg",
|
||||
buttonText: "See More",
|
||||
},
|
||||
{ title: "Wood Fences", description: "High-quality cedar and treated lumber.", imageSrc: "http://img.b2bpic.net/free-photo/japanese-rusty-house-entrance_23-2149301049.jpg?_wi=1", titleImageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15744.jpg", buttonText: "Learn More" },
|
||||
{ title: "Metal Fencing", description: "Durable steel and aluminum solutions.", imageSrc: "http://img.b2bpic.net/free-photo/background-with-metallic-fence-texture_23-2150275519.jpg?_wi=1", titleImageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301817.jpg", buttonText: "Learn More" },
|
||||
{ title: "Vinyl Solutions", description: "Low maintenance aesthetic fencing.", imageSrc: "http://img.b2bpic.net/free-photo/wooden-gate-edge-field-azores_493961-1121.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/wooden-fence-background-with-grass-border_1398-94.jpg", buttonText: "Learn More" },
|
||||
]}
|
||||
title="Services We Provide"
|
||||
description="We specialize in a wide range of fencing solutions to meet every functional and aesthetic need."
|
||||
title="Expert Services"
|
||||
description="Tailored fencing installations for any project."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -168,51 +92,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Cedar Wood Planks",
|
||||
price: "From $50/ft",
|
||||
variant: "Wood",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/old-wood-background_1232-2560.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Wrought Iron Sections",
|
||||
price: "From $85/ft",
|
||||
variant: "Metal",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-40662.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Vinyl Picket Panels",
|
||||
price: "From $65/ft",
|
||||
variant: "Vinyl",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pieces-wood-each-other-forming-fence_181624-32752.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Driveway Gates",
|
||||
price: "From $800",
|
||||
variant: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-nese-house-entrance_23-2149301050.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Stained Cedar Board",
|
||||
price: "From $55/ft",
|
||||
variant: "Wood",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beige-wooden-textured-flooring-background_53876-128544.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Glass Pool Panels",
|
||||
price: "From $120/ft",
|
||||
variant: "Premium",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stair-pool-luxury-resort-hotel_74190-1770.jpg",
|
||||
},
|
||||
{ id: "1", name: "Classic Picket", price: "Custom Quote", variant: "Residential", imageSrc: "http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg" },
|
||||
{ id: "2", name: "Modern Privacy", price: "Custom Quote", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/wooden-gate-edge-field-azores_493961-1121.jpg" },
|
||||
{ id: "3", name: "Commercial Security", price: "Custom Quote", variant: "Heavy Duty", imageSrc: "http://img.b2bpic.net/free-photo/background-with-metallic-fence-texture_23-2150275519.jpg" },
|
||||
]}
|
||||
title="Explore Our Materials"
|
||||
description="Premium materials selected for longevity and style."
|
||||
title="Gallery"
|
||||
description="View our recent custom fencing projects."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -223,30 +108,12 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "15+",
|
||||
title: "Years Experience",
|
||||
description: "Dedicated to quality.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "500+",
|
||||
title: "Projects Completed",
|
||||
description: "Delivered with excellence.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "100%",
|
||||
title: "Satisfied Clients",
|
||||
description: "Guaranteed satisfaction.",
|
||||
icon: Star,
|
||||
},
|
||||
{ id: "1", value: "15+", title: "Years Experience", description: "Industry leading expertise.", icon: Award },
|
||||
{ id: "2", value: "500+", title: "Successful Jobs", description: "Consistent quality delivery.", icon: CheckCircle },
|
||||
{ id: "3", value: "100%", title: "Satisfaction", description: "Our primary commitment.", icon: Star },
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Proven results for your home security."
|
||||
title="Why Choose Henry's"
|
||||
description="Your partner for reliable home protection."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -255,75 +122,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
date: "Jan 2024",
|
||||
title: "Homeowner",
|
||||
quote: "Excellent work on my backyard fence. It looks amazing!",
|
||||
tag: "Top Quality",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/sporty-woman-standing-park_7502-7817.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/american-colors-household-decorations-independence-day-celebration_23-2151469813.jpg?_wi=2",
|
||||
imageAlt: "happy home owner backyard",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "David Wilson",
|
||||
date: "Dec 2023",
|
||||
title: "Property Owner",
|
||||
quote: "Fast, professional, and very clean work. Highly recommend.",
|
||||
tag: "Fast Service",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/happy-woman-taking-care-plants-greenhouse_23-2147948268.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-wall-with-tree-leaf-wall_74190-7307.jpg?_wi=2",
|
||||
imageAlt: "happy home owner backyard",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Chen",
|
||||
date: "Nov 2023",
|
||||
title: "Client",
|
||||
quote: "The vinyl fence is exactly what I wanted. Beautiful.",
|
||||
tag: "Beautiful",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-wooden-fence_1122-2087.jpg?_wi=2",
|
||||
imageAlt: "happy home owner backyard",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "James Smith",
|
||||
date: "Oct 2023",
|
||||
title: "Business Owner",
|
||||
quote: "Sturdy metal fence for our office perimeter.",
|
||||
tag: "Professional",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/attractive-charming-girl-with-green-eyes-sits-cozy-place-comfortable-position-looks-into-lens-fulllength-photo-model-soft-sweater_197531-25975.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-fence-holding-basket-hand_23-2147907320.jpg",
|
||||
imageAlt: "happy home owner backyard",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Linda White",
|
||||
date: "Sep 2023",
|
||||
title: "Client",
|
||||
quote: "Affordable and great quality service. Thanks Henry!",
|
||||
tag: "Affordable",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/proper-collaboration-two-carpenter-workers_329181-15643.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/japanese-rusty-house-entrance_23-2149301049.jpg?_wi=2",
|
||||
imageAlt: "happy home owner backyard",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "John Doe",
|
||||
date: "Aug 2023",
|
||||
title: "Client",
|
||||
quote: "Professional team that delivered ahead of schedule.",
|
||||
tag: "Reliable",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-girl-with-headphones-laughing-autumn-garden-blonde-female-student-posing-with-book-smiling_197531-25999.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/background-with-metallic-fence-texture_23-2150275519.jpg?_wi=2",
|
||||
imageAlt: "happy home owner backyard",
|
||||
},
|
||||
{ id: "1", name: "Sarah Miller", date: "2024", title: "Residential", quote: "Professional craftsmanship and timely delivery.", tag: "Excellent", avatarSrc: "http://img.b2bpic.net/free-photo/sporty-woman-standing-park_7502-7817.jpg" },
|
||||
{ id: "2", name: "David Wilson", date: "2023", title: "Residential", quote: "Great results, fence looks perfect!", tag: "High Quality", avatarSrc: "http://img.b2bpic.net/free-photo/happy-woman-taking-care-plants-greenhouse_23-2147948268.jpg" },
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
description="Trust the quality our customers rely on."
|
||||
title="Happy Clients"
|
||||
description="Hear from our valued customers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -332,24 +135,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How long does installation take?",
|
||||
content: "Typically 2-3 days depending on the project size.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you provide estimates?",
|
||||
content: "Yes, we provide free written estimates for all projects.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Are materials under warranty?",
|
||||
content: "Yes, we offer warranties on both materials and workmanship.",
|
||||
},
|
||||
{ id: "1", title: "Do you offer free estimates?", content: "Absolutely, contact us for a consultation." },
|
||||
{ id: "2", title: "What fencing materials do you stock?", content: "We offer wood, metal, vinyl, and composite." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our fence installation services."
|
||||
description="Answers regarding our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -357,52 +147,19 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Let's Get Started"
|
||||
title="Ready for a new fence?"
|
||||
description="Reach out to Henry's Fence Inc today for a free consultation and project estimate."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Connect with us"
|
||||
title="Let's Build Your Fence"
|
||||
description="Ready for a upgrade? Reach out for a free quote today."
|
||||
buttons={[{ text: "Contact Henry's", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }] },
|
||||
{ items: [{ label: "Gallery", href: "#products" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
logoText="Henry's Fence Inc."
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user