src/app/menu/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function MenuPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="medium"
+        background="noiseDiagonalGradient"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Menu", id: "/menu" },
+              { name: "Reviews", id: "/#testimonials" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="Kota Joe Alberton"
+          />
+        </div>
+
+        <div id="menu" data-section="menu" className="py-24">
+            <ProductCatalog
+                layout="page"
+                products={[
+                    { id: "p1", name: "Rib Kota", price: "R120", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k5dzr8&_wi=2" },
+                    { id: "p2", name: "Top Deck Milkshake", price: "R45", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pxbg83&_wi=2" },
+                    { id: "p3", name: "Chicken Wings", price: "R85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=12rmmp&_wi=2" },
+                    { id: "p4", name: "Classic Waffles", price: "R55", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c6hjra" },
+                    { id: "p5", name: "Irish Coffee", price: "R65", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jqv02d" },
+                    { id: "p6", name: "French Fries", price: "R35", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xzfyxc" },
+                ]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseReveal
+            logoText="Kota Joe Roadhouse"
+            columns={[
+              { title: "Links", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "Directions", href: "/#contact" }] },
+              { title: "Follow", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] },
+            ]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,7 +32,7 @@ export default function LandingPage() {
       navItems={[
         { name: "Home", id: "hero" },
         { name: "About", id: "about" },
-        { name: "Menu", id: "products" },
+        { name: "Menu", id: "/menu" },
         { name: "Reviews", id: "testimonials" },
         { name: "Contact", id: "contact" },
       ]}
@@ -45,7 +45,7 @@ export default function LandingPage() {
       title="Alberton's Favourite Roadhouse Vibe"
       description="Juicy Kotas, crispy wings, and sweet chill vibes. Swing by Jacqueline Mall for the ultimate taste experience."
       buttons={[
-        { text: "View Menu", href: "#products" },
+        { text: "View Menu", href: "/menu" },
         { text: "Directions", href: "#contact" },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2l5t91"
@@ -146,7 +146,7 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="Kota Joe Roadhouse"
       columns={[
-        { title: "Links", items: [{ label: "Menu", href: "#products" }, { label: "Directions", href: "#contact" }, { label: "Reviews", href: "#testimonials" }] },
+        { title: "Links", items: [{ label: "Menu", href: "/menu" }, { label: "Directions", href: "#contact" }, { label: "Reviews", href: "#testimonials" }] },
         { title: "Follow", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] },
       ]}
     />
@@ -154,4 +154,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}