Add src/app/products/page.tsx

src/app/products/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function ProductsPage() {
+  const categories = [
+    { name: "Merch", items: [{ name: "Logo Mug", price: "$12.00" }, { name: "T-Shirt", price: "$25.00" }] },
+    { name: "Beverages", items: [{ name: "Coffee", price: "$3.50" }, { name: "Tea", price: "$3.00" }, { name: "Orange Juice", price: "$4.00" }] },
+    { name: "Pastries & Baked Goods", items: [{ name: "Muffin", price: "$3.75" }, { name: "Scone", price: "$3.75" }, { name: "Cookie", price: "$2.50" }] },
+    { name: "Breakfast Sides", items: [{ name: "Bacon", price: "$4.50" }, { name: "Sausage", price: "$4.50" }, { name: "Home Fries", price: "$4.00" }] },
+    { name: "French Toast & Pancakes", items: [{ name: "French Toast", price: "$11.00" }, { name: "Buttermilk Pancakes", price: "$10.00" }] },
+    { name: "Breakfast Plates", items: [{ name: "Western Omelette", price: "$13.00" }, { name: "Classic Breakfast", price: "$12.00" }] },
+    { name: "Breakfast Sandwiches", items: [{ name: "Bacon Egg & Cheese", price: "$8.50" }, { name: "Sausage Egg & Cheese", price: "$8.50" }] },
+    { name: "Bagels & Cream Cheese", items: [{ name: "Plain Bagel", price: "$2.00" }, { name: "Everything Bagel", price: "$2.25" }, { name: "Cream Cheese", price: "$1.50" }] },
+    { name: "Uncategorized", items: [{ name: "Gift Card", price: "$25.00" }] }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+          navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/#menu" }, { name: "Products", id: "/products" }, { name: "Contact", id: "/#contact" }]}
+          brandName="Mr. Bagel"
+        />
+        <main className="pt-32 pb-20 px-6 max-w-2xl mx-auto">
+          <h1 className="text-4xl font-bold mb-10">Menu Items</h1>
+          {categories.map((cat) => (
+            <div key={cat.name} className="mb-8">
+              <h2 className="text-2xl font-semibold mb-4 border-b pb-2">{cat.name}</h2>
+              <ul className="space-y-2">
+                {cat.items.map((item) => (
+                  <li key={item.name} className="flex justify-between py-1">
+                    <span>{item.name}</span>
+                    <span className="font-medium">{item.price}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </main>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}