src/app/blog/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import ReactLenis from "lenis/react";
-import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
@@ -34,7 +34,6 @@ export default function BlogPage() {
                             { name: "Reviews", id: "testimonials" },
                             { name: "Contact", id: "contact" }
                         ]}
-                        button={{ text: "Shop Now", href: "#products" }}
                     />
                 </div>
 
@@ -44,7 +43,7 @@ export default function BlogPage() {
                     </div>
                 ) : (
                     <div id="blog" data-section="blog">
-                        <BlogCardThree
+                        <BlogCardOne
                             blogs={posts}
                             title="Featured Articles"
                             description="Explore our latest insights and beach lifestyle content"

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroOverlayBlock from '@/components/sections/hero/HeroOverlayBlock';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
@@ -35,16 +35,20 @@ export default function BeachPerfumePage() {
             { name: "Reviews", id: "testimonials" },
             { name: "Contact", id: "contact" }
           ]}
-          button={{
-            text: "Shop Now",            href: "#products"
-          }}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroOverlayBlock
+        <HeroSplitKpi
           title="Discover the Essence of the Coast"
           description="Luxury fragrances inspired by sun, sand, and sea. Each scent tells a story of coastal elegance and timeless beauty."
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "15,000+", label: "Happy Customers" },
+            { value: "35+", label: "Countries Served" },
+            { value: "22", label: "Unique Scents" }
+          ]}
+          enableKpiAnimation={true}
           tag="Premium Collection"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
@@ -53,9 +57,9 @@ export default function BeachPerfumePage() {
             { text: "Learn More", href: "#about" }
           ]}
           buttonAnimation="slide-up"
-          background={{ variant: "plain" }}
           imageSrc="https://img.b2bpic.net/free-photo/top-view-skincare-product-beach_23-2150167921.jpg"
           imageAlt="Ocean Breeze Perfume"
+          mediaAnimation="slide-up"
         />
       </div>
 

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

@@ -92,7 +92,6 @@ export default function ProductPage({ params }: ProductPageProps) {
                                 {"name":"Contact","id":"contact"},
                                 {"name":"Shop","id":"/shop"}
                             ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -136,7 +135,6 @@ export default function ProductPage({ params }: ProductPageProps) {
                                 {"name":"Contact","id":"contact"},
                                 {"name":"Shop","id":"/shop"}
                             ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -187,7 +185,6 @@ export default function ProductPage({ params }: ProductPageProps) {
                             {"name":"Contact","id":"contact"},
                             {"name":"Shop","id":"/shop"}
                         ]}
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                 </div>
                 <div id="productDetailCard" data-section="productDetailCard">

src/app/shop/page.tsx

@@ -42,9 +42,6 @@ export default function ShopPage() {
                                 {"name":"Contact","id":"contact"},
                                 {"name":"Shop","id":"/shop"}
                             ]}
-                            button={{
-                                text: "Cart",                                href: "#cart"
-                            }}
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -87,9 +84,6 @@ export default function ShopPage() {
                             {"name":"Contact","id":"contact"},
                             {"name":"Shop","id":"/shop"}
                         ]}
-                        button={{
-                            text: "Cart",                            href: "#cart"
-                        }}
                     />
                 </div>
                 <div id="productCatalog" data-section="productCatalog">