From c4a268ffb6511cb03887163f8bc7bfebd035548a Mon Sep 17 00:00:00 2001
From: PushkarDesai-06 <pushkarjdesai@gmail.com>
Date: Wed, 16 Sep 2026 22:57:29 +0530
Subject: [PATCH 1/2] refactor: split app and marketing route groups
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The root layout forced `max-w-4xl` on every page, so the landing page could
never run full-bleed. Move the signed-in pages under `(app)` and the landing
page under `(marketing)`, and give each group its own layout: `(app)` keeps the
reading-width container, `(marketing)` imposes nothing.

Route groups don't appear in URLs, so every path is unchanged. The page files
are pure moves — no content edits.
---
 app/{ => (app)}/account/page.tsx                |  0
 app/{ => (app)}/assessment/page.tsx             |  0
 app/{ => (app)}/curriculum/page.tsx             |  0
 app/{ => (app)}/dashboard/DashboardSkeleton.tsx |  0
 app/{ => (app)}/dashboard/loading.tsx           |  0
 app/{ => (app)}/dashboard/page.tsx              |  0
 app/(app)/layout.tsx                            | 15 +++++++++++++++
 app/{ => (app)}/learn/[lessonId]/page.tsx       |  0
 app/{ => (app)}/login/page.tsx                  |  0
 app/{ => (app)}/onboarding/page.tsx             |  0
 app/{ => (app)}/topics/page.tsx                 |  0
 app/{ => (app)}/tutor/page.tsx                  |  0
 app/(marketing)/layout.tsx                      | 11 +++++++++++
 app/{ => (marketing)}/page.tsx                  |  0
 app/layout.tsx                                  |  6 +++---
 15 files changed, 29 insertions(+), 3 deletions(-)
 rename app/{ => (app)}/account/page.tsx (100%)
 rename app/{ => (app)}/assessment/page.tsx (100%)
 rename app/{ => (app)}/curriculum/page.tsx (100%)
 rename app/{ => (app)}/dashboard/DashboardSkeleton.tsx (100%)
 rename app/{ => (app)}/dashboard/loading.tsx (100%)
 rename app/{ => (app)}/dashboard/page.tsx (100%)
 create mode 100644 app/(app)/layout.tsx
 rename app/{ => (app)}/learn/[lessonId]/page.tsx (100%)
 rename app/{ => (app)}/login/page.tsx (100%)
 rename app/{ => (app)}/onboarding/page.tsx (100%)
 rename app/{ => (app)}/topics/page.tsx (100%)
 rename app/{ => (app)}/tutor/page.tsx (100%)
 create mode 100644 app/(marketing)/layout.tsx
 rename app/{ => (marketing)}/page.tsx (100%)

