197 lines
7.9 KiB
TypeScript
197 lines
7.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { Award, Phone, Shield, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Services", id: "features"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Gallo Fence LLC"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Excellence in Every Panel"
|
|
description="Gallo Fence LLC delivers premium fence installation services tailored to enhance the beauty, security, and value of your property."
|
|
kpis={[
|
|
{
|
|
value: "15+", label: "Years Experience"},
|
|
{
|
|
value: "500+", label: "Projects Completed"},
|
|
{
|
|
value: "100%", label: "Customer Satisfaction"},
|
|
]}
|
|
enableKpiAnimation={true}
|
|
imageSrc="http://img.b2bpic.net/free-photo/pine-branches-white-wooden-fence_1372-71.jpg"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiley-couple-inside-their-new-home-holding-house-plans_23-2148895457.jpg", alt: "Client 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/man-using-mobile-phone_23-2148000041.jpg", alt: "Client 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-couple-love-garden_23-2147986408.jpg", alt: "Client 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/woman-hiding-her-eyes-wooden-plank_23-2147948233.jpg", alt: "Client 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5909.jpg", alt: "Client 5"},
|
|
]}
|
|
avatarText="Trusted by 500+ homeowners"
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Residential Fencing"},
|
|
{
|
|
type: "text", text: "Wood & Vinyl"},
|
|
{
|
|
type: "text", text: "Security Gates"},
|
|
{
|
|
type: "text", text: "Custom Designs"},
|
|
{
|
|
type: "text", text: "Expert Craftsmanship"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="Built to Last"
|
|
metrics={[
|
|
{
|
|
icon: Shield,
|
|
label: "Lifetime Durability", value: "High"},
|
|
{
|
|
icon: Zap,
|
|
label: "Rapid Installation", value: "Fast"},
|
|
{
|
|
icon: Award,
|
|
label: "Quality Materials", value: "Premium"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Classic Wood Fencing", description: "Timeless aesthetics and natural beauty for your backyard privacy.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/plants-door_1361-94.jpg?_wi=1", imageAlt: "Wood Fence"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/plants-door_1361-94.jpg?_wi=2", imageAlt: "Wood Fence Detail"},
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Metal Security Fencing", description: "Strength and reliability for ultimate property security.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-background-with-floor_23-2149207761.jpg?_wi=1", imageAlt: "Metal Fence"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-background-with-floor_23-2149207761.jpg?_wi=2", imageAlt: "Metal Fence Detail"},
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Vinyl Privacy Fencing", description: "Maintenance-free privacy that looks pristine all year round.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-holding-skateboard_23-2148805144.jpg?_wi=1", imageAlt: "Vinyl Fence"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-holding-skateboard_23-2148805144.jpg?_wi=2", imageAlt: "Vinyl Fence Detail"},
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
title="Our Fencing Solutions"
|
|
description="From classic wood to modern metal, we offer durable solutions to match your home's unique style."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "John Doe", imageSrc: "http://img.b2bpic.net/free-photo/smiley-couple-inside-their-new-home-holding-house-plans_23-2148895457.jpg"},
|
|
{
|
|
id: "2", name: "Jane Smith", imageSrc: "http://img.b2bpic.net/free-photo/man-using-mobile-phone_23-2148000041.jpg"},
|
|
{
|
|
id: "3", name: "Mark Johnson", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-love-garden_23-2147986408.jpg"},
|
|
{
|
|
id: "4", name: "Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/woman-hiding-her-eyes-wooden-plank_23-2147948233.jpg"},
|
|
{
|
|
id: "5", name: "David Brown", imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-painting-fence-home_1150-5909.jpg"},
|
|
]}
|
|
cardTitle="What Our Clients Say"
|
|
cardTag="Testimonials"
|
|
cardAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "Do you provide estimates?", content: "Yes, we offer free onsite estimates."},
|
|
{
|
|
id: "q2", title: "How long does installation take?", content: "Most projects are completed within 3-5 business days."},
|
|
{
|
|
id: "q3", title: "Do you handle permits?", content: "We handle all required local permits for your fence."},
|
|
]}
|
|
ctaTitle="Ready to Start?"
|
|
ctaDescription="Get a free estimate on your next project today."
|
|
ctaButton={{
|
|
text: "Call Now", href: "tel:5550123456"}}
|
|
ctaIcon={Phone}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Gallo Fence LLC"
|
|
leftLink={{
|
|
text: "Privacy Policy", href: "#"}}
|
|
rightLink={{
|
|
text: "Contact Us", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|