First commit

2026-02-07 18:08:42 -06:00
commit b7a86a2d1c
57 changed files with 9188 additions and 0 deletions
--- a/.env.local.example
+++ b/.env.local.example
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_SUPABASE_URL=YOUR_URL
+NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_ANON_KEY
+TEACHER_EMAILS=teacher@example.com
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.next
+out
+dist
+.env.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
--- a/app/(auth)/auth/callback/route.ts
+++ b/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));
+}
--- a/app/(auth)/auth/login/page.tsx
+++ b/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"} />;
+}
--- a/app/(auth)/auth/signup/page.tsx
+++ b/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>
+  );
+}
--- a/app/(protected)/courses/[slug]/learn/page.tsx
+++ b/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>
+  );
+}
--- a/app/(protected)/practice/[slug]/page.tsx
+++ b/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>
+  );
+}
--- a/app/(protected)/teacher/courses/[slug]/edit/page.tsx
+++ b/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} />;
+}
--- a/app/(protected)/teacher/courses/[slug]/lessons/new/page.tsx
+++ b/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} />;
+}
--- a/app/(protected)/teacher/courses/new/page.tsx
+++ b/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 />;
+}
--- a/app/(protected)/teacher/page.tsx
+++ b/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 />;
+}
--- a/app/(public)/assistant/page.tsx
+++ b/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>
+  );
+}
--- a/app/(public)/case-studies/[slug]/page.tsx
+++ b/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>
+  );
+}
--- a/app/(public)/case-studies/page.tsx
+++ b/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>
+  );
+}
--- a/app/(public)/courses/[slug]/page.tsx
+++ b/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>
+  );
+}
--- a/app/(public)/courses/page.tsx
+++ b/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>
+  );
+}
--- a/app/(public)/page.tsx
+++ b/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>
+  );
+}
--- a/app/(public)/practice/page.tsx
+++ b/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>
+  );
+}
--- a/app/globals.css
+++ b/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;
+}
--- a/app/layout.tsx
+++ b/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>
+  );
+}
--- a/components/AssistantDrawer.tsx
+++ b/components/AssistantDrawer.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { FormEvent, useEffect, useMemo, useState } from "react";
+
+type AssistantMessage = {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+};
+
+type AssistantDrawerProps = {
+  mode?: "global" | "page";
+};
+
+export const ASSISTANT_TOGGLE_EVENT = "acve:assistant-toggle";
+
+export default function AssistantDrawer({ mode = "global" }: AssistantDrawerProps) {
+  const [isOpen, setIsOpen] = useState(mode === "page");
+  const [messages, setMessages] = useState<AssistantMessage[]>([
+    {
+      id: "seed",
+      role: "assistant",
+      content: "Ask about courses, case studies, or practice. Demo responses are mocked for now.",
+    },
+  ]);
+  const [input, setInput] = useState("");
+
+  useEffect(() => {
+    if (mode === "page") {
+      return;
+    }
+
+    const onToggle = () => setIsOpen((current) => !current);
+    window.addEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
+    return () => window.removeEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
+  }, [mode]);
+
+  const panelClasses = useMemo(() => {
+    if (mode === "page") {
+      return "mx-auto flex h-[70vh] max-w-3xl flex-col rounded-2xl border border-slate-300 bg-white shadow-xl";
+    }
+
+    return `fixed right-0 top-0 z-50 h-screen w-full max-w-md border-l border-slate-300 bg-white shadow-2xl transition-transform ${
+      isOpen ? "translate-x-0" : "translate-x-full"
+    }`;
+  }, [isOpen, mode]);
+
+  const send = (event: FormEvent) => {
+    event.preventDefault();
+    const trimmed = input.trim();
+    if (!trimmed) return;
+
+    const now = Date.now().toString();
+    setMessages((current) => [
+      ...current,
+      { id: `u-${now}`, role: "user", content: trimmed },
+      { id: `a-${now}`, role: "assistant", content: "(Demo) Assistant not connected yet." },
+    ]);
+    setInput("");
+  };
+
+  if (mode === "global" && !isOpen) {
+    return (
+      <aside className={panelClasses}>
+        <div />
+      </aside>
+    );
+  }
+
+  return (
+    <aside className={panelClasses}>
+      <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
+        <h2 className="acve-heading text-2xl">AI Assistant</h2>
+        {mode === "global" ? (
+          <button
+            className="rounded-md border border-slate-300 px-2 py-1 text-sm text-slate-600 hover:bg-slate-50"
+            onClick={() => setIsOpen(false)}
+            type="button"
+          >
+            Close
+          </button>
+        ) : null}
+      </div>
+
+      <div className="flex-1 space-y-3 overflow-y-auto p-4">
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`max-w-[90%] rounded-lg px-3 py-2 text-sm ${
+              message.role === "user"
+                ? "ml-auto bg-brand text-white"
+                : "mr-auto border border-slate-200 bg-slate-50 text-slate-800"
+            }`}
+          >
+            {message.content}
+          </div>
+        ))}
+      </div>
+
+      <form className="border-t border-slate-200 p-3" onSubmit={send}>
+        <div className="flex gap-2">
+          <input
+            className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand"
+            onChange={(event) => setInput(event.target.value)}
+            placeholder="Type your message..."
+            value={input}
+          />
+          <button className="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
+            Send
+          </button>
+        </div>
+      </form>
+    </aside>
+  );
+}
--- a/components/CourseCard.tsx
+++ b/components/CourseCard.tsx
@@ -0,0 +1,43 @@
+import Link from "next/link";
+import type { Course } from "@/types/course";
+import ProgressBar from "@/components/ProgressBar";
+
+type CourseCardProps = {
+  course: Course;
+  progress?: number;
+};
+
+export default function CourseCard({ course, progress = 0 }: CourseCardProps) {
+  return (
+    <Link
+      href={`/courses/${course.slug}`}
+      className="group flex h-full flex-col justify-between rounded-2xl border border-slate-300 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:border-brand/60"
+    >
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <span className="rounded-full bg-[#ead7a0] px-3 py-1 text-xs font-semibold text-[#8a6b00]">{course.level}</span>
+          <span className="text-sm font-semibold text-slate-700">Rating {course.rating.toFixed(1)}</span>
+        </div>
+        <h3 className="text-2xl leading-tight text-[#212937] md:text-4xl">{course.title}</h3>
+        <p className="text-base text-slate-600 md:text-lg">{course.summary}</p>
+      </div>
+
+      <div className="mt-5 border-t border-slate-200 pt-4 text-base text-slate-600 md:text-lg">
+        {progress > 0 ? (
+          <div className="mb-4">
+            <ProgressBar value={progress} label={`Progress ${progress}%`} />
+          </div>
+        ) : null}
+        <div className="mb-1 flex items-center justify-between">
+          <span>{course.weeks} weeks</span>
+          <span>{course.lessonsCount} lessons</span>
+        </div>
+        <div className="mb-3 flex items-center justify-between">
+          <span>{course.students.toLocaleString()} students</span>
+          <span className="text-brand transition-transform group-hover:translate-x-1">{">"}</span>
+        </div>
+        <div className="text-sm font-semibold text-slate-700 md:text-base">By {course.instructor}</div>
+      </div>
+    </Link>
+  );
+}
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -0,0 +1,10 @@
+export default function Footer() {
+  return (
+    <footer className="border-t border-slate-300 bg-[#f7f7f8]">
+      <div className="mx-auto flex w-full max-w-[1300px] items-center justify-between px-4 py-5 text-sm text-slate-600">
+        <span>ACVE Centro de Estudios</span>
+        <span>Professional legal English learning</span>
+      </div>
+    </footer>
+  );
+}
--- a/components/LessonRow.tsx
+++ b/components/LessonRow.tsx
@@ -0,0 +1,55 @@
+import type { Lesson } from "@/types/course";
+
+type LessonRowProps = {
+  index: number;
+  lesson: Lesson;
+  isActive: boolean;
+  isLocked: boolean;
+  onSelect: () => void;
+};
+
+const typeColors: Record<Lesson["type"], string> = {
+  video: "bg-[#ffecee] text-[#ca4d6f]",
+  reading: "bg-[#ecfbf4] text-[#2f9d73]",
+  interactive: "bg-[#eef4ff] text-[#6288da]",
+};
+
+export default function LessonRow({ index, lesson, isActive, isLocked, onSelect }: LessonRowProps) {
+  return (
+    <button
+      className={`w-full rounded-2xl border p-5 text-left transition ${
+        isActive ? "border-brand/60 bg-white shadow-sm" : "border-slate-200 bg-white hover:border-slate-300"
+      } ${isLocked ? "cursor-not-allowed opacity-60" : ""}`}
+      onClick={isLocked ? undefined : onSelect}
+      type="button"
+    >
+      <div className="flex items-center gap-4">
+        <div
+          className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-lg font-semibold ${
+            isActive ? "border-brand text-brand" : "border-slate-300 text-slate-500"
+          }`}
+        >
+          {isLocked ? "L" : index + 1}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <div className="mb-1 flex flex-wrap items-center gap-2 text-sm text-slate-500">
+            <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize ${typeColors[lesson.type]}`}>
+              {lesson.type}
+            </span>
+            <span>{lesson.minutes} min</span>
+            {isLocked ? <span className="text-slate-400">Locked</span> : null}
+            {lesson.isPreview ? <span className="text-[#8a6b00]">Preview</span> : null}
+          </div>
+          <p className="truncate text-lg text-[#222a38] md:text-2xl">{lesson.title}</p>
+        </div>
+
+        {isActive ? (
+          <div className="hidden h-20 w-36 overflow-hidden rounded-xl border border-slate-200 bg-[#202020] md:block">
+            <div className="flex h-full items-center justify-center text-2xl text-white/80">Play</div>
+          </div>
+        ) : null}
+      </div>
+    </button>
+  );
+}
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { ASSISTANT_TOGGLE_EVENT } from "@/components/AssistantDrawer";
+import { supabaseBrowser } from "@/lib/supabase/browser";
+
+type NavLink = {
+  href: string;
+  label: string;
+};
+
+const navLinks: NavLink[] = [
+  { href: "/", label: "Home" },
+  { href: "/courses", label: "Courses" },
+  { href: "/case-studies", label: "Case Studies" },
+  { href: "/practice", label: "Practice" },
+];
+
+export default function Navbar() {
+  const pathname = usePathname();
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+
+  const linkClass = (href: string) =>
+    pathname === href || pathname?.startsWith(`${href}/`)
+      ? "rounded-xl bg-brand px-5 py-3 text-sm font-semibold text-white shadow-sm"
+      : "rounded-xl px-5 py-3 text-sm font-semibold text-slate-700 transition-colors hover:text-brand";
+
+  useEffect(() => {
+    const client = supabaseBrowser();
+    if (!client) return;
+
+    let mounted = true;
+
+    client.auth.getUser().then(({ data }) => {
+      if (!mounted) return;
+      setUserEmail(data.user?.email ?? null);
+    });
+
+    const { data } = client.auth.onAuthStateChange((_event, session) => {
+      setUserEmail(session?.user?.email ?? null);
+    });
+
+    return () => {
+      mounted = false;
+      data.subscription.unsubscribe();
+    };
+  }, []);
+
+  const authNode = useMemo(() => {
+    if (!userEmail) {
+      return (
+        <div className="flex items-center gap-2 text-sm">
+          <Link className="rounded-lg border border-slate-300 px-3 py-1.5 hover:bg-slate-50" href="/auth/login">
+            Login
+          </Link>
+          <Link className="rounded-lg bg-brand px-3 py-1.5 text-white hover:brightness-105" href="/auth/signup">
+            Sign up
+          </Link>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex items-center gap-2 text-sm">
+        <span className="max-w-36 truncate text-slate-700">{userEmail}</span>
+        <button
+          className="rounded-lg border border-slate-300 px-3 py-1.5 hover:bg-slate-50"
+          onClick={async () => {
+            const client = supabaseBrowser();
+            if (!client) return;
+            await client.auth.signOut();
+          }}
+          type="button"
+        >
+          Logout
+        </button>
+      </div>
+    );
+  }, [userEmail]);
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-slate-300 bg-[#f7f7f8]/95 backdrop-blur">
+      <div className="mx-auto flex w-full max-w-[1300px] items-center justify-between gap-4 px-4 py-3">
+        <div className="flex items-center gap-8">
+          <Link className="flex items-center gap-3" href="/">
+            <div className="rounded-xl bg-[#edd7bc] p-1.5 shadow-sm">
+              <Image alt="ACVE logo" className="h-10 w-10 rounded-lg object-cover" height={40} src="/images/logo.png" width={40} />
+            </div>
+            <div>
+              <div className="text-2xl font-bold leading-none tracking-tight text-brand md:text-4xl">ACVE</div>
+              <div className="-mt-1 text-xs text-slate-500 md:text-sm">Centro de Estudios</div>
+            </div>
+          </Link>
+          <nav className="hidden items-center gap-1 text-sm lg:flex">
+            {navLinks.map((link) => (
+              <Link key={link.href} className={linkClass(link.href)} href={link.href}>
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            className="rounded-xl border border-accent bg-white px-4 py-2.5 text-sm font-semibold text-accent hover:bg-amber-50"
+            onClick={() => window.dispatchEvent(new Event(ASSISTANT_TOGGLE_EVENT))}
+            type="button"
+          >
+            AI Assistant
+          </button>
+          {authNode}
+        </div>
+      </div>
+      <nav className="mx-auto flex w-full max-w-[1300px] gap-2 overflow-x-auto px-4 pb-3 text-sm lg:hidden">
+        {navLinks.map((link) => (
+          <Link key={link.href} className={linkClass(link.href)} href={link.href}>
+            {link.label}
+          </Link>
+        ))}
+      </nav>
+    </header>
+  );
+}
--- a/components/ProgressBar.tsx
+++ b/components/ProgressBar.tsx
@@ -0,0 +1,17 @@
+type ProgressBarProps = {
+  value: number;
+  label?: string;
+};
+
+export default function ProgressBar({ value, label }: ProgressBarProps) {
+  const clamped = Math.max(0, Math.min(100, value));
+
+  return (
+    <div className="w-full">
+      {label ? <div className="mb-1 text-xs font-semibold text-slate-600">{label}</div> : null}
+      <div className="h-2.5 w-full rounded-full bg-[#ececef]">
+        <div className="h-2.5 rounded-full bg-brand transition-all" style={{ width: `${clamped}%` }} />
+      </div>
+    </div>
+  );
+}
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -0,0 +1,26 @@
+type TabsProps<T extends string> = {
+  options: readonly T[];
+  active: T;
+  onChange: (value: T) => void;
+};
+
+export default function Tabs<T extends string>({ options, active, onChange }: TabsProps<T>) {
+  return (
+    <div className="inline-flex flex-wrap gap-2">
+      {options.map((option) => (
+        <button
+          key={option}
+          className={`rounded-xl border px-6 py-3 text-base font-semibold transition-colors ${
+            option === active
+              ? "border-accent bg-accent text-white shadow-sm"
+              : "border-slate-300 bg-white text-slate-700 hover:border-slate-400"
+          }`}
+          onClick={() => onChange(option)}
+          type="button"
+        >
+          {option}
+        </button>
+      ))}
+    </div>
+  );
+}
--- a/components/auth/LoginForm.tsx
+++ b/components/auth/LoginForm.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { supabaseBrowser } from "@/lib/supabase/browser";
+
+type LoginFormProps = {
+  redirectTo: string;
+};
+
+const normalizeRedirect = (redirectTo: string) => {
+  if (!redirectTo.startsWith("/")) return "/courses";
+  return redirectTo;
+};
+
+export default function LoginForm({ redirectTo }: LoginFormProps) {
+  const router = useRouter();
+  const safeRedirect = normalizeRedirect(redirectTo);
+  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: signInError } = await client.auth.signInWithPassword({ email, password });
+    setLoading(false);
+
+    if (signInError) {
+      setError(signInError.message);
+      return;
+    }
+
+    router.push(safeRedirect);
+  };
+
+  return (
+    <div className="acve-panel mx-auto w-full max-w-md p-6">
+      <h1 className="acve-heading text-4xl">Login</h1>
+      <p className="mt-1 text-base text-slate-600">Sign in to access protected learning routes.</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"
+            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 ? "Signing in..." : "Login"}
+        </button>
+      </form>
+
+      <p className="mt-4 text-sm text-slate-600">
+        New here?{" "}
+        <Link className="font-semibold text-brand" href="/auth/signup">
+          Create an account
+        </Link>
+      </p>
+    </div>
+  );
+}
--- a/components/teacher/TeacherDashboardClient.tsx
+++ b/components/teacher/TeacherDashboardClient.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { getTeacherCourses, teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
+import type { Course } from "@/types/course";
+
+export default function TeacherDashboardClient() {
+  const [courses, setCourses] = useState<Course[]>([]);
+
+  useEffect(() => {
+    const load = () => setCourses(getTeacherCourses());
+    load();
+    window.addEventListener(teacherCoursesUpdatedEventName, load);
+    return () => window.removeEventListener(teacherCoursesUpdatedEventName, load);
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h1 className="text-3xl font-bold text-slate-900">Teacher Dashboard</h1>
+          <p className="text-slate-600">Manage teacher-created courses stored locally for MVP.</p>
+        </div>
+        <Link
+          className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105"
+          href="/teacher/courses/new"
+        >
+          Create course
+        </Link>
+      </div>
+
+      {courses.length === 0 ? (
+        <div className="rounded-xl border border-dashed border-slate-300 bg-white p-6 text-sm text-slate-600">
+          No teacher-created courses yet.
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {courses.map((course) => (
+            <article key={course.slug} className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wide text-brand">{course.level}</p>
+                  <h2 className="text-xl font-semibold text-slate-900">{course.title}</h2>
+                  <p className="mt-1 text-sm text-slate-600">{course.summary}</p>
+                </div>
+                <div className="flex gap-2">
+                  <Link
+                    className="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50"
+                    href={`/teacher/courses/${course.slug}/edit`}
+                  >
+                    Edit
+                  </Link>
+                  <Link
+                    className="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50"
+                    href={`/teacher/courses/${course.slug}/lessons/new`}
+                  >
+                    Add lesson
+                  </Link>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/components/teacher/TeacherEditCourseForm.tsx
+++ b/components/teacher/TeacherEditCourseForm.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import Link from "next/link";
+import { FormEvent, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { getTeacherCourseBySlug, teacherCoursesUpdatedEventName, updateTeacherCourse } from "@/lib/data/teacherCourses";
+import type { Course, CourseLevel } from "@/types/course";
+
+const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
+
+type TeacherEditCourseFormProps = {
+  slug: string;
+};
+
+export default function TeacherEditCourseForm({ slug }: TeacherEditCourseFormProps) {
+  const router = useRouter();
+  const [course, setCourse] = useState<Course | null>(null);
+  const [title, setTitle] = useState("");
+  const [level, setLevel] = useState<CourseLevel>("Beginner");
+  const [summary, setSummary] = useState("");
+  const [instructor, setInstructor] = useState("");
+  const [weeks, setWeeks] = useState(4);
+  const [rating, setRating] = useState(5);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    const load = () => {
+      const found = getTeacherCourseBySlug(slug) ?? null;
+      setCourse(found);
+      if (!found) return;
+      setTitle(found.title);
+      setLevel(found.level);
+      setSummary(found.summary);
+      setInstructor(found.instructor);
+      setWeeks(found.weeks);
+      setRating(found.rating);
+    };
+
+    load();
+    window.addEventListener(teacherCoursesUpdatedEventName, load);
+    return () => window.removeEventListener(teacherCoursesUpdatedEventName, load);
+  }, [slug]);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (!course) return;
+
+    updateTeacherCourse(course.slug, {
+      title: title.trim(),
+      level,
+      summary: summary.trim(),
+      instructor: instructor.trim(),
+      weeks: Math.max(1, weeks),
+      rating: Math.min(5, Math.max(0, rating)),
+    });
+    setSaved(true);
+    window.setTimeout(() => setSaved(false), 1200);
+  };
+
+  if (!course) {
+    return (
+      <div className="mx-auto max-w-2xl space-y-3 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h1 className="text-2xl font-bold text-slate-900">Teacher course not found</h1>
+        <p className="text-slate-600">This editor only works for courses created in the teacher area.</p>
+        <Link className="inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/teacher">
+          Back to dashboard
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-5">
+      <form className="space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
+        <h1 className="text-2xl font-bold text-slate-900">Edit Course</h1>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Title</span>
+          <input
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setTitle(event.target.value)}
+            value={title}
+          />
+        </label>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Level</span>
+          <select
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setLevel(event.target.value as CourseLevel)}
+            value={level}
+          >
+            {levels.map((item) => (
+              <option key={item} value={item}>
+                {item}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Summary</span>
+          <textarea
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setSummary(event.target.value)}
+            rows={3}
+            value={summary}
+          />
+        </label>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          <label className="block">
+            <span className="mb-1 block text-sm text-slate-700">Instructor</span>
+            <input
+              className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+              onChange={(event) => setInstructor(event.target.value)}
+              value={instructor}
+            />
+          </label>
+
+          <label className="block">
+            <span className="mb-1 block text-sm text-slate-700">Weeks</span>
+            <input
+              className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+              min={1}
+              onChange={(event) => setWeeks(Number(event.target.value))}
+              type="number"
+              value={weeks}
+            />
+          </label>
+
+          <label className="block">
+            <span className="mb-1 block text-sm text-slate-700">Rating (0-5)</span>
+            <input
+              className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+              max={5}
+              min={0}
+              onChange={(event) => setRating(Number(event.target.value))}
+              step={0.1}
+              type="number"
+              value={rating}
+            />
+          </label>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
+            Save changes
+          </button>
+          {saved ? <span className="text-sm font-medium text-emerald-700">Saved</span> : null}
+          <button
+            className="rounded-md border border-slate-300 px-4 py-2 text-sm hover:bg-slate-50"
+            onClick={() => router.push(`/teacher/courses/${course.slug}/lessons/new`)}
+            type="button"
+          >
+            Add lesson
+          </button>
+        </div>
+      </form>
+
+      <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h2 className="text-lg font-semibold text-slate-900">Lessons</h2>
+        <div className="mt-3 space-y-2">
+          {course.lessons.map((lesson) => (
+            <div key={lesson.id} className="rounded-md border border-slate-200 p-3 text-sm">
+              <p className="font-medium text-slate-900">{lesson.title}</p>
+              <p className="text-slate-600">
+                {lesson.type} | {lesson.minutes} min {lesson.isPreview ? "| Preview" : ""}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
--- a/components/teacher/TeacherNewCourseForm.tsx
+++ b/components/teacher/TeacherNewCourseForm.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { useRouter } from "next/navigation";
+import { getAllCourseSlugs } from "@/lib/data/courseCatalog";
+import { createTeacherCourse } from "@/lib/data/teacherCourses";
+import type { CourseLevel } from "@/types/course";
+
+const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
+
+export default function TeacherNewCourseForm() {
+  const router = useRouter();
+  const [title, setTitle] = useState("");
+  const [level, setLevel] = useState<CourseLevel>("Beginner");
+  const [summary, setSummary] = useState("");
+  const [instructor, setInstructor] = useState("");
+  const [weeks, setWeeks] = useState(4);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+
+    const cleanTitle = title.trim();
+    const cleanSummary = summary.trim();
+    const cleanInstructor = instructor.trim();
+
+    if (!cleanTitle || !cleanSummary || !cleanInstructor) {
+      setError("Title, summary, and instructor are required.");
+      return;
+    }
+
+    const created = createTeacherCourse(
+      {
+        title: cleanTitle,
+        level,
+        summary: cleanSummary,
+        instructor: cleanInstructor,
+        weeks: Math.max(1, weeks),
+      },
+      getAllCourseSlugs(),
+    );
+
+    router.push(`/teacher/courses/${created.slug}/edit`);
+  };
+
+  return (
+    <form className="mx-auto max-w-2xl space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
+      <h1 className="text-2xl font-bold text-slate-900">Create Course</h1>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Title</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setTitle(event.target.value)}
+          value={title}
+        />
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Level</span>
+        <select
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setLevel(event.target.value as CourseLevel)}
+          value={level}
+        >
+          {levels.map((item) => (
+            <option key={item} value={item}>
+              {item}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Summary</span>
+        <textarea
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setSummary(event.target.value)}
+          rows={3}
+          value={summary}
+        />
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Instructor</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setInstructor(event.target.value)}
+          value={instructor}
+        />
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Weeks</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          min={1}
+          onChange={(event) => setWeeks(Number(event.target.value))}
+          type="number"
+          value={weeks}
+        />
+      </label>
+
+      {error ? <p className="text-sm text-red-600">{error}</p> : null}
+
+      <button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
+        Create course
+      </button>
+    </form>
+  );
+}
--- a/components/teacher/TeacherNewLessonForm.tsx
+++ b/components/teacher/TeacherNewLessonForm.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import Link from "next/link";
+import { FormEvent, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { addLessonToTeacherCourse, getTeacherCourseBySlug, teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
+import type { Course, LessonType } from "@/types/course";
+
+const lessonTypes: LessonType[] = ["video", "reading", "interactive"];
+
+type TeacherNewLessonFormProps = {
+  slug: string;
+};
+
+export default function TeacherNewLessonForm({ slug }: TeacherNewLessonFormProps) {
+  const router = useRouter();
+  const [course, setCourse] = useState<Course | null>(null);
+  const [title, setTitle] = useState("");
+  const [type, setType] = useState<LessonType>("video");
+  const [minutes, setMinutes] = useState(10);
+  const [isPreview, setIsPreview] = useState(false);
+  const [videoUrl, setVideoUrl] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const load = () => setCourse(getTeacherCourseBySlug(slug) ?? null);
+    load();
+    window.addEventListener(teacherCoursesUpdatedEventName, load);
+    return () => window.removeEventListener(teacherCoursesUpdatedEventName, load);
+  }, [slug]);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+
+    if (!course) {
+      setError("Teacher course not found.");
+      return;
+    }
+
+    if (!title.trim()) {
+      setError("Lesson title is required.");
+      return;
+    }
+
+    addLessonToTeacherCourse(course.slug, {
+      title: title.trim(),
+      type,
+      minutes: Math.max(1, minutes),
+      isPreview,
+      videoUrl: type === "video" ? videoUrl.trim() : undefined,
+    });
+
+    router.push(`/teacher/courses/${course.slug}/edit`);
+  };
+
+  if (!course) {
+    return (
+      <div className="mx-auto max-w-2xl space-y-3 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h1 className="text-2xl font-bold text-slate-900">Teacher course not found</h1>
+        <p className="text-slate-600">This lesson creator only works for courses created in the teacher area.</p>
+        <Link className="inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/teacher">
+          Back to dashboard
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <form className="mx-auto max-w-2xl space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
+      <h1 className="text-2xl font-bold text-slate-900">Add Lesson</h1>
+      <p className="text-sm text-slate-600">Course: {course.title}</p>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Lesson title</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setTitle(event.target.value)}
+          value={title}
+        />
+      </label>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Type</span>
+          <select
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setType(event.target.value as LessonType)}
+            value={type}
+          >
+            {lessonTypes.map((item) => (
+              <option key={item} value={item}>
+                {item}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Minutes</span>
+          <input
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            min={1}
+            onChange={(event) => setMinutes(Number(event.target.value))}
+            type="number"
+            value={minutes}
+          />
+        </label>
+      </div>
+
+      <label className="flex items-center gap-2 text-sm text-slate-700">
+        <input checked={isPreview} onChange={(event) => setIsPreview(event.target.checked)} type="checkbox" />
+        Mark as preview lesson
+      </label>
+
+      {type === "video" ? (
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Video URL (placeholder)</span>
+          <input
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setVideoUrl(event.target.value)}
+            placeholder="https://example.com/video"
+            value={videoUrl}
+          />
+        </label>
+      ) : null}
+
+      {error ? <p className="text-sm text-red-600">{error}</p> : null}
+
+      <button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
+        Save lesson
+      </button>
+    </form>
+  );
+}
--- a/lib/auth/requireTeacher.ts
+++ b/lib/auth/requireTeacher.ts
@@ -0,0 +1,26 @@
+import { redirect } from "next/navigation";
+import { requireUser } from "@/lib/auth/requireUser";
+
+const readTeacherEmails = (): string[] =>
+  (process.env.TEACHER_EMAILS ?? "")
+    .split(",")
+    .map((email) => email.trim().toLowerCase())
+    .filter(Boolean);
+
+export const requireTeacher = async () => {
+  const user = await requireUser("/teacher");
+  if (!user?.email) {
+    redirect("/");
+  }
+
+  const allowed = readTeacherEmails();
+  if (allowed.length === 0) {
+    redirect("/");
+  }
+
+  if (!allowed.includes(user.email.toLowerCase())) {
+    redirect("/");
+  }
+
+  return user;
+};
--- a/lib/auth/requireUser.ts
+++ b/lib/auth/requireUser.ts
@@ -0,0 +1,16 @@
+import { redirect } from "next/navigation";
+import { supabaseServer } from "@/lib/supabase/server";
+
+export const requireUser = async (redirectTo: string) => {
+  const supabase = await supabaseServer();
+  if (!supabase) {
+    return null;
+  }
+
+  const { data } = await supabase.auth.getUser();
+  if (!data.user) {
+    redirect(`/auth/login?redirectTo=${encodeURIComponent(redirectTo)}`);
+  }
+
+  return data.user;
+};
--- a/lib/data/courseCatalog.ts
+++ b/lib/data/courseCatalog.ts
@@ -0,0 +1,20 @@
+import { mockCourses } from "@/lib/data/mockCourses";
+import { getTeacherCourseBySlug, getTeacherCourses } from "@/lib/data/teacherCourses";
+import type { Course } from "@/types/course";
+
+export const getAllCourses = (): Course[] => {
+  const teacherCourses = getTeacherCourses();
+  if (teacherCourses.length === 0) return mockCourses;
+
+  const teacherSlugs = new Set(teacherCourses.map((course) => course.slug));
+  const baseCourses = mockCourses.filter((course) => !teacherSlugs.has(course.slug));
+  return [...baseCourses, ...teacherCourses];
+};
+
+export const getCourseBySlug = (slug: string): Course | undefined => {
+  const teacher = getTeacherCourseBySlug(slug);
+  if (teacher) return teacher;
+  return mockCourses.find((course) => course.slug === slug);
+};
+
+export const getAllCourseSlugs = (): string[] => getAllCourses().map((course) => course.slug);
--- a/lib/data/mockCaseStudies.ts
+++ b/lib/data/mockCaseStudies.ts
@@ -0,0 +1,37 @@
+import type { CaseStudy } from "@/types/caseStudy";
+
+export const mockCaseStudies: CaseStudy[] = [
+  {
+    slug: "acme-v-zenith",
+    title: "Acme v. Zenith: Non-Compete Enforcement",
+    citation: "2021 App. Ct. 402",
+    year: 2021,
+    summary: "Dispute over enforceability of a cross-state non-compete with broad scope language.",
+    level: "Intermediate",
+    topic: "Employment",
+    keyTerms: ["Reasonableness", "Geographic scope", "Public policy"],
+  },
+  {
+    slug: "state-v-garcia",
+    title: "State v. Garcia: Evidence Admissibility",
+    citation: "2019 Sup. Ct. 88",
+    year: 2019,
+    summary: "Examines when digital communications meet admissibility and chain-of-custody standards.",
+    level: "Advanced",
+    topic: "Criminal Procedure",
+    keyTerms: ["Authentication", "Hearsay exception", "Prejudice test"],
+  },
+  {
+    slug: "harbor-bank-v-orchid",
+    title: "Harbor Bank v. Orchid Labs",
+    citation: "2023 Com. Ct. 110",
+    year: 2023,
+    summary: "Breach of financing covenants and acceleration remedies in a distressed credit event.",
+    level: "Beginner",
+    topic: "Commercial",
+    keyTerms: ["Default", "Covenant breach", "Acceleration"],
+  },
+];
+
+export const getCaseStudyBySlug = (slug: string) =>
+  mockCaseStudies.find((caseStudy) => caseStudy.slug === slug);
--- a/lib/data/mockCourses.ts
+++ b/lib/data/mockCourses.ts
@@ -0,0 +1,84 @@
+import type { Course } from "@/types/course";
+
+export const mockCourses: Course[] = [
+  {
+    slug: "legal-english-foundations",
+    title: "Legal English Foundations",
+    level: "Beginner",
+    summary: "Build legal vocabulary, core writing patterns, and court terminology.",
+    rating: 4.8,
+    weeks: 4,
+    lessonsCount: 6,
+    students: 1240,
+    instructor: "Ana Morales, Esq.",
+    lessons: [
+      { id: "l1", title: "Introduction to Legal Registers", type: "video", minutes: 12, isPreview: true },
+      { id: "l2", title: "Contract Vocabulary Basics", type: "reading", minutes: 10 },
+      { id: "l3", title: "Clause Spotting Drill", type: "interactive", minutes: 15 },
+      { id: "l4", title: "Writing a Formal Email", type: "reading", minutes: 9 },
+      { id: "l5", title: "Courtroom Terminology", type: "video", minutes: 14 },
+      { id: "l6", title: "Final Vocabulary Check", type: "interactive", minutes: 18 },
+    ],
+  },
+  {
+    slug: "contract-analysis-practice",
+    title: "Contract Analysis Practice",
+    level: "Intermediate",
+    summary: "Analyze contract sections and identify risk-heavy clauses quickly.",
+    rating: 4.7,
+    weeks: 5,
+    lessonsCount: 7,
+    students: 820,
+    instructor: "Daniel Kim, LL.M.",
+    lessons: [
+      { id: "l1", title: "How to Read a Service Agreement", type: "video", minutes: 16, isPreview: true },
+      { id: "l2", title: "Indemnity Clauses", type: "reading", minutes: 12 },
+      { id: "l3", title: "Liability Cap Walkthrough", type: "video", minutes: 11 },
+      { id: "l4", title: "Negotiation Red Flags", type: "interactive", minutes: 17 },
+      { id: "l5", title: "Warranty Language", type: "reading", minutes: 8 },
+      { id: "l6", title: "Termination Mechanics", type: "video", minutes: 13 },
+      { id: "l7", title: "Mini Review Exercise", type: "interactive", minutes: 20 },
+    ],
+  },
+  {
+    slug: "litigation-brief-writing",
+    title: "Litigation Brief Writing",
+    level: "Advanced",
+    summary: "Craft persuasive briefs with strong authority usage and argument flow.",
+    rating: 4.9,
+    weeks: 6,
+    lessonsCount: 8,
+    students: 430,
+    instructor: "Priya Shah, J.D.",
+    lessons: [
+      { id: "l1", title: "Brief Structure and Strategy", type: "video", minutes: 19, isPreview: true },
+      { id: "l2", title: "Rule Synthesis", type: "reading", minutes: 14 },
+      { id: "l3", title: "Fact Framing Techniques", type: "video", minutes: 11 },
+      { id: "l4", title: "Citation Signals Deep Dive", type: "reading", minutes: 15 },
+      { id: "l5", title: "Counterargument Blocks", type: "interactive", minutes: 18 },
+      { id: "l6", title: "Oral Argument Prep", type: "video", minutes: 16 },
+      { id: "l7", title: "Editing for Precision", type: "interactive", minutes: 20 },
+      { id: "l8", title: "Submission Checklist", type: "reading", minutes: 9 },
+    ],
+  },
+  {
+    slug: "cross-border-ip-strategy",
+    title: "Cross-Border IP Strategy",
+    level: "Advanced",
+    summary: "Understand IP enforcement strategy across multiple jurisdictions.",
+    rating: 4.6,
+    weeks: 4,
+    lessonsCount: 5,
+    students: 290,
+    instructor: "Luca Bianchi, Counsel",
+    lessons: [
+      { id: "l1", title: "International IP Map", type: "video", minutes: 13, isPreview: true },
+      { id: "l2", title: "Venue and Jurisdiction", type: "reading", minutes: 11 },
+      { id: "l3", title: "Enforcement Cost Tradeoffs", type: "interactive", minutes: 14 },
+      { id: "l4", title: "Injunction Strategy", type: "video", minutes: 10 },
+      { id: "l5", title: "Portfolio Action Plan", type: "interactive", minutes: 17 },
+    ],
+  },
+];
+
+export const getCourseBySlug = (slug: string) => mockCourses.find((course) => course.slug === slug);
--- a/lib/data/mockPractice.ts
+++ b/lib/data/mockPractice.ts
@@ -0,0 +1,45 @@
+import type { PracticeModule } from "@/types/practice";
+
+export const mockPracticeModules: PracticeModule[] = [
+  {
+    slug: "translation",
+    title: "Legal Translation Challenge",
+    description: "Translate legal terms accurately in context with timed multiple-choice questions.",
+    isInteractive: true,
+    questions: [
+      {
+        id: "q1",
+        prompt: "Spanish term: incumplimiento contractual",
+        choices: ["Contractual compliance", "Breach of contract", "Contract interpretation", "Mutual assent"],
+        answerIndex: 1,
+      },
+      {
+        id: "q2",
+        prompt: "Spanish term: medida cautelar",
+        choices: ["Class action", "Summary judgment", "Injunctive relief", "Arbitration clause"],
+        answerIndex: 2,
+      },
+      {
+        id: "q3",
+        prompt: "Spanish term: fuerza mayor",
+        choices: ["Strict liability", "Force majeure", "Punitive damages", "Specific performance"],
+        answerIndex: 1,
+      },
+    ],
+  },
+  {
+    slug: "term-matching",
+    title: "Term Matching Game",
+    description: "Pair legal terms with practical definitions.",
+    isInteractive: false,
+  },
+  {
+    slug: "contract-clauses",
+    title: "Contract Clause Practice",
+    description: "Identify weak and risky clause drafting choices.",
+    isInteractive: false,
+  },
+];
+
+export const getPracticeBySlug = (slug: string) =>
+  mockPracticeModules.find((module) => module.slug === slug);
--- a/lib/data/teacherCourses.ts
+++ b/lib/data/teacherCourses.ts
@@ -0,0 +1,133 @@
+import type { Course, CourseLevel, Lesson } from "@/types/course";
+
+const STORAGE_KEY = "acve.teacher-courses.v1";
+const TEACHER_UPDATED_EVENT = "acve:teacher-courses-updated";
+
+export type TeacherCourseInput = {
+  title: string;
+  level: CourseLevel;
+  summary: string;
+  instructor: string;
+  weeks: number;
+};
+
+export type TeacherCoursePatch = Partial<Omit<Course, "slug" | "lessons">> & {
+  summary?: string;
+  title?: string;
+  level?: CourseLevel;
+  instructor?: string;
+  weeks?: number;
+};
+
+const isBrowser = () => typeof window !== "undefined";
+
+const readStore = (): Course[] => {
+  if (!isBrowser()) return [];
+  const raw = window.localStorage.getItem(STORAGE_KEY);
+  if (!raw) return [];
+
+  try {
+    return JSON.parse(raw) as Course[];
+  } catch {
+    return [];
+  }
+};
+
+const writeStore = (courses: Course[]) => {
+  if (!isBrowser()) return;
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(courses));
+  window.dispatchEvent(new Event(TEACHER_UPDATED_EVENT));
+};
+
+const slugify = (value: string) =>
+  value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9\s-]/g, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-");
+
+const lessonId = (index: number) => `lesson-${index}`;
+
+const normalizeCourse = (course: Course): Course => ({
+  ...course,
+  lessonsCount: course.lessons.length,
+});
+
+export const teacherCoursesUpdatedEventName = TEACHER_UPDATED_EVENT;
+
+export const getTeacherCourses = (): Course[] => readStore().map(normalizeCourse);
+
+export const getTeacherCourseBySlug = (slug: string): Course | undefined =>
+  getTeacherCourses().find((course) => course.slug === slug);
+
+export const ensureUniqueTeacherCourseSlug = (title: string, reservedSlugs: string[]) => {
+  const baseSlug = slugify(title) || "untitled-course";
+  let slug = baseSlug;
+  let index = 2;
+
+  const pool = new Set(reservedSlugs.map((item) => item.toLowerCase()));
+  while (pool.has(slug.toLowerCase())) {
+    slug = `${baseSlug}-${index}`;
+    index += 1;
+  }
+
+  return slug;
+};
+
+export const createTeacherCourse = (input: TeacherCourseInput, reservedSlugs: string[]) => {
+  const courses = getTeacherCourses();
+  const slug = ensureUniqueTeacherCourseSlug(input.title, reservedSlugs);
+
+  const starterLesson: Lesson = {
+    id: lessonId(1),
+    title: "Course introduction",
+    type: "video",
+    minutes: 8,
+    isPreview: true,
+    videoUrl: "https://example.com/video-placeholder",
+  };
+
+  const next: Course = {
+    slug,
+    title: input.title,
+    level: input.level,
+    summary: input.summary,
+    rating: 5,
+    weeks: Math.max(1, input.weeks),
+    lessonsCount: 1,
+    students: 0,
+    instructor: input.instructor,
+    lessons: [starterLesson],
+  };
+
+  writeStore([...courses, next]);
+  return next;
+};
+
+export const updateTeacherCourse = (slug: string, patch: TeacherCoursePatch) => {
+  const courses = getTeacherCourses();
+  const nextCourses = courses.map((course) =>
+    course.slug === slug ? normalizeCourse({ ...course, ...patch }) : course,
+  );
+  writeStore(nextCourses);
+  return nextCourses.find((course) => course.slug === slug);
+};
+
+export const addLessonToTeacherCourse = (slug: string, lesson: Omit<Lesson, "id">) => {
+  const courses = getTeacherCourses();
+  const nextCourses = courses.map((course) => {
+    if (course.slug !== slug) return course;
+    const nextLesson: Lesson = {
+      ...lesson,
+      id: lessonId(course.lessons.length + 1),
+    };
+    return normalizeCourse({
+      ...course,
+      lessons: [...course.lessons, nextLesson],
+    });
+  });
+
+  writeStore(nextCourses);
+  return nextCourses.find((course) => course.slug === slug);
+};
--- a/lib/progress/localProgress.ts
+++ b/lib/progress/localProgress.ts
@@ -0,0 +1,86 @@
+export type CourseProgress = {
+  lastLessonId: string | null;
+  completedLessonIds: string[];
+};
+
+const STORAGE_KEY = "acve.local-progress.v1";
+const PROGRESS_UPDATED_EVENT = "acve:progress-updated";
+
+type ProgressStore = Record<string, Record<string, CourseProgress>>;
+
+const defaultProgress: CourseProgress = {
+  lastLessonId: null,
+  completedLessonIds: [],
+};
+
+const isBrowser = () => typeof window !== "undefined";
+
+const readStore = (): ProgressStore => {
+  if (!isBrowser()) return {};
+
+  const raw = window.localStorage.getItem(STORAGE_KEY);
+  if (!raw) return {};
+
+  try {
+    return JSON.parse(raw) as ProgressStore;
+  } catch {
+    return {};
+  }
+};
+
+const writeStore = (store: ProgressStore) => {
+  if (!isBrowser()) return;
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(store));
+  window.dispatchEvent(new Event(PROGRESS_UPDATED_EVENT));
+};
+
+const getOrCreateProgress = (store: ProgressStore, userId: string, courseSlug: string) => {
+  if (!store[userId]) {
+    store[userId] = {};
+  }
+  if (!store[userId][courseSlug]) {
+    store[userId][courseSlug] = { ...defaultProgress };
+  }
+  return store[userId][courseSlug];
+};
+
+export const getCourseProgress = (userId: string, courseSlug: string): CourseProgress => {
+  const store = readStore();
+  return store[userId]?.[courseSlug] ?? { ...defaultProgress };
+};
+
+export const getCourseProgressPercent = (
+  userId: string,
+  courseSlug: string,
+  totalLessons: number,
+): number => {
+  if (totalLessons <= 0) return 0;
+  const progress = getCourseProgress(userId, courseSlug);
+  return Math.round((progress.completedLessonIds.length / totalLessons) * 100);
+};
+
+export const setLastLesson = (userId: string, courseSlug: string, lessonId: string) => {
+  const store = readStore();
+  const progress = getOrCreateProgress(store, userId, courseSlug);
+  progress.lastLessonId = lessonId;
+  writeStore(store);
+};
+
+export const markLessonComplete = (userId: string, courseSlug: string, lessonId: string) => {
+  const store = readStore();
+  const progress = getOrCreateProgress(store, userId, courseSlug);
+  if (!progress.completedLessonIds.includes(lessonId)) {
+    progress.completedLessonIds = [...progress.completedLessonIds, lessonId];
+  }
+  progress.lastLessonId = lessonId;
+  writeStore(store);
+};
+
+export const clearCourseProgress = (userId: string, courseSlug: string) => {
+  const store = readStore();
+  if (!store[userId]) return;
+  delete store[userId][courseSlug];
+  writeStore(store);
+};
+
+export const progressUpdatedEventName = PROGRESS_UPDATED_EVENT;
--- a/lib/supabase/browser.ts
+++ b/lib/supabase/browser.ts
@@ -0,0 +1,18 @@
+import { createClient, type SupabaseClient } from "@supabase/supabase-js";
+
+let browserClient: SupabaseClient | null = null;
+
+export const supabaseBrowser = (): SupabaseClient | null => {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!url || !anonKey) {
+    return null;
+  }
+
+  if (!browserClient) {
+    browserClient = createClient(url, anonKey);
+  }
+
+  return browserClient;
+};
--- a/lib/supabase/middleware.ts
+++ b/lib/supabase/middleware.ts
@@ -0,0 +1,49 @@
+import { NextResponse, type NextRequest } from "next/server";
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
+
+export type SessionSnapshot = {
+  response: NextResponse;
+  isAuthed: boolean;
+  userEmail: string | null;
+  isConfigured: boolean;
+};
+
+export const updateSession = async (req: NextRequest): Promise<SessionSnapshot> => {
+  const response = NextResponse.next({ request: req });
+
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  if (!url || !anonKey) {
+    return {
+      response,
+      isAuthed: false,
+      userEmail: null,
+      isConfigured: false,
+    };
+  }
+
+  const supabase = createServerClient(url, anonKey, {
+      cookies: {
+        getAll: () => req.cookies.getAll(),
+        setAll: (
+          cookiesToSet: Array<{
+            name: string;
+            value: string;
+            options?: CookieOptions;
+          }>,
+        ) => {
+          cookiesToSet.forEach(({ name, value, options }) => {
+            response.cookies.set(name, value, options);
+          });
+        },
+      },
+  });
+
+  const { data } = await supabase.auth.getUser();
+  return {
+    response,
+    isAuthed: Boolean(data?.user),
+    userEmail: data.user?.email ?? null,
+    isConfigured: true,
+  };
+};
--- a/lib/supabase/server.ts
+++ b/lib/supabase/server.ts
@@ -0,0 +1,36 @@
+import { cookies } from "next/headers";
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
+
+export const supabaseServer = async () => {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!url || !anonKey) {
+    return null;
+  }
+
+  const cookieStore = await cookies();
+
+  return createServerClient(url, anonKey, {
+    cookies: {
+      getAll() {
+        return cookieStore.getAll();
+      },
+      setAll(
+        cookiesToSet: Array<{
+          name: string;
+          value: string;
+          options?: CookieOptions;
+        }>,
+      ) {
+        try {
+          cookiesToSet.forEach(({ name, value, options }) => {
+            cookieStore.set(name, value, options);
+          });
+        } catch {
+          // Server Components may not be able to write cookies.
+        }
+      },
+    },
+  });
+};
--- a/middleware.ts
+++ b/middleware.ts
@@ -0,0 +1,45 @@
+import { NextResponse, type NextRequest } from "next/server";
+import { updateSession } from "@/lib/supabase/middleware";
+
+const isTeacherEmail = (email: string | null) => {
+  if (!email) return false;
+  const allowed = (process.env.TEACHER_EMAILS ?? "")
+    .split(",")
+    .map((value) => value.trim().toLowerCase())
+    .filter(Boolean);
+
+  if (allowed.length === 0) return false;
+  return allowed.includes(email.toLowerCase());
+};
+
+export async function middleware(req: NextRequest) {
+  const pathname = req.nextUrl.pathname;
+  const { response, isAuthed, userEmail, isConfigured } = await updateSession(req);
+
+  const isProtectedCoursePlayer = pathname.startsWith("/courses/") && pathname.includes("/learn");
+  const isProtectedPractice = pathname.startsWith("/practice/");
+  const isTeacherRoute = pathname.startsWith("/teacher");
+
+  if (!isConfigured) {
+    return response;
+  }
+
+  if ((isProtectedCoursePlayer || isProtectedPractice || isTeacherRoute) && !isAuthed) {
+    const redirectUrl = req.nextUrl.clone();
+    redirectUrl.pathname = "/auth/login";
+    redirectUrl.searchParams.set("redirectTo", pathname);
+    return NextResponse.redirect(redirectUrl);
+  }
+
+  if (isTeacherRoute && !isTeacherEmail(userEmail)) {
+    const redirectUrl = req.nextUrl.clone();
+    redirectUrl.pathname = "/";
+    return NextResponse.redirect(redirectUrl);
+  }
+
+  return response;
+}
+
+export const config = {
+  matcher: ["/courses/:path*", "/practice/:path*", "/teacher/:path*"],
+};
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/next.config.ts
+++ b/next.config.ts
@@ -0,0 +1,12 @@
+import type { NextConfig } from "next";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const nextConfig: NextConfig = {
+  outputFileTracingRoot: __dirname,
+};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "acve-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@supabase/ssr": "^0.5.2",
+    "@supabase/supabase-js": "^2.95.3",
+    "next": "^15.5.12",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^22.19.9",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.24",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "^15.5.12",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.9.3"
+  }
+}
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;
--- a/public/images/hero-reference.png
+++ b/public/images/hero-reference.png
--- a/public/images/logo.png
+++ b/public/images/logo.png
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,22 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        surface: "#f3f3f5",
+        ink: "#273040",
+        brand: "#98143f",
+        accent: "#d4af37",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
--- a/types/caseStudy.ts
+++ b/types/caseStudy.ts
@@ -0,0 +1,12 @@
+import type { CourseLevel } from "./course";
+
+export type CaseStudy = {
+  slug: string;
+  title: string;
+  citation: string;
+  year: number;
+  summary: string;
+  level: CourseLevel;
+  topic: string;
+  keyTerms: string[];
+};
--- a/types/course.ts
+++ b/types/course.ts
@@ -0,0 +1,24 @@
+export type CourseLevel = "Beginner" | "Intermediate" | "Advanced";
+export type LessonType = "video" | "reading" | "interactive";
+
+export type Lesson = {
+  id: string;
+  title: string;
+  type: LessonType;
+  minutes: number;
+  isPreview?: boolean;
+  videoUrl?: string;
+};
+
+export type Course = {
+  slug: string;
+  title: string;
+  level: CourseLevel;
+  summary: string;
+  rating: number;
+  weeks: number;
+  lessonsCount: number;
+  students: number;
+  instructor: string;
+  lessons: Lesson[];
+};
--- a/types/practice.ts
+++ b/types/practice.ts
@@ -0,0 +1,14 @@
+export type PracticeQuestion = {
+  id: string;
+  prompt: string;
+  choices: string[];
+  answerIndex: number;
+};
+
+export type PracticeModule = {
+  slug: string;
+  title: string;
+  description: string;
+  isInteractive: boolean;
+  questions?: PracticeQuestion[];
+};