diff --git a/src/app/accessories/page.tsx b/src/app/accessories/page.tsx
index e829853..c7a728f 100644
--- a/src/app/accessories/page.tsx
+++ b/src/app/accessories/page.tsx
@@ -2,35 +2,28 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import FooterBase from "@/components/sections/footer/FooterBase";
 import ReactLenis from "lenis/react";
 
 export default function AccessoriesPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "Mobile Phones", id: "/mobile-phones" },
-            { name: "Laptops", id: "/laptops" },
-            { name: "Computer Parts", id: "/computer-parts" },
-            { name: "Accessories", id: "/accessories" },
-            { name: "Contact", id: "contact" },
-          ]}
-        />
-        <div className="pt-32 pb-20">
-            <ProductCatalog 
-              layout="page" 
-              products={[]} 
-            />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Mobile Phones", id: "/mobile-phones" },
+              { name: "Laptops", id: "/laptops" },
+              { name: "Computer Parts", id: "/computer-parts" },
+              { name: "Accessories", id: "/accessories" },
+              { name: "Checkout", id: "/checkout" },
+              { name: "Shop", id: "/shop" },
+            ]}
+          />
         </div>
         <FooterBase 
           logoText="Webild" 
-          columns={[]} 
         />
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index 1a0a07c..b72bbec 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -5,14 +5,20 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
 
 export default function CheckoutPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        brandName="Webild"
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Shop", id: "/shop" },
-        ]}
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Webild"
+          navItems={[
+            { name: "Mobile Phones", id: "/mobile-phones" },
+            { name: "Laptops", id: "/laptops" },
+            { name: "Computer Parts", id: "/computer-parts" },
+            { name: "Accessories", id: "/accessories" },
+            { name: "Checkout", id: "/checkout" },
+            { name: "Shop", id: "/shop" },
+          ]}
+        />
+      </div>
       <div className="pt-32 pb-20 container mx-auto px-6">
         <h1 className="text-4xl font-bold mb-8">Checkout</h1>
         <div className="grid md:grid-cols-2 gap-12">
@@ -36,4 +42,4 @@ export default function CheckoutPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/computer-parts/page.tsx b/src/app/computer-parts/page.tsx
index dfd0687..c0fb88c 100644
--- a/src/app/computer-parts/page.tsx
+++ b/src/app/computer-parts/page.tsx
@@ -2,35 +2,28 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import FooterBase from "@/components/sections/footer/FooterBase";
 import ReactLenis from "lenis/react";
 
 export default function ComputerPartsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "Mobile Phones", id: "/mobile-phones" },
-            { name: "Laptops", id: "/laptops" },
-            { name: "Computer Parts", id: "/computer-parts" },
-            { name: "Accessories", id: "/accessories" },
-            { name: "Contact", id: "contact" },
-          ]}
-        />
-        <div className="pt-32 pb-20">
-            <ProductCatalog 
-              layout="page" 
-              products={[]} 
-            />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Mobile Phones", id: "/mobile-phones" },
+              { name: "Laptops", id: "/laptops" },
+              { name: "Computer Parts", id: "/computer-parts" },
+              { name: "Accessories", id: "/accessories" },
+              { name: "Checkout", id: "/checkout" },
+              { name: "Shop", id: "/shop" },
+            ]}
+          />
         </div>
         <FooterBase 
           logoText="Webild" 
-          columns={[]} 
         />
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/laptops/page.tsx b/src/app/laptops/page.tsx
index 063ebab..7ab8eea 100644
--- a/src/app/laptops/page.tsx
+++ b/src/app/laptops/page.tsx
@@ -2,35 +2,28 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import FooterBase from "@/components/sections/footer/FooterBase";
 import ReactLenis from "lenis/react";
 
 export default function LaptopsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "Mobile Phones", id: "/mobile-phones" },
