Merge version_17_1782181485124 into main

Merge version_17_1782181485124 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
+  --background: #f5f5f5;
   --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
+  --foreground: #1c1c1c;
+  --primary-cta: #511f1f;
+  --primary-cta-text: #f5f5f5;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #8f3838;
+  --background-accent: #c9725c;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;

src/pages/HomePage.tsx

@@ -1,202 +1,35 @@
-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';
+
+
+import TrustedBySection from './HomePage/sections/TrustedBy';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: "http://img.b2bpic.net/free-photo/neo-brutalism-inspired-building_23-2151004766.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-vienna-railway-station-vienna-austria_181624-10305.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
+      <TrustedBySection />
 
-  <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="http://img.b2bpic.net/free-photo/closeup-view-white-desk-with-white-papers-red-notebook-plants-pen-glasses-it_181624-27824.jpg"
-    />
-    </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 />
     </>
   );
 }

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

src/pages/HomePage/sections/TrustedBy.tsx

@@ -0,0 +1,42 @@
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import LoopCarousel from "@/components/ui/LoopCarousel";
+
+export default function TrustedBySection() {
+  const clients = [
+    "أرامكو السعودية",
+    "سابك",
+    "وزارة الإسكان",
+    "أمانة جدة",
+    "نيوم",
+    "البحر الأحمر الدولية",
+    "شركة المياه الوطنية",
+    "وزارة النقل والخدمات اللوجستية"
+  ];
+
+  return (
+    <section data-webild-section="trusted-by" id="trusted-by" className="relative w-full py-12 bg-background border-b border-accent/10 overflow-hidden">
+      <div className="w-content-width mx-auto mb-8">
+        <ScrollReveal variant="fade">
+          <p className="text-center text-sm font-medium text-accent uppercase tracking-wider">
+            موثوقون من قبل نخبة القطاعات
+          </p>
+        </ScrollReveal>
+      </div>
+      
+      <div className="w-full">
+        <LoopCarousel>
+          <div className="flex items-center gap-16 px-8">
+            {clients.map((client, index) => (
+              <span 
+                key={index} 
+                className="text-xl md:text-2xl font-bold text-foreground/40 whitespace-nowrap"
+              >
+                {client}
+              </span>
+            ))}
+          </div>
+        </LoopCarousel>
+      </div>
+    </section>
+  );
+}