First commit

app/(auth)/auth/callback/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { supabaseServer } from "@/lib/supabase/server";
+
+export async function GET(request: Request) {
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get("code");
+  const redirectTo = requestUrl.searchParams.get("redirectTo") ?? "/courses";
+
+  const supabase = await supabaseServer();
+  if (code && supabase) {
+    await supabase.auth.exchangeCodeForSession(code);
+  }
+
+  return NextResponse.redirect(new URL(redirectTo, requestUrl.origin));
+}

app/(auth)/auth/login/page.tsx

@@ -0,0 +1,15 @@
+import LoginForm from "@/components/auth/LoginForm";
+
+type LoginPageProps = {
+  searchParams: Promise<{
+    redirectTo?: string | string[];
+  }>;
+};
+
+export default async function LoginPage({ searchParams }: LoginPageProps) {
+  const params = await searchParams;
+  const redirectValue = params.redirectTo;
+  const redirectTo = Array.isArray(redirectValue) ? redirectValue[0] : redirectValue;
+
+  return <LoginForm redirectTo={redirectTo ?? "/courses"} />;
+}

app/(auth)/auth/signup/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { supabaseBrowser } from "@/lib/supabase/browser";
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const client = supabaseBrowser();
+    if (!client) {
+      setLoading(false);
+      setError("Supabase is not configured. Add NEXT_PUBLIC_SUPABASE_* to .env.local.");
+      return;
+    }
+
+    const { error: signUpError } = await client.auth.signUp({ email, password });
+    setLoading(false);
+
+    if (signUpError) {
+      setError(signUpError.message);
+      return;
+    }
+
+    router.push("/courses");
+  };
+
+  return (
+    <div className="acve-panel mx-auto w-full max-w-md p-6">
+      <h1 className="acve-heading text-4xl">Sign up</h1>
+      <p className="mt-1 text-base text-slate-600">Create your account to unlock course player and practice.</p>
+
+      <form className="mt-5 space-y-4" onSubmit={onSubmit}>
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Email</span>
+          <input
+            className="w-full rounded-xl border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            type="email"
+            value={email}
+          />
+        </label>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Password</span>
+          <input
+            className="w-full rounded-xl border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            minLength={6}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            type="password"
+            value={password}
+          />
+        </label>
+
+        {error ? <p className="text-sm text-red-600">{error}</p> : null}
+
+        <button
+          className="acve-button-primary w-full px-4 py-2 font-semibold hover:brightness-105 disabled:opacity-60"
+          disabled={loading}
+          type="submit"
+        >
+          {loading ? "Creating account..." : "Create account"}
+        </button>
+      </form>
+
+      <p className="mt-4 text-sm text-slate-600">
+        Already have an account?{" "}
+        <Link className="font-semibold text-brand" href="/auth/login">
+          Login
+        </Link>
+      </p>
+    </div>
+  );
+}

