From 2b47b316ee89b72c14d9a8605e7c102825a3e738 Mon Sep 17 00:00:00 2001
From: Echo <echo@northbrook.com>
Date: Sun, 15 Feb 2026 20:04:37 -0500
Subject: [PATCH 1/6] Website v2: marketing-focused redesign
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero: new headline 'Stop ignoring your session replays' with animated terminal demo
- Problem section: 'The Replay Graveyard' pain point cards
- Solution section: three analysis levels with real output previews
- Pipeline: reframed around value (Connect → Render → Analyze → Act)
- Agent cards: rewritten copy (JSON-first, SKILL.md, durable artifacts, local-first)
- Getting started: simplified with collapsible prerequisites
- Animated terminal: auto-cycling tabs showing session/user/group analysis
- Removed old static terminal showcase
- Responsive for desktop and mobile

Co-authored-by: Bryce Bjork <brycedbjork@gmail.com>
---
 website/app/page.tsx                     |   6 +-
 website/components/agent-cards.tsx       |  30 +-
 website/components/animated-terminal.tsx | 365 +++++++++++++++++++++++
 website/components/getting-started.tsx   | 115 +++----
 website/components/hero.tsx              |  80 +----
 website/components/pipeline.tsx          |  33 +-
 website/components/problem.tsx           |  52 ++++
 website/components/solution.tsx          | 113 +++++++
 website/components/terminal.tsx          |  91 ------
 website/lib/terminal-content.ts          | 177 -----------
 10 files changed, 633 insertions(+), 429 deletions(-)
 create mode 100644 website/components/animated-terminal.tsx
 create mode 100644 website/components/problem.tsx
 create mode 100644 website/components/solution.tsx
 delete mode 100644 website/components/terminal.tsx
 delete mode 100644 website/lib/terminal-content.ts

diff --git a/website/app/page.tsx b/website/app/page.tsx
index 93dd39b..88ef391 100644
--- a/website/app/page.tsx
+++ b/website/app/page.tsx
@@ -5,7 +5,8 @@ import { Hero } from "../components/hero";
 import { Integrations } from "../components/integrations";
 import { Nav } from "../components/nav";
 import { Pipeline } from "../components/pipeline";