-            { name: "Laptops", id: "/laptops" },
-            { name: "Computer Parts", id: "/computer-parts" },
-            { name: "Accessories", id: "/accessories" },
-            { name: "Contact", id: "contact" },
-          ]}
-        />
-        <div className="pt-32 pb-20">
-            <ProductCatalog 
-              layout="page" 
-              products={[]} 
-            />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Mobile Phones", id: "/mobile-phones" },
+              { name: "Laptops", id: "/laptops" },
+              { name: "Computer Parts", id: "/computer-parts" },
+              { name: "Accessories", id: "/accessories" },
+              { name: "Checkout", id: "/checkout" },
+              { name: "Shop", id: "/shop" },
+            ]}
+          />
         </div>
         <FooterBase 
           logoText="Webild" 
-          columns={[]} 
         />
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/mobile-phones/page.tsx b/src/app/mobile-phones/page.tsx
index c780a19..9b7436e 100644
--- a/src/app/mobile-phones/page.tsx
+++ b/src/app/mobile-phones/page.tsx
@@ -2,35 +2,28 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import FooterBase from "@/components/sections/footer/FooterBase";
 import ReactLenis from "lenis/react";
 
 export default function MobilePhonesPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "Mobile Phones", id: "/mobile-phones" },
-            { name: "Laptops", id: "/laptops" },
-            { name: "Computer Parts", id: "/computer-parts" },
-            { name: "Accessories", id: "/accessories" },
-            { name: "Contact", id: "contact" },
-          ]}
-        />
-        <div className="pt-32 pb-20">
-            <ProductCatalog 
-              layout="page" 
-              products={[]} 
-            />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Mobile Phones", id: "/mobile-phones" },
+              { name: "Laptops", id: "/laptops" },
+              { name: "Computer Parts", id: "/computer-parts" },
+              { name: "Accessories", id: "/accessories" },
+              { name: "Checkout", id: "/checkout" },
+              { name: "Shop", id: "/shop" },
+            ]}
+          />
         </div>
         <FooterBase 
           logoText="Webild" 
-          columns={[]} 
         />
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/product-detail/page.tsx b/src/app/product-detail/page.tsx
index 4537048..1f8ce44 100644
--- a/src/app/product-detail/page.tsx
+++ b/src/app/product-detail/page.tsx
@@ -6,14 +6,20 @@ import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextS
 
 export default function ProductDetailPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        brandName="Webild"
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Shop", id: "/shop" },
-        ]}
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Webild"
+          navItems={[
+            { name: "Mobile Phones", id: "/mobile-phones" },
+            { name: "Laptops", id: "/laptops" },
+            { name: "Computer Parts", id: "/computer-parts" },
+            { name: "Accessories", id: "/accessories" },
+            { name: "Checkout", id: "/checkout" },
+            { name: "Shop", id: "/shop" },
+          ]}
+        />
+      </div>
       <div className="pt-32 pb-20 container mx-auto px-6">
         <div className="grid md:grid-cols-2 gap-12 items-center">
           <img 
@@ -34,4 +40,4 @@ export default function ProductDetailPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 13530dc..94df191 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -6,17 +6,25 @@ import ProductCardThree from "@/components/sections/product/ProductCardThree";
 
 export default function ShopPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        brandName="Webild"
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Shop", id: "/shop" },
-        ]}
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Webild"
+          navItems={[
+            { name: "Mobile Phones", id: "/mobile-phones" },
+            { name: "Laptops", id: "/laptops" },
+            { name: "Computer Parts", id: "/computer-parts" },
+            { name: "Accessories", id: "/accessories" },
+            { name: "Checkout", id: "/checkout" },
+            { name: "Shop", id: "/shop" },
+          ]}
+        />
+      </div>
       <div className="pt-32 pb-20">
         <ProductCardThree
           title="Our Products"
+          description="High-quality digital assets for your creative projects."
+          useInvertedBackground={false}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
@@ -29,4 +37,4 @@ export default function ShopPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file