Update src/app/menu/page.tsx

Merge version_5 into main

src/app/about/page.tsx

@@ -25,7 +25,7 @@ export default function AboutPage() {
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingOverlay
             navItems={[
-              { name: "Menu", id: "/#menu" },
+              { name: "Menu", id: "/menu" },
               { name: "About", id: "/about" },
               { name: "Catering", id: "/#catering" },
               { name: "Events", id: "/#events" },
@@ -53,7 +53,7 @@ export default function AboutPage() {
         <div id="footer" data-section="footer">
           <FooterSimple
             columns={[
-              { title: "Bakery", items: [{ label: "Menu", href: "/#menu" }, { label: "Catering", href: "/#catering" }] },
+              { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Catering", href: "/#catering" }] },
               { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/#events" }] },
               { title: "Visit", items: [{ label: "Directions", href: "/#visit" }, { label: "Contact", onClick: () => { window.location.href = '/#contact'; } }] },
             ]}
@@ -64,4 +64,4 @@ export default function AboutPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/menu/page.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+
+export default function MenuPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="medium"
+        background="floatingGradient"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Menu", id: "/menu" },
+              { name: "About", id: "/about" },
+              { name: "Catering", id: "/#catering" },
+              { name: "Events", id: "/#events" },
+              { name: "Visit", id: "/#visit" },
+            ]}
+            brandName="Molisana Bakery"
+          />
+        </div>
+
+        <div className="pt-32 pb-20">
+            <div id="espresso-bar" data-section="products">
+                <ProductCardThree 
+                    title="Espresso Bar"
+                    description="Premium Italian roasted coffee rituals."
+                    products={[{id: "e1", name: "Espresso", price: "", imageSrc: "http://img.b2bpic.net/free-photo/glass-foamy-latte-decorated-with-daffodil_141793-433.jpg"}]}
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="hot-table" data-section="products">
+                <ProductCardThree 
+                    title="Hot Table Classics"
+                    description="Scratch-made daily rotating specials."
+                    products={[{id: "h1", name: "Lasagna", price: "", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-italian-pasta-with-meat-tomato-sauce-grey-surface-meal-pasta-dough-food-dinner_140725-85885.jpg"}]}
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="sandwiches" data-section="products">
+                <ProductCardThree 
+                    title="Sandwiches"
+                    description="Fresh bread, packed with cured meats."
+                    products={[{id: "s1", name: "Porchetta Sandwich", price: "", imageSrc: "http://img.b2bpic.net/free-photo/roll-hot-smoked-fish_2829-14225.jpg"}]}
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="pastries" data-section="products">
+                <ProductCardThree 
+                    title="Pastries"
+                    description="Sweet treats, artisan style."
+                    products={[{id: "p1", name: "Pistachio Cannoli", price: "", imageSrc: "http://img.b2bpic.net/free-photo/closeup-raw-vegan-roll-made-from-hazelnuts-purple-grunge-tabletop_181624-44513.jpg"}]}
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="catering" data-section="products">
+                <ProductCardThree 
+                    title="Catering Trays"
+                    description="Perfect for your next gathering."
+                    products={[{id: "c1", name: "Party Tray", price: "", imageSrc: "http://img.b2bpic.net/free-photo/mozzarella-sliders-summer-picnic-sandwiches_53876-103644.jpg"}]}
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Catering", href: "/#catering" }] },
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/#events" }] },
+              { title: "Visit", items: [{ label: "Directions", href: "/#visit" }, { label: "Contact", onClick: () => { window.location.href = '/#contact'; } }] },
+            ]}
+            bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
+            bottomRightText="Authentic Italian Daily Rituals"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -29,11 +29,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        { name: "Menu", id: "#menu" },
+        { name: "Menu", id: "/menu" },
         { name: "About", id: "/about" },
-        { name: "Catering", id: "#catering" },
-        { name: "Events", id: "#events" },
-        { name: "Visit", id: "#visit" },
+        { name: "Catering", id: "/#catering" },
+        { name: "Events", id: "/#events" },
+        { name: "Visit", id: "/#visit" },
       ]}
       brandName="Molisana Bakery"
     />
@@ -45,8 +45,8 @@ export default function LandingPage() {
       title="Wood-Fired Comfort, Italian Classics & Espresso Done Right."
       description="From early-morning cappuccinos to hot table favourites and fresh pastries — Molisana Bakery is your daily Italian ritual."
       buttons={[
-        { text: "View Menu", href: "#menu" },
-        { text: "Order Catering", href: "#catering" },
+        { text: "View Menu", href: "/menu" },
+        { text: "Order Catering", href: "/#catering" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/woman-white-sweater-pouring-milk-into-coffee-dessert_1157-26624.jpg"
       imageAlt="authentic italian bakery display"
@@ -134,9 +134,9 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        { title: "Bakery", items: [{ label: "Menu", href: "#menu" }, { label: "Catering", href: "#catering" }] },
-        { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "#events" }] },
-        { title: "Visit", items: [{ label: "Directions", href: "#visit" }, { label: "Contact", onClick: () => { const el = document.getElementById('contact'); el?.scrollIntoView({ behavior: 'smooth' }); } }] },
+        { title: "Bakery", items: [{ label: "Menu", href: "/menu" }, { label: "Catering", href: "/#catering" }] },
+        { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Events", href: "/#events" }] },
+        { title: "Visit", items: [{ label: "Directions", href: "/#visit" }, { label: "Contact", onClick: () => { const el = document.getElementById('contact'); el?.scrollIntoView({ behavior: 'smooth' }); } }] },
       ]}
       bottomLeftText="© 2024 Molisana Bakery. All rights reserved."
       bottomRightText="Authentic Italian Daily Rituals"
@@ -145,4 +145,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}