Merge version_2 into main #4
233
src/app/page.tsx
233
src/app/page.tsx
@@ -2,15 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { CheckCircle, Shield } from "lucide-react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { CheckCircle, Shield, BarChart3, Users, Mail, Phone, MapPin } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,208 +28,105 @@ export default function LandingPage() {
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services", id: "features"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Rober Fencing"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
<HeroBillboardDashboard
|
||||
title="Quality Fencing for Your Home"
|
||||
description="Rober Fencing provides professional, durable, and aesthetic fencing solutions designed to protect and enhance your property value."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Quote", href: "#contact"},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g7e98916d19dd745d9b756b973c098db86be413d0d8dff1e5d23597a00561599c92bc4a7882beb783b0b7cda7e5f257067d2c769c12589c3de08062d66fd620d6_1280.jpg"
|
||||
imageAlt="Professional fence installation"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://pixabay.com/get/g81e7cf64d59d53453f56c1776abcd2ee576c9ac6a221b8800c9104eb56296ff64bb287672d0a9f040255c267b025f81562672fa651cd95119cbe098ba1ad80ba_1280.jpg", alt: "Client 1"},
|
||||
{
|
||||
src: "https://pixabay.com/get/g2980531ca6538f7c2db15b88d815b1ca10972a3742cd3eeadf89bdac5dd4ae4f34bb62522b6d1c0c11b6f2839f37268456f97fd4e8c8d3981a576123a55204d7_1280.jpg", alt: "Client 2"},
|
||||
{
|
||||
src: "https://pixabay.com/get/g44fa7c391f44fd4aed9be6dab5c5f79cb4000ac5c2be1e6d64a38694ca090b13b3b87faa94646b71c81e1e6f9002b37208c6592f266abf74cdd95bf0fabac477_1280.jpg", alt: "Client 3"},
|
||||
{
|
||||
src: "https://pixabay.com/get/g4644f3dc283a0132c1b0343a2eae6bfb230ddbb593d039498972e7aa13e310a58a4167ce280025daf8932fdc0bb79dcba02099fc526ec72efffa9c0a365b2347_1280.jpg", alt: "Client 4"},
|
||||
{
|
||||
src: "https://pixabay.com/get/gfdd1bc124a6780208c446f5bc637e4f8318e8de1eeab4729eabb440eaffaea4ed44f88195ebaff46525713451ffbee059339629266d86b2162d40c77fd396218_1280.jpg", alt: "Client 5"},
|
||||
]}
|
||||
avatarText="Trusted by over 500+ local homeowners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text", text: "Durable Materials"},
|
||||
{
|
||||
type: "text", text: "Expert Craftsmanship"},
|
||||
{
|
||||
type: "text", text: "Local Trust"},
|
||||
{
|
||||
type: "text", text: "Custom Solutions"},
|
||||
{
|
||||
type: "text", text: "Weather Resistant"},
|
||||
]}
|
||||
dashboard={{
|
||||
title: "Project Overview", stats: [
|
||||
{ title: "Active Projects", values: [12, 15, 20], description: "Ongoing installations" },
|
||||
{ title: "Customer Satisfaction", values: [98, 99, 100], description: "Client rating" }
|
||||
],
|
||||
logoIcon: Shield,
|
||||
sidebarItems: [{ icon: Shield, active: true }, { icon: Users }],
|
||||
buttons: [{ text: "Get a Quote", href: "#contact" }],
|
||||
imageSrc: "https://pixabay.com/get/g7e98916d19dd745d9b756b973c098db86be413d0d8dff1e5d23597a00561599c92bc4a7882beb783b0b7cda7e5f257067d2c769c12589c3de08062d66fd620d6_1280.jpg"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="About Us"
|
||||
<AboutMetric
|
||||
title="Decades of Expertise"
|
||||
description="At Rober Fencing, we combine top-tier materials with experienced craftsmanship to ensure every fence we build is strong, secure, and beautiful."
|
||||
subdescription="Our commitment to excellence means we use only the most durable materials tailored to your specific garden or property needs."
|
||||
icon={Shield}
|
||||
imageSrc="https://pixabay.com/get/g1030da4a67277902ce8928e47cef8e118fc99928c47827b1301cb2482852d110ce3d68e5b1a7732f4b3879764efee08eb315e78bac7b127e48b21ba02d85e73b_1280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metrics={[
|
||||
{ icon: Shield, label: "Years Experience", value: "20+" },
|
||||
{ icon: Users, label: "Satisfied Clients", value: "500+" },
|
||||
{ icon: BarChart3, label: "Projects Done", value: "1200+" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Wood Fencing", description: "Traditional timber designs providing natural beauty and durability.", media: {
|
||||
imageSrc: "https://pixabay.com/get/gaf0302c755aa9176946e6bc3dcbb6672b14aaff98e051c1e3e3b721af3765a2713d142c7f30ba005f159369f59df9fd7bd4173cd98c61830def1ccce869b877c_1280.jpg", imageAlt: "Wood fencing"},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Pressure treated"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Natural aesthetics"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Custom heights"},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
title: "Metal Security", description: "High-strength metal fencing for superior property security.", media: {
|
||||
imageSrc: "https://pixabay.com/get/gad12568cb7d02a25d729b47b1fe72767c6f2abbbbe0effd69a24e5c84d3825570e574170c3eb5eea98177ab5fcd9fd327c43157659c14eb570f50ed3ea8e538b_1280.jpg?_wi=1", imageAlt: "Metal fencing"},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Powder coated"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Anti-corrosion"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Robust design"},
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
title: "Vinyl Fencing", description: "Low-maintenance and long-lasting vinyl solutions for modern properties.", media: {
|
||||
imageSrc: "https://pixabay.com/get/g219d691128c07d163125b4bcc9322ee2b3565ad38de9f84ff738d9a4b96915e6f01c532f10bb74fe2072f549c6a7d7088c87bd236ca2c668ddb453fc6fd7c818_1280.jpg?_wi=1", imageAlt: "Vinyl fencing"},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "UV resistant"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Easy cleanup"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Various colors"},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
<FeatureCardSix
|
||||
title="Our Specialized Fencing Services"
|
||||
description="From classic timber designs to modern security solutions, we offer custom fencing tailored to your project requirements."
|
||||
textboxLayout="split"
|
||||
features={[
|
||||
{ title: "Wood Fencing", description: "Traditional timber designs providing natural beauty and durability.", imageSrc: "https://pixabay.com/get/gaf0302c755aa9176946e6bc3dcbb6672b14aaff98e051c1e3e3b721af3765a2713d142c7f30ba005f159369f59df9fd7bd4173cd98c61830def1ccce869b877c_1280.jpg" },
|
||||
{ title: "Metal Security", description: "High-strength metal fencing for superior property security.", imageSrc: "https://pixabay.com/get/gad12568cb7d02a25d729b47b1fe72767c6f2abbbbe0effd69a24e5c84d3825570e574170c3eb5eea98177ab5fcd9fd327c43157659c14eb570f50ed3ea8e538b_1280.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
<TestimonialCardSixteen
|
||||
title="What Our Customers Say"
|
||||
description="See why homeowners trust Rober Fencing."
|
||||
kpiItems={[
|
||||
{ value: "4.9/5", label: "Average Rating" },
|
||||
{ value: "500+", label: "Happy Clients" },
|
||||
{ value: "98%", label: "Retention" }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "John Smith", date: "Jan 2024", title: "Homeowner", quote: "Rober Fencing built our wood fence perfectly. Highly recommended!", tag: "Wood Fence", avatarSrc: "https://pixabay.com/get/g81e7cf64d59d53453f56c1776abcd2ee576c9ac6a221b8800c9104eb56296ff64bb287672d0a9f040255c267b025f81562672fa651cd95119cbe098ba1ad80ba_1280.jpg", imageSrc: "https://pixabay.com/get/gad12568cb7d02a25d729b47b1fe72767c6f2abbbbe0effd69a24e5c84d3825570e574170c3eb5eea98177ab5fcd9fd327c43157659c14eb570f50ed3ea8e538b_1280.jpg?_wi=2", imageAlt: "modern metal security fencing residential"},
|
||||
{
|
||||
id: "2", name: "Sarah Miller", date: "Dec 2023", title: "Homeowner", quote: "Professional, on-time, and great quality work. Thank you!", tag: "Metal Fence", avatarSrc: "https://pixabay.com/get/g2980531ca6538f7c2db15b88d815b1ca10972a3742cd3eeadf89bdac5dd4ae4f34bb62522b6d1c0c11b6f2839f37268456f97fd4e8c8d3981a576123a55204d7_1280.jpg", imageSrc: "https://pixabay.com/get/g219d691128c07d163125b4bcc9322ee2b3565ad38de9f84ff738d9a4b96915e6f01c532f10bb74fe2072f549c6a7d7088c87bd236ca2c668ddb453fc6fd7c818_1280.jpg?_wi=2", imageAlt: "vinyl fence modern installation clean"},
|
||||
{
|
||||
id: "3", name: "David Brown", date: "Nov 2023", title: "Homeowner", quote: "Our new vinyl fence transformed our garden. Amazing work.", tag: "Vinyl Fence", avatarSrc: "https://pixabay.com/get/g44fa7c391f44fd4aed9be6dab5c5f79cb4000ac5c2be1e6d64a38694ca090b13b3b87faa94646b71c81e1e6f9002b37208c6592f266abf74cdd95bf0fabac477_1280.jpg", imageSrc: "https://pixabay.com/get/g81e7cf64d59d53453f56c1776abcd2ee576c9ac6a221b8800c9104eb56296ff64bb287672d0a9f040255c267b025f81562672fa651cd95119cbe098ba1ad80ba_1280.jpg", imageAlt: "happy homeowner garden fence installation"},
|
||||
{
|
||||
id: "4", name: "Emily Davis", date: "Oct 2023", title: "Homeowner", quote: "Fantastic service. They helped us choose the right fence for our budget.", tag: "Security", avatarSrc: "https://pixabay.com/get/g4644f3dc283a0132c1b0343a2eae6bfb230ddbb593d039498972e7aa13e310a58a4167ce280025daf8932fdc0bb79dcba02099fc526ec72efffa9c0a365b2347_1280.jpg", imageSrc: "https://pixabay.com/get/g2980531ca6538f7c2db15b88d815b1ca10972a3742cd3eeadf89bdac5dd4ae4f34bb62522b6d1c0c11b6f2839f37268456f97fd4e8c8d3981a576123a55204d7_1280.jpg", imageAlt: "satisfied residential fence project client"},
|
||||
{
|
||||
id: "5", name: "Mark Wilson", date: "Sep 2023", title: "Homeowner", quote: "Sturdy, secure, and looks great. Could not be happier.", tag: "Privacy", avatarSrc: "https://pixabay.com/get/gfdd1bc124a6780208c446f5bc637e4f8318e8de1eeab4729eabb440eaffaea4ed44f88195ebaff46525713451ffbee059339629266d86b2162d40c77fd396218_1280.jpg", imageSrc: "https://pixabay.com/get/g44fa7c391f44fd4aed9be6dab5c5f79cb4000ac5c2be1e6d64a38694ca090b13b3b87faa94646b71c81e1e6f9002b37208c6592f266abf74cdd95bf0fabac477_1280.jpg", imageAlt: "home owner fence quality satisfaction"},
|
||||
{ id: "1", name: "John Smith", role: "Homeowner", company: "Local", rating: 5, imageSrc: "https://pixabay.com/get/g81e7cf64d59d53453f56c1776abcd2ee576c9ac6a221b8800c9104eb56296ff64bb287672d0a9f040255c267b025f81562672fa651cd95119cbe098ba1ad80ba_1280.jpg" }
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
description="See why homeowners trust Rober Fencing for their property boundary and security needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How long does a fence installation take?", content: "Most installations take 1-3 days depending on the scope of the project."},
|
||||
{
|
||||
id: "2", title: "Do you provide estimates?", content: "Yes, we offer free site visits and no-obligation quotes for all potential customers."},
|
||||
{
|
||||
id: "3", title: "Are your materials durable?", content: "We only use high-grade, weather-treated materials that are built to last against local weather conditions."},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Clear answers to help you choose the best fencing option for your property."
|
||||
<FaqBase
|
||||
title="Frequently Asked Questions"
|
||||
description="Clear answers to help you choose."
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
faqs={[
|
||||
{ id: "1", title: "How long does installation take?", content: "1-3 days on average." },
|
||||
{ id: "2", title: "Do you provide estimates?", content: "Yes, always free." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
tag="Contact Us"
|
||||
<ContactSplitForm
|
||||
title="Start Your Fencing Project"
|
||||
description="Ready to enhance your property security and value? Get in touch with Rober Fencing today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us", href: "mailto:hello@roberfencing.com"},
|
||||
description="Enhance your property today."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email Address" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
<FooterLogoReveal
|
||||
logoText="Rober Fencing"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Services", href: "#features"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user