From e5326455cc671c0f370c9e0d1101d4080b182ef1 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Tue, 23 Jun 2026 01:52:07 +0000
Subject: [PATCH] Bob AI: Changed hero layout to Hero Billboard

---
 src/pages/HomePage.tsx                       | 213 ++-----------------
 src/pages/HomePage/sections/About.tsx        |  22 ++
 src/pages/HomePage/sections/Contact.tsx      |  27 +++
 src/pages/HomePage/sections/Faq.tsx          |  35 +++
 src/pages/HomePage/sections/Features.tsx     |  37 ++++
 src/pages/HomePage/sections/Hero.tsx         |  19 ++
 src/pages/HomePage/sections/Metrics.tsx      |  49 +++++
 src/pages/HomePage/sections/Testimonials.tsx |  52 +++++
 8 files changed, 263 insertions(+), 191 deletions(-)
 create mode 100644 src/pages/HomePage/sections/About.tsx
 create mode 100644 src/pages/HomePage/sections/Contact.tsx
 create mode 100644 src/pages/HomePage/sections/Faq.tsx
 create mode 100644 src/pages/HomePage/sections/Features.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Metrics.tsx
 create mode 100644 src/pages/HomePage/sections/Testimonials.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 0b1a5eb..962b397 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,202 +1,33 @@
