Update components/menu.tsx

components/menu.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import React from "react";
+import { Heading } from "./heading";
+import { Subheading } from "./subheading";
+import { Card } from "./ui/card";
+
+export const Menu = () => {
+  const menuItems = [
+    {
+      name: "Kebab Classique",
+      description: "Viande marinée, salade, tomates, oignons, sauce maison",
+      price: "12.50 CHF",
+    },
+    {
+      name: "Kebab Poulet",
+      description: "Poulet grillé, salade, tomates, oignons, sauce yaourt",
+      price: "11.90 CHF",
+    },
+    {
+      name: "Kebab Végétarien",
+      description: "Falafels, salade, tomates, oignons, sauce tahini",
+      price: "10.50 CHF",
+    },
+    {
+      name: "Durum",
+      description: "Viande ou poulet, salade, tomates, oignons, sauce, enroulé dans une galette",
+      price: "11.00 CHF",
+    },
+    {
+      name: "Frites",
+      description: "Portion de frites maison",
+      price: "4.50 CHF",
+    },
+    {
+      name: "Boisson",
+      description: "Boisson gazeuse ou eau",
+      price: "3.00 CHF",
+    },
+  ];
+
+  return (
+    <div className="relative z-20 py-10 lg:py-20 overflow-hidden">
+      <Heading as="h2">Notre Menu</Heading>
+      <Subheading className="text-center">
+        Découvrez nos délicieux kebabs et accompagnements
+      </Subheading>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12 max-w-6xl mx-auto">
+        {menuItems.map((item, index) => (
+          <Card key={index} className="p-6 hover:shadow-lg transition-shadow duration-300">
+            <div className="flex justify-between items-start mb-4">
+              <h3 className="text-xl font-semibold">{item.name}</h3>
+              <span className="text-lg font-medium">{item.price}</span>
+            </div>
+            <p className="text-muted-foreground dark:text-muted-dark">{item.description}</p>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};