Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
@@ -29,50 +29,39 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Services",
-          id: "/services",
-        },
+          name: "Services",          id: "/services"},
         {
-          name: "Portfolio",
-          id: "/portfolio",
-        },
+          name: "Portfolio",          id: "/portfolio"},
         {
-          name: "Pricing",
-          id: "/pricing",
-        },
+          name: "Pricing",          id: "/pricing"},
         {
-          name: "Free Audit",
-          id: "/free-audit",
-        },
+          name: "Free Audit",          id: "/free-audit"},
         {
-          name: "Contact",
-          id: "/contact",
-        },
+          name: "Contact",          id: "/contact"},
       ]}
       button={{
-        text: "Get My Free Audit",
-        href: "/free-audit",
-      }}
+        text: "Get My Free Audit",        href: "/free-audit"}}
       brandName="Estato"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardScroll
+      <HeroSplitKpi
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       title="Designed to Impress. BUILT TO SELL."
       description="Websites that generate property leads for real estate agents in Brisbane. We blend premium design with conversion strategy to help your agency dominate the market."
+      kpis={[
+        { value: "85%", label: "Lead Conversion" },
+        { value: "2.4s", label: "Page Load" },
+        { value: "100+", label: "Clients Served" }
+      ]}
+      enableKpiAnimation={true}
       buttons={[
         {
-          text: "Get My Free Website Audit",
-          href: "/free-audit",
-        },
+          text: "Get My Free Website Audit",          href: "/free-audit"},
         {
-          text: "View Portfolio",
-          href: "/portfolio",
-        },
+          text: "View Portfolio",          href: "/portfolio"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283261.jpg"
       imageAlt="luxury real estate 3d abstract"
@@ -86,34 +75,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "1",
-          title: "Outdated Design",
-          author: "Estato",
-          description: "Losing authority with ancient, slow-loading templates.",
-          imageSrc: "http://img.b2bpic.net/free-photo/construction-design-project-renovation-concept_53876-124114.jpg",
-          tags: [
-            "Strategy",
-          ],
+          id: "1",          title: "Outdated Design",          author: "Estato",          description: "Losing authority with ancient, slow-loading templates.",          imageSrc: "http://img.b2bpic.net/free-photo/construction-design-project-renovation-concept_53876-124114.jpg",          tags: [
+            "Strategy"],
         },
         {
-          id: "2",
-          title: "Poor Mobile Experience",
-          author: "Estato",
-          description: "Missing 80% of buyers browsing properties on the go.",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-media-connection-information-technology_53876-122770.jpg",
-          tags: [
-            "Mobile",
-          ],
+          id: "2",          title: "Poor Mobile Experience",          author: "Estato",          description: "Missing 80% of buyers browsing properties on the go.",          imageSrc: "http://img.b2bpic.net/free-photo/digital-media-connection-information-technology_53876-122770.jpg",          tags: [
+            "Mobile"],
         },
         {
-          id: "3",
-          title: "No Lead Capture System",
-          author: "Estato",
-          description: "Visitors look at listings and leave without ever converting.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kh2nu9",
-          tags: [
-            "Conversion",
-          ],
+          id: "3",          title: "No Lead Capture System",          author: "Estato",          description: "Visitors look at listings and leave without ever converting.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kh2nu9",          tags: [
+            "Conversion"],
         },
       ]}
       title="Why Real Estate Websites Fail"
