Deploy

src/components/sections/CaseStudiesSection.tsx

@@ -0,0 +1,78 @@
+import Image from "next/image"
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"
+
+export default function CaseStudiesSection() {
+  const studies = [
+    {
+      image: "https://images.pexels.com/photos/12955837/pexels-photo-12955837.jpeg?auto=compress&cs=tinysrgb&h=350",
+      industry: "Construction & Infrastructure",
+      problem: "Shareholder deadlock in a R200 million joint venture",
+      result: "Reached a mediated exit with a 45% valuation increase for our client within 6 months.",
+      buttonLabel: "Read case study",
+    },
+    {
+      image: "https://images.pexels.com/photos/12955837/pexels-photo-12955837.jpeg?auto=compress&cs=tinysrgb&h=350",
+      industry: "Real Estate Investment",
+      problem: "Complex title dispute over a prime Sandton commercial property",
+      result: "Resolved through the Land Claims Court, securing full ownership and a R15 million compensation.",
+      buttonLabel: "Read case study",
+    },
+    {
+      image: "https://images.pexels.com/photos/12955837/pexels-photo-12955837.jpeg?auto=compress&cs=tinysrgb&h=350",
+      industry: "Manufacturing & Export",
+      problem: "Breach of international supply contract causing R8 million loss",
+      result: "Won arbitration in South Africa and enforced award in the UK within 14 months.",
+      buttonLabel: "Read case study",
+    },
+  ]
+
+  return (
+    <section data-vula-section="casestudies" id="case-studies" className="py-20 lg:py-28 bg-white">
+      <div className="max-w-7xl mx-auto px-6">
+        <span className="text-sm font-semibold tracking-widest uppercase text-neutral-400 text-center block">
+          Client Results
+        </span>
+        <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-[#000080] mt-4 mb-12 text-center">
+          Transformative Outcomes We've Delivered
+        </h2>
+        <div className="grid md:grid-cols-3 gap-8">
+          {studies.map((study, i) => (
+            <Card
+              key={i}
+              className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out overflow-hidden"
+            >
+              <div className="aspect-video overflow-hidden">
+                <Image
+                  src={study.image}
+                  alt={`Case study: ${study.industry}`}
+                  width={400}
+                  height={225}
+                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                />
+              </div>
+              <CardHeader>
+                <span className="text-xs font-semibold tracking-widest uppercase text-[#d4af37]">
+                  {study.industry}
+                </span>
+                <CardTitle className="text-lg font-semibold text-[#000080] mt-2">
+                  {study.problem}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-base text-neutral-600 leading-relaxed">
+                  <strong>Result:</strong> {study.result}
+                </p>
+                <a
+                  href="#contact"
+                  className="inline-block mt-4 text-sm font-semibold text-[#000080] underline-offset-4 hover:underline transition-all duration-200"
+                >
+                  {study.buttonLabel} &rarr;
+                </a>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}