diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index c52ffdf..76b454b 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -3,9 +3,40 @@ import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import LayoutGuest from '../layouts/Guest';
-import BaseButton from '../components/BaseButton';
 import { getPageTitle } from '../config';
 
+const trustItems = ['Coach-reviewed AI', 'Private client records', 'Session memory', 'Client portal'];
+
+const stats = [
+  ['30 min', 'saved after every session with structured notes and follow-up drafts'],
+  ['23 days', 'between sessions where client momentum needs support'],
+  ['6 outputs', 'summary, commitments, blockers, homework, prep, and client notes'],
+];
+
+const workflow = [
+  ['After every session', 'Capture themes, commitments, patterns, and follow-up copy while the coach stays present.'],
+  ['Between sessions', 'Keep clients connected to approved notes, resources, and action items inside their portal.'],
+  ['Before the next session', 'Surface open commitments, recent patterns, and a focused opening question.'],
+];
+
+const testimonials = [
+  [
+    'The session recap caught the exact leadership pattern I wanted to revisit. I edited one sentence and sent it.',
+    'Ari Morgan',
+    'Executive Coach',
+  ],
+  [
+    'My clients finally have one place for notes, commitments, and the resources I share after each call.',
+    'Leah Stone',
+    'Founder Coach',
+  ],
+  [
+    'Prep used to mean hunting through old docs. Now I start every session with the thread already visible.',
+    'Daniel Reyes',
+    'Leadership Advisor',
+  ],
+];
+
 export default function Starter() {
   return (
     <>
@@ -13,79 +44,321 @@ export default function Starter() {
         <title>{getPageTitle('Coaching Workspace')}</title>
       </Head>
 
-      <main className="min-h-screen bg-[#f7f3ec] text-slate-900">
-        <section className="mx-auto grid min-h-[88vh] max-w-7xl grid-cols-1 gap-10 px-6 py-10 lg:grid-cols-[1.05fr_0.95fr] lg:px-10">
-          <div className="flex flex-col justify-center">
-            <p className="mb-5 text-sm font-semibold uppercase tracking-[0.18em] text-emerald-700">
+      <main className="min-h-screen bg-[#f3eddf] text-[#17130d]">
+        <div className="border-b border-[#2e2417]/10 bg-[#17130d] px-5 py-2 text-center text-sm text-[#f6ead5]">
+          Built for coaches who want the session to keep working after the call ends.
+          <Link href="/login/" className="ml-2 font-semibold underline decoration-[#f3b35c] underline-offset-4">
+            Open workspace
+          </Link>
+        </div>
+
+        <header className="sticky top-0 z-20 border-b border-[#2e2417]/10 bg-[#f3eddf]/90 px-5 py-4 backdrop-blur">
+          <div className="mx-auto flex max-w-7xl items-center justify-between gap-5">
+            <Link href="/" className="text-lg font-semibold tracking-tight">
               Coaching SaaS Workspace
+            </Link>
+            <nav className="hidden items-center gap-7 text-sm font-medium text-[#5c5143] md:flex">
+              <a href="#how-it-works">How it works</a>
+              <a href="#session-memory">Session memory</a>
+              <a href="#trust">Trust</a>
+              <a href="#pricing">Packages</a>
+            </nav>
+            <div className="flex items-center gap-3">
+              <Link href="/login/" className="hidden text-sm font-semibold text-[#17130d] sm:block">
+                Login
+              </Link>
+              <Link
+                href="/register/"
+                className="rounded-full bg-[#17130d] px-5 py-2 text-sm font-semibold text-[#fff7ec] transition hover:bg-[#2c2419]"
+              >
+                Start free
+              </Link>
+            </div>
+          </div>
+        </header>
+
+        <section className="mx-auto grid max-w-7xl grid-cols-1 gap-12 px-5 py-16 lg:grid-cols-[0.95fr_1.05fr] lg:px-8 lg:py-24">
+          <div className="flex flex-col justify-center">
+            <p className="mb-6 w-fit rounded-full border border-[#2e2417]/15 bg-[#fff8ec] px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-[#8d6125]">
+              For executive and leadership coaches
             </p>
-            <h1 className="max-w-3xl text-5xl font-semibold leading-tight text-slate-950 md:text-6xl">
-              Turn every coaching session into clear memory, next steps, and client momentum.
+            <h1 className="max-w-4xl font-serif text-6xl font-semibold leading-[0.95] tracking-tight text-[#17130d] md:text-7xl xl:text-8xl">
+              Coaching that keeps going between sessions.
             </h1>
-            <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
-              A vertical SaaS workspace for coaches who need client context, AI-assisted session notes,
-              prep briefs, shared resources, and a client portal without stitching together generic tools.
+            <p className="mt-7 max-w-2xl text-xl leading-9 text-[#5c5143]">
+              Turn raw session notes into client memory, prep briefs, commitments, and a private portal
+              that reflects how you actually coach.
             </p>
-            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
-              <BaseButton href="/login" label="Login" color="info" className="w-full sm:w-auto" />
-              <BaseButton href="/register" label="Create account" color="white" className="w-full sm:w-auto" />
+            <div className="mt-9 flex flex-col gap-3 sm:flex-row">
+              <Link
+                href="/register/"
+                className="rounded-full bg-[#17130d] px-7 py-4 text-center font-semibold text-[#fff7ec] transition hover:bg-[#2c2419]"
+              >
+                Create workspace
+              </Link>
+              <a
+                href="#session-memory"
+                className="rounded-full border border-[#2e2417]/20 bg-[#fff8ec] px-7 py-4 text-center font-semibold text-[#17130d] transition hover:border-[#17130d]"
+              >
+                See session flow
+              </a>
+            </div>
+            <div className="mt-8 flex flex-wrap gap-3 text-sm text-[#5c5143]">
+              {trustItems.map((item) => (
+                <span key={item} className="rounded-full border border-[#2e2417]/10 bg-[#fff8ec] px-4 py-2">
+                  {item}
+                </span>
+              ))}
             </div>
           </div>
 
-          <div className="flex items-center">
-            <div className="w-full rounded bg-white p-5 shadow-sm ring-1 ring-slate-200">
-              <div className="mb-5 flex items-center justify-between border-b border-slate-200 pb-4">
-                <div>
-                  <p className="text-sm text-slate-500">Next session</p>
-                  <h2 className="text-xl font-semibold">Maya Chen</h2>
+          <div className="relative">
+            <div className="absolute -left-5 top-8 hidden h-28 w-28 rounded-full bg-[#f3b35c]/50 blur-3xl lg:block" />
+            <div className="relative rounded-[2rem] border border-[#2e2417]/15 bg-[#fff8ec] p-4 shadow-[0_30px_90px_rgba(46,36,23,0.16)]">
+              <div className="rounded-[1.5rem] bg-[#17130d] p-4 text-[#fff7ec]">
+                <div className="mb-4 flex items-center justify-between">
+                  <div>
+                    <p className="text-xs uppercase tracking-[0.16em] text-[#f3b35c]">Session insights</p>
+                    <h2 className="mt-1 text-2xl font-semibold">Maya Chen · Session 4</h2>
+                  </div>
+                  <span className="rounded-full bg-[#f3b35c] px-3 py-1 text-sm font-semibold text-[#17130d]">
+                    Review
+                  </span>
                 </div>
-                <span className="rounded bg-emerald-50 px-3 py-1 text-sm font-medium text-emerald-700">
-                  Ready
-                </span>
-              </div>
-              <div className="space-y-4">
-                <div>
-                  <p className="text-sm font-semibold text-slate-500">Prep brief</p>
-                  <p className="mt-1 text-slate-700">
-                    Review delegation boundaries, decision-rights matrix, and where Maya still feels exposed.
-                  </p>
-                </div>
-                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-                  {['Open commitments', 'Suggested questions', 'Shared resources', 'Follow-up email'].map((item) => (
-                    <div key={item} className="rounded border border-slate-200 bg-slate-50 p-4">
-                      <p className="font-medium">{item}</p>
-                      <p className="mt-2 text-sm leading-6 text-slate-500">
-                        Generated from previous sessions and coach notes.
-                      </p>
+
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+                  {['Delegation trust', 'Decision rights', 'Founder visibility'].map((topic) => (
+                    <div key={topic} className="rounded-2xl bg-[#fff7ec]/10 p-4">
+                      <p className="text-sm font-medium text-[#fff7ec]">{topic}</p>
                     </div>
                   ))}
                 </div>
+
+                <div className="mt-4 rounded-2xl bg-[#fff7ec] p-5 text-[#17130d]">
+                  <p className="text-sm font-semibold uppercase tracking-[0.14em] text-[#8d6125]">Commitments</p>
+                  <ul className="mt-4 space-y-3 text-sm leading-6">
+                    <li>Draft a decision-rights matrix before Friday.</li>
+                    <li>Choose three decisions the team can own without founder approval.</li>
+                    <li>Review customer escalation rules with the COO.</li>
+                  </ul>
+                </div>
+
+                <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[0.9fr_1.1fr]">
+                  <div className="rounded-2xl bg-[#fff7ec]/10 p-5">
+                    <p className="text-sm font-semibold text-[#f3b35c]">Pattern</p>
+                    <p className="mt-2 leading-7 text-[#f6ead5]">
+                      Maya is moving from control as quality assurance toward explicit decision boundaries.
+                    </p>
+                  </div>
+                  <div className="rounded-2xl bg-[#fff7ec]/10 p-5">
+                    <p className="text-sm font-semibold text-[#f3b35c]">Follow-up draft</p>
+                    <p className="mt-2 leading-7 text-[#f6ead5]">
+                      This week is about making delegation visible enough that trust can become operational.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="absolute -bottom-8 right-8 hidden w-80 rounded-3xl border border-[#2e2417]/10 bg-white p-5 shadow-[0_22px_60px_rgba(46,36,23,0.18)] lg:block">
+                <p className="text-xs font-semibold uppercase tracking-[0.16em] text-[#8d6125]">Client message</p>
+                <p className="mt-3 leading-7 text-[#5c5143]">
+                  “The board conversation went better than expected. I led with the narrative instead of defending the roadmap.”
+                </p>
+                <p className="mt-4 rounded-2xl bg-[#f3eddf] p-3 text-sm font-medium">
+                  Suggested reply: What changed in the room when you led that way?
+                </p>
               </div>
             </div>
           </div>
         </section>
 
-        <section className="border-t border-slate-200 bg-white">
-          <div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 px-6 py-10 md:grid-cols-3 lg:px-10">
-            {[
-              ['Session Memory', 'Extract summaries, blockers, homework, quotes, and follow-up notes from session transcripts.'],
-              ['Client Workspace', 'Keep goals, private notes, resources, and action items organized around every client.'],
-              ['Client Portal', 'Share the right notes, resources, and commitments without exposing coach-only context.'],
-            ].map(([title, copy]) => (
-              <div key={title} className="rounded border border-slate-200 p-5">
-                <h3 className="text-lg font-semibold">{title}</h3>
-                <p className="mt-3 leading-7 text-slate-600">{copy}</p>
+        <section className="border-y border-[#2e2417]/10 bg-[#fff8ec] px-5 py-10">
+          <div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 md:grid-cols-3">
+            {stats.map(([value, label]) => (
+              <div key={value} className="border-l border-[#2e2417]/15 pl-5">
+                <p className="font-serif text-5xl font-semibold text-[#17130d]">{value}</p>
+                <p className="mt-3 max-w-sm leading-7 text-[#5c5143]">{label}</p>
               </div>
             ))}
           </div>
         </section>
 
-        <footer className="bg-slate-950 px-6 py-6 text-sm text-white">
-          <div className="mx-auto flex max-w-7xl flex-col justify-between gap-3 md:flex-row">
-            <p>© 2026 Coaching SaaS Workspace. All rights reserved.</p>
-            <div className="flex gap-4">
+        <section id="how-it-works" className="mx-auto max-w-7xl px-5 py-20 lg:px-8">
+          <div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.8fr_1.2fr]">
+            <div>
+              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">The new practice rhythm</p>
+              <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
+                Before, between, and after every session.
+              </h2>
+            </div>
+            <div className="grid grid-cols-1 gap-4">
+              {workflow.map(([title, copy], index) => (
+                <div key={title} className="grid grid-cols-[3rem_1fr] gap-5 rounded-3xl border border-[#2e2417]/10 bg-[#fff8ec] p-5">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#17130d] font-semibold text-[#fff7ec]">
+                    {index + 1}
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-semibold">{title}</h3>
+                    <p className="mt-2 leading-7 text-[#5c5143]">{copy}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section id="session-memory" className="bg-[#17130d] px-5 py-20 text-[#fff7ec]">
+          <div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:px-8">
+            <div className="flex flex-col justify-center">
+              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#f3b35c]">Session memory</p>
+              <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
+                Stop opening old notes before every call.
+              </h2>
+              <p className="mt-6 text-lg leading-8 text-[#d8cbb6]">
+                The workspace pulls together open commitments, themes across sessions, client messages,
+                and a suggested opening question. You review everything first.
+              </p>
+              <div className="mt-8 grid grid-cols-2 gap-4">
+                {['Open commitments', 'Client patterns', 'Shared notes', 'Prep questions'].map((item) => (
+                  <div key={item} className="rounded-2xl border border-[#fff7ec]/10 bg-[#fff7ec]/5 p-4">
+                    <p className="font-semibold">{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="rounded-[2rem] border border-[#fff7ec]/10 bg-[#fff7ec] p-5 text-[#17130d]">
+              <div className="flex flex-wrap items-center justify-between gap-4 border-b border-[#2e2417]/10 pb-5">
+                <div>
+                  <p className="text-sm font-semibold uppercase tracking-[0.16em] text-[#8d6125]">Session prep</p>
+                  <h3 className="mt-1 text-2xl font-semibold">Maya Chen · Session 5</h3>
+                </div>
+                <span className="rounded-full bg-[#e7f2df] px-4 py-2 text-sm font-semibold text-[#356133]">
+                  Ready when you are
+                </span>
+              </div>
+
+              <div className="mt-5 grid grid-cols-3 gap-3">
+                {[
+                  ['4', 'messages'],
+                  ['2', 'open commitments'],
+                  ['3', 'goals in focus'],
+                ].map(([value, label]) => (
+                  <div key={label} className="rounded-2xl bg-[#f3eddf] p-4">
+                    <p className="text-3xl font-semibold">{value}</p>
+                    <p className="mt-1 text-sm text-[#5c5143]">{label}</p>
+                  </div>
+                ))}
+              </div>
+
+              <div className="mt-5 rounded-2xl border border-[#2e2417]/10 p-5">
+                <p className="text-sm font-semibold uppercase tracking-[0.14em] text-[#8d6125]">Top thread</p>
+                <p className="mt-3 text-lg font-semibold">Decision rights are clear on paper, but still feel risky in practice.</p>
+                <p className="mt-3 leading-7 text-[#5c5143]">
+                  The last two sessions both returned to trust, escalation rules, and what Maya needs to see before stepping back.
+                </p>
+              </div>
+
+              <div className="mt-5 rounded-2xl bg-[#17130d] p-5 text-[#fff7ec]">
+                <p className="text-sm font-semibold text-[#f3b35c]">Suggested opening</p>
+                <p className="mt-3 text-xl leading-8">
+                  “Where did delegation feel cleaner this week, and where did your body still want to take the wheel?”
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section id="trust" className="mx-auto max-w-7xl px-5 py-20 lg:px-8">
+          <div className="grid grid-cols-1 gap-10 lg:grid-cols-[0.9fr_1.1fr]">
+            <div>
+              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">Coach supervised</p>
+              <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight md:text-6xl">
+                The AI proposes. The coach decides.
+              </h2>
+              <p className="mt-6 text-lg leading-8 text-[#5c5143]">
+                Private notes stay private. Shared notes are approved. Client-facing content carries the coach's voice,
+                not a generic chatbot voice.
+              </p>
+            </div>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              {[
+                ['Your method', 'Capture language, frameworks, and recurring patterns from real sessions.'],
+                ['Your approval', 'Review notes, prompts, resources, and messages before they reach the client.'],
+                ['Your data', 'Keep client records structured around confidentiality and role-based access.'],
+                ['Your client portal', 'Share only the commitments, resources, and reflections that move the work forward.'],
+              ].map(([title, copy]) => (
+                <div key={title} className="rounded-3xl border border-[#2e2417]/10 bg-[#fff8ec] p-6">
+                  <h3 className="text-xl font-semibold">{title}</h3>
+                  <p className="mt-3 leading-7 text-[#5c5143]">{copy}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className="bg-[#fff8ec] px-5 py-20">
+          <div className="mx-auto max-w-7xl">
+            <div className="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
+              <div>
+                <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#8d6125]">Built with coaches</p>
+                <h2 className="mt-4 font-serif text-5xl font-semibold">Designed for real client work.</h2>
+              </div>
+              <Link href="/register/" className="rounded-full bg-[#17130d] px-6 py-3 text-center font-semibold text-[#fff7ec]">
+                Start your workspace
+              </Link>
+            </div>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+              {testimonials.map(([quote, name, role]) => (
+                <figure key={name} className="rounded-3xl border border-[#2e2417]/10 bg-[#f3eddf] p-6">
+                  <blockquote className="leading-8 text-[#3b3023]">“{quote}”</blockquote>
+                  <figcaption className="mt-6">
+                    <p className="font-semibold">{name}</p>
+                    <p className="text-sm text-[#5c5143]">{role}</p>
+                  </figcaption>
+                </figure>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section id="pricing" className="px-5 py-20">
+          <div className="mx-auto grid max-w-7xl grid-cols-1 overflow-hidden rounded-[2rem] border border-[#2e2417]/10 bg-[#17130d] text-[#fff7ec] lg:grid-cols-[0.9fr_1.1fr]">
+            <div className="p-8 md:p-12">
+              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#f3b35c]">Template package</p>
+              <h2 className="mt-4 font-serif text-5xl font-semibold leading-tight">
+                Launch a coaching practice with the workspace already inside.
+              </h2>
+            </div>
+            <div className="bg-[#fff7ec] p-8 text-[#17130d] md:p-12">
+              <h3 className="text-2xl font-semibold">Executive Momentum</h3>
+              <p className="mt-3 leading-7 text-[#5c5143]">
+                A ready-made package page, client records, session memory, prep briefs, resources, and portal flow.
+              </p>
+              <div className="mt-7 grid grid-cols-1 gap-3 sm:grid-cols-2">
+                {['6 coaching sessions', 'AI-assisted session notes', 'Shared resources', 'Client portal access'].map((item) => (
+                  <div key={item} className="rounded-2xl bg-[#f3eddf] p-4 font-medium">
+                    {item}
+                  </div>
+                ))}
+              </div>
+              <Link
+                href="/register/"
+                className="mt-8 inline-flex rounded-full bg-[#17130d] px-7 py-4 font-semibold text-[#fff7ec]"
+              >
+                Create workspace
+              </Link>
+            </div>
+          </div>
+        </section>
+
+        <footer className="border-t border-[#2e2417]/10 px-5 py-10">
+          <div className="mx-auto flex max-w-7xl flex-col justify-between gap-5 text-sm text-[#5c5143] md:flex-row">
+            <p>© 2026 Coaching SaaS Workspace. Coaching beyond the session.</p>
+            <div className="flex gap-5">
               <Link href="/privacy-policy/">Privacy Policy</Link>
               <Link href="/terms-of-use/">Terms of Use</Link>
+              <Link href="/login/">Login</Link>
             </div>
           </div>
         </footer>