-import { TerminalShowcase } from "../components/terminal";
+import { Problem } from "../components/problem";
+import { Solution } from "../components/solution";
 
 export default function Home() {
   return (
@@ -13,8 +14,9 @@ export default function Home() {
       <Nav />
       <main>
         <Hero />
+        <Problem />
+        <Solution />
         <Pipeline />
-        <TerminalShowcase />
         <AgentCards />
         <Integrations />
         <GettingStarted />
diff --git a/website/components/agent-cards.tsx b/website/components/agent-cards.tsx
index d7500af..8cd4947 100644
--- a/website/components/agent-cards.tsx
+++ b/website/components/agent-cards.tsx
@@ -3,28 +3,28 @@ import { Section } from "./section";
 
 const cards = [
   {
-    title: "Machine-Readable by Default",
+    title: "JSON-First Output",
     description:
-      "Every data command emits JSON. Pipe output directly into your agent workflows, CI pipelines, or dashboards.",
+      "Every data command emits structured JSON. Pipe output directly into your agent workflows, CI pipelines, or dashboards.",
     icon: Code2,
   },
   {
-    title: "Durable Workspace Artifacts",
+    title: "Ships with a SKILL.md",
     description:
-      "Session, user, group, and research artifacts persist as git-friendly markdown in .vesai/workspace/ for long-lived agent context.",
-    icon: FolderOpen,
+      "A comprehensive skill file teaches Claude Code, Codex, OpenClaw, and other coding agents how to use every vesai command out of the box.",
+    icon: BookOpen,
   },
   {
-    title: "Local-First, Self-Hosted",
+    title: "Durable Markdown Artifacts",
     description:
-      "Global machine config stays in ~/.vesai while project credentials and artifacts stay in each repo's .vesai directory.",
-    icon: Server,
+      "Session, user, and group analyses persist as git-friendly markdown files in ~/.vesai/workspace/ — greppable, portable, version-controlled.",
+    icon: FolderOpen,
   },
   {
-    title: "Ships with a SKILL.md",
+    title: "Local-First, No SaaS",
     description:
-      "A comprehensive skill file teaches Claude Code, Codex, and other coding agents how to run quickstart/init plus user, group, and research workflows out of the box.",
-    icon: BookOpen,
+      "Your PostHog keys, your GCP project, your machine. No data leaves your infrastructure. No vendor lock-in.",
+    icon: Server,
   },
 ];
 
@@ -32,12 +32,10 @@ export function AgentCards() {
   return (
     <Section className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
       <h2 className="text-center font-bold text-3xl text-text-primary tracking-tight sm:text-4xl">
-        Built for AI Agents
+        Built for your AI agents.
+        <br />
+        <span className="text-text-secondary">Works for humans too.</span>
       </h2>
-      <p className="mx-auto mt-4 max-w-2xl text-center text-text-secondary">
-        Same commands, same outputs whether you&apos;re a human or a coding
-        agent.
-      </p>
 
       <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
         {cards.map((card) => (
diff --git a/website/components/animated-terminal.tsx b/website/components/animated-terminal.tsx
new file mode 100644
index 0000000..f65047d
--- /dev/null
+++ b/website/components/animated-terminal.tsx
@@ -0,0 +1,365 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const HOLD_AFTER_DONE_MS = 2500;
+const PROGRESS_TICK_MS = 50;
+
+interface CommandConfig {
+  name: string;
+  command: string;
+  steps: { label: string; delay: number }[];
+  summary: { lines: { label: string; value: string }[] };
+}
+
+const COMMANDS: CommandConfig[] = [
+  {
+    name: "Session",
+    command: "vesai replays session ph_abc123",
+    steps: [
+      { label: "Fetch recording", delay: 600 },
+      { label: "Render 47 events via Playwright", delay: 1400 },
+      { label: "Upload video to GCS", delay: 800 },
+      { label: "Analyze with Gemini", delay: 2000 },
+    ],
+    summary: {
+      lines: [
+        { label: "Session", value: '"Checkout Flow Frustration"' },
+        { label: "Score", value: "72 / 100" },
+        { label: "Issues", value: "3 detected (1 high, 2 medium)" },
+        {
+          label: "Artifact",
+          value: "~/.vesai/workspace/sessions/ph_abc123.md",
+        },
+      ],
+    },
+  },
+  {
+    name: "User",
+    command: "vesai replays user bryce@company.com",
+    steps: [
+      { label: "Find 8 sessions for bryce@company.com", delay: 700 },
+      { label: "Render sessions", delay: 2200 },
+      { label: "Aggregate user analysis", delay: 1600 },
+    ],
+    summary: {
+      lines: [
+        { label: "User", value: "bryce@company.com" },
+        { label: "Sessions", value: "8 analyzed" },
+        { label: "Score", value: "65 / 100" },
+        {
+          label: "Pattern",
+          value: "Recurring export friction in 3/8 sessions",
+        },
+        {
+          label: "Artifact",
+          value: "~/.vesai/workspace/users/bryce_company_com.md",
+        },
+      ],
+    },
+  },
+  {
+    name: "Group",
+    command: "vesai replays group acme-inc",
+    steps: [
+      { label: "Find 4 users in acme-inc", delay: 600 },
+      { label: "Analyze user journeys", delay: 2400 },
+      { label: "Aggregate group intelligence", delay: 1400 },
+    ],
+    summary: {
+      lines: [
+        { label: "Group", value: "Acme Inc" },
+        { label: "Users", value: "4 analyzed" },
+        { label: "Score", value: "58 / 100" },
+        {
+          label: "Risk",
+          value: "Adoption declining — 2 users inactive 14+ days",
+        },
+        {
+          label: "Artifact",
+          value: "~/.vesai/workspace/groups/acme-inc.md",
+        },
+      ],
+    },
+  },
+];
+
+function getTotalDuration(cfg: CommandConfig): number {
+  const typingMs = cfg.command.length * 45;
+  const bannerPause = 600;
+  const stepsMs = cfg.steps.reduce((sum, s) => sum + s.delay, 0);
+  const summaryPause = 600;
+  return typingMs + bannerPause + stepsMs + summaryPause + HOLD_AFTER_DONE_MS;
+}
+
+type StepStatus = "hidden" | "running" | "done";
+type Phase = "idle" | "typing" | "steps" | "summary" | "done";
+
+function getCommand(index: number): CommandConfig {
+  return COMMANDS[index] ?? COMMANDS[0]!;
+}
+
+export function AnimatedTerminal() {
+  const [activeTab, setActiveTab] = useState(0);
+  const [phase, setPhase] = useState<Phase>("idle");
+  const [typedChars, setTypedChars] = useState(0);
+  const [steps, setSteps] = useState<{ label: string; status: StepStatus }[]>(
+    []
+  );
+  const [spinnerFrame, setSpinnerFrame] = useState(0);
+  const [showSummary, setShowSummary] = useState(false);
+  const [stepsComplete, setStepsComplete] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const hasStarted = useRef(false);
+  const abortRef = useRef(false);
+  const progressStart = useRef(0);
+
+  const config = getCommand(activeTab);
+
+  const startAnimation = useCallback((index: number) => {
+    const cfg = getCommand(index);
+    abortRef.current = true;
+    setTimeout(() => {
+      setActiveTab(index);
+      setPhase("idle");
+      setTypedChars(0);
+      setSteps(cfg.steps.map((s) => ({ label: s.label, status: "hidden" })));
+      setSpinnerFrame(0);
+      setShowSummary(false);
+      setStepsComplete(false);
+      setProgress(0);
+      abortRef.current = false;
+      hasStarted.current = true;
+      progressStart.current = Date.now();
+      setTimeout(() => setPhase("typing"), 100);
+    }, 10);
+  }, []);
+
+  const advanceToNext = useCallback(() => {
+    const next = (activeTab + 1) % COMMANDS.length;
+    startAnimation(next);
+  }, [activeTab, startAnimation]);
+
+  // Intersection observer
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting && !hasStarted.current) {
+          startAnimation(0);
+        }
+      },
+      { threshold: 0.3 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [startAnimation]);
+
+  // Progress bar
+  useEffect(() => {
+    if (phase === "idle") {
+      return;
+    }
+    const totalDuration = getTotalDuration(config);
+    const interval = setInterval(() => {
+      const elapsed = Date.now() - progressStart.current;
+      setProgress(Math.min(elapsed / totalDuration, 1));
+    }, PROGRESS_TICK_MS);
+    return () => clearInterval(interval);
+  }, [phase, config]);
+
+  // Typewriter
+  useEffect(() => {
+    if (phase !== "typing") {
+      return;
+    }
+    if (typedChars >= config.command.length) {
+      const timeout = setTimeout(() => setPhase("steps"), 400);
+      return () => clearTimeout(timeout);
+    }
+    const timeout = setTimeout(
+      () => setTypedChars((c) => c + 1),
+      30 + Math.random() * 30
+    );
+    return () => clearTimeout(timeout);
+  }, [phase, typedChars, config.command.length]);
+
+  // Step progression
+  useEffect(() => {
+    if (phase !== "steps") {
+      return;
+    }
+    const currentSteps = config.steps;
+    const runSteps = async () => {
+      for (let i = 0; i < currentSteps.length; i++) {
+        if (abortRef.current) {
+          return;
+        }
+        const step = currentSteps[i];
+        if (!step) {
+          continue;
+        }
+        setSteps((prev) =>
+          prev.map((s, idx) => (idx === i ? { ...s, status: "running" } : s))
+        );
+        await new Promise((r) => setTimeout(r, step.delay));
+        if (abortRef.current) {
+          return;
+        }
+        setSteps((prev) =>
+          prev.map((s, idx) => (idx === i ? { ...s, status: "done" } : s))
+        );
+      }
+      if (!abortRef.current) {
+        setPhase("summary");
+      }
+    };
+    runSteps();
+  }, [phase, config.steps]);
+
+  // Summary transition
+  useEffect(() => {
+    if (phase !== "summary") {
+      return;
+    }
+    setStepsComplete(true);
+    const timeout = setTimeout(() => {
+      setShowSummary(true);
+      setPhase("done");
+    }, 500);
+    return () => clearTimeout(timeout);
+  }, [phase]);
+
+  // Auto-advance
+  useEffect(() => {
+    if (phase !== "done") {
+      return;
+    }
+    const timeout = setTimeout(advanceToNext, HOLD_AFTER_DONE_MS);
+    return () => clearTimeout(timeout);
+  }, [phase, advanceToNext]);
+
+  // Spinner
+  useEffect(() => {
+    const hasRunning = steps.some((s) => s.status === "running");
+    if (!hasRunning) {
+      return;
+    }
+    const interval = setInterval(() => {
+      setSpinnerFrame((f) => (f + 1) % SPINNER_FRAMES.length);
+    }, 90);
+    return () => clearInterval(interval);
+  }, [steps]);
+
+  return (
+    <div
+      className="terminal-window shadow-[0_0_80px_-20px_rgba(16,185,129,0.12)]"
+      ref={containerRef}
+    >
+      {/* Chrome */}
+      <div className="terminal-chrome">
+        <div className="terminal-dot terminal-dot-red" />
+        <div className="terminal-dot terminal-dot-yellow" />
+        <div className="terminal-dot terminal-dot-green" />
+      </div>
+
+      {/* Tabs */}
+      <div className="flex overflow-x-auto border-border-subtle border-b">
+        {COMMANDS.map((cmd, i) => (
+          <button
+            className={`relative whitespace-nowrap px-4 py-2.5 font-mono text-xs transition-colors ${
+              i === activeTab
+                ? "text-accent"
+                : "text-text-muted hover:text-text-secondary"
+            }`}
+            key={cmd.name}
+            onClick={() => startAnimation(i)}
+            type="button"
+          >
+            {cmd.name}
+            <span
+              className="absolute right-0 bottom-0 left-0 h-0.5 origin-left transition-transform"
+              style={{
+                backgroundColor:
+                  i === activeTab ? "var(--color-accent)" : "transparent",
+                transform: `scaleX(${i === activeTab ? progress : 0})`,
+              }}
+            />
+          </button>
+        ))}
+      </div>
+
+      {/* Body */}
+      <div className="h-[340px] overflow-y-auto p-4 font-mono text-xs leading-relaxed sm:h-[380px] sm:p-5 sm:text-sm">
+        {/* Command line */}
+        <div className="flex items-center">
+          <span className="text-text-muted">$</span>
+          <span className="ml-2 text-text-primary">
+            {phase === "idle" ? "" : config.command.slice(0, typedChars)}
+            {phase === "typing" && (
+              <span className="animate-pulse text-accent">▋</span>
+            )}
+          </span>
+        </div>
+
+        {/* Steps */}
+        {phase !== "idle" && phase !== "typing" && !showSummary && (
+          <div
+            className="mt-3 space-y-1"
+            style={{
+              opacity: stepsComplete ? 0 : 1,
+              transition: "opacity 400ms ease-in-out",
+            }}
+          >
+            {steps.map(
+              (step) =>
+                step.status !== "hidden" && (
+                  <div className="flex items-center gap-2" key={step.label}>
+                    {step.status === "running" && (
+                      <span className="text-accent">
+                        {SPINNER_FRAMES[spinnerFrame]}
+                      </span>
+                    )}
+                    {step.status === "done" && (
+                      <span className="text-accent">✔</span>
+                    )}
+                    <span
+                      className={
+                        step.status === "done"
+                          ? "text-text-secondary"
+                          : "text-accent"
+                      }
+                    >
+                      {step.label}
+                    </span>
+                  </div>
+                )
+            )}
+          </div>
+        )}
+
+        {/* Summary */}
+        {showSummary && (
+          <div
+            className="mt-3 rounded border border-accent/20 bg-accent/5 px-3 py-2.5"
+            style={{ animation: "fade-in 0.5s ease-out forwards" }}
+          >
+            <div className="space-y-1">
+              {config.summary.lines.map((line) => (
+                <div className="flex gap-2" key={line.label}>
+                  <span className="shrink-0 text-text-muted">{line.label}</span>
+                  <span className="text-text-primary">{line.value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/website/components/getting-started.tsx b/website/components/getting-started.tsx
index d1de9d4..8f60bb9 100644
--- a/website/components/getting-started.tsx
+++ b/website/components/getting-started.tsx
@@ -1,4 +1,7 @@
-import { Check } from "lucide-react";
+"use client";
+
+import { Check, ChevronDown } from "lucide-react";
+import { useState } from "react";
 import { CodeBlock } from "./code-block";
 import { Section } from "./section";
 
@@ -17,22 +20,19 @@ const steps = [
   },
   {
     step: "2",
-    label: "Set up global runtime",
-    code: "vesai quickstart --max-render-memory-mb 8192",
+    label: "Run quickstart",
+    code: "vesai quickstart",
   },
   {
     step: "3",
-    label: "Initialize this project",
-    code: "vesai init --lookback-days 180",
-  },
-  {
-    step: "4",
-    label: "Run replay intelligence",
-    code: "vesai user <useremail>",
+    label: "Analyze your first user",
+    code: "vesai replays user bryce@company.com",
   },
 ];
 
 export function GettingStarted() {
+  const [showPrereqs, setShowPrereqs] = useState(false);
+
   return (
     <Section
       className="mx-auto max-w-6xl px-6 py-16 sm:py-24"
@@ -42,53 +42,60 @@ export function GettingStarted() {
         Getting Started
       </h2>
 
-      <div className="mt-12 grid gap-12 lg:grid-cols-2">
-        <div>
-          <h3 className="font-semibold text-lg text-text-primary">
-            Prerequisites
-          </h3>
-          <ul className="mt-4 space-y-3">
-            {prerequisites.map((p) => (
-              <li className="flex items-center gap-3" key={p.name}>
-                <Check className="shrink-0 text-accent" size={16} />
-                <span className="font-mono text-sm text-text-primary">
-                  {p.name}
+      <div className="mx-auto mt-12 max-w-2xl">
+        {/* Steps */}
+        <ol className="space-y-6">
+          {steps.map((s) => (
+            <li key={s.step}>
+              <div className="mb-2 flex items-center gap-3">
+                <span className="flex h-7 w-7 items-center justify-center rounded-full bg-accent/10 font-semibold text-accent text-sm">
+                  {s.step}
                 </span>
-                <span className="text-sm text-text-muted">{p.note}</span>
-              </li>
-            ))}
-          </ul>
+                <span className="text-sm text-text-secondary">{s.label}</span>
+              </div>
+              <CodeBlock code={s.code} />
+            </li>
+          ))}
+        </ol>
 
-          <div className="mt-6">
-            <p className="mb-2 text-sm text-text-muted">Authenticate gcloud:</p>
-            <CodeBlock
-              code={
-                "gcloud auth login\ngcloud auth application-default login\ngcloud config set project <project-id>"
-              }
+        {/* Collapsible prerequisites */}
+        <div className="mt-10 rounded-xl border border-border-subtle bg-bg-elevated">
+          <button
+            className="flex w-full items-center justify-between px-5 py-4 text-left text-sm text-text-secondary transition-colors hover:text-text-primary"
+            onClick={() => setShowPrereqs(!showPrereqs)}
+            type="button"
+          >
+            <span>Prerequisites</span>
+            <ChevronDown
+              className={`transition-transform ${showPrereqs ? "rotate-180" : ""}`}
+              size={16}
             />
-          </div>
-        </div>
-
-        <div>
-          <h3 className="font-semibold text-lg text-text-primary">
-            Four Steps
-          </h3>
-          <p className="mt-2 text-sm text-text-muted">
-            Every command auto-syncs VES AI to latest main before execution.
-          </p>
-          <ol className="mt-4 space-y-6">
-            {steps.map((s) => (
-              <li key={s.step}>
-                <div className="mb-2 flex items-center gap-3">
-                  <span className="flex h-7 w-7 items-center justify-center rounded-full bg-accent/10 font-semibold text-accent text-sm">
-                    {s.step}
-                  </span>
-                  <span className="text-sm text-text-secondary">{s.label}</span>
-                </div>
-                <CodeBlock code={s.code} />
-              </li>
-            ))}
-          </ol>
+          </button>
+          {showPrereqs && (
+            <div className="border-border-subtle border-t px-5 py-4">
+              <ul className="space-y-3">
+                {prerequisites.map((p) => (
+                  <li className="flex items-center gap-3" key={p.name}>
+                    <Check className="shrink-0 text-accent" size={16} />
+                    <span className="font-mono text-sm text-text-primary">
+                      {p.name}
+                    </span>
+                    <span className="text-sm text-text-muted">{p.note}</span>
+                  </li>
+                ))}
+              </ul>
+              <div className="mt-4">
+                <p className="mb-2 text-sm text-text-muted">
+                  Authenticate gcloud:
+                </p>
+                <CodeBlock
+                  code={
+                    "gcloud auth login\ngcloud auth application-default login"
+                  }
+                />
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </Section>
diff --git a/website/components/hero.tsx b/website/components/hero.tsx
index ee1d02f..4bb9d5e 100644
--- a/website/components/hero.tsx
+++ b/website/components/hero.tsx
@@ -1,63 +1,21 @@
 import { Copy, Github } from "lucide-react";
-import type { TerminalLine } from "../lib/terminal-content";
-import { heroTerminalLines } from "../lib/terminal-content";
+import { AnimatedTerminal } from "./animated-terminal";
 import { CopyButton } from "./copy-button";
 
-function TerminalLineEl({ line }: { line: TerminalLine }) {
-  if (line.type === "blank") {
-    return <div className="h-4" />;
-  }
-
-  if (line.type === "prompt") {
-    return (
-      <div>
-        <span className="text-text-muted">$ </span>
-        <span className="text-text-primary">{line.text}</span>
-      </div>
-    );
-  }
-
-  if (line.type === "comment") {
-    return <div className="text-accent">{line.text}</div>;
-  }
-
-  return <div className="text-text-secondary">{line.text}</div>;
-}
-
 const installCommand = "curl -fsSL https://ves.ai/install | bash";
 
-const prereqs = ["git", "bun", "gcloud", "ffmpeg"];
-const keyedHeroTerminalLines = createStableKeyedLines(heroTerminalLines);
-
-function createStableKeyedLines(lines: TerminalLine[]) {
-  const seen = new Map<string, number>();
-  return lines.map((line) => {
-    const base = `${line.type}:${line.text}`;
-    const count = seen.get(base) ?? 0;
-    seen.set(base, count + 1);
-    return { key: `${base}:${count}`, line };
-  });
-}
-
 export function Hero() {
   return (
     <section className="mx-auto max-w-6xl px-6 pt-28 pb-16 sm:pt-36 sm:pb-24">
       <div className="grid gap-12 lg:grid-cols-[55%_45%] lg:items-center">
         <div>
-          <div className="mb-6 inline-flex items-center rounded-full border border-accent/30 bg-accent/10 px-3 py-1 text-accent text-sm">
-            Session replay intelligence CLI
-          </div>
-
-          <h1 className="font-bold text-[48px] text-text-primary leading-[1.05] tracking-[-0.02em] sm:text-[72px]">
-            Make product analytics actionable for AI&nbsp;agents.
+          <h1 className="font-bold text-[44px] text-text-primary leading-[1.08] tracking-[-0.02em] sm:text-[64px]">
+            Stop ignoring your session&nbsp;replays.
           </h1>
 
           <p className="mt-6 max-w-xl text-base text-text-secondary leading-[1.7] sm:text-lg">
-            Run global quickstart once, initialize each repo with{" "}
-            <code className="font-mono text-sm">vesai init</code>, then use
-            replay evidence to generate user stories, group stories, and
-            research answers your agents can execute. Commands auto-sync the CLI
-            to latest main before running.
+            VES AI watches every PostHog recording, finds the bugs and UX
+            friction your team missed, and writes it up&nbsp;— automatically.
           </p>
 
           <div className="mt-8 flex flex-wrap items-center gap-3">
@@ -80,35 +38,9 @@ export function Hero() {
               View on GitHub
             </a>
           </div>
-
-          <div className="mt-6 flex flex-wrap items-center gap-2">
-            <span className="text-text-muted text-xs">Requires</span>
-            {prereqs.map((p) => (
-              <span
-                className="rounded-md bg-bg-surface px-2 py-0.5 font-mono text-text-muted text-xs"
-                key={p}
-              >
-                {p}
-              </span>
-            ))}
-          </div>
         </div>
 
-        <div className="terminal-window">
-          <div className="terminal-chrome">
-            <div className="terminal-dot terminal-dot-red" />
-            <div className="terminal-dot terminal-dot-yellow" />
-            <div className="terminal-dot terminal-dot-green" />
-            <span className="ml-3 font-mono text-text-muted text-xs">
-              Terminal — vesai
-            </span>
-          </div>
-          <div className="terminal-body font-mono">
-            {keyedHeroTerminalLines.map(({ key, line }) => (
-              <TerminalLineEl key={key} line={line} />
-            ))}
-          </div>
-        </div>
+        <AnimatedTerminal />
       </div>
     </section>
   );
diff --git a/website/components/pipeline.tsx b/website/components/pipeline.tsx
index 76a61fc..c239f17 100644
--- a/website/components/pipeline.tsx
+++ b/website/components/pipeline.tsx
@@ -1,25 +1,26 @@
-import { ArrowRight, BrainCircuit, Download, Play, Rocket } from "lucide-react";
+import { ArrowRight, BrainCircuit, Link, Play, Rocket } from "lucide-react";
 import { Section } from "./section";
 
 const steps = [
   {
-    name: "Quickstart",
-    detail: "Configure global runtime + render memory budget",
-    icon: Download,
+    name: "Connect",
+    detail: "Point at your PostHog project",
+    icon: Link,
   },
   {
-    name: "Init",
-    detail: "Create project-scoped .vesai config and workspace",
+    name: "Render",
+    detail: "Headless Chromium replays sessions to video",
     icon: Play,
   },
   {
-    name: "Heartbeat",
-    detail: "Daemon backfills and continuously analyzes new sessions",
+    name: "Analyze",
+    detail: "Gemini watches each recording and extracts structured insights",
     icon: BrainCircuit,
   },
   {
-    name: "Ask",
-    detail: "Use user, group, and research commands for decisions",
+    name: "Act",
+    detail:
+      "Session, user, and group intelligence ready for your team or your agents",
     icon: Rocket,
   },
 ];
@@ -30,13 +31,13 @@ export function Pipeline() {
       <h2 className="text-center font-bold text-3xl text-text-primary tracking-tight sm:text-4xl">
         How It Works
       </h2>
-      <p className="mx-auto mt-4 max-w-2xl text-center text-text-secondary">
-        From machine setup to project intelligence artifacts in four steps.
-      </p>
 
       <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {steps.map((step, i) => (
-          <div className="relative flex flex-col items-center" key={step.name}>
+          <div
+            className="relative flex flex-col items-center text-center"
+            key={step.name}
+          >
             {i > 0 && (
               <div className="absolute top-10 -left-4 hidden text-accent/40 lg:block">
                 <ArrowRight size={20} />
@@ -48,7 +49,9 @@ export function Pipeline() {
             <h3 className="mt-4 font-semibold text-text-primary">
               {step.name}
             </h3>
-            <p className="mt-1 text-sm text-text-muted">{step.detail}</p>
+            <p className="mt-1 max-w-[200px] text-sm text-text-muted">
+              {step.detail}
+            </p>
           </div>
         ))}
       </div>
diff --git a/website/components/problem.tsx b/website/components/problem.tsx
new file mode 100644
index 0000000..0425455
--- /dev/null
+++ b/website/components/problem.tsx
@@ -0,0 +1,52 @@
+import { BarChart3, Bug, Video } from "lucide-react";
+import { Section } from "./section";
+
+const cards = [
+  {
+    icon: Video,
+    stat: "< 1%",
+    text: "Your team records thousands of sessions. They watch less than one percent.",
+  },
+  {
+    icon: Bug,
+    stat: "Hidden",
+    text: "Bugs hide in replays nobody has time to review.",
+  },
+  {
+    icon: BarChart3,
+    stat: "Vibes",
+    text: "Product decisions get made on vibes, not evidence.",
+  },
+];
+
+export function Problem() {
+  return (
+    <Section className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
+      <h2 className="text-center font-bold text-3xl text-text-primary tracking-tight sm:text-4xl">
+        The Replay Graveyard
+      </h2>
+      <p className="mx-auto mt-4 max-w-2xl text-center text-text-secondary">
+        Your PostHog replays are a gold mine. Nobody&apos;s watching&nbsp;them.
+      </p>
+
+      <div className="mt-12 grid gap-6 md:grid-cols-3">
+        {cards.map((card) => (
+          <article
+            className="rounded-xl border border-border-subtle bg-bg-elevated p-6 text-center transition-colors hover:border-border-emphasis"
+            key={card.stat}
+          >
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-bg-surface text-accent">
+              <card.icon size={24} strokeWidth={1.5} />
+            </div>
+            <div className="mt-4 font-bold text-2xl text-accent">
+              {card.stat}
+            </div>
+            <p className="mt-2 text-sm text-text-secondary leading-relaxed">
+              {card.text}
+            </p>
+          </article>
+        ))}
+      </div>
+    </Section>
+  );
+}
diff --git a/website/components/solution.tsx b/website/components/solution.tsx
new file mode 100644
index 0000000..d78a658
--- /dev/null
+++ b/website/components/solution.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useState } from "react";
+import { Section } from "./section";
+
+const levels = [
+  {
+    label: "Session",
+    question: "What happened in this recording?",
+    command: "vesai replays session ph_abc123",
+    output: `{
+  "name": "Checkout Flow Frustration",
+  "score": 72,
+  "health": "Moderate friction detected",
+  "features": ["checkout", "payment_form", "cart"],
+  "detectedIssues": [
+    {
+      "name": "Rage-clicked checkout button",
+      "type": "usability",
+      "severity": "high",
+      "story": "User clicked the checkout button 3 times in rapid succession. The button had no loading state, causing confusion about whether the action was registered."
+    },
+    {
+      "name": "Payment validation blocked submit",
+      "type": "bug",
+      "severity": "medium",
+      "story": "Form validation error appeared after a 2-second delay, but the error message was positioned below the fold."
+    }
+  ]
+}`,
+  },
+  {
+    label: "User",
+    question: "How is bryce@company.com doing?",
+    command: "vesai replays user bryce@company.com",
+    output: `{
+  "email": "bryce@company.com",
+  "sessions_analyzed": 8,
+  "score": 65,
+  "story": "Power user exploring advanced features over 7 days. Encountered recurring friction in the export flow — 3 of 8 sessions ended at the same CSV timeout error. Despite this, engagement is increasing: session duration grew 40% week-over-week.",
+  "top_issues": [
+    "Export CSV timeout on datasets > 10k rows",
+    "Filter state resets after back-navigation"
+  ]
+}`,
+  },
+  {
+    label: "Group",
+    question: "How is Acme Corp as a customer?",
+    command: "vesai replays group acme-inc",
+    output: `{
+  "group": "Acme Inc",
+  "users_analyzed": 4,
+  "score": 58,
+  "story": "Adoption is declining. 2 of 4 users have been inactive for 14+ days. The remaining active users show narrowing feature usage — down to just dashboard views. Initial onboarding was strong but no user has engaged with the integration setup flow.",
+  "risk": "high",
+  "recommendation": "Proactive outreach recommended. Focus on integration onboarding — this is where all 4 users dropped off."
+}`,
+  },
+];
+
+export function Solution() {
+  const [activeLevel, setActiveLevel] = useState(0);
+  const level = levels[activeLevel]!;
+
+  return (
+    <Section className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
+      <h2 className="text-center font-bold text-3xl text-text-primary tracking-tight sm:text-4xl">
+        AI That Watches Every Session
+      </h2>
+      <p className="mx-auto mt-4 max-w-2xl text-center text-text-secondary">
+        Three levels of analysis. From a single recording to account-level
+        intelligence.
+      </p>
+
+      <div className="mt-12">
+        {/* Level tabs */}
+        <div className="flex justify-center gap-2">
+          {levels.map((l, i) => (
+            <button
+              className={`rounded-lg px-4 py-2 font-medium text-sm transition-colors ${
+                i === activeLevel
+                  ? "border border-accent/30 bg-accent/10 text-accent"
+                  : "border border-transparent text-text-muted hover:text-text-secondary"
+              }`}
+              key={l.label}
+              onClick={() => setActiveLevel(i)}
+              type="button"
+            >
+              {l.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="mt-8 rounded-xl border border-border-subtle bg-bg-elevated p-6 sm:p-8">
+          <p className="text-lg text-text-secondary italic">
+            &ldquo;{level.question}&rdquo;
+          </p>
+          <div className="mt-1 font-mono text-text-muted text-xs">
+            $ {level.command}
+          </div>
+
+          <div className="mt-4 overflow-x-auto rounded-lg border border-border-subtle bg-terminal p-4">
+            <pre className="font-mono text-accent text-xs leading-relaxed sm:text-sm">
+              <code>{level.output}</code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}
diff --git a/website/components/terminal.tsx b/website/components/terminal.tsx
deleted file mode 100644
index 23807ab..0000000
--- a/website/components/terminal.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import type { TerminalLine } from "../lib/terminal-content";
-import { terminalTabs } from "../lib/terminal-content";
-
-function Line({ line }: { line: TerminalLine }) {
-  if (line.type === "blank") {
-    return <div className="h-4" />;
-  }
-
-  if (line.type === "prompt") {
-    return (
-      <div className="whitespace-pre-wrap break-all">
-        <span className="text-text-muted">$ </span>
-        <span className="text-text-primary">{line.text}</span>
-      </div>
-    );
-  }
-
-  if (line.type === "comment") {
-    return <div className="whitespace-pre text-accent">{line.text}</div>;
-  }
-
-  return <div className="text-text-secondary">{line.text}</div>;
-}
-
-function createStableKeyedLines(lines: TerminalLine[]) {
-  const seen = new Map<string, number>();
-  return lines.map((line) => {
-    const base = `${line.type}:${line.text}`;
-    const count = seen.get(base) ?? 0;
-    seen.set(base, count + 1);
-    return { key: `${base}:${count}`, line };
-  });
-}
-
-const keyedTerminalTabs = terminalTabs.map((tab) => ({
-  ...tab,
-  keyedLines: createStableKeyedLines(tab.lines),
-}));
-
-export function TerminalShowcase() {
-  const [activeTab, setActiveTab] = useState(0);
-
-  return (
-    <section className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
-      <h2 className="text-center font-bold text-3xl text-text-primary tracking-tight sm:text-4xl">
-        See It in Action
-      </h2>
-      <p className="mx-auto mt-4 max-w-2xl text-center text-text-secondary">
-        Real commands, real output. Every data command returns structured JSON
-        by default.
-      </p>
-
-      <div className="terminal-window mt-12 shadow-[0_0_80px_-20px_rgba(16,185,129,0.15)]">
-        <div className="terminal-chrome">
-          <div className="terminal-dot terminal-dot-red" />
-          <div className="terminal-dot terminal-dot-yellow" />
-          <div className="terminal-dot terminal-dot-green" />
-          <span className="ml-3 font-mono text-text-muted text-xs">
-            Terminal — vesai
-          </span>
-        </div>
-
-        <div className="flex overflow-x-auto border-border-subtle border-b">
-          {keyedTerminalTabs.map((tab, i) => (
-            <button
-              className={`whitespace-nowrap px-5 py-3 font-medium text-sm transition-colors ${
-                i === activeTab
-                  ? "border-accent border-b-2 text-accent"
-                  : "text-text-muted hover:text-text-secondary"
-              }`}
-              key={tab.label}
-              onClick={() => setActiveTab(i)}
-              type="button"
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-
-        <div className="terminal-body min-h-[320px] font-mono">
-          {keyedTerminalTabs[activeTab].keyedLines.map(({ key, line }) => (
-            <Line key={key} line={line} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/website/lib/terminal-content.ts b/website/lib/terminal-content.ts
deleted file mode 100644
index e3b0f2c..0000000
--- a/website/lib/terminal-content.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-export interface TerminalLine {
-  type: "prompt" | "output" | "comment" | "blank";
-  text: string;
-}
-
-export interface TerminalTab {
-  label: string;
-  lines: TerminalLine[];
-}
-
-export const heroTerminalLines: TerminalLine[] = [
-  { type: "prompt", text: "curl -fsSL https://ves.ai/install | bash" },
-  { type: "output", text: "Installing VES AI..." },
-  { type: "output", text: "Linked vesai to ~/.local/bin/vesai" },
-  { type: "blank", text: "" },
-  { type: "prompt", text: "vesai quickstart --max-render-memory-mb 8192" },
-  { type: "output", text: "Auto-updating VES AI from origin/main..." },
-  { type: "output", text: "VES AI quickstart (global core setup)" },
-  {
-    type: "output",
-    text: "Render budget set to 8192 MiB (dynamic scaling at 512 MiB/service)",
-  },
-  { type: "output", text: "Global quickstart complete." },
-  { type: "blank", text: "" },
-  { type: "prompt", text: "vesai init --lookback-days 180" },
-  { type: "output", text: "Created .vesai/project.json" },
-  { type: "output", text: "Added .vesai/ to .gitignore" },
-  { type: "output", text: "Project init complete." },
-  { type: "blank", text: "" },
-  { type: "prompt", text: "vesai user bryce@company.com" },
-  { type: "output", text: "Found 12 sessions for bryce@company.com" },
-  { type: "output", text: "Rendering + analyzing sessions..." },
-  { type: "blank", text: "" },
-  { type: "comment", text: "{" },
-  { type: "comment", text: '  "email": "bryce@company.com",' },
-  { type: "comment", text: '  "sessionCount": 12,' },
-  { type: "comment", text: '  "userScore": 78,' },
-  {
-    type: "comment",
-    text: '  "markdownPath": ".vesai/workspace/users/bryce-company-com-bryce-company-com.md"',
-  },
-  { type: "comment", text: "}" },
-];
-
-export const terminalTabs: TerminalTab[] = [
-  {
-    label: "Setup",
-    lines: [
-      { type: "prompt", text: "vesai quickstart --max-render-memory-mb 8192" },
-      { type: "output", text: "Auto-updating VES AI from origin/main..." },
-      { type: "output", text: "VES AI quickstart (global core setup)" },
-      {
-        type: "output",
-        text: "Configured core runtime at ~/.vesai/core.json",
-      },
-      {
-        type: "output",
-        text: "Render budget: 8192 MiB (dynamic service scaling enabled)",
-      },
-      { type: "output", text: "Global quickstart complete." },
-      { type: "blank", text: "" },
-      { type: "prompt", text: "vesai init --lookback-days 180" },
-      { type: "output", text: "VES AI init (project setup)" },
-      {
-        type: "output",
-        text: "Created .vesai/project.json with UUID projectId",
-      },
-      {
-        type: "output",
-        text: "Created .vesai/workspace/{sessions,users,groups,research}",
-      },
-      { type: "output", text: "Added .vesai/ to project .gitignore" },
-      { type: "output", text: "Project init complete." },
-    ],
-  },
-  {
-    label: "Daemon",
-    lines: [
-      { type: "prompt", text: "vesai daemon start" },
-      { type: "output", text: "Auto-updating VES AI from origin/main..." },
-      { type: "output", text: "Daemon started in background (pid 49122)." },
-      {
-        type: "output",
-        text: "Heartbeat queued 36 sessions (from 2025-08-20T00:00:00Z to now).",
-      },
-      {
-        type: "output",
-        text: "Running session jobs, then rerunning impacted user/group stories.",
-      },
-      { type: "blank", text: "" },
-      { type: "prompt", text: "vesai daemon status" },
-      { type: "comment", text: '{ "running": true, "pid": 49122 }' },
-    ],
-  },
-  {
-    label: "User Story",
-    lines: [
-      { type: "prompt", text: "vesai user bryce@company.com" },
-      { type: "output", text: "Found 12 sessions for bryce@company.com" },
-      {
-        type: "output",
-        text: "Processing sessions... ████████████████████ 12/12",
-      },
-      { type: "blank", text: "" },
-      { type: "comment", text: "{" },
-      { type: "comment", text: '  "email": "bryce@company.com",' },
-      { type: "comment", text: '  "sessionCount": 12,' },
-      { type: "comment", text: '  "averageSessionScore": 74,' },
-      { type: "comment", text: '  "userScore": 78,' },
-      {
-        type: "comment",
-        text: '  "health": "Stable with conversion friction at checkout",',
-      },
-      {
-        type: "comment",
-        text: '  "markdownPath": ".vesai/workspace/users/bryce-company-com-bryce-company-com.md"',
-      },
-      { type: "comment", text: "}" },
-    ],
-  },
-  {
-    label: "Group Story",
-    lines: [
-      { type: "prompt", text: "vesai group acme-co" },
-      { type: "output", text: "Resolved 42 sessions across 9 users" },
-      { type: "output", text: "Building user stories and group synthesis..." },
-      { type: "blank", text: "" },
-      { type: "comment", text: "{" },
-      { type: "comment", text: '  "groupId": "acme-co",' },
-      { type: "comment", text: '  "usersAnalyzed": 9,' },
-      { type: "comment", text: '  "score": 69,' },
-      {
-        type: "comment",
-        text: '  "health": "Adoption is strong, onboarding friction remains for mobile users",',
-      },
-      {
-        type: "comment",
-        text: '  "markdownPath": ".vesai/workspace/groups/acme-co-acme-co.md"',
-      },
-      { type: "comment", text: "}" },
-    ],
-  },
-  {
-    label: "Research",
-    lines: [
-      {
-        type: "prompt",
-        text: 'vesai research "What drives checkout abandonment?"',
-      },
-      {
-        type: "output",
-        text: "Selecting relevant analyzed sessions from .vesai/workspace/sessions",
-      },
-      {
-        type: "output",
-        text: "Answering with Gemini using replay evidence...",
-      },
-      { type: "blank", text: "" },
-      { type: "comment", text: "{" },
-      {
-        type: "comment",
-        text: '  "question": "What drives checkout abandonment?",',
-      },
-      { type: "comment", text: '  "confidence": "high",' },
-      { type: "comment", text: '  "sessionsUsed": 12,' },
-      {
-        type: "comment",
-        text: '  "supportingSessionIds": ["ph_112","ph_245","ph_318"],',
-      },
-      {
-        type: "comment",
-        text: '  "findings": ["Validation errors on postal code", "Shipping fee surprise", "Promo code distraction"]',
-      },
-      { type: "comment", text: "}" },
-    ],
-  },
-];

From d2dc85d169a714efee663a209675083e87711c33 Mon Sep 17 00:00:00 2001
From: Echo <echo@northbrook.com>
Date: Sun, 15 Feb 2026 20:19:06 -0500
Subject: [PATCH 2/6] Website v2 polish: sentence case, updated commands, nav
 border fix

- Fix nav border flash on scroll (add border-transparent default)
- Sentence case all section titles and card titles
- Update terminal demo to new CLI commands (vesai user/group/research)
- Update solution section to match new command structure
- Add vesai init step to getting started
- Wrap text in solution code previews

Co-authored-by: Bryce Bjork <brycedbjork@gmail.com>
---
 .gitignore                               |  1 +
 website/components/agent-cards.tsx       |  7 +--
 website/components/animated-terminal.tsx | 60 +++++++++++++-----------
 website/components/getting-started.tsx   | 11 +++--
 website/components/nav.tsx               |  2 +-
 website/components/pipeline.tsx          |  2 +-
 website/components/problem.tsx           |  2 +-
 website/components/solution.tsx          | 48 ++++++++-----------
 8 files changed, 67 insertions(+), 66 deletions(-)

diff --git a/.gitignore b/.gitignore
index e4b1570..2cc8d8e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@ legacy-hosted/.next/
 legacy-hosted/node_modules/
 website/.next/
 website/node_modules/
+.vercel
diff --git a/website/components/agent-cards.tsx b/website/components/agent-cards.tsx
index 8cd4947..3ac933c 100644
--- a/website/components/agent-cards.tsx
+++ b/website/components/agent-cards.tsx
@@ -3,25 +3,26 @@ import { Section } from "./section";
 
 const cards = [
   {
-    title: "JSON-First Output",
+    title: "JSON-first output",
     description:
       "Every data command emits structured JSON. Pipe output directly into your agent workflows, CI pipelines, or dashboards.",
     icon: Code2,
   },
   {
     title: "Ships with a SKILL.md",
+
     description:
       "A comprehensive skill file teaches Claude Code, Codex, OpenClaw, and other coding agents how to use every vesai command out of the box.",
     icon: BookOpen,
   },
   {
-    title: "Durable Markdown Artifacts",
+    title: "Durable markdown artifacts",
     description:
       "Session, user, and group analyses persist as git-friendly markdown files in ~/.vesai/workspace/ — greppable, portable, version-controlled.",
     icon: FolderOpen,
   },
   {
-    title: "Local-First, No SaaS",
+    title: "Local-first, no SaaS",
     description:
       "Your PostHog keys, your GCP project, your machine. No data leaves your infrastructure. No vendor lock-in.",
     icon: Server,
diff --git a/website/components/animated-terminal.tsx b/website/components/animated-terminal.tsx
index f65047d..ca26bb7 100644
--- a/website/components/animated-terminal.tsx
+++ b/website/components/animated-terminal.tsx
@@ -14,34 +14,13 @@ interface CommandConfig {
 }
 
 const COMMANDS: CommandConfig[] = [
-  {
-    name: "Session",
-    command: "vesai replays session ph_abc123",
-    steps: [
-      { label: "Fetch recording", delay: 600 },
-      { label: "Render 47 events via Playwright", delay: 1400 },
-      { label: "Upload video to GCS", delay: 800 },
-      { label: "Analyze with Gemini", delay: 2000 },
-    ],
-    summary: {
-      lines: [
-        { label: "Session", value: '"Checkout Flow Frustration"' },
-        { label: "Score", value: "72 / 100" },
-        { label: "Issues", value: "3 detected (1 high, 2 medium)" },
-        {
-          label: "Artifact",
-          value: "~/.vesai/workspace/sessions/ph_abc123.md",
-        },
-      ],
-    },
-  },
   {
     name: "User",
-    command: "vesai replays user bryce@company.com",
+    command: "vesai user bryce@company.com",
     steps: [
       { label: "Find 8 sessions for bryce@company.com", delay: 700 },
-      { label: "Render sessions", delay: 2200 },
-      { label: "Aggregate user analysis", delay: 1600 },
+      { label: "Render and analyze sessions", delay: 2200 },
+      { label: "Aggregate user story", delay: 1600 },
     ],
     summary: {
       lines: [
@@ -54,18 +33,18 @@ const COMMANDS: CommandConfig[] = [
         },
         {
           label: "Artifact",
-          value: "~/.vesai/workspace/users/bryce_company_com.md",
+          value: ".vesai/workspace/users/bryce_company_com.md",
         },
       ],
     },
   },
   {
     name: "Group",
-    command: "vesai replays group acme-inc",
+    command: "vesai group acme-inc",
     steps: [
       { label: "Find 4 users in acme-inc", delay: 600 },
       { label: "Analyze user journeys", delay: 2400 },
-      { label: "Aggregate group intelligence", delay: 1400 },
+      { label: "Aggregate group story", delay: 1400 },
     ],
     summary: {
       lines: [
@@ -78,7 +57,32 @@ const COMMANDS: CommandConfig[] = [
         },
         {
           label: "Artifact",
-          value: "~/.vesai/workspace/groups/acme-inc.md",
+          value: ".vesai/workspace/groups/acme-inc.md",
+        },
+      ],
+    },
+  },
+  {
+    name: "Research",
+    command: 'vesai research "checkout abandonment"',
+    steps: [
+      { label: "Search analyzed sessions", delay: 800 },
+      { label: "Synthesize findings with Gemini", delay: 2000 },
+    ],
+    summary: {
+      lines: [
+        {
+          label: "Question",
+          value: "What causes checkout abandonment?",
+        },
+        { label: "Sessions", value: "14 matched" },
+        {
+          label: "Finding",
+          value: "62% drop off at shipping — mobile 3x worse",
+        },
+        {
+          label: "Artifact",
+          value: ".vesai/workspace/research/checkout-abandonment.md",
         },
       ],
     },
diff --git a/website/components/getting-started.tsx b/website/components/getting-started.tsx
index 8f60bb9..1292f44 100644
--- a/website/components/getting-started.tsx
+++ b/website/components/getting-started.tsx
@@ -20,13 +20,18 @@ const steps = [
   },
   {
     step: "2",
-    label: "Run quickstart",
+    label: "Global setup",
     code: "vesai quickstart",
   },
   {
     step: "3",
+    label: "Initialize your project",
+    code: "vesai init",
+  },
+  {
+    step: "4",
     label: "Analyze your first user",
-    code: "vesai replays user bryce@company.com",
+    code: "vesai user bryce@company.com",
   },
 ];
 
@@ -39,7 +44,7 @@ export function GettingStarted() {
       id="getting-started"
     >
       <h2 className="text-center font-bold text-3xl text-text-primary tracking-tight sm:text-4xl">
-        Getting Started
+        Getting started
       </h2>
 
       <div className="mx-auto mt-12 max-w-2xl">
diff --git a/website/components/nav.tsx b/website/components/nav.tsx
index 5a7a427..242ea13 100644
--- a/website/components/nav.tsx
+++ b/website/components/nav.tsx
@@ -31,7 +31,7 @@ export function Nav() {
       className={`fixed top-0 right-0 left-0 z-50 transition-colors duration-300 ${
         scrolled
           ? "border-border-subtle border-b bg-bg-primary/80 backdrop-blur-md"
-          : ""
+          : "border-transparent border-b"
       }`}
     >
       <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
diff --git a/website/components/pipeline.tsx b/website/components/pipeline.tsx
index c239f17..c098053 100644
--- a/website/components/pipeline.tsx
+++ b/website/components/pipeline.tsx
@@ -29,7 +29,7 @@ export function Pipeline() {
   return (
     <Section className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
       <h2 className="text-center font-bold text-3xl text-text-primary tracking-tight sm:text-4xl">
-        How It Works
+        How it works
       </h2>
 
       <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
diff --git a/website/components/problem.tsx b/website/components/problem.tsx
index 0425455..dd67996 100644
--- a/website/components/problem.tsx
+++ b/website/components/problem.tsx
@@ -23,7 +23,7 @@ export function Problem() {
   return (
     <Section className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
       <h2 className="text-center font-bold text-3xl text-text-primary tracking-tight sm:text-4xl">
-        The Replay Graveyard
+        The replay graveyard
       </h2>
       <p className="mx-auto mt-4 max-w-2xl text-center text-text-secondary">
         Your PostHog replays are a gold mine. Nobody&apos;s watching&nbsp;them.
diff --git a/website/components/solution.tsx b/website/components/solution.tsx
index d78a658..f2ce18e 100644
--- a/website/components/solution.tsx
+++ b/website/components/solution.tsx
@@ -4,35 +4,10 @@ import { useState } from "react";
 import { Section } from "./section";
 
 const levels = [
-  {
-    label: "Session",
-    question: "What happened in this recording?",
-    command: "vesai replays session ph_abc123",
-    output: `{
-  "name": "Checkout Flow Frustration",
-  "score": 72,
-  "health": "Moderate friction detected",
-  "features": ["checkout", "payment_form", "cart"],
-  "detectedIssues": [
-    {
-      "name": "Rage-clicked checkout button",
-      "type": "usability",
-      "severity": "high",
-      "story": "User clicked the checkout button 3 times in rapid succession. The button had no loading state, causing confusion about whether the action was registered."
-    },
-    {
-      "name": "Payment validation blocked submit",
-      "type": "bug",
-      "severity": "medium",
-      "story": "Form validation error appeared after a 2-second delay, but the error message was positioned below the fold."
-    }
-  ]
-}`,
-  },
   {
     label: "User",
     question: "How is bryce@company.com doing?",
-    command: "vesai replays user bryce@company.com",
+    command: "vesai user bryce@company.com",
     output: `{
   "email": "bryce@company.com",
   "sessions_analyzed": 8,
@@ -47,7 +22,7 @@ const levels = [
   {
     label: "Group",
     question: "How is Acme Corp as a customer?",
-    command: "vesai replays group acme-inc",
+    command: "vesai group acme-inc",
     output: `{
   "group": "Acme Inc",
   "users_analyzed": 4,
@@ -55,6 +30,21 @@ const levels = [
   "story": "Adoption is declining. 2 of 4 users have been inactive for 14+ days. The remaining active users show narrowing feature usage — down to just dashboard views. Initial onboarding was strong but no user has engaged with the integration setup flow.",
   "risk": "high",
   "recommendation": "Proactive outreach recommended. Focus on integration onboarding — this is where all 4 users dropped off."
+}`,
+  },
+  {
+    label: "Research",
+    question: "What causes checkout abandonment?",
+    command: 'vesai research "checkout abandonment"',
+    output: `{
+  "question": "What causes checkout abandonment?",
+  "sessions_matched": 14,
+  "synthesis": "Checkout flow has a 62% completion rate. Primary drop-off occurs at the shipping address step. Mobile users are 3x more likely to abandon.",
+  "patterns": [
+    "Address autocomplete fails on mobile Safari",
+    "Shipping cost surprise causes back-navigation",
+    "Promo code field draws attention away from CTA"
+  ]
 }`,
   },
 ];
@@ -66,7 +56,7 @@ export function Solution() {
   return (
     <Section className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
       <h2 className="text-center font-bold text-3xl text-text-primary tracking-tight sm:text-4xl">
-        AI That Watches Every Session
+        AI that watches every session
       </h2>
       <p className="mx-auto mt-4 max-w-2xl text-center text-text-secondary">
         Three levels of analysis. From a single recording to account-level
@@ -102,7 +92,7 @@ export function Solution() {
           </div>
 
           <div className="mt-4 overflow-x-auto rounded-lg border border-border-subtle bg-terminal p-4">
-            <pre className="font-mono text-accent text-xs leading-relaxed sm:text-sm">
+            <pre className="whitespace-pre-wrap break-words font-mono text-accent text-xs leading-relaxed sm:text-sm">
               <code>{level.output}</code>
             </pre>
           </div>

From a6f990e30f6ebee8b1354f3db508883f6087e8eb Mon Sep 17 00:00:00 2001
From: Echo <echo@northbrook.com>
Date: Sun, 15 Feb 2026 20:34:29 -0500
Subject: [PATCH 3/6] Website v2: accuracy pass + richer output + combined
 pipeline

- Update metadata to match new value prop
- Combine How It Works + Integrations: PostHog, Playwright, Google Cloud icons with specific tool mentions
- Terminal demo now shows real JSON output matching actual CLI types (UserAnalysisResult, group, ResearchAnswer)
- Fleshed out example outputs with detailed stories, findings, confidence levels
- Problem cards: white standalone titles (< 1% watched, Hidden bugs, Vibes-based decisions)
- Fix outdated .vesai/workspace path references (now project-local, not ~/.vesai/)
- Solution section updated with richer, type-accurate output previews

Co-authored-by: Bryce Bjork <brycedbjork@gmail.com>
---
 website/app/layout.tsx                   |   8 +-
 website/app/page.tsx                     |   2 -
 website/components/agent-cards.tsx       |   2 +-
 website/components/animated-terminal.tsx | 165 ++++++++++-------------
 website/components/pipeline.tsx          |  28 ++--
 website/components/problem.tsx           |  14 +-
 website/components/solution.tsx          |  53 ++++----
 7 files changed, 129 insertions(+), 143 deletions(-)

diff --git a/website/app/layout.tsx b/website/app/layout.tsx
index 54ff51e..6ca4685 100644
--- a/website/app/layout.tsx
+++ b/website/app/layout.tsx
@@ -14,13 +14,13 @@ const jetbrainsMono = JetBrains_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "VES AI — AI-ready product analytics CLI",
+  title: "VES AI — Session replay intelligence for agents",
   description:
-    "Connect PostHog. Render session recordings. Analyze with Gemini vision. Output structured markdown your agents can act on.",
+    "VES AI watches every PostHog recording, finds bugs and UX friction your team missed, and writes it up automatically. Local-first CLI for AI agent workflows.",
   openGraph: {
-    title: "VES AI — AI-ready product analytics CLI",
+    title: "VES AI — Session replay intelligence for agents",
     description:
-      "Connect PostHog. Render session recordings. Analyze with Gemini vision. Output structured markdown your agents can act on.",
+      "VES AI watches every PostHog recording, finds bugs and UX friction your team missed, and writes it up automatically. Local-first CLI for AI agent workflows.",
     type: "website",
   },
   icons: {
diff --git a/website/app/page.tsx b/website/app/page.tsx
index 88ef391..9cea569 100644
--- a/website/app/page.tsx
+++ b/website/app/page.tsx
@@ -2,7 +2,6 @@ import { AgentCards } from "../components/agent-cards";
 import { Footer } from "../components/footer";
 import { GettingStarted } from "../components/getting-started";
 import { Hero } from "../components/hero";
-import { Integrations } from "../components/integrations";
 import { Nav } from "../components/nav";
 import { Pipeline } from "../components/pipeline";
 import { Problem } from "../components/problem";
@@ -18,7 +17,6 @@ export default function Home() {
         <Solution />
         <Pipeline />
         <AgentCards />
-        <Integrations />
         <GettingStarted />
       </main>
       <Footer />
diff --git a/website/components/agent-cards.tsx b/website/components/agent-cards.tsx
index 3ac933c..a2fc8e5 100644
--- a/website/components/agent-cards.tsx
+++ b/website/components/agent-cards.tsx
@@ -18,7 +18,7 @@ const cards = [
   {
     title: "Durable markdown artifacts",
     description:
-      "Session, user, and group analyses persist as git-friendly markdown files in ~/.vesai/workspace/ — greppable, portable, version-controlled.",
+      "User stories, group analyses, and research answers persist as markdown in your project\u2019s .vesai/workspace/ — greppable, portable, version-controlled.",
     icon: FolderOpen,
   },
   {
diff --git a/website/components/animated-terminal.tsx b/website/components/animated-terminal.tsx
index ca26bb7..0f72b34 100644
--- a/website/components/animated-terminal.tsx
+++ b/website/components/animated-terminal.tsx
@@ -3,14 +3,14 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-const HOLD_AFTER_DONE_MS = 2500;
+const HOLD_AFTER_DONE_MS = 3000;
 const PROGRESS_TICK_MS = 50;
 
 interface CommandConfig {
   name: string;
   command: string;
   steps: { label: string; delay: number }[];
-  summary: { lines: { label: string; value: string }[] };
+  output: string;
 }
 
 const COMMANDS: CommandConfig[] = [
@@ -18,83 +18,75 @@ const COMMANDS: CommandConfig[] = [
     name: "User",
     command: "vesai user bryce@company.com",
     steps: [
-      { label: "Find 8 sessions for bryce@company.com", delay: 700 },
-      { label: "Render and analyze sessions", delay: 2200 },
-      { label: "Aggregate user story", delay: 1600 },
+      { label: "Found 8 sessions for bryce@company.com", delay: 600 },
+      { label: "Rendering session 1/8", delay: 400 },
+      { label: "Rendering session 2/8", delay: 350 },
+      { label: "Rendering session 3/8", delay: 400 },
+      { label: "Analyzing 8 sessions with Gemini", delay: 1800 },
+      { label: "Aggregating user story", delay: 1200 },
     ],
-    summary: {
-      lines: [
-        { label: "User", value: "bryce@company.com" },
-        { label: "Sessions", value: "8 analyzed" },
-        { label: "Score", value: "65 / 100" },
-        {
-          label: "Pattern",
-          value: "Recurring export friction in 3/8 sessions",
-        },
-        {
-          label: "Artifact",
-          value: ".vesai/workspace/users/bryce_company_com.md",
-        },
-      ],
-    },
+    output: `{
+  "email": "bryce@company.com",
+  "sessionCount": 8,
+  "averageSessionScore": 71,
+  "userScore": 65,
+  "health": "At risk — recurring friction in core workflow",
+  "story": "Power user with increasing engagement over 7 days. However, 3 of 8 sessions ended at the same CSV export timeout on datasets over 10k rows. Filter state also resets after back-navigation, forcing repeated setup. Despite friction, session duration grew 40% week-over-week — this user is invested but hitting real walls.",
+  "markdownPath": ".vesai/workspace/users/bryce-company-com.md"
+}`,
   },
   {
     name: "Group",
     command: "vesai group acme-inc",
     steps: [
-      { label: "Find 4 users in acme-inc", delay: 600 },
-      { label: "Analyze user journeys", delay: 2400 },
-      { label: "Aggregate group story", delay: 1400 },
+      { label: "Resolved 4 users in acme-inc", delay: 500 },
+      {
+        label: "Building user story: sarah@acme.com (12 sessions)",
+        delay: 1200,
+      },
+      { label: "Building user story: mike@acme.com (6 sessions)", delay: 900 },
+      { label: "Building user story: chen@acme.com (3 sessions)", delay: 600 },
+      { label: "Building user story: priya@acme.com (1 session)", delay: 400 },
+      { label: "Aggregating group story", delay: 1000 },
     ],
-    summary: {
-      lines: [
-        { label: "Group", value: "Acme Inc" },
-        { label: "Users", value: "4 analyzed" },
-        { label: "Score", value: "58 / 100" },
-        {
-          label: "Risk",
-          value: "Adoption declining — 2 users inactive 14+ days",
-        },
-        {
-          label: "Artifact",
-          value: ".vesai/workspace/groups/acme-inc.md",
-        },
-      ],
-    },
+    output: `{
+  "groupId": "acme-inc",
+  "usersAnalyzed": 4,
+  "score": 58,
+  "health": "Adoption declining — intervention recommended",
+  "story": "Acme Inc onboarded 4 users 3 weeks ago. Initial engagement was strong across all users. Since then, chen@acme.com and priya@acme.com have gone inactive (14+ days). The two active users show narrowing feature usage — primarily dashboard views only. No user has completed the integration setup flow, which appears to be the critical adoption gate.",
+  "markdownPath": ".vesai/workspace/groups/acme-inc.md"
+}`,
   },
   {
     name: "Research",
-    command: 'vesai research "checkout abandonment"',
+    command: 'vesai research "why are users abandoning checkout?"',
     steps: [
-      { label: "Search analyzed sessions", delay: 800 },
-      { label: "Synthesize findings with Gemini", delay: 2000 },
+      { label: "Scanning 47 analyzed sessions in workspace", delay: 600 },
+      { label: "Selected 14 relevant sessions as context", delay: 500 },
+      { label: "Synthesizing research answer with Gemini", delay: 1800 },
     ],
-    summary: {
-      lines: [
-        {
-          label: "Question",
-          value: "What causes checkout abandonment?",
-        },
-        { label: "Sessions", value: "14 matched" },
-        {
-          label: "Finding",
-          value: "62% drop off at shipping — mobile 3x worse",
-        },
-        {
-          label: "Artifact",
-          value: ".vesai/workspace/research/checkout-abandonment.md",
-        },
-      ],
-    },
+    output: `{
+  "question": "why are users abandoning checkout?",
+  "answer": "Checkout abandonment is driven by three compounding factors: shipping cost surprise, mobile form friction, and a distracting promo code field. 62% of users who reach checkout complete it, but mobile users are 3x more likely to abandon than desktop.",
+  "findings": [
+    "Address autocomplete fails silently on mobile Safari, forcing manual entry",
+    "Shipping cost appears only after address entry — users back-navigate on sticker shock",
+    "Promo code field positioned above the CTA draws attention away from completing purchase",
+    "Desktop users who encounter errors recover 80% of the time; mobile users recover 27%"
+  ],
+  "confidence": "high",
+  "supportingSessionIds": ["s_a8f2c", "s_b91d0", "s_c43e7", "s_d67f1"],
+  "sessionsConsidered": 47,
+  "sessionsUsed": 14
+}`,
   },
 ];
 
 function getTotalDuration(cfg: CommandConfig): number {
-  const typingMs = cfg.command.length * 45;
-  const bannerPause = 600;
+  const typingMs = cfg.command.length * 40;
   const stepsMs = cfg.steps.reduce((sum, s) => sum + s.delay, 0);
-  const summaryPause = 600;
-  return typingMs + bannerPause + stepsMs + summaryPause + HOLD_AFTER_DONE_MS;
+  return typingMs + 400 + stepsMs + 500 + HOLD_AFTER_DONE_MS;
 }
 
 type StepStatus = "hidden" | "running" | "done";
@@ -112,10 +104,11 @@ export function AnimatedTerminal() {
     []
   );
   const [spinnerFrame, setSpinnerFrame] = useState(0);
-  const [showSummary, setShowSummary] = useState(false);
+  const [showOutput, setShowOutput] = useState(false);
   const [stepsComplete, setStepsComplete] = useState(false);
   const [progress, setProgress] = useState(0);
   const containerRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
   const hasStarted = useRef(false);
   const abortRef = useRef(false);
   const progressStart = useRef(0);
@@ -131,7 +124,7 @@ export function AnimatedTerminal() {
       setTypedChars(0);
       setSteps(cfg.steps.map((s) => ({ label: s.label, status: "hidden" })));
       setSpinnerFrame(0);
-      setShowSummary(false);
+      setShowOutput(false);
       setStepsComplete(false);
       setProgress(0);
       abortRef.current = false;
@@ -146,7 +139,6 @@ export function AnimatedTerminal() {
     startAnimation(next);
   }, [activeTab, startAnimation]);
 
-  // Intersection observer
   useEffect(() => {
     const el = containerRef.current;
     if (!el) {
@@ -164,7 +156,6 @@ export function AnimatedTerminal() {
     return () => observer.disconnect();
   }, [startAnimation]);
 
-  // Progress bar
   useEffect(() => {
     if (phase === "idle") {
       return;
@@ -177,7 +168,6 @@ export function AnimatedTerminal() {
     return () => clearInterval(interval);
   }, [phase, config]);
 
-  // Typewriter
   useEffect(() => {
     if (phase !== "typing") {
       return;
@@ -188,12 +178,11 @@ export function AnimatedTerminal() {
     }
     const timeout = setTimeout(
       () => setTypedChars((c) => c + 1),
-      30 + Math.random() * 30
+      25 + Math.random() * 30
     );
     return () => clearTimeout(timeout);
   }, [phase, typedChars, config.command.length]);
 
-  // Step progression
   useEffect(() => {
     if (phase !== "steps") {
       return;
@@ -226,20 +215,22 @@ export function AnimatedTerminal() {
     runSteps();
   }, [phase, config.steps]);
 
-  // Summary transition
   useEffect(() => {
     if (phase !== "summary") {
       return;
     }
     setStepsComplete(true);
     const timeout = setTimeout(() => {
-      setShowSummary(true);
+      setShowOutput(true);
       setPhase("done");
+      // Scroll to top of output
+      setTimeout(() => {
+        bodyRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+      }, 100);
     }, 500);
     return () => clearTimeout(timeout);
   }, [phase]);
 
-  // Auto-advance
   useEffect(() => {
     if (phase !== "done") {
       return;
@@ -248,7 +239,6 @@ export function AnimatedTerminal() {
     return () => clearTimeout(timeout);
   }, [phase, advanceToNext]);
 
-  // Spinner
   useEffect(() => {
     const hasRunning = steps.some((s) => s.status === "running");
     if (!hasRunning) {
@@ -265,14 +255,12 @@ export function AnimatedTerminal() {
       className="terminal-window shadow-[0_0_80px_-20px_rgba(16,185,129,0.12)]"
       ref={containerRef}
     >
-      {/* Chrome */}
       <div className="terminal-chrome">
         <div className="terminal-dot terminal-dot-red" />
         <div className="terminal-dot terminal-dot-yellow" />
         <div className="terminal-dot terminal-dot-green" />
       </div>
 
-      {/* Tabs */}
       <div className="flex overflow-x-auto border-border-subtle border-b">
         {COMMANDS.map((cmd, i) => (
           <button
@@ -298,8 +286,10 @@ export function AnimatedTerminal() {
         ))}
       </div>
 
-      {/* Body */}
-      <div className="h-[340px] overflow-y-auto p-4 font-mono text-xs leading-relaxed sm:h-[380px] sm:p-5 sm:text-sm">
+      <div
+        className="h-[340px] overflow-y-auto p-4 font-mono text-xs leading-relaxed sm:h-[420px] sm:p-5 sm:text-sm"
+        ref={bodyRef}
+      >
         {/* Command line */}
         <div className="flex items-center">
           <span className="text-text-muted">$</span>
@@ -312,7 +302,7 @@ export function AnimatedTerminal() {
         </div>
 
         {/* Steps */}
-        {phase !== "idle" && phase !== "typing" && !showSummary && (
+        {phase !== "idle" && phase !== "typing" && !showOutput && (
           <div
             className="mt-3 space-y-1"
             style={{
@@ -347,21 +337,14 @@ export function AnimatedTerminal() {
           </div>
         )}
 
-        {/* Summary */}
-        {showSummary && (
-          <div
-            className="mt-3 rounded border border-accent/20 bg-accent/5 px-3 py-2.5"
+        {/* JSON output */}
+        {showOutput && (
+          <pre
+            className="mt-3 whitespace-pre-wrap break-words text-accent"
             style={{ animation: "fade-in 0.5s ease-out forwards" }}
           >
-            <div className="space-y-1">
-              {config.summary.lines.map((line) => (
-                <div className="flex gap-2" key={line.label}>
-                  <span className="shrink-0 text-text-muted">{line.label}</span>
-                  <span className="text-text-primary">{line.value}</span>
-                </div>
-              ))}
-            </div>
-          </div>
+            {config.output}
+          </pre>
         )}
       </div>
     </div>
diff --git a/website/components/pipeline.tsx b/website/components/pipeline.tsx
index c098053..92977a4 100644
--- a/website/components/pipeline.tsx
+++ b/website/components/pipeline.tsx
@@ -1,27 +1,31 @@
-import { ArrowRight, BrainCircuit, Link, Play, Rocket } from "lucide-react";
+import { ArrowRight, Rocket } from "lucide-react";
+import GoogleCloud from "./icons/google-cloud";
+import Playwright from "./icons/playwright";
+import PostHog from "./icons/posthog";
 import { Section } from "./section";
 
 const steps = [
   {
     name: "Connect",
-    detail: "Point at your PostHog project",
-    icon: Link,
+    detail: "Pull session replays and events from your PostHog project",
+    icon: <PostHog className="text-text-primary" size={28} />,
   },
   {
     name: "Render",
-    detail: "Headless Chromium replays sessions to video",
-    icon: Play,
+    detail: "Replay each session in headless Chromium via Playwright",
+    icon: <Playwright className="text-text-primary" size={28} />,
   },
   {
     name: "Analyze",
-    detail: "Gemini watches each recording and extracts structured insights",
-    icon: BrainCircuit,
+    detail:
+      "Gemini watches each video and extracts structured insights via Vertex AI",
+    icon: <GoogleCloud className="text-text-primary" size={28} />,
   },
   {
     name: "Act",
     detail:
-      "Session, user, and group intelligence ready for your team or your agents",
-    icon: Rocket,
+      "User, group, and research intelligence ready for your team or your agents",
+    icon: <Rocket className="text-text-primary" size={28} strokeWidth={1.5} />,
   },
 ];
 
@@ -43,13 +47,13 @@ export function Pipeline() {
                 <ArrowRight size={20} />
               </div>
             )}
-            <div className="flex h-20 w-20 items-center justify-center rounded-2xl border border-border-subtle bg-bg-elevated text-accent">
-              <step.icon size={28} strokeWidth={1.5} />
+            <div className="flex h-20 w-20 items-center justify-center rounded-2xl border border-border-subtle bg-bg-elevated">
+              {step.icon}
             </div>
             <h3 className="mt-4 font-semibold text-text-primary">
               {step.name}
             </h3>
-            <p className="mt-1 max-w-[200px] text-sm text-text-muted">
+            <p className="mt-1 max-w-[220px] text-sm text-text-muted">
               {step.detail}
             </p>
           </div>
diff --git a/website/components/problem.tsx b/website/components/problem.tsx
index dd67996..c457a46 100644
--- a/website/components/problem.tsx
+++ b/website/components/problem.tsx
@@ -4,18 +4,18 @@ import { Section } from "./section";
 const cards = [
   {
     icon: Video,
-    stat: "< 1%",
-    text: "Your team records thousands of sessions. They watch less than one percent.",
+    stat: "<1% watched",
+    text: "Your team records thousands of sessions. Almost none get reviewed.",
   },
   {
     icon: Bug,
-    stat: "Hidden",
-    text: "Bugs hide in replays nobody has time to review.",
+    stat: "Hidden bugs",
+    text: "Real issues hide in replays nobody has time to watch.",
   },
   {
     icon: BarChart3,
-    stat: "Vibes",
-    text: "Product decisions get made on vibes, not evidence.",
+    stat: "Vibes-based decisions",
+    text: "Product decisions get made on gut feel, not evidence from real user behavior.",
   },
 ];
 
@@ -38,7 +38,7 @@ export function Problem() {
             <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-bg-surface text-accent">
               <card.icon size={24} strokeWidth={1.5} />
             </div>
-            <div className="mt-4 font-bold text-2xl text-accent">
+            <div className="mt-4 font-bold text-lg text-text-primary">
               {card.stat}
             </div>
             <p className="mt-2 text-sm text-text-secondary leading-relaxed">
diff --git a/website/components/solution.tsx b/website/components/solution.tsx
index f2ce18e..62eb29b 100644
--- a/website/components/solution.tsx
+++ b/website/components/solution.tsx
@@ -10,13 +10,12 @@ const levels = [
     command: "vesai user bryce@company.com",
     output: `{
   "email": "bryce@company.com",
-  "sessions_analyzed": 8,
-  "score": 65,
-  "story": "Power user exploring advanced features over 7 days. Encountered recurring friction in the export flow — 3 of 8 sessions ended at the same CSV timeout error. Despite this, engagement is increasing: session duration grew 40% week-over-week.",
-  "top_issues": [
-    "Export CSV timeout on datasets > 10k rows",
-    "Filter state resets after back-navigation"
-  ]
+  "sessionCount": 8,
+  "averageSessionScore": 71,
+  "userScore": 65,
+  "health": "At risk — recurring friction in core workflow",
+  "story": "Power user with increasing engagement over 7 days. 3 of 8 sessions ended at the same CSV export timeout on datasets over 10k rows. Filter state resets after back-navigation, forcing repeated setup. Despite friction, session duration grew 40% week-over-week — this user is invested but hitting real walls.",
+  "markdownPath": ".vesai/workspace/users/bryce-company-com.md"
 }`,
   },
   {
@@ -24,27 +23,31 @@ const levels = [
     question: "How is Acme Corp as a customer?",
     command: "vesai group acme-inc",
     output: `{
-  "group": "Acme Inc",
-  "users_analyzed": 4,
+  "groupId": "acme-inc",
+  "usersAnalyzed": 4,
   "score": 58,
-  "story": "Adoption is declining. 2 of 4 users have been inactive for 14+ days. The remaining active users show narrowing feature usage — down to just dashboard views. Initial onboarding was strong but no user has engaged with the integration setup flow.",
-  "risk": "high",
-  "recommendation": "Proactive outreach recommended. Focus on integration onboarding — this is where all 4 users dropped off."
+  "health": "Adoption declining — intervention recommended",
+  "story": "Acme Inc onboarded 4 users 3 weeks ago. Initial engagement was strong. Since then, 2 users have gone inactive (14+ days). The remaining active users show narrowing feature usage — primarily dashboard views only. No user has completed the integration setup flow, which appears to be the critical adoption gate. Proactive outreach recommended.",
+  "markdownPath": ".vesai/workspace/groups/acme-inc.md"
 }`,
   },
   {
     label: "Research",
-    question: "What causes checkout abandonment?",
-    command: 'vesai research "checkout abandonment"',
+    question: "Why are users abandoning checkout?",
+    command: 'vesai research "why are users abandoning checkout?"',
     output: `{
-  "question": "What causes checkout abandonment?",
-  "sessions_matched": 14,
-  "synthesis": "Checkout flow has a 62% completion rate. Primary drop-off occurs at the shipping address step. Mobile users are 3x more likely to abandon.",
-  "patterns": [
-    "Address autocomplete fails on mobile Safari",
-    "Shipping cost surprise causes back-navigation",
-    "Promo code field draws attention away from CTA"
-  ]
+  "question": "why are users abandoning checkout?",
+  "answer": "Checkout abandonment is driven by three compounding factors: shipping cost surprise, mobile form friction, and a distracting promo code field. 62% of users who reach checkout complete it, but mobile users are 3x more likely to abandon than desktop users.",
+  "findings": [
+    "Address autocomplete fails silently on mobile Safari, forcing manual entry",
+    "Shipping cost appears only after address entry — users back-navigate on sticker shock",
+    "Promo code field above CTA draws attention away from completing purchase",
+    "Desktop users who encounter errors recover 80% of the time; mobile users recover 27%"
+  ],
+  "confidence": "high",
+  "supportingSessionIds": ["s_a8f2c", "s_b91d0", "s_c43e7", "s_d67f1"],
+  "sessionsConsidered": 47,
+  "sessionsUsed": 14
 }`,
   },
 ];
@@ -59,12 +62,11 @@ export function Solution() {
         AI that watches every session
       </h2>
       <p className="mx-auto mt-4 max-w-2xl text-center text-text-secondary">
-        Three levels of analysis. From a single recording to account-level
-        intelligence.
+        From individual user stories to account-level intelligence to product
+        research — all from your existing PostHog&nbsp;data.
       </p>
 
       <div className="mt-12">
-        {/* Level tabs */}
         <div className="flex justify-center gap-2">
           {levels.map((l, i) => (
             <button
@@ -82,7 +84,6 @@ export function Solution() {
           ))}
         </div>
 
-        {/* Content */}
         <div className="mt-8 rounded-xl border border-border-subtle bg-bg-elevated p-6 sm:p-8">
           <p className="text-lg text-text-secondary italic">
             &ldquo;{level.question}&rdquo;

From d018fb6cd9d303ff1eca3b7d459ae84f5513b925 Mon Sep 17 00:00:00 2001
From: Echo <echo@northbrook.com>
Date: Sun, 15 Feb 2026 20:40:01 -0500
Subject: [PATCH 4/6] Revise subhead, flesh out solution output, constrain
 width

- Hero subhead: focus on user stories and qualitative learnings, not bugs
- Solution section: max-w-3xl for more substantial feel
- User/Group/Research outputs significantly expanded with richer stories, nested session/user arrays, trailing ... to suggest depth
- Scrollable output container with max-height

Co-authored-by: Bryce Bjork <brycedbjork@gmail.com>
---
 website/components/hero.tsx     |  5 ++-
 website/components/solution.tsx | 66 +++++++++++++++++++++++++++------
 2 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/website/components/hero.tsx b/website/components/hero.tsx
index 4bb9d5e..046a265 100644
--- a/website/components/hero.tsx
+++ b/website/components/hero.tsx
@@ -14,8 +14,9 @@ export function Hero() {
           </h1>
 
           <p className="mt-6 max-w-xl text-base text-text-secondary leading-[1.7] sm:text-lg">
-            VES AI watches every PostHog recording, finds the bugs and UX
-            friction your team missed, and writes it up&nbsp;— automatically.
+            VES AI watches every PostHog session replay and turns them into rich
+            user stories, product insights, and qualitative learnings your team
+            can actually act&nbsp;on.
           </p>
 
           <div className="mt-8 flex flex-wrap items-center gap-3">
diff --git a/website/components/solution.tsx b/website/components/solution.tsx
index 62eb29b..68ddbc2 100644
--- a/website/components/solution.tsx
+++ b/website/components/solution.tsx
@@ -14,7 +14,24 @@ const levels = [
   "averageSessionScore": 71,
   "userScore": 65,
   "health": "At risk — recurring friction in core workflow",
-  "story": "Power user with increasing engagement over 7 days. 3 of 8 sessions ended at the same CSV export timeout on datasets over 10k rows. Filter state resets after back-navigation, forcing repeated setup. Despite friction, session duration grew 40% week-over-week — this user is invested but hitting real walls.",
+  "story": "Power user exploring advanced features across 8 sessions over 7 days. Engagement is growing — session duration increased 40% week-over-week and feature breadth expanded from 3 to 7 unique features used. However, a critical blocker emerged: 3 of 8 sessions ended at the same CSV export timeout when datasets exceeded 10k rows. The user attempted workarounds (filtering down, paginating) but ultimately abandoned each time. Separately, filter state resets on back-navigation forced repeated configuration in every session, adding ~2 minutes of friction per visit. This user is deeply invested in the product but hitting real walls that will drive churn if unresolved.",
+  "sessions": [
+    {
+      "sessionId": "s_a1b2c3",
+      "score": 82,
+      "activeSeconds": 342,
+      "features": ["dashboard", "export", "filters"],
+      "issues": ["Export timeout on large dataset"]
+    },
+    {
+      "sessionId": "s_d4e5f6",
+      "score": 45,
+      "activeSeconds": 89,
+      "features": ["export"],
+      "issues": ["Export timeout", "Rage-clicked export button 4x"]
+    },
+    ...
+  ],
   "markdownPath": ".vesai/workspace/users/bryce-company-com.md"
 }`,
   },
@@ -27,7 +44,28 @@ const levels = [
   "usersAnalyzed": 4,
   "score": 58,
   "health": "Adoption declining — intervention recommended",
-  "story": "Acme Inc onboarded 4 users 3 weeks ago. Initial engagement was strong. Since then, 2 users have gone inactive (14+ days). The remaining active users show narrowing feature usage — primarily dashboard views only. No user has completed the integration setup flow, which appears to be the critical adoption gate. Proactive outreach recommended.",
+  "story": "Acme Inc onboarded 4 users 3 weeks ago with strong initial engagement across the team. Since then, adoption has fragmented. chen@acme.com and priya@acme.com have gone fully inactive (14+ days, last sessions ended in confusion at the integration setup flow). The two remaining active users — sarah@acme.com and mike@acme.com — show narrowing feature usage, down to just dashboard views and basic filters. No user has completed the integration setup flow, which appears to be the critical adoption gate. Sarah attempted it twice but hit a permissions error both times. The account is at high risk of churning within the next renewal cycle without proactive outreach focused on unblocking integration setup.",
+  "users": [
+    {
+      "email": "sarah@acme.com",
+      "sessions": 12,
+      "score": 68,
+      "health": "Engaged but blocked on integrations"
+    },
+    {
+      "email": "mike@acme.com",
+      "sessions": 6,
+      "score": 61,
+      "health": "Narrowing usage — dashboard only"
+    },
+    {
+      "email": "chen@acme.com",
+      "sessions": 3,
+      "score": 42,
+      "health": "Churned — inactive 18 days"
+    },
+    ...
+  ],
   "markdownPath": ".vesai/workspace/groups/acme-inc.md"
 }`,
   },
@@ -37,15 +75,21 @@ const levels = [
     command: 'vesai research "why are users abandoning checkout?"',
     output: `{
   "question": "why are users abandoning checkout?",
-  "answer": "Checkout abandonment is driven by three compounding factors: shipping cost surprise, mobile form friction, and a distracting promo code field. 62% of users who reach checkout complete it, but mobile users are 3x more likely to abandon than desktop users.",
+  "answer": "Checkout abandonment is driven by three compounding factors: shipping cost surprise, mobile form friction, and a distracting promo code field. 62% of users who reach checkout complete it on desktop, but mobile completion drops to just 21%. The primary drop-off point is the shipping address step, where mobile users encounter a silent autocomplete failure that forces manual entry. Users who see shipping costs for the first time at this step are 4.7x more likely to back-navigate than users who saw estimated costs earlier in the funnel.",
   "findings": [
-    "Address autocomplete fails silently on mobile Safari, forcing manual entry",
-    "Shipping cost appears only after address entry — users back-navigate on sticker shock",
-    "Promo code field above CTA draws attention away from completing purchase",
-    "Desktop users who encounter errors recover 80% of the time; mobile users recover 27%"
+    "Address autocomplete fails silently on mobile Safari — users see no error, just an empty field that won't advance",
+    "Shipping cost appears only after full address entry — 38% of users who see it immediately navigate back to cart",
+    "Promo code field is positioned above the purchase CTA and captures 23% of user attention time on the checkout page",
+    "Desktop users who encounter form errors recover 80% of the time; mobile users recover only 27%",
+    "Users who complete checkout in one attempt spend avg 47s; users who encounter any friction spend 3m12s and convert at 31%",
+    ...
   ],
   "confidence": "high",
-  "supportingSessionIds": ["s_a8f2c", "s_b91d0", "s_c43e7", "s_d67f1"],
+  "supportingSessionIds": [
+    "s_a8f2c", "s_b91d0", "s_c43e7", "s_d67f1",
+    "s_e82a3", "s_f19b7", "s_g44c2", "s_h55d8",
+    ...
+  ],
   "sessionsConsidered": 47,
   "sessionsUsed": 14
 }`,
@@ -57,7 +101,7 @@ export function Solution() {
   const level = levels[activeLevel]!;
 
   return (
-    <Section className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
+    <Section className="mx-auto max-w-3xl px-6 py-16 sm:py-24">
       <h2 className="text-center font-bold text-3xl text-text-primary tracking-tight sm:text-4xl">
         AI that watches every session
       </h2>
@@ -84,7 +128,7 @@ export function Solution() {
           ))}
         </div>
 
-        <div className="mt-8 rounded-xl border border-border-subtle bg-bg-elevated p-6 sm:p-8">
+        <div className="mt-8 rounded-xl border border-border-subtle bg-bg-elevated p-5 sm:p-6">
           <p className="text-lg text-text-secondary italic">
             &ldquo;{level.question}&rdquo;
           </p>
@@ -92,7 +136,7 @@ export function Solution() {
             $ {level.command}
           </div>
 
-          <div className="mt-4 overflow-x-auto rounded-lg border border-border-subtle bg-terminal p-4">
+          <div className="mt-4 max-h-[480px] overflow-y-auto rounded-lg border border-border-subtle bg-terminal p-4">
             <pre className="whitespace-pre-wrap break-words font-mono text-accent text-xs leading-relaxed sm:text-sm">
               <code>{level.output}</code>
             </pre>

From 34703bb6fa4ca9e657f257c440cb63362c00955a Mon Sep 17 00:00:00 2001
From: Echo <echo@northbrook.com>
Date: Sun, 15 Feb 2026 20:42:04 -0500
Subject: [PATCH 5/6] Hide scrollbar in hero terminal demo

Co-authored-by: Bryce Bjork <brycedbjork@gmail.com>
---
 website/app/globals.css                  | 9 +++++++++
 website/components/animated-terminal.tsx | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/website/app/globals.css b/website/app/globals.css
index 6947671..9d8773b 100644
--- a/website/app/globals.css
+++ b/website/app/globals.css
@@ -124,6 +124,15 @@ pre {
   transform: translateY(0);
 }
 
+/* Hide scrollbar in terminal demo */
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
 /* Copy button toast */
 .copy-toast {
   animation: toast-fade 2s ease-out forwards;
diff --git a/website/components/animated-terminal.tsx b/website/components/animated-terminal.tsx
index 0f72b34..2727966 100644
--- a/website/components/animated-terminal.tsx
+++ b/website/components/animated-terminal.tsx
@@ -287,7 +287,7 @@ export function AnimatedTerminal() {
       </div>
 
       <div
-        className="h-[340px] overflow-y-auto p-4 font-mono text-xs leading-relaxed sm:h-[420px] sm:p-5 sm:text-sm"
+        className="hide-scrollbar h-[340px] overflow-y-auto p-4 font-mono text-xs leading-relaxed sm:h-[420px] sm:p-5 sm:text-sm"
         ref={bodyRef}
       >
         {/* Command line */}

From 6fff9f073da53e18e07c93d8a3b7d8b813fe64a9 Mon Sep 17 00:00:00 2001
From: Echo <echo@northbrook.com>
Date: Sun, 15 Feb 2026 20:42:27 -0500
Subject: [PATCH 6/6] Hide scrollbar in solution output section

Co-authored-by: Bryce Bjork <brycedbjork@gmail.com>
---
 website/components/solution.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/components/solution.tsx b/website/components/solution.tsx
index 68ddbc2..b476ce9 100644
--- a/website/components/solution.tsx
+++ b/website/components/solution.tsx
@@ -136,7 +136,7 @@ export function Solution() {
             $ {level.command}
           </div>
 
-          <div className="mt-4 max-h-[480px] overflow-y-auto rounded-lg border border-border-subtle bg-terminal p-4">
+          <div className="hide-scrollbar mt-4 max-h-[480px] overflow-y-auto rounded-lg border border-border-subtle bg-terminal p-4">
             <pre className="whitespace-pre-wrap break-words font-mono text-accent text-xs leading-relaxed sm:text-sm">
               <code>{level.output}</code>
             </pre>