Update src/app/page.tsx

src/app/page.tsx

@@ -9,9 +9,37 @@ import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwen
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { ChefHat, Utensils, UtensilsCrossed, BookOpen, Video, Award, Heart, Sparkles, Book, Flame, Leaf, Cherry, CircleDollarSign, ArrowLeftRight, Send, Pencil, Star } from 'lucide-react';
+import { ChefHat, Utensils, UtensilsCrossed, BookOpen, Video, Award, Heart, Sparkles, Book, Flame, Leaf, Cherry, CircleDollarSign, ArrowLeftRight, Send, Pencil, Star, Filter } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [selectedCuisine, setSelectedCuisine] = useState<string | null>(null);
+
+  const dishes = [
+    {
+      id: "1",      brand: "Chef Studio",      name: "Pan-Seared Scallops with Risotto",      price: "Available",      rating: 5,
+      reviewCount: "48",      imageSrc: "http://img.b2bpic.net/free-photo/fried-shrimp-with-corn-with-mustard-tomato-sauce_140725-2116.jpg?_wi=1",      imageAlt: "Pan-seared scallops elegant plating",      cuisine: "Italian"
+    },
+    {
+      id: "2",      brand: "Chef Studio",      name: "Herb-Crusted Lamb with Seasonal Vegetables",      price: "Available",      rating: 5,
+      reviewCount: "52",      imageSrc: "http://img.b2bpic.net/free-photo/table-with-appetizing-fresh-food-barbeque-meat-plate-fresh-grilled-vegetable-fruit-beverage_132075-13628.jpg?_wi=1",      imageAlt: "Herb-crusted lamb fine dining presentation",      cuisine: "French"
+    },
+    {
+      id: "3",      brand: "Chef Studio",      name: "Chocolate Soufflé with Berry Coulis",      price: "Available",      rating: 5,
+      reviewCount: "64",      imageSrc: "http://img.b2bpic.net/free-photo/side-close-up-view-cake-appetizing-cake-with-powdered-sugar-berries-chocolate-waffles_140725-71848.jpg",      imageAlt: "Chocolate soufflé artistic dessert",      cuisine: "French"
+    },
+    {
+      id: "4",      brand: "Chef Studio",      name: "Sushi Selection with Wasabi & Ginger",      price: "Available",      rating: 5,
+      reviewCount: "41",      imageSrc: "http://img.b2bpic.net/free-photo/fried-shrimp-with-corn-with-mustard-tomato-sauce_140725-2116.jpg?_wi=3",      imageAlt: "Artfully arranged sushi platter",      cuisine: "Japanese"
+    }
+  ];
+
+  const filteredDishes = selectedCuisine
+    ? dishes.filter(dish => dish.cuisine === selectedCuisine)
+    : dishes;
+
+  const cuisineTypes = Array.from(new Set(dishes.map(d => d.cuisine)));
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-shift"
@@ -98,30 +126,47 @@ export default function LandingPage() {
       </div>
 
       <div id="dishes" data-section="dishes">
-        <ProductCardTwo
-          title="Signature Dishes"
-          description="Each dish represents years of refinement and dedication to culinary clarity. Explore the presentations that define my culinary philosophy."
-          tag="Featured Collection"
-          tagIcon={Sparkles}
-          products={[
-            {
-              id: "1",              brand: "Chef Studio",              name: "Pan-Seared Scallops with Risotto",              price: "Available",              rating: 5,
-              reviewCount: "48",              imageSrc: "http://img.b2bpic.net/free-photo/fried-shrimp-with-corn-with-mustard-tomato-sauce_140725-2116.jpg?_wi=1",              imageAlt: "Pan-seared scallops elegant plating"
-            },
-            {
-              id: "2",              brand: "Chef Studio",              name: "Herb-Crusted Lamb with Seasonal Vegetables",              price: "Available",              rating: 5,
-              reviewCount: "52",              imageSrc: "http://img.b2bpic.net/free-photo/table-with-appetizing-fresh-food-barbeque-meat-plate-fresh-grilled-vegetable-fruit-beverage_132075-13628.jpg?_wi=1",              imageAlt: "Herb-crusted lamb fine dining presentation"
-            },
-            {
-              id: "3",              brand: "Chef Studio",              name: "Chocolate Soufflé with Berry Coulis",              price: "Available",              rating: 5,
-              reviewCount: "64",              imageSrc: "http://img.b2bpic.net/free-photo/side-close-up-view-cake-appetizing-cake-with-powdered-sugar-berries-chocolate-waffles_140725-71848.jpg",              imageAlt: "Chocolate soufflé artistic dessert"
-            }
-          ]}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
+        <div className="w-full space-y-8">
+          <div className="flex flex-col items-center gap-4 mb-8">
+            <h2 className="text-3xl font-bold text-center">Filter by Cuisine Type</h2>
+            <div className="flex flex-wrap justify-center gap-3">
+              <button
+                onClick={() => setSelectedCuisine(null)}
+                className={`px-6 py-2 rounded-lg font-medium transition-all ${
+                  selectedCuisine === null
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
+                }`}
+              >
+                All Cuisines
+              </button>
+              {cuisineTypes.map((cuisine) => (
+                <button
+                  key={cuisine}
+                  onClick={() => setSelectedCuisine(cuisine)}
+                  className={`px-6 py-2 rounded-lg font-medium transition-all ${
+                    selectedCuisine === cuisine
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
+                  }`}
+                >
+                  {cuisine}
+                </button>
+              ))}
+            </div>
+          </div>
+          <ProductCardTwo
+            title="Signature Dishes"
+            description="Each dish represents years of refinement and dedication to culinary clarity. Explore the presentations that define my culinary philosophy."
+            tag="Featured Collection"
+            tagIcon={Sparkles}
+            products={filteredDishes}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
       </div>
 
       <div id="recipes" data-section="recipes">
@@ -132,12 +177,16 @@ export default function LandingPage() {
           tagIcon={Book}
           features={[
             {
-              id: "1",              title: "Classic French Bouillabaisse",              author: "Chef Michel",              description: "Discover the traditional method of crafting this Provençal seafood stew with clarity and precision. Learn how to balance flavors and create the perfect broth that captures the essence of the Mediterranean.",              tags: ["Seafood", "French", "Traditional"],
+              id: "1",              title: "Classic French Bouillabaisse",              author: "Chef Michel",              description: "Discover the traditional method of crafting this Provençal seafood stew with clarity and precision. Learn how to balance flavors and create the perfect broth that captures the essence of the Mediterranean. Includes ingredient list with precise measurements, step-by-step instructions, cooking techniques, and expert tips for achieving authentic results.",              tags: ["Seafood", "French", "Traditional", "Ingredients: Fresh fish, saffron, fennel", "Instructions: Build broth base, add seafood sequentially, finish with aioli and croutons"],
               imageSrc: "http://img.b2bpic.net/free-photo/fried-shrimp-with-corn-with-mustard-tomato-sauce_140725-2116.jpg?_wi=2"
             },
             {
-              id: "2",              title: "Modern Molecular Gastronomy",              author: "Chef Michel",              description: "Explore cutting-edge culinary techniques that transform ingredients into unexpected textures and presentations. Understand the science behind spheres, foams, and innovative plating methods.",              tags: ["Innovation", "Modern", "Advanced"],
+              id: "2",              title: "Modern Molecular Gastronomy",              author: "Chef Michel",              description: "Explore cutting-edge culinary techniques that transform ingredients into unexpected textures and presentations. Understand the science behind spheres, foams, and innovative plating methods. Master advanced preparation techniques, understand chemical reactions, learn precision temperature control, and discover how to create visually stunning plates.",              tags: ["Innovation", "Modern", "Advanced", "Ingredients: Sodium alginate, calcium chloride, liquid nitrogen", "Instructions: Create spheres using spherification, prepare foams with siphon, plate with precision and artistry"],
               imageSrc: "http://img.b2bpic.net/free-photo/table-with-appetizing-fresh-food-barbeque-meat-plate-fresh-grilled-vegetable-fruit-beverage_132075-13628.jpg?_wi=2"
+            },
+            {
+              id: "3",              title: "Seasonal Vegetable Medley",              author: "Chef Michel",              description: "Learn to celebrate fresh, seasonal vegetables with sophisticated cooking methods. This recipe emphasizes the natural flavors of produce while incorporating refined techniques. Discover proper seasoning methods, cooking times for each vegetable, and elegant plating strategies.",              tags: ["Vegetarian", "Seasonal", "Fresh", "Ingredients: Heirloom vegetables, herb butter, finishing salts", "Instructions: Select seasonal vegetables, cook individually, compose on plate with herb butter and microgreens"],
+              imageSrc: "http://img.b2bpic.net/free-photo/elegant-girl-kitchen-with-fruits_1157-20704.jpg?_wi=1"
             }
           ]}
           animationType="slide-up"
@@ -155,7 +204,7 @@ export default function LandingPage() {
           features={[
             {
               id: "1",              title: "Knife Skills & Knife Control",              author: "Chef Michel",              description: "Learn the fundamental knife techniques that every chef must master. Understand proper grip, angles, and cutting methods to improve speed, safety, and consistency in food preparation.",              tags: ["Fundamentals", "Technique", "Safety"],
-              imageSrc: "http://img.b2bpic.net/free-photo/elegant-girl-kitchen-with-fruits_1157-20704.jpg"
+              imageSrc: "http://img.b2bpic.net/free-photo/elegant-girl-kitchen-with-fruits_1157-20704.jpg?_wi=2"
             },
             {
               id: "2",              title: "Sauce Preparation & Plating",              author: "Chef Michel",              description: "Master the art of sauce creation and artistic plating. Learn how color, texture, and composition elevate a dish from good to extraordinary.",              tags: ["Plating", "Sauces", "Presentation"],
@@ -247,4 +296,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}