- You're running AI agents in 10 browser tabs.{" "}
-
- Checking if PRs landed. Re-running failed CI. Copy-pasting error logs.
+
+ {/* Subtle radial glow behind section */}
+
+
+
+
+
+ {/* ── Section Label ─────────────────────────────────────── */}
+
+
+
+ The problem
+
+
+ {/* ── Headline ─────────────────────────────────────────── */}
+
+ You're running AI agents{' '}
+ in 10 browser tabs.
+
+ Checking if PRs landed. Re-running failed CI. Copy-pasting error logs into ChatGPT.
+
-
-
- Agent Orchestrator replaces that with one YAML file. Point it at
- your GitHub issues, pick your agents, and walk away. Each agent
- spawns in its own git worktree, creates PRs, fixes CI failures,
- addresses review comments, and moves toward merge. If you are new, start with the docs quickstart and configuration guides.
-
+ {/* ── Side-by-side Layout ──────────────────────────────── */}
+
+ {/* Left — Explanation */}
+
+
+ Agent Orchestrator replaces that with one YAML file. Point it at
+ your GitHub issues, pick your agents, and walk away. Each agent
+ spawns in its own git worktree, creates PRs, fixes CI failures,
+ addresses review comments, and moves toward merge.
+
- {/* Config preview — show how simple setup is */}
-
-
-
-
-
-
+
+ If you're new, start with the{' '}
+
+ docs quickstart and configuration guides
+ .
+
+
+ {/* Feature pills */}
+
+ {['Git Worktrees', 'Auto CI Fix', 'PR Reviews', 'Slack Alerts'].map((tag) => (
+
+
+ {tag}
+
+ ))}
+
+
+
+ {/* Right — Terminal Code Preview Card */}
+
+ {/* Terminal title bar */}
+
+
+
+
+
+
+
agent-orchestrator.yaml
+
-
- agent:{" "}
- claude-code
- {"\n"}
- tracker:{" "}
- github
- {"\n"}
- workspace:{" "}
- worktree
- {"\n"}
- runtime:{" "}
- tmux
- {"\n"}
- notifier:{" "}
- slack
-
+
+ {/* Code body */}
+
+
+
+
+
+ {/* Subtle bottom accent line */}
+
-
-
+
+
+ );
+}
+
+/* ── Helper: single YAML key‑value line ─────────────────────────── */
+function Line({
+ label,
+ value,
+ accent = false,
+}: {
+ label: string;
+ value: string;
+ accent?: boolean;
+}) {
+ return (
+
+ {label}:{' '}
+
+ {value}
+
+
);
}
diff --git a/website/src/components/LandingAgentsBar.tsx b/website/src/components/LandingAgentsBar.tsx
index 1dcd52428..d48e47d53 100644
--- a/website/src/components/LandingAgentsBar.tsx
+++ b/website/src/components/LandingAgentsBar.tsx
@@ -28,19 +28,24 @@ const agents = [
export function LandingAgentsBar() {
return (
-
-
+
+
Works with your favorite AI agents
-
+
{agents.map((agent) => (
-
- 
-
+
+
+
+
+
{agent.name}
diff --git a/website/src/components/LandingCTA.tsx b/website/src/components/LandingCTA.tsx
index d1b2c3dfe..8bbd107ea 100644
--- a/website/src/components/LandingCTA.tsx
+++ b/website/src/components/LandingCTA.tsx
@@ -1,28 +1,37 @@
export function LandingCTA() {
return (
-
-
-
+
+ {/* Background glow */}
+
+
+
+
Stop babysitting.
-
- Start orchestrating.
+
+ Start orchestrating.
-
- $ npm i -g @aoagents/ao
+
+ {/* Install command */}
+
+ $
+ npm i -g @aoagents/ao
+
-
- Read Docs
+
+ Read Docs →
View on GitHub
diff --git a/website/src/components/LandingDifferentiators.tsx b/website/src/components/LandingDifferentiators.tsx
index d104b0b8d..cf4c02292 100644
--- a/website/src/components/LandingDifferentiators.tsx
+++ b/website/src/components/LandingDifferentiators.tsx
@@ -11,12 +11,12 @@ export function LandingDifferentiators() {
return (
-
+
Why Agent Orchestrator
-
+
The only{" "}
- open-source, web-based{" "}
+ open-source, web-based{" "}
agent orchestrator
@@ -24,17 +24,19 @@ export function LandingDifferentiators() {
your browser, works on any OS, and you can self-host or extend it.
-
+
-
-
+
+
Feature
-
- AO
+
+
+ AO
+
-
+
Others
@@ -43,15 +45,19 @@ export function LandingDifferentiators() {
{rows.map((row, i) => (
-
+
{row.feature}
-
- ✓
+
+
+ ✓
+
-
+
{row.others}
diff --git a/website/src/components/LandingFeatures.tsx b/website/src/components/LandingFeatures.tsx
index c0f98de07..623838ced 100644
--- a/website/src/components/LandingFeatures.tsx
+++ b/website/src/components/LandingFeatures.tsx
@@ -3,62 +3,82 @@ const features = [
label: "PARALLEL",
title: "Multi-agent execution",
desc: "Run Claude Code, Codex, Cursor, Aider, and OpenCode simultaneously. Each agent gets its own git worktree, its own branch, its own context.",
+ icon: "⚡",
+ accent: "var(--accent-orange)",
+ span: "col-span-1 md:col-span-2",
},
{
label: "RECOVERY",
title: "Autonomous CI + review handling",
desc: "CI fails? The agent reads the logs and pushes a fix. Review comments land? The agent addresses them. You sleep, your agents ship.",
+ icon: "🔄",
+ accent: "var(--accent-green)",
+ span: "col-span-1 md:col-span-1",
},
{
label: "PLUGINS",
title: "7 swappable slots",
desc: "Runtime, Agent, Workspace, Tracker, SCM, Notifier, Terminal. Use tmux or process. GitHub or GitLab. Slack or webhooks. Swap anything.",
+ icon: "🧩",
+ accent: "var(--accent-purple)",
+ span: "col-span-1 md:col-span-1",
},
{
label: "DASHBOARD",
title: "Real-time Kanban + terminal",
desc: "Every agent's state in one view. Attach to any terminal via the browser. SSE updates every 5 seconds. WebSocket for live terminal I/O.",
+ icon: "📊",
+ accent: "var(--accent-cyan)",
+ span: "col-span-1 md:col-span-2",
},
];
export function LandingFeatures() {
return (
-
+
-
+
Capabilities
-
+
What it does
-
- Explore full docs and plugin references
+
+ Explore full docs and plugin references →
-
- {features.map((f, i) => (
+
+ {/* Bento grid */}
+
+ {features.map((f) => (
-
+ {/* Icon */}
+
+ {f.icon}
+
+
+ {/* Label */}
+
{f.label}
-
-
- {f.title}
-
-
- {f.desc}
-
-
+
+ {/* Title */}
+
+ {f.title}
+
+
+ {/* Description */}
+
+ {f.desc}
+
))}
);
-}
\ No newline at end of file
+}
diff --git a/website/src/components/LandingHero.tsx b/website/src/components/LandingHero.tsx
index 4f7242d4d..7b7d7d792 100644
--- a/website/src/components/LandingHero.tsx
+++ b/website/src/components/LandingHero.tsx
@@ -50,7 +50,7 @@ function TerminalTyping() {
}, []);
return (
-
+
{terminalLines.slice(0, visibleCount).map((line, i) => {
if (line.type === "blank") return ;
@@ -58,10 +58,10 @@ function TerminalTyping() {
line.type === "cmd"
? "text-[var(--landing-fg)]"
: line.type === "success"
- ? "text-[rgba(134,239,172,0.8)]"
+ ? "text-[var(--accent-green)]"
: line.type === "status"
- ? "text-[var(--landing-muted)]"
- : "text-[var(--landing-muted)] opacity-50";
+ ? "text-[var(--landing-fg-secondary)]"
+ : "text-[var(--landing-muted)]";
return (
{line.type === "cmd" && (
- $
+ $
)}
{line.type === "status" && (
-
+
)}
- {line.type === "cmd" ? line.text.slice(2) : line.type === "status" ? line.text.slice(2) : line.text}
+ {line.type === "success" && (
+ ✓
+ )}
+ {line.type === "cmd" ? line.text.slice(2) : line.type === "status" ? line.text.slice(2) : line.type === "success" ? line.text.slice(2) : line.text}
);
})}
{visibleCount > 0 && visibleCount < terminalLines.length && (
-
+
)}
);
@@ -87,50 +90,91 @@ function TerminalTyping() {
export function LandingHero({ starsLabel }: LandingHeroProps) {
return (
-
-
-
-
-
- Open Source · MIT Licensed · {starsLabel} GitHub Stars
+
+ {/* Animated mesh gradient background */}
+
+
+
+
+
+
+ {/* Grid pattern overlay */}
+
+
+ {/* Radial vignette */}
+
+
+
+ {/* Badge */}
+
+
+
+ Open Source · MIT ·{" "}
+ {starsLabel} GitHub Stars
+
-
- Run 30 AI agents in parallel.
+
+ {/* Main heading */}
+
+ Run 30 AI agents
+
+ in parallel.
One dashboard.
-
- Agent Orchestrator spawns Claude Code, Codex, Cursor, Aider, and OpenCode
+
+ {/* Subtitle */}
+
+ Agent Orchestrator spawns Claude Code, Codex, Cursor, Aider & OpenCode
in isolated git worktrees. Each agent gets its own branch, creates PRs,
- fixes CI, and addresses reviews autonomously.
+ fixes CI, and addresses reviews — autonomously.
-
-
- $ npx @aoagents/ao start
+
+ {/* CTA buttons */}
+
-
-
-
-
-
-
-
+ {/* Terminal demo */}
+
+
+ {/* Terminal header */}
+
+
+
+
+
+
+
agent-orchestrator — my-saas-app
diff --git a/website/src/components/LandingHowItWorks.tsx b/website/src/components/LandingHowItWorks.tsx
index 0e6476e3b..fbea2f2f6 100644
--- a/website/src/components/LandingHowItWorks.tsx
+++ b/website/src/components/LandingHowItWorks.tsx
@@ -1,156 +1,136 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+const stepDetails = [
+ {
+ num: "01",
+ title: "Configure &",
+ titleItalic: "assign",
+ desc: "Point Agent Orchestrator at your repo with a YAML config. Choose your agent, set up trackers and notifiers. One file, full control.",
+ code: `# agent-orchestrator.yaml
+agent: claude-code
+tracker: github
+workspace: worktree
+runtime: tmux
+notifier: slack`,
+ accent: "var(--accent-orange)",
+ },
+ {
+ num: "02",
+ title: "Agents",
+ titleItalic: "work",
+ desc: "Each agent clones into a git worktree, reads the issue, plans, writes code, runs tests, and opens a PR — all autonomously.",
+ code: `$ ao spawn 42
+⟡ Spawning claude-code for #42
+⟡ Worktree: .ao/worktrees/feat-auth
+⟡ Agent reading issue... writing code...
+✓ PR #312 opened → feat/auth-flow`,
+ accent: "var(--accent-blue)",
+ },
+ {
+ num: "03",
+ title: "PRs",
+ titleItalic: "land",
+ desc: "Agents handle CI failures, address review comments, and keep pushing until merge. You just review and approve.",
+ code: `✓ CI passing (48/48 tests)
+✓ Review comments addressed
+✓ Branch up-to-date with main
+✓ Ready for merge
+→ Merged into main`,
+ accent: "var(--accent-green)",
+ },
+];
+
export function LandingHowItWorks() {
return (
-
+
-
+
Process
-
+
Three steps to{" "}
- orchestration
+ orchestration
-
- {/* Step 1 */}
-
-
- 01
-
- Configure & assign
-
-
- Point Agent Orchestrator at your repo with a YAML config. Choose your agent, set up trackers and notifiers. One file, full control.
-
-
-
-
-
-
-
-
-
-
- $ ao batch-spawn 42 43 44 45 46
-
- ⟡ Loading config from agent-orchestrator.yaml
- ⟡ Resolving 5 issues from GitHub
- ⟡ Spawning sessions in worktrees...
- ✓ Session s-001 spawned → issue #42
- ✓ Session s-002 spawned → issue #43
- ✓ Session s-003 spawned → issue #44
- ✓ Session s-004 spawned → issue #45
- ✓ Session s-005 spawned → issue #46
-
- 5 agents working · Dashboard → http://localhost:3000
-
-
-
-
-
- {/* Step 2 */}
-
-
- 02
-
- Agents work
-
-
- Each agent spawns in an isolated worktree. They write code, create PRs, run tests, and fix failures. Monitor everything from the live dashboard, or let them run.
-
-
-
-
-
-
-
-
- my-saas-app · 5 sessions
-
-
-
- PRs land
-
-
- Agents create pull requests, address review comments, fix CI failures, and get them to mergeable state. Your morning starts with merged PRs, not a backlog.
-
-
-
-
- {[
- { branch: "feat/user-auth", title: "Add user authentication flow" },
- { branch: "fix/pagination-offset", title: "Fix off-by-one in cursor pagination" },
- { branch: "feat/rate-limiting", title: "Add Redis-backed rate limiter" },
- { branch: "refactor/db-layer", title: "Extract repository pattern from services" },
- ].map((pr) => (
-
-
- {pr.branch}
- {pr.title}
-
-
- ✓ Merged
-
-
- ))}
-
-
-
+
+ {stepDetails.map((step) => (
+ (null);
+ const [visible, setVisible] = useState(false);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setVisible(true);
+ observer.disconnect();
+ }
+ },
+ { threshold: 0.2 }
+ );
+ if (ref.current) observer.observe(ref.current);
+ return () => observer.disconnect();
+ }, []);
-function DashColumn({ title, cards }: { title: string; cards: DashCardData[] }) {
return (
-
-
- {title}
-
- {cards.map((card) => (
-
- {card.title}
- {card.meta}
-
- {card.done ? (
- ✓
- ) : (
-
- )}
- {card.agent}
+
+
+ {/* Text */}
+
+
+
+ {step.num}
+
+
+ {step.title}
+ {step.titleItalic}
+
+
+ {step.desc}
+
- ))}
+
+ {/* Code preview */}
+
+
+
+
+
+
+
+ {step.code.split("\n").map((line, i) => (
+
+ {line || "\u00A0"}
+
+ ))}
+
+
+
);
}
diff --git a/website/src/components/LandingNav.tsx b/website/src/components/LandingNav.tsx
index b9ed3b2ee..e19c0d340 100644
--- a/website/src/components/LandingNav.tsx
+++ b/website/src/components/LandingNav.tsx
@@ -26,38 +26,37 @@ function GithubIcon() {
export function LandingNav() {
return (
-
+ You're running AI agents{' '} + in 10 browser tabs.
++ Checking if PRs landed. Re-running failed CI. Copy-pasting error logs into ChatGPT. +
-- Agent Orchestrator replaces that with one YAML file. Point it at - your GitHub issues, pick your agents, and walk away. Each agent - spawns in its own git worktree, creates PRs, fixes CI failures, - addresses review comments, and moves toward merge. If you are new, start with the docs quickstart and configuration guides. -
+ {/* ── Side-by-side Layout ──────────────────────────────── */} ++ Agent Orchestrator replaces that with one YAML file. Point it at + your GitHub issues, pick your agents, and walk away. Each agent + spawns in its own git worktree, creates PRs, fixes CI failures, + addresses review comments, and moves toward merge. +
- {/* Config preview — show how simple setup is */} -+ If you're new, start with the{' '} + + docs quickstart and configuration guides + . +
+ + {/* Feature pills */} +- agent:{" "} - claude-code - {"\n"} - tracker:{" "} - github - {"\n"} - workspace:{" "} - worktree - {"\n"} - runtime:{" "} - tmux - {"\n"} - notifier:{" "} - slack -+ + {/* Code body */} +
+
+
+
Stop babysitting.
@@ -24,17 +24,19 @@ export function LandingDifferentiators() {
your browser, works on any OS, and you can self-host or extend it.
- {f.desc}
-
+ {f.desc}
+
- Agent Orchestrator spawns Claude Code, Codex, Cursor, Aider, and OpenCode
+
+ {/* Subtitle */}
+
+ Agent Orchestrator spawns Claude Code, Codex, Cursor, Aider & OpenCode
in isolated git worktrees. Each agent gets its own branch, creates PRs,
- fixes CI, and addresses reviews autonomously.
+ fixes CI, and addresses reviews — autonomously.
- Point Agent Orchestrator at your repo with a YAML config. Choose your agent, set up trackers and notifiers. One file, full control.
-
- Each agent spawns in an isolated worktree. They write code, create PRs, run tests, and fix failures. Monitor everything from the live dashboard, or let them run.
-
- Agents create pull requests, address review comments, fix CI failures, and get them to mergeable state. Your morning starts with merged PRs, not a backlog.
-
+ {step.desc}
+
- Start orchestrating.
+
+ Start orchestrating.
-
+
The only{" "}
- open-source, web-based{" "}
+ open-source, web-based{" "}
agent orchestrator
-
-
+
+
@@ -43,15 +45,19 @@ export function LandingDifferentiators() {
{rows.map((row, i) => (
Feature
-
- AO
+
+
+ AO
+
-
+
Others
-
diff --git a/website/src/components/LandingFeatures.tsx b/website/src/components/LandingFeatures.tsx
index c0f98de07..623838ced 100644
--- a/website/src/components/LandingFeatures.tsx
+++ b/website/src/components/LandingFeatures.tsx
@@ -3,62 +3,82 @@ const features = [
label: "PARALLEL",
title: "Multi-agent execution",
desc: "Run Claude Code, Codex, Cursor, Aider, and OpenCode simultaneously. Each agent gets its own git worktree, its own branch, its own context.",
+ icon: "⚡",
+ accent: "var(--accent-orange)",
+ span: "col-span-1 md:col-span-2",
},
{
label: "RECOVERY",
title: "Autonomous CI + review handling",
desc: "CI fails? The agent reads the logs and pushes a fix. Review comments land? The agent addresses them. You sleep, your agents ship.",
+ icon: "🔄",
+ accent: "var(--accent-green)",
+ span: "col-span-1 md:col-span-1",
},
{
label: "PLUGINS",
title: "7 swappable slots",
desc: "Runtime, Agent, Workspace, Tracker, SCM, Notifier, Terminal. Use tmux or process. GitHub or GitLab. Slack or webhooks. Swap anything.",
+ icon: "🧩",
+ accent: "var(--accent-purple)",
+ span: "col-span-1 md:col-span-1",
},
{
label: "DASHBOARD",
title: "Real-time Kanban + terminal",
desc: "Every agent's state in one view. Attach to any terminal via the browser. SSE updates every 5 seconds. WebSocket for live terminal I/O.",
+ icon: "📊",
+ accent: "var(--accent-cyan)",
+ span: "col-span-1 md:col-span-2",
},
];
export function LandingFeatures() {
return (
-
+
{row.feature}
-
- ✓
+
+
+ ✓
+
-
+
{row.others}
+
What it does
-
- Explore full docs and plugin references
+
+ Explore full docs and plugin references →
- {f.title}
-
-
+ {f.title}
+
+
+ {/* Description */}
+
- Run 30 AI agents in parallel.
+
+ {/* Main heading */}
+
+ Run 30 AI agents
+
-
+ in parallel.
One dashboard.
+
Three steps to{" "}
- orchestration
+ orchestration
- Configure & assign
-
-
- Agents work
-
-
- PRs land
-
-
+ {step.title}
+ {step.titleItalic}
+
+
+ {step.code.split("\n").map((line, i) => (
+
+