-import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
-import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
-import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-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 FeaturesSection from './HomePage/sections/Features';
+import MetricsSection from './HomePage/sections/Metrics';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplitMediaGrid
-      tag="هندسة موثوقة"
-      title="مكتب إبراهيم الخميسي للأعمال الهندسية"
-      description="نقدم حلولاً هندسية مبتكرة ومعتمدة تضمن سلامة ودقة مشاريعك في جدة وما حولها. خبرة عريقة في الهندسة المدنية وإدارة المشاريع."
-      primaryButton={{
-        text: "احجز استشارتك",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "تعرف علينا",
-        href: "#about",
-      }}
-      items={[
-        {
-          imageSrc: "https://images.pexels.com/photos/6615028/pexels-photo-6615028.jpeg?auto=compress&cs=tinysrgb&h=650&w=940&id=6615028",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-vienna-railway-station-vienna-austria_181624-10305.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTextSplit
-      title="عن مكتبنا"
-      descriptions={[
-        "تأسس مكتب إبراهيم الخميسي للأعمال الهندسية ليكون ركيزة أساسية في قطاع الهندسة المدنية بمدينة جدة. نحن نؤمن بأن الهندسة هي فن التخطيط والدقة، ونسعى دائماً لتجاوز توقعات عملائنا.",
-        "يضم مكتبنا فريقاً متخصصاً من المهندسين ذوي الخبرة العالية في التصميم الإنشائي، الإشراف، والاستشارات الهندسية المتكاملة، ملتزمين بأعلى معايير الجودة والكود السعودي.",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesRevealCards
-      tag="خدماتنا"
-      title="حلول هندسية متكاملة"
-      description="نقدم خدمات متنوعة تشمل التصميم، التنفيذ، والاستشارات، مع التركيز على الكفاءة والاحترافية."
-      items={[
-        {
-          title: "التصميم الهندسي",
-          description: "تخطيط وتصميم إنشائي ومعماري متوافق مع كافة الاشتراطات النظامية.",
-          imageSrc: "http://img.b2bpic.net/free-photo/architectural-blueprints_1359-431.jpg",
-        },
-        {
-          title: "الإشراف على التنفيذ",
-          description: "متابعة دقيقة للمشاريع في الميدان لضمان الالتزام بالمخططات والجودة.",
-          imageSrc: "http://img.b2bpic.net/free-photo/site-engineer-construction-site_53876-42833.jpg",
-        },
-        {
-          title: "الاستشارات الهندسية",
-          description: "تقديم حلول تقنية ومالية لمشاكل البناء وتحديات المواقع المعقدة.",
-          imageSrc: "http://img.b2bpic.net/free-photo/foundation-castle-tower-edo-jo-castle-japan_1232-2306.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsFeatureCards
-      tag="أرقامنا"
-      title="حقائق وأرقام"
-      description="نفخر بخدمة مجتمعنا في جدة عبر مجموعة متنوعة من المشاريع الناجحة."
-      metrics={[
-        {
-          value: "٣٠+",
-          title: "مشروع مكتمل",
-          features: [
-            "دقة التنفيذ",
-            "التزام بالجدول",
-            "موافقات نظامية",
-          ],
-        },
-        {
-          value: "٤.٦",
-          title: "تقييم العملاء",
-          features: [
-            "احترافية عالية",
-            "تجاوب سريع",
-            "دعم فني",
-          ],
-        },
-        {
-          value: "١٠٠٪",
-          title: "رضا الجودة",
-          features: [
-            "معايير معتمدة",
-            "رقابة دقيقة",
-            "إشراف هندسي",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialColumnMarqueeCards
-      tag="ماذا يقول عملاؤنا"
-      title="ثقة عملائنا هي نجاحنا"
-      description="نحن نقدر الملاحظات التي تساعدنا على تحسين خدماتنا وتقديم الأفضل دائماً."
-      testimonials={[
-        {
-          name: "عزيز المانع",
-          role: "عميل",
-          quote: "تجاوب سريع ورد على استفسارات العملاء.",
-          imageSrc: "http://img.b2bpic.net/free-photo/clients-realtor-touring-new-high-class-office-space_482257-90948.jpg",
-        },
-        {
-          name: "محمد العتيبي",
-          role: "مستثمر",
-          quote: "خبرة ممتازة وتخطيط دقيق للمشروع، شكراً لكم.",
-          imageSrc: "http://img.b2bpic.net/free-photo/working-with-partner_1098-14261.jpg",
-        },
-        {
-          name: "سعد السعد",
-          role: "عميل",
-          quote: "تواصل احترافي ومتابعة مستمرة لكافة مراحل العمل.",
-          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-photo-tall-building_250224-299.jpg",
-        },
-        {
-          name: "خالد القرني",
-          role: "عميل",
-          quote: "تصاميم مميزة وامتثال كامل للكود الهندسي.",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-friendly-handshake_74855-1542.jpg",
-        },
-        {
-          name: "نورة العتيبي",
-          role: "عميلة",
-          quote: "خدمة هندسية متكاملة وسرعة في إنجاز المعاملات.",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-with-vest-helmet_23-2148269392.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSplitMedia
-      tag="استفسارات"
-      title="الأسئلة الشائعة"
-      description="كل ما تحتاج معرفته عن خدماتنا."
-      items={[
-        {
-          question: "هل تتوفر استشارات هندسية أولية؟",
-          answer: "نعم، نقدم استشارات أولية لتقييم الاحتياجات الهندسية للمشروع.",
-        },
-        {
-          question: "ما هي مناطق العمل؟",
-          answer: "نغطي كافة أحياء مدينة جدة والمناطق المحيطة بها.",
-        },
-        {
-          question: "كيف يمكن التواصل معكم؟",
-          answer: "يمكنكم الاتصال عبر الهاتف أو زيارة مقرنا في حي الحمدانية.",
-        },
-      ]}
-      imageSrc="https://images.pexels.com/photos/5324968/pexels-photo-5324968.jpeg?auto=compress&cs=tinysrgb&h=650&w=940&id=5324968"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="تواصل معنا"
-      text="هل لديك مشروع هندسي؟ نحن هنا لنقدم لك الدعم والاستشارة الفنية اللازمة."
-      primaryButton={{
-        text: "اتصل بنا الآن: 0505588675",
-        href: "tel:0505588675",
-      }}
-      secondaryButton={{
-        text: "موقعنا على الخريطة",
-        href: "https://maps.app.goo.gl/Q663+CP",
-      }}
-    />
-    </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..981548c
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,22 @@
+// 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 AboutTextSplit from '@/components/sections/about/AboutTextSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTextSplit
+          title="عن مكتبنا"
+          descriptions={[
+            "تأسس مكتب إبراهيم الخميسي للأعمال الهندسية ليكون ركيزة أساسية في قطاع الهندسة المدنية بمدينة جدة. نحن نؤمن بأن الهندسة هي فن التخطيط والدقة، ونسعى دائماً لتجاوز توقعات عملائنا.",
+            "يضم مكتبنا فريقاً متخصصاً من المهندسين ذوي الخبرة العالية في التصميم الإنشائي، الإشراف، والاستشارات الهندسية المتكاملة، ملتزمين بأعلى معايير الجودة والكود السعودي.",
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..389f2e1
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,27 @@
+// 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="تواصل معنا"
+          text="هل لديك مشروع هندسي؟ نحن هنا لنقدم لك الدعم والاستشارة الفنية اللازمة."
+          primaryButton={{
+            text: "اتصل بنا الآن: 0505588675",
+            href: "tel:0505588675",
+          }}
+          secondaryButton={{
+            text: "موقعنا على الخريطة",
+            href: "https://maps.app.goo.gl/Q663+CP",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..8930e87
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,35 @@
+// 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 FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqSplitMedia
+          tag="استفسارات"
+          title="الأسئلة الشائعة"
+          description="كل ما تحتاج معرفته عن خدماتنا."
+          items={[
+            {
+              question: "هل تتوفر استشارات هندسية أولية؟",
+              answer: "نعم، نقدم استشارات أولية لتقييم الاحتياجات الهندسية للمشروع.",
+            },
+            {
+              question: "ما هي مناطق العمل؟",
+              answer: "نغطي كافة أحياء مدينة جدة والمناطق المحيطة بها.",
+            },
+            {
+              question: "كيف يمكن التواصل معكم؟",
+              answer: "يمكنكم الاتصال عبر الهاتف أو زيارة مقرنا في حي الحمدانية.",
+            },
+          ]}
+          imageSrc="https://images.pexels.com/photos/5324968/pexels-photo-5324968.jpeg?auto=compress&cs=tinysrgb&h=650&w=940&id=5324968"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Features.tsx b/src/pages/HomePage/sections/Features.tsx
new file mode 100644
index 0000000..a058a09
--- /dev/null
+++ b/src/pages/HomePage/sections/Features.tsx
@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesRevealCards
+          tag="خدماتنا"
+          title="حلول هندسية متكاملة"
+          description="نقدم خدمات متنوعة تشمل التصميم، التنفيذ، والاستشارات، مع التركيز على الكفاءة والاحترافية."
+          items={[
+            {
+              title: "التصميم الهندسي",
+              description: "تخطيط وتصميم إنشائي ومعماري متوافق مع كافة الاشتراطات النظامية.",
+              imageSrc: "http://img.b2bpic.net/free-photo/architectural-blueprints_1359-431.jpg",
+            },
+            {
+              title: "الإشراف على التنفيذ",
+              description: "متابعة دقيقة للمشاريع في الميدان لضمان الالتزام بالمخططات والجودة.",
+              imageSrc: "http://img.b2bpic.net/free-photo/site-engineer-construction-site_53876-42833.jpg",
+            },
+            {
+              title: "الاستشارات الهندسية",
+              description: "تقديم حلول تقنية ومالية لمشاكل البناء وتحديات المواقع المعقدة.",
+              imageSrc: "http://img.b2bpic.net/free-photo/foundation-castle-tower-edo-jo-castle-japan_1232-2306.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..b6999a0
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,19 @@
+// Created by add_section_from_catalog (HeroBillboard).
+
+import React from 'react';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroBillboard
+        primaryButton={{"text":"احجز استشارتك","href":"#contact"}}
+        description="نقدم حلولاً هندسية مبتكرة ومعتمدة تضمن سلامة ودقة مشاريعك في جدة وما حولها. خبرة عريقة في الهندسة المدنية وإدارة المشاريع."
+        tag="هندسة موثوقة"
+        imageSrc="https://images.pexels.com/photos/6615028/pexels-photo-6615028.jpeg?auto=compress&cs=tinysrgb&h=650&w=940&id=6615028"
+        secondaryButton={{"text":"تعرف علينا","href":"#about"}}
+        title="مكتب إبراهيم الخميسي للأعمال الهندسية"
+      />
+    </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Metrics.tsx b/src/pages/HomePage/sections/Metrics.tsx
new file mode 100644
index 0000000..21857d3
--- /dev/null
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,49 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsFeatureCards
+          tag="أرقامنا"
+          title="حقائق وأرقام"
+          description="نفخر بخدمة مجتمعنا في جدة عبر مجموعة متنوعة من المشاريع الناجحة."
+          metrics={[
+            {
+              value: "٣٠+",
+              title: "مشروع مكتمل",
+              features: [
+                "دقة التنفيذ",
+                "التزام بالجدول",
+                "موافقات نظامية",
+              ],
+            },
+            {
+              value: "٤.٦",
+              title: "تقييم العملاء",
+              features: [
+                "احترافية عالية",
+                "تجاوب سريع",
+                "دعم فني",
+              ],
+            },
+            {
+              value: "١٠٠٪",
+              title: "رضا الجودة",
+              features: [
+                "معايير معتمدة",
+                "رقابة دقيقة",
+                "إشراف هندسي",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
new file mode 100644
index 0000000..d8f1dd3
--- /dev/null
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,52 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialColumnMarqueeCards
+          tag="ماذا يقول عملاؤنا"
+          title="ثقة عملائنا هي نجاحنا"
+          description="نحن نقدر الملاحظات التي تساعدنا على تحسين خدماتنا وتقديم الأفضل دائماً."
+          testimonials={[
+            {
+              name: "عزيز المانع",
+              role: "عميل",
+              quote: "تجاوب سريع ورد على استفسارات العملاء.",
+              imageSrc: "http://img.b2bpic.net/free-photo/clients-realtor-touring-new-high-class-office-space_482257-90948.jpg",
+            },
+            {
+              name: "محمد العتيبي",
+              role: "مستثمر",
+              quote: "خبرة ممتازة وتخطيط دقيق للمشروع، شكراً لكم.",
+              imageSrc: "http://img.b2bpic.net/free-photo/working-with-partner_1098-14261.jpg",
+            },
+            {
+              name: "سعد السعد",
+              role: "عميل",
+              quote: "تواصل احترافي ومتابعة مستمرة لكافة مراحل العمل.",
+              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-photo-tall-building_250224-299.jpg",
+            },
+            {
+              name: "خالد القرني",
+              role: "عميل",
+              quote: "تصاميم مميزة وامتثال كامل للكود الهندسي.",
+              imageSrc: "http://img.b2bpic.net/free-photo/closeup-friendly-handshake_74855-1542.jpg",
+            },
+            {
+              name: "نورة العتيبي",
+              role: "عميلة",
+              quote: "خدمة هندسية متكاملة وسرعة في إنجاز المعاملات.",
+              imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-with-vest-helmet_23-2148269392.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
-- 
2.49.1