From b2b022950d9a7e0dc6772ae26f35f40f8cc692f9 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 15 Jun 2026 01:40:27 +0000
Subject: [PATCH] Bob AI: Add community logo to navbar

---
 src/components/Layout.tsx                 |   5 +-
 src/pages/HomePage.tsx                    | 190 +++-------------------
 src/pages/HomePage/sections/About.tsx     |  20 +++
 src/pages/HomePage/sections/Community.tsx |  32 ++++
 src/pages/HomePage/sections/Contact.tsx   |  23 +++
 src/pages/HomePage/sections/Courses.tsx   |  36 ++++
 src/pages/HomePage/sections/Faq.tsx       |  28 ++++
 src/pages/HomePage/sections/Hero.tsx      |  25 +++
 src/pages/HomePage/sections/Kids.tsx      |  32 ++++
 src/pages/HomePage/sections/Quran.tsx     |  24 +++
 src/pages/HomePage/sections/Videos.tsx    |  32 ++++
 11 files changed, 281 insertions(+), 166 deletions(-)
 create mode 100644 src/pages/HomePage/sections/About.tsx
 create mode 100644 src/pages/HomePage/sections/Community.tsx
 create mode 100644 src/pages/HomePage/sections/Contact.tsx
 create mode 100644 src/pages/HomePage/sections/Courses.tsx
 create mode 100644 src/pages/HomePage/sections/Faq.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Kids.tsx
 create mode 100644 src/pages/HomePage/sections/Quran.tsx
 create mode 100644 src/pages/HomePage/sections/Videos.tsx

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index ef45f98..da4390e 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,5 +1,5 @@
 import FooterMinimal from '@/components/sections/footer/FooterMinimal';
-import NavbarDropdown from '@/components/ui/NavbarDropdown';
+import NavbarFloatingLogo from '@/components/ui/NavbarFloatingLogo';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
 import { Film, Instagram, Twitter } from "lucide-react";