diff --git a/app/account/page.tsx b/app/(app)/account/page.tsx
similarity index 100%
rename from app/account/page.tsx
rename to app/(app)/account/page.tsx
diff --git a/app/assessment/page.tsx b/app/(app)/assessment/page.tsx
similarity index 100%
rename from app/assessment/page.tsx
rename to app/(app)/assessment/page.tsx
diff --git a/app/curriculum/page.tsx b/app/(app)/curriculum/page.tsx
similarity index 100%
rename from app/curriculum/page.tsx
rename to app/(app)/curriculum/page.tsx
diff --git a/app/dashboard/DashboardSkeleton.tsx b/app/(app)/dashboard/DashboardSkeleton.tsx
similarity index 100%
rename from app/dashboard/DashboardSkeleton.tsx
rename to app/(app)/dashboard/DashboardSkeleton.tsx
diff --git a/app/dashboard/loading.tsx b/app/(app)/dashboard/loading.tsx
similarity index 100%
rename from app/dashboard/loading.tsx
rename to app/(app)/dashboard/loading.tsx
diff --git a/app/dashboard/page.tsx b/app/(app)/dashboard/page.tsx
similarity index 100%
rename from app/dashboard/page.tsx
rename to app/(app)/dashboard/page.tsx
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
new file mode 100644
index 0000000..5d58b33
--- /dev/null
+++ b/app/(app)/layout.tsx
@@ -0,0 +1,15 @@
+/**
+ * Layout for the signed-in product surface.
+ *
+ * Holds the reading-width container every app page expects. The landing page
+ * lives in `(marketing)` instead, where it is free to run full-bleed.
+ */
+export default function AppLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-8 sm:px-6">
+      {children}
+    </main>
+  );
+}
diff --git a/app/learn/[lessonId]/page.tsx b/app/(app)/learn/[lessonId]/page.tsx
similarity index 100%
rename from app/learn/[lessonId]/page.tsx
rename to app/(app)/learn/[lessonId]/page.tsx
diff --git a/app/login/page.tsx b/app/(app)/login/page.tsx
similarity index 100%
rename from app/login/page.tsx
rename to app/(app)/login/page.tsx
diff --git a/app/onboarding/page.tsx b/app/(app)/onboarding/page.tsx
similarity index 100%
rename from app/onboarding/page.tsx
rename to app/(app)/onboarding/page.tsx
diff --git a/app/topics/page.tsx b/app/(app)/topics/page.tsx
similarity index 100%
rename from app/topics/page.tsx
rename to app/(app)/topics/page.tsx
diff --git a/app/tutor/page.tsx b/app/(app)/tutor/page.tsx
similarity index 100%
rename from app/tutor/page.tsx
rename to app/(app)/tutor/page.tsx
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
new file mode 100644
index 0000000..f5002a5
--- /dev/null
+++ b/app/(marketing)/layout.tsx
@@ -0,0 +1,11 @@
+/**
+ * Layout for the signed-out marketing surface.
+ *
+ * Deliberately unconstrained: the landing page composes its own full-bleed
+ * sections and sets its own rhythm, so no max-width or padding is imposed here.
+ */
+export default function MarketingLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return <main className="flex-1">{children}</main>;
+}
diff --git a/app/page.tsx b/app/(marketing)/page.tsx
similarity index 100%
rename from app/page.tsx
rename to app/(marketing)/page.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
index 71493a8..3a3d582 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -69,9 +69,9 @@ export default function RootLayout({
       <body className="bg-background text-foreground flex min-h-full flex-col">
         <SessionProvider>
           <Nav />
-          <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-8 sm:px-6">
-            {children}
-          </main>
+          {/* The <main> wrapper lives in the route-group layouts: `(app)` sets
+              the reading-width container, `(marketing)` stays full-bleed. */}
+          {children}
         </SessionProvider>
         <Toaster richColors position="bottom-right" theme="dark" />
       </body>

From eb5ecd872e309d3a0307cffe9499615215b4b7d6 Mon Sep 17 00:00:00 2001
From: PushkarDesai-06 <pushkarjdesai@gmail.com>
Date: Wed, 16 Sep 2026 23:08:34 +0530
Subject: [PATCH 2/2] feat: redesign the landing page around the adaptive
 mechanic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The old page described the product in a paragraph and three short pillars.
Anyone can claim "adapts to you"; the thing worth showing is the mechanic
itself, so the page now demonstrates it.

- Hero: larger display type, a self-drawing underline, staggered entrance, and
  a factual capability strip (no invented numbers or testimonials).
- 01 The mechanic: AdaptivePathDemo, a looping four-stage animation of a real
  path — seeded mastery skips a lesson, EWMA promotes one, a weak answer flips
  another to needs-review and hoists it to the top. Rows are absolutely
  positioned and moved by translateY so reorders animate rather than snap.
  Auto-advances, pauses on a deliberate click, holds still under
  prefers-reduced-motion.
- 02 The flow / 03 Inside a lesson / 04 The tutor: concrete surfaces instead of
  claims — the real practice card, and a tutor exchange that plays out to the
  learner's own realization.
- Close + footer, so the page ends deliberately.

Two background overlays replace the single one: the top of the wave field was
bright enough to eat the headline's contrast, and flattening the bottom to
solid left every section below the fold on dead black.

Motion (.reveal, .underline-draw) is CSS and all of it is disabled under
prefers-reduced-motion. Reveal drives an attribute rather than state, so
scrolling costs no re-renders.
---
 .../_components/AdaptivePathDemo.tsx          | 228 ++++++++++
 app/(marketing)/_components/Reveal.tsx        |  57 +++
 app/(marketing)/page.tsx                      | 401 +++++++++++++++---
 app/globals.css                               |  45 +-
 summary.md                                    |  13 +-
 5 files changed, 682 insertions(+), 62 deletions(-)
 create mode 100644 app/(marketing)/_components/AdaptivePathDemo.tsx
 create mode 100644 app/(marketing)/_components/Reveal.tsx

diff --git a/app/(marketing)/_components/AdaptivePathDemo.tsx b/app/(marketing)/_components/AdaptivePathDemo.tsx
new file mode 100644
index 0000000..bd18e5c
--- /dev/null
+++ b/app/(marketing)/_components/AdaptivePathDemo.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Check, RotateCcw, Lock, Dot } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+/**
+ * The landing page's centerpiece: the adaptive path, moving.
+ *
+ * Describing "the curriculum reorders itself as your mastery shifts" in a
+ * paragraph is forgettable; watching a lesson flip to needs-review and climb
+ * back up the list is not. Each stage mirrors a real transition from
+ * `lib/domain/adapt.ts` + `mastery.ts` — seeded mastery skips a lesson, EWMA
+ * promotes one, a weak answer demotes another and hoists it.
+ *
+ * Rows are absolutely positioned and moved by `translateY`, so a reorder
+ * animates instead of snapping. Pure CSS/state — no animation library.
+ */
+
+const ROW_PX = 56;
+
+type Status = "mastered" | "progress" | "review" | "locked" | "available";
+
+interface Stage {
+  /** Lesson ids, top to bottom. */
+  order: string[];
+  status: Record<string, Status>;
+  label: string;
+  caption: string;
+}
+
+const LESSONS: Record<string, string> = {
+  io: "Reading CSVs with pandas",
+  idx: "Indexing and selection",
+  grp: "GroupBy aggregations",
+  join: "Merging and joins",
+  ts: "Time series resampling",
+};
+
+const STAGES: Stage[] = [
+  {
+    label: "After the quiz",
+    order: ["io", "idx", "grp", "join", "ts"],
+    status: {
+      io: "mastered",
+      idx: "available",
+      grp: "locked",
+      join: "locked",
+      ts: "locked",
+    },
+    caption:
+      "Your intake quiz already showed you can load a file. That lesson starts mastered — and gets skipped.",
+  },
+  {
+    label: "You practice",
+    order: ["io", "idx", "grp", "join", "ts"],
+    status: {
+      io: "mastered",
+      idx: "mastered",
+      grp: "progress",
+      join: "locked",
+      ts: "locked",
+    },
+    caption:
+      "Mastery is a rolling average over every practice answer — not a checkbox you tick.",
+  },
+  {
+    label: "A shaky answer",
+    order: ["io", "idx", "grp", "join", "ts"],
+    status: {
+      io: "mastered",
+      idx: "mastered",
+      grp: "review",
+      join: "available",
+      ts: "locked",
+    },
+    caption:
+      "Two weak answers on group-bys drop that score below the review threshold.",
+  },
+  {
+    label: "The path rewrites",
+    order: ["grp", "join", "ts", "io", "idx"],
+    status: {
+      grp: "review",
+      join: "available",
+      ts: "available",
+      io: "mastered",
+      idx: "mastered",
+    },
+    caption:
+      "So the weak lesson is hoisted back to the front, prerequisites still respected, and mastered work sinks.",
+  },
+];
+
+const STATUS_LABEL: Record<Status, string> = {
+  mastered: "Mastered",
+  progress: "In progress",
+  review: "Needs review",
+  locked: "Locked",
+  available: "Up next",
+};
+
+function StatusIcon({ status }: { status: Status }) {
+  if (status === "mastered") return <Check className="size-3.5" />;
+  if (status === "review") return <RotateCcw className="size-3.5" />;
+  if (status === "locked") return <Lock className="size-3.5" />;
+  return <Dot className="size-3.5" />;
+}
+
+export function AdaptivePathDemo() {
+  const [stage, setStage] = useState(0);
+  const [auto, setAuto] = useState(true);
+  const current = STAGES[stage];
+
+  useEffect(() => {
+    if (!auto) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const t = setInterval(() => setStage((s) => (s + 1) % STAGES.length), 3400);
+    return () => clearInterval(t);
+  }, [auto]);
+
+  function pick(i: number) {
+    setAuto(false); // a deliberate click wins over the carousel
+    setStage(i);
+  }
+
+  return (
+    <div className="bg-surface-1/60 border-border/60 relative overflow-hidden rounded-2xl border backdrop-blur-sm">
+      {/* Window chrome — frames it as a product surface, not a diagram. */}
+      <div className="border-border/60 flex items-center gap-2 border-b px-4 py-2.5">
+        <span className="text-muted-foreground/70 font-mono text-[10px] uppercase tracking-[0.16em]">
+          Your path
+        </span>
+        <span className="text-muted-foreground/40 font-mono text-[10px]">
+          / Python for data analysis
+        </span>
+      </div>
+
+      <div className="p-4 sm:p-6">
+        <div
+          className="relative"
+          style={{ height: STAGES[0].order.length * ROW_PX }}
+        >
+          {Object.entries(LESSONS).map(([id, title]) => {
+            const pos = current.order.indexOf(id);
+            const status = current.status[id];
+            const dim = status === "locked";
+            return (
+              <div
+                key={id}
+                className={cn(
+                  "border-border/50 bg-surface-1 absolute inset-x-0 flex h-12 items-center gap-3 rounded-xl border px-3",
+                  "transition-[transform,opacity,border-color] duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]",
+                  dim && "opacity-45",
+                  status === "review" && "border-tone-review/40",
+                  status === "mastered" && "border-tone-mastered/25",
+                )}
+                style={{ transform: `translateY(${pos * ROW_PX}px)` }}
+              >
+                <span
+                  className={cn(
+                    "flex size-6 shrink-0 items-center justify-center rounded-full",
+                    status === "mastered" &&
+                      "bg-tone-mastered/15 text-tone-mastered",
+                    status === "review" && "bg-tone-review/15 text-tone-review",
+                    status === "progress" &&
+                      "bg-tone-progress/15 text-tone-progress",
+                    (status === "locked" || status === "available") &&
+                      "bg-muted text-muted-foreground",
+                  )}
+                >
+                  <StatusIcon status={status} />
+                </span>
+                <span
+                  className={cn(
+                    "flex-1 truncate text-sm",
+                    status === "mastered" && "text-muted-foreground",
+                  )}
+                >
+                  {title}
+                </span>
+                <Badge
+                  variant="status"
+                  tone={status === "available" ? "generating" : status}
+                  className="hidden shrink-0 sm:inline-flex"
+                >
+                  {STATUS_LABEL[status]}
+                </Badge>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Stage caption + scrubber */}
+        <div className="border-border/60 mt-5 flex flex-col gap-3 border-t pt-4">
+          <div className="flex items-baseline gap-3">
+            <span className="text-muted-foreground/70 font-mono text-[10px] uppercase tracking-[0.16em]">
+              {String(stage + 1).padStart(2, "0")}
+            </span>
+            <span className="text-sm font-medium">{current.label}</span>
+          </div>
+          <p
+            key={stage} // re-key so the caption fades on every change
+            className="text-muted-foreground animate-in fade-in-0 min-h-[2.5rem] text-sm leading-relaxed duration-500"
+          >
+            {current.caption}
+          </p>
+          <div className="flex gap-1.5" role="tablist" aria-label="Path stages">
+            {STAGES.map((s, i) => (
+              <button
+                key={s.label}
+                role="tab"
+                aria-selected={i === stage}
+                aria-label={s.label}
+                onClick={() => pick(i)}
+                className={cn(
+                  "h-1 flex-1 rounded-full transition-colors duration-300",
+                  i === stage ? "bg-primary/70" : "bg-border hover:bg-border/80",
+                )}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(marketing)/_components/Reveal.tsx b/app/(marketing)/_components/Reveal.tsx
new file mode 100644
index 0000000..d159524
--- /dev/null
+++ b/app/(marketing)/_components/Reveal.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Reveals its children once they scroll into view.
+ *
+ * The observer flips a `data-shown` attribute directly on the node rather than
+ * going through state: a landing page has a dozen of these, and none of them
+ * needs a re-render to change opacity. It also keeps the effect free of the
+ * setState React 19's `react-hooks/set-state-in-effect` rule flags.
+ *
+ * The animation itself is CSS (`.reveal` in globals.css), which is also where
+ * it's turned off under `prefers-reduced-motion`.
+ */
+export function Reveal({
+  children,
+  delay = 0,
+  className,
+  as: Tag = "div",
+}: {
+  children: React.ReactNode;
+  /** Stagger, in ms, for items revealed as a group. */
+  delay?: number;
+  className?: string;
+  as?: "div" | "section" | "li";
+}) {
+  const ref = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        el.dataset.shown = "true";
+        io.disconnect(); // one-way: revealed stays revealed
+      },
+      // Fire a little before the element is fully on screen.
+      { rootMargin: "0px 0px -12% 0px" },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  return (
+    <Tag
+      ref={ref as React.Ref<never>}
+      data-shown="false"
+      style={delay ? { transitionDelay: `${delay}ms` } : undefined}
+      className={cn("reveal", className)}
+    >
+      {children}
+    </Tag>
+  );
+}
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index dce5129..d2a5e50 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -3,15 +3,79 @@
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import dynamic from "next/dynamic";
-import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { ArrowRight, Check, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { PageLoader } from "@/components/ui/loading-ring";
 import { useSession } from "@/components/SessionProvider";
+import { Reveal } from "./_components/Reveal";
+import { AdaptivePathDemo } from "./_components/AdaptivePathDemo";
 
 // WebGL background — client-only. three.js can't run during SSR, and this
 // keeps the ~three.js chunk out of the initial bundle until the page mounts.
 const Dither = dynamic(() => import("@/components/Dither"), { ssr: false });
 
+/** Shared section heading: mono index, display title, optional standfirst. */
+function SectionHead({
+  index,
+  title,
+  lead,
+}: {
+  index: string;
+  title: string;
+  lead?: string;
+}) {
+  return (
+    <Reveal className="flex flex-col gap-3">
+      <span className="text-muted-foreground/60 font-mono text-[10px] uppercase tracking-[0.18em]">
+        {index}
+      </span>
+      <h2 className="h-display text-2xl sm:text-3xl">{title}</h2>
+      {lead && (
+        <p className="text-muted-foreground max-w-xl text-sm leading-relaxed">
+          {lead}
+        </p>
+      )}
+    </Reveal>
+  );
+}
+
+const STEPS = [
+  {
+    n: "01",
+    t: "Describe",
+    d: "Say what you want to learn, however vaguely. A clarity loop asks follow-ups until the goal is sharp enough to plan against.",
+  },
+  {
+    n: "02",
+    t: "Diagnose",
+    d: "A short adaptive quiz spans difficulty bands to find where you actually are — with an honest “I don't know” on every question.",
+  },
+  {
+    n: "03",
+    t: "Generate",
+    d: "Modules and lessons are written for that level and sorted by prerequisite, so nothing arrives before the thing it depends on.",
+  },
+  {
+    n: "04",
+    t: "Adapt",
+    d: "Every practice answer moves a rolling mastery score. The path reorders, skips what you've proven, and resurfaces what slipped.",
+  },
+];
+
+const TUTOR_THREAD = [
+  { from: "learner", text: "Just tell me why my group-by returns NaN." },
+  {
+    from: "tutor",
+    text: "Not yet — you're close. Before the group-by runs, what does that column's dtype say? And what does sum() do with a value it can't add?",
+  },
+  { from: "learner", text: "…oh. It's an object column, not a float." },
+  {
+    from: "tutor",
+    text: "That's it. So what's the one call you'd put in front of the group-by?",
+  },
+] as const;
+
 export default function Home() {
   const router = useRouter();
   const { me } = useSession();
@@ -26,10 +90,10 @@ export default function Home() {
 
   return (
     <>
-      {/* Full-bleed animated background — scoped to this page, fixed behind all
-          content. Cool-slate waves sit inside the ~200° theme; the gradient
-          darkens downward so copy stays legible and the field blends into the
-          page background. Mouse interaction is off since it sits behind content. */}
+      {/* Full-bleed animated background — fixed behind all content. Cool-slate
+          waves sit inside the ~200° theme; the gradient darkens downward so
+          copy stays legible and the field blends into the page background.
+          Mouse interaction is off since it sits behind content. */}
       <div className="pointer-events-none fixed inset-0 -z-10">
         <Dither
           waveColor={[0.3, 0.4, 0.46]}
@@ -40,63 +104,284 @@ export default function Home() {
           pixelSize={2}
           enableMouseInteraction={false}
         />
-        <div className="from-background/25 via-background/55 to-background absolute inset-0 bg-linear-to-b" />
+        {/* Two overlays. The vertical one tames the bright top of the field so
+            the headline keeps its contrast, and stops at /92 rather than solid
+            so the lower sections still sit on a living surface instead of flat
+            black. The radial one vignettes the corners inward. */}
+        <div className="from-background/55 via-background/78 to-background/92 absolute inset-0 bg-linear-to-b" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_50%_0%,transparent_35%,var(--background)_100%)] opacity-70" />
       </div>
 
-      <div className="mx-auto flex max-w-2xl flex-col gap-8 py-12 sm:py-20">
-        <p className="text-muted-foreground font-mono text-[10px] uppercase tracking-[0.18em]">
-          Adaptive learning, paced for you
-        </p>
-        <h1 className="h-display text-4xl sm:text-5xl">
-          A path drawn from where you actually are.
-        </h1>
-        <p className="text-muted-foreground max-w-xl text-base leading-relaxed">
-          Describe what you want to learn. LearnPath diagnoses your level with a
-          short adaptive quiz, generates a curriculum that respects what you
-          already know, and reorders itself as your mastery shifts. A Socratic
-          tutor stays beside you — guiding, never handing over the answer.
-        </p>
-        <div className="flex flex-wrap items-center gap-3">
-          <Button size="lg" onClick={() => router.push("/login")}>
-            Get started
-            <ArrowRight data-icon="inline-end" />
-          </Button>
-          <span className="text-muted-foreground font-mono text-xs">
-            Sign in to pick up where you left off.
-          </span>
+      {/* ── Hero ─────────────────────────────────────────────────────────── */}
+      <section className="mx-auto w-full max-w-4xl px-4 pt-16 pb-20 sm:px-6 sm:pt-28 sm:pb-28">
+        <div className="flex flex-col gap-7">
+          <Reveal>
+            <p className="text-muted-foreground font-mono text-[10px] uppercase tracking-[0.18em]">
+              Adaptive learning, paced for you
+            </p>
+          </Reveal>
+          <Reveal delay={80}>
+            <h1 className="h-display text-[2.75rem] leading-[1.02] sm:text-6xl lg:text-7xl">
+              A path drawn from
+              <br className="hidden sm:block" /> where you{" "}
+              <span className="relative whitespace-nowrap">
+                actually are
+                {/* Hand-drawn underline: draws itself once, then rests. */}
+                <svg
+                  aria-hidden
+                  viewBox="0 0 300 12"
+                  preserveAspectRatio="none"
+                  className="text-primary/50 absolute bottom-[-0.16em] left-0 h-[0.3em] w-full"
+                >
+                  <path
+                    d="M2 8C60 3 120 2 180 4C220 5.2 260 7 298 5"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    className="underline-draw"
+                  />
+                </svg>
+              </span>
+              .
+            </h1>
+          </Reveal>
+          <Reveal delay={160}>
+            <p className="text-muted-foreground max-w-xl text-base leading-relaxed sm:text-lg">
+              Most courses start at lesson one whoever you are. LearnPath
+              diagnoses your level first, writes a curriculum around it, and
+              keeps rewriting that curriculum as your mastery shifts.
+            </p>
+          </Reveal>
+          <Reveal delay={240}>
+            <div className="flex flex-wrap items-center gap-3">
+              <Button
+                size="lg"
+                className="h-11 px-5 text-sm"
+                onClick={() => router.push("/login")}
+              >
+                Get started
+                <ArrowRight data-icon="inline-end" />
+              </Button>
+              <Button
+                size="lg"
+                variant="ghost"
+                className="text-muted-foreground h-11 px-4 text-sm"
+                asChild
+              >
+                <Link href="/login">I already have an account</Link>
+              </Button>
+            </div>
+          </Reveal>
+          <Reveal delay={320}>
+            <ul className="text-muted-foreground/70 border-border/60 flex flex-wrap items-center gap-x-5 gap-y-2 border-t pt-6 font-mono text-[11px]">
+              {[
+                "Adaptive intake quiz",
+                "Prerequisite-ordered path",
+                "AI-authored lessons",
+                "Socratic tutor",
+              ].map((f) => (
+                <li key={f} className="flex items-center gap-1.5">
+                  <span className="bg-primary/50 size-1 rounded-full" />
+                  {f}
+                </li>
+              ))}
+            </ul>
+          </Reveal>
         </div>
+      </section>
 
-        {/* Three quiet pillars */}
-        <ul className="border-border mt-6 grid gap-x-8 gap-y-6 border-t pt-8 sm:grid-cols-3">
-          {[
-            {
-              n: "01",
-              t: "Diagnose",
-              d: "A short adaptive quiz finds your actual level — no guessing.",
-            },
-            {
-              n: "02",
-              t: "Generate",
-              d: "Modules and lessons are written for you, in the right order.",
-            },
-            {
-              n: "03",
-              t: "Adapt",
-              d: "Mastery moves the path. Review surfaces what you forget.",
-            },
-          ].map((p) => (
-            <li key={p.n} className="flex flex-col gap-2">
-              <span className="text-muted-foreground/60 font-mono text-[10px] tracking-[0.16em]">
-                {p.n}
-              </span>
-              <span className="font-medium">{p.t}</span>
-              <span className="text-muted-foreground text-sm leading-relaxed">
-                {p.d}
-              </span>
-            </li>
-          ))}
-        </ul>
-      </div>
+      {/* ── 01 · The adaptive mechanic, demonstrated ─────────────────────── */}
+      <section className="border-border/60 border-t">
+        <div className="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-20 sm:px-6 sm:py-24">
+          <SectionHead
+            index="01 · The mechanic"
+            title="The path rewrites itself."
+            lead="Not a playlist you work through in order. Mastery is a rolling score over every answer you give, and it decides what sits at the top of your path next."
+          />
+          <Reveal delay={100}>
+            <AdaptivePathDemo />
+          </Reveal>
+        </div>
+      </section>
+
+      {/* ── 02 · How it works ───────────────────────────────────────────── */}
+      <section className="border-border/60 border-t">
+        <div className="mx-auto flex w-full max-w-4xl flex-col gap-10 px-4 py-20 sm:px-6 sm:py-24">
+          <SectionHead index="02 · The flow" title="Four steps, then it runs." />
+          <ol className="grid gap-x-8 gap-y-10 sm:grid-cols-2">
+            {STEPS.map((s, i) => (
+              <Reveal as="li" key={s.n} delay={i * 70}>
+                <div className="flex flex-col gap-2.5">
+                  <div className="flex items-center gap-3">
+                    <span className="text-muted-foreground/50 font-mono text-[10px] tracking-[0.16em]">
+                      {s.n}
+                    </span>
+                    <span className="bg-border h-px flex-1" />
+                  </div>
+                  <span className="text-base font-medium">{s.t}</span>
+                  <span className="text-muted-foreground text-sm leading-relaxed">
+                    {s.d}
+                  </span>
+                </div>
+              </Reveal>
+            ))}
+          </ol>
+        </div>
+      </section>
+
+      {/* ── 03 · Inside a lesson ────────────────────────────────────────── */}
+      <section className="border-border/60 border-t">
+        <div className="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-20 sm:px-6 sm:py-24">
+          <SectionHead
+            index="03 · The lessons"
+            title="Written for you, not retrieved."
+            lead="Each lesson is authored against your level and objectives: an explanation, an analogy that lands, a worked example, and practice that grades the moment you answer."
+          />
+          <Reveal delay={100}>
+            <div className="bg-surface-1/60 border-border/60 flex flex-col gap-5 rounded-2xl border p-5 backdrop-blur-sm sm:p-7">
+              <div className="flex flex-col gap-2">
+                <span className="text-muted-foreground/70 font-mono text-[10px] uppercase tracking-[0.18em]">
+                  Analogy
+                </span>
+                <p className="text-sm leading-relaxed">
+                  A <span className="font-medium">group-by</span> is a mail
+                  sorter: every row drops into the pigeonhole named by its key,
+                  and only once every row has landed do you weigh each pile.
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <span className="text-muted-foreground/70 font-mono text-[10px] uppercase tracking-[0.18em]">
+                  Example
+                </span>
+                <pre className="bg-background/60 border-border/60 overflow-x-auto rounded-xl border p-4 font-mono text-xs leading-relaxed">
+                  <code>{`sales.groupby("region")["revenue"].sum()`}</code>
+                </pre>
+              </div>
+
+              {/* The practice card, mirroring the real one in the lesson page. */}
+              <div className="border-primary/30 bg-surface-1 flex flex-col gap-3 rounded-xl border border-l-4 p-4">
+                <span className="text-primary font-mono text-[10px] uppercase tracking-[0.18em]">
+                  Practice
+                </span>
+                <p className="text-sm font-medium">
+                  Which call returns one row per region?
+                </p>
+                <div className="flex flex-col gap-1.5 text-sm">
+                  {[
+                    { t: 'sales["region"].sum()', ok: false },
+                    { t: 'sales.groupby("region").sum()', ok: true },
+                    { t: 'sales.sort_values("region")', ok: false },
+                  ].map((c) => (
+                    <div
+                      key={c.t}
+                      className={
+                        c.ok
+                          ? "bg-primary/10 flex items-center gap-2 rounded-md px-2 py-1.5 font-mono text-xs font-medium"
+                          : "text-muted-foreground flex items-center gap-2 rounded-md px-2 py-1.5 font-mono text-xs"
+                      }
+                    >
+                      {c.ok ? (
+                        <Check className="text-primary size-3.5 shrink-0" />
+                      ) : (
+                        <span className="size-3.5 shrink-0" />
+                      )}
+                      {c.t}
+                    </div>
+                  ))}
+                </div>
+                <p className="text-muted-foreground text-xs">
+                  Multiple choice is graded on the spot — no waiting on a server
+                  round trip.
+                </p>
+              </div>
+            </div>
+          </Reveal>
+        </div>
+      </section>
+
+      {/* ── 04 · The tutor ──────────────────────────────────────────────── */}
+      <section className="border-border/60 border-t">
+        <div className="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-20 sm:px-6 sm:py-24">
+          <SectionHead
+            index="04 · The tutor"
+            title="It won't just tell you."
+            lead="The tutor is grounded in your own curriculum and lesson text, so it answers about what you're actually studying. Ask it for the answer outright and it hands you the next question instead."
+          />
+          <Reveal delay={100}>
+            <div className="bg-surface-1/60 border-border/60 overflow-hidden rounded-2xl border backdrop-blur-sm">
+              <div className="border-border/60 flex items-center gap-2 border-b px-4 py-2.5">
+                <span className="text-muted-foreground/70 font-mono text-[10px] uppercase tracking-[0.16em]">
+                  Tutor
+                </span>
+                <span className="text-muted-foreground/40 font-mono text-[10px]">
+                  / grounded in your own lessons
+                </span>
+              </div>
+
+              <div className="flex flex-col gap-3 p-4 sm:p-6">
+                {TUTOR_THREAD.map((m, i) =>
+                  m.from === "learner" ? (
+                    <p
+                      key={i}
+                      className="bg-muted/50 border-border/60 ml-auto max-w-md rounded-2xl rounded-br-sm border px-4 py-2.5 text-sm"
+                    >
+                      {m.text}
+                    </p>
+                  ) : (
+                    <p
+                      key={i}
+                      className="bg-background/50 border-border/60 mr-auto max-w-md rounded-2xl rounded-bl-sm border px-4 py-2.5 text-sm leading-relaxed"
+                    >
+                      {m.text}
+                    </p>
+                  ),
+                )}
+              </div>
+
+              <p className="text-muted-foreground/60 border-border/60 flex items-center gap-1.5 border-t px-4 py-3 font-mono text-[10px] uppercase tracking-[0.16em]">
+                <X className="size-3" />
+                Never hands over the answer
+              </p>
+            </div>
+          </Reveal>
+        </div>
+      </section>
+
+      {/* ── Close ───────────────────────────────────────────────────────── */}
+      <section className="border-border/60 border-t">
+        <div className="mx-auto w-full max-w-4xl px-4 py-24 sm:px-6 sm:py-28">
+          <Reveal className="flex flex-col items-start gap-6">
+            <h2 className="h-display max-w-2xl text-3xl sm:text-5xl">
+              Start where you are, not at lesson one.
+            </h2>
+            <p className="text-muted-foreground max-w-md text-sm leading-relaxed">
+              Describe a topic and take the quiz — the first path is generated
+              from there.
+            </p>
+            <Button
+              size="lg"
+              className="h-11 px-5 text-sm"
+              onClick={() => router.push("/login")}
+            >
+              Get started
+              <ArrowRight data-icon="inline-end" />
+            </Button>
+          </Reveal>
+        </div>
+      </section>
+
+      <footer className="border-border/60 border-t">
+        <div className="text-muted-foreground/60 mx-auto flex w-full max-w-4xl flex-wrap items-center justify-between gap-3 px-4 py-8 sm:px-6">
+          <span className="text-foreground/80 text-sm font-medium">
+            LearnPath
+          </span>
+          <span className="font-mono text-[10px] uppercase tracking-[0.16em]">
+            Adaptive learning, paced for you
+          </span>
+        </div>
+      </footer>
     </>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index 88dce0c..94eeea6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -79,6 +79,37 @@
   }
 }
 
+/* --------------------------------------------------------------------------
+   Landing-page motion. Both are decorative and both are disabled under
+   `prefers-reduced-motion` at the bottom of this file.
+   -------------------------------------------------------------------------- */
+
+/* Scroll reveal. `Reveal` (app/(marketing)/_components) flips `data-shown` via
+   IntersectionObserver; the transition lives here so it costs no re-render. */
+.reveal {
+  opacity: 0;
+  transform: translateY(0.75rem);
+  transition:
+    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.reveal[data-shown="true"] {
+  opacity: 1;
+  transform: none;
+}
+
+/* Hero underline that draws itself once, just after the headline lands. */
+.underline-draw {
+  stroke-dasharray: 320;
+  stroke-dashoffset: 320;
+  animation: draw-underline 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
+}
+@keyframes draw-underline {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
 /* ==========================================================================
    STUDIO PALETTE — LearnPath (Monochromatic)
    A deep slate-cyan room. Single hue family (~200°), chroma kept ≤0.02
@@ -189,8 +220,18 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  /* The sweep is decorative; the text beside it already says what's happening. */
-  .animate-sweep {
+  /* All three are decorative: the sweep has text beside it saying what's
+     happening, and the landing page reads identically without its motion. */
+  .animate-sweep,
+  .underline-draw {
     animation: none;
   }
+  .underline-draw {
+    stroke-dashoffset: 0;
+  }
+  .reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
 }
diff --git a/summary.md b/summary.md
index 70cfc4b..15921b3 100644
--- a/summary.md
+++ b/summary.md
@@ -184,8 +184,17 @@ lib/
   client/api.ts          Browser fetch helper (throws ApiClientError with status).
 instrumentation.ts       Next boot hook → starts the lesson worker (nodejs runtime only).
 app/api/                 18 route handlers (see README table).
-app/                     Client pages: page, login, onboarding, assessment, curriculum,
-                         learn/[lessonId], dashboard, tutor.
+app/(app)/               Signed-in pages: login, onboarding, assessment, curriculum,
+                         learn/[lessonId], dashboard, topics, tutor, account. Its layout
+                         holds the max-w-4xl reading container.
+app/(marketing)/         The landing page (URL stays `/` — route groups aren't in the path).
+                         Its layout imposes no width, so the page runs full-bleed.
+  _components/           Landing-only UI; `_` keeps the folder non-routable.
+    Reveal.tsx           Scroll reveal — flips `data-shown` via IntersectionObserver
+                            (no setState, so no re-render and no React 19 effect-rule fight).
+    AdaptivePathDemo.tsx The animated path: rows are absolutely positioned and moved by
+                            translateY, so a reorder animates. Stages mirror real
+                            adapt.ts/mastery.ts transitions — keep them honest.
 components/              Nav.tsx + ui.tsx (Button/Card/Badge/Spinner/ProgressBar/ErrorText).
 test/                    Vitest: unit/ (pure domain/server/auth/http logic) + integration/
                          (live-LLM agent tests, self-skip without GEMINI_API_KEY).