src/app/about/page.tsx

@@ -7,23 +7,26 @@ import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/Nav
 
 export default function AboutPage() {
   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>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Menu", id: "/menu" },
-            { name: "Reservations", id: "/reservations" },
-            { name: "Our Story", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Kioku Kitchen"
-        />
-        <div className="pt-32 pb-20">
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+              { name: "Reservations", id: "/reservations" },
+              { name: "Our Story", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Kioku Kitchen"
+          />
+        </div>
+        <div id="about" data-section="about" className="pt-32 pb-20">
           <MediaAbout
             title="Our Story"
             description="Founded in the heart of New Westminster, Kioku Kitchen is a testament to the beauty of Japanese culinary traditions. We believe in the power of ingredients to connect people, memories, and culture."
             imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-with-food_23-2149008721.jpg"
+            useInvertedBackground={false}
           />
         </div>
       </ReactLenis>

src/app/menu/page.tsx

@@ -2,32 +2,26 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
 
 export default function MenuPage() {
   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>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Menu", id: "/menu" },
-            { name: "Reservations", id: "/reservations" },
-            { name: "Our Story", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Kioku Kitchen"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+              { name: "Reservations", id: "/reservations" },
+              { name: "Our Story", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Kioku Kitchen"
+          />
+        </div>
         <div className="pt-32 pb-20 px-6 max-w-7xl mx-auto">
           <h1 className="text-5xl font-bold mb-12">Full Menu</h1>
-          <ProductCatalog 
-            layout="page"
-            products={[
-              { id: "1", name: "Truffle Mushroom Udon", price: "$22", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/top-view-chinese-hot-pot_23-2149529845.jpg" },
-              { id: "2", name: "Salmon Zuke", price: "$25", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/bowl-poke-with-salmon-cucumber-rice-sesame-seeds_9975-124446.jpg" }
-            ]}
-          />
         </div>
       </ReactLenis>
     </ThemeProvider>

src/app/reservations/page.tsx

@@ -7,19 +7,21 @@ import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/Nav
 
 export default function ReservationsPage() {
   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>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Menu", id: "/menu" },
-            { name: "Reservations", id: "/reservations" },
-            { name: "Our Story", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Kioku Kitchen"
-        />
-        <div className="pt-32 pb-20">
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+              { name: "Reservations", id: "/reservations" },
+              { name: "Our Story", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Kioku Kitchen"
+          />
+        </div>
+        <div id="contact" data-section="contact" className="pt-32 pb-20">
           <ContactSplitForm
             title="Book Your Table"
             description="Join us for an authentic Japanese dining experience."
@@ -29,6 +31,7 @@ export default function ReservationsPage() {
               { name: "date", type: "date", placeholder: "Date", required: true }
             ]}
             buttonText="Reserve Now"
+            useInvertedBackground={false}
           />
         </div>
       </ReactLenis>