Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -11,8 +11,42 @@ import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Clock, MapPin, UtensilsCrossed, Users } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [openMenuTab, setOpenMenuTab] = useState<string | null>(null);
+
+  const menuTabs = [
+    {
+      id: "sweet",      label: "Sweet Waffles",      products: [
+        {
+          id: "1",          name: "Nutella Waffle",          price: "55 MAD",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-waffles-covered-honey-with-hazelnuts-honey-dipper_23-2148422831.jpg",          imageAlt: "Nutella Waffle"
+        },
+        {
+          id: "2",          name: "Kinder Bueno Waffle",          price: "65 MAD",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-fruit-dessert-pancakes-with-chocolate-sliced-red-strawberries-bananas-inside-white-plate-grey_140725-13139.jpg",          imageAlt: "Kinder Bueno Waffle"
+        },
+        {
+          id: "3",          name: "Strawberry Waffle",          price: "60 MAD",          imageSrc: "http://img.b2bpic.net/free-photo/delicious-breakfast-with-waffles-fruits_176474-28205.jpg",          imageAlt: "Strawberry Waffle"
+        },
+        {
+          id: "4",          name: "Oreo Waffle",          price: "60 MAD",          imageSrc: "http://img.b2bpic.net/free-photo/belgium-sweet-coffee-food-fresh_1203-4731.jpg",          imageAlt: "Oreo Waffle"
+        }
+      ]
+    },
+    {
+      id: "savory",      label: "Savory Waffles",      products: [
+        {
+          id: "5",          name: "Chicken Cheese Waffle",          price: "70 MAD",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-yummy-little-biscuits-dark-blue-surface_179666-44259.jpg",          imageAlt: "Chicken Cheese Waffle"
+        },
+        {
+          id: "6",          name: "Turkey & Cheese Waffle",          price: "65 MAD",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-yummy-waffle-cakes-with-chocolate-bars-brown-background_140725-133434.jpg",          imageAlt: "Turkey & Cheese Waffle"
+        }
+      ]
+    }
+  ];
+
+  const allProducts = menuTabs.reduce((acc, tab) => [...acc, ...tab.products], []);
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -63,35 +97,43 @@ export default function LandingPage() {
       </div>
 
       <div id="products" data-section="products">
-        <ProductCardOne
+        <div className="w-full">
-          title="Our Menu"
+          <div className="flex flex-wrap gap-2 mb-8 px-6 md:px-0">
-          description="Choose from our selection of sweet and savory waffles, perfectly crafted for every taste."
+            {menuTabs.map((tab) => (
-          tag="Menu"
+              <button
-          products={[
+                key={tab.id}
-            {
+                onClick={() => setOpenMenuTab(openMenuTab === tab.id ? null : tab.id)}
-              id: "1",              name: "Nutella Waffle",              price: "55 MAD",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-waffles-covered-honey-with-hazelnuts-honey-dipper_23-2148422831.jpg",              imageAlt: "Nutella Waffle"
+                className={`px-4 py-2 rounded-lg font-medium transition-all ${
-            },
+                  openMenuTab === tab.id
-            {
+                    ? 'bg-primary-cta text-primary-cta-text'
-              id: "2",              name: "Kinder Bueno Waffle",              price: "65 MAD",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-fruit-dessert-pancakes-with-chocolate-sliced-red-strawberries-bananas-inside-white-plate-grey_140725-13139.jpg",              imageAlt: "Kinder Bueno Waffle"
+                    : 'bg-card text-foreground border border-accent hover:border-primary-cta'
-            },
+                }`}
-            {
+              >
-              id: "3",              name: "Strawberry Waffle",              price: "60 MAD",              imageSrc: "http://img.b2bpic.net/free-photo/delicious-breakfast-with-waffles-fruits_176474-28205.jpg",              imageAlt: "Strawberry Waffle"
+                {tab.label}
-            },
+              </button>
-            {
+            ))}
-              id: "4",              name: "Oreo Waffle",              price: "60 MAD",              imageSrc: "http://img.b2bpic.net/free-photo/belgium-sweet-coffee-food-fresh_1203-4731.jpg",              imageAlt: "Oreo Waffle"
+          </div>
-            },
+
-            {
+          {menuTabs.map((tab) => (
-              id: "5",              name: "Chicken Cheese Waffle",              price: "70 MAD",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-yummy-little-biscuits-dark-blue-surface_179666-44259.jpg",              imageAlt: "Chicken Cheese Waffle"
+            <div
-            },
+              key={tab.id}
-            {
+              className={`transition-all duration-300 overflow-hidden ${
-              id: "6",              name: "Turkey & Cheese Waffle",              price: "65 MAD",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-yummy-waffle-cakes-with-chocolate-bars-brown-background_140725-133434.jpg",              imageAlt: "Turkey & Cheese Waffle"
+                openMenuTab === tab.id ? 'block' : 'hidden'
-            }
+              }`}
-          ]}
+            >
-          gridVariant="three-columns-all-equal-width"
+              <ProductCardOne
-          animationType="slide-up"
+                title="Our Menu"
-          textboxLayout="default"
+                description="Choose from our selection of sweet and savory waffles, perfectly crafted for every taste."
-          useInvertedBackground={false}
+                tag={tab.label}
-        />
+                products={tab.products}
+                gridVariant="three-columns-all-equal-width"
+                animationType="slide-up"
+                textboxLayout="default"
+                useInvertedBackground={false}
+              />
+            </div>
+          ))}
+        </div>
       </div>
 
       <div id="about" data-section="about">