@@ -42,8 +42,9 @@ export default function Layout() {
     <StyleProvider buttonVariant="stagger" siteBackground="floatingGradient" heroBackground="lightRaysCenter">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
-        <NavbarDropdown
+        <NavbarFloatingLogo
       logo="Bilal Ethio-Swiss"
+      logoImageSrc="https://storage.googleapis.com/webild/users/user_3F9VDqmsKMWcc1BMo8WpdOd5oJ5/uploaded-1781487583335-i2j5y38y.jpg"
       ctaButton={{
         text: "Donate",
         href: "#contact",
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 967cadb..a36102e 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,177 +1,39 @@
-import AboutText from '@/components/sections/about/AboutText';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesBento from '@/components/sections/features/FeaturesBento';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
-import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// 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 HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import QuranSection from './HomePage/sections/Quran';
+import CoursesSection from './HomePage/sections/Courses';
+import VideosSection from './HomePage/sections/Videos';
+import KidsSection from './HomePage/sections/Kids';
+import FaqSection from './HomePage/sections/Faq';
+import CommunitySection from './HomePage/sections/Community';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroOverlay
-      tag="Ethio-Swiss Community"
-      title="Bilal Islamic Education"
-      description="Connecting heritage and faith through modern Islamic learning."
-      primaryButton={{
-        text: "Start Learning",        href: "#courses"}}
-      secondaryButton={{
-        text: "Our Vision",        href: "#about"}}
-      imageSrc="http://img.b2bpic.net/free-vector/gradient-golden-arabic-pattern_23-2148914195.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutText
-      title="Welcome to Bilal Ethio-Swiss, where tradition meets modern education to nurture our community."
-      primaryButton={{
-        text: "About Us",        href: "#about"}}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="quran" data-section="quran">
-    <SectionErrorBoundary name="quran">
-          <MetricsMediaCards
-      tag="Qur'an Program"
-      title="Excellence in Recitation"
-      description="Tajweed, Hifz, and daily reflection programs for all levels."
-      metrics={[
-        {
-          value: "Tajweed",          title: "Precision",          description: "Mastering the rules of articulation.",          imageSrc: "http://img.b2bpic.net/free-photo/old-fashioned-library-desks-with-historic-charm-beautiful-decorations_482257-125708.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <QuranSection />
 
-  <div id="courses" data-section="courses">
-    <SectionErrorBoundary name="courses">
-          <FeaturesRevealCardsBento
-      tag="Study Program"
-      title="Core Islamic Sciences"
-      description="Comprehensive curriculum covering the fundamentals of faith."
-      items={[
-        {
-          title: "Aqeedah",          description: "Foundational belief studies.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-vector/books-yellow-circle-celebrate-literacy-day_23-2147567325.jpg"},
-        {
-          title: "Fiqh",          description: "Daily practical laws.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-holy-quran-drums-front-side-white-background_187299-35722.jpg"},
-        {
-          title: "Seerah",          description: "Life of the Prophet.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-frame-holy-quran-front-view_187299-35699.jpg"},
-        {
-          title: "Islamic History",          description: "Reflecting on our past.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-vector/ebook-graphic-illustration_24908-54740.jpg"},
-        {
-          title: "Dawah",          description: "Community building.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-top-view-concept-with-quran_23-2147791794.jpg"},
-        {
-          title: "Tarbiyah",          description: "Character building.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-senior-man-education-concept_23-2151074931.jpg"},
-        {
-          title: "Hadith",          description: "Teachings of the Prophet.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/half-dried-brown-sour-cherries-cup-concrete-background-high-quality-photo_114579-67598.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <CoursesSection />
 
-  <div id="videos" data-section="videos">
-    <SectionErrorBoundary name="videos">
-          <FeaturesBento
-      tag="Library"
-      title="Video Lessons"
-      description="Learn from our channel and insightful lectures."
-      features={[
-        {
-          title: "Islamic Stories",          description: "Engaging narratives for all ages.",          bentoComponent: "media-stack",          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-talking-with-her-father-video-call-using-tablet-computer_482257-19679.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/old-woman-with-disability-holding-green-screen-digital-tablet-senior-person-sitting-wheelchair-using-blank-copy-space-with-isolated-chroma-key-mock-up-background-display_482257-39047.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-teaching-students-english-lesson-online_23-2148962968.jpg"},
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <VideosSection />
 
-  <div id="kids" data-section="kids">
-    <SectionErrorBoundary name="kids">
-          <FeaturesBento
-      tag="Junior Scholars"
-      title="Kids Corner"
-      description="Fun stories, Duas, and Islamic cartoons."
-      features={[
-        {
-          title: "Dua Learning",          description: "Everyday supplications.",          bentoComponent: "media-stack",          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/muslims-reading-from-quran_53876-20958.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-teaching-classroom_23-2151696367.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cartoony-jesus-christ_23-2150972171.jpg"},
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <KidsSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="Ask a Scholar"
-      title="Q&A Forum"
-      description="Get answers to your daily questions."
-      items={[
-        {
-          question: "How do I register for classes?",          answer: "Click the registration button in our student portal."},
-        {
-          question: "Can I request a private session?",          answer: "Yes, contact our administration team."},
-        {
-          question: "Is the content available in Amharic and German?",          answer: "Yes, we prioritize multi-language support."},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="community" data-section="community">
-    <SectionErrorBoundary name="community">
-          <TestimonialColumnMarqueeCards
-      tag="Events"
-      title="Community Gatherings"
-      description="Join our Ethiopian-Swiss events."
-      testimonials={[
-        {
-          name: "Ahmed",          role: "Student",          quote: "The community bond is incredible.",          imageSrc: "http://img.b2bpic.net/free-photo/girl-with-umbrella-cloudy-weather-walk-forest-stands-bridge-against-backdrop-landscape_169016-11781.jpg"},
-        {
-          name: "Sara",          role: "Parent",          quote: "My kids love the lessons.",          imageSrc: "http://img.b2bpic.net/free-photo/cartoon-illustration-muslim-family_23-2151811894.jpg"},
-        {
-          name: "Yusuf",          role: "Ustadh",          quote: "Teaching here is a blessing.",          imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-bridge-edge-taking-selfie_23-2148622622.jpg"},
-        {
-          name: "Fatima",          role: "Volunteer",          quote: "A perfect bridge between two cultures.",          imageSrc: "http://img.b2bpic.net/free-photo/young-photographer-with-backpack-cap-photographing-old-iron-bridge-rio-tinto_181624-50560.jpg"},
-        {
-          name: "Hassan",          role: "Member",          quote: "Truly educational and spiritual.",          imageSrc: "http://img.b2bpic.net/free-photo/joyful-female-colleagues-watching-content-phone_74855-2027.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <CommunitySection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Support Us"
-      text="Support Bilal Ethio-Swiss Dawah programs today."
-      primaryButton={{
-        text: "Donate Now",        href: "#"}}
-      secondaryButton={{
-        text: "Get In Touch",        href: "#"}}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..ab7f119
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,20 @@
+// 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="Welcome to Bilal Ethio-Swiss, where tradition meets modern education to nurture our community."
+          primaryButton={{
+            text: "About Us",        href: "#about"}}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Community.tsx b/src/pages/HomePage/sections/Community.tsx
new file mode 100644
index 0000000..e95707b
--- /dev/null
+++ b/src/pages/HomePage/sections/Community.tsx
@@ -0,0 +1,32 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "community" section.
+
+import React from 'react';
+import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function CommunitySection(): React.JSX.Element {
+  return (
+    <div id="community" data-section="community">
+        <SectionErrorBoundary name="community">
+              <TestimonialColumnMarqueeCards
+          tag="Events"
+          title="Community Gatherings"
+          description="Join our Ethiopian-Swiss events."
+          testimonials={[
+            {
+              name: "Ahmed",          role: "Student",          quote: "The community bond is incredible.",          imageSrc: "http://img.b2bpic.net/free-photo/girl-with-umbrella-cloudy-weather-walk-forest-stands-bridge-against-backdrop-landscape_169016-11781.jpg"},
+            {
+              name: "Sara",          role: "Parent",          quote: "My kids love the lessons.",          imageSrc: "http://img.b2bpic.net/free-photo/cartoon-illustration-muslim-family_23-2151811894.jpg"},
+            {
+              name: "Yusuf",          role: "Ustadh",          quote: "Teaching here is a blessing.",          imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-bridge-edge-taking-selfie_23-2148622622.jpg"},
+            {
+              name: "Fatima",          role: "Volunteer",          quote: "A perfect bridge between two cultures.",          imageSrc: "http://img.b2bpic.net/free-photo/young-photographer-with-backpack-cap-photographing-old-iron-bridge-rio-tinto_181624-50560.jpg"},
+            {
+              name: "Hassan",          role: "Member",          quote: "Truly educational and spiritual.",          imageSrc: "http://img.b2bpic.net/free-photo/joyful-female-colleagues-watching-content-phone_74855-2027.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..26743d0
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Support Us"
+          text="Support Bilal Ethio-Swiss Dawah programs today."
+          primaryButton={{
+            text: "Donate Now",        href: "#"}}
+          secondaryButton={{
+            text: "Get In Touch",        href: "#"}}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Courses.tsx b/src/pages/HomePage/sections/Courses.tsx
new file mode 100644
index 0000000..be7a101
--- /dev/null
+++ b/src/pages/HomePage/sections/Courses.tsx
@@ -0,0 +1,36 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "courses" section.
+
+import React from 'react';
+import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function CoursesSection(): React.JSX.Element {
+  return (
+    <div id="courses" data-section="courses">
+        <SectionErrorBoundary name="courses">
+              <FeaturesRevealCardsBento
+          tag="Study Program"
+          title="Core Islamic Sciences"
+          description="Comprehensive curriculum covering the fundamentals of faith."
+          items={[
+            {
+              title: "Aqeedah",          description: "Foundational belief studies.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-vector/books-yellow-circle-celebrate-literacy-day_23-2147567325.jpg"},
+            {
+              title: "Fiqh",          description: "Daily practical laws.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-holy-quran-drums-front-side-white-background_187299-35722.jpg"},
+            {
+              title: "Seerah",          description: "Life of the Prophet.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-frame-holy-quran-front-view_187299-35699.jpg"},
+            {
+              title: "Islamic History",          description: "Reflecting on our past.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-vector/ebook-graphic-illustration_24908-54740.jpg"},
+            {
+              title: "Dawah",          description: "Community building.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-top-view-concept-with-quran_23-2147791794.jpg"},
+            {
+              title: "Tarbiyah",          description: "Character building.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-senior-man-education-concept_23-2151074931.jpg"},
+            {
+              title: "Hadith",          description: "Teachings of the Prophet.",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/half-dried-brown-sour-cherries-cup-concrete-background-high-quality-photo_114579-67598.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..8fdbd7b
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,28 @@
+// 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="Ask a Scholar"
+          title="Q&A Forum"
+          description="Get answers to your daily questions."
+          items={[
+            {
+              question: "How do I register for classes?",          answer: "Click the registration button in our student portal."},
+            {
+              question: "Can I request a private session?",          answer: "Yes, contact our administration team."},
+            {
+              question: "Is the content available in Amharic and German?",          answer: "Yes, we prioritize multi-language support."},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..ab8bbe5
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,25 @@
+// 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="Ethio-Swiss Community"
+          title="Bilal Islamic Education"
+          description="Connecting heritage and faith through modern Islamic learning."
+          primaryButton={{
+            text: "Start Learning",        href: "#courses"}}
+          secondaryButton={{
+            text: "Our Vision",        href: "#about"}}
+          imageSrc="http://img.b2bpic.net/free-vector/gradient-golden-arabic-pattern_23-2148914195.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Kids.tsx b/src/pages/HomePage/sections/Kids.tsx
new file mode 100644
index 0000000..b394678
--- /dev/null
+++ b/src/pages/HomePage/sections/Kids.tsx
@@ -0,0 +1,32 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "kids" section.
+
+import React from 'react';
+import FeaturesBento from '@/components/sections/features/FeaturesBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function KidsSection(): React.JSX.Element {
+  return (
+    <div id="kids" data-section="kids">
+        <SectionErrorBoundary name="kids">
+              <FeaturesBento
+          tag="Junior Scholars"
+          title="Kids Corner"
+          description="Fun stories, Duas, and Islamic cartoons."
+          features={[
+            {
+              title: "Dua Learning",          description: "Everyday supplications.",          bentoComponent: "media-stack",          mediaItems: [
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/muslims-reading-from-quran_53876-20958.jpg"},
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/woman-teaching-classroom_23-2151696367.jpg"},
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cartoony-jesus-christ_23-2150972171.jpg"},
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Quran.tsx b/src/pages/HomePage/sections/Quran.tsx
new file mode 100644
index 0000000..5d7737d
--- /dev/null
+++ b/src/pages/HomePage/sections/Quran.tsx
@@ -0,0 +1,24 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "quran" section.
+
+import React from 'react';
+import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function QuranSection(): React.JSX.Element {
+  return (
+    <div id="quran" data-section="quran">
+        <SectionErrorBoundary name="quran">
+              <MetricsMediaCards
+          tag="Qur'an Program"
+          title="Excellence in Recitation"
+          description="Tajweed, Hifz, and daily reflection programs for all levels."
+          metrics={[
+            {
+              value: "Tajweed",          title: "Precision",          description: "Mastering the rules of articulation.",          imageSrc: "http://img.b2bpic.net/free-photo/old-fashioned-library-desks-with-historic-charm-beautiful-decorations_482257-125708.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Videos.tsx b/src/pages/HomePage/sections/Videos.tsx
new file mode 100644
index 0000000..471eaa2
--- /dev/null
+++ b/src/pages/HomePage/sections/Videos.tsx
@@ -0,0 +1,32 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "videos" section.
+
+import React from 'react';
+import FeaturesBento from '@/components/sections/features/FeaturesBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function VideosSection(): React.JSX.Element {
+  return (
+    <div id="videos" data-section="videos">
+        <SectionErrorBoundary name="videos">
+              <FeaturesBento
+          tag="Library"
+          title="Video Lessons"
+          description="Learn from our channel and insightful lectures."
+          features={[
+            {
+              title: "Islamic Stories",          description: "Engaging narratives for all ages.",          bentoComponent: "media-stack",          mediaItems: [
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-talking-with-her-father-video-call-using-tablet-computer_482257-19679.jpg"},
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/old-woman-with-disability-holding-green-screen-digital-tablet-senior-person-sitting-wheelchair-using-blank-copy-space-with-isolated-chroma-key-mock-up-background-display_482257-39047.jpg"},
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/young-woman-teaching-students-english-lesson-online_23-2148962968.jpg"},
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
-- 
2.49.1