diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index e0d5dc8..c72307f 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -14,19 +14,10 @@ export default function Layout() {
     "name": "Haqqımızda",    "href": "#about"
   },
   {
-    "name": "Rəylər və Əlaqə",    "href": "/contact"
+    "name": "Menyu",    "href": "#menu"
   },
   {
-    "name": "Hero",    "href": "#hero"
-  },
-  {
-    "name": "Stats",    "href": "#stats"
-  },
-  {
-    "name": "Faq",    "href": "#faq"
-  },
-  {
-    "name": "Legal",    "href": "#legal"
+    "name": "Əlaqə",    "href": "#contact"
   }
 ];
 
diff --git a/src/index.css b/src/index.css
index 0320826..859fcb0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
-  --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #fdfbf7;
+  --primary-cta: #d4af37;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #2a2a2a;
+  --secondary-cta-text: #d4af37;
+  --accent: #d4af37;
+  --background-accent: #1a1a1a;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 98e6f29..4a0d815 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,95 +1,25 @@
-import AboutText from '@/components/sections/about/AboutText';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
-import { ThemeProvider } from "@/components/providers/themeProvider/ThemeProvider";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import NavSection from './HomePage/sections/Nav';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import StatsSection from './HomePage/sections/Stats';
+import FaqSection from './HomePage/sections/Faq';
+import MenuSection from './HomePage/sections/Menu';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <ThemeProvider
-      defaultButtonVariant="gradient"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="circleGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
-      headingFontWeight="normal"
-    >
-      <div id="nav" data-section="nav">
-      </div>
-      
-      <div id="hero" data-section="hero">
-        <SectionErrorBoundary name="hero">
-          <HeroOverlay
-            tag="Pluton Şadlıq Sarayı"
-            title="Xəyallarınızdakı Toy Mərasimi Burada Başlayır"
-            description="Pluton Şadlıq Sarayı – Zəriflik, Dəbdəbə və Unudulmaz Xatirələr"
-            primaryButton={{ text: "Rezervasiya", href: "/contact" }}
-            secondaryButton={{ text: "Haqqımızda", href: "/about" }}
-            imageSrc="http://img.b2bpic.net/free-photo/candles-bouquets-decorated-table_8353-10193.jpg"
-          />
-        </SectionErrorBoundary>
-      </div>
-
-      <div id="about" data-section="about">
-        <SectionErrorBoundary name="about">
-          <AboutText
-            title="Bakının ən gözəl məkanlarından biri olan Pluton Şadlıq Sarayı, 15 ildən artıq təcrübəsi ilə xüsusi günlərinizi unudulmaz edir."
-          />
-        </SectionErrorBoundary>
-      </div>
-
-      <div id="stats" data-section="stats">
-        <SectionErrorBoundary name="stats">
-          <MetricsIconCards
-            tag="Statistika"
-            title="Uğurlarımız"
-            description="Pluton Şadlıq Sarayı rəqəmlərlə"
-            metrics={[
-              { icon: "Users", title: "Müştəri Rəyi", value: "52+" },
-              { icon: "Star", title: "Reytinq", value: "4.2" },
-              { icon: "Heart", title: "Uğurlu Tədbir", value: "500+" },
-              { icon: "Award", title: "İl Təcrübə", value: "15+" },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
-
-      <div id="faq" data-section="faq">
-        <SectionErrorBoundary name="faq">
-          <FaqSimple
-            tag="Suallar"
-            title="Tez-tez verilən suallar"
-            description="Toy tədbirləri ilə bağlı maraqlı olan məqamlar."
-            items={[
-              { question: "Toy üçün minimum neçə nəfərlik yeriniz var?", answer: "Pluton Şadlıq Sarayında 100 nəfərdən 500 nəfərə qədər tədbirlər keçirə bilərsiniz." },
-              { question: "Menyulara nələr daxildir?", answer: "Menyularımız zənginliyi və keyfiyyəti ilə seçilir; milli və Avropa mətbəxinin ən gözəl nümunələrini təqdim edirik." },
-              { question: "Musiqi və işıqlandırma xidməti mövcuddur?", answer: "Bəli, tam peşəkar səs və işıqlandırma avadanlıqlarımız toyunuzun möhtəşəm keçməsinə zəmanət verir." },
-              { question: "Rezervasiyanı necə edə bilərəm?", answer: "Bizimlə birbaşa telefon və ya mesaj vasitəsilə əlaqə saxlayaraq tarixi bron edə bilərsiniz." },
-              { question: "Parkinq mövcuddur?", answer: "Bəli, qonaqlarınız üçün geniş və təhlükəsiz parkinq sahəmiz mövcuddur." },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
-
-      <div id="footer" data-section="footer">
-        <SectionErrorBoundary name="footer">
-          <FooterSimple
-            brand="Pluton Şadlıq Sarayı"
-            columns={[
-              { title: "Ünvan", items: [{ label: "Bakı, Əhmədli", href: "#" }] },
-              { title: "Xidmətlər", items: [{ label: "Toy", href: "/about" }, { label: "Nişan", href: "/about" }] }
-            ]}
-            copyright="© 2024 Pluton Şadlıq Sarayı. Bütün hüquqlar qorunur."
-            links={[{ label: "Gizlilik Siyasəti", href: "#" }]}
-          />
-        </SectionErrorBoundary>
-      </div>
-    </ThemeProvider>
+    <>
+      <NavSection />
+      <HeroSection />
+      <AboutSection />
+      <MenuSection />
+      <StatsSection />
+      <FaqSection />
+    </>
   );
 }
\ No newline at end of file
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..e7029ab
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,18 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutText from '@/components/sections/about/AboutText';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+            <SectionErrorBoundary name="about">
+              <AboutText
+                title="Bakının ən gözəl məkanlarından biri olan Pluton Şadlıq Sarayı, 15 ildən artıq təcrübəsi ilə xüsusi günlərinizi unudulmaz edir."
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..f47229d
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqSimple from '@/components/sections/faq/FaqSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+            <SectionErrorBoundary name="faq">
+              <FaqSimple
+                tag="Suallar"
+                title="Tez-tez verilən suallar"
+                description="Toy tədbirləri ilə bağlı maraqlı olan məqamlar."
+                items={[
+                  { question: "Toy üçün minimum neçə nəfərlik yeriniz var?", answer: "Pluton Şadlıq Sarayında 100 nəfərdən 500 nəfərə qədər tədbirlər keçirə bilərsiniz." },
+                  { question: "Menyulara nələr daxildir?", answer: "Menyularımız zənginliyi və keyfiyyəti ilə seçilir; milli və Avropa mətbəxinin ən gözəl nümunələrini təqdim edirik." },
+                  { question: "Musiqi və işıqlandırma xidməti mövcuddur?", answer: "Bəli, tam peşəkar səs və işıqlandırma avadanlıqlarımız toyunuzun möhtəşəm keçməsinə zəmanət verir." },
+                  { question: "Rezervasiyanı necə edə bilərəm?", answer: "Bizimlə birbaşa telefon və ya mesaj vasitəsilə əlaqə saxlayaraq tarixi bron edə bilərsiniz." },
+                  { question: "Parkinq mövcuddur?", answer: "Bəli, qonaqlarınız üçün geniş və təhlükəsiz parkinq sahəmiz mövcuddur." },
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Footer.tsx b/src/pages/HomePage/sections/Footer.tsx
new file mode 100644
index 0000000..bd7151a
--- /dev/null
+++ b/src/pages/HomePage/sections/Footer.tsx
@@ -0,0 +1,24 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "footer" section.
+
+import React from 'react';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FooterSection(): React.JSX.Element {
+  return (
+    <div id="footer" data-section="footer">
+            <SectionErrorBoundary name="footer">
+              <FooterSimple
+                brand="Pluton Şadlıq Sarayı"
+                columns={[
+                  { title: "Ünvan", items: [{ label: "Bakı, Əhmədli", href: "#" }] },
+                  { title: "Xidmətlər", items: [{ label: "Toy", href: "/about" }, { label: "Nişan", href: "/about" }] }
+                ]}
+                copyright="© 2024 Pluton Şadlıq Sarayı. Bütün hüquqlar qorunur."
+                links={[{ label: "Gizlilik Siyasəti", href: "#" }]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..3d2dfe4
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+            <SectionErrorBoundary name="hero">
+              <HeroOverlay
+                tag="Pluton Şadlıq Sarayı"
+                title="Xəyallarınızdakı Toy Mərasimi Burada Başlayır"
+                description="Pluton Şadlıq Sarayı – Zəriflik, Dəbdəbə və Unudulmaz Xatirələr"
+                primaryButton={{ text: "Rezervasiya", href: "/contact" }}
+                secondaryButton={{ text: "Haqqımızda", href: "/about" }}
+                imageSrc="http://img.b2bpic.net/free-photo/candles-bouquets-decorated-table_8353-10193.jpg"
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}
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
diff --git a/src/pages/HomePage/sections/Nav.tsx b/src/pages/HomePage/sections/Nav.tsx
new file mode 100644
index 0000000..ddb4e79
--- /dev/null
+++ b/src/pages/HomePage/sections/Nav.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "nav" section.
+
+import React from 'react';
+
+export default function NavSection(): React.JSX.Element {
+  return (
+    <div id="nav" data-section="nav">
+          </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Stats.tsx b/src/pages/HomePage/sections/Stats.tsx
new file mode 100644
index 0000000..221fc7d
--- /dev/null
+++ b/src/pages/HomePage/sections/Stats.tsx
@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "stats" section.
+
+import React from 'react';
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function StatsSection(): React.JSX.Element {
+  return (
+    <div id="stats" data-section="stats">
+            <SectionErrorBoundary name="stats">
+              <MetricsIconCards
+                tag="Statistika"
+                title="Uğurlarımız"
+                description="Pluton Şadlıq Sarayı rəqəmlərlə"
+                metrics={[
+                  { icon: "Users", title: "Müştəri Rəyi", value: "52+" },
+                  { icon: "Star", title: "Reytinq", value: "4.2" },
+                  { icon: "Heart", title: "Uğurlu Tədbir", value: "500+" },
+                  { icon: "Award", title: "İl Təcrübə", value: "15+" },
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}