Merge version_12_1782740842420 into main

Merge version_12_1782740842420 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,7 +42,7 @@ export default function Layout() {
     <StyleProvider buttonVariant="magnetic" siteBackground="noise" heroBackground="gradientBars">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
-        <NavbarCentered
+        <NavbarFloating
       logo="MADAR"
       ctaButton={{
         text: "Join Now",

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
+  --background: #fffafa;
   --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
+  --foreground: #1a0000;
+  --primary-cta: #e63946;
+  --primary-cta-text: #fffafa;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --secondary-cta-text: #1a0000;
+  --accent: #f5c4c7;
+  --background-accent: #f09199;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;

src/pages/HomePage.tsx

@@ -15,7 +15,8 @@ import PricingSection from './HomePage/sections/Pricing';
 import ContactSection from './HomePage/sections/Contact';
 
 
-import TrustedBySection from './HomePage/sections/TrustedBy';export default function HomePage(): React.JSX.Element {
+import TrustedBySection from './HomePage/sections/TrustedBy';
+import CaseStudiesSection from './HomePage/sections/CaseStudies';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -30,6 +31,7 @@ import TrustedBySection from './HomePage/sections/TrustedBy';export default func
   <FactoryBenefitsSection />
 
   <ProviderBenefitsSection />
+      <CaseStudiesSection />
 
   <TestimonialsSection />
 

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