mdares/ACVE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

advance

Browse Source
This commit is contained in:
Marcelo
2026-02-17 00:07:00 +00:00
parent b7a86a2d1c
commit be4ca2ed78
92 changed files with 6850 additions and 1188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/(public)/case-studies/[slug]/page.tsx Normal file → Executable file
View File

@@ -3,6 +3,13 @@
import Link from "next/link";
import { useParams } from "next/navigation";
import { getCaseStudyBySlug } from "@/lib/data/mockCaseStudies";
import type { CourseLevel } from "@/types/course";
const levelBadgeClass = (level: CourseLevel) => {
if (level === "Beginner") return "bg-emerald-100 text-emerald-900 border border-emerald-200";
if (level === "Intermediate") return "bg-sky-100 text-sky-900 border border-sky-200";
return "bg-violet-100 text-violet-900 border border-violet-200";
};
export default function CaseStudyDetailPage() {
const params = useParams<{ slug: string }>();
@@ -21,35 +28,43 @@ export default function CaseStudyDetailPage() {
}
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>
<article className="acve-page">
<header className="acve-panel acve-section-base">
<p className="text-sm font-semibold uppercase tracking-wide text-slate-500">{caseStudy.citation} ({caseStudy.year})</p>
<h1 className="mt-2 text-4xl font-semibold leading-tight text-[#1f2b3a] md:text-5xl">{caseStudy.title}</h1>
<div className="mt-3 flex flex-wrap items-center gap-2">
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">Topic: {caseStudy.topic}</span>
<span className={`rounded-full px-3 py-1 text-xs font-semibold ${levelBadgeClass(caseStudy.level)}`}>Level: {caseStudy.level}</span>
</div>
</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 className="grid gap-4 lg:grid-cols-[1.35fr_0.8fr]">
<div className="acve-panel p-5">
<h2 className="text-2xl font-semibold text-[#232b39]">Case Summary</h2>
<p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{caseStudy.summary}</p>
<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>
))}
<h3 className="mt-5 text-lg font-semibold text-[#232b39]">Reading Guide (Placeholder)</h3>
<ul className="mt-2 space-y-2 text-sm text-slate-700">
<li className="rounded-lg border border-slate-200 bg-white px-3 py-2">1. Identify the legal issue and the jurisdiction context.</li>
<li className="rounded-lg border border-slate-200 bg-white px-3 py-2">2. Highlight the key reasoning applied by the court.</li>
<li className="rounded-lg border border-slate-200 bg-white px-3 py-2">3. Extract practical implications for drafting or litigation.</li>
</ul>
</div>
<aside className="acve-panel p-5">
<h2 className="text-lg font-semibold text-[#232b39]">Key Legal Terms</h2>
<div className="mt-3 space-y-2">
{caseStudy.keyTerms.map((term, index) => (
<div key={term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-3">
<p className="text-base font-semibold text-brand">{term}</p>
<p className="mt-1 text-sm text-slate-600">Legal explanation block {index + 1}</p>
</div>
))}
</div>
</aside>
</section>
<section className="border-t border-slate-200 pt-5">
<section className="border-t border-slate-200 pt-1">
<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>