app/(protected)/courses/[slug]/learn/page.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import LessonRow from "@/components/LessonRow";
+import ProgressBar from "@/components/ProgressBar";
+import { getCourseBySlug } from "@/lib/data/courseCatalog";
+import {
+  getCourseProgress,
+  getCourseProgressPercent,
+  markLessonComplete,
+  setLastLesson,
+} from "@/lib/progress/localProgress";
+import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
+import { supabaseBrowser } from "@/lib/supabase/browser";
+import type { Course, Lesson } from "@/types/course";
+
+const lessonContent = (lesson: Lesson) => {
+  if (lesson.type === "video") {
+    return (
+      <div className="space-y-3">
+        <div className="aspect-video rounded-2xl border border-slate-300 bg-[#f6f6f7] p-4">
+          <div className="flex h-full items-center justify-center rounded-xl border-2 border-dashed border-slate-300 text-lg text-slate-500">
+            Video placeholder ({lesson.minutes} min)
+          </div>
+        </div>
+        {lesson.videoUrl ? (
+          <p className="text-sm text-slate-500">
+            Demo video URL: <span className="font-medium text-slate-700">{lesson.videoUrl}</span>
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (lesson.type === "reading") {
+    return (
+      <div className="rounded-2xl border border-slate-300 bg-white p-5">
+        <p className="text-lg leading-9 text-slate-700">
+          Reading placeholder content for lesson: {lesson.title}. Replace with full lesson text and references in Phase 2.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-2xl border border-slate-300 bg-white p-5">
+      <p className="text-lg text-slate-700">Interactive placeholder for lesson: {lesson.title}.</p>
+      <button className="acve-button-secondary mt-3 px-3 py-1.5 text-sm" type="button">
+        Start interactive
+      </button>
+    </div>
+  );
+};
+
+export default function CourseLearnPage() {
+  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 [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
+  const [completedLessonIds, setCompletedLessonIds] = useState<string[]>([]);
+  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 }) => {
+      setUserId(data.user?.id ?? "guest");
+      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 progressState = getCourseProgress(userId, course.slug);
+    const fallback = course.lessons[0]?.id ?? null;
+    setSelectedLessonId(progressState.lastLessonId ?? fallback);
+    setCompletedLessonIds(progressState.completedLessonIds);
+    setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
+  }, [course, userId]);
+
+  const completionSet = new Set(completedLessonIds);
+
+  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>
+    );
+  }
+
+  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 selectedLesson =
+    course.lessons.find((lesson) => lesson.id === selectedLessonId) ?? course.lessons[0];
+
+  if (!selectedLesson) {
+    return (
+      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h1 className="text-2xl font-bold text-slate-900">No lessons available</h1>
+        <p className="mt-2 text-slate-600">This course currently has no lessons configured.</p>
+        <Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href={`/courses/${course.slug}`}>
+          Back to course
+        </Link>
+      </div>
+    );
+  }
+
+  const isLocked = (lesson: Lesson) => !lesson.isPreview && !isAuthed;
+
+  const onSelectLesson = (lesson: Lesson) => {
+    if (isLocked(lesson)) return;
+    setSelectedLessonId(lesson.id);
+    setLastLesson(userId, course.slug, lesson.id);
+  };
+
+  const onMarkComplete = () => {
+    if (!selectedLesson) return;
+    markLessonComplete(userId, course.slug, selectedLesson.id);
+    const progressState = getCourseProgress(userId, course.slug);
+    setCompletedLessonIds(progressState.completedLessonIds);
+    setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
+  };
+
+  return (
+    <div className="space-y-6">
+      <header className="acve-panel p-6">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand md:text-xl" href={`/courses/${course.slug}`}>
+              <span className="text-base">{"<-"}</span>
+              Back to Course
+            </Link>
+            <h1 className="mt-2 text-3xl text-[#222b39] md:text-5xl">Course Content</h1>
+          </div>
+          <div className="min-w-[240px]">
+            <ProgressBar value={progress} label={`${progress}% complete`} />
+          </div>
+        </div>
+      </header>
+
+      <section className="space-y-3">
+        {course.lessons.map((lesson, index) => (
+          <div key={lesson.id} className="space-y-1">
+            <LessonRow
+              index={index}
+              isActive={lesson.id === selectedLesson?.id}
+              isLocked={isLocked(lesson)}
+              lesson={lesson}
+              onSelect={() => onSelectLesson(lesson)}
+            />
+            {completionSet.has(lesson.id) ? (
+              <p className="pl-2 text-sm font-medium text-[#2f9d73]">Completed</p>
+            ) : null}
+          </div>
+        ))}
+      </section>
+
+      <section className="acve-panel space-y-4 p-6">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h2 className="text-2xl text-[#222b39] md:text-4xl">{selectedLesson.title}</h2>
+            <p className="mt-1 text-base text-slate-600">
+              {selectedLesson.type} | {selectedLesson.minutes} min
+            </p>
+          </div>
+          <button
+            className="acve-button-primary px-4 py-2 text-sm font-semibold hover:brightness-105"
+            onClick={onMarkComplete}
+            type="button"
+          >
+            Mark complete
+          </button>
+        </div>
+
+        {lessonContent(selectedLesson)}
+      </section>
+    </div>
+  );
+}

app/(protected)/practice/[slug]/page.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import ProgressBar from "@/components/ProgressBar";
+import { getPracticeBySlug, mockPracticeModules } from "@/lib/data/mockPractice";
+
+export default function PracticeExercisePage() {
+  const params = useParams<{ slug: string }>();
+  const practiceModule = getPracticeBySlug(params.slug);
+
+  const [index, setIndex] = useState(0);
+  const [score, setScore] = useState(0);
+  const [finished, setFinished] = useState(false);
+  const [selected, setSelected] = useState<number | null>(null);
+
+  if (!practiceModule) {
+    return (
+      <div className="acve-panel p-6">
+        <h1 className="text-2xl font-bold text-slate-900">Practice module not found</h1>
+        <p className="mt-2 text-slate-600">The requested practice slug does not exist in mock data.</p>
+        <Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/practice">
+          Back to practice
+        </Link>
+      </div>
+    );
+  }
+
+  if (!practiceModule.isInteractive || !practiceModule.questions?.length) {
+    return (
+      <div className="acve-panel p-6">
+        <h1 className="text-2xl font-bold text-slate-900">{practiceModule.title}</h1>
+        <p className="mt-2 text-slate-600">This practice module is scaffolded and will be enabled in a later iteration.</p>
+      </div>
+    );
+  }
+
+  const total = practiceModule.questions.length;
+  const current = practiceModule.questions[index];
+  const progress = Math.round((index / total) * 100);
+
+  const pick = (choiceIndex: number) => {
+    if (selected !== null) return;
+    setSelected(choiceIndex);
+    if (choiceIndex === current.answerIndex) {
+      setScore((value) => value + 1);
+    }
+  };
+
+  const next = () => {
+    if (index + 1 >= total) {
+      setFinished(true);
+      return;
+    }
+    setIndex((value) => value + 1);
+    setSelected(null);
+  };
+
+  const restart = () => {
+    setIndex(0);
+    setScore(0);
+    setSelected(null);
+    setFinished(false);
+  };
+
+  if (finished) {
+    return (
+      <div className="mx-auto max-w-3xl rounded-2xl border border-slate-300 bg-white p-8 text-center shadow-sm">
+        <h1 className="acve-heading text-5xl">Exercise complete</h1>
+        <p className="mt-2 text-3xl text-slate-700">
+          Final score: {score}/{total}
+        </p>
+        <button className="acve-button-primary mt-6 px-6 py-2 text-lg font-semibold hover:brightness-105" onClick={restart} type="button">
+          Restart
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <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>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {mockPracticeModules.map((module, moduleIndex) => {
+          const isActive = module.slug === practiceModule.slug;
+          return (
+            <div
+              key={module.slug}
+              className={`rounded-2xl border p-6 ${
+                isActive ? "border-brand bg-white shadow-sm" : "border-slate-300 bg-white"
+              }`}
+            >
+              <div className="mb-2 text-3xl text-brand md:text-4xl">{moduleIndex === 0 ? "A/" : moduleIndex === 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>
+            </div>
+          );
+        })}
+      </section>
+
+      <section className="acve-panel p-4">
+        <div className="mb-3 flex items-center justify-between gap-4">
+          <p className="text-xl font-semibold text-slate-700">
+            Question {index + 1} / {total}
+          </p>
+          <p className="text-xl font-semibold text-[#222a38] md:text-2xl">Score: {score}/{total}</p>
+        </div>
+        <ProgressBar value={progress} />
+      </section>
+
+      <section className="acve-panel p-6">
+        <div className="rounded-2xl bg-[#f6f6f8] px-6 py-10 text-center">
+          <p className="text-lg text-slate-500 md:text-2xl">Spanish Term</p>
+          <h2 className="acve-heading mt-2 text-3xl md:text-6xl">{current.prompt.replace("Spanish term: ", "")}</h2>
+        </div>
+
+        <div className="mt-6 grid gap-3">
+          {current.choices.map((choice, choiceIndex) => {
+            const isPicked = selected === choiceIndex;
+            const isCorrect = choiceIndex === current.answerIndex;
+            const stateClass =
+              selected === null
+                ? "border-slate-300 hover:bg-slate-50"
+                : isCorrect
+                  ? "border-[#2f9d73] bg-[#edf9f4]"
+                  : isPicked
+                    ? "border-[#bf3c5f] bg-[#fff1f4]"
+                    : "border-slate-300";
+
+            return (
+              <button
+                key={choice}
+                className={`rounded-xl border px-4 py-3 text-left text-base text-slate-800 md:text-xl ${stateClass}`}
+                onClick={() => pick(choiceIndex)}
+                type="button"
+              >
+                {choice}
+              </button>
+            );
+          })}
+        </div>
+
+        <button
+          className="acve-button-primary mt-6 px-6 py-2 text-lg font-semibold hover:brightness-105 disabled:opacity-50"
+          disabled={selected === null}
+          onClick={next}
+          type="button"
+        >
+          {index + 1 === total ? "Finish" : "Next question"}
+        </button>
+      </section>
+    </div>
+  );
+}

app/(protected)/teacher/courses/[slug]/edit/page.tsx

@@ -0,0 +1,13 @@
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import TeacherEditCourseForm from "@/components/teacher/TeacherEditCourseForm";
+
+type TeacherEditCoursePageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export default async function TeacherEditCoursePage({ params }: TeacherEditCoursePageProps) {
+  await requireTeacher();
+  const { slug } = await params;
+
+  return <TeacherEditCourseForm slug={slug} />;
+}

app/(protected)/teacher/courses/[slug]/lessons/new/page.tsx

@@ -0,0 +1,13 @@
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import TeacherNewLessonForm from "@/components/teacher/TeacherNewLessonForm";
+
+type TeacherNewLessonPageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export default async function TeacherNewLessonPage({ params }: TeacherNewLessonPageProps) {
+  await requireTeacher();
+  const { slug } = await params;
+
+  return <TeacherNewLessonForm slug={slug} />;
+}

app/(protected)/teacher/courses/new/page.tsx

@@ -0,0 +1,7 @@
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import TeacherNewCourseForm from "@/components/teacher/TeacherNewCourseForm";
+
+export default async function TeacherNewCoursePage() {
+  await requireTeacher();
+  return <TeacherNewCourseForm />;
+}

app/(protected)/teacher/page.tsx

@@ -0,0 +1,7 @@
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import TeacherDashboardClient from "@/components/teacher/TeacherDashboardClient";
+
+export default async function TeacherDashboardPage() {
+  await requireTeacher();
+  return <TeacherDashboardClient />;
+}

app/(public)/assistant/page.tsx

@@ -0,0 +1,11 @@
+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>
+      <AssistantDrawer mode="page" />
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { getCaseStudyBySlug } from "@/lib/data/mockCaseStudies";
+
+export default function CaseStudyDetailPage() {
+  const params = useParams<{ slug: string }>();
+  const caseStudy = getCaseStudyBySlug(params.slug);
+
+  if (!caseStudy) {
+    return (
+      <div className="acve-panel p-6">
+        <h1 className="text-2xl font-bold text-slate-900">Case study not found</h1>
+        <p className="mt-2 text-slate-600">The requested case study slug does not exist in mock data.</p>
+        <Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/case-studies">
+          Back to case studies
+        </Link>
+      </div>
+    );
+  }
+
+  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>
+      </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>
+        <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>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-t border-slate-200 pt-5">
+        <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>
+      </section>
+    </article>
+  );
+}

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>
+  );
+}

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

