Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -3,14 +3,60 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Flame, Star, Heart, MessageCircle, Mail } from 'lucide-react';
+import { Flame, Heart, MessageCircle, Mail, ChevronDown } from 'lucide-react';
+import { useState } from 'react';
+import Link from 'next/link';
 
 export default function LandingPage() {
+  const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
+
+  const menuCategories = [
+    {
+      id: 'tacos',
+      name: 'Tacos',
+      items: [
+        { id: 't1', name: 'Carnitas Tacos', price: '$6.99' },
+        { id: 't2', name: 'Al Pastor Tacos', price: '$6.99' },
+        { id: 't3', name: 'Fish Tacos', price: '$7.99' },
+        { id: 't4', name: 'Crispy Tacos', price: '$5.99' },
+      ]
+    },
+    {
+      id: 'burritos',
+      name: 'Burritos',
+      items: [
+        { id: 'b1', name: 'Chicken Burrito', price: '$8.99' },
+        { id: 'b2', name: 'Beef Burrito', price: '$9.99' },
+        { id: 'b3', name: 'Veggie Burrito', price: '$7.99' },
+        { id: 'b4', name: 'Super Burrito', price: '$10.99' },
+      ]
+    },
+    {
+      id: 'bowls',
+      name: 'Bowls',
+      items: [
+        { id: 'bo1', name: 'Chicken Bowl', price: '$8.99' },
+        { id: 'bo2', name: 'Beef Bowl', price: '$9.99' },
+        { id: 'bo3', name: 'Veggie Bowl', price: '$7.99' },
+        { id: 'bo4', name: 'Seafood Bowl', price: '$10.99' },
+      ]
+    },
+    {
+      id: 'sides',
+      name: 'Sides',
+      items: [
+        { id: 's1', name: 'Guacamole', price: '$2.99' },
+        { id: 's2', name: 'Chips & Salsa', price: '$3.99' },
+        { id: 's3', name: 'Elote', price: '$4.99' },
+        { id: 's4', name: 'Churros', price: '$3.99' },
+      ]
+    },
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -59,32 +105,46 @@ export default function LandingPage() {
       </div>
 
       <div id="menu" data-section="menu">
-        <ProductCardThree
+        <div className="px-4 py-16 md:py-24">
-          title="Our Menu"
+          <div className="mx-auto max-w-6xl">
-          description="Handcrafted meals made fresh to order. Indulge in our signature dishes that keep customers coming back."
+            <div className="mb-12 text-center">
-          tag="Bestsellers"
+              <p className="text-sm font-medium text-primary-cta mb-2">Bestsellers</p>
-          tagIcon={Star}
+              <h2 className="text-4xl md:text-5xl font-bold mb-4">Our Menu</h2>
-          tagAnimation="slide-up"
+              <p className="text-lg text-foreground/80">Handcrafted meals made fresh to order. Indulge in our signature dishes that keep customers coming back.</p>
-          textboxLayout="default"
+            </div>
-          useInvertedBackground={false}
+
-          products={[
+            <div className="space-y-4">
-            {
+              {menuCategories.map((category) => (
-              id: "1",              name: "Classic Cheeseburger",              price: "$8.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARSi2FifFdQBgGczVkYKsRxFoV/uploaded-1772554984955-x2nggqqj.jpg",              imageAlt: "Classic cheeseburger",              initialQuantity: 1
+                <div key={category.id} className="border border-accent rounded-lg overflow-hidden">
-            },
+                  <button
-            {
+                    onClick={() => setExpandedCategory(expandedCategory === category.id ? null : category.id)}
-              id: "2",              name: "Golden Fries",              price: "$3.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARSi2FifFdQBgGczVkYKsRxFoV/uploaded-1772554984956-lj70zz7m.jpg",              imageAlt: "Crispy golden fries",              initialQuantity: 1
+                    className="w-full px-6 py-4 flex items-center justify-between bg-card hover:bg-accent/10 transition-colors"
-            },
+                  >
-            {
+                    <span className="text-lg font-semibold text-foreground">{category.name}</span>
-              id: "3",              name: "Crispy Fried Chicken",              price: "$9.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARSi2FifFdQBgGczVkYKsRxFoV/uploaded-1772554984956-v0254196.jpg",              imageAlt: "Fried chicken plate",              initialQuantity: 1
+                    <ChevronDown
-            },
+                      className={`w-5 h-5 text-primary-cta transition-transform duration-300 ${
-            {
+                        expandedCategory === category.id ? 'rotate-180' : ''
-              id: "4",              name: "Delicious Pizza",              price: "$11.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARSi2FifFdQBgGczVkYKsRxFoV/uploaded-1772554984956-iaxty2ut.jpg",              imageAlt: "Delicious pizza",              initialQuantity: 1
+                      }`}
-            }
+                    />
-          ]}
+                  </button>
-          gridVariant="three-columns-all-equal-width"
+
-          animationType="slide-up"
+                  {expandedCategory === category.id && (
-          buttons={[{ text: "See All Items", href: "#" }]}
+                    <div className="bg-background/50 border-t border-accent px-6 py-4">
-        />
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        {category.items.map((item) => (
+                          <div key={item.id} className="flex justify-between items-center p-3 bg-card rounded border border-accent/20">
+                            <span className="text-foreground font-medium">{item.name}</span>
+                            <span className="text-primary-cta font-semibold">{item.price}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="features" data-section="features">