216 lines
15 KiB
TypeScript
216 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { CheckCircle, MessageSquare, Users, DollarSign, Award, Home, Zap, Star, Mail, Image } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmall"
|
|
background="fluid"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="FenceCo"
|
|
navItems={[
|
|
{ name: "Why FenceCo", id: "benefits" },
|
|
{ name: "Fence Types", id: "fence-types" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Process", id: "process" },
|
|
{ name: "Get Quote", id: "contact" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Beautiful Fences. Built Right."
|
|
description="Professional fence installation with honest pricing, quality materials, and crews that respect your home."
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Get a Free Fence Quote", href: "contact" },
|
|
{ text: "See Our Work", href: "gallery" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
mediaItems={[
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772756839393-j9p6mswa.png", imageAlt: "Luxury wooden privacy fence installation" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772756646721-0d9pmdsd.png", imageAlt: "Modern aluminum fence with gate" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/tmp/picket-fence-1772756139666-c1e31f78.png", imageAlt: "Custom decorative gate installation" },
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="benefits" data-section="benefits">
|
|
<FeatureHoverPattern
|
|
title="Why Homeowners Choose FenceCo"
|
|
description="We've built our reputation on transparency, quality, and genuine care for our customers."
|
|
tag="Why FenceCo"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{ icon: MessageSquare, title: "Crystal Clear Communication", description: "From quote to completion, you'll know exactly what to expect. No surprises, no hidden costs." },
|
|
{ icon: Users, title: "Professional, Experienced Crews", description: "Our installers are trained, licensed, and treat your home like their own." },
|
|
{ icon: DollarSign, title: "Competitive Pricing Without Compromises", description: "Premium quality at fair prices. Get multiple quotes—we're confident in our value." },
|
|
{ icon: Award, title: "Materials Built to Last", description: "We use only high-quality materials that stand up to the elements year after year." },
|
|
{ icon: Home, title: "Respect for Your Property", description: "Clean work sites, attention to detail, and professional behavior from start to finish." },
|
|
{ icon: Zap, title: "Fast & Easy Process", description: "Simple estimate process and quick installation without unnecessary delays." },
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="fence-types" data-section="fence-types">
|
|
<ProductCardThree
|
|
title="Fence Options for Every Home"
|
|
description="Explore the types of fences we install. Each has unique benefits suited to different needs and styles."
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "wood-privacy", name: "Wood Privacy Fence", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/wood-texture-background_1232-1791.jpg", imageAlt: "Wood Privacy Fence" },
|
|
{ id: "shadowbox", name: "Shadowbox Fence", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/wooden-trellis-overgrown-with-greenery-selective-focus-herbal-foliage-with-green-white-leaves-garden-trellis-background-screensaver-nature-banner_166373-2862.jpg", imageAlt: "Shadowbox Fence" },
|
|
{ id: "picket", name: "Picket Fence", price: "Custom Quote", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/tmp/picket-fence-1772756139666-c1e31f78.png", imageAlt: "Picket Fence" },
|
|
{ id: "aluminum", name: "Aluminum Fence", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-36988.jpg?_wi=2", imageAlt: "Aluminum Fence" },
|
|
{ id: "chainlink", name: "Chain Link Fence", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/selective-closeup-shot-chain-link-fence_181624-2493.jpg", imageAlt: "Chain Link Fence" },
|
|
{ id: "custom-gates", name: "Custom Gates", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/people-meeting-discussing-neighbourhood_23-2149447188.jpg?_wi=2", imageAlt: "Custom Gate" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="What Our Customers Say"
|
|
description="Hear from homeowners who've trusted FenceCo with their fences."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah Martinez", handle: "Homeowner, Austin TX", testimonial: "Communication was an A+. The crew was professional and the fence looks absolutely amazing. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-experienced-carpenter_329181-15660.jpg?_wi=1", imageAlt: "Sarah Martinez" },
|
|
{ id: "2", name: "James Chen", handle: "Homeowner, Denver CO", testimonial: "Price was very competitive compared to other quotes we received. Fair pricing for excellent work.", imageSrc: "http://img.b2bpic.net/free-photo/happy-adult-son-his-mature-father-holding-hands-while-greeting-each-other-kitchen_637285-10296.jpg?_wi=1", imageAlt: "James Chen" },
|
|
{ id: "3", name: "Michelle Rodriguez", handle: "Homeowner, Phoenix AZ", testimonial: "They made buying a fence easy from start to finish. The whole process was smooth and stress-free.", imageSrc: "http://img.b2bpic.net/free-photo/parents-happy-see-their-son-family-looking-happy_259150-56951.jpg", imageAlt: "Michelle Rodriguez" },
|
|
{ id: "4", name: "David Thompson", handle: "Homeowner, Portland OR", testimonial: "Our fence looks beautiful and the whole process was smooth. They treated us like real customers. Customer service like this is rare.", imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-man-receiving-package-from-courier-signing-paperwork-front-his-house_637285-1270.jpg", imageAlt: "David Thompson" },
|
|
{ id: "5", name: "Lisa Park", handle: "Homeowner, Seattle WA", testimonial: "Professional, respectful, and they delivered exactly what they promised. We're recommending FenceCo to all our neighbors.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-experienced-carpenter_329181-15660.jpg?_wi=2", imageAlt: "Lisa Park" },
|
|
{ id: "6", name: "Robert Williams", handle: "Homeowner, San Diego CA", testimonial: "Best fence company we've worked with. Quality materials, clean work, and genuine care about our property.", imageSrc: "http://img.b2bpic.net/free-photo/happy-adult-son-his-mature-father-holding-hands-while-greeting-each-other-kitchen_637285-10296.jpg?_wi=2", imageAlt: "Robert Williams" },
|
|
]}
|
|
speed={40}
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<MetricCardTwo
|
|
title="Our Simple 3-Step Process"
|
|
description="From quote to installation, we make it easy."
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "1", value: "Step 1", description: "Request a Quote - Fill out a quick form or call us" },
|
|
{ id: "2", value: "Step 2", description: "On-Site Estimate - We measure and help you choose the right fence" },
|
|
{ id: "3", value: "Step 3", description: "Professional Installation - Our crew installs quickly and correctly" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<BlogCardThree
|
|
title="Gallery of Our Work"
|
|
description="See the fences we've built for homeowners just like you."
|
|
tag="Recent Projects"
|
|
tagIcon={Image}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
blogs={[
|
|
{ id: "1", category: "Privacy Fence", title: "Modern Privacy Fence Installation", excerpt: "Beautiful wood privacy fence creating privacy and curb appeal for this Denver home.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772757243149-jpiz6t96.png", imageAlt: "Modern Privacy Fence", authorName: "FenceCo Team", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-confident-experienced-carpenter_329181-15660.jpg", date: "Completed Recently" },
|
|
{ id: "2", category: "Gate Installation", title: "Custom Gate & Fence Combination", excerpt: "Matching aluminum fence with custom decorative gate for this Phoenix residence.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772757022271-8jnfgjlr.png", imageAlt: "Custom Gate Installation", authorName: "FenceCo Team", authorAvatar: "http://img.b2bpic.net/free-photo/happy-adult-son-his-mature-father-holding-hands-while-greeting-each-other-kitchen_637285-10296.jpg", date: "Completed Recently" },
|
|
{ id: "3", category: "Backyard Transformation", title: "Complete Backyard Fence Project", excerpt: "Shadowbox fence creating the perfect balance of privacy and style for this Seattle family.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/tmp/shadowbox-fence-1772757332154-ed5c9935.png", imageAlt: "Backyard Transformation", authorName: "FenceCo Team", authorAvatar: "http://img.b2bpic.net/free-photo/parents-happy-see-their-son-family-looking-happy_259150-56951.jpg", date: "Completed Recently" },
|
|
{ id: "4", category: "Property Fence", title: "Property Line Fence Installation", excerpt: "Durable chain link fence clearly defining property boundaries for this Austin home.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772756839393-j9p6mswa.png", imageAlt: "Property Fence", authorName: "FenceCo Team", authorAvatar: "http://img.b2bpic.net/free-photo/happy-mature-man-receiving-package-from-courier-signing-paperwork-front-his-house_637285-1270.jpg", date: "Completed Recently" },
|
|
{ id: "5", category: "Neighborhood Project", title: "Picket Fence for Curb Appeal", excerpt: "Classic picket fence enhancing the charm and value of this Portland property.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772757298038-4so7axum.png", imageAlt: "Picket Fence", authorName: "FenceCo Team", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-confident-experienced-carpenter_329181-15660.jpg", date: "Completed Recently" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get Started"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Get Your Free Fence Quote"
|
|
description="Ready to transform your backyard? Fill out the form below for a free, no-obligation estimate. We'll reach out within 24 hours to discuss your project and answer any questions."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
mediaAnimation="blur-reveal"
|
|
mediaPosition="right"
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-wooden-fence-lush-green-hedge-garden-landscape_626616-510.jpg?_wi=5"
|
|
imageAlt="Beautiful fence installation"
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Get My Free Quote"
|
|
termsText="We respect your privacy. We'll only use your information to contact you about your fence quote."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="FenceCo"
|
|
copyrightText="© 2025 FenceCo. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "Why FenceCo", href: "#benefits" },
|
|
{ label: "Our Process", href: "#process" },
|
|
{ label: "Gallery", href: "#gallery" },
|
|
],
|
|
},
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Wood Privacy Fences", href: "#fence-types" },
|
|
{ label: "Aluminum Fences", href: "#fence-types" },
|
|
{ label: "Custom Gates", href: "#fence-types" },
|
|
],
|
|
},
|
|
{
|
|
title: "Customer", items: [
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "Get a Quote", href: "#contact" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|