Update src/app/products/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 
 export default function LandingPage() {
@@ -54,13 +54,14 @@ export default function LandingPage() {
   </div>
 
   <div id="menu" data-section="menu">
-      <ProductCardOne
+      <ProductCardThree
       animationType="slide-up"
       textboxLayout="split"
       gridVariant="four-items-2x2-equal-grid"
-      title="Our Menu"
-      description="Handcrafted bagels, delicious breakfast plates, and freshly baked pastries."
+      title="Our Full Menu"
+      description="Discover our wide selection of handcrafted bagels, breakfast plates, and local favorites."
       useInvertedBackground={false}
+      products={[]}
     />
   </div>
 
@@ -90,7 +91,7 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         { title: "Shop Info", items: [{ label: "Gorham, ME", href: "#" }, { label: "Open Tue-Sun", href: "#" }] },
-        { title: "Menu", items: [{ label: "Bagels", href: "#" }, { label: "Breakfast Plates", href: "#" }] },
+        { title: "Menu", items: [{ label: "Bagels", href: "/products" }, { label: "Breakfast Plates", href: "/products" }] },
       ]}
       logoText="Mr. Bagel"
     />

src/app/products/page.tsx

@@ -3,20 +3,9 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
 
 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"
@@ -33,23 +22,18 @@ export default function ProductsPage() {
       <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 className="pt-32 pb-20 px-6 max-w-6xl mx-auto">
+          <ProductCardThree
+            title="Our Products"
+            description="Browse our complete collection of fresh bagels, merchandise, and catering options."
+            gridVariant="four-items-2x2-equal-grid"
+            animationType="slide-up"
+            textboxLayout="default"
+            products={[]}
+            useInvertedBackground={false}
+            className="py-0"
+          />
         </main>
       </ReactLenis>
     </ThemeProvider>