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

45
app/(public)/practice/page.tsx Normal file → Executable file
View File

@@ -3,13 +3,23 @@ import { mockPracticeModules } from "@/lib/data/mockPractice";
export default function PracticePage() {
return (
<div className="space-y-7">
<section className="text-center">
<p className="acve-pill mx-auto mb-4 w-fit">Practice and Exercises</p>
<h1 className="acve-heading text-4xl md:text-6xl">Master Your Skills</h1>
<p className="mx-auto mt-3 max-w-4xl text-lg text-slate-600 md:text-3xl">
Interactive exercises designed to reinforce your understanding of English law concepts.
</p>
<div className="acve-page">
<section className="acve-panel acve-section-base">
<div className="grid gap-4 md:grid-cols-[1.5fr_0.9fr]">
<div>
<p className="acve-pill mb-3 w-fit">Practice and Exercises</p>
<h1 className="text-3xl font-semibold leading-tight text-[#222a38] md:text-4xl">Build confidence through short practice sessions</h1>
<p className="mt-3 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">
Train legal vocabulary, clause analysis, and case reasoning with quick modules you can complete in minutes.
</p>
</div>
<div className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Practice Overview</p>
<p className="mt-2 text-2xl font-semibold text-slate-900">{mockPracticeModules.length} modules</p>
<p className="mt-2 text-sm text-slate-600">Interactive now: {mockPracticeModules.filter((item) => item.isInteractive).length}</p>
<p className="text-sm text-slate-600">Coming soon: {mockPracticeModules.filter((item) => !item.isInteractive).length}</p>
</div>
</div>
</section>
<section className="grid gap-4 md:grid-cols-3">
@@ -17,22 +27,27 @@ export default function PracticePage() {
<Link
key={module.slug}
href={`/practice/${module.slug}`}
className={`rounded-2xl border p-6 shadow-sm transition hover:-translate-y-0.5 ${
index === 0 ? "border-brand bg-white" : "border-slate-300 bg-white"
className={`rounded-2xl border p-5 shadow-sm transition hover:-translate-y-0.5 ${
index === 0 ? "border-brand bg-white" : "border-slate-200 bg-white hover:border-slate-300"
}`}
>
<div className="mb-3 text-3xl text-brand md:text-4xl">{index === 0 ? "A/" : index === 1 ? "[]" : "O"}</div>
<h2 className="text-2xl text-[#222a38] md:text-4xl">{module.title}</h2>
<p className="mt-2 text-lg text-slate-600 md:text-2xl">{module.description}</p>
<p className="mt-4 text-sm font-semibold uppercase tracking-wide text-slate-500">
<div className="mb-2 flex items-center justify-between">
<div className="text-2xl text-brand">{index === 0 ? "A/" : index === 1 ? "[]" : "O"}</div>
<span className="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-600">
{module.questions?.length ? `${module.questions.length} questions` : "Scaffolded"}
</span>
</div>
<h2 className="text-2xl leading-tight text-[#222a38]">{module.title}</h2>
<p className="mt-2 text-base leading-relaxed text-slate-600">{module.description}</p>
<p className="mt-4 text-xs font-semibold uppercase tracking-wide text-slate-500">
{module.isInteractive ? "Interactive now" : "Coming soon"}
</p>
</Link>
))}
</section>
<section className="acve-panel p-5 text-center">
<p className="text-sm font-semibold uppercase tracking-wide text-slate-500">
<section className="acve-panel p-4 text-center">
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
Open a module to start the full interactive flow
</p>
</section>