First commit

app/(public)/case-studies/[slug]/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { getCaseStudyBySlug } from "@/lib/data/mockCaseStudies";
+
+export default function CaseStudyDetailPage() {
+  const params = useParams<{ slug: string }>();
+  const caseStudy = getCaseStudyBySlug(params.slug);
+
+  if (!caseStudy) {
+    return (
+      <div className="acve-panel p-6">
+        <h1 className="text-2xl font-bold text-slate-900">Case study not found</h1>
+        <p className="mt-2 text-slate-600">The requested case study slug does not exist in mock data.</p>
+        <Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/case-studies">
+          Back to case studies
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <article className="acve-panel space-y-6 p-6">
+      <header className="space-y-2">
+        <p className="text-lg text-slate-500">
+          {caseStudy.citation} ({caseStudy.year})
+        </p>
+        <h1 className="acve-heading text-3xl md:text-6xl">{caseStudy.title}</h1>
+        <p className="text-base text-slate-600 md:text-2xl">
+          Topic: {caseStudy.topic} | Level: {caseStudy.level}
+        </p>
+      </header>
+
+      <section>
+        <h2 className="text-2xl text-[#232b39] md:text-4xl">Summary</h2>
+        <p className="mt-2 text-lg leading-relaxed text-slate-700 md:text-3xl">{caseStudy.summary}</p>
+      </section>
+
+      <section>
+        <h2 className="text-2xl text-[#232b39] md:text-4xl">Key legal terms explained</h2>
+        <div className="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {caseStudy.keyTerms.map((term, index) => (
+            <div key={term} className="rounded-xl border-l-4 border-accent bg-[#faf8f8] p-4">
+              <p className="text-xl font-semibold text-brand md:text-3xl">{term}</p>
+              <p className="mt-1 text-base text-slate-600 md:text-xl">Legal explanation block {index + 1}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-t border-slate-200 pt-5">
+        <Link className="acve-button-secondary inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href="/case-studies">
+          Back to Case Library
+        </Link>
+      </section>
+    </article>
+  );
+}