From ba5155779350b078523d62888b11649c23b8cdc2 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 14 Jun 2026 12:14:58 +0000
Subject: [PATCH] Bob AI: Add custom Menu section with pricing cards

---
 src/pages/HomePage.tsx               |  4 +-
 src/pages/HomePage/sections/Menu.tsx | 68 ++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/HomePage/sections/Menu.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 6f4e8c6..aaefb0f 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -12,7 +12,8 @@ import StatsSection from './HomePage/sections/Stats';
 import FaqSection from './HomePage/sections/Faq';
 import FooterSection from './HomePage/sections/Footer';
 
-export default function HomePage(): React.JSX.Element {
+
+import MenuSection from './HomePage/sections/Menu';export default function HomePage(): React.JSX.Element {
   return (
 <ThemeProvider
       defaultButtonVariant="gradient"
@@ -31,6 +32,7 @@ export default function HomePage(): React.JSX.Element {
       <HeroSection />
 
       <AboutSection />
+      <MenuSection />
 
       <StatsSection />
 
diff --git a/src/pages/HomePage/sections/Menu.tsx b/src/pages/HomePage/sections/Menu.tsx
new file mode 100644
index 0000000..04b4fd3
--- /dev/null
+++ b/src/pages/HomePage/sections/Menu.tsx
@@ -0,0 +1,68 @@
+import { motion } from "motion/react";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Tag from "@/components/ui/Tag";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+export default function MenuSection() {
+  const menus = [
+    {
+      name: "Klassik Menyu",
+      price: "50 AZN / nəfər",
+      imageSrc: "http://img.b2bpic.net/free-photo/delicious-food-table_23-2148028522.jpg",
+    },
+    {
+      name: "Premium Menyu",
+      price: "80 AZN / nəfər",
+      imageSrc: "http://img.b2bpic.net/free-photo/gourmet-restaurant-steak-with-vegetables_23-2148285574.jpg",
+    },
+    {
+      name: "VIP Menyu",
+      price: "120 AZN / nəfər",
+      imageSrc: "http://img.b2bpic.net/free-photo/luxury-dinner-table-setting_23-2148028525.jpg",
+    },
+  ];
+
+  return (
+    <section id="menu" data-webild-section="menu" className="relative w-full py-24 bg-background">
+      <div className="w-content-width mx-auto px-6">
+        <div className="text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Menyu" className="mb-4 mx-auto" />
+          </ScrollReveal>
+          <TextAnimation
+            text="Zəngin və Ləziz Menyu Seçimləri"
+            variant="slide-up"
+            gradientText={false}
+            tag="h2"
+            className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+          />
+          <ScrollReveal variant="fade" delay={0.2}>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              Qonaqlarınız üçün xüsusi olaraq hazırlanmış zəngin və dadlı menyularımızla tanış olun. Hər bir detal sizin istəyinizə uyğunlaşdırılır.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {menus.map((menu, index) => (
+            <ScrollReveal variant="fade" key={index} delay={0.1 * (index + 1)}>
+              <div className="card overflow-hidden rounded-theme h-full flex flex-col bg-card border border-border">
+                <div className="relative h-64 w-full">
+                  <ImageOrVideo
+                    imageSrc={menu.imageSrc}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className="p-6 flex flex-col flex-grow">
+                  <h3 className="text-2xl font-semibold text-foreground mb-2">{menu.name}</h3>
+                  <p className="text-xl text-primary-cta font-medium mt-auto">{menu.price}</p>
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file