Update theme colors

Merge version_3_1782739706621 into main

src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import FooterMinimal from '@/components/sections/footer/FooterMinimal';
-import NavbarCentered from '@/components/ui/NavbarCentered';
+import NavbarFloating from '@/components/ui/NavbarFloating';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
 import { Instagram, Linkedin, Twitter } from "lucide-react";
@@ -42,8 +42,8 @@ export default function Layout() {
     <StyleProvider buttonVariant="magnetic" siteBackground="noise" heroBackground="gradientBars">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
-        <NavbarCentered
-      logo="TechService"
+        <NavbarFloating
+      logo="MADAR"
       ctaButton={{
         text: "Join Now",
         href: "#contact",
@@ -55,7 +55,7 @@ export default function Layout() {
       </main>
       <SectionErrorBoundary name="footer">
         <FooterMinimal
-      brand="TechService © 2024"
+      brand="MADAR © 2024"
       copyright="All rights reserved. Empowering Saudi Arabia's Industrial Sector."
       socialLinks={[
         {

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
+  --background: #fafffb;
   --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
+  --foreground: #001a0a;
+  --primary-cta: #0a705f;
+  --primary-cta-text: #fafffb;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --secondary-cta-text: #001a0a;
+  --accent: #a8d9be;
+  --background-accent: #6bbfb8;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;

src/pages/HomePage.tsx

@@ -1,334 +1,43 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import FeaturesMediaCards from '@/components/sections/features/FeaturesMediaCards';
-import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
-import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
-import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
-import { Globe, Shield, Zap } from "lucide-react";
-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 ServicesSection from './HomePage/sections/Services';
+import HowItWorksSection from './HomePage/sections/HowItWorks';
+import FactoryBenefitsSection from './HomePage/sections/FactoryBenefits';
+import ProviderBenefitsSection from './HomePage/sections/ProviderBenefits';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import PricingSection from './HomePage/sections/Pricing';
+import ContactSection from './HomePage/sections/Contact';
+
+
+import TrustedBySection from './HomePage/sections/TrustedBy';
+import CaseStudiesSection from './HomePage/sections/CaseStudies';export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplitVerticalMarquee
-      tag="Industrial Excellence"
-      title="Your Trusted Gateway to Industrial Success in Saudi Arabia"
-      description="Connecting factories with verified maintenance technicians, spare parts suppliers, and industrial contractors through our advanced B2B platform."
-      primaryButton={{
-        text: "Get Started",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "Learn More",
-        href: "#about",
-      }}
-      leftItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/worker-face-mask-controlling-coffee-roasting-process-coffee-roaster-working-roasting-equipment-man-mask-uniform-working-with-machinery-appliance_74855-20118.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/hacker-photovoltaics-facility-extracts-company-pc-files-uploads-malware_482257-117815.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/offshore-engineer-naval-officer-using-ai-technology-laptop-inspect-drilling-operations_482257-135645.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-with-red-smartwatch-programming-hightech-machine-factory_73899-44015.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-worker-near-metalworking-machine_176420-4656.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/masked-hacker-sneaking-into-solar-panel-plant-night-steal-equipment_482257-119274.jpg",
-        },
-      ]}
-      rightItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-factory-worker-white-lab-suit-black-latex-glove-working-with-soldering-iron-some-modern-equipment-other-workers-are-background_645730-736.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-holding-spare-parts-car_1170-1616.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/smart-robotic-farmers-concept-robot-farmers-agriculture-technology-farm-automation_35913-2324.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/inspector-factory-talking-phone-while-others-are-working_1303-30634.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/engineer-cooperation-two-asian-male-female-technician-maintenance-inspect-relay-robot-system-with-tablet-laptop-control-quality-operate-process-work-heavy-industry-40-manufacturing-factory_609648-73.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/singapore-flyer_1203-7193.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
+      <TrustedBySection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutFeaturesSplit
-      tag="Our Value"
-      title="Efficiency Meets Industrial Reliability"
-      description="TechService bridges the gap between industrial demands and expert solutions, ensuring seamless operations for modern factories."
-      items={[
-        {
-          icon: Shield,
-          title: "Verified Professionals",
-          description: "Strict verification for every technician and service provider on our platform.",
-        },
-        {
-          icon: Zap,
-          title: "Rapid Deployment",
-          description: "Minimize downtime with lightning-fast access to spare parts and maintenance pros.",
-        },
-        {
-          icon: Globe,
-          title: "National Coverage",
-          description: "Supporting industrial hubs across the Kingdom from our Riyadh-based platform.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/metal-factory-operator-is-controlling-machine-tool-cutting-steel_613910-5236.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="services" data-section="services">
-    <SectionErrorBoundary name="services">
-          <FeaturesImageBento
-      tag="Our Services"
-      title="Comprehensive Industrial Support"
-      description="We offer a wide range of services covering everything your facility might need to operate at peak capacity."
-      items={[
-        {
-          title: "Maintenance Experts",
-          description: "On-demand specialized maintenance teams.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-working-steel-fatory-equipment-steel-production_1303-22928.jpg",
-        },
-        {
-          title: "Safety Certification",
-          description: "Ensure total safety compliance.",
-          imageSrc: "http://img.b2bpic.net/free-photo/three-people-discussing-plan-factory_1303-30624.jpg",
-        },
-        {
-          title: "Spare Parts Supply",
-          description: "Direct access to original parts.",
-          imageSrc: "http://img.b2bpic.net/free-photo/entrepreneurs-shaking-hands-solar-panel-manufacturing-plant-after-reaching-agreement_482257-135503.jpg",
-        },
-        {
-          title: "Industrial Contracting",
-          description: "Major project management services.",
-          imageSrc: "http://img.b2bpic.net/free-photo/industrial-plant-shareholders-conducting-research-reading-paperwork_482257-123385.jpg",
-        },
-        {
-          title: "Machine Analytics",
-          description: "Predictive maintenance solutions.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-engineer-job-site-work-hours_23-2151589635.jpg",
-        },
-        {
-          title: "Logistics Support",
-          description: "Streamlined factory operations.",
-          imageSrc: "http://img.b2bpic.net/free-photo/engineers-working-smart-factory-collecting-analyzing-data_482257-120556.jpg",
-        },
-        {
-          title: "Energy Solutions",
-          description: "Efficiency audits & implementation.",
-          imageSrc: "http://img.b2bpic.net/free-photo/investor-presents-industrial-automation-strategy-industrial-plant-executives_482257-119141.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ServicesSection />
 
-  <div id="how-it-works" data-section="how-it-works">
-    <SectionErrorBoundary name="how-it-works">
-          <FeaturesMediaCards
-      tag="Process"
-      title="Simple 3-Step Workflow"
-      description="Get connected in minutes, not days."
-      items={[
-        {
-          title: "Request Service",
-          description: "Post your industrial needs or spare parts requests on our platform.",
-          imageSrc: "http://img.b2bpic.net/free-photo/industry-40-photovoltaics-plant-senior-engineer-reading-paperwork_482257-119565.jpg",
-        },
-        {
-          title: "Review Offers",
-          description: "Get verified offers from our expert network of service providers.",
-          imageSrc: "http://img.b2bpic.net/free-photo/computer-solar-panels-manufacturing-plant-troubleshooting-technical-issues_482257-120484.jpg",
-        },
-        {
-          title: "Get Results",
-          description: "Finalize your order and enjoy seamless operations with our guarantee.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-overall-showing-clipboard-with-blank-paper_23-2148073091.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <HowItWorksSection />
 
-  <div id="factory-benefits" data-section="factory-benefits">
-    <SectionErrorBoundary name="factory-benefits">
-          <MetricsSimpleCards
-      tag="Factories Advantage"
-      title="Why Factories Choose Us"
-      description="Data-driven results for your industrial growth."
-      metrics={[
-        {
-          value: "40%",
-          description: "Reduction in maintenance downtime",
-        },
-        {
-          value: "98%",
-          description: "Professional technician success rate",
-        },
-        {
-          value: "24/7",
-          description: "Dedicated support availability",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FactoryBenefitsSection />
 
-  <div id="provider-benefits" data-section="provider-benefits">
-    <SectionErrorBoundary name="provider-benefits">
-          <TeamOverlayCards
-      tag="For Partners"
-      title="Empowering Service Providers"
-      description="Grow your industrial business with TechService."
-      members={[
-        {
-          name: "Access Leads",
-          role: "Direct pipeline to top factories",
-          imageSrc: "http://img.b2bpic.net/free-photo/photovoltaics-smart-factory-team-leader-workers-analyzing-data_482257-131901.jpg",
-        },
-        {
-          name: "Build Trust",
-          role: "Leverage our verified platform reputation",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-engineer-working-field-engineers-day-celebration_23-2151615091.jpg",
-        },
-        {
-          name: "Efficient Tools",
-          role: "Powerful dashboard to manage your jobs",
-          imageSrc: "http://img.b2bpic.net/free-photo/smart-warehouse-conveyor-belt-system-with-digital-interface_23-2151983329.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProviderBenefitsSection />
+      <CaseStudiesSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialMarqueeOverlayCards
-      tag="Testimonials"
-      title="Trusted by Industrial Leaders"
-      description="See why top factories in Saudi Arabia rely on us."
-      testimonials={[
-        {
-          name: "Ahmed Mansour",
-          role: "Plant Manager",
-          company: "SaudiSteel",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-business-man-with-laptop_23-2148479575.jpg",
-        },
-        {
-          name: "Faisal Al-Otaibi",
-          role: "Lead Engineer",
-          company: "DammamTech",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367548.jpg",
-        },
-        {
-          name: "Sara Al-Harbi",
-          role: "Logistics Lead",
-          company: "Riyadh Logistics",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-holding-laptop-standing-warehouse_259150-56866.jpg",
-        },
-        {
-          name: "Khaled Al-Fahad",
-          role: "COO",
-          company: "Jubail Manufactory",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-engineer-hard-hat-building_1303-21146.jpg",
-        },
-        {
-          name: "Mohammed Al-Salem",
-          role: "Procurement Head",
-          company: "RedSea Industrial",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-corporate-manager-sitting-with-hands-clasped-outside-office_662251-2057.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingSimpleCards
-      tag="Flexible Pricing"
-      title="Plans That Scale With You"
-      description="Choose the right tier for your factory's growth journey."
-      plans={[
-        {
-          tag: "Starter",
-          price: "Free",
-          description: "Great for small workshops starting out.",
-          features: [
-            "Limited access",
-            "Basic support",
-            "Standard listing",
-          ],
-        },
-        {
-          tag: "Enterprise",
-          price: "Custom",
-          description: "Tailored for large industrial complexes.",
-          features: [
-            "Unlimited access",
-            "Priority 24/7 support",
-            "Advanced predictive data",
-          ],
-        },
-        {
-          tag: "Premium",
-          price: "SAR 9,900/yr",
-          description: "Best for growing industrial sites.",
-          features: [
-            "Full platform access",
-            "Verified service priority",
-            "Dedicated account manager",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Contact Us"
-      text="Ready to optimize your factory operations? Contact our team today."
-      primaryButton={{
-        text: "Register Your Factory",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "Partner With Us",
-        href: "#",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,39 @@
+// 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 AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+import { Globe, Shield, Zap } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutFeaturesSplit
+          tag="Our Value"
+          title="Efficiency Meets Industrial Reliability"
+          description="TechService bridges the gap between industrial demands and expert solutions, ensuring seamless operations for modern factories."
+          items={[
+            {
+              icon: Shield,
+              title: "Verified Professionals",
+              description: "Strict verification for every technician and service provider on our platform.",
+            },
+            {
+              icon: Zap,
+              title: "Rapid Deployment",
+              description: "Minimize downtime with lightning-fast access to spare parts and maintenance pros.",
+            },
+            {
+              icon: Globe,
+              title: "National Coverage",
+              description: "Supporting industrial hubs across the Kingdom from our Riyadh-based platform.",
+            },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/metal-factory-operator-is-controlling-machine-tool-cutting-steel_613910-5236.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/CaseStudies.tsx

@@ -0,0 +1,78 @@
+import { motion } from "motion/react"
+import TextAnimation from "@/components/ui/TextAnimation"
+import ScrollReveal from "@/components/ui/ScrollReveal"
+import ImageOrVideo from "@/components/ui/ImageOrVideo"
+import Tag from "@/components/ui/Tag"
+
+export default function CaseStudies() {
+  const cases = [
+    {
+      title: "50% Reduction in Downtime for Riyadh Plastics",
+      description: "By utilizing MADAR's rapid deployment of verified technicians, Riyadh Plastics minimized their machine downtime and saved over 200,000 SAR in lost production.",
+      imageSrc: "https://picsum.photos/seed/429735176/1200/800",
+      tags: ["Manufacturing", "ROI: 200k SAR", "Downtime"]
+    },
+    {
+      title: "3x Revenue Growth for Al-Jubail Maintenance Co.",
+      description: "A local service provider expanded their client base across the Eastern Province, leveraging our national coverage to secure long-term contracts.",
+      imageSrc: "https://picsum.photos/seed/733726084/1200/800",
+      tags: ["Service Provider", "Growth: 300%", "Expansion"]
+    },
+    {
+      title: "Optimized Spare Parts Sourcing for Jeddah Steel",
+      description: "Jeddah Steel streamlined their procurement process, reducing spare parts delivery times by 40% and cutting inventory holding costs.",
+      imageSrc: "https://picsum.photos/seed/1902011918/1200/800",
+      tags: ["Procurement", "Efficiency: +40%", "Logistics"]
+    }
+  ];
+
+  return (
+    <section data-webild-section="case-studies" id="case-studies" className="relative w-full py-24 bg-background">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col items-center text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Case Studies" className="mb-4" />
+          </ScrollReveal>
+          <TextAnimation
+            text="Proven ROI for Saudi Industries"
+            variant="fade-blur"
+            tag="h2"
+            gradientText={false}
+            className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+          />
+          <ScrollReveal variant="fade" delay={0.2}>
+            <p className="text-lg text-accent max-w-2xl mx-auto">
+              See how MADAR is transforming maintenance and operations for leading factories and service providers across the Kingdom.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {cases.map((item, index) => (
+            <ScrollReveal variant="fade" key={index} delay={0.1 * (index + 1)} className="h-full">
+              <div className="card h-full flex flex-col overflow-hidden rounded-lg">
+                <div className="relative h-48 w-full overflow-hidden">
+                  <ImageOrVideo
+                    imageSrc={item.imageSrc}
+                    className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
+                  />
+                </div>
+                <div className="p-6 flex flex-col flex-grow">
+                  <div className="flex flex-wrap gap-2 mb-4">
+                    {item.tags.map((tag, i) => (
+                      <span key={i} className="text-xs font-medium px-2 py-1 bg-background-accent/20 text-foreground rounded-full">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                  <h3 className="text-xl font-bold text-foreground mb-3">{item.title}</h3>
+                  <p className="text-accent text-sm flex-grow">{item.description}</p>
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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="Contact Us"
+          text="Ready to optimize your factory operations? Contact our team today."
+          primaryButton={{
+            text: "Register Your Factory",
+            href: "#",
+          }}
+          secondaryButton={{
+            text: "Partner With Us",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/FactoryBenefits.tsx

@@ -0,0 +1,34 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "factory-benefits" section.
+
+import React from 'react';
+import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FactoryBenefitsSection(): React.JSX.Element {
+  return (
+    <div id="factory-benefits" data-section="factory-benefits">
+        <SectionErrorBoundary name="factory-benefits">
+              <MetricsSimpleCards
+          tag="Factories Advantage"
+          title="Why Factories Choose Us"
+          description="Data-driven results for your industrial growth."
+          metrics={[
+            {
+              value: "40%",
+              description: "Reduction in maintenance downtime",
+            },
+            {
+              value: "98%",
+              description: "Professional technician success rate",
+            },
+            {
+              value: "24/7",
+              description: "Dedicated support availability",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,68 @@
+// 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 HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroSplitVerticalMarquee
+          tag="Industrial Excellence"
+          title="Your Trusted Gateway to Industrial Success in Saudi Arabia"
+          description="Connecting factories with verified maintenance technicians, spare parts suppliers, and industrial contractors through our advanced B2B platform."
+          primaryButton={{
+            text: "Get Started",
+            href: "#contact",
+          }}
+          secondaryButton={{
+            text: "Learn More",
+            href: "#about",
+          }}
+          leftItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/worker-face-mask-controlling-coffee-roasting-process-coffee-roaster-working-roasting-equipment-man-mask-uniform-working-with-machinery-appliance_74855-20118.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/hacker-photovoltaics-facility-extracts-company-pc-files-uploads-malware_482257-117815.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/offshore-engineer-naval-officer-using-ai-technology-laptop-inspect-drilling-operations_482257-135645.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/closeup-hand-with-red-smartwatch-programming-hightech-machine-factory_73899-44015.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-worker-near-metalworking-machine_176420-4656.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/masked-hacker-sneaking-into-solar-panel-plant-night-steal-equipment_482257-119274.jpg",
+            },
+          ]}
+          rightItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/closeup-factory-worker-white-lab-suit-black-latex-glove-working-with-soldering-iron-some-modern-equipment-other-workers-are-background_645730-736.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-holding-spare-parts-car_1170-1616.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/smart-robotic-farmers-concept-robot-farmers-agriculture-technology-farm-automation_35913-2324.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/inspector-factory-talking-phone-while-others-are-working_1303-30634.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/engineer-cooperation-two-asian-male-female-technician-maintenance-inspect-relay-robot-system-with-tablet-laptop-control-quality-operate-process-work-heavy-industry-40-manufacturing-factory_609648-73.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/singapore-flyer_1203-7193.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/HowItWorks.tsx

@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "how-it-works" section.
+
+import React from 'react';
+import FeaturesMediaCards from '@/components/sections/features/FeaturesMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HowItWorksSection(): React.JSX.Element {
+  return (
+    <div id="how-it-works" data-section="how-it-works">
+        <SectionErrorBoundary name="how-it-works">
+              <FeaturesMediaCards
+          tag="Process"
+          title="Simple 3-Step Workflow"
+          description="Get connected in minutes, not days."
+          items={[
+            {
+              title: "Request Service",
+              description: "Post your industrial needs or spare parts requests on our platform.",
+              imageSrc: "http://img.b2bpic.net/free-photo/industry-40-photovoltaics-plant-senior-engineer-reading-paperwork_482257-119565.jpg",
+            },
+            {
+              title: "Review Offers",
+              description: "Get verified offers from our expert network of service providers.",
+              imageSrc: "http://img.b2bpic.net/free-photo/computer-solar-panels-manufacturing-plant-troubleshooting-technical-issues_482257-120484.jpg",
+            },
+            {
+              title: "Get Results",
+              description: "Finalize your order and enjoy seamless operations with our guarantee.",
+              imageSrc: "http://img.b2bpic.net/free-photo/man-overall-showing-clipboard-with-blank-paper_23-2148073091.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingSimpleCards
+        tag="Flexible Pricing"
+        title="Plans That Scale With You"
+        description="Choose the right tier for your factory's growth journey."
+        plans={[{"price":"SAR 90/mo","features":["Basic support","Standard listing","2% commission on deals > 5000"],"tag":"Starter","description":"Essential access for small workshops."},{"price":"SAR 150/mo","features":["Verified service priority","Dedicated account manager","2% commission on deals > 5000"],"tag":"Pro","description":"Best for growing industrial sites."},{"features":["Unlimited access","Priority 24/7 support","Advanced predictive data","2% commission on deals > 5000"],"price":"SAR 300/mo","description":"Tailored for large industrial complexes.","tag":"Enterprise"}]}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/ProviderBenefits.tsx

@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "provider-benefits" section.
+
+import React from 'react';
+import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProviderBenefitsSection(): React.JSX.Element {
+  return (
+    <div id="provider-benefits" data-section="provider-benefits">
+        <SectionErrorBoundary name="provider-benefits">
+              <TeamOverlayCards
+          tag="For Partners"
+          title="Empowering Service Providers"
+          description="Grow your industrial business with TechService."
+          members={[
+            {
+              name: "Access Leads",
+              role: "Direct pipeline to top factories",
+              imageSrc: "http://img.b2bpic.net/free-photo/photovoltaics-smart-factory-team-leader-workers-analyzing-data_482257-131901.jpg",
+            },
+            {
+              name: "Build Trust",
+              role: "Leverage our verified platform reputation",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-engineer-working-field-engineers-day-celebration_23-2151615091.jpg",
+            },
+            {
+              name: "Efficient Tools",
+              role: "Powerful dashboard to manage your jobs",
+              imageSrc: "http://img.b2bpic.net/free-photo/smart-warehouse-conveyor-belt-system-with-digital-interface_23-2151983329.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Services.tsx

@@ -0,0 +1,57 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "services" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services" data-section="services">
+        <SectionErrorBoundary name="services">
+              <FeaturesImageBento
+          tag="Our Services"
+          title="Comprehensive Industrial Support"
+          description="We offer a wide range of services covering everything your facility might need to operate at peak capacity."
+          items={[
+            {
+              title: "Maintenance Experts",
+              description: "On-demand specialized maintenance teams.",
+              imageSrc: "http://img.b2bpic.net/free-photo/man-working-steel-fatory-equipment-steel-production_1303-22928.jpg",
+            },
+            {
+              title: "Safety Certification",
+              description: "Ensure total safety compliance.",
+              imageSrc: "http://img.b2bpic.net/free-photo/three-people-discussing-plan-factory_1303-30624.jpg",
+            },
+            {
+              title: "Spare Parts Supply",
+              description: "Direct access to original parts.",
+              imageSrc: "http://img.b2bpic.net/free-photo/entrepreneurs-shaking-hands-solar-panel-manufacturing-plant-after-reaching-agreement_482257-135503.jpg",
+            },
+            {
+              title: "Industrial Contracting",
+              description: "Major project management services.",
+              imageSrc: "http://img.b2bpic.net/free-photo/industrial-plant-shareholders-conducting-research-reading-paperwork_482257-123385.jpg",
+            },
+            {
+              title: "Machine Analytics",
+              description: "Predictive maintenance solutions.",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-engineer-job-site-work-hours_23-2151589635.jpg",
+            },
+            {
+              title: "Logistics Support",
+              description: "Streamlined factory operations.",
+              imageSrc: "http://img.b2bpic.net/free-photo/engineers-working-smart-factory-collecting-analyzing-data_482257-120556.jpg",
+            },
+            {
+              title: "Energy Solutions",
+              description: "Efficiency audits & implementation.",
+              imageSrc: "http://img.b2bpic.net/free-photo/investor-presents-industrial-automation-strategy-industrial-plant-executives_482257-119141.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,57 @@
+// 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 TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialMarqueeOverlayCards
+          tag="Testimonials"
+          title="Trusted by Industrial Leaders"
+          description="See why top factories in Saudi Arabia rely on us."
+          testimonials={[
+            {
+              name: "Ahmed Mansour",
+              role: "Plant Manager",
+              company: "SaudiSteel",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-business-man-with-laptop_23-2148479575.jpg",
+            },
+            {
+              name: "Faisal Al-Otaibi",
+              role: "Lead Engineer",
+              company: "DammamTech",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367548.jpg",
+            },
+            {
+              name: "Sara Al-Harbi",
+              role: "Logistics Lead",
+              company: "Riyadh Logistics",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-holding-laptop-standing-warehouse_259150-56866.jpg",
+            },
+            {
+              name: "Khaled Al-Fahad",
+              role: "COO",
+              company: "Jubail Manufactory",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-engineer-hard-hat-building_1303-21146.jpg",
+            },
+            {
+              name: "Mohammed Al-Salem",
+              role: "Procurement Head",
+              company: "RedSea Industrial",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-corporate-manager-sitting-with-hands-clasped-outside-office_662251-2057.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/TrustedBy.tsx

@@ -0,0 +1,27 @@
+
+export default function TrustedBySection() {
+  const logos = [
+    "SABIC",
+    "Aramco",
+    "Ma'aden",
+    "Tasnee",
+    "Zamil Industrial"
+  ];
+
+  return (
+    <section id="trusted-by" data-webild-section="trusted-by" className="py-16 bg-background">
+      <div className="w-content-width mx-auto flex flex-col items-center gap-8">
+        <p className="text-sm font-medium text-accent uppercase tracking-wider text-center">
+          Trusted by leading factories across Saudi Arabia
+        </p>
+        <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-60">
+          {logos.map((logo, index) => (
+            <div key={index} className="text-xl md:text-2xl font-bold text-foreground font-sans tracking-tight">
+              {logo}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}