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 HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
+import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterBase from "@/components/sections/footer/FooterBase";
+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
+        <div id="nav" data-section="nav">
-          navItems={[
+          <NavbarLayoutFloatingInline
-            { name: "About", id: "about" },
+            navItems={[
-            { name: "Walks", id: "walks" },
+              { name: "About", id: "about" },
-            { name: "Contact", id: "contact" },
+              { name: "Walks", id: "walks" },
-          ]}
+              { name: "Contact", id: "contact" },
-          brandName="Borrowdale Village Walk"
+            ]}
-          button={{ text: "Get Started" }}
+            brandName="Borrowdale Village Walk"
-        />
+            button={{ text: "Contact", href: "#contact" }}
+          />
+        </div>
 
-        <div id="hero">
+        <div id="hero" data-section="hero">
-          <HeroBillboard
+          <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">
+        <div id="about" data-section="about">
-          <TextSplitAbout
+          <TestimonialAboutCard
-            title="Our Story"
+            tag="Our Story"
-            description={[
+            tagIcon={Info}
-              "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."
+            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">
+        <div id="walks" data-section="walks">
-          <FeatureBento
+          <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.", 
+                description: "A gentle 2-hour walk focusing on local flora.", 
-                bentoComponent: "reveal-icon", 
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfi64W5OAKPYfmFKtdIN9sZaaB/uploaded-1778679850690-ynsix8uc.jpg?_wi=1" 
-                icon: Coffee 
               },
               { 
                 title: "Historical Village Tour", 
-                description: "Discover the rich heritage and architecture that defines Borrowdale village life.", 
+                description: "Discover rich heritage and architecture.", 
-                bentoComponent: "reveal-icon", 
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfi64W5OAKPYfmFKtdIN9sZaaB/uploaded-1778680013360-47r14ky2.jpg?_wi=3" 
-                icon: MapPin 
               },
               { 
                 title: "Sunset Panoramic Trail", 
-                description: "Experience breathtaking views at golden hour on our most popular elevated route.", 
+                description: "Experience breathtaking views at golden hour.", 
-                bentoComponent: "reveal-icon", 
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfi64W5OAKPYfmFKtdIN9sZaaB/uploaded-1778679850690-ynsix8uc.jpg?_wi=2" 
-                icon: Clock 
               }
             ]}
           />
         </div>
 
-        <div id="contact">
+        <div id="contact" data-section="contact">
-          <ContactCTA
+          <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."
+            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."
-            buttons={[{ text: "Contact Us", href: "#" }]}
             background={{ variant: "radial-gradient" }}
             useInvertedBackground={false}
           />
         </div>
 
-        <FooterBase
+        <div id="footer" data-section="footer">
-          logoText="Borrowdale Village Walk"
+          <FooterLogoReveal
-          columns={[
+            logoText="Borrowdale Village Walk"
-            { 
+            leftLink={{ text: "Privacy Policy", href: "#" }}
-              title: "Navigate", 
+            rightLink={{ text: "Terms of Service", href: "#" }}
-              items: [
+          />
-                { label: "Home", href: "#" },
+        </div>
-                { 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: "#" }
-              ] 
-            }
-          ]}
-        />
       </ReactLenis>
     </ThemeProvider>
   );