Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import ReactLenis from "lenis/react";
-import HeroBillboard from "@/components/sections/hero/HeroBillboard";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
+import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Coffee, MapPin, Clock } from "lucide-react";
+import { MapPin, Info, Phone } from "lucide-react";
 
 export default function BorrowdaleVillageWalkPage() {
   return (
@@ -25,98 +25,94 @@ export default function BorrowdaleVillageWalkPage() {
       headingFontWeight="semibold"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "About", id: "about" },
-            { name: "Walks", id: "walks" },
-            { name: "Contact", id: "contact" },
-          ]}
-          brandName="Borrowdale Village Walk"
-          button={{ text: "Get Started" }}
-        />
-        
-        <div id="hero">
-          <HeroBillboard
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "About", id: "about" },
+              { name: "Walks", id: "walks" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Borrowdale Village Walk"
+            button={{ text: "Contact", href: "#contact" }}
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroSplitKpi
             title="Experience the Beauty of Borrowdale"
-            description="Join us for a guided walk through one of the most picturesque villages in the heart of nature. Discover hidden paths and stunning vistas."
+            description="Join us for a guided walk through one of the most picturesque villages in the heart of nature."
             background={{ variant: "sparkles-gradient" }}
-            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfi64W5OAKPYfmFKtdIN9sZaaB/uploaded-1778679850690-ynsix8uc.jpg"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfi64W5OAKPYfmFKtdIN9sZaaB/uploaded-1778680013360-47r14ky2.jpg?_wi=1"
             imageAlt="Borrowdale Village Walk"
+            enableKpiAnimation={true}
+            kpis={[
+              { value: "15+", label: "Routes" },
+              { value: "500+", label: "Explorers" },
+              { value: "4.9", label: "Rating" }
+            ]}
             buttons={[{ text: "Book Your Walk", href: "#contact" }]}
           />
         </div>
 
-        <div id="about">
-          <TextSplitAbout
-            title="Our Story"
-            description={[
-              "Borrowdale Village Walk is dedicated to preserving the natural beauty of our local landscapes while sharing it with explorers of all ages.",              "Our guided tours focus on sustainable tourism, local history, and providing a relaxing experience for every visitor."
-            ]}
+        <div id="about" data-section="about">
+          <TestimonialAboutCard
+            tag="Our Story"
+            tagIcon={Info}
+            title="Dedication to Nature"
+            description="Borrowdale Village Walk is dedicated to preserving the natural beauty of our local landscapes."
+            subdescription="Our guided tours focus on sustainable tourism and local history for every visitor."
+            icon={MapPin}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfi64W5OAKPYfmFKtdIN9sZaaB/uploaded-1778680013360-47r14ky2.jpg?_wi=2"
             useInvertedBackground={false}
           />
         </div>
 
-        <div id="walks">
-          <FeatureBento
+        <div id="walks" data-section="walks">
+          <FeatureCardThree
             title="Explore Our Walks"
-            description="We offer a variety of curated experiences that highlight the unique charm and biodiversity of the Borrowdale area."
+            description="A variety of curated experiences that highlight the unique charm of the Borrowdale area."
             animationType="slide-up"
+            gridVariant="three-columns-all-equal-width"
             textboxLayout="default"
             useInvertedBackground={true}
             features={[
               { 
                 title: "Morning Nature Hike", 
-                description: "A gentle 2-hour walk focusing on local flora and fauna with a professional guide.", 
-                bentoComponent: "reveal-icon", 
-                icon: Coffee 
+                description: "A gentle 2-hour walk focusing on local flora.", 
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfi64W5OAKPYfmFKtdIN9sZaaB/uploaded-1778679850690-ynsix8uc.jpg?_wi=1" 
               },
               { 
                 title: "Historical Village Tour", 
-                description: "Discover the rich heritage and architecture that defines Borrowdale village life.", 
-                bentoComponent: "reveal-icon", 
-                icon: MapPin 
+                description: "Discover rich heritage and architecture.", 
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfi64W5OAKPYfmFKtdIN9sZaaB/uploaded-1778680013360-47r14ky2.jpg?_wi=3" 
               },
               { 
                 title: "Sunset Panoramic Trail", 
-                description: "Experience breathtaking views at golden hour on our most popular elevated route.", 
-                bentoComponent: "reveal-icon", 
-                icon: Clock 
+                description: "Experience breathtaking views at golden hour.", 
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfi64W5OAKPYfmFKtdIN9sZaaB/uploaded-1778679850690-ynsix8uc.jpg?_wi=2" 
               }
             ]}
           />
         </div>
 
-        <div id="contact">
-          <ContactCTA
+        <div id="contact" data-section="contact">
+          <ContactCenter
             tag="Join Us"
+            tagIcon={Phone}
             title="Ready for an Adventure?"
-            description="Book your walking tour today and create lasting memories in the beautiful Borrowdale village."
-            buttons={[{ text: "Contact Us", href: "#" }]}
+            description="Book your walking tour today and create lasting memories. Contact us at 077 347 9931 or visit us at 63QP+6Q9, 8th St, Harare."
             background={{ variant: "radial-gradient" }}
             useInvertedBackground={false}
           />
         </div>
 
-        <FooterBase
-          logoText="Borrowdale Village Walk"
-          columns={[
-            { 
-              title: "Navigate", 
-              items: [
-                { label: "Home", href: "#" },
-                { label: "About", href: "#about" },
-                { label: "Walks", href: "#walks" }
-              ] 
-            },
-            { 
-              title: "Contact", 
-              items: [
-                { label: "info@borrowdalewalks.com", href: "mailto:info@borrowdalewalks.com" },
-                { label: "Village Square, Borrowdale", href: "#" }
-              ] 
-            }
-          ]}
-        />
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Borrowdale Village Walk"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );