diff --git a/apps/web-roo-code/public/heroes/agent-coder.png b/apps/web-roo-code/public/heroes/agent-coder.png
new file mode 100644
index 0000000000..1c6ba66052
Binary files /dev/null and b/apps/web-roo-code/public/heroes/agent-coder.png differ
diff --git a/apps/web-roo-code/public/heroes/agent-explainer.png b/apps/web-roo-code/public/heroes/agent-explainer.png
new file mode 100644
index 0000000000..1c6ba66052
Binary files /dev/null and b/apps/web-roo-code/public/heroes/agent-explainer.png differ
diff --git a/apps/web-roo-code/public/heroes/agent-planner.png b/apps/web-roo-code/public/heroes/agent-planner.png
new file mode 100644
index 0000000000..1c6ba66052
Binary files /dev/null and b/apps/web-roo-code/public/heroes/agent-planner.png differ
diff --git a/apps/web-roo-code/src/app/coder/content.ts b/apps/web-roo-code/src/app/coder/content.ts
new file mode 100644
index 0000000000..eb52692423
--- /dev/null
+++ b/apps/web-roo-code/src/app/coder/content.ts
@@ -0,0 +1,96 @@
+import { type AgentPageContent } from "@/app/shared/agent-page-content"
+
+// Workaround for next/image choking on these for some reason
+const hero = { src: "/heroes/agent-coder.png" }
+
+// Re-export for convenience
+export type { AgentPageContent }
+
+export const content: AgentPageContent = {
+	agentName: "Coder",
+	hero: {
+		icon: "Code",
+		heading: "From idea to implementation in minutes, not days.",
+		paragraphs: [
+			"Roo Code's Coder agent transforms requirements directly into production-ready code. Whether building new features, refactoring existing systems, or creating entire applications, it writes clean, tested code that follows your team's patterns and conventions.",
+			"Powered by advanced reasoning models with your API key, it doesn't just generate code—it implements complete solutions with proper error handling, tests, and documentation.",
+		],
+		image: {
+			url: hero.src,
+			width: 800,
+			height: 711,
+			alt: "Roo Code Coder agent writing production-ready code",
+		},
+		crossAgentLink: {
+			text: "Works great with",
+			links: [
+				{
+					text: "Explainer Agent",
+					href: "/explainer",
+					icon: "BookOpen",
+				},
+				{
+					text: "Planner Agent",
+					href: "/planner",
+					icon: "Map",
+				},
+			],
+		},
+		cta: {
+			buttonText: "Start 14-day Free Trial",
+			disclaimer: "(cancel anytime)",
+		},
+	},
+	howItWorks: {
+		heading: "How It Works",
+		steps: [
+			{
+				title: "1. Describe what you need",
+				description:
+					"Provide requirements through issues, specs, or natural language. The agent understands context from existing code, architecture documents, and team conventions to ensure consistency.",
+				icon: "Terminal",
+			},
+			{
+				title: "2. Review the implementation plan",
+				description:
+					"Get a clear breakdown of the proposed changes before any code is written. Understand what will be built, modified, or refactored, with reasoning for each decision.",
+				icon: "FileCode",
+			},
+			{
+				title: "3. Ship tested, PR-ready code",
+				description:
+					"Receive complete implementations with tests, error handling, and documentation. The agent creates pull requests with clear commit messages and descriptions, ready for review and merge.",
+				icon: "Code",
+			},
+		],
+	},
+	whyBetter: {
+		heading: "Why Roo's Coder is different",
+		features: [
+			{
+				title: "Repository-aware implementation",
+				description:
+					"Unlike generic code generators, Coder understands your entire codebase—existing patterns, dependencies, and conventions. It writes code that fits seamlessly with your project, not boilerplate that needs extensive modification.",
+				icon: "Blocks",
+			},
+			{
+				title: "Complete solutions, not snippets",
+				description:
+					"Goes beyond generating individual functions to implement entire features. Handles edge cases, adds proper error handling, creates tests, updates documentation, and manages dependencies—everything needed for production-ready code.",
+				icon: "ListChecks",
+			},
+			{
+				title: "Your models, unlimited capability",
+				description:
+					"Bring your own API key to use cutting-edge models without artificial limits. Get thorough implementations that don't cut corners to save tokens—crucial for complex features that require deep reasoning and extensive code generation.",
+				icon: "Key",
+			},
+		],
+	},
+	cta: {
+		heading: "Code at the speed of thought.",
+		description:
+			"Let Roo Code's Coder agent turn your ideas into production-ready implementations, complete with tests and documentation.",
+		buttonText: "Start 14-day Free Trial",
+	},
+}
diff --git a/apps/web-roo-code/src/app/coder/page.tsx b/apps/web-roo-code/src/app/coder/page.tsx
new file mode 100644
index 0000000000..ae9404f05a
--- /dev/null
+++ b/apps/web-roo-code/src/app/coder/page.tsx
@@ -0,0 +1,68 @@
+import type { Metadata } from "next"
+
+import { SEO } from "@/lib/seo"
+import { ogImageUrl } from "@/lib/og"
+import { AgentLandingContent } from "@/app/shared/AgentLandingContent"
+import { getContentVariant } from "@/app/shared/getContentVariant"
+import { content as contentA } from "./content"
+
+const TITLE = "Coder"
+const DESCRIPTION =
+	"Transform requirements into production-ready code with AI-powered implementation. Write clean, tested code that follows your team's patterns and creates pull requests automatically."
+const OG_DESCRIPTION = "Ship quality code faster with AI-powered implementation"
+const PATH = "/coder"
+
+export const metadata: Metadata = {
+	title: TITLE,
+	description: DESCRIPTION,
+	alternates: {
+		canonical: `${SEO.url}${PATH}`,
+	},
+	openGraph: {
+		title: TITLE,
+		description: DESCRIPTION,
+		url: `${SEO.url}${PATH}`,
+		siteName: SEO.name,
+		images: [
+			{
+				url: ogImageUrl(TITLE, OG_DESCRIPTION),
+				width: 1200,
+				height: 630,
+				alt: TITLE,
+			},
+		],
+		locale: SEO.locale,
+		type: "website",
+	},
+	twitter: {
+		card: SEO.twitterCard,
+		title: TITLE,
+		description: DESCRIPTION,
+		images: [ogImageUrl(TITLE, OG_DESCRIPTION)],
+	},
+	keywords: [
+		...SEO.keywords,
+		"code generation",
+		"AI coding",
+		"automated programming",
+		"pull request creation",
+		"code implementation",
+		"feature development",
+		"test generation",
+		"code quality",
+		"bring your own key",
+		"BYOK AI",
+		"development automation",
+		"cloud agents",
+		"AI development team",
+	],
+}
+
+export default async function AgentCoderPage({ searchParams }: { searchParams: Promise<{ v?: string }> }) {
+	const params = await searchParams
+	const content = getContentVariant(params, {
+		A: contentA,
+	})
+
+	return <AgentLandingContent content={content} />
+}
diff --git a/apps/web-roo-code/src/app/explainer/content.ts b/apps/web-roo-code/src/app/explainer/content.ts
new file mode 100644
index 0000000000..58a20f6f9e
--- /dev/null
+++ b/apps/web-roo-code/src/app/explainer/content.ts
@@ -0,0 +1,96 @@
+import { type AgentPageContent } from "@/app/shared/agent-page-content"
+
+// Workaround for next/image choking on these for some reason
+const hero = { src: "/heroes/agent-explainer.png" }
+
+// Re-export for convenience
+export type { AgentPageContent }
+
+export const content: AgentPageContent = {
+	agentName: "Explainer",
+	hero: {
+		icon: "BookOpen",
+		heading: "Understanding at the speed of thought.",
+		paragraphs: [
+			"Roo Code's Explainer agent turns complex code, documentation, and technical concepts into crystal-clear explanations. Whether you're onboarding to a new codebase, understanding legacy systems, or documenting architectural decisions, get the insights you need instantly.",
+			"Powered by your choice of AI models with full repository context, it delivers explanations that actually make sense—not generic responses.",
+		],
+		image: {
+			url: hero.src,
+			width: 800,
+			height: 711,
+			alt: "Roo Code Explainer agent providing clear technical explanations",
+		},
+		crossAgentLink: {
+			text: "Works great with",
+			links: [
+				{
+					text: "Coder Agent",
+					href: "/coder",
+					icon: "Code",
+				},
+				{
+					text: "Planner Agent",
+					href: "/planner",
+					icon: "Map",
+				},
+			],
+		},
+		cta: {
+			buttonText: "Start 14-day Free Trial",
+			disclaimer: "(cancel anytime)",
+		},
+	},
+	howItWorks: {
+		heading: "How It Works",
+		steps: [
+			{
+				title: "1. Point to any code or documentation",
+				description:
+					"Select code, reference documentation, or describe concepts you need explained. The agent understands context from files, PRs, issues, or architectural diagrams.",
+				icon: "FileText",
+			},
+			{
+				title: "2. Get deep, contextual explanations",
+				description:
+					"Receive comprehensive explanations that consider your entire codebase, project conventions, and technical stack. No more generic answers—get explanations specific to your implementation.",
+				icon: "Lightbulb",
+			},
+			{
+				title: "3. Generate or update documentation",
+				description:
+					"Transform explanations into lasting documentation. Automatically generate README files, API docs, or architectural decision records that stay in sync with your code. Perfect for pairing with the Coder Agent.",
+				icon: "BookOpen",
+			},
+		],
+	},
+	whyBetter: {
+		heading: "Why Roo's Explainer is different",
+		features: [
+			{
+				title: "Full codebase awareness",
+				description:
+					"Unlike chat-based tools that only see snippets, Explainer analyzes your entire repository structure, dependencies, and patterns to provide complete, accurate explanations that consider all interactions and side effects.",
+				icon: "BookMarked",
+			},
+			{
+				title: "Learning that scales with your team",
+				description:
+					"Generate explanations once, share knowledge forever. Create onboarding guides, technical deep-dives, and living documentation that help your entire team understand complex systems faster.",
+				icon: "Lightbulb",
+			},
+			{
+				title: "Bring your own key, get unlimited depth",
+				description:
+					"Use your preferred AI models without token limits imposed by fixed pricing. Get thorough, detailed explanations that don't cut corners to save costs—especially crucial for understanding complex systems.",
+				icon: "Key",
+			},
+		],
+	},
+	cta: {
+		heading: "Turn confusion into clarity.",
+		description:
+			"Let Roo Code's Explainer agent help your team understand any codebase, concept, or technical decision in minutes, not days.",
+		buttonText: "Start 14-day Free Trial",
+	},
+}
diff --git a/apps/web-roo-code/src/app/explainer/page.tsx b/apps/web-roo-code/src/app/explainer/page.tsx
new file mode 100644
index 0000000000..8a1f68d8c5
--- /dev/null
+++ b/apps/web-roo-code/src/app/explainer/page.tsx
@@ -0,0 +1,68 @@
+import type { Metadata } from "next"
+
+import { SEO } from "@/lib/seo"
+import { ogImageUrl } from "@/lib/og"
+import { AgentLandingContent } from "@/app/shared/AgentLandingContent"
+import { getContentVariant } from "@/app/shared/getContentVariant"
+import { content as contentA } from "./content"
+
+const TITLE = "Explainer"
+const DESCRIPTION =
+	"Get crystal-clear explanations of code, concepts, and technical documentation. Transform complex systems into understandable knowledge with AI-powered deep dives and contextual insights."
+const OG_DESCRIPTION = "Transform complexity into clarity with AI-powered explanations"
+const PATH = "/explainer"
+
+export const metadata: Metadata = {
+	title: TITLE,
+	description: DESCRIPTION,
+	alternates: {
+		canonical: `${SEO.url}${PATH}`,
+	},
+	openGraph: {
+		title: TITLE,
+		description: DESCRIPTION,
+		url: `${SEO.url}${PATH}`,
+		siteName: SEO.name,
+		images: [
+			{
+				url: ogImageUrl(TITLE, OG_DESCRIPTION),
+				width: 1200,
+				height: 630,
+				alt: TITLE,
+			},
+		],
+		locale: SEO.locale,
+		type: "website",
+	},
+	twitter: {
+		card: SEO.twitterCard,
+		title: TITLE,
+		description: DESCRIPTION,
+		images: [ogImageUrl(TITLE, OG_DESCRIPTION)],
+	},
+	keywords: [
+		...SEO.keywords,
+		"code explainer",
+		"technical documentation",
+		"code understanding",
+		"AI explanations",
+		"concept clarification",
+		"documentation generation",
+		"code analysis",
+		"knowledge transfer",
+		"bring your own key",
+		"BYOK AI",
+		"developer education",
+		"cloud agents",
+		"AI development team",
+	],
+}
+
+export default async function AgentExplainerPage({ searchParams }: { searchParams: Promise<{ v?: string }> }) {
+	const params = await searchParams
+	const content = getContentVariant(params, {
+		A: contentA,
+	})
+
+	return <AgentLandingContent content={content} />
+}
diff --git a/apps/web-roo-code/src/app/planner/content.ts b/apps/web-roo-code/src/app/planner/content.ts
new file mode 100644
index 0000000000..dfe0870273
--- /dev/null
+++ b/apps/web-roo-code/src/app/planner/content.ts
@@ -0,0 +1,96 @@
+import { type AgentPageContent } from "@/app/shared/agent-page-content"
+
+// Workaround for next/image choking on these for some reason
+const hero = { src: "/heroes/agent-planner.png" }
+
+// Re-export for convenience
+export type { AgentPageContent }
+
+export const content: AgentPageContent = {
+	agentName: "Planner",
+	hero: {
+		icon: "Map",
+		heading: "Strategic thinking for complex technical challenges.",
+		paragraphs: [
+			"Roo Code's Planner agent transforms vague requirements into clear implementation strategies. It maps out technical decisions, identifies potential pitfalls, and creates detailed roadmaps that guide your team from concept to completion.",
+			"Using advanced reasoning with your API key, it doesn't just outline steps—it anticipates challenges, evaluates tradeoffs, and recommends optimal solutions based on your specific context.",
+		],
+		image: {
+			url: hero.src,
+			width: 800,
+			height: 711,
+			alt: "Roo Code Planner agent creating technical implementation strategies",
+		},
+		crossAgentLink: {
+			text: "Works great with",
+			links: [
+				{
+					text: "Coder Agent",
+					href: "/coder",
+					icon: "Code",
+				},
+				{
+					text: "Explainer Agent",
+					href: "/explainer",
+					icon: "BookOpen",
+				},
+			],
+		},
+		cta: {
+			buttonText: "Start 14-day Free Trial",
+			disclaimer: "(cancel anytime)",
+		},
+	},
+	howItWorks: {
+		heading: "How It Works",
+		steps: [
+			{
+				title: "1. Define your goals and constraints",
+				description:
+					"Describe what you want to build, your technical constraints, and business requirements. The agent analyzes your existing architecture, tech stack, and team capabilities to understand the full context.",
+				icon: "Target",
+			},
+			{
+				title: "2. Get comprehensive implementation plans",
+				description:
+					"Receive detailed technical specifications with architecture diagrams, data flow designs, API contracts, and step-by-step implementation guides. Each decision includes reasoning and alternatives considered.",
+				icon: "Compass",
+			},
+			{
+				title: "3. Navigate execution with confidence",
+				description:
+					"Use the roadmap to guide development, with clear milestones, risk mitigation strategies, and contingency plans. The agent helps you make informed decisions when requirements change or challenges arise.",
+				icon: "Map",
+			},
+		],
+	},
+	whyBetter: {
+		heading: "Why Roo's Planner is different",
+		features: [
+			{
+				title: "Context-aware strategic thinking",
+				description:
+					"Unlike generic planning tools, Planner understands your specific codebase, architecture, and constraints. It creates strategies that work with your existing systems, not theoretical solutions that ignore reality.",
+				icon: "Compass",
+			},
+			{
+				title: "Technical depth meets business sense",
+				description:
+					"Balances technical excellence with practical constraints. Considers performance, scalability, maintainability, and team velocity to recommend solutions that are both elegant and achievable within your timeline.",
+				icon: "Target",
+			},
+			{
+				title: "Unlimited reasoning, zero compromises",
+				description:
+					"Your API key powers deep analysis without token limits. Get thorough evaluations of complex problems, detailed tradeoff analysis, and comprehensive documentation—not rushed summaries that miss critical details.",
+				icon: "Key",
+			},
+		],
+	},
+	cta: {
+		heading: "Plan with precision. Execute with confidence.",
+		description:
+			"Let Roo Code's Planner agent map out your technical strategy, from high-level architecture to detailed implementation roadmaps.",
+		buttonText: "Start 14-day Free Trial",
+	},
+}
diff --git a/apps/web-roo-code/src/app/planner/page.tsx b/apps/web-roo-code/src/app/planner/page.tsx
new file mode 100644
index 0000000000..8addbc793b
--- /dev/null
+++ b/apps/web-roo-code/src/app/planner/page.tsx
@@ -0,0 +1,68 @@
+import type { Metadata } from "next"
+
+import { SEO } from "@/lib/seo"
+import { ogImageUrl } from "@/lib/og"
+import { AgentLandingContent } from "@/app/shared/AgentLandingContent"
+import { getContentVariant } from "@/app/shared/getContentVariant"
+import { content as contentA } from "./content"
+
+const TITLE = "Planner"
+const DESCRIPTION =
+	"Map out implementation strategies and navigate complex technical decisions with AI-powered planning. Create detailed technical specifications, architecture designs, and implementation roadmaps that guide successful project delivery."
+const OG_DESCRIPTION = "Strategic technical planning powered by AI"
+const PATH = "/planner"
+
+export const metadata: Metadata = {
+	title: TITLE,
+	description: DESCRIPTION,
+	alternates: {
+		canonical: `${SEO.url}${PATH}`,
+	},
+	openGraph: {
+		title: TITLE,
+		description: DESCRIPTION,
+		url: `${SEO.url}${PATH}`,
+		siteName: SEO.name,
+		images: [
+			{
+				url: ogImageUrl(TITLE, OG_DESCRIPTION),
+				width: 1200,
+				height: 630,
+				alt: TITLE,
+			},
+		],
+		locale: SEO.locale,
+		type: "website",
+	},
+	twitter: {
+		card: SEO.twitterCard,
+		title: TITLE,
+		description: DESCRIPTION,
+		images: [ogImageUrl(TITLE, OG_DESCRIPTION)],
+	},
+	keywords: [
+		...SEO.keywords,
+		"technical planning",
+		"architecture design",
+		"implementation strategy",
+		"project roadmap",
+		"technical specifications",
+		"system design",
+		"decision making",
+		"development planning",
+		"bring your own key",
+		"BYOK AI",
+		"strategic planning",
+		"cloud agents",
+		"AI development team",
+	],
+}
+
+export default async function AgentPlannerPage({ searchParams }: { searchParams: Promise<{ v?: string }> }) {
+	const params = await searchParams
+	const content = getContentVariant(params, {
+		A: contentA,
+	})
+
+	return <AgentLandingContent content={content} />
+}
diff --git a/apps/web-roo-code/src/app/shared/AgentLandingContent.tsx b/apps/web-roo-code/src/app/shared/AgentLandingContent.tsx
index 8d99c03355..a13076dca2 100644
--- a/apps/web-roo-code/src/app/shared/AgentLandingContent.tsx
+++ b/apps/web-roo-code/src/app/shared/AgentLandingContent.tsx
@@ -10,6 +10,15 @@ import {
 	ListChecks,
 	BookMarked,
 	History,
+	BookOpen,
+	Lightbulb,
+	FileText,
+	Code,
+	Terminal,
+	FileCode,
+	Map,
+	Compass,
+	Target,
 	LucideIcon,
 } from "lucide-react"
 import Image from "next/image"
@@ -33,6 +42,15 @@ const iconMap: Record<IconName, LucideIcon> = {
 	ListChecks,
 	BookMarked,
 	History,
+	BookOpen,
+	Lightbulb,
+	FileText,
+	Code,
+	Terminal,
+	FileCode,
+	Map,
+	Compass,
+	Target,
 }
 
 /**
diff --git a/apps/web-roo-code/src/app/shared/agent-page-content.ts b/apps/web-roo-code/src/app/shared/agent-page-content.ts
index 3a22c2a851..3dcea0417d 100644
--- a/apps/web-roo-code/src/app/shared/agent-page-content.ts
+++ b/apps/web-roo-code/src/app/shared/agent-page-content.ts
@@ -11,6 +11,15 @@ export type IconName =
 	| "ListChecks"
 	| "BookMarked"
 	| "History"
+	| "BookOpen"
+	| "Lightbulb"
+	| "FileText"
+	| "Code"
+	| "Terminal"
+	| "FileCode"
+	| "Map"
+	| "Compass"
+	| "Target"
 
 /**
  * Generic content structure for agent landing pages.
diff --git a/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx b/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx
index a0b05702c8..680a2b6ac6 100644
--- a/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx
+++ b/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx
@@ -14,6 +14,9 @@ import {
 	PocketKnife,
 	TestTube,
 	Wrench,
+	BookOpen,
+	Code,
+	Map,
 	type LucideIcon,
 } from "lucide-react"
 
@@ -27,6 +30,9 @@ interface AIAgent {
 const aiAgents: AIAgent[] = [
 	{ icon: GitPullRequest, name: "PR Reviewer", page: "/reviewer" },
 	{ icon: Wrench, name: "PR Fixer", page: "/pr-fixer" },
+	{ icon: BookOpen, name: "Explainer", page: "/explainer" },
+	{ icon: Code, name: "Coder", page: "/coder" },
+	{ icon: Map, name: "Planner", page: "/planner" },
 	{ icon: PocketKnife, name: "Generalist" },
 	{ icon: Bug, name: "Bug Fixer" },
 	{ icon: TestTube, name: "Test Engineer" },