First commit

app/(public)/practice/page.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+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>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {mockPracticeModules.map((module, index) => (
+          <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"
+            }`}
+          >
+            <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">
+              {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">
+          Open a module to start the full interactive flow
+        </p>
+      </section>
+    </div>
+  );
+}