diff --git a/packages/website/public/homepage-hero.png b/packages/website/public/homepage-hero.png
new file mode 100644
index 000000000..6ab4ada9f
Binary files /dev/null and b/packages/website/public/homepage-hero.png differ
diff --git a/packages/website/src/components/hero-mockup.tsx b/packages/website/src/components/hero-mockup.tsx
index 9545b3d57..f1a0733d3 100644
--- a/packages/website/src/components/hero-mockup.tsx
+++ b/packages/website/src/components/hero-mockup.tsx
@@ -1,1005 +1,15 @@
-import * as React from "react";
-import { motion } from "framer-motion";
-import {
-  FolderGit2,
-  Paperclip,
-  ArrowUp,
-  X,
-  MessagesSquare,
-  Plus,
-  Settings,
-  Monitor,
-  GitCommitHorizontal,
-  ChevronDown,
-  ChevronRight,
-  ListChevronsUpDown,
-  Bot,
-  Check,
-  Loader,
-  SquareTerminal,
-  PanelLeft,
-  Ellipsis,
-  Mic,
-  GitPullRequest,
-  SquarePen,
-  Columns2,
-  Rows2,
-} from "lucide-react";
-import { ClaudeIcon, CodexIcon, SourceControlIcon } from "~/components/mockup";
-
-const USER_BUBBLE_STYLE = { borderRadius: "16px 2px 16px 16px" };
-const NEW_BADGE_STYLE = { backgroundColor: "rgba(46, 160, 67, 0.2)" };
-
-// ── Stagger timing ──────────────────────────────────────
-
-const D = {
-  shell: 0,
-  sidebar: 0.1,
-  titleBar: 0.15,
-  tabs: 0.25,
-  chat: 0.35,
-  diffPanel: 0.55,
-};
-
-function fade(delay: number) {
-  return {
-    initial: { opacity: 0, y: 8 } as const,
-    animate: { opacity: 1, y: 0 } as const,
-    transition: { duration: 0.5, delay, ease: "easeOut" as const },
-  };
-}
-
-// ── Data ────────────────────────────────────────────────
-
-type ChatItem =
-  | { type: "user"; text: string }
-  | { type: "text"; text: string; bold?: boolean }
-  | { type: "tool"; label: string; summary?: string; status: "running" | "done" };
-
-const CHAT: ChatItem[] = [
-  { type: "user", text: "Build me an internal dashboard for tracking customer returns" },
-  { type: "text", text: "I'll break this down into planning and implementation.", bold: true },
-  { type: "tool", label: "Run plan-technical", summary: "codex · plan-technical", status: "done" },
-  { type: "tool", label: "Run plan-design", summary: "claude · plan-design", status: "done" },
-  {
-    type: "tool",
-    label: "Wait for agents",
-    summary: "plan-technical  plan-design",
-    status: "done",
-  },
-  { type: "text", text: "Got the plans. Spinning up Codex for implementation.", bold: true },
-  { type: "tool", label: "Run implement", summary: "codex · 12 files changed", status: "done" },
-  { type: "text", text: "Implementation done. Requesting review from Claude." },
-  { type: "tool", label: "Run review", summary: "claude · no issues found", status: "running" },
-  { type: "text", text: "All tasks complete. Dashboard is ready.", bold: true },
-];
-
-// ── Sidebar data ────────────────────────────────────────
-
-interface SidebarWorkspace {
-  name: string;
-  kind: "checkout" | "worktree";
-  status: "running" | "done" | "idle" | "syncing";
-  selected?: boolean;
-  diffStat?: { additions: number; deletions: number };
-  pr?: { number: number; state: "open" | "merged" | "closed" };
-}
-
-interface SidebarProject {
-  initial: string;
-  name: string;
-  workspaces: SidebarWorkspace[];
-}
-
-const SIDEBAR_PROJECTS: SidebarProject[] = [
-  {
-    initial: "A",
-    name: "acme/returns-app",
-    workspaces: [
-      {
-        name: "main",
-        kind: "checkout",
-        status: "syncing",
-        selected: true,
-        diffStat: { additions: 247, deletions: 15 },
-      },
-      {
-        name: "feat/dashboard",
-        kind: "worktree",
-        status: "done",
-        pr: { number: 142, state: "open" },
-      },
-    ],
-  },
-  {
-    initial: "P",
-    name: "acme/payments",
-    workspaces: [
-      { name: "main", kind: "checkout", status: "idle" },
-      {
-        name: "fix/stripe-webhook",
-        kind: "worktree",
-        status: "done",
-        diffStat: { additions: 38, deletions: 4 },
-        pr: { number: 89, state: "merged" },
-      },
-    ],
-  },
-  {
-    initial: "I",
-    name: "acme/infra",
-    workspaces: [
-      { name: "main", kind: "checkout", status: "idle" },
-      {
-        name: "feat/k8s-autoscale",
-        kind: "worktree",
-        status: "syncing",
-        diffStat: { additions: 91, deletions: 3 },
-      },
-    ],
-  },
-  {
-    initial: "D",
-    name: "acme/design-system",
-    workspaces: [{ name: "main", kind: "checkout", status: "idle" }],
-  },
-];
-
-// ── Tab data ─────────────────────────────────────────────
-
-interface TabDef {
-  name: string;
-  provider: "claude" | "codex" | "terminal";
-  done: boolean;
-  active?: boolean;
-}
-
-const TABS: TabDef[] = [
-  { name: "Orchestrator", provider: "claude", done: false, active: true },
-  { name: "Implement", provider: "codex", done: true },
-];
-
-// ── Diff data ──────────────────────────────────────────
-
-type DiffLineType = "add" | "remove" | "context" | "header";
-interface DiffLine {
-  type: DiffLineType;
-  ln: string | null;
-  content?: string;
-  tokens?: Array<{ text: string; cls: string }>;
-}
-
-const DIFF_LINES: DiffLine[] = [
-  {
-    type: "add",
-    ln: "1",
-    tokens: [
-      { text: "import", cls: "text-syn-keyword" },
-      { text: " { ", cls: "text-syn-punctuation" },
-      { text: "useState", cls: "text-syn-variable" },
-      { text: " } ", cls: "text-syn-punctuation" },
-      { text: "from", cls: "text-syn-keyword" },
-      { text: ' "react"', cls: "text-syn-string" },
-    ],
-  },
-  {
-    type: "add",
-    ln: "2",
-    tokens: [
-      { text: "import", cls: "text-syn-keyword" },
-      { text: " { ", cls: "text-syn-punctuation" },
-      { text: "ReturnTable", cls: "text-syn-variable" },
-      { text: " } ", cls: "text-syn-punctuation" },
-      { text: "from", cls: "text-syn-keyword" },
-      { text: ' "./components"', cls: "text-syn-string" },
-    ],
-  },
-  { type: "add", ln: "3", tokens: [] },
-  {
-    type: "add",
-    ln: "4",
-    tokens: [
-      { text: "export", cls: "text-syn-keyword" },
-      { text: " function", cls: "text-syn-keyword" },
-      { text: " Dashboard", cls: "text-syn-function" },
-      { text: "() {", cls: "text-syn-punctuation" },
-    ],
-  },
-  {
-    type: "add",
-    ln: "5",
-    tokens: [
-      { text: "  const", cls: "text-syn-keyword" },
-      { text: " [returns, setReturns]", cls: "text-syn-variable" },
-      { text: " = ", cls: "text-syn-operator" },
-      { text: "useState", cls: "text-syn-function" },
-      { text: "([])", cls: "text-syn-punctuation" },
-    ],
-  },
-  {
-    type: "add",
-    ln: "6",
-    tokens: [
-      { text: "  const", cls: "text-syn-keyword" },
-      { text: " [filter, setFilter]", cls: "text-syn-variable" },
-      { text: " = ", cls: "text-syn-operator" },
-      { text: "useState", cls: "text-syn-function" },
-      { text: '("all")', cls: "text-syn-string" },
-    ],
-  },
-  { type: "add", ln: "7", tokens: [] },
-  {
-    type: "add",
-    ln: "8",
-    tokens: [
-      { text: "  ", cls: "text-syn-punctuation" },
-      { text: "return", cls: "text-syn-keyword" },
-      { text: " (", cls: "text-syn-punctuation" },
-    ],
-  },
-  {
-    type: "add",
-    ln: "9",
-    tokens: [
-      { text: "    <", cls: "text-syn-punctuation" },
-      { text: "main", cls: "text-syn-tag" },
-      { text: " className", cls: "text-syn-property" },
-      { text: '="', cls: "text-syn-punctuation" },
-      { text: "min-h-screen p-8", cls: "text-syn-string" },
-      { text: '">', cls: "text-syn-punctuation" },
-    ],
-  },
-  {
-    type: "add",
-    ln: "10",
-    tokens: [
-      { text: "      <", cls: "text-syn-punctuation" },
-      { text: "h1", cls: "text-syn-tag" },
-      { text: ">Customer Returns</", cls: "text-syn-variable" },
-      { text: "h1", cls: "text-syn-tag" },
-      { text: ">", cls: "text-syn-punctuation" },
-    ],
-  },
-  {
-    type: "add",
-    ln: "11",
-    tokens: [
-      { text: "      <", cls: "text-syn-punctuation" },
-      { text: "FilterBar", cls: "text-syn-tag" },
-      { text: " value", cls: "text-syn-property" },
-      { text: "={", cls: "text-syn-punctuation" },
-      { text: "filter", cls: "text-syn-variable" },
-      { text: "}", cls: "text-syn-punctuation" },
-      { text: " onChange", cls: "text-syn-property" },
-      { text: "={", cls: "text-syn-punctuation" },
-      { text: "setFilter", cls: "text-syn-variable" },
-      { text: "} />", cls: "text-syn-punctuation" },
-    ],
-  },
-  {
-    type: "add",
-    ln: "12",
-    tokens: [
-      { text: "      <", cls: "text-syn-punctuation" },
-      { text: "ReturnTable", cls: "text-syn-tag" },
-      { text: " data", cls: "text-syn-property" },
-      { text: "={", cls: "text-syn-punctuation" },
-      { text: "returns", cls: "text-syn-variable" },
-      { text: "} />", cls: "text-syn-punctuation" },
-    ],
-  },
-  {
-    type: "add",
-    ln: "13",
-    tokens: [
-      { text: "      <", cls: "text-syn-punctuation" },
-      { text: "StatusChart", cls: "text-syn-tag" },
-      { text: " data", cls: "text-syn-property" },
-      { text: "={", cls: "text-syn-punctuation" },
-      { text: "returns", cls: "text-syn-variable" },
-      { text: "} />", cls: "text-syn-punctuation" },
-    ],
-  },
-  {
-    type: "add",
-    ln: "14",
-    tokens: [
-      { text: "    </", cls: "text-syn-punctuation" },
-      { text: "main", cls: "text-syn-tag" },
-      { text: ">", cls: "text-syn-punctuation" },
-    ],
-  },
-  { type: "add", ln: "15", tokens: [{ text: "  )", cls: "text-syn-punctuation" }] },
-  { type: "add", ln: "16", tokens: [{ text: "}", cls: "text-syn-punctuation" }] },
-];
-
-// ── Implementation agent chat data ──────────────────────
-
-// ── Terminal log lines ─────────────────────────────────
-
-const TERMINAL_LINES = [
-  { id: "cmd", text: "$ npm run dev", cls: "text-mock-fg" },
-  { id: "blank1", text: "", cls: "" },
-  { id: "pkg", text: "> acme-returns@0.1.0 dev", cls: "text-mock-fg-muted" },
-  { id: "pkg-cmd", text: "> next dev --turbopack", cls: "text-mock-fg-muted" },
-  { id: "blank2", text: "", cls: "" },
-  { id: "next-ver", text: "  ▲ Next.js 15.3.1 (Turbopack)", cls: "text-mock-fg" },
-  { id: "next-local", text: "  - Local:   http://localhost:3000", cls: "text-mock-fg-muted" },
-  { id: "blank3", text: "", cls: "" },
-  { id: "starting", text: " ✓ Starting...", cls: "text-mock-green" },
-  { id: "ready", text: " ✓ Ready in 1.2s", cls: "text-mock-green" },
-  { id: "compiling-dashboard", text: " ○ Compiling /dashboard ...", cls: "text-mock-fg-muted" },
-  { id: "compiled-dashboard", text: " ✓ Compiled /dashboard in 340ms", cls: "text-mock-green" },
-  { id: "compiling-api", text: " ○ Compiling /api/returns ...", cls: "text-mock-fg-muted" },
-  { id: "compiled-api", text: " ✓ Compiled /api/returns in 120ms", cls: "text-mock-green" },
-];
-
-// ── Sub-components ──────────────────────────────────────
-
-function TrafficLights() {
-  return (
-    <div className="flex items-center gap-[6px]">
-      <div className="w-[11px] h-[11px] rounded-full bg-[#ff5f57]" />
-      <div className="w-[11px] h-[11px] rounded-full bg-[#febc2e]" />
-      <div className="w-[11px] h-[11px] rounded-full bg-[#28c840]" />
-    </div>
-  );
-}
-
-function ProviderIcon({
-  provider,
-  muted = false,
-}: {
-  provider: "claude" | "codex" | "terminal";
-  muted?: boolean;
-}) {
-  const cls = muted ? "text-mock-fg-muted" : "text-mock-fg";
-  if (provider === "terminal") return <SquareTerminal size={13} className={cls} />;
-  return provider === "claude" ? (
-    <ClaudeIcon size={13} className={cls} />
-  ) : (
-    <CodexIcon size={13} className={cls} />
-  );
-}
-
-function TabBarAction({
-  icon: Icon,
-}: {
-  icon: React.ComponentType<{ size?: number; className?: string; strokeWidth?: number }>;
-}) {
-  return (
-    <div className="w-4 h-5 flex items-center justify-center flex-shrink-0">
-      <Icon size={12} strokeWidth={1.5} className="text-mock-fg-muted" />
-    </div>
-  );
-}
-
-function PaneTabBar({ tabs, focused = false }: { tabs: TabDef[]; focused?: boolean }) {
-  return (
-    <div className="flex items-stretch h-7 bg-mock-surface0 border-b border-mock-border flex-shrink-0">
-      {tabs.map((tab) => (
-        <div
-          key={tab.name}
-          className="flex items-center gap-1.5 px-2 border-r border-mock-border relative min-w-0"
-        >
-          {tab.active && (
-            <div
-              className={`absolute top-0 left-0 right-0 h-0.5 ${focused ? "bg-mock-accent" : "bg-mock-border-accent"}`}
-            />
-          )}
-
-          <div className="relative flex-shrink-0">
-            <ProviderIcon provider={tab.provider} muted={!tab.active} />
-          </div>
-
-          <span
-            className={`text-[11px] truncate ${tab.active ? "text-mock-fg" : "text-mock-fg-muted"}`}
-          >
-            {tab.name}
-          </span>
-
-          <X size={11} className="text-mock-zinc500 flex-shrink-0 ml-auto" />
-        </div>
-      ))}
-      <div className="ml-auto flex items-center px-1.5">
-        <TabBarAction icon={SquarePen} />
-        <TabBarAction icon={SquareTerminal} />
-        <TabBarAction icon={Columns2} />
-        <TabBarAction icon={Rows2} />
-      </div>
-    </div>
-  );
-}
-
-function Composer({
-  provider,
-  model,
-  focused = false,
-}: {
-  provider: "claude" | "codex";
-  model: string;
-  focused?: boolean;
-}) {
-  const Icon = provider === "claude" ? ClaudeIcon : CodexIcon;
-  return (
-    <div className="px-3 pb-3 flex-shrink-0">
-      <div className="bg-mock-surface1 border border-mock-border-accent rounded-2xl px-3 py-3 flex flex-col gap-[12px]">
-        <div className="flex items-center">
-          {focused && (
-            <span className="inline-block w-[1px] h-[14px] bg-mock-fg animate-pulse mr-[1px] flex-shrink-0" />
-          )}
-          <span className="text-[11px] text-mock-fg-muted/40 leading-[1.4] select-none whitespace-nowrap overflow-hidden text-ellipsis">
-            Message the agent, tag @files, or use /commands and /skills
-          </span>
-        </div>
-        <div className="flex items-end justify-between">
-          <div className="flex items-center gap-0.5">
-            <div className="w-[22px] h-[22px] rounded-full flex items-center justify-center flex-shrink-0">
-              <Paperclip size={12} className="text-mock-fg" />
-            </div>
-            <div className="flex items-center gap-[4px] h-[22px] px-[6px] rounded-full">
-              <Icon size={12} className="text-mock-fg-muted" />
-              <span className="text-[10px] text-mock-fg-muted leading-none">{model}</span>
-              <ChevronDown size={10} className="text-mock-fg-muted" />
-            </div>
-          </div>
-          <div className="flex items-center gap-[6px]">
-            <div className="w-[22px] h-[22px] rounded-full flex items-center justify-center flex-shrink-0">
-              <Mic size={12} className="text-mock-fg" />
-            </div>
-            <div className="w-[22px] h-[22px] rounded-full bg-mock-accent flex items-center justify-center flex-shrink-0">
-              <ArrowUp size={12} className="text-white" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function prStateLabel(state: "open" | "merged" | "closed"): string {
-  if (state === "open") return "Open";
-  if (state === "merged") return "Merged";
-  return "Closed";
-}
-
-function WorkspaceIcon({ workspace }: { workspace: SidebarWorkspace }) {
-  if (workspace.status === "syncing") return <SyncedLoader size={11} />;
-  const icon =
-    workspace.kind === "worktree" ? (
-      <FolderGit2 size={14} className="text-mock-fg-muted" />
-    ) : (
-      <Monitor size={14} className="text-mock-fg-muted" />
-    );
-  return (
-    <>
-      {icon}
-      {workspace.status !== "idle" && (
-        <div className="absolute bottom-0 right-0">
-          <WorkspaceStatusDot status={workspace.status} />
-        </div>
-      )}
-    </>
-  );
-}
-
-function SidebarWorkspaceRow({ workspace }: { workspace: SidebarWorkspace }) {
-  return (
-    <div className={`mb-1 mx-1.5 rounded-lg ${workspace.selected ? "bg-mock-surface1" : ""}`}>
-      <div className="flex items-center gap-2 min-h-[28px] py-1 pl-[22px] pr-1">
-        <div className="relative w-[14px] h-4 flex-shrink-0 flex items-center justify-center">
-          <WorkspaceIcon workspace={workspace} />
-        </div>
-        <span className="text-[10px] text-mock-fg/[0.76] font-normal truncate flex-1 min-w-0 leading-[1.4]">
-          {workspace.name}
-        </span>
-        {workspace.diffStat && (
-          <div className="flex items-center gap-1 flex-shrink-0">
-            <span className="text-[10px] text-mock-green-400 font-normal leading-none">
-              +{workspace.diffStat.additions}
-            </span>
-            <span className="text-[10px] text-mock-red font-normal leading-none">
-              -{workspace.diffStat.deletions}
-            </span>
-          </div>
-        )}
-      </div>
-      {workspace.pr && (
-        <div className="flex items-center gap-1 pl-[42px] pr-2 pb-0.5">
-          <GitPullRequest size={11} className="text-mock-fg-muted" />
-          <span className="text-[10px] text-mock-fg-muted leading-none truncate">
-            #{workspace.pr.number} · {prStateLabel(workspace.pr.state)}
-          </span>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function diffLineBg(type: DiffLineType): string {
-  if (type === "add") return "bg-mock-diff-add";
-  if (type === "remove") return "bg-mock-diff-remove";
-  return "bg-mock-surface1";
-}
-
-function diffLineNumCls(type: DiffLineType): string {
-  if (type === "add") return "text-mock-green-400";
-  if (type === "remove") return "text-mock-red";
-  return "text-mock-fg-muted";
-}
-
-function DiffLineRow({ line }: { line: DiffLine }) {
-  const lineBg = diffLineBg(line.type);
-  const lineNumCls = diffLineNumCls(line.type);
-  return (
-    <div className={`flex items-stretch ${lineBg}`}>
-      <div className="w-8 border-r border-mock-border flex-shrink-0 flex items-center justify-end">
-        <code className={`text-[10px] font-mono ${lineNumCls} select-none pr-2 py-[1px]`}>
-          {line.ln ?? ""}
-        </code>
-      </div>
-      <code className="text-[10px] font-mono text-mock-fg pl-3 pr-3 py-[1px] whitespace-pre flex-1 min-w-0">
-        {line.tokens?.map((tok) => (
-          <span key={`${tok.cls}:${tok.text}`} className={tok.cls}>
-            {tok.text}
-          </span>
-        ))}
-      </code>
-    </div>
-  );
-}
-
-function chatItemKey(item: ChatItem): string {
-  if (item.type === "user") return `user-${item.text}`;
-  if (item.type === "tool") return `tool-${item.label}-${item.summary ?? ""}`;
-  return `text-${item.text}`;
-}
-
-function ChatMessages({ items }: { items: ChatItem[] }) {
-  return (
-    <div className="flex-1 overflow-hidden px-2 py-2">
-      {items.map((item) => {
-        const key = chatItemKey(item);
-        if (item.type === "user") {
-          return (
-            <div key={key} className="flex justify-end py-1">
-              <div
-                className="bg-mock-surface2 px-2.5 py-1.5 max-w-[85%] leading-none"
-                style={USER_BUBBLE_STYLE}
-              >
-                <span className="text-[11px] text-mock-fg leading-none">{item.text}</span>
-              </div>
-            </div>
-          );
-        }
-        if (item.type === "tool") {
-          const isDone = item.status === "done";
-          return (
-            <div
-              key={key}
-              className="flex items-center rounded-lg px-2 py-[1px] -mx-[6px] border border-transparent"
-            >
-              <div className="w-[22px] h-[22px] rounded-full flex items-center justify-center flex-shrink-0 mr-1">
-                <Bot size={12} className="text-mock-fg-muted" />
-              </div>
-              <span className="text-[11px] text-mock-fg-muted truncate flex-shrink-0">
-                {item.label}
-              </span>
-              {item.summary && (
-                <span className="text-[11px] text-mock-zinc500 truncate flex-1 ml-2">
-                  {item.summary}
-                </span>
-              )}
-              <div className="ml-auto flex-shrink-0 pl-2">
-                {isDone ? (
-                  <Check size={11} className="text-mock-zinc500" />
-                ) : (
-                  <Loader size={11} className="text-mock-fg-muted animate-spin" />
-                )}
-              </div>
-            </div>
-          );
-        }
-        return (
-          <p
-            key={key}
-            className={`text-[11px] px-2 py-[1px] text-mock-fg leading-[1.5] ${item.bold ? "font-medium" : ""}`}
-          >
-            {item.text}
-          </p>
-        );
-      })}
-    </div>
-  );
-}
-
-function ChatArea() {
-  return (
-    <div className="flex flex-col flex-1 min-w-0 bg-mock-surface0">
-      <ChatMessages items={CHAT} />
-      <Composer provider="claude" model="Opus 4.6" focused />
-    </div>
-  );
-}
-
-function TerminalPane() {
-  return (
-    <div className="flex flex-col flex-1 min-w-0 min-h-0 bg-mock-surface0">
-      <div className="flex-1 overflow-hidden px-3 py-2">
-        {TERMINAL_LINES.map((line) => (
-          <div key={line.id} className="leading-[1.15]">
-            <code className={`text-[10px] font-mono ${line.cls} whitespace-pre`}>{line.text}</code>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function ExplorerSidebar() {
-  return (
-    <div className="flex flex-col bg-mock-sidebar border-l border-mock-border w-[28%] flex-shrink-0 overflow-hidden">
-      {/* Explorer header — h-12, Changes/Files tabs */}
-      <div className="flex items-center h-10 px-2 border-b border-mock-border flex-shrink-0">
-        <div className="flex items-center gap-1">
-          <div className="flex items-center px-3 py-1.5 rounded-md bg-mock-surface1">
-            <span className="text-[11px] text-mock-fg font-medium">Changes</span>
-          </div>
-          <div className="flex items-center px-3 py-1.5 rounded-md">
-            <span className="text-[11px] text-mock-fg-muted">Files</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Secondary header — h-9, Uncommitted dropdown + filter icons */}
-      <div className="flex items-center justify-between h-9 border-b border-mock-border flex-shrink-0">
-        <div className="flex items-center gap-1 ml-2 px-1 h-6 rounded">
-          <span className="text-[11px] text-mock-fg-muted">Uncommitted</span>
-          <ChevronDown size={11} className="text-mock-fg-muted" />
-        </div>
-        <div className="flex items-center pr-2">
-          <div className="flex items-center justify-center w-6 h-6 rounded">
-            <ListChevronsUpDown size={14} className="text-mock-fg-muted" />
-          </div>
-        </div>
-      </div>
-
-      {/* File header — expanded */}
-      <div className="flex items-center justify-between pl-2 pr-2 py-1.5 border-b border-mock-border flex-shrink-0">
-        <div className="flex items-center gap-1 flex-1 min-w-0 overflow-hidden">
-          <ChevronDown size={10} className="text-mock-fg-muted flex-shrink-0" />
-          <span className="text-[11px] text-mock-fg flex-shrink-0">dashboard.tsx</span>
-          <span className="text-[11px] text-mock-fg-muted truncate min-w-0"> src/pages</span>
-          <span
-            className="text-[10px] text-mock-green-400 px-2 py-[2px] rounded-md flex-shrink-0"
-            style={NEW_BADGE_STYLE}
-          >
-            New
-          </span>
-        </div>
-        <div className="flex items-center gap-1 flex-shrink-0 ml-1">
-          <span className="text-[11px] text-mock-green-400">+16</span>
-          <span className="text-[11px] text-mock-red">-0</span>
-        </div>
-      </div>
-
-      {/* Diff lines */}
-      <div className="overflow-hidden bg-mock-surface1">
-        {DIFF_LINES.map((line) => (
-          <DiffLineRow key={`${line.type}-${line.ln ?? "blank"}`} line={line} />
-        ))}
-      </div>
-
-      {/* Collapsed file rows */}
-      {[
-        { name: "return-table.tsx", dir: "src/components", added: 42, removed: 8 },
-        { name: "filter-bar.tsx", dir: "src/components", added: 28, removed: 3 },
-        { name: "status-chart.tsx", dir: "src/components", added: 19, removed: 0, isNew: true },
-        { name: "returns.ts", dir: "src/api", added: 12, removed: 5 },
-        { name: "index.tsx", dir: "src/pages", added: 6, removed: 2 },
-      ].map((file) => (
-        <div
-          key={file.name}
-          className="flex items-center justify-between pl-2 pr-2 py-1.5 border-b border-mock-border"
-        >
-          <div className="flex items-center gap-1 flex-1 min-w-0 overflow-hidden">
-            <ChevronRight size={10} className="text-mock-fg-muted flex-shrink-0" />
-            <span className="text-[11px] text-mock-fg flex-shrink-0">{file.name}</span>
-            <span className="text-[11px] text-mock-fg-muted truncate min-w-0"> {file.dir}</span>
-            {file.isNew && (
-              <span
-                className="text-[10px] text-mock-green-400 px-2 py-[2px] rounded-md flex-shrink-0"
-                style={NEW_BADGE_STYLE}
-              >
-                New
-              </span>
-            )}
-          </div>
-          <div className="flex items-center gap-1 flex-shrink-0 ml-1">
-            <span className="text-[11px] text-mock-green-400">+{file.added}</span>
-            <span className="text-[11px] text-mock-red">-{file.removed}</span>
-          </div>
-        </div>
-      ))}
-
-      <div className="flex-1" />
-    </div>
-  );
-}
-
-// Snake traversal order matching the real app: [0, 1, 3, 5, 4, 2] (2-col × 3-row grid)
-// DOT_SEQUENCE[sequenceIndex] = dotIndex, so sequenceIndex = indexOf(dotIndex)
-const DOT_SEQUENCE = [0, 1, 3, 5, 4, 2] as const;
-const SYNCED_LOADER_DURATION_MS = 950;
-const DOT_COUNT = 6;
-const DOT_INDICES = Array.from({ length: DOT_COUNT }, (_, i) => i);
-const STEP_MS = SYNCED_LOADER_DURATION_MS / DOT_COUNT; // 158.333…ms per step
-
-interface SyncedLoaderDotProps {
-  dotIndex: number;
-  dotSize: number;
-  gap: number;
-}
-
-function SyncedLoaderDot({ dotIndex, dotSize, gap }: SyncedLoaderDotProps) {
-  const col = dotIndex % 2;
-  const row = Math.floor(dotIndex / 2);
-  const sequenceIndex = DOT_SEQUENCE.indexOf(dotIndex as (typeof DOT_SEQUENCE)[number]);
-  const delayMs = -(sequenceIndex * STEP_MS);
-  const style = React.useMemo(
-    () => ({
-      position: "absolute" as const,
-      left: col * (dotSize + gap),
-      top: row * (dotSize + gap),
-      width: dotSize,
-      height: dotSize,
-      borderRadius: "50%",
-      backgroundColor: "#f59e0b",
-      animationName: "synced-snake-dot",
-      animationDuration: `${SYNCED_LOADER_DURATION_MS}ms`,
-      animationTimingFunction: "linear",
-      animationIterationCount: "infinite",
-      animationDelay: `${delayMs}ms`,
-    }),
-    [col, row, dotSize, gap, delayMs],
-  );
-  return <div style={style} />;
-}
-
-function SyncedLoader({ size = 11 }: { size?: number }) {
-  const gap = Math.max(1, Math.round(size * 0.12));
-  const dotSize = Math.max(2, Math.floor((size - gap * 2) / 3));
-  const gridW = dotSize * 2 + gap;
-  const gridH = dotSize * 3 + gap * 2;
-
-  const outerStyle = React.useMemo(
-    () => ({
-      width: size,
-      height: size,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: 0,
-    }),
-    [size],
-  );
-
-  const innerStyle = React.useMemo(
-    () => ({ position: "relative" as const, width: gridW, height: gridH }),
-    [gridW, gridH],
-  );
-
-  return (
-    <div style={outerStyle}>
-      <div style={innerStyle}>
-        {DOT_INDICES.map((dotIndex) => (
-          <SyncedLoaderDot
-            key={`dot-${dotIndex}`}
-            dotIndex={dotIndex}
-            dotSize={dotSize}
-            gap={gap}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function WorkspaceStatusDot({ status }: { status: SidebarWorkspace["status"] }) {
-  if (status === "running") return <div className="w-[5px] h-[5px] rounded-full bg-mock-amber" />;
-  if (status === "done") return <div className="w-[5px] h-[5px] rounded-full bg-mock-green" />;
-  return null;
-}
-
-function Sidebar() {
-  // Shared left edge: pl-3 (12px) for traffic lights, icons, footer dot
-  // Workspace indent: pl-7 (28px)
-  // PR badge aligns with workspace text: pl-[42px]
-  return (
-    <div className="flex flex-col bg-mock-sidebar border-r border-mock-border w-[200px] flex-shrink-0">
-      {/* Traffic lights */}
-      <div className="flex items-center pl-3 pr-2 pt-3 pb-2">
-        <TrafficLights />
-      </div>
-
-      {/* Sessions header */}
-      <div className="flex items-center gap-2 pl-3 pr-2 py-2 border-b border-mock-border">
-        <MessagesSquare size={14} className="text-mock-fg-muted flex-shrink-0" />
-        <span className="text-[12px] text-mock-fg-muted">Sessions</span>
-      </div>
-
-      {/* Project list */}
-      <div className="flex-1 overflow-hidden pt-1 pb-4 min-h-0">
-        {SIDEBAR_PROJECTS.map((project) => (
-          <div key={project.name} className="mb-2">
-            {/* Project row — icon aligns with traffic lights / sessions */}
-            <div className="flex items-center gap-2 min-h-[32px] py-1.5 pl-3 pr-2">
-              <div className="w-4 h-4 rounded-sm border border-mock-border flex items-center justify-center flex-shrink-0">
-                <span className="text-[9px] text-mock-fg-muted leading-none">
-                  {project.initial}
-                </span>
-              </div>
-              <span className="text-[11px] text-mock-fg font-normal truncate flex-1 min-w-0 leading-5">
-                {project.name}
-              </span>
-            </div>
-
-            {/* Workspace rows — indented one level */}
-            {project.workspaces.map((workspace) => (
-              <SidebarWorkspaceRow key={workspace.name} workspace={workspace} />
-            ))}
-          </div>
-        ))}
-      </div>
-
-      {/* Footer — dot aligns with traffic lights / icons */}
-      <div className="flex items-center justify-between pl-3 pr-2 py-3 border-t border-mock-border">
-        <div className="flex items-center gap-2 min-w-0 flex-shrink">
-          <div className="w-2 h-2 rounded-full bg-mock-green flex-shrink-0" />
-          <span className="text-[11px] text-mock-fg-muted truncate">MacBook Pro</span>
-        </div>
-        <div className="flex items-center gap-1 flex-shrink-0">
-          <div className="w-6 h-6 flex items-center justify-center">
-            <Plus size={18} className="text-mock-fg-muted" />
-          </div>
-          <div className="w-6 h-6 flex items-center justify-center">
-            <Settings size={18} className="text-mock-fg-muted" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const TERMINAL_TABS: TabDef[] = [
-  { name: "npm run dev", provider: "terminal", done: false, active: true },
-];
-
-function TitleBarLeft() {
-  return (
-    <div className="flex items-center gap-2 flex-1 min-w-0">
-      <div className="px-2 py-1 rounded-lg flex items-center justify-center flex-shrink-0">
-        <PanelLeft size={14} className="text-mock-fg-muted" />
-      </div>
-      <div className="flex items-center gap-2 min-w-0 flex-1">
-        <span className="text-[13px] font-light text-mock-fg truncate flex-shrink-0">main</span>
-        <span className="text-[13px] text-mock-fg-muted truncate flex-shrink min-w-0">
-          acme/returns-app
-        </span>
-        <div className="px-2 py-1 rounded-lg flex items-center justify-center flex-shrink-0">
-          <Ellipsis size={14} className="text-mock-fg-muted" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function TitleBarRight() {
-  return (
-    <div className="flex items-center gap-2 ml-auto flex-shrink-0">
-      <div className="flex items-stretch rounded-md border border-mock-border-accent overflow-hidden">
-        <div className="flex items-center gap-2 px-3 py-1">
-          <GitCommitHorizontal size={12} className="text-mock-fg-muted flex-shrink-0" />
-          <span className="text-[11px] text-mock-fg font-normal">Commit</span>
-        </div>
-        <div className="flex items-center justify-center w-7 border-l border-mock-border-accent">
-          <ChevronDown size={12} className="text-mock-fg-muted" />
-        </div>
-      </div>
-      <div className="flex items-center gap-2 px-3 py-1 rounded-md">
-        <SourceControlIcon size={14} className="text-mock-fg-muted" />
-        <span className="text-[11px] font-normal text-mock-green-400">+247</span>
-        <span className="text-[11px] font-normal text-mock-red">-15</span>
-      </div>
-    </div>
-  );
-}
-
-function DesktopSplitPanes() {
-  return (
-    <div className="flex flex-1 min-h-0">
-      {/* Left pane: all agent tabs + chat */}
-      <div className="flex flex-col flex-1 min-w-0 min-h-0">
-        <motion.div {...fade(D.tabs)}>
-          <PaneTabBar tabs={TABS} focused />
-        </motion.div>
-        <motion.div {...fade(D.chat)} className="flex-1 flex min-h-0">
-          <ChatArea />
-        </motion.div>
-      </div>
-
-      {/* Resize handle */}
-      <div className="w-px bg-mock-border flex-shrink-0" />
-
-      {/* Right pane: terminal only */}
-      <motion.div {...fade(D.chat)} className="flex flex-col flex-1 min-w-0 min-h-0">
-        <PaneTabBar tabs={TERMINAL_TABS} />
-        <TerminalPane />
-      </motion.div>
-    </div>
-  );
-}
-
-// ── Desktop Mockup ──────────────────────────────────────
-
-function DesktopMockup() {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const [scale, setScale] = React.useState(1);
-
-  React.useEffect(() => {
-    function updateScale() {
-      if (!containerRef.current) return;
-      const parentWidth = containerRef.current.parentElement?.clientWidth ?? 1200;
-      const designWidth = 1200;
-      setScale(Math.min(1, parentWidth / designWidth));
-    }
-    updateScale();
-    window.addEventListener("resize", updateScale);
-    return () => window.removeEventListener("resize", updateScale);
-  }, []);
-
-  const containerStyle = React.useMemo(() => ({ height: `${1200 * (9 / 16) * scale}px` }), [scale]);
-  const innerStyle = React.useMemo(() => ({ width: 1200, transform: `scale(${scale})` }), [scale]);
-
-  return (
-    <div ref={containerRef} className="w-full overflow-hidden" style={containerStyle}>
-      <div
-        className="mx-auto rounded-xl overflow-hidden border border-mock-border bg-mock-surface0 shadow-[6px_6px_0_rgba(0,0,0,0.4)] origin-top-left"
-        style={innerStyle}
-      >
-        {/* Top-level: left sidebar | center column | explorer sidebar — all full height */}
-        <div className="flex aspect-video">
-          {/* Left sidebar — full height */}
-          <motion.div {...fade(D.sidebar)} className="contents">
-            <Sidebar />
-          </motion.div>
-
-          {/* Center column: title bar + split panes */}
-          <div className="flex flex-col flex-1 min-w-0 min-h-0">
-            {/* Title bar — belongs to center column only */}
-            <motion.div
-              {...fade(D.titleBar)}
-              className="flex items-center h-10 px-2 bg-mock-surface0 border-b border-mock-border flex-shrink-0"
-            >
-              <TitleBarLeft />
-              <TitleBarRight />
-            </motion.div>
-
-            <DesktopSplitPanes />
-          </div>
-
-          {/* Explorer sidebar — full height, pushes center column */}
-          <motion.div {...fade(D.diffPanel)} className="contents">
-            <ExplorerSidebar />
-          </motion.div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Export ───────────────────────────────────────────────
-
 export function HeroMockup() {
-  return <DesktopMockup />;
+  return (
+    <div className="overflow-hidden rounded-xl bg-mock-surface0 p-2 ring-1 ring-white/10 sm:rounded-2xl sm:p-3">
+      <img
+        src="/homepage-hero.png"
+        alt="Paseo desktop app with coding agents, a conversation, and a code diff open side by side"
+        width={2400}
+        height={1442}
+        fetchPriority="high"
+        decoding="async"
+        className="block h-auto w-full rounded-lg sm:rounded-xl"
+      />
+    </div>
+  );
 }