From b1f112ccbfe6ef3db0551c497aeeab61d8fba6c8 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 3 Apr 2026 18:25:35 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 233 +++++++++++++----------------------------------
 1 file changed, 65 insertions(+), 168 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d50d8c0..ceb7249 100644
--- a/src/app/page.tsx
+++ b/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>
-- 
2.49.1