@@ -128,55 +99,28 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "p1",
-          badge: "Entry",
-          price: "$1,500",
-          subtitle: "Agent Launch",
-          buttons: [
+          id: "p1",          badge: "Entry",          price: "$1,500",          subtitle: "Agent Launch",          buttons: [
             {
-              text: "Claim My Spot",
-              href: "/free-audit",
-            },
+              text: "Claim My Spot",              href: "/free-audit"},
           ],
           features: [
-            "Mobile First",
-            "SEO Basic",
-            "Conversion Landing",
-          ],
+            "Mobile First",            "SEO Basic",            "Conversion Landing"],
         },
         {
-          id: "p2",
-          badge: "Most Popular",
-          price: "$2,500",
-          subtitle: "Growth",
-          buttons: [
+          id: "p2",          badge: "Most Popular",          price: "$2,500",          subtitle: "Growth",          buttons: [
             {
-              text: "Claim My Spot",
-              href: "/free-audit",
-            },
+              text: "Claim My Spot",              href: "/free-audit"},
           ],
           features: [
-            "Everything in Launch",
-            "Advanced Lead Flow",
-            "CRM Integration",
-          ],
+            "Everything in Launch",            "Advanced Lead Flow",            "CRM Integration"],
         },
         {
-          id: "p3",
-          badge: "High-End",
-          price: "$4,000",
-          subtitle: "Authority",
-          buttons: [
+          id: "p3",          badge: "High-End",          price: "$4,000",          subtitle: "Authority",          buttons: [
             {
-              text: "Claim My Spot",
-              href: "/free-audit",
-            },
+              text: "Claim My Spot",              href: "/free-audit"},
           ],
           features: [
-            "Everything in Growth",
-            "Full Brand Suite",
-            "Custom Property API",
-          ],
+            "Everything in Growth",            "Full Brand Suite",            "Custom Property API"],
         },
       ]}
       title="Founding Client Offer — $300 for first 5 agents"
@@ -193,33 +137,13 @@ export default function LandingPage() {
       description="Hear from Brisbane real estate professionals who transformed their lead generation with Estato."
       testimonials={[
         {
-          id: "t1",
-          name: "Sarah Miller",
-          handle: "@smiller",
-          testimonial: "My new site looks incredible and converts 3x more than my old template.",
-          imageSrc: "http://img.b2bpic.net/free-photo/roll-wallpaper-illuminated-by-artificial-light_122409-89.jpg?_wi=1",
-        },
+          id: "t1",          name: "Sarah Miller",          handle: "@smiller",          testimonial: "My new site looks incredible and converts 3x more than my old template.",          imageSrc: "http://img.b2bpic.net/free-photo/roll-wallpaper-illuminated-by-artificial-light_122409-89.jpg?_wi=1"},
         {
-          id: "t2",
-          name: "James Chen",
-          handle: "@jchen_re",
-          testimonial: "The lead capture system is exactly what my agency needed to scale.",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283225.jpg",
-        },
+          id: "t2",          name: "James Chen",          handle: "@jchen_re",          testimonial: "The lead capture system is exactly what my agency needed to scale.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283225.jpg"},
         {
-          id: "t3",
-          name: "Elena Rodriguez",
-          handle: "@elenare",
-          testimonial: "Professional, sleek, and highly effective. Highly recommend their design process.",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-building-with-windows-clear-sky_181624-4672.jpg?_wi=1",
-        },
+          id: "t3",          name: "Elena Rodriguez",          handle: "@elenare",          testimonial: "Professional, sleek, and highly effective. Highly recommend their design process.",          imageSrc: "http://img.b2bpic.net/free-photo/modern-building-with-windows-clear-sky_181624-4672.jpg?_wi=1"},
         {
-          id: "t4",
-          name: "Tom O'Connor",
-          handle: "@tomoconnor",
-          testimonial: "Finally, a agency that understands the intersection of real estate and tech.",
-          imageSrc: "http://img.b2bpic.net/free-photo/grayscale-photography-building-low-angle_250224-199.jpg",
-        },
+          id: "t4",          name: "Tom O'Connor",          handle: "@tomoconnor",          testimonial: "Finally, a agency that understands the intersection of real estate and tech.",          imageSrc: "http://img.b2bpic.net/free-photo/grayscale-photography-building-low-angle_250224-199.jpg"},
       ]}
     />
   </div>
@@ -239,29 +163,19 @@ export default function LandingPage() {
       logoText="Estato"
       columns={[
         {
-          title: "Company",
-          items: [
+          title: "Company",          items: [
             {
-              label: "Services",
-              href: "/services",
-            },
+              label: "Services",              href: "/services"},
             {
-              label: "Portfolio",
-              href: "/portfolio",
-            },
+              label: "Portfolio",              href: "/portfolio"},
             {
-              label: "Contact",
-              href: "/contact",
-            },
+              label: "Contact",              href: "/contact"},
           ],
         },
         {
-          title: "Legal",
-          items: [
+          title: "Legal",          items: [
             {
-              label: "Privacy Policy",
-              href: "#",
-            },
+              label: "Privacy Policy",              href: "#"},
           ],
         },
       ]}
@@ -270,4 +184,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}