diff --git a/frontend/src/app/admin/page.tsx b/frontend/src/app/admin/page.tsx
new file mode 100644
index 0000000..8feccff
--- /dev/null
+++ b/frontend/src/app/admin/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { Suspense } from "react";
+import { AdminStudio } from "@/components/admin-studio";
+
+export default function AdminPage() {
+  return (
+    <Suspense fallback={null}>
+      <AdminStudio />
+    </Suspense>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/apple-icon.png b/frontend/src/app/apple-icon.png
new file mode 100644
index 0000000..dec1f08
Binary files /dev/null and b/frontend/src/app/apple-icon.png differ
diff --git a/frontend/src/app/c/[id]/page.tsx b/frontend/src/app/c/[id]/page.tsx
new file mode 100644
index 0000000..f3abddc
--- /dev/null
+++ b/frontend/src/app/c/[id]/page.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { Loader2, Package } from "lucide-react";
+import { CertificateCard } from "@/components/certificate-card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { http, toUserError } from "@/lib/api";
+import { useAuth } from "@/lib/auth-store";
+import type { Certificate, CertificatePhysicalOrder, PhysicalCertSettings } from "@/lib/types";
+import { toast } from "@/components/providers";
+import { formatFaNumber } from "@/lib/utils";
+import { clampPhoneInput, normalizePhone, PHONE_INPUT_MAX_LEN } from "@/lib/validation";
+import { useEffect, useState } from "react";
+
+type PublicCertResponse = {
+  certificate: { publicId: string; fullName: string; issuedAt: string };
+  course: string;
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  requested: "درخواست‌شده — منتظر تأیید پرداخت",
+  paid: "پرداخت تأیید شد — در صف ارسال",
+  shipped: "ارسال شد",
+  cancelled: "لغو شده",
+};
+
+export default function CertificatePage() {
+  const params = useParams<{ id: string }>();
+  const publicId = params?.id ?? "";
+  const authUser = useAuth((s) => s.user);
+  const qc = useQueryClient();
+  const [requesting, setRequesting] = useState(false);
+  const [form, setForm] = useState({
+    recipientName: "",
+    phone: "",
+    address: "",
+    city: "",
+    postalCode: "",
+  });
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["certificate", publicId],
+    queryFn: () => http.get<PublicCertResponse>(`/api/certificates/${publicId}`),
+    enabled: !!publicId,
+    meta: { silentError: true },
+  });
+
+  const { data: mine } = useQuery({
+    queryKey: ["me", "certificate"],
+    queryFn: () =>
+      http.get<{
+        certificate: Certificate | null;
+        physicalOrder: CertificatePhysicalOrder | null;
+        physical: PhysicalCertSettings;
+      }>("/api/me/certificate"),
+    enabled: !!authUser,
+  });
+
+  const isOwner = !!authUser && mine?.certificate?.publicId === publicId;
+
+  useEffect(() => {
+    if (!isOwner || !authUser) return;
+    setForm((f) => ({
+      ...f,
+      recipientName: f.recipientName || authUser.name || "",
+      phone: f.phone || authUser.phone || "",
+    }));
+  }, [isOwner, authUser]);
+
+  const requestPhysical = async () => {
+    setRequesting(true);
+    try {
+      await http.post("/api/me/certificate/physical", {
+        ...form,
+        phone: normalizePhone(form.phone),
+      });
+      toast.success("درخواست ثبت شد — پس از واریز با ادمین هماهنگ کنید");
+      qc.invalidateQueries({ queryKey: ["me", "certificate"] });
+    } catch (e) {
+      toast.error(toUserError(e));
+    } finally {
+      setRequesting(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error || !data?.certificate) {
+    return (
+      <div className="mx-auto max-w-lg px-4 py-16 text-center">
+        <p className="text-lg font-bold">گواهینامه پیدا نشد</p>
+        <Button asChild className="mt-4" variant="outline">
+          <Link href="/">بازگشت</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const cert = data.certificate;
+  const order = isOwner ? mine?.physicalOrder : null;
+  const physical = isOwner ? mine?.physical : null;
+  const windowEndsAt = mine?.certificate?.issuedAt
+    ? new Date(mine.certificate.issuedAt).getTime() + (physical?.windowDays ?? 30) * 86400000
+    : 0;
+  const windowStillOpen = !windowEndsAt || Date.now() < windowEndsAt;
+  const windowOpen =
+    physical?.enabled &&
+    windowStillOpen &&
+    (!order || order.status === "cancelled") &&
+    !!mine?.certificate;
+
+  return (
+    <CertificateCard
+      cert={{
+        publicId: cert.publicId,
+        fullName: cert.fullName,
+        issuedAt: cert.issuedAt,
+        course: data.course,
+      }}
+      showOwnerLinks={!!authUser}
+    >
+      {isOwner && physical?.enabled && (
+        <div className="mt-8 space-y-3 border-t border-border pt-6">
+          <p className="flex items-center gap-2 text-sm font-bold">
+            <Package className="h-4 w-4" /> نسخه فیزیکی
+          </p>
+          <p className="text-xs text-muted-foreground">
+            قیمت حدودی {formatFaNumber(physical.priceIrr)} ریال · مهلت درخواست{" "}
+            {formatFaNumber(physical.windowDays)} روز از صدور
+            {windowEndsAt ? ` (تا ${new Date(windowEndsAt).toLocaleDateString("fa-IR")})` : ""}.
+            پرداخت آنلاین در سامانه نداریم. پس از واریز بیرونی با ادمین هماهنگ کنید تا وضعیت سفارش به‌روز شود.
+          </p>
+          {order && order.status !== "cancelled" ? (
+            <div className="space-y-2 rounded-xl border border-border bg-muted/30 p-3 text-sm">
+              <p>
+                وضعیت: <span className="font-medium">{STATUS_LABEL[order.status] ?? order.status}</span>
+              </p>
+              {order.trackingCode && (
+                <p className="font-mono text-xs" dir="ltr">
+                  کد پیگیری: {order.trackingCode}
+                </p>
+              )}
+              {order.city && (
+                <p className="text-xs text-muted-foreground">
+                  ارسال به {order.recipientName || "—"} · {order.city}
+                </p>
+              )}
+              {order.note && <p className="text-xs text-muted-foreground">یادداشت ادمین: {order.note}</p>}
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() =>
+                  window.dispatchEvent(new CustomEvent("pargar:chat", { detail: { open: true } }))
+                }
+              >
+                هماهنگی با تیم
+              </Button>
+            </div>
+          ) : windowOpen ? (
+            <div className="space-y-2">
+              <div className="grid gap-2 sm:grid-cols-2">
+                <Input
+                  placeholder="نام گیرنده"
+                  value={form.recipientName}
+                  onChange={(e) => setForm((f) => ({ ...f, recipientName: e.target.value }))}
+                />
+                <Input
+                  placeholder="موبایل"
+                  value={form.phone}
+                  onChange={(e) => setForm((f) => ({ ...f, phone: clampPhoneInput(e.target.value) }))}
+                  dir="ltr"
+                  inputMode="tel"
+                  maxLength={PHONE_INPUT_MAX_LEN}
+                  className="text-left"
+                />
+                <Input
+                  placeholder="شهر"
+                  value={form.city}
+                  onChange={(e) => setForm((f) => ({ ...f, city: e.target.value }))}
+                />
+                <Input
+                  placeholder="کد پستی"
+                  value={form.postalCode}
+                  onChange={(e) => setForm((f) => ({ ...f, postalCode: e.target.value }))}
+                  dir="ltr"
+                />
+              </div>
+              <textarea
+                className="min-h-[72px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                placeholder="آدرس کامل پستی"
+                value={form.address}
+                onChange={(e) => setForm((f) => ({ ...f, address: e.target.value }))}
+              />
+              <Button
+                size="sm"
+                disabled={requesting || !form.address.trim() || !form.city.trim()}
+                onClick={() => void requestPhysical()}
+              >
+                {requesting ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Package className="h-3.5 w-3.5" />}
+                ثبت درخواست نسخه فیزیکی
+              </Button>
+            </div>
+          ) : !windowStillOpen ? (
+            <p className="text-sm text-muted-foreground">مهلت درخواست نسخه فیزیکی به پایان رسیده است.</p>
+          ) : null}
+        </div>
+      )}
+    </CertificateCard>
+  );
+}
diff --git a/frontend/src/app/c/layout.tsx b/frontend/src/app/c/layout.tsx
new file mode 100644
index 0000000..f351d9c
--- /dev/null
+++ b/frontend/src/app/c/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+
+/** Certificate share links are unlisted — never index or follow. */
+export const metadata: Metadata = {
+  robots: {
+    index: false,
+    follow: false,
+    nocache: true,
+    noarchive: true,
+    nosnippet: true,
+    googleBot: {
+      index: false,
+      follow: false,
+      noimageindex: true,
+    },
+  },
+};
+
+export default function CertificateLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}
diff --git a/frontend/src/app/cap/page.tsx b/frontend/src/app/cap/page.tsx
new file mode 100644
index 0000000..ca192d2
--- /dev/null
+++ b/frontend/src/app/cap/page.tsx
@@ -0,0 +1,459 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Suspense, useEffect, useRef } from "react";
+import {
+  Award,
+  ArrowLeft,
+  BookOpenCheck,
+  CheckCircle2,
+  CalendarDays,
+  Flame,
+  Heart,
+  Lock,
+  MessageSquare,
+  Package,
+  PlayCircle,
+  Sparkles,
+  TrendingUp,
+  AlertTriangle,
+} from "lucide-react";
+import { SkillTree } from "@/components/skill-tree";
+import { Skeleton } from "@/components/ui/skeleton";
+import { http, toUserError } from "@/lib/api";
+import type { Certificate, CertificatePhysicalOrder, MeetingEvent, PhysicalCertSettings, TreeData, TreeLesson } from "@/lib/types";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/lib/auth-store";
+import { cn, formatFaNumber, formatStreakLabel } from "@/lib/utils";
+import { clampHearts, hasInfiniteHearts, INFINITE_HEARTS_LABEL, MAX_HEARTS } from "@/lib/hearts";
+import { toast } from "@/components/providers";
+
+export default function CapPage() {
+  return (
+    <Suspense fallback={<CapSkeleton />}>
+      <CapPageInner />
+    </Suspense>
+  );
+}
+
+function CapPageInner() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const user = useAuth((s) => s.user);
+  const qc = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["tree"],
+    queryFn: () => http.get<TreeData>("/api/tree"),
+    refetchInterval: 60_000,
+  });
+
+  const { data: eventsData } = useQuery({
+    queryKey: ["events", "upcoming-cap"],
+    queryFn: () => http.get<{ events: MeetingEvent[] }>("/api/events"),
+    staleTime: 60_000,
+  });
+
+  const allLessons = (data?.chapters ?? []).flatMap((ch) => ch.lessons ?? []);
+  const completedCount = allLessons.filter((l) => l.progress?.passedQuiz).length;
+  const curriculumDone = allLessons.length > 0 && completedCount === allLessons.length;
+
+  useEffect(() => {
+    const lesson = params.get("lesson");
+    if (lesson && rootRef.current) {
+      rootRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [params]);
+
+  const { data: certData } = useQuery({
+    queryKey: ["me", "certificate"],
+    queryFn: () =>
+      http.get<{
+        certificate: Certificate | null;
+        physicalOrder: CertificatePhysicalOrder | null;
+        physical: PhysicalCertSettings;
+      }>("/api/me/certificate"),
+    enabled: !!user && curriculumDone,
+  });
+
+  useEffect(() => {
+    if (!curriculumDone || !user) return;
+    void http
+      .post("/api/me/certificate/issue", {})
+      .then(() => qc.invalidateQueries({ queryKey: ["me", "certificate"] }))
+      .catch((e) => toast.error(toUserError(e, "صدور گواهینامه ممکن نشد")));
+  }, [curriculumDone, user, qc]);
+
+  if (isLoading) {
+    return <CapSkeleton />;
+  }
+
+  const me = data?.me;
+  const all = allLessons;
+  const lockedCount = all.filter((l) => l.locked).length;
+  const inProgress = all.filter(
+    (l) => !l.locked && !l.progress?.passedQuiz && (l.progress?.watchedPct ?? 0) > 0 && !l.progress?.quizUnlocked,
+  );
+  const readyQuiz = all.filter((l) => !l.locked && !l.progress?.passedQuiz && !!l.progress?.quizUnlocked);
+  const openAndNew = all.filter((l) => !l.locked && !l.progress?.passedQuiz);
+  const firstLocked = all.find((l) => l.locked);
+  const done = curriculumDone;
+
+  const pct = all.length ? Math.round((completedCount / all.length) * 100) : 0;
+  const hearts = clampHearts(me?.hearts ?? user?.hearts ?? MAX_HEARTS);
+  const lowHearts = !hasInfiniteHearts(user?.role) && hearts > 0 && hearts <= 1;
+  const nextEvent = (eventsData?.events ?? [])[0];
+  const physicalOpen =
+    done &&
+    certData?.physical?.enabled &&
+    !!certData.certificate &&
+    (!certData.physicalOrder || certData.physicalOrder.status === "cancelled") &&
+    (!certData.certificate.issuedAt ||
+      Date.now() <
+        new Date(certData.certificate.issuedAt).getTime() +
+          (certData.physical.windowDays || 30) * 24 * 60 * 60 * 1000);
+
+  const next = nextAction(inProgress, readyQuiz, openAndNew, firstLocked, done);
+
+  return (
+    <div className="space-y-8" ref={rootRef}>
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <p className="section-kicker">مسیر شما</p>
+          <h1 className="mt-2 text-3xl font-black tracking-tight sm:text-5xl">
+            درخت <span className="text-primary">مهارت</span>
+          </h1>
+          <p className="mt-2 max-w-xl text-sm text-muted-foreground">
+            الان روی گام بعدی تمرکز کنید — تماشا، آزمون، رویداد یا گواهینامه.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="inline-flex items-center gap-1.5 rounded-full bg-accent/10 px-3 py-1.5 text-sm font-bold text-accent">
+            <Flame className="h-4 w-4" /> {formatStreakLabel(me?.streak ?? user?.streakCurrent ?? 0)}
+          </span>
+          <span className="inline-flex items-center gap-1.5 rounded-full bg-gold/10 px-3 py-1.5 text-sm font-bold text-gold">
+            <Sparkles className="h-4 w-4" /> {formatFaNumber(me?.xp ?? user?.xp ?? 0)} امتیاز
+          </span>
+          <span
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-bold",
+              lowHearts ? "bg-destructive/15 text-destructive" : "bg-primary/10 text-primary",
+            )}
+          >
+            <Heart className="h-4 w-4 fill-current" />{" "}
+            {hasInfiniteHearts(user?.role)
+              ? `${INFINITE_HEARTS_LABEL} جان`
+              : `${formatFaNumber(hearts)} جان`}
+          </span>
+        </div>
+      </div>
+
+      {lowHearts && (
+        <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border-2 border-destructive/30 bg-destructive/5 px-5 py-4">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
+            <div>
+              <p className="text-sm font-extrabold text-destructive">فقط {formatFaNumber(hearts)} جان مانده</p>
+              <p className="text-xs text-muted-foreground">
+                یک اشتباه دیگر حساب را قفل می‌کند. قبل از آزمون مطمئن شوید؛ اگر گیر کردید با منتور حرف بزنید.
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              window.dispatchEvent(new CustomEvent("pargar:chat", { detail: { open: true } }))
+            }
+          >
+            <MessageSquare className="h-4 w-4" /> منتور
+          </Button>
+        </div>
+      )}
+
+      {done && (
+        <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border-2 border-primary/30 bg-primary/5 px-5 py-4">
+          <div>
+            <p className="text-sm font-extrabold">دوره را تمام کردید</p>
+            <p className="text-xs text-muted-foreground">
+              گواهینامه دیجیتال آماده است
+              {physicalOpen ? " — می‌توانید نسخه فیزیکی هم درخواست کنید." : "."}
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              onClick={() => {
+                const id = certData?.certificate?.publicId;
+                if (id) router.push(`/c/${id}`);
+                else {
+                  void http
+                    .post<{ certificate: { publicId: string } }>("/api/me/certificate/issue", {})
+                    .then((r) => {
+                      if (r.certificate?.publicId) router.push(`/c/${r.certificate.publicId}`);
+                    })
+                    .catch((e) => toast.error(toUserError(e, "صدور گواهینامه ممکن نشد")));
+                }
+              }}
+            >
+              <Award className="h-4 w-4" /> مشاهده گواهینامه
+            </Button>
+            {physicalOpen && certData?.certificate?.publicId && (
+              <Button variant="outline" onClick={() => router.push(`/c/${certData.certificate!.publicId}`)}>
+                <Package className="h-4 w-4" /> نسخه فیزیکی
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="grid gap-5 md:grid-cols-5">
+        <div className="rounded-2xl border-2 border-border bg-card p-5 shadow-offset-sm md:col-span-2">
+          <div className="flex items-center justify-between">
+            <p className="flex items-center gap-2 text-sm font-extrabold">
+              <TrendingUp className="h-4 w-4 text-primary" /> پیشرفت کل
+            </p>
+            <span className="text-2xl font-black tabular-nums text-primary">{pct}٪</span>
+          </div>
+          <div className="mt-3 h-3.5 w-full overflow-hidden rounded-full bg-muted">
+            <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${Math.max(pct, 3)}%` }} />
+          </div>
+          <div className="mt-4 grid grid-cols-3 gap-2 text-center">
+            <div className="rounded-xl bg-success/10 px-2 py-2.5">
+              <p className="text-lg font-black text-success">{completedCount}</p>
+              <p className="text-[11px] font-bold text-muted-foreground">تکمیل‌شده</p>
+            </div>
+            <div className="rounded-xl bg-primary/10 px-2 py-2.5">
+              <p className="text-lg font-black text-primary">{inProgress.length}</p>
+              <p className="text-[11px] font-bold text-muted-foreground">در جریان</p>
+            </div>
+            <div className="rounded-xl bg-muted px-2 py-2.5">
+              <p className="text-lg font-black text-muted-foreground">{lockedCount}</p>
+              <p className="text-[11px] font-bold text-muted-foreground">قفل‌شده</p>
+            </div>
+          </div>
+          <div className="mt-4 space-y-1.5">
+            {(data?.chapters ?? []).map((ch) => {
+              const chDone = ch.lessons.filter((l) => l.progress?.passedQuiz).length;
+              return (
+                <div key={ch.id} className="flex items-center justify-between text-xs">
+                  <span className="font-bold text-muted-foreground">{ch.title}</span>
+                  <span
+                    className={cn(
+                      "font-black tabular-nums",
+                      chDone === ch.lessons.length ? "text-success" : "text-foreground",
+                    )}
+                  >
+                    {chDone}/{ch.lessons.length}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+          {nextEvent && (
+            <button
+              type="button"
+              onClick={() => router.push("/unwrap?tab=events")}
+              className="mt-4 flex w-full items-start gap-2 rounded-xl border border-border/70 bg-muted/40 px-3 py-2.5 text-start transition hover:border-primary/40"
+            >
+              <CalendarDays className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+              <span className="min-w-0">
+                <span className="block text-[10px] font-extrabold text-primary">رویداد نزدیک</span>
+                <span className="block truncate text-xs font-bold">{nextEvent.title}</span>
+                <span className="block text-[10px] text-muted-foreground">
+                  {new Date(nextEvent.startsAt).toLocaleString("fa-IR")}
+                </span>
+              </span>
+            </button>
+          )}
+        </div>
+
+        <div
+          className={cn(
+            "flex flex-col justify-between rounded-2xl border-2 p-5 md:col-span-3",
+            next.locked
+              ? "border-border bg-muted/40"
+              : "border-primary/40 bg-primary/5"
+          )}
+        >
+          <p
+            className={cn(
+              "flex items-center gap-2 text-xs font-extrabold tracking-wider",
+              next.locked ? "text-muted-foreground" : "text-primary"
+            )}
+          >
+            {next.locked ? <Lock className="h-4 w-4" /> : <ZapIcon className="h-4 w-4" />}
+            {next.locked ? "هنوز قفل است" : "گام بعدی شما"}
+          </p>
+          <div className="mt-3 flex flex-1 flex-col items-start justify-center">
+            <h2 className="text-xl font-black leading-snug sm:text-2xl">{next.title}</h2>
+            <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{next.desc}</p>
+          </div>
+          <div className="mt-4 flex flex-wrap gap-2">
+            {next.cta ? (
+              <Button size="lg" onClick={() => router.push(next.cta!)} className="gap-2">
+                {next.icon} {next.label}
+              </Button>
+            ) : next.prereqId ? (
+              <Button size="lg" variant="secondary" onClick={() => router.push(`/player/${next.prereqId}`)} className="gap-2">
+                <PlayCircle className="h-5 w-5" /> رفتن به پیش‌نیاز
+              </Button>
+            ) : (
+              <div className="inline-flex items-center gap-2 rounded-xl bg-muted px-3.5 py-2.5 text-sm font-bold text-muted-foreground">
+                <Lock className="h-4 w-4" /> ابتدا درس پیش‌نیاز را کامل کنید
+              </div>
+            )}
+            <Button
+              size="lg"
+              variant="outline"
+              onClick={() =>
+                window.dispatchEvent(new CustomEvent("pargar:chat", { detail: { open: true } }))
+              }
+            >
+              <MessageSquare className="h-5 w-5" /> منتور
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {data && <SkillTree data={data} onSelect={(id) => router.push(`/player/${id}`)} />}
+
+      <div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-xs font-bold text-muted-foreground">
+        <span className="inline-flex items-center gap-1.5">
+          <CheckCircle2 className="h-4 w-4 text-success" /> تکمیل‌شده
+        </span>
+        <span className="inline-flex items-center gap-1.5">
+          <PlayCircle className="h-4 w-4 text-primary" /> در دسترس
+        </span>
+        <span className="inline-flex items-center gap-1.5">
+          <BookOpenCheck className="h-4 w-4 text-gold" /> آمادهٔ آزمون
+        </span>
+        <span className="inline-flex items-center gap-1.5">
+          <Lock className="h-4 w-4 text-muted-foreground" /> قفل‌شده
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function nextAction(
+  inProgress: TreeLesson[],
+  readyQuiz: TreeLesson[],
+  openAndNew: TreeLesson[],
+  firstLocked: TreeLesson | undefined,
+  done: boolean,
+) {
+  if (readyQuiz[0]) {
+    const lesson = readyQuiz[0];
+    return {
+      title: `آزمون «${lesson.title}» منتظر شماست`,
+      desc: "آموخته‌هایتان را محک بزنید؛ هر پاسخ اشتباه یک جان کم می‌کند.",
+      label: "شروع آزمون",
+      cta: `/quiz/${lesson.id}`,
+      icon: <BookOpenCheck className="h-5 w-5" />,
+      locked: false,
+      prereqId: null as number | null,
+    };
+  }
+  if (inProgress[0]) {
+    const lesson = inProgress[0];
+    const pct = Math.round(lesson.progress?.watchedPct ?? 0);
+    return {
+      title: `ادامهٔ تماشای «${lesson.title}»`,
+      desc: `${formatFaNumber(pct)}٪ تماشا شده — با رسیدن به آستانه، آزمون باز می‌شود.`,
+      label: "ادامهٔ تماشا",
+      cta: `/player/${lesson.id}`,
+      icon: <PlayCircle className="h-5 w-5" />,
+      locked: false,
+      prereqId: null as number | null,
+    };
+  }
+  if (openAndNew[0]) {
+    const lesson = openAndNew[0];
+    return {
+      title: `شروع «${lesson.title}»`,
+      desc: `${formatFaNumber(lesson.durationSeconds)} ثانیه تماشای تأییدشده · ${formatFaNumber(lesson.xpReward)} امتیاز پاداش در صورت تکمیل.`,
+      label: "شروع درس",
+      cta: `/player/${lesson.id}`,
+      icon: <PlayCircle className="h-5 w-5" />,
+      locked: false,
+      prereqId: null as number | null,
+    };
+  }
+  if (firstLocked) {
+    return {
+      title: `«${firstLocked.title}» قفل است`,
+      desc: "بعد از تکمیل صادقانهٔ درس پیش‌نیاز و قبولی در آزمونش، این شاخه باز می‌شود.",
+      label: "",
+      cta: null as string | null,
+      icon: null,
+      locked: true,
+      prereqId: firstLocked.requiresLessonId ?? null,
+    };
+  }
+  if (done) {
+    return {
+      title: "همهٔ شاخه‌ها را آزاد کردید",
+      desc: "تمام دروس تکمیل‌شده‌اند. گواهینامه را ببینید یا لیگ این هفته را فتح کنید.",
+      label: "رفتن به لیگ‌ها",
+      cta: "/leaderboard",
+      icon: <ArrowLeft className="h-5 w-5" />,
+      locked: false,
+      prereqId: null as number | null,
+    };
+  }
+  return {
+    title: "مسیر آماده است",
+    desc: "داده‌ای برای نمایش نیست.",
+    label: "",
+    cta: null as string | null,
+    icon: null,
+    locked: false,
+    prereqId: null as number | null,
+  };
+}
+
+function CapSkeleton() {
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div className="space-y-2.5">
+          <Skeleton className="h-3.5 w-36" />
+          <Skeleton className="h-10 w-64" />
+          <Skeleton className="h-4 w-96 max-w-full" />
+        </div>
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-8 w-24 rounded-full" />
+          <Skeleton className="h-8 w-24 rounded-full" />
+          <Skeleton className="h-8 w-24 rounded-full" />
+        </div>
+      </div>
+      <div className="grid gap-5 md:grid-cols-5">
+        <div className="space-y-4 rounded-2xl border-2 border-border bg-card p-5 shadow-offset-sm md:col-span-2">
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="h-3.5 w-full rounded-full" />
+          <div className="grid grid-cols-3 gap-2">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Skeleton key={i} className="h-16 rounded-xl" />
+            ))}
+          </div>
+        </div>
+        <div className="rounded-2xl border-2 border-primary/40 bg-primary/5 p-5 md:col-span-3">
+          <Skeleton className="h-4 w-28" />
+          <Skeleton className="mt-3 h-7 w-3/4" />
+          <Skeleton className="mt-2 h-4 w-1/2" />
+          <Skeleton className="mt-6 h-11 w-40 rounded-xl" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ZapIcon(props: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M13 2 4.5 13.5H11l-.8 8.5L18.5 10H12l1-8z" />
+    </svg>
+  );
+}
diff --git a/frontend/src/app/community/page.tsx b/frontend/src/app/community/page.tsx
new file mode 100644
index 0000000..23d42f3
--- /dev/null
+++ b/frontend/src/app/community/page.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+/** Shortcut so /community never 404s. */
+export default function CommunityRedirectPage() {
+  const router = useRouter();
+  useEffect(() => {
+    router.replace("/unwrap?tab=community");
+  }, [router]);
+  return null;
+}
diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
new file mode 100644
index 0000000..194480e
Binary files /dev/null and b/frontend/src/app/favicon.ico differ
diff --git a/frontend/src/app/fonts/Vazirmatn-FD-Black.woff2 b/frontend/src/app/fonts/Vazirmatn-FD-Black.woff2
new file mode 100644
index 0000000..251a923
Binary files /dev/null and b/frontend/src/app/fonts/Vazirmatn-FD-Black.woff2 differ
diff --git a/frontend/src/app/fonts/Vazirmatn-FD-Bold.woff2 b/frontend/src/app/fonts/Vazirmatn-FD-Bold.woff2
new file mode 100644
index 0000000..f97f0db
Binary files /dev/null and b/frontend/src/app/fonts/Vazirmatn-FD-Bold.woff2 differ
diff --git a/frontend/src/app/fonts/Vazirmatn-FD-ExtraBold.woff2 b/frontend/src/app/fonts/Vazirmatn-FD-ExtraBold.woff2
new file mode 100644
index 0000000..e2b2d31
Binary files /dev/null and b/frontend/src/app/fonts/Vazirmatn-FD-ExtraBold.woff2 differ
diff --git a/frontend/src/app/fonts/Vazirmatn-FD-ExtraLight.woff2 b/frontend/src/app/fonts/Vazirmatn-FD-ExtraLight.woff2
new file mode 100644
index 0000000..d019c92
Binary files /dev/null and b/frontend/src/app/fonts/Vazirmatn-FD-ExtraLight.woff2 differ
diff --git a/frontend/src/app/fonts/Vazirmatn-FD-Light.woff2 b/frontend/src/app/fonts/Vazirmatn-FD-Light.woff2
new file mode 100644
index 0000000..41d75fb
Binary files /dev/null and b/frontend/src/app/fonts/Vazirmatn-FD-Light.woff2 differ
diff --git a/frontend/src/app/fonts/Vazirmatn-FD-Medium.woff2 b/frontend/src/app/fonts/Vazirmatn-FD-Medium.woff2
new file mode 100644
index 0000000..2721237
Binary files /dev/null and b/frontend/src/app/fonts/Vazirmatn-FD-Medium.woff2 differ
diff --git a/frontend/src/app/fonts/Vazirmatn-FD-Regular.woff2 b/frontend/src/app/fonts/Vazirmatn-FD-Regular.woff2
new file mode 100644
index 0000000..ac7cff8
Binary files /dev/null and b/frontend/src/app/fonts/Vazirmatn-FD-Regular.woff2 differ
diff --git a/frontend/src/app/fonts/Vazirmatn-FD-SemiBold.woff2 b/frontend/src/app/fonts/Vazirmatn-FD-SemiBold.woff2
new file mode 100644
index 0000000..359e57e
Binary files /dev/null and b/frontend/src/app/fonts/Vazirmatn-FD-SemiBold.woff2 differ
diff --git a/frontend/src/app/fonts/Vazirmatn-FD-Thin.woff2 b/frontend/src/app/fonts/Vazirmatn-FD-Thin.woff2
new file mode 100644
index 0000000..d9cfb37
Binary files /dev/null and b/frontend/src/app/fonts/Vazirmatn-FD-Thin.woff2 differ
diff --git a/frontend/src/app/fonts/Vazirmatn-Variable.woff2 b/frontend/src/app/fonts/Vazirmatn-Variable.woff2
new file mode 100644
index 0000000..a501289
Binary files /dev/null and b/frontend/src/app/fonts/Vazirmatn-Variable.woff2 differ
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
new file mode 100644
index 0000000..a1ca495
--- /dev/null
+++ b/frontend/src/app/globals.css
@@ -0,0 +1,647 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* enable dark-variant & class-based theming */
+@custom-variant dark (&:is(.dark *));
+
+/* ============================================================
+   Pargar design system — soft pastel, a touch of glass,
+   calm shadows, gentle motion.
+   ============================================================ */
+:root {
+  --background: #f4f5fb;
+  --foreground: #2a2745;
+  --card: #ffffff;
+  --card-foreground: #2a2745;
+  --popover: #ffffff;
+  --popover-foreground: #2a2745;
+  --primary: #6d63f0;
+  --primary-foreground: #ffffff;
+  --secondary: #5a6380;
+  --secondary-foreground: #ffffff;
+  --muted: #edeef7;
+  --muted-foreground: #6b6c8a;
+  --accent: #ec6fa9;
+  --accent-foreground: #ffffff;
+  --destructive: #e05c70;
+  --destructive-foreground: #ffffff;
+  --success: #3ec98a;
+  --success-foreground: #ffffff;
+  --gold: #f2a437;
+  --gold-foreground: #3f2a04;
+  --border: #d9dbe9;
+  --input: #c9cbdf;
+  --ring: #6d63f0;
+  --radius: 0.5rem;
+  /* inverted editorial band (dark in light mode, light in dark mode) */
+  --invert-bg: #211f3e;
+  --invert-fg: #f6f5fb;
+  /* soft motion tokens */
+  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-soft-in-out: cubic-bezier(0.45, 0.05, 0.25, 1);
+  --dur-fast: 280ms;
+  --dur-med: 420ms;
+  --dur-slow: 700ms;
+}
+
+.dark {
+  --background: #12111d;
+  --foreground: #ecebf6;
+  --card: #191830;
+  --card-foreground: #ecebf6;
+  --popover: #201f3a;
+  --popover-foreground: #ecebf6;
+  --primary: #9189fb;
+  --primary-foreground: #161129;
+  --secondary: #8d95ab;
+  --secondary-foreground: #10131e;
+  --muted: #262442;
+  --muted-foreground: #a7a8c9;
+  --accent: #f095c4;
+  --accent-foreground: #2a0f1f;
+  --destructive: #f47b8c;
+  --destructive-foreground: #2a0a0f;
+  --success: #63e0a5;
+  --success-foreground: #06210f;
+  --gold: #fab653;
+  --gold-foreground: #2a1a02;
+  --border: #353360;
+  --input: #4d4a7e;
+  --ring: #9189fb;
+  --radius: 0.25rem;
+  --invert-bg: #f0eff8;
+  --invert-fg: #18162e;
+}
+
+@theme inline {
+  /* next/font: FD default + plain Latin face for English-only fields */
+  /* Prefer Apple Color Emoji first; chat also renders Apple PNGs for Linux hosts. */
+  --font-sans: var(--font-vazirmatn), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
+    sans-serif;
+  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+  --font-latin: var(--font-vazirmatn-latin), var(--font-vazirmatn), Tahoma, "Segoe UI", Arial,
+    sans-serif;
+  /* Technical / English strings keep Latin digits */
+  --font-mono: var(--font-vazirmatn-latin), ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
+    Consolas, monospace;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-gold: var(--gold);
+  --color-gold-foreground: var(--gold-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 20px;
+  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
+  --default-transition-duration: 350ms;
+  --default-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  html {
+    color-scheme: light;
+    scroll-behavior: smooth;
+    font-family: var(--font-sans);
+  }
+  html.dark {
+    color-scheme: dark;
+  }
+  body {
+    background-color: var(--background);
+    background-image:
+      radial-gradient(1100px 540px at 85% -8%, color-mix(in srgb, var(--color-accent) 11%, transparent), transparent 62%),
+      radial-gradient(1000px 520px at -8% 26%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 60%),
+      radial-gradient(800px 420px at 50% 110%, color-mix(in srgb, var(--color-gold) 7%, transparent), transparent 60%);
+    background-attachment: fixed;
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+  /*
+   * Form controls: UA + Tailwind preflight use `font: inherit`, which is flaky.
+   * Pin family so Vazirmatn FD (Persian digits) paints the same as surrounding UI.
+   */
+  input,
+  textarea,
+  select,
+  button {
+    font-family: var(--font-sans) !important;
+    font-feature-settings: normal !important;
+  }
+  input::placeholder,
+  textarea::placeholder,
+  input::-webkit-input-placeholder,
+  textarea::-webkit-input-placeholder {
+    font-family: var(--font-sans) !important;
+    font-feature-settings: normal !important;
+  }
+  /*
+   * English-only typing surfaces: passwords, usernames, email, captcha, URLs, codes.
+   * Use plain Vazirmatn (non-FD) so Latin digits stay Latin.
+   */
+  .font-latin,
+  input.font-latin,
+  textarea.font-latin,
+  input[type="password"],
+  input[type="email"],
+  input[type="url"],
+  input[type="tel"],
+  input[dir="ltr"],
+  textarea[dir="ltr"],
+  input[autocomplete="username"],
+  input[autocomplete="email"],
+  input[autocomplete="current-password"],
+  input[autocomplete="new-password"],
+  input[autocomplete="one-time-code"],
+  input[id*="captcha" i],
+  input[name*="captcha" i],
+  input[id*="password" i],
+  input[name*="password" i],
+  input[id*="username" i],
+  input[name*="username" i] {
+    font-family: var(--font-latin) !important;
+    font-feature-settings: normal !important;
+    font-variant-numeric: lining-nums !important;
+  }
+  .font-latin::placeholder,
+  input.font-latin::placeholder,
+  textarea.font-latin::placeholder,
+  input[type="password"]::placeholder,
+  input[type="email"]::placeholder,
+  input[type="url"]::placeholder,
+  input[type="tel"]::placeholder,
+  input[dir="ltr"]::placeholder,
+  textarea[dir="ltr"]::placeholder {
+    font-family: var(--font-latin) !important;
+  }
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  select:-webkit-autofill {
+    font-family: var(--font-sans) !important;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 800;
+    letter-spacing: -0.01em;
+    text-wrap: balance;
+  }
+  ::selection {
+    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
+    color: inherit;
+  }
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+  code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--color-muted-foreground) 30%, transparent);
+    border-radius: 999px;
+    border: 2px solid var(--color-background);
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+@layer components {
+  .chat-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--color-muted-foreground) 35%, transparent) transparent;
+  }
+  .chat-scroll::-webkit-scrollbar {
+    width: 6px;
+  }
+  .chat-scroll::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--color-muted-foreground) 35%, transparent);
+    border-radius: 999px;
+    border-width: 0;
+  }
+  .section-kicker {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.6875rem;
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    color: var(--color-primary);
+  }
+  .section-kicker::before {
+    content: "";
+    display: inline-block;
+    width: 1.75rem;
+    height: 3px;
+    border-radius: 2px;
+    background: var(--color-primary);
+  }
+  /* kicker sitting on a solid primary panel — bar & text follow the opposing tone */
+  .section-kicker.on-primary {
+    color: var(--color-primary-foreground);
+  }
+  .section-kicker.on-primary::before {
+    background: var(--color-primary-foreground);
+  }
+  .card-hover {
+    transition:
+      border-color 150ms ease,
+      box-shadow 250ms ease,
+      transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .card-hover:hover {
+    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
+    box-shadow:
+      0 2px 6px rgba(41, 39, 70, 0.05),
+      0 22px 44px -18px rgba(75, 66, 200, 0.22);
+    transform: translateY(-3px);
+  }
+  .dark .card-hover:hover {
+    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
+    box-shadow:
+      0 2px 10px rgba(0, 0, 0, 0.4),
+      0 22px 44px -18px color-mix(in srgb, var(--color-primary) 40%, transparent);
+  }
+  .shadow-soft {
+    box-shadow:
+      0 2px 6px rgba(41, 39, 70, 0.05),
+      0 20px 44px -22px rgba(41, 39, 70, 0.2);
+  }
+  .dark .shadow-soft {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 22px 48px -22px rgba(0, 0, 0, 0.55);
+  }
+  /* signature offset shadow — softened for the pastel identity */
+  .shadow-offset {
+    box-shadow: 5px 5px 0 0 var(--invert-fg);
+  }
+  .shadow-offset-sm {
+    box-shadow: 4px 4px 0 0 var(--invert-fg);
+  }
+  /* in dark mode the offset shadow must stay visible against the dark canvas */
+  .dark .shadow-offset {
+    box-shadow: 5px 5px 0 0 rgba(255, 255, 255, 0.16);
+  }
+  .dark .shadow-offset-sm {
+    box-shadow: 4px 4px 0 0 rgba(255, 255, 255, 0.14);
+  }
+  /* inverted editorial band */
+  .band-invert {
+    background:
+      radial-gradient(900px 400px at 90% -20%, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 60%),
+      var(--invert-bg);
+    color: var(--invert-fg);
+  }
+  .chip-outline {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    border: 2px solid currentColor;
+    border-radius: 999px;
+    padding: 0.35rem 0.8rem;
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+  }
+  .dot-grid {
+    background-image: radial-gradient(
+      color-mix(in srgb, currentColor 16%, transparent) 1px,
+      transparent 1px
+    );
+    background-size: 18px 18px;
+  }
+  .dot-grid-primary {
+    color: var(--color-primary);
+  }
+
+  /* frosted glass — a touch: soft, restrained */
+  .glass {
+    background: linear-gradient(150deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.28));
+    -webkit-backdrop-filter: blur(14px) saturate(1.3);
+    backdrop-filter: blur(14px) saturate(1.3);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.6),
+      0 16px 36px -22px rgba(41, 39, 70, 0.3);
+  }
+  .dark .glass {
+    background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.09),
+      0 16px 36px -22px rgba(0, 0, 0, 0.6);
+  }
+
+  /* frosted glow variants per status (colored ambience) */
+  .glass-glow-primary,
+  .glass-glow-accent,
+  .glass-glow-gold,
+  .glass-glow-success,
+  .glass-glow-neutral {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.55),
+      0 14px 34px -12px rgba(41, 39, 70, 0.3);
+  }
+  .glass-glow-primary {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.55),
+      0 14px 34px -12px color-mix(in srgb, var(--color-primary) 42%, transparent);
+  }
+  .glass-glow-accent {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.55),
+      0 14px 34px -12px color-mix(in srgb, var(--color-accent) 40%, transparent);
+  }
+  .glass-glow-gold {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.55),
+      0 14px 34px -12px color-mix(in srgb, var(--color-gold) 40%, transparent);
+  }
+  .glass-glow-success {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.55),
+      0 14px 34px -12px color-mix(in srgb, var(--color-success) 40%, transparent);
+  }
+
+  /* glass navigation bar */
+  .nav-glass {
+    background: color-mix(in srgb, var(--color-background) 82%, transparent);
+    -webkit-backdrop-filter: blur(16px) saturate(1.5);
+    backdrop-filter: blur(16px) saturate(1.5);
+  }
+}
+
+@layer utilities {
+  /* legacy aliases now render soft + calm */
+  .bg-gradient-brand {
+    background-color: var(--color-primary);
+    background-image: none;
+  }
+  .text-gradient-brand {
+    color: var(--color-primary);
+    -webkit-background-clip: initial;
+    background-clip: initial;
+  }
+  .shadow-glow,
+  .shadow-glow-cyan {
+    box-shadow: none;
+  }
+
+  /* ---------- motion system (soft by default) ---------- */
+  .reveal {
+    opacity: 0;
+    animation: fadeUp 0.85s var(--ease-soft) forwards;
+  }
+  .reveal-1 { animation-delay: 0.08s; }
+  .reveal-2 { animation-delay: 0.16s; }
+  .reveal-3 { animation-delay: 0.24s; }
+  .reveal-4 { animation-delay: 0.32s; }
+  .reveal-5 { animation-delay: 0.4s; }
+  .reveal-scale {
+    opacity: 0;
+    animation: scaleIn 0.7s var(--ease-soft) forwards;
+  }
+  .hover-lift {
+    transition:
+      transform var(--dur-med) var(--ease-soft),
+      box-shadow var(--dur-med) var(--ease-soft);
+  }
+  .hover-lift:hover {
+    transform: translateY(-3px);
+    box-shadow:
+      0 2px 6px rgba(41, 39, 70, 0.05),
+      0 20px 40px -18px color-mix(in srgb, var(--color-primary) 26%, transparent);
+  }
+  .dark .hover-lift:hover {
+    box-shadow:
+      0 2px 10px rgba(0, 0, 0, 0.35),
+      0 20px 40px -18px color-mix(in srgb, var(--color-primary) 32%, transparent);
+  }
+  .press {
+    transition: transform var(--dur-fast) var(--ease-soft);
+  }
+  .press:active {
+    transform: translateY(1px) scale(0.985);
+  }
+  .press-flat:active {
+    transform: translateY(0.5px) scale(0.99);
+  }
+  .float-slow {
+    animation: floatY 9s var(--ease-soft-in-out) infinite;
+  }
+  .animate-pulse-soft {
+    animation: pulseSoft 3s var(--ease-soft-in-out) infinite;
+  }
+
+  /* Soften common Tailwind transition utilities */
+  .transition,
+  .transition-all,
+  .transition-colors,
+  .transition-opacity,
+  .transition-shadow,
+  .transition-transform {
+    transition-timing-function: var(--ease-soft);
+  }
+  .duration-75 { transition-duration: 180ms; }
+  .duration-100 { transition-duration: 220ms; }
+  .duration-150 { transition-duration: 280ms; }
+  .duration-200 { transition-duration: 350ms; }
+  .duration-300 { transition-duration: 420ms; }
+  .ease-out { transition-timing-function: var(--ease-soft); }
+  .ease-in-out { transition-timing-function: var(--ease-soft-in-out); }
+
+  /* Soften snappy active scales */
+  .active\:scale-90:active {
+    transform: scale(0.96);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .reveal,
+    .reveal-scale {
+      opacity: 1;
+      animation: none;
+    }
+    .float-slow,
+    .hover-lift,
+    .press,
+    .animate-pulse-soft,
+    .chat-msg-glow {
+      transition: none;
+      animation: none;
+    }
+  }
+}
+
+/* keyframes live at root so they always exist regardless of layers */
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes floatY {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+@keyframes pulseSoft {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+@keyframes chatMsgGlow {
+  0% {
+    filter: drop-shadow(0 0 0 transparent);
+  }
+  35% {
+    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--color-gold) 55%, transparent))
+      drop-shadow(0 0 28px color-mix(in srgb, var(--color-gold) 28%, transparent));
+  }
+  100% {
+    filter: drop-shadow(0 0 0 transparent);
+  }
+}
+
+.chat-msg-glow {
+  animation: chatMsgGlow 1.85s var(--ease-soft) forwards;
+  will-change: filter;
+}
+
+@keyframes metaprog {
+  0% {
+    transform: translateX(-120%);
+  }
+  100% {
+    transform: translateX(420%);
+  }
+}
+
+/* Soften Tailwind ping / pulse defaults for this app */
+@keyframes softPing {
+  0% {
+    transform: scale(1);
+    opacity: 0.55;
+  }
+  75%,
+  100% {
+    transform: scale(1.45);
+    opacity: 0;
+  }
+}
+.animate-ping {
+  animation: softPing 1.6s var(--ease-soft-in-out) infinite;
+}
+
+@keyframes softPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.72;
+  }
+}
+.animate-pulse {
+  animation: softPulse 2.8s var(--ease-soft-in-out) infinite;
+}
+
+/* ---- skeleton shimmer ------------------------------------------------ */
+.skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--color-muted);
+  border-radius: 0.75rem;
+}
+.skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--color-foreground) 8%, transparent),
+    transparent
+  );
+  animation: skeletonShimmer 2s var(--ease-soft-in-out) infinite;
+}
+@keyframes skeletonShimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* ---- global motion safety --------------------------------------------- */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/frontend/src/app/icon.png b/frontend/src/app/icon.png
new file mode 100644
index 0000000..11a1620
Binary files /dev/null and b/frontend/src/app/icon.png differ
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
new file mode 100644
index 0000000..dd4fe69
--- /dev/null
+++ b/frontend/src/app/layout.tsx
@@ -0,0 +1,59 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+import { Providers } from "@/components/providers";
+import { AppShell } from "@/components/app-shell";
+import { PageTransition } from "@/components/page-transition";
+
+/** Vazirmatn FD — default UI; Latin digits render as Persian glyphs. */
+const vazirmatnFd = localFont({
+  src: [
+    { path: "./fonts/Vazirmatn-FD-Thin.woff2", weight: "100", style: "normal" },
+    { path: "./fonts/Vazirmatn-FD-ExtraLight.woff2", weight: "200", style: "normal" },
+    { path: "./fonts/Vazirmatn-FD-Light.woff2", weight: "300", style: "normal" },
+    { path: "./fonts/Vazirmatn-FD-Regular.woff2", weight: "400", style: "normal" },
+    { path: "./fonts/Vazirmatn-FD-Medium.woff2", weight: "500", style: "normal" },
+    { path: "./fonts/Vazirmatn-FD-SemiBold.woff2", weight: "600", style: "normal" },
+    { path: "./fonts/Vazirmatn-FD-Bold.woff2", weight: "700", style: "normal" },
+    { path: "./fonts/Vazirmatn-FD-ExtraBold.woff2", weight: "800", style: "normal" },
+    { path: "./fonts/Vazirmatn-FD-Black.woff2", weight: "900", style: "normal" },
+  ],
+  display: "swap",
+  variable: "--font-vazirmatn",
+  fallback: ["Tahoma", "Segoe UI", "Arial", "sans-serif"],
+});
+
+/** Plain Vazirmatn — Latin digits stay Latin (passwords, usernames, captcha, URLs…). */
+const vazirmatnLatin = localFont({
+  src: "./fonts/Vazirmatn-Variable.woff2",
+  weight: "100 900",
+  display: "swap",
+  variable: "--font-vazirmatn-latin",
+  fallback: ["Tahoma", "Segoe UI", "Arial", "sans-serif"],
+});
+
+export const metadata: Metadata = {
+  title: "پرگار",
+  description: "مسیر یادگیری واقعی پرگار",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html
+      lang="fa"
+      dir="rtl"
+      className={`${vazirmatnFd.variable} ${vazirmatnLatin.variable}`}
+      suppressHydrationWarning
+    >
+      <body
+        className={`${vazirmatnFd.className} min-h-screen bg-background font-sans text-foreground antialiased`}
+      >
+        <Providers>
+          <AppShell>
+            <PageTransition>{children}</PageTransition>
+          </AppShell>
+        </Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/frontend/src/app/leaderboard/page.tsx b/frontend/src/app/leaderboard/page.tsx
new file mode 100644
index 0000000..3d213ca
--- /dev/null
+++ b/frontend/src/app/leaderboard/page.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Suspense } from "react";
+import { Trophy } from "lucide-react";
+import { LeaderboardPanel } from "@/components/leaderboard-panel";
+import { PageHeader } from "@/components/page-header";
+
+export default function LeaderboardPage() {
+  return (
+    <div className="space-y-8">
+      <PageHeader
+        align="center"
+        kicker="رقابت هفتگی"
+        title={
+          <>
+            لیگ <span className="text-gradient-brand">هفتگی</span>
+          </>
+        }
+        description="با تکمیل صادقانه دروس امتیاز بگیرید. لیگ هر دوشنبه صفر می‌شود — استمرار از شدت مهم‌تر است."
+        actions={
+          <span className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            <Trophy className="h-6 w-6" />
+          </span>
+        }
+      />
+      <Suspense fallback={null}>
+        <LeaderboardPanel />
+      </Suspense>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/lockout/page.tsx b/frontend/src/app/lockout/page.tsx
new file mode 100644
index 0000000..e4ba8d0
--- /dev/null
+++ b/frontend/src/app/lockout/page.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Heart, Lock, MessageSquare, Send, Loader2 } from "lucide-react";
+import { useAuth } from "@/lib/auth-store";
+import { api, http, toUserError } from "@/lib/api";
+import { MAX_HEARTS, clampHearts, hasInfiniteHearts } from "@/lib/hearts";
+import type { Mentor, User } from "@/lib/types";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { toast } from "@/components/providers";
+import { cn } from "@/lib/utils";
+
+export default function LockoutPage() {
+  const router = useRouter();
+  const user = useAuth((s) => s.user);
+  const [note, setNote] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [requested, setRequested] = useState(false);
+  const [mentorId, setMentorId] = useState<number | null>(null);
+
+  const syncUser = useCallback(async () => {
+    try {
+      const res = await api<{ user: User }>("/api/auth/me");
+      useAuth.getState().setUser(res.user);
+      if (!res.user.isLocked || hasInfiniteHearts(res.user.role)) {
+        router.replace("/cap");
+      }
+    } catch {
+      /* ignore */
+    }
+  }, [router]);
+
+  useEffect(() => {
+    if (user && (!user.isLocked || hasInfiniteHearts(user.role))) {
+      router.replace("/cap");
+      return;
+    }
+    const onFocus = () => void syncUser();
+    window.addEventListener("focus", onFocus);
+    void syncUser();
+    return () => {
+      window.removeEventListener("focus", onFocus);
+    };
+  }, [syncUser, user, router]);
+
+  useEffect(() => {
+    void http
+      .get<{ mentors: Mentor[] }>("/api/mentors")
+      .then((r) => {
+        const first = r.mentors?.[0];
+        if (first) setMentorId(first.id);
+      })
+      .catch(() => undefined);
+  }, []);
+
+  const requestUnlock = async () => {
+    setBusy(true);
+    try {
+      const res = await http.post<{ message?: string }>("/api/me/request-unlock", { note });
+      setRequested(true);
+      toast.success(res.message || "درخواست ثبت شد");
+    } catch (e) {
+      toast.error(toUserError(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const openMentorChat = () => {
+    const draft =
+      "سلام، حسابم بعد از اتمام جان‌ها قفل شده. لطفاً برای رفع محدودیت راهنمایی‌ام کنید.";
+    window.dispatchEvent(
+      new CustomEvent("pargar:chat", {
+        detail: { open: true, with: mentorId ?? undefined, draft },
+      }),
+    );
+  };
+
+  const hearts = clampHearts(user?.hearts ?? 0);
+
+  return (
+    <div className="mx-auto flex min-h-[70vh] max-w-lg flex-col items-center justify-center px-4 text-center">
+      <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-destructive/15">
+        <Lock className="h-11 w-11 text-destructive" />
+      </div>
+
+      <p className="text-xs font-bold tracking-wider text-destructive">حساب قفل شد</p>
+      <h1 className="mt-2 text-3xl font-bold tracking-tight">جان‌هایتان تمام شد</h1>
+      <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+        هر پاسخ اشتباه در آزمون یک جان کم می‌کند. با تمام شدن سه جان، یادگیری و آزمون قفل می‌شود تا
+        تیم مسیر را بررسی کند — خودتان نمی‌توانید قفل را باز کنید.
+      </p>
+
+      <div className="mt-6 flex items-center gap-2">
+        {Array.from({ length: MAX_HEARTS }).map((_, i) =>
+          i < hearts ? (
+            <span key={i} className="grid h-9 w-9 place-items-center rounded-full bg-destructive/15 text-destructive">
+              <Heart className="h-5 w-5 fill-current" />
+            </span>
+          ) : (
+            <span key={i} className="grid h-9 w-9 place-items-center rounded-full bg-muted text-muted-foreground/40">
+              <Heart className="h-5 w-5" />
+            </span>
+          ),
+        )}
+      </div>
+
+      <Card className="mt-6 w-full space-y-3 border-destructive/30 bg-destructive/5 p-4 text-start text-sm text-muted-foreground">
+        <p className="font-bold text-foreground">گام بعدی</p>
+        <ol className="list-decimal space-y-1.5 pe-4 text-xs leading-relaxed">
+          <li>از طریق گفتگو با منتور وضعیت را توضیح دهید.</li>
+          <li>درخواست بررسی را برای تیم ثبت کنید (حداکثر یک‌بار در ۱۲ ساعت).</li>
+          <li>بعد از تأیید متصدی، ۳ جان برمی‌گردد و مسیر دوباره باز می‌شود.</li>
+        </ol>
+      </Card>
+
+      <div className="mt-5 w-full space-y-2">
+        <textarea
+          value={note}
+          onChange={(e) => setNote(e.target.value)}
+          maxLength={500}
+          rows={3}
+          dir="rtl"
+          placeholder="اختیاری: چه آزمونی گیر کردید؟ چه کمکی لازم دارید؟"
+          className="w-full rounded-xl border-2 border-border bg-background px-3 py-2 text-sm outline-none focus-visible:border-primary/50"
+        />
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <Button className="flex-1" disabled={busy || requested} onClick={() => void requestUnlock()}>
+            {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+            {requested ? "درخواست ارسال شد" : "درخواست رفع قفل"}
+          </Button>
+          <Button
+            variant="outline"
+            className="flex-1"
+            onClick={openMentorChat}
+          >
+            <MessageSquare className="h-4 w-4" /> گفتگو با منتور
+          </Button>
+        </div>
+        <Button
+          variant="ghost"
+          className={cn("w-full text-muted-foreground")}
+          onClick={() => router.push("/unwrap?tab=community")}
+        >
+          جامعه و حمایت
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
new file mode 100644
index 0000000..f7b9723
--- /dev/null
+++ b/frontend/src/app/login/page.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { CheckCircle2, Loader2, RefreshCw, ShieldCheck, Timer, Zap } from "lucide-react";
+import { BrandMark } from "@/components/brand-mark";
+import { useAuth } from "@/lib/auth-store";
+import { http, toUserError } from "@/lib/api";
+import type { User } from "@/lib/types";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { PasswordInput } from "@/components/ui/password-input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+
+const perks = [
+  { icon: Timer, text: "زمان تماشای راستی‌آزمایی‌شده — بدون میان‌بر" },
+  { icon: ShieldCheck, text: "قفل‌شدن پس از سه اشتباه، تا وقتی واقعاً یاد بگیرید" },
+  { icon: CheckCircle2, text: "لیگ هفتگی، رویداد زنده و منتور یک‌به‌یک" },
+];
+
+type CaptchaChallenge = {
+  challengeId: string;
+  imageBase64: string;
+};
+
+export default function LoginPage() {
+  const router = useRouter();
+  const setSession = useAuth((s) => s.setSession);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [captchaAnswer, setCaptchaAnswer] = useState("");
+  const [challenge, setChallenge] = useState<CaptchaChallenge | null>(null);
+  const [captchaLoading, setCaptchaLoading] = useState(true);
+  const [rememberMe, setRememberMe] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const { data: registerStatus } = useQuery({
+    queryKey: ["auth", "register-status"],
+    queryFn: () => http.get<{ enabled: boolean }>("/api/auth/register-status"),
+  });
+
+  const loadCaptcha = useCallback(async () => {
+    setCaptchaLoading(true);
+    setCaptchaAnswer("");
+    try {
+      const data = await http.get<CaptchaChallenge>("/api/auth/captcha");
+      setChallenge(data);
+    } catch (err) {
+      setChallenge(null);
+      setError(toUserError(err, "بارگذاری کد امنیتی ممکن نشد"));
+    } finally {
+      setCaptchaLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadCaptcha();
+  }, [loadCaptcha]);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!challenge) {
+      setError("ابتدا کد امنیتی را بارگذاری کنید");
+      void loadCaptcha();
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await http.post<{ accessToken: string; refreshToken: string; user: User }>("/api/auth/login", {
+        username: email,
+        password,
+        challengeId: challenge.challengeId,
+        captchaAnswer,
+        rememberMe,
+      });
+      setSession(data.accessToken, data.refreshToken, data.user);
+      router.push("/cap");
+    } catch (err) {
+      setError(toUserError(err, "ورود ناموفق بود"));
+      void loadCaptcha();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="mx-auto flex min-h-[80vh] max-w-4xl flex-col justify-center px-4 py-8">
+      <div className="grid overflow-hidden rounded-2xl border border-border bg-card shadow-soft md:grid-cols-2">
+        {/* brand panel */}
+        <aside className="relative hidden flex-col justify-between overflow-hidden bg-primary p-7 text-primary-foreground md:flex">
+          <div className="dot-grid pointer-events-none absolute -end-20 -top-20 h-72 w-72 rotate-12 text-primary-foreground opacity-50" aria-hidden />
+          <span className="pointer-events-none absolute end-8 top-8 h-6 w-6 rotate-12 rounded-md bg-accent" aria-hidden />
+          <div className="relative">
+            <BrandMark locale="fa" size="lg" className="text-primary-foreground [&_span]:text-accent" />
+            <p className="section-kicker on-primary mt-5">بوت‌کمپ دگرگونی</p>
+            <h2 className="mt-3 text-2xl font-bold leading-snug">
+              سیستم، میان‌بر ندارد.
+              <br />
+              شما هم ندارید.
+            </h2>
+            <p className="mt-2.5 text-sm leading-relaxed text-primary-foreground/80">
+              یادگیری را قابل کنترل و قابل اثبات می‌کند — برای خودتان هم که شده.
+            </p>
+          </div>
+          <ul className="relative mt-6 space-y-2.5">
+            {perks.map((p) => (
+              <li key={p.text} className="flex items-start gap-2.5 text-sm">
+                <p.icon className="mt-0.5 h-4 w-4 shrink-0 text-primary-foreground/90" />
+                <span className="leading-relaxed text-primary-foreground/90">{p.text}</span>
+              </li>
+            ))}
+          </ul>
+        </aside>
+
+        {/* form panel */}
+        <div className="flex flex-col justify-center bg-card p-6 sm:p-8">
+          <CardHeader className="items-center space-y-1.5 px-0 pb-5 pt-0 text-center">
+            <div className="mb-1 flex justify-center md:hidden">
+              <BrandMark locale="fa" size="lg" logoOnly />
+            </div>
+            <CardTitle className="text-2xl">خوش برگشتید</CardTitle>
+            <CardDescription>برای ادامه مسیر خود وارد شوید.</CardDescription>
+          </CardHeader>
+          <CardContent className="mx-auto w-full max-w-md px-0 pt-0">
+            <form onSubmit={submit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="username">شناسه کاربری</Label>
+                <Input
+                  id="username"
+                  type="text"
+                  autoComplete="username"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  dir="ltr"
+                  className="text-left"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">رمز عبور</Label>
+                <PasswordInput
+                  id="password"
+                  autoComplete="current-password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  placeholder="رمز عبور"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between gap-2">
+                  <Label htmlFor="captcha">کد امنیتی</Label>
+                  <button
+                    type="button"
+                    onClick={() => void loadCaptcha()}
+                    disabled={captchaLoading}
+                    className="inline-flex items-center gap-1 text-xs font-medium text-primary underline-offset-4 hover:underline disabled:opacity-50"
+                  >
+                    <RefreshCw className={`h-3.5 w-3.5 ${captchaLoading ? "animate-spin" : ""}`} />
+                    تازه‌سازی
+                  </button>
+                </div>
+                <div className="flex items-stretch gap-3">
+                  <div
+                    className="relative flex h-14 min-w-[9.5rem] shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-muted/60 shadow-inner"
+                    aria-live="polite"
+                  >
+                    {captchaLoading || !challenge?.imageBase64 ? (
+                      <span className="text-sm text-muted-foreground">…</span>
+                    ) : (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={`data:image/png;base64,${challenge.imageBase64}`}
+                        alt="کد امنیتی"
+                        width={160}
+                        height={52}
+                        className="h-full w-full object-contain select-none"
+                        draggable={false}
+                      />
+                    )}
+                  </div>
+                  <Input
+                    id="captcha"
+                    type="text"
+                    autoComplete="off"
+                    autoCapitalize="characters"
+                    spellCheck={false}
+                    value={captchaAnswer}
+                    onChange={(e) => setCaptchaAnswer(e.target.value.toUpperCase())}
+                    required
+                    dir="ltr"
+                    className="h-14 text-center font-mono tracking-widest uppercase placeholder:text-center"
+                    placeholder="کد تصویر"
+                    maxLength={6}
+                  />
+                </div>
+              </div>
+              <label className="flex items-center justify-between gap-3 text-sm">
+                <span>مرا به یاد داشته باش</span>
+                <Switch
+                  checked={rememberMe}
+                  onCheckedChange={setRememberMe}
+                  aria-label="مرا به یاد داشته باش"
+                />
+              </label>
+              {error && <p className="text-sm text-destructive">{error}</p>}
+              <Button
+                type="submit"
+                variant="gradient"
+                className="h-12 w-full"
+                size="lg"
+                disabled={loading || captchaLoading || !challenge}
+              >
+                {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Zap className="h-4 w-4" />} ورود
+              </Button>
+            </form>
+            <p className="mt-6 text-center text-sm text-muted-foreground">
+              {registerStatus?.enabled ? (
+                <>
+                  حساب ندارید؟{" "}
+                  <Link href="/register" className="font-medium text-primary underline-offset-4 hover:underline">
+                    ثبت‌نام
+                  </Link>
+                </>
+              ) : (
+                "حساب شما توسط متصدی بوت‌کمپ ساخته و اعلام می‌شود."
+              )}
+            </p>
+          </CardContent>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx
new file mode 100644
index 0000000..c774a12
--- /dev/null
+++ b/frontend/src/app/not-found.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import Link from "next/link";
+import { BrandMark } from "@/components/brand-mark";
+import { Button } from "@/components/ui/button";
+import { useAuth, useAuthHydrated } from "@/lib/auth-store";
+import { Home, LogIn, Trees } from "lucide-react";
+
+export default function NotFound() {
+  const hydrated = useAuthHydrated();
+  const user = useAuth((s) => s.user);
+  const loggedIn = hydrated && !!user;
+
+  return (
+    <div className="mx-auto flex max-w-lg flex-col items-center px-4 py-16 text-center">
+      <div className="relative w-full overflow-hidden rounded-2xl border-2 border-border bg-card px-8 py-14 shadow-offset">
+        <div className="dot-grid dot-grid-primary pointer-events-none absolute -end-10 -top-10 h-40 w-40 opacity-60" aria-hidden />
+        <p className="text-7xl font-black tabular-nums text-primary/25">۴۰۴</p>
+        <div className="mt-4 flex justify-center">
+          <BrandMark locale="fa" size="lg" />
+        </div>
+        <h1 className="mt-6 text-2xl font-black tracking-tight">این مسیر پیدا نشد</h1>
+        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+          {loggedIn
+            ? "این آدرس در سامانه نیست. از درخت مهارت یا مرکز ادامه دهید."
+            : "صفحه‌ای که دنبالش بودید پیدا نشد. می‌توانید به خانه برگردید یا وارد حساب شوید."}
+        </p>
+        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+          {loggedIn ? (
+            <>
+              <Button asChild className="gap-2">
+                <Link href="/cap">
+                  <Trees className="h-4 w-4" /> درخت مهارت
+                </Link>
+              </Button>
+              <Button asChild variant="outline" className="gap-2">
+                <Link href="/unwrap?tab=community">مرکز · حمایت</Link>
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button asChild className="gap-2">
+                <Link href="/">
+                  <Home className="h-4 w-4" /> خانه
+                </Link>
+              </Button>
+              <Button asChild variant="outline" className="gap-2">
+                <Link href="/login">
+                  <LogIn className="h-4 w-4" /> ورود
+                </Link>
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/notifications/page.tsx b/frontend/src/app/notifications/page.tsx
new file mode 100644
index 0000000..5f06d75
--- /dev/null
+++ b/frontend/src/app/notifications/page.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { BellRing, Loader2, Save } from "lucide-react";
+import { http } from "@/lib/api";
+import type { NotificationPrefs } from "@/lib/types";
+import { NotificationsPanel } from "@/components/notifications-panel";
+import { PageHeader } from "@/components/page-header";
+import { Panel } from "@/components/panel";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+
+const prefsMeta: { key: keyof NotificationPrefs; title: string; desc: string }[] = [
+  { key: "progress", title: "پیشرفت و باز شدن دروس", desc: "باز شدن آزمون، تکمیل درس، شاخه‌های جدید." },
+  { key: "gamification", title: "بازی‌سازی", desc: "امتیاز، زنجیرهٔ فعالیت، لیگ‌ها و هشدار قلب." },
+  { key: "mentor", title: "منتور و گفتگو", desc: "پاسخ منتور، پیام هم‌دوره‌ای، تایید رفع قفل." },
+  { key: "event", title: "رویدادها و اطلاعیه‌ها", desc: "تایید ثبت‌نام و یادآوری ۱۵ دقیقه قبل از شروع." },
+];
+
+export default function NotificationsPage() {
+  const qc = useQueryClient();
+  const { data, isLoading } = useQuery({
+    queryKey: ["prefs"],
+    queryFn: () => http.get<{ prefs: NotificationPrefs }>("/api/notifications/preferences"),
+  });
+  const [draft, setDraft] = useState<NotificationPrefs | null>(null);
+  const [prefs, setPrefs] = useState<{ prefs: NotificationPrefs }>();
+
+  const prefsValue = draft ?? prefs?.prefs ?? data?.prefs;
+
+  const save = useMutation({
+    mutationFn: (p: NotificationPrefs) => http.put<{ prefs: NotificationPrefs }>("/api/notifications/preferences", p),
+    onSuccess: (res) => {
+      setPrefs(res);
+      setDraft(null);
+      qc.invalidateQueries({ queryKey: ["prefs"] });
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className="mx-auto max-w-3xl space-y-8">
+        <div className="space-y-2">
+          <Skeleton className="h-3.5 w-32" />
+          <Skeleton className="h-8 w-44" />
+          <Skeleton className="h-4 w-72" />
+        </div>
+        <div className="rounded-2xl border border-border/70 bg-card p-6 shadow-soft">
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-10 w-10 rounded-xl" />
+            <div className="flex-1 space-y-1.5">
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-3 w-64" />
+            </div>
+          </div>
+          <div className="mt-6 space-y-6">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="flex items-center justify-between gap-4">
+                <div className="flex-1 space-y-1.5">
+                  <Skeleton className="h-4 w-48" />
+                  <Skeleton className="h-3 w-64" />
+                </div>
+                <Skeleton className="h-6 w-11 rounded-full" />
+              </div>
+            ))}
+            <div className="flex justify-end border-t border-border/70 pt-5">
+              <Skeleton className="h-10 w-36 rounded-xl" />
+            </div>
+          </div>
+        </div>
+        <div className="space-y-2">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} className="h-16 rounded-2xl" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  const toggle = (key: keyof NotificationPrefs) => {
+    if (!prefsValue) return;
+    setDraft({ ...prefsValue, [key]: !prefsValue[key] });
+  };
+
+  const dirty = draft != null;
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-8">
+      <PageHeader
+        kicker="صندوق پیام و تنظیمات"
+        title="اعلان‌ها"
+        description="همه‌چیز درون‌برنامه و بی‌درنگ ارسال می‌شود — نیازی به ایمیل نیست."
+      />
+
+      <Panel
+        title="دسته‌بندی اعلان‌ها"
+        description="هر دسته را همان‌جا بی‌صدا کنید. تغییرات پس از ذخیره اعمال می‌شود."
+        icon={<BellRing className="h-5 w-5" />}
+        tint="bg-primary/10 text-primary"
+      >
+        <div className="space-y-6">
+          {prefsValue &&
+            prefsMeta.map((m) => (
+              <div key={m.key} className="flex items-center justify-between gap-4">
+                <div>
+                  <Label htmlFor={`pref-${m.key}`} className="font-medium">{m.title}</Label>
+                  <p className="text-xs text-muted-foreground">{m.desc}</p>
+                </div>
+                <Switch
+                  id={`pref-${m.key}`}
+                  checked={!!prefsValue[m.key]}
+                  onCheckedChange={() => toggle(m.key)}
+                />
+              </div>
+            ))}
+          <div className="flex justify-end border-t border-border/70 pt-5">
+            <Button
+              className="gap-1.5"
+              disabled={!dirty || save.isPending}
+              onClick={() => draft && save.mutate(draft)}
+            >
+              {save.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
+              ذخیره تنظیمات
+            </Button>
+          </div>
+        </div>
+      </Panel>
+
+      <NotificationsPanel />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
new file mode 100644
index 0000000..76e7f27
--- /dev/null
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,305 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import {
+  BookOpenCheck,
+  Clock3,
+  Flag,
+  PlayCircle,
+  Sparkles,
+  Timer,
+  UnlockKeyhole,
+  Users2,
+  Zap,
+  ExternalLink,
+} from "lucide-react";
+import { useAuth } from "@/lib/auth-store";
+import { Button } from "@/components/ui/button";
+import { BrandMark } from "@/components/brand-mark";
+import { Reveal } from "@/components/reveal";
+import Link from "next/link";
+import { http } from "@/lib/api";
+
+const stats = [
+  { value: "۱۲", label: "هفته مسیر", tile: "bg-primary text-primary-foreground" },
+  { value: "۶", label: "درس ویدیویی", tile: "bg-accent text-accent-foreground" },
+  { value: "۳", label: "فصل مهارتی", tile: "bg-gold text-gold-foreground" },
+  { value: "۱۸", label: "سوال آزمون", tile: "bg-success text-success-foreground" },
+];
+
+const steps = [
+  {
+    icon: PlayCircle,
+    step: "۰۱",
+    title: "تماشای کامل",
+    desc: "ویدیو را همان‌طور واقعی تماشا کنید؛ زمان، به‌راستی تأیید می‌شود.",
+    tile: "bg-primary text-primary-foreground",
+  },
+  {
+    icon: BookOpenCheck,
+    step: "۰۲",
+    title: "قبولی در آزمون",
+    desc: "آزمون همان درس را باز می‌کند؛ هر اشتباه یک قلب هزینه دارد.",
+    tile: "bg-accent text-accent-foreground",
+  },
+  {
+    icon: UnlockKeyhole,
+    step: "۰۳",
+    title: "باز شدن شاخه‌ها",
+    desc: "با هر قبولی، شاخه‌های بعدی درخت مهارت آزاد می‌شوند.",
+    tile: "bg-gold text-gold-foreground",
+  },
+];
+
+const features = [
+  {
+    icon: Timer,
+    title: "تماشای تاییدشده",
+    desc: "زمان تماشا با ضربان‌های دوره‌ای راستی‌آزمایی می‌شود؛ میان‌بر و پرش سریع جواب نمی‌دهد.",
+    tile: "bg-primary/10 text-primary",
+  },
+  {
+    icon: Users2,
+    title: "آزمون با قلب‌ها",
+    desc: "هر پاسخ اشتباه یک قلب کم می‌کند. با سه اشتباه، حساب قفل می‌شود — مجبورید واقعاً یاد بگیرید.",
+    tile: "bg-accent/10 text-accent",
+  },
+  {
+    icon: Sparkles,
+    title: "جامعه و منتور",
+    desc: "رویدادهای زنده، لیگ هفتگی و گفتگوی یک‌به‌یک با منتور برای وقتی که به مانع می‌خورید.",
+    tile: "bg-gold/10 text-gold",
+  },
+];
+
+const principles = [
+  "پیش‌نیازهای واقعی — هر شاخه فقط بعد از قبولی در والدش باز می‌شود",
+  "بدون میان‌بر — پرش سریع و چندبرابری، غیرفعال است",
+  "قفل پس از سه اشتباه؛ رفع قفل فقط با بررسی مدیریت",
+  "لیگ هفتگی که هر دوشنبه از نو آغاز می‌شود",
+];
+
+export default function Home() {
+  const router = useRouter();
+  const user = useAuth((s) => s.user);
+
+  const { data: sponsorsData } = useQuery({
+    queryKey: ["sponsors"],
+    queryFn: () => http.get<{ sponsors: { name: string; url?: string; blurb?: string }[] }>("/api/sponsors"),
+    staleTime: 60_000,
+  });
+  const sponsors = sponsorsData?.sponsors ?? [];
+
+  const goCap = () => router.push("/cap");
+  const goLogin = () => router.push("/login");
+
+  return (
+    <div className="mx-auto flex max-w-5xl flex-col items-center">
+      {/* hero */}
+      <section className="relative w-full overflow-hidden rounded-2xl border-2 border-border bg-card px-6 py-16 text-center shadow-offset sm:px-12 sm:py-24">
+        <div className="dot-grid dot-grid-primary pointer-events-none absolute -end-16 -top-16 h-72 w-72 opacity-70" aria-hidden />
+        <span className="pointer-events-none absolute end-8 top-8 hidden h-8 w-8 rotate-12 rounded-lg bg-accent sm:block" aria-hidden />
+        <div className="relative mx-auto flex max-w-2xl flex-col items-center text-center">
+          <div className="reveal reveal-1">
+            <BrandMark size="lg" />
+          </div>
+          <div className="reveal reveal-2 mt-6 flex flex-wrap items-center justify-center gap-2">
+            {["بدون میان‌بر", "۱۲ هفته", "منتور ۱:۱"].map((c) => (
+              <span key={c} className="chip-outline border-primary text-primary bg-primary/5">
+                {c}
+              </span>
+            ))}
+          </div>
+          <p className="section-kicker reveal reveal-3 mt-6 justify-center">بوت‌کمپ ۱۲ هفته‌ای دگرگونی</p>
+          <h1 className="reveal reveal-4 mt-4 text-5xl font-black leading-[1.05] tracking-tight sm:text-6xl">
+            با انضباط،{" "}
+            <span className="relative inline-block whitespace-nowrap">
+              <span className="text-primary">متحول</span>
+              <span className="absolute inset-x-0 -bottom-1 h-4 rounded-sm bg-accent/20" aria-hidden />
+            </span>{" "}
+            شو
+          </h1>
+          <p className="reveal reveal-5 mt-6 max-w-xl text-base leading-relaxed text-muted-foreground">
+            پلتفرمی که خودش حرف نمی‌زند — زمان تماشا، آزمون‌ها و قفل‌شدن را جدا از قضاوت خودتان کنترل
+            می‌کند تا یادگیری واقعاً رخ بدهد.
+          </p>
+          <div className="reveal reveal-5 mt-9 flex flex-wrap items-center justify-center gap-3">
+            {user ? (
+              <Button size="lg" onClick={goCap} className="gap-2 px-8">
+                <Zap className="h-5 w-5" /> ادامه مسیر
+              </Button>
+            ) : (
+              <>
+                <Button size="lg" onClick={goLogin} className="gap-2 px-8">
+                  ورود
+                </Button>
+                <Button size="lg" variant="outline" onClick={goLogin} className="gap-2 px-8">
+                  <Zap className="h-5 w-5" /> شروع مسیر
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* stats strip — solid color blocks */}
+      <section className="mt-8 w-full">
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+          {stats.map((s, i) => (
+            <Reveal
+              key={s.label}
+              delay={i * 0.07}
+              className={`${s.tile} flex flex-col items-center justify-center rounded-2xl px-6 py-8 text-center shadow-offset-sm hover-lift`}
+            >
+              <p className="text-4xl font-black tabular-nums">{s.value}</p>
+              <p className="mt-1.5 text-xs font-bold opacity-90">{s.label}</p>
+            </Reveal>
+          ))}
+        </div>
+      </section>
+
+      {/* how it works */}
+      <section className="mt-20 w-full">
+        <div className="mx-auto max-w-md space-y-3 text-center">
+          <p className="section-kicker justify-center">چگونه کار می‌کند</p>
+          <h2 className="text-3xl font-black tracking-tight sm:text-4xl">مسیری که گریز ندارد</h2>
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            بقای شما در بوت‌کمپ صفر و یک است؛ سیستم نمی‌پذیرد که فقط «خوب دیدن کردم» بگویید.
+          </p>
+        </div>
+        <div className="mt-10 grid gap-5 md:grid-cols-3">
+          {steps.map((s, i) => (
+            <Reveal key={s.step} delay={i * 0.1} className="group relative flex flex-col rounded-2xl border-2 border-border bg-card p-6 shadow-offset-sm hover-lift">
+              <div className="flex items-center justify-between">
+                <span className={`flex h-12 w-12 items-center justify-center rounded-2xl ${s.tile} shadow-offset-sm`}>
+                  <s.icon className="h-6 w-6" />
+                </span>
+                <span className="text-3xl font-black tabular-nums text-muted-foreground/30">{s.step}</span>
+              </div>
+              <h3 className="mt-5 text-lg font-extrabold">{s.title}</h3>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{s.desc}</p>
+            </Reveal>
+          ))}
+        </div>
+      </section>
+
+      {/* features */}
+      <section className="mt-20 w-full">
+        <h2 className="text-center text-3xl font-black tracking-tight sm:text-4xl">
+          چرا منحصربه‌فرد <span className="text-accent">است</span>
+        </h2>
+        <div className="mt-10 grid gap-5 md:grid-cols-3">
+          {features.map((f, i) => (
+            <Reveal key={f.title} delay={i * 0.1} className="card-hover rounded-2xl border-2 border-border bg-card p-6">
+              <span className={`flex h-12 w-12 items-center justify-center rounded-2xl ${f.tile}`}>
+                <f.icon className="h-6 w-6" />
+              </span>
+              <h3 className="mt-5 text-lg font-extrabold">{f.title}</h3>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{f.desc}</p>
+            </Reveal>
+          ))}
+        </div>
+      </section>
+
+      {/* principles — inverted editorial band */}
+      <section className="band-invert mt-20 w-full rounded-2xl p-8 sm:p-12">
+        <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
+          <div className="lg:sticky lg:top-24 lg:max-w-xs">
+            <p className="section-kicker text-accent">
+              <span className="text-accent">اصول غیرقابل مذاکره</span>
+            </p>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              مهم نیست قول
+              <br />
+              بدهید؛ سیستم
+              <br />
+              <span className="text-accent">ثبت می‌کند.</span>
+            </h2>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2 lg:flex-1">
+            {principles.map((p, i) => (
+              <Reveal key={p} delay={i * 0.08} className="flex items-start gap-3 rounded-2xl border-2 border-border/60 p-5">
+                <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-success/20">
+                  <Flag className="h-4 w-4 text-success" />
+                </span>
+                <p className="text-sm font-medium leading-relaxed opacity-90">{p}</p>
+              </Reveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {sponsors.length > 0 && (
+        <section className="mt-20 w-full">
+          <div className="mx-auto max-w-md space-y-3 text-center">
+            <p className="section-kicker justify-center">حامیان</p>
+            <h2 className="text-3xl font-black tracking-tight sm:text-4xl">اسپانسرهای پرگار</h2>
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              سازمان‌ها و افرادی که مسیر یادگیری را ممکن می‌کنند.
+            </p>
+          </div>
+          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {sponsors.map((sp, i) => {
+              const inner = (
+                <Reveal
+                  delay={i * 0.08}
+                  className="flex h-full flex-col rounded-2xl border-2 border-border bg-card p-6 shadow-offset-sm transition hover-lift"
+                >
+                  <p className="text-lg font-extrabold">{sp.name}</p>
+                  {sp.blurb && (
+                    <p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">{sp.blurb}</p>
+                  )}
+                  {sp.url && (
+                    <span className="mt-4 inline-flex items-center gap-1 text-xs font-bold text-primary">
+                      مشاهده <ExternalLink className="h-3.5 w-3.5" />
+                    </span>
+                  )}
+                </Reveal>
+              );
+              return sp.url ? (
+                <a key={`${sp.name}-${i}`} href={sp.url} target="_blank" rel="noopener noreferrer" className="block">
+                  {inner}
+                </a>
+              ) : (
+                <div key={`${sp.name}-${i}`}>{inner}</div>
+              );
+            })}
+          </div>
+        </section>
+      )}
+
+      {/* final CTA */}
+      <section className="mt-20 w-full pb-4 text-center">
+        <Reveal>
+          <span className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-accent/10 shadow-offset-sm float-slow">
+            <Clock3 className="h-7 w-7 text-accent" />
+          </span>
+          <h2 className="mt-5 text-3xl font-black tracking-tight sm:text-4xl">آماده آغازید؟</h2>
+          <p className="mt-3 text-base text-muted-foreground">۱۲ هفته اثر — و سیستم کنترل را خودش بر عهده می‌گیرد.</p>
+          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+            {user ? (
+              <Button size="lg" onClick={goCap} className="gap-2 px-8">
+                <PlayCircle className="h-5 w-5" /> ادامه مسیر
+              </Button>
+            ) : (
+              <>
+                <Button size="lg" asChild className="gap-2 px-8">
+                  <Link href="/login">ورود</Link>
+                </Button>
+                <Button size="lg" variant="outline" asChild className="gap-2 px-8">
+                  <Link href="/login">
+                    <PlayCircle className="h-5 w-5" /> شروع مسیر
+                  </Link>
+                </Button>
+              </>
+            )}
+          </div>
+          <p className="mt-10 text-xs text-muted-foreground">
+            <BrandMark locale="fa" size="sm" className="align-middle" /> — نسخهٔ نمایشی · توسعه‌یافته توسط امیرحسین پناهی‌فر
+          </p>
+        </Reveal>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/player/[lessonId]/page.tsx b/frontend/src/app/player/[lessonId]/page.tsx
new file mode 100644
index 0000000..0166a46
--- /dev/null
+++ b/frontend/src/app/player/[lessonId]/page.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, Lock, TreePine } from "lucide-react";
+import { VideoPlayer } from "@/components/video-player";
+import { ApiError, http, toUserError } from "@/lib/api";
+import type { Lesson, LessonProgress } from "@/lib/types";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useAuth } from "@/lib/auth-store";
+import { formatFaNumber } from "@/lib/utils";
+import { hasInfiniteHearts } from "@/lib/hearts";
+
+function isLessonLockedError(error: unknown): boolean {
+  if (!(error instanceof ApiError)) return false;
+  if (error.status !== 403) return false;
+  return error.message.includes("قفل");
+}
+
+export default function PlayerPage() {
+  const { lessonId } = useParams<{ lessonId: string }>();
+  const id = Number(lessonId);
+  const router = useRouter();
+  const user = useAuth((s) => s.user);
+
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: ["lesson", id],
+    queryFn: () =>
+      http.get<{
+        lesson: Lesson;
+        videoUrl: string;
+        videoIsSample?: boolean;
+        progress: LessonProgress | null;
+        quizStatus: string;
+      }>(`/api/lessons/${id}`),
+    enabled: !!user && (!user.isLocked || hasInfiniteHearts(user.role)),
+    staleTime: 5 * 60_000,
+    retry: (count, err) => {
+      if (isLessonLockedError(err)) return false;
+      return count < 2;
+    },
+  });
+
+  useEffect(() => {
+    if (user?.isLocked && !hasInfiniteHearts(user.role)) router.replace("/lockout");
+  }, [user?.isLocked, user?.role, router]);
+
+  if (user?.isLocked && !hasInfiniteHearts(user.role)) {
+    return null;
+  }
+
+  if (isLoading) {
+    return (
+      <div className="mx-auto max-w-4xl space-y-6">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-10 w-10 rounded-xl" />
+            <div className="space-y-1.5">
+              <Skeleton className="h-6 w-64" />
+              <Skeleton className="h-4 w-48" />
+            </div>
+          </div>
+          <Skeleton className="h-8 w-28 rounded-full" />
+        </div>
+        <Skeleton className="aspect-video w-full rounded-2xl" />
+        <div className="flex items-center justify-between gap-4">
+          <Skeleton className="h-4 w-72" />
+          <Skeleton className="h-10 w-32 rounded-xl" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    if (isLessonLockedError(error)) {
+      return <LockedLessonState onBack={() => router.push("/cap")} />;
+    }
+    return (
+      <div className="mx-auto max-w-lg space-y-4 py-16 text-center">
+        <p className="font-medium text-destructive">{toUserError(error, "بارگذاری درس ممکن نشد")}</p>
+        <div className="flex justify-center gap-2">
+          <Button variant="outline" onClick={() => router.push("/cap")}>
+            بازگشت به درخت
+          </Button>
+          <Button onClick={() => refetch()}>تلاش دوباره</Button>
+        </div>
+      </div>
+    );
+  }
+
+  const { lesson, videoUrl, videoIsSample, progress, quizStatus } = data;
+  const passed = !!progress?.passedQuiz;
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-6">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-3">
+          <Button variant="outline" size="icon" onClick={() => router.push("/cap")} aria-label="بازگشت به درخت مهارت">
+            <ArrowRight className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">{lesson.title}</h1>
+            <p className="text-sm text-muted-foreground">{lesson.description}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {videoIsSample && (
+            <Badge variant="outline" className="px-3 py-1 text-muted-foreground">
+              نمونهٔ موقت
+            </Badge>
+          )}
+          {passed ? (
+            <Badge variant="success" className="px-3 py-1">تکمیل شده</Badge>
+          ) : (
+            <Badge variant="secondary" className="px-3 py-1">{formatFaNumber(lesson.xpReward)} امتیاز پاداش</Badge>
+          )}
+        </div>
+      </div>
+
+      {videoUrl ? (
+        <div className="space-y-2">
+          <VideoPlayer
+            lessonId={id}
+            videoUrl={videoUrl}
+            duration={lesson.durationSeconds}
+            completionThresholdPct={lesson.completionThresholdPct}
+            initialProgress={progress}
+          />
+          {videoIsSample && (
+            <p className="text-center text-xs text-muted-foreground">
+              ویدیوی اختصاصی هنوز وصل نشده — <span className="font-bold">sample.mp4</span> به‌عنوان حداقل پخش
+              نمایش داده می‌شود تا پلیر خالی نماند.
+            </p>
+          )}
+        </div>
+      ) : (
+        <div className="rounded-xl border border-dashed border-border p-10 text-center text-muted-foreground">
+          این درس هنوز ویدیو ندارد.
+        </div>
+      )}
+
+      <div className="flex items-center justify-between gap-4 text-sm">
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Lock className="h-4 w-4" />
+          آزمون با {`≥${lesson.completionThresholdPct}`}٪ زمان تماشای تاییدشده باز می‌شود.
+          {quizStatus === "failed" && (
+            <span className="text-destructive">تلاش قبلی ناموفق بود — هر وقت آماده بودید دوباره تلاش کنید.</span>
+          )}
+        </div>
+        {passed && (
+          <Button asChild variant="gradient">
+            <Link href="/cap">ادامه مسیر</Link>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function LockedLessonState({ onBack }: { onBack: () => void }) {
+  return (
+    <div className="mx-auto flex max-w-lg flex-col items-center px-2 py-10 text-center sm:py-16">
+      <div className="relative mb-6">
+        <div
+          aria-hidden
+          className="absolute inset-0 -m-6 rounded-full bg-muted/80 blur-2xl"
+        />
+        <div className="relative grid h-20 w-20 place-items-center rounded-3xl border-2 border-border bg-card shadow-offset-sm">
+          <Lock className="h-9 w-9 text-muted-foreground" strokeWidth={1.75} />
+        </div>
+      </div>
+
+      <p className="text-[11px] font-extrabold tracking-wider text-muted-foreground">پیش‌نیاز باز نشده</p>
+      <h1 className="mt-2 text-2xl font-black tracking-tight sm:text-3xl">این درس هنوز قفل است</h1>
+      <p className="mt-3 max-w-sm text-sm leading-relaxed text-muted-foreground">
+        اول درس قبلی را کامل تماشا کنید و در آزمونش قبول شوید؛ بعد این شاخه خودش باز می‌شود.
+      </p>
+
+      <div className="mt-8 flex w-full max-w-xs flex-col gap-2.5">
+        <Button size="lg" onClick={onBack} className="gap-2">
+          <TreePine className="h-4 w-4" />
+          بازگشت به درخت مهارت
+        </Button>
+        <Button
+          size="lg"
+          variant="outline"
+          onClick={() =>
+            window.dispatchEvent(new CustomEvent("pargar:chat", { detail: { open: true } }))
+          }
+        >
+          پرسیدن از منتور
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
new file mode 100644
index 0000000..85a97ef
--- /dev/null
+++ b/frontend/src/app/profile/page.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import Link from "next/link";
+import { useQuery } from "@tanstack/react-query";
+import { Flame, Heart, Sparkles, Trophy, User as UserIcon } from "lucide-react";
+import { useAuth } from "@/lib/auth-store";
+import { http, toUserError } from "@/lib/api";
+import type { LeaderboardData } from "@/lib/types";
+import { Panel } from "@/components/panel";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { UserAvatar, avatarPropsOf } from "@/components/ui/user-avatar";
+import { ProfileCertificateSlot } from "@/components/profile-certificate-slot";
+import { ChallengeCards } from "@/components/challenge-cards";
+import { AvatarStudio } from "@/components/avatar-studio";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { formatFaNumber, formatStreakLabel } from "@/lib/utils";
+import { useState } from "react";
+
+export default function ProfilePage() {
+  const user = useAuth((s) => s.user);
+  const [studioOpen, setStudioOpen] = useState(false);
+  const { data: lb, isError: lbError, error: lbErr } = useQuery({
+    queryKey: ["leaderboard"],
+    queryFn: () => http.get<LeaderboardData>("/api/leaderboard/weekly"),
+    enabled: !!user,
+  });
+
+  if (!user) {
+    return (
+      <div className="mx-auto max-w-2xl py-16 text-center">
+        <p className="text-muted-foreground">برای مشاهدهٔ پروفایل وارد شوید.</p>
+        <Button asChild className="mt-4">
+          <Link href="/login">ورود</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <Panel
+        title="پروفایل من"
+        description="هویت، آمار یادگیری، چالش‌ها و گواهینامه در یک نگاه."
+        icon={<UserIcon className="h-5 w-5" />}
+        tint="bg-primary/10 text-primary"
+        actions={
+          <Button variant="outline" size="sm" onClick={() => setStudioOpen(true)}>
+            ویرایش آواتار
+          </Button>
+        }
+      >
+        <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start">
+          <UserAvatar name={user.name} className="h-20 w-20" {...avatarPropsOf(user)} />
+          <div className="min-w-0 flex-1 space-y-2 text-center sm:text-start">
+            <h1 className="text-2xl font-black tracking-tight">{user.name}</h1>
+            <dl className="mt-1 space-y-2 text-sm">
+              <div className="flex items-baseline justify-between gap-3">
+                <dt className="shrink-0 text-xs text-muted-foreground">نام کاربری</dt>
+                <dd className="min-w-0 font-latin font-bold tracking-tight" dir="ltr">
+                  @{user.username}
+                </dd>
+              </div>
+              <div className="flex items-baseline justify-between gap-3">
+                <dt className="shrink-0 text-xs text-muted-foreground">ایمیل</dt>
+                <dd className="min-w-0 break-all font-latin font-medium" dir="ltr">
+                  {user.email}
+                </dd>
+              </div>
+              {user.phone && (
+                <div className="flex items-baseline justify-between gap-3">
+                  <dt className="shrink-0 text-xs text-muted-foreground">تلفن</dt>
+                  <dd className="min-w-0 font-latin font-medium" dir="ltr">
+                    {user.phone}
+                  </dd>
+                </div>
+              )}
+              <div className="flex items-baseline justify-between gap-3">
+                <dt className="shrink-0 text-xs text-muted-foreground">عضویت از</dt>
+                <dd className="min-w-0 font-medium">
+                  {new Date(user.createdAt).toLocaleDateString("fa-IR", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })}
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </Panel>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        <StatCard icon={<Sparkles className="h-4 w-4 text-gold" />} label="امتیاز کل" value={formatFaNumber(user.xp)} />
+        <StatCard icon={<Heart className="h-4 w-4 text-destructive" />} label="قلب‌ها" value={formatFaNumber(user.hearts)} />
+        <StatCard
+          icon={<Flame className="h-4 w-4 text-accent" />}
+          label="زنجیرهٔ فعلی"
+          value={formatStreakLabel(user.streakCurrent)}
+        />
+        <StatCard
+          icon={<Flame className="h-4 w-4 text-muted-foreground" />}
+          label="بلندترین زنجیره"
+          value={formatStreakLabel(user.streakLongest)}
+        />
+      </div>
+
+      <Card>
+        <CardContent className="flex items-center gap-3 p-4">
+          <Trophy className="h-5 w-5 text-gold" />
+          <div className="flex-1">
+            <p className="text-sm font-bold">رتبهٔ لیگ این هفته</p>
+            {lbError ? (
+              <p className="text-xs text-destructive">{toUserError(lbErr)}</p>
+            ) : lb?.me && lb.me.rank > 0 ? (
+              <p className="text-xs text-muted-foreground">
+                رتبه {formatFaNumber(lb.me.rank)} با {formatFaNumber(Math.round(lb.me.xp))} امتیاز هفتگی
+              </p>
+            ) : lb ? (
+              <p className="text-xs text-muted-foreground">هنوز در رتبه‌بندی این هفته نیستید</p>
+            ) : (
+              <Skeleton className="mt-1 h-3 w-40" />
+            )}
+          </div>
+          <Button asChild size="sm" variant="outline">
+            <Link href="/leaderboard">لیگ‌ها</Link>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <div>
+        <h2 className="mb-2 text-sm font-black text-muted-foreground">چالش‌های فعال</h2>
+        <ChallengeCards />
+      </div>
+
+      <div>
+        <h2 className="mb-2 text-sm font-black text-muted-foreground">گواهینامه</h2>
+        <ProfileCertificateSlot />
+      </div>
+
+      <Dialog open={studioOpen} onOpenChange={setStudioOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="text-center">ویرایش آواتار</DialogTitle>
+          </DialogHeader>
+          <AvatarStudio user={user} onClose={() => setStudioOpen(false)} />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
+  return (
+    <Card>
+      <CardContent className="flex items-center gap-3 p-4">
+        <div className="grid h-9 w-9 place-items-center rounded-lg bg-muted">{icon}</div>
+        <div>
+          <p className="text-xs text-muted-foreground">{label}</p>
+          <p className="text-lg font-black tabular-nums">{value}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/app/quiz/[lessonId]/page.tsx b/frontend/src/app/quiz/[lessonId]/page.tsx
new file mode 100644
index 0000000..29090f7
--- /dev/null
+++ b/frontend/src/app/quiz/[lessonId]/page.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth-store";
+import { hasInfiniteHearts } from "@/lib/hearts";
+import { QuizExperience } from "@/components/quiz-experience";
+
+export default function QuizPage() {
+  const { lessonId } = useParams<{ lessonId: string }>();
+  const id = Number(lessonId);
+  const router = useRouter();
+  const user = useAuth((s) => s.user);
+
+  useEffect(() => {
+    if (user?.isLocked && !hasInfiniteHearts(user.role)) {
+      router.replace("/lockout");
+    }
+  }, [user?.isLocked, user?.role, router]);
+
+  if (user?.isLocked && !hasInfiniteHearts(user.role)) {
+    return null;
+  }
+
+  return (
+    <div className="pt-2">
+      <QuizExperience lessonId={id} />
+    </div>
+  );
+}
diff --git a/frontend/src/app/recovery/page.tsx b/frontend/src/app/recovery/page.tsx
new file mode 100644
index 0000000..7adc19f
--- /dev/null
+++ b/frontend/src/app/recovery/page.tsx
@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+/** Self-service password recovery is disabled for students. */
+export default function RecoveryPage() {
+  redirect("/login");
+}
diff --git a/frontend/src/app/register/invite/[token]/page.tsx b/frontend/src/app/register/invite/[token]/page.tsx
new file mode 100644
index 0000000..eccf7c1
--- /dev/null
+++ b/frontend/src/app/register/invite/[token]/page.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2, Lock, Ticket } from "lucide-react";
+import { BrandMark } from "@/components/brand-mark";
+import { RegisterForm } from "@/components/register-form";
+import { http, ApiError } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+type InviteStatus = {
+  valid: boolean;
+  label?: string;
+};
+
+export default function InviteRegisterPage() {
+  const params = useParams<{ token: string }>();
+  const token = params?.token ?? "";
+
+  const { data: invite, isLoading, error, isError } = useQuery({
+    queryKey: ["auth", "register-invite", token],
+    queryFn: () => http.get<InviteStatus>(`/api/auth/register-invite/${encodeURIComponent(token)}`),
+    enabled: !!token,
+    retry: false,
+    meta: { silentError: true },
+  });
+
+  const closedMessage = (() => {
+    if (!isError) return null;
+    if (error instanceof ApiError) return error.message;
+    return "این لینک عضویت قابل استفاده نیست.";
+  })();
+
+  if (!token || isLoading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (closedMessage || !invite?.valid) {
+    return (
+      <div className="mx-auto flex min-h-[70vh] max-w-md flex-col justify-center px-4">
+        <div className="rounded-2xl border border-border bg-card p-8 text-center shadow-soft">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted">
+            <Lock className="h-5 w-5 text-muted-foreground" />
+          </div>
+          <BrandMark locale="fa" size="lg" logoOnly className="mx-auto mb-4" />
+          <h1 className="text-xl font-bold">لینک عضویت بسته است</h1>
+          <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+            {closedMessage ?? "این لینک عضویت قابل استفاده نیست."}
+          </p>
+          <Button asChild className="mt-6 w-full" variant="gradient">
+            <Link href="/login">ورود به حساب</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto flex min-h-[80vh] max-w-4xl flex-col justify-center py-8">
+      <div className="grid overflow-hidden rounded-2xl border border-border bg-card shadow-soft md:grid-cols-2">
+        <aside className="relative hidden flex-col justify-between overflow-hidden bg-primary p-8 text-primary-foreground md:flex">
+          <div
+            className="dot-grid pointer-events-none absolute -end-20 -top-20 h-72 w-72 rotate-12 text-primary-foreground opacity-50"
+            aria-hidden
+          />
+          <div className="relative">
+            <BrandMark locale="fa" size="lg" className="text-primary-foreground [&_span]:text-accent" />
+            <p className="section-kicker on-primary mt-6">عضویت با دعوت</p>
+            <h2 className="mt-4 text-2xl font-bold leading-snug">
+              {invite.label || "لینک اختصاصی"}
+            </h2>
+            <p className="mt-3 text-sm leading-relaxed text-primary-foreground/80">
+              با این دعوت می‌توانید حساب عضویت بسازید.
+            </p>
+            <p className="mt-2 text-sm leading-relaxed text-primary-foreground/70">
+              شماره تلفن و شبکه شما فقط یک‌بار برای ثبت‌نام قابل استفاده‌اند.
+            </p>
+          </div>
+          <p className="relative flex items-center gap-2 text-xs text-primary-foreground/70">
+            <Ticket className="h-3.5 w-3.5" />
+            پس از ثبت‌نام، پیامک را خودتان برای تیم ارسال کنید؛ سامانه پیامک خودکار ندارد.
+          </p>
+        </aside>
+
+        <div className="bg-card p-8 sm:p-10">
+          <CardHeader className="items-center px-0 pb-4 pt-0 text-center">
+            <div className="mb-2 flex justify-center md:hidden">
+              <BrandMark locale="fa" size="lg" logoOnly />
+            </div>
+            <CardTitle className="text-2xl">ساخت حساب با دعوت</CardTitle>
+            <CardDescription>
+              {invite.label ? invite.label : "فرم ثبت‌نام با لینک دعوت"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="px-0 pt-0">
+            <RegisterForm
+              endpoint={`/api/auth/register-invite/${encodeURIComponent(token)}`}
+              submitLabel="ثبت‌نام با دعوت"
+            />
+          </CardContent>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/register/page.tsx b/frontend/src/app/register/page.tsx
new file mode 100644
index 0000000..95d5411
--- /dev/null
+++ b/frontend/src/app/register/page.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2, Lock } from "lucide-react";
+import { BrandMark } from "@/components/brand-mark";
+import { RegisterForm } from "@/components/register-form";
+import { http } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function RegisterPage() {
+  const { data: status, isLoading: statusLoading } = useQuery({
+    queryKey: ["auth", "register-status"],
+    queryFn: () => http.get<{ enabled: boolean }>("/api/auth/register-status"),
+  });
+
+  if (statusLoading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!status?.enabled) {
+    return (
+      <div className="mx-auto flex min-h-[70vh] max-w-md flex-col justify-center px-4">
+        <div className="rounded-2xl border border-border bg-card p-8 text-center shadow-soft">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted">
+            <Lock className="h-5 w-5 text-muted-foreground" />
+          </div>
+          <BrandMark locale="fa" size="lg" logoOnly className="mx-auto mb-4" />
+          <h1 className="text-xl font-bold">ثبت‌نام عمومی بسته است</h1>
+          <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+            در حال حاضر امکان ساخت حساب از این صفحه وجود ندارد. اگر حساب دارید وارد شوید،
+            یا منتظر اعلام متصدی بمانید.
+          </p>
+          <Button asChild className="mt-6 w-full" variant="gradient">
+            <Link href="/login">ورود به حساب</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto flex min-h-[80vh] max-w-4xl flex-col justify-center px-4 py-8">
+      <div className="grid overflow-hidden rounded-2xl border border-border bg-card shadow-soft md:grid-cols-2">
+        <aside className="relative hidden flex-col justify-between overflow-hidden bg-primary p-7 text-primary-foreground md:flex">
+          <div
+            className="dot-grid pointer-events-none absolute -end-20 -top-20 h-72 w-72 rotate-12 text-primary-foreground opacity-50"
+            aria-hidden
+          />
+          <div className="relative">
+            <BrandMark locale="fa" size="lg" className="text-primary-foreground [&_span]:text-accent" />
+            <p className="section-kicker on-primary mt-5">ثبت‌نام</p>
+            <h2 className="mt-3 text-2xl font-bold leading-snug">
+              یک حساب.
+              <br />
+              یک مسیر.
+            </h2>
+            <p className="mt-2.5 text-sm leading-relaxed text-primary-foreground/80">
+              شماره تلفن شما یک‌بار مصرف است — هر شبکه فقط یک ثبت‌نام.
+            </p>
+          </div>
+          <p className="relative text-xs text-primary-foreground/70">
+            پس از ثبت‌نام، پیامک را خودتان برای تیم ارسال کنید؛ سامانه پیامک خودکار ندارد.
+          </p>
+        </aside>
+
+        <div className="bg-card p-6 sm:p-8">
+          <CardHeader className="items-center space-y-1.5 px-0 pb-4 pt-0 text-center">
+            <div className="mb-1 flex justify-center md:hidden">
+              <BrandMark locale="fa" size="lg" logoOnly />
+            </div>
+            <CardTitle className="text-2xl">ساخت حساب</CardTitle>
+            <CardDescription>در سه گام کوتاه حساب بسازید.</CardDescription>
+          </CardHeader>
+          <CardContent className="px-0 pt-0">
+            <RegisterForm endpoint="/api/auth/register" submitLabel="ثبت‌نام" />
+          </CardContent>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/robots.ts b/frontend/src/app/robots.ts
new file mode 100644
index 0000000..1543871
--- /dev/null
+++ b/frontend/src/app/robots.ts
@@ -0,0 +1,11 @@
+import type { MetadataRoute } from "next";
+
+/** Keep certificate share URLs out of search indexes (unlisted-by-link). */
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      disallow: ["/c/", "/api/certificates/"],
+    },
+  };
+}
diff --git a/frontend/src/app/unwrap/page.tsx b/frontend/src/app/unwrap/page.tsx
new file mode 100644
index 0000000..43126ba
--- /dev/null
+++ b/frontend/src/app/unwrap/page.tsx
@@ -0,0 +1,274 @@
+"use client";
+
+import { Suspense, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Award, CalendarDays, HeartHandshake, MessageSquareHeart, Sparkles } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { PageHeader } from "@/components/page-header";
+import { EventsPanel } from "@/components/events-panel";
+import { LeaderboardPanel } from "@/components/leaderboard-panel";
+import { CommunityPanel } from "@/components/community-panel";
+import { Button } from "@/components/ui/button";
+import { UserAvatar, avatarPropsOf } from "@/components/ui/user-avatar";
+import { Skeleton, SkeletonAvatar } from "@/components/ui/skeleton";
+import { Panel } from "@/components/panel";
+import { Badge } from "@/components/ui/badge";
+import type { Mentor } from "@/lib/types";
+import { http } from "@/lib/api";
+import type { ChatMessage, Conversation } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+type Tab = "events" | "chats" | "leagues" | "community";
+
+const TABS: Tab[] = ["events", "chats", "leagues", "community"];
+
+function parseTab(raw: string | null): Tab {
+  if (raw && (TABS as string[]).includes(raw)) {
+    return raw as Tab;
+  }
+  return "events";
+}
+
+export default function UnwrapPage() {
+  return (
+    <Suspense fallback={null}>
+      <HubTabs />
+    </Suspense>
+  );
+}
+
+function HubTabs() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const [tab, setTab] = useState<Tab>(() => parseTab(params.get("tab")));
+
+  useEffect(() => {
+    const raw = params.get("tab");
+    const next = parseTab(raw);
+    setTab(next);
+    // Invalid / unknown ?tab=… → clean URL so content isn't blank.
+    if (raw != null && raw !== next) {
+      router.replace(next === "events" ? "/unwrap" : `/unwrap?tab=${next}`, { scroll: false });
+    }
+  }, [params, router]);
+
+  const onTab = (value: string) => {
+    const next = parseTab(value);
+    setTab(next);
+    const url = next === "events" ? "/unwrap" : `/unwrap?tab=${next}`;
+    router.replace(url, { scroll: false });
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        kicker="مرکز"
+        title={
+          <>
+            جامعه، <span className="text-gradient-brand">استمرار و منتورها</span>
+          </>
+        }
+        description="رویدادهای زنده برای تقویت مهارت، لیگ‌های هفتگی برای ثبات، گفتگو با منتور، و هماهنگی حمایت مالی."
+        className="mb-0"
+      />
+
+      <Tabs value={tab} onValueChange={onTab} className="w-full space-y-5">
+        <TabsList className="grid h-auto w-full grid-cols-2 gap-1 p-1.5 sm:grid-cols-4">
+          <TabsTrigger value="events" className="h-10 gap-1.5 px-2 sm:px-3">
+            <CalendarDays className="h-4 w-4 shrink-0" />
+            <span className="truncate">رویدادها</span>
+          </TabsTrigger>
+          <TabsTrigger value="chats" className="h-10 gap-1.5 px-2 sm:px-3">
+            <MessageSquareHeart className="h-4 w-4 shrink-0" />
+            <span className="truncate">گفتگو با منتور</span>
+          </TabsTrigger>
+          <TabsTrigger value="leagues" className="h-10 gap-1.5 px-2 sm:px-3">
+            <Award className="h-4 w-4 shrink-0" />
+            <span className="truncate">لیگ‌ها</span>
+          </TabsTrigger>
+          <TabsTrigger value="community" className="h-10 gap-1.5 px-2 sm:px-3">
+            <HeartHandshake className="h-4 w-4 shrink-0" />
+            <span className="truncate">حمایت</span>
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="events" className="mt-0 space-y-4">
+          <button
+            type="button"
+            onClick={() => onTab("community")}
+            className="flex w-full items-center gap-3 rounded-2xl border-2 border-accent/30 bg-accent/5 px-4 py-3.5 text-start transition hover:bg-accent/10"
+          >
+            <span className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-accent/15 text-accent">
+              <HeartHandshake className="h-5 w-5" />
+            </span>
+            <span className="min-w-0 flex-1">
+              <span className="block text-sm font-extrabold">حمایت مالی</span>
+              <span className="mt-0.5 block text-xs text-muted-foreground">
+                هماهنگی دونیت از طریق گفتگو با تیم
+              </span>
+            </span>
+          </button>
+          <EventsPanel />
+        </TabsContent>
+        <TabsContent value="chats" className="mt-0">
+          <ChatsLauncher />
+        </TabsContent>
+        <TabsContent value="leagues" className="mt-0">
+          <LeaderboardPanel />
+        </TabsContent>
+        <TabsContent value="community" className="mt-0">
+          <CommunityPanel />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+function openChat(withId?: number) {
+  window.dispatchEvent(new CustomEvent("pargar:chat", { detail: { open: true, with: withId } }));
+}
+
+function ChatsLauncher() {
+  const { data, isLoading } = useQuery({
+    queryKey: ["mentors"],
+    queryFn: () => http.get<{ mentors: Mentor[] }>("/api/mentors"),
+  });
+  const { data: convData, isLoading: convLoading } = useQuery({
+    queryKey: ["conversations"],
+    queryFn: () => http.get<{ conversations: Conversation[] }>("/api/chats/conversations"),
+  });
+  const mentors = data?.mentors ?? [];
+  const conversations = convData?.conversations ?? [];
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-2">
+      <Panel className="justify-center text-center" title="گفتگوها" description="یک پنجرهٔ شناور شیشه‌ای در تمام صفحات — با صدا، عکس، ویدیو و پیام صوتی.">
+        <div className="flex flex-col items-center gap-4 pt-1">
+          <div className="grid h-14 w-14 place-items-center rounded-2xl bg-primary/10">
+            <MessageSquareHeart className="h-7 w-7 text-primary" />
+          </div>
+          <p className="max-w-sm text-sm text-muted-foreground">
+            گفتگو همیشه در دکمهٔ شناور پایین صفحه در دسترس شماست؛ گفتگوها خصوصی هستند و پاسخ منتورها معمولاً کمتر از یک روز طول می‌کشد.
+          </p>
+          <Button onClick={() => openChat()} className="gap-2">
+            <Sparkles className="h-4 w-4" /> باز کردن گفتگوها
+          </Button>
+        </div>
+      </Panel>
+
+      <Panel title="گفتگوهای شما" description="مکالمات جاری با منتورها — روی هر کدام بزنید تا باز شود.">
+        <div className="space-y-1.5 pt-1">
+          {convLoading && (
+            <div className="space-y-2">
+              {[0, 1, 2].map((i) => (
+                <div key={i} className="flex items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5">
+                  <SkeletonAvatar />
+                  <div className="flex-1 space-y-1.5">
+                    <div className="flex items-center justify-between gap-2">
+                      <Skeleton className="h-4 w-32" />
+                      <Skeleton className="h-3 w-14" />
+                    </div>
+                    <Skeleton className="h-3 w-2/3" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+          {conversations.map((c) => (
+            <button
+              key={c.partner.id}
+              onClick={() => openChat(c.partner.id)}
+              className="flex w-full items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5 text-right transition-colors hover:border-primary/50 hover:bg-primary/5"
+            >
+              <UserAvatar name={c.partner.name} className="h-10 w-10" {...avatarPropsOf(c.partner)} />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="truncate font-bold">{c.partner.name}</p>
+                  {c.lastMessage && (
+                    <span className="shrink-0 text-[10px] text-muted-foreground">{timeAgo(c.lastMessage.createdAt)}</span>
+                  )}
+                </div>
+                <p
+                  dir="auto"
+                  className={cn(
+                    "truncate text-xs [unicode-bidi:plaintext]",
+                    c.unreadCount > 0 ? "font-bold text-foreground" : "text-muted-foreground"
+                  )}
+                >
+                  {c.lastMessage ? messagePreview(c.lastMessage) : "پیامی ندارد"}
+                </p>
+              </div>
+              {c.unreadCount > 0 && (
+                <Badge variant="accent" className="h-5 min-w-5 justify-center rounded-full px-1.5">
+                  {c.unreadCount}
+                </Badge>
+              )}
+            </button>
+          ))}
+          {!convLoading && conversations.length === 0 && (
+            <p className="px-1 text-sm text-muted-foreground">
+              هنوز گفتگویی ندارید — از «شروع سریع» یک منتور انتخاب کنید.
+            </p>
+          )}
+        </div>
+      </Panel>
+
+      <Panel title="شروع سریع با منتور" description="یک گفتگو را مستقیم باز کنید.">
+        <div className="space-y-1 pt-1">
+          {isLoading && (
+            <div className="space-y-2">
+              {[0, 1, 2, 3].map((i) => (
+                <div key={i} className="flex items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5">
+                  <SkeletonAvatar />
+                  <div className="flex-1 space-y-1.5">
+                    <Skeleton className="h-4 w-40" />
+                    <Skeleton className="h-3 w-16" />
+                  </div>
+                  <Skeleton className="h-5 w-20 rounded-full" />
+                </div>
+              ))}
+            </div>
+          )}
+          {mentors.map((m) => (
+            <button
+              key={m.id}
+              onClick={() => openChat(m.id)}
+              className="flex w-full items-center gap-3 rounded-xl border-2 border-border/70 px-3 py-2.5 text-right transition-colors hover:border-primary/50 hover:bg-primary/5"
+            >
+              <UserAvatar name={m.name} className="h-10 w-10" {...avatarPropsOf(m)} />
+              <div className="min-w-0 flex-1">
+                <p className="truncate font-bold">{m.name}</p>
+                <p className="text-xs text-muted-foreground">منتور</p>
+              </div>
+              <span className="inline-flex items-center gap-1.5 text-xs font-bold text-success">
+                <span className="h-1.5 w-1.5 rounded-full bg-success" /> در دسترس
+              </span>
+            </button>
+          ))}
+          {!isLoading && mentors.length === 0 && (
+            <p className="text-sm text-muted-foreground">هنوز منتوری در دسترس نیست.</p>
+          )}
+        </div>
+      </Panel>
+    </div>
+  );
+}
+
+function messagePreview(m: ChatMessage) {
+  if (m.body) return m.body;
+  if (m.attachment) {
+    const labels: Record<string, string> = { image: "📷 عکس", video: "🎬 ویدیو", audio: "🎵 پیام صوتی" };
+    return labels[m.attachment.type] ?? `📎 ${m.attachment.name}`;
+  }
+  return "";
+}
+
+function timeAgo(iso: string) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const m = Math.floor(diff / 60_000);
+  if (m < 1) return "الان";
+  if (m < 60) return `${m} دقیقه قبل`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h} ساعت قبل`;
+  return new Date(iso).toLocaleDateString("fa-IR");
+}
\ No newline at end of file