First commit

app/(public)/case-studies/page.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { mockCaseStudies } from "@/lib/data/mockCaseStudies";
+
+export default function CaseStudiesPage() {
+  const [activeSlug, setActiveSlug] = useState(mockCaseStudies[0]?.slug ?? "");
+  const activeCase = mockCaseStudies.find((item) => item.slug === activeSlug) ?? mockCaseStudies[0];
+
+  return (
+    <div className="space-y-7">
+      <section className="text-center">
+        <p className="acve-pill mx-auto mb-4 w-fit">Case Studies</p>
+        <h1 className="acve-heading text-4xl md:text-6xl">Learn from Landmark Cases</h1>
+        <p className="mx-auto mt-3 max-w-4xl text-lg text-slate-600 md:text-3xl">
+          Real English law cases explained with key legal terms and practical insights.
+        </p>
+      </section>
+
+      <section className="grid gap-5 lg:grid-cols-[0.9fr_1.8fr]">
+        <div className="space-y-3">
+          {mockCaseStudies.map((caseStudy) => {
+            const isActive = caseStudy.slug === activeCase.slug;
+            return (
+              <button
+                key={caseStudy.slug}
+                className={`w-full rounded-2xl border p-4 text-left transition ${
+                  isActive ? "border-brand bg-white shadow-sm" : "border-slate-300 bg-white hover:border-slate-400"
+                }`}
+                onClick={() => setActiveSlug(caseStudy.slug)}
+                type="button"
+              >
+                <h2 className="text-xl text-[#232b39] md:text-3xl">{caseStudy.title}</h2>
+                <p className="mt-1 text-base text-slate-500 md:text-2xl">
+                  [{caseStudy.year}] {caseStudy.citation}
+                </p>
+                <div className="mt-3 flex items-center gap-2 text-sm">
+                  <span className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{caseStudy.topic}</span>
+                  <span className="rounded-full bg-accent px-3 py-1 font-semibold text-white">{caseStudy.level}</span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        <article className="acve-panel p-6">
+          <div className="mb-5 flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <h2 className="text-3xl text-[#202936] md:text-6xl">{activeCase.title}</h2>
+              <p className="mt-2 text-lg text-slate-500 md:text-3xl">
+                {activeCase.citation} | {activeCase.year}
+              </p>
+            </div>
+            <div className="space-y-2 text-right text-sm">
+              <p className="rounded-full bg-accent px-3 py-1 font-semibold text-white">{activeCase.level}</p>
+              <p className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{activeCase.topic}</p>
+            </div>
+          </div>
+
+          <section className="border-t border-slate-200 pt-5">
+            <h3 className="text-4xl text-[#232b39]">Case Summary</h3>
+            <p className="mt-3 text-lg leading-relaxed text-slate-700 md:text-3xl">{activeCase.summary}</p>
+          </section>
+
+          <section className="mt-6">
+            <h3 className="mb-3 text-4xl text-[#232b39]">Key Legal Terms Explained</h3>
+            <div className="space-y-3">
+              {activeCase.keyTerms.map((term) => (
+                <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-2xl">Term explanation will be expanded in phase 2 content.</p>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <Link className="acve-button-secondary mt-6 inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href={`/case-studies/${activeCase.slug}`}>
+            Open detail page
+          </Link>
+        </article>
+      </section>
+    </div>
+  );
+}