@@ -0,0 +1,135 @@
+"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";
+
+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>
+    );
+  }
+
+  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 redirect = `/courses/${course.slug}/learn`;
+  const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(redirect)}`;
+
+  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="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>
+
+        <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>
+
+        <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>
+      </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>
+    </div>
+  );
+}

app/(public)/courses/page.tsx

@@ -0,0 +1,115 @@
+"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";
+
+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;
+        },
+        {} as Record<CourseLevel, number>,
+      ),
+    [courses],
+  );
+
+  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],
+  );
+
+  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."}
+            </p>
+          </div>
+        </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>
+    </div>
+  );
+}

app/(public)/page.tsx

@@ -0,0 +1,79 @@
+import Image from "next/image";
+import Link from "next/link";
+
+const highlights = [
+  "Courses designed for Latin American professionals",
+  "Real English law case studies and analysis",
+  "AI-powered legal assistant available 24/7",
+  "Interactive practice exercises and assessments",
+];
+
+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>
+            <p className="acve-pill mb-5 w-fit text-base">
+              <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">
+              Courses, case studies, and guided practice designed for Latin American professionals and students.
+            </p>
+            <ul className="mt-7 space-y-3">
+              {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">
+                    v
+                  </span>
+                  {item}
+                </li>
+              ))}
+            </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">
+                Start Learning
+              </Link>
+              <Link className="acve-button-secondary px-8 py-3 text-lg font-semibold transition hover:bg-brand-soft" href="/courses">
+                Explore Courses
+              </Link>
+            </div>
+          </div>
+
+          <div className="relative">
+            <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]"
+                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">
+              <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>
+            </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">
+            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">
+            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">
+            Practice and exercises
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}

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>
+  );
+}

app/globals.css

@@ -0,0 +1,85 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+  --acve-bg: #f3f3f5;
+  --acve-panel: #ffffff;
+  --acve-ink: #273040;
+  --acve-muted: #667085;
+  --acve-line: #d8dbe2;
+  --acve-brand: #98143f;
+  --acve-brand-soft: #f8eef2;
+  --acve-gold: #d4af37;
+  --acve-heading-font: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
+  --acve-body-font: "Segoe UI", "Trebuchet MS", "Verdana", sans-serif;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  background: radial-gradient(circle at top right, #fcfcfd 0%, #f5f5f7 55%, #f0f0f2 100%);
+  color: var(--acve-ink);
+  font-family: var(--acve-body-font);
+  text-rendering: geometricPrecision;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--acve-heading-font);
+}
+
+::selection {
+  background: #f2d6df;
+  color: #421020;
+}
+
+.acve-shell {
+  background: linear-gradient(180deg, #f7f7f8 0%, #f2f3f5 100%);
+}
+
+.acve-panel {
+  border: 1px solid var(--acve-line);
+  background: var(--acve-panel);
+  border-radius: 16px;
+}
+
+.acve-heading {
+  color: var(--acve-brand);
+  font-family: var(--acve-heading-font);
+  letter-spacing: 0.01em;
+}
+
+.acve-pill {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--acve-line);
+  border-radius: 9999px;
+  background: #fafafa;
+  color: #384253;
+  padding: 8px 14px;
+  font-size: 0.95rem;
+}
+
+.acve-button-primary {
+  background: var(--acve-brand);
+  color: #ffffff;
+  border-radius: 12px;
+  border: 1px solid var(--acve-brand);
+}
+
+.acve-button-secondary {
+  border: 1px solid var(--acve-brand);
+  color: var(--acve-brand);
+  background: #ffffff;
+  border-radius: 12px;
+}

app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import AssistantDrawer from "@/components/AssistantDrawer";
+
+export const metadata: Metadata = {
+  title: "ACVE",
+  description: "ACVE Coursera/Udemy-style legal learning MVP",
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="acve-shell flex min-h-screen flex-col">
+          <Navbar />
+          <main className="mx-auto w-full max-w-[1300px] flex-1 px-4 py-6 md:py-8">{children}</main>
+          <Footer />
+        </div>
+        <AssistantDrawer />
+      </body>
+    </html>
+  );
+}