Merge version_3 into main

Merge version_3 into main

src/app/blog/page.tsx

@@ -28,7 +28,7 @@ export default function BlogPage() {
                     <NavbarLayoutFloatingOverlay
                         brandName="Fia"
                         navItems={[
-                            { name: "Home", id: "/" },
+                            { name: "Home", id: "hero" },
                             { name: "About", id: "about" },
                             { name: "Menu", id: "features" },
                             { name: "Stories", id: "testimonial" },

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
@@ -42,20 +42,26 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroOverlay
+        <HeroSplitKpi
           title="Welcome to Fia"
           description="Discover exceptional coffee, warm hospitality, and a community where every cup tells a story. Your perfect coffeeshop escape awaits."
           tag="Artisanal Coffee Experience"
           tagIcon={Coffee}
+          background={{ variant: "plain" }}
           imageSrc="https://img.b2bpic.net/free-photo/cozy-cafe_1098-13854.jpg"
           imageAlt="Fia Coffeeshop Interior"
-          textPosition="bottom-left"
-          showBlur={true}
-          showDimOverlay={false}
+          imagePosition="right"
+          kpis={[
+            { value: "12+", label: "Years of Expertise" },
+            { value: "5,000+", label: "Happy Customers" },
+            { value: "15+", label: "Bean Origins" }
+          ]}
+          enableKpiAnimation={true}
           buttons={[
             { text: "Explore Menu", href: "#features" },
             { text: "Reserve Now", href: "#contact" }
           ]}
+          mediaAnimation="slide-up"
         />
       </div>
 

src/app/shop/[id]/page.tsx

@@ -85,12 +85,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <NavbarLayoutFloatingOverlay
                             brandName="Fia"
                             navItems={[
-                                {"name":"Home","id":"/"},
+                                {"name":"Home","id":"hero"},
                                 {"name":"About","id":"about"},
                                 {"name":"Menu","id":"features"},
                                 {"name":"Stories","id":"testimonial"},
-                                {"name":"Contact","id":"contact"},
-                                {"name":"Shop","id":"/shop"}
+                                {"name":"Contact","id":"contact"}
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -133,12 +132,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <NavbarLayoutFloatingOverlay
                             brandName="Fia"
                             navItems={[
-                                {"name":"Home","id":"/"},
+                                {"name":"Home","id":"hero"},
                                 {"name":"About","id":"about"},
                                 {"name":"Menu","id":"features"},
                                 {"name":"Stories","id":"testimonial"},
-                                {"name":"Contact","id":"contact"},
-                                {"name":"Shop","id":"/shop"}
+                                {"name":"Contact","id":"contact"}
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -188,12 +186,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <NavbarLayoutFloatingOverlay
                         brandName="Fia"
                         navItems={[
-                            {"name":"Home","id":"/"},
+                            {"name":"Home","id":"hero"},
                             {"name":"About","id":"about"},
                             {"name":"Menu","id":"features"},
                             {"name":"Stories","id":"testimonial"},
-                            {"name":"Contact","id":"contact"},
-                            {"name":"Shop","id":"/shop"}
+                            {"name":"Contact","id":"contact"}
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />

src/app/shop/page.tsx

@@ -37,12 +37,11 @@ export default function ShopPage() {
                         <NavbarLayoutFloatingOverlay
                             brandName="Fia"
                             navItems={[
-                                {"name":"Home","id":"/"},
+                                {"name":"Home","id":"hero"},
                                 {"name":"About","id":"about"},
                                 {"name":"Menu","id":"features"},
                                 {"name":"Stories","id":"testimonial"},
-                                {"name":"Contact","id":"contact"},
-                                {"name":"Shop","id":"/shop"}
+                                {"name":"Contact","id":"contact"}
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -84,12 +83,11 @@ export default function ShopPage() {
                     <NavbarLayoutFloatingOverlay
                         brandName="Fia"
                         navItems={[
-                            {"name":"Home","id":"/"},
+                            {"name":"Home","id":"hero"},
                             {"name":"About","id":"about"},
                             {"name":"Menu","id":"features"},
                             {"name":"Stories","id":"testimonial"},
-                            {"name":"Contact","id":"contact"},
-                            {"name":"Shop","id":"/shop"}
+                            {"name":"Contact","id":"contact"}
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />