advance

app/(public)/assistant/page.tsx

@@ -2,9 +2,21 @@ import AssistantDrawer from "@/components/AssistantDrawer";
 
 export default function AssistantPage() {
   return (
-    <div className="space-y-4">
-      <h1 className="acve-heading text-4xl md:text-6xl">AI Assistant (Demo)</h1>
-      <p className="text-lg text-slate-600 md:text-2xl">This page renders the same assistant UI as the global drawer.</p>
+    <div className="acve-page">
+      <section className="acve-panel acve-section-base">
+        <p className="acve-pill mb-3 w-fit">AI Assistant (Demo)</p>
+        <h1 className="text-4xl font-semibold leading-tight text-[#222a38] md:text-5xl">Ask legal English questions in context</h1>
+        <p className="mt-2 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">
+          This is a product preview. Responses are mock while backend retrieval and tutor logic are being integrated.
+        </p>
+      </section>
+
+      <section className="grid gap-3 md:grid-cols-3">
+        <article className="acve-panel p-4 text-sm text-slate-700">Use for clause terms, case-study guidance, and writing clarity tips.</article>
+        <article className="acve-panel p-4 text-sm text-slate-700">For legal advice or final authority, always verify with qualified counsel.</article>
+        <article className="acve-panel p-4 text-sm text-slate-700">Conversation persistence is placeholder-only in this MVP stage.</article>
+      </section>
+
       <AssistantDrawer mode="page" />
     </div>
   );

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

@@ -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>

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

@@ -3,73 +3,91 @@
 import Link from "next/link";
 import { useState } from "react";
 import { mockCaseStudies } 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 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>
+    <div className="acve-page">
+      <section className="acve-panel acve-section-base">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <p className="acve-pill mb-3 w-fit">Case Studies</p>
+            <h1 className="text-3xl font-semibold leading-tight text-[#202936] md:text-4xl">Landmark Cases, distilled for learning</h1>
+            <p className="mt-2 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">
+              Review outcomes, legal terms, and practical context in a cleaner, high-density reading layout.
+            </p>
+          </div>
+          <div className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600">
+            <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Library</p>
+            <p className="mt-1 text-xl font-semibold text-slate-900">{mockCaseStudies.length} cases</p>
+          </div>
+        </div>
       </section>
 
-      <section className="grid gap-5 lg:grid-cols-[0.9fr_1.8fr]">
-        <div className="space-y-3">
+      <section className="grid gap-4 lg:grid-cols-[0.9fr_1.7fr]">
+        <aside className="acve-panel p-3">
+          <p className="mb-3 px-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Browse Cases</p>
+          <div className="space-y-2">
           {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"
+                className={`w-full rounded-xl border p-3 text-left transition ${
+                  isActive ? "border-brand bg-white shadow-sm" : "border-slate-200 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">
+                <h2 className="text-lg font-semibold leading-tight text-[#232b39] md:text-xl">{caseStudy.title}</h2>
+                <p className="mt-1 text-sm text-slate-500 md:text-base">
                   [{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 className="mt-2 flex items-center gap-2 text-xs">
+                  <span className="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{caseStudy.topic}</span>
+                  <span className={`rounded-full px-2 py-1 font-semibold ${levelBadgeClass(caseStudy.level)}`}>{caseStudy.level}</span>
                 </div>
               </button>
             );
           })}
-        </div>
+          </div>
+        </aside>
 
-        <article className="acve-panel p-6">
-          <div className="mb-5 flex flex-wrap items-start justify-between gap-3">
+        <article className="acve-panel p-5 md:p-6">
+          <div className="mb-4 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">
+              <h2 className="text-3xl font-semibold leading-tight text-[#202936] md:text-4xl">{activeCase.title}</h2>
+              <p className="mt-2 text-base text-slate-500 md:text-xl">
                 {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>
+            <div className="space-y-2 text-right text-xs">
+              <p className={`rounded-full px-3 py-1 font-semibold ${levelBadgeClass(activeCase.level)}`}>{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 className="border-t border-slate-200 pt-4">
+            <h3 className="text-2xl font-semibold text-[#232b39]">Case Summary</h3>
+            <p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{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">
+          <section className="mt-5">
+            <h3 className="mb-3 text-2xl font-semibold text-[#232b39]">Key Legal Terms Explained</h3>
+            <div className="grid gap-3 sm:grid-cols-2">
               {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 key={term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-4">
+                  <p className="text-lg font-semibold text-brand">{term}</p>
+                  <p className="mt-1 text-sm text-slate-600">Detailed explanation will expand in phase 2 content.</p>
                 </div>
               ))}
             </div>

app/(public)/courses/[slug]/page.tsx

@@ -1,135 +1,184 @@
-"use client";
-
 import Link from "next/link";
-import { useParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import ProgressBar from "@/components/ProgressBar";
-import { getCourseBySlug } from "@/lib/data/courseCatalog";
-import { getCourseProgressPercent, progressUpdatedEventName } from "@/lib/progress/localProgress";
-import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
-import { supabaseBrowser } from "@/lib/supabase/browser";
-import type { Course } from "@/types/course";
+import { notFound } from "next/navigation";
+import { db } from "@/lib/prisma";
+import { requireUser } from "@/lib/auth/requireUser";
 
-export default function CourseDetailPage() {
-  const params = useParams<{ slug: string }>();
-  const slug = params.slug;
-  const [course, setCourse] = useState<Course | undefined>(() => getCourseBySlug(slug));
-  const [hasResolvedCourse, setHasResolvedCourse] = useState(false);
-
-  const [userId, setUserId] = useState("guest");
-  const [isAuthed, setIsAuthed] = useState(false);
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    const loadCourse = () => {
-      setCourse(getCourseBySlug(slug));
-      setHasResolvedCourse(true);
-    };
-    loadCourse();
-    window.addEventListener(teacherCoursesUpdatedEventName, loadCourse);
-    return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourse);
-  }, [slug]);
-
-  useEffect(() => {
-    const client = supabaseBrowser();
-    if (!client) return;
-
-    client.auth.getUser().then(({ data }) => {
-      const nextId = data.user?.id ?? "guest";
-      setUserId(nextId);
-      setIsAuthed(Boolean(data.user));
-    });
-
-    const { data } = client.auth.onAuthStateChange((_event, session) => {
-      setUserId(session?.user?.id ?? "guest");
-      setIsAuthed(Boolean(session?.user));
-    });
-
-    return () => data.subscription.unsubscribe();
-  }, []);
-
-  useEffect(() => {
-    if (!course) return;
-    const load = () => setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
-    load();
-    window.addEventListener(progressUpdatedEventName, load);
-    return () => window.removeEventListener(progressUpdatedEventName, load);
-  }, [course, userId]);
-
-  if (!course && !hasResolvedCourse) {
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-        <p className="text-slate-600">Loading course...</p>
-      </div>
-    );
+function getText(value: unknown): string {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "object") {
+    const record = value as Record<string, unknown>;
+    if (typeof record.en === "string") return record.en;
+    if (typeof record.es === "string") return record.es;
   }
+  return "";
+}
 
-  if (!course) {
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-        <h1 className="text-2xl font-bold text-slate-900">Course not found</h1>
-        <p className="mt-2 text-slate-600">The requested course slug does not exist in mock data.</p>
-        <Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/courses">
-          Back to courses
-        </Link>
-      </div>
-    );
-  }
+const levelLabel = (level: string) => {
+  if (level === "BEGINNER") return "Beginner";
+  if (level === "INTERMEDIATE") return "Intermediate";
+  if (level === "ADVANCED") return "Advanced";
+  return level;
+};
+
+type PageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export default async function CourseDetailPage({ params }: PageProps) {
+  const { slug } = await params;
+
+  const course = await db.course.findFirst({
+    where: { slug, status: "PUBLISHED" },
+    include: {
+      author: { select: { fullName: true } },
+      modules: {
+        orderBy: { orderIndex: "asc" },
+        include: {
+          lessons: {
+            orderBy: { orderIndex: "asc" },
+            select: { id: true, title: true, estimatedDuration: true },
+          },
+        },
+      },
+      _count: { select: { enrollments: true } },
+    },
+  });
+
+  if (!course) notFound();
+
+  const user = await requireUser();
+  const isAuthed = Boolean(user?.id);
+
+  const title = getText(course.title) || "Untitled course";
+  const summary = getText(course.description) || "";
+
+  const lessons = course.modules.flatMap((m) =>
+    m.lessons.map((l) => ({
+      id: l.id,
+      title: getText(l.title) || "Untitled lesson",
+      minutes: Math.ceil((l.estimatedDuration ?? 0) / 60),
+    })),
+  );
+  const lessonsCount = lessons.length;
 
   const redirect = `/courses/${course.slug}/learn`;
   const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(redirect)}`;
 
+  const learningOutcomes = [
+    "Understand key legal vocabulary in context",
+    "Apply contract and case analysis patterns",
+    "Improve professional written legal communication",
+  ];
+
   return (
-    <div className="grid gap-7 lg:grid-cols-[1.9fr_0.9fr]">
-      <section className="pt-1">
-        <Link className="inline-flex items-center gap-2 text-lg text-slate-600 hover:text-brand md:text-2xl" href="/courses">
-          <span className="text-xl">{"<-"}</span>
-          Back to Courses
-        </Link>
+    <div className="acve-page">
+      <section className="acve-panel overflow-hidden p-0">
+        <div className="grid gap-0 lg:grid-cols-[1.6fr_0.9fr]">
+          <div className="acve-section-base">
+            <Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand" href="/courses">
+              <span>{"<-"}</span>
+              Back to Courses
+            </Link>
 
-        <div className="mt-6 flex items-center gap-3 text-base text-slate-600 md:text-lg">
-          <span className="rounded-full bg-accent px-4 py-1 text-base font-semibold text-white">{course.level}</span>
-          <span>Contract Law</span>
-        </div>
+            <div className="mt-4 flex flex-wrap items-center gap-2 text-sm text-slate-600">
+              <span className="rounded-full bg-accent px-3 py-1 font-semibold text-white">
+                {levelLabel(course.level)}
+              </span>
+              <span className="rounded-full border border-slate-300 bg-white px-3 py-1 font-semibold">
+                {course.status.toLowerCase()}
+              </span>
+              <span className="rounded-full border border-slate-300 bg-white px-3 py-1">
+                {lessonsCount} lessons
+              </span>
+            </div>
 
-        <h1 className="acve-heading mt-5 text-4xl leading-tight md:text-7xl">{course.title}</h1>
-        <p className="mt-5 max-w-5xl text-xl leading-relaxed text-slate-600 md:text-4xl">{course.summary}</p>
+            <h1 className="mt-4 text-4xl font-semibold leading-tight text-[#1f2a3a] md:text-5xl">{title}</h1>
+            <p className="mt-3 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">{summary}</p>
 
-        <div className="mt-7 flex flex-wrap items-center gap-5 text-lg text-slate-600 md:text-3xl">
-          <span className="font-semibold text-slate-800">Rating {course.rating.toFixed(1)}</span>
-          <span>{course.students.toLocaleString()} students</span>
-          <span>{course.weeks} weeks</span>
-          <span>{course.lessonsCount} lessons</span>
+            <div className="mt-5 grid gap-3 sm:grid-cols-3">
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Students</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">
+                  {course._count.enrollments.toLocaleString()}
+                </p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Lessons</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">{lessonsCount}</p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructor</p>
+                <p className="mt-1 text-lg font-semibold text-slate-900">
+                  {course.author.fullName || "ACVE Team"}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <aside className="border-t border-slate-200 bg-slate-50/80 p-6 lg:border-l lg:border-t-0">
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500">What you will learn</h2>
+            <ul className="mt-3 space-y-2">
+              {learningOutcomes.map((item) => (
+                <li key={item} className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </aside>
         </div>
       </section>
 
-      <aside className="acve-panel space-y-5 p-7">
-        <h2 className="text-2xl text-slate-700 md:text-4xl">Your Progress</h2>
-        <div className="flex items-end justify-between">
-          <p className="text-4xl font-semibold text-brand md:text-6xl">{progress}%</p>
-          <p className="text-lg text-slate-600 md:text-3xl">
-            {Math.round((progress / 100) * course.lessonsCount)}/{course.lessonsCount} lessons
-          </p>
-        </div>
-        <ProgressBar value={progress} />
-        <div className="border-t border-slate-200 pt-5 text-lg text-slate-700 md:text-3xl">
-          <p className="mb-1 text-base text-slate-500 md:text-2xl">Instructor</p>
-          <p className="mb-4 font-semibold text-slate-800">{course.instructor}</p>
-          <p className="mb-1 text-base text-slate-500 md:text-2xl">Duration</p>
-          <p className="mb-4 font-semibold text-slate-800">{course.weeks} weeks</p>
-          <p className="mb-1 text-base text-slate-500 md:text-2xl">Level</p>
-          <p className="font-semibold text-slate-800">{course.level}</p>
-        </div>
-        {isAuthed ? (
-          <Link className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105" href={redirect}>
-            Start Course
-          </Link>
-        ) : (
-          <Link className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105" href={loginUrl}>
-            Login to start
-          </Link>
-        )}
-      </aside>
+      <section className="grid gap-5 lg:grid-cols-[1.6fr_0.85fr]">
+        <article className="acve-panel acve-section-base">
+          <h2 className="text-2xl font-semibold text-slate-900">Course structure preview</h2>
+          <div className="mt-4 grid gap-2">
+            {lessons.slice(0, 5).map((lesson, index) => (
+              <div
+                key={lesson.id}
+                className="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm"
+              >
+                <span className="font-medium text-slate-800">
+                  Lesson {index + 1}: {lesson.title}
+                </span>
+                <span className="text-slate-500">{lesson.minutes} min</span>
+              </div>
+            ))}
+            {lessons.length === 0 && (
+              <p className="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
+                No lessons yet. Check back soon.
+              </p>
+            )}
+          </div>
+        </article>
+
+        <aside className="acve-panel space-y-5 p-6">
+          <h2 className="text-2xl text-slate-700 md:text-4xl">Course details</h2>
+          <div className="border-t border-slate-200 pt-5 text-lg text-slate-700 md:text-3xl">
+            <p className="mb-1 text-base text-slate-500 md:text-2xl">Instructor</p>
+            <p className="mb-4 font-semibold text-slate-800">{course.author.fullName || "ACVE Team"}</p>
+            <p className="mb-1 text-base text-slate-500 md:text-2xl">Level</p>
+            <p className="mb-4 font-semibold text-slate-800">{levelLabel(course.level)}</p>
+            <p className="mb-1 text-base text-slate-500 md:text-2xl">Lessons</p>
+            <p className="font-semibold text-slate-800">{lessonsCount}</p>
+          </div>
+          {isAuthed ? (
+            <Link
+              className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
+              href={redirect}
+            >
+              Start Course
+            </Link>
+          ) : (
+            <Link
+              className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
+              href={loginUrl}
+            >
+              Login to start
+            </Link>
+          )}
+        </aside>
+      </section>
     </div>
   );
 }

app/(public)/courses/page.tsx

@@ -1,115 +1,93 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
 import CourseCard from "@/components/CourseCard";
-import Tabs from "@/components/Tabs";
-import { getAllCourses } from "@/lib/data/courseCatalog";
-import {
-  getCourseProgressPercent,
-  progressUpdatedEventName,
-} from "@/lib/progress/localProgress";
-import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
-import { supabaseBrowser } from "@/lib/supabase/browser";
-import type { Course, CourseLevel } from "@/types/course";
+import { db } from "@/lib/prisma";
 
-const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
-
-export default function CoursesPage() {
-  const [activeLevel, setActiveLevel] = useState<CourseLevel>("Beginner");
-  const [userId, setUserId] = useState("guest");
-  const [progressBySlug, setProgressBySlug] = useState<Record<string, number>>({});
-  const [courses, setCourses] = useState<Course[]>(() => getAllCourses());
-
-  const counts = useMemo(
-    () =>
-      levels.reduce(
-        (acc, level) => {
-          acc[level] = courses.filter((course) => course.level === level).length;
-          return acc;
+export default async function CoursesPage() {
+  const courses = await db.course.findMany({
+    where: {
+      status: "PUBLISHED",
+    },
+    include: {
+      author: {
+        select: {
+          fullName: true,
         },
-        {} as Record<CourseLevel, number>,
-      ),
-    [courses],
-  );
+      },
+      modules: {
+        select: {
+          _count: {
+            select: {
+              lessons: true,
+            },
+          },
+        },
+      },
+      _count: {
+        select: {
+          enrollments: true,
+        },
+      },
+    },
+    orderBy: {
+      updatedAt: "desc",
+    },
+  });
 
-  useEffect(() => {
-    const loadCourses = () => {
-      setCourses(getAllCourses());
-    };
-
-    loadCourses();
-    window.addEventListener(teacherCoursesUpdatedEventName, loadCourses);
-    return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourses);
-  }, []);
-
-  useEffect(() => {
-    const client = supabaseBrowser();
-    if (!client) return;
-
-    client.auth.getUser().then(({ data }) => {
-      setUserId(data.user?.id ?? "guest");
-    });
-
-    const { data } = client.auth.onAuthStateChange((_event, session) => {
-      setUserId(session?.user?.id ?? "guest");
-    });
-
-    return () => data.subscription.unsubscribe();
-  }, []);
-
-  useEffect(() => {
-    const load = () => {
-      const nextProgress: Record<string, number> = {};
-      for (const course of courses) {
-        nextProgress[course.slug] = getCourseProgressPercent(userId, course.slug, course.lessons.length);
-      }
-      setProgressBySlug(nextProgress);
-    };
-
-    load();
-    window.addEventListener(progressUpdatedEventName, load);
-    window.addEventListener(teacherCoursesUpdatedEventName, load);
-    return () => {
-      window.removeEventListener(progressUpdatedEventName, load);
-      window.removeEventListener(teacherCoursesUpdatedEventName, load);
-    };
-  }, [courses, userId]);
-
-  const filteredCourses = useMemo(
-    () => courses.filter((course) => course.level === activeLevel),
-    [activeLevel, courses],
+  const totalLessons = courses.reduce(
+    (total, course) => total + course.modules.reduce((courseTotal, module) => courseTotal + module._count.lessons, 0),
+    0,
   );
 
   return (
-    <div className="space-y-8">
-      <section className="acve-panel p-5">
-        <div className="flex flex-wrap items-center gap-4">
-          <Tabs active={activeLevel} onChange={setActiveLevel} options={levels} />
-          <span className="text-base font-semibold text-slate-600">{counts[activeLevel]} courses in this level</span>
-        </div>
-      </section>
-
-      <section className="acve-panel px-6 py-8">
-        <div className="flex items-start gap-4">
-          <div className="mt-1 flex h-12 w-12 items-center justify-center rounded-xl bg-accent text-2xl font-semibold text-white">C</div>
-          <div>
-            <h1 className="text-3xl text-[#202a39] md:text-5xl">{activeLevel} Level Courses</h1>
-            <p className="mt-2 text-base text-slate-600 md:text-2xl">
-              {activeLevel === "Beginner"
-                ? "Perfect for those new to English law. Build a strong foundation with fundamental concepts and terminology."
-                : activeLevel === "Intermediate"
-                  ? "Deepen practical analysis skills with real-world drafting, contract review, and legal communication."
-                  : "Master complex legal reasoning and advanced writing for high-impact legal practice."}
+    <div className="acve-page">
+      <section className="acve-panel overflow-hidden p-0">
+        <div className="grid gap-0 lg:grid-cols-[1.45fr_0.95fr]">
+          <div className="acve-section-base">
+            <p className="acve-pill mb-4 w-fit">Course Catalog</p>
+            <h1 className="text-3xl font-semibold leading-tight text-[#202a39] md:text-4xl">Build your legal English learning path</h1>
+            <p className="mt-3 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
+              Discover our published legal English courses and start with the path that matches your level.
             </p>
+            <div className="mt-5 grid gap-3 sm:grid-cols-3">
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Total Courses</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">{courses.length}</p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Published Lessons</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">{totalLessons}</p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructors</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">
+                  {new Set(courses.map((course) => course.author.fullName || "ACVE Team")).size}
+                </p>
+              </div>
+            </div>
           </div>
+
+          <aside className="border-t border-slate-200 bg-slate-50/80 p-5 lg:border-l lg:border-t-0">
+            <h2 className="text-base font-semibold text-slate-800">Open Access</h2>
+            <p className="mt-2 text-sm text-slate-600">
+              This catalog is public. Open any course card to visit the landing page and enroll.
+            </p>
+          </aside>
         </div>
       </section>
 
-      <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
-        {filteredCourses.map((course) => (
-          <CourseCard key={course.slug} course={course} progress={progressBySlug[course.slug] ?? 0} />
-        ))}
-      </div>
+      {courses.length === 0 ? (
+        <section className="acve-panel acve-section-base">
+          <div className="rounded-xl border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center">
+            <h2 className="text-2xl font-semibold text-slate-900">Coming Soon</h2>
+            <p className="mt-2 text-slate-600">We are preparing new courses. Please check back shortly.</p>
+          </div>
+        </section>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {courses.map((course) => (
+            <CourseCard key={course.slug} course={course} />
+          ))}
+        </div>
+      )}
     </div>
   );
 }

app/(public)/page.tsx

@@ -10,22 +10,22 @@ const highlights = [
 
 export default function HomePage() {
   return (
-    <div className="space-y-8">
-      <section className="acve-panel relative overflow-hidden p-6 md:p-10">
-        <div className="grid items-start gap-8 lg:grid-cols-[1.1fr_0.9fr]">
+    <div className="acve-page">
+      <section className="acve-panel relative overflow-hidden p-5 md:p-8">
+        <div className="grid items-start gap-6 lg:grid-cols-[1.15fr_0.85fr]">
           <div>
-            <p className="acve-pill mb-5 w-fit text-base">
+            <p className="acve-pill mb-4 w-fit text-sm">
               <span className="mr-2 text-accent">*</span>
               Professional Legal Education
             </p>
-            <h1 className="acve-heading text-4xl leading-[1.1] md:text-7xl">Learn English Law with Confidence</h1>
-            <p className="mt-5 max-w-2xl text-lg leading-relaxed text-slate-600 md:text-2xl">
+            <h1 className="acve-heading text-4xl leading-tight md:text-5xl">Learn English Law with Confidence</h1>
+            <p className="mt-3 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
               Courses, case studies, and guided practice designed for Latin American professionals and students.
             </p>
-            <ul className="mt-7 space-y-3">
+            <ul className="mt-5 grid gap-2 sm:grid-cols-2">
               {highlights.map((item) => (
-                <li key={item} className="flex items-start gap-3 text-base text-slate-700 md:text-xl">
-                  <span className="mt-1 flex h-7 w-7 items-center justify-center rounded-full border-2 border-accent text-base text-accent">
+                <li key={item} className="flex items-start gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
+                  <span className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full border border-accent text-xs text-accent">
                     v
                   </span>
                   {item}
@@ -33,11 +33,11 @@ export default function HomePage() {
               ))}
             </ul>
 
-            <div className="mt-8 flex flex-wrap gap-3">
-              <Link className="acve-button-primary px-8 py-3 text-lg font-semibold transition hover:brightness-105" href="/courses">
+            <div className="mt-6 flex flex-wrap gap-2">
+              <Link className="acve-button-primary px-6 py-2 text-sm font-semibold transition hover:brightness-105" href="/courses">
                 Start Learning
               </Link>
-              <Link className="acve-button-secondary px-8 py-3 text-lg font-semibold transition hover:bg-brand-soft" href="/courses">
+              <Link className="acve-button-secondary px-6 py-2 text-sm font-semibold transition hover:bg-brand-soft" href="/courses">
                 Explore Courses
               </Link>
             </div>
@@ -47,29 +47,29 @@ export default function HomePage() {
             <div className="overflow-hidden rounded-3xl border border-slate-300 bg-white shadow-sm">
               <Image
                 alt="ACVE legal library"
-                className="h-[420px] w-full object-cover object-right md:h-[600px]"
+                className="h-[360px] w-full object-cover object-right md:h-[460px]"
                 height={900}
                 priority
                 src="/images/hero-reference.png"
                 width={700}
               />
             </div>
-            <div className="absolute bottom-5 left-5 right-5 rounded-2xl border border-slate-300 bg-white px-5 py-4 shadow-sm">
+            <div className="absolute bottom-4 left-4 right-4 rounded-2xl border border-slate-300 bg-white px-4 py-3 shadow-sm">
               <p className="text-sm font-semibold uppercase tracking-wide text-accent">AI</p>
-              <p className="text-xl font-semibold text-slate-800">Legal Assistant Ready</p>
-              <p className="text-base text-slate-500">Ask me anything about English Law</p>
+              <p className="text-lg font-semibold text-slate-800">Legal Assistant Ready</p>
+              <p className="text-sm text-slate-500">Ask me anything about English Law</p>
             </div>
           </div>
         </div>
 
-        <div className="mt-10 grid gap-4 border-t border-slate-200 pt-7 text-center text-sm font-semibold uppercase tracking-wide text-slate-500 md:grid-cols-3">
-          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-4 hover:border-brand hover:text-brand" href="/courses">
+        <div className="mt-6 grid gap-3 border-t border-slate-200 pt-5 text-center text-xs font-semibold uppercase tracking-wide text-slate-500 md:grid-cols-3">
+          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/courses">
             Browse courses
           </Link>
-          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-4 hover:border-brand hover:text-brand" href="/case-studies">
+          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/case-studies">
             Read case studies
           </Link>
-          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-4 hover:border-brand hover:text-brand" href="/practice">
+          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/practice">
             Practice and exercises
           </Link>
         </div>

app/(public)/practice/page.tsx

@@ -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>