Update components/case-studies.tsx

components/case-studies.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { Heading } from "./heading";
+import { Subheading } from "./subheading";
+
+export const CaseStudies = () => {
+  const cases = [
+    {
+      title: "B2B SaaS Scale-up",
+      metric: "+45 Replies in 30 Days",
+      description: "Using Clay-style enrichment to target high-intent founders in the UK market.",
+    },
+    {
+      title: "Professional Services Firm",
+      metric: "12% Reply Rate, 8 Meetings",
+      description: "Hyper-personalized outreach to Head of Growth roles at mid-market companies.",
+    },
+  ];
+
+  return (
+    <section className="py-20 lg:py-40 relative z-20">
+      <Heading as="h2">Proof of Concept</Heading>
+      <Subheading className="text-center mb-12">
+        Real results from our predictable outbound engine.
+      </Subheading>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto px-6">
+        {cases.map((item, index) => (
+          <div key={index} className="p-8 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
+            <h3 className="text-2xl font-bold text-black dark:text-white mb-2">{item.metric}</h3>
+            <p className="text-lg font-semibold text-blue-600 dark:text-blue-400 mb-4">{item.title}</p>
+            <p className="text-muted dark:text-muted-dark">{item.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};