From 9ccca085756aceefba9149a1a220753cb6b10902 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 10 Feb 2026 19:05:11 +0000
Subject: [PATCH 01/10] feat(web): add What is Roo Code page with FAQPage
 structured data

---
 apps/web-roo-code/next-sitemap.config.cjs     |   3 +
 .../src/app/what-is-roo-code/page.tsx         | 714 ++++++++++++++++++
 .../src/components/chromes/footer.tsx         |   7 +
 .../src/components/chromes/nav-bar.tsx        |   9 +
 .../src/components/faq-structured-data.tsx    |  41 +
 5 files changed, 774 insertions(+)
 create mode 100644 apps/web-roo-code/src/app/what-is-roo-code/page.tsx
 create mode 100644 apps/web-roo-code/src/components/faq-structured-data.tsx

diff --git a/apps/web-roo-code/next-sitemap.config.cjs b/apps/web-roo-code/next-sitemap.config.cjs
index e9b0ca3c473..926145a2874 100644
--- a/apps/web-roo-code/next-sitemap.config.cjs
+++ b/apps/web-roo-code/next-sitemap.config.cjs
@@ -33,6 +33,9 @@ module.exports = {
     if (path === '/') {
       priority = 1.0;
       changefreq = 'yearly';
+    } else if (path === '/what-is-roo-code') {
+      priority = 0.9;
+      changefreq = 'monthly';
     } else if (path === '/enterprise' || path === '/evals') {
       priority = 0.8;
       changefreq = 'monthly';
diff --git a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
new file mode 100644
index 00000000000..74a7325d612
--- /dev/null
+++ b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
@@ -0,0 +1,714 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import {
+	ArrowRight,
+	Brain,
+	Bug,
+	CheckCircle,
+	Cloud,
+	Code,
+	Download,
+	Keyboard,
+	Laptop,
+	Map,
+	MessageCircleQuestion,
+	Shield,
+	TestTube,
+	Users2,
+	Workflow,
+} from "lucide-react"
+
+import { Button } from "@/components/ui"
+import { FAQStructuredData } from "@/components/faq-structured-data"
+import { EXTERNAL_LINKS } from "@/lib/constants"
+import { SEO } from "@/lib/seo"
+import { ogImageUrl } from "@/lib/og"
+
+const TITLE = "What is Roo Code?"
+const DESCRIPTION =
+	"Roo Code is a free, open-source AI coding assistant for VS Code and an autonomous cloud agent platform. Model-agnostic, multi-file editing, permission-based control, and more."
+const OG_DESCRIPTION = "The open-source AI dev team for VS Code and the Cloud"
+const PATH = "/what-is-roo-code"
+
+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: "article",
+	},
+	twitter: {
+		card: SEO.twitterCard,
+		title: TITLE,
+		description: DESCRIPTION,
+		images: [ogImageUrl(TITLE, OG_DESCRIPTION)],
+	},
+	keywords: [
+		...SEO.keywords,
+		"what is roo code",
+		"roo code overview",
+		"roo code explained",
+		"AI coding assistant",
+		"open source AI coding",
+		"roo code vs cursor",
+		"roo code vs copilot",
+		"roo code vs windsurf",
+		"AI code editor",
+		"agentic coding",
+		"cloud AI agents",
+	],
+}
+
+const modes = [
+	{
+		name: "Architect",
+		description: "Plans complex changes without making changes to code.",
+		icon: Map,
+	},
+	{
+		name: "Code",
+		description: "Implements, refactors, and optimizes code across files.",
+		icon: Code,
+	},
+	{
+		name: "Ask",
+		description: "Explains functionality, architecture, and program behavior.",
+		icon: MessageCircleQuestion,
+	},
+	{
+		name: "Debug",
+		description: "Diagnoses issues, traces failures, and proposes targeted fixes.",
+		icon: Bug,
+	},
+	{
+		name: "Test",
+		description: "Creates and improves tests without changing actual functionality.",
+		icon: TestTube,
+	},
+	{
+		name: "Orchestrator",
+		description: "Coordinates large tasks by delegating subtasks to other modes.",
+		icon: Workflow,
+	},
+]
+
+const faqData = [
+	{
+		question: "Is Roo Code free?",
+		answer: "Yes. The Roo Code VS Code extension is completely free and open source. You only pay for AI model usage if you use a paid API (like OpenAI or Anthropic). If you choose free or self-hosted models, there is no cost at all. Roo Code Cloud has both free and paid tiers.",
+	},
+	{
+		question: "Which AI models does Roo Code support?",
+		answer: "Roo Code is fully model-agnostic. It supports OpenAI models (GPT-4o, GPT-4, o1), Anthropic Claude (including Claude 3.5 Sonnet), Google Gemini, Grok, DeepSeek, Mistral, Qwen, local LLMs via Ollama, and any model accessible through OpenRouter or compatible APIs.",
+	},
+	{
+		question: "Will my code stay private?",
+		answer: "Yes. The Roo Code extension runs locally in VS Code, so your code never leaves your machine unless you connect to an external AI API. Even then, you control exactly what is sent. You can use .rooignore to exclude sensitive files, and you can run with offline/local models for full privacy.",
+	},
+	{
+		question: "How does Roo Code differ from Copilot, Cursor, or Windsurf?",
+		answer: "Roo Code is open-source and fully customizable, letting you integrate any AI model you choose. It is built for multi-file edits, so it can read, refactor, and update multiple files at once. Its agentic abilities go beyond typical AI autocomplete, enabling it to run tests, open a browser, and handle deeper tasks. You are always in control: Roo Code is permission-based, meaning you control and approve any file changes or command executions.",
+	},
+	{
+		question: "Does Roo Code support my programming language?",
+		answer: "Likely yes. Roo Code supports Python, Java, C#, JavaScript, TypeScript, Go, Rust, and many more. Since it leverages AI model understanding, new or lesser-known languages may also work depending on model support.",
+	},
+	{
+		question: "Can it handle large, enterprise-scale projects?",
+		answer: "Yes. Roo Code uses efficient strategies like partial-file analysis, summarization, and configurable semantic search to handle large codebases. Enterprises can use on-premises or self-hosted models for compliance and security needs. SOC 2 Type II compliant.",
+	},
+]
+
+const comparisons = [
+	{
+		name: "Open Source",
+		rooCode: true,
+		copilot: false,
+		cursor: false,
+		windsurf: false,
+	},
+	{
+		name: "Model-Agnostic",
+		rooCode: true,
+		copilot: false,
+		cursor: false,
+		windsurf: false,
+	},
+	{
+		name: "Multi-File Agentic Editing",
+		rooCode: true,
+		copilot: false,
+		cursor: true,
+		windsurf: true,
+	},
+	{
+		name: "Custom Modes",
+		rooCode: true,
+		copilot: false,
+		cursor: false,
+		windsurf: false,
+	},
+	{
+		name: "Permission-Based Control",
+		rooCode: true,
+		copilot: false,
+		cursor: false,
+		windsurf: false,
+	},
+	{
+		name: "Autonomous Cloud Agents",
+		rooCode: true,
+		copilot: false,
+		cursor: false,
+		windsurf: false,
+	},
+	{
+		name: "Works in VS Code (any fork)",
+		rooCode: true,
+		copilot: true,
+		cursor: false,
+		windsurf: false,
+	},
+	{
+		name: "Bring Your Own API Key",
+		rooCode: true,
+		copilot: false,
+		cursor: true,
+		windsurf: false,
+	},
+]
+
+export default function WhatIsRooCodePage() {
+	return (
+		<>
+			<FAQStructuredData faqs={faqData} />
+
+			{/* Article structured data */}
+			<script
+				type="application/ld+json"
+				dangerouslySetInnerHTML={{
+					__html: JSON.stringify({
+						"@context": "https://schema.org",
+						"@type": "Article",
+						headline: TITLE,
+						description: DESCRIPTION,
+						url: `${SEO.url}${PATH}`,
+						publisher: {
+							"@type": "Organization",
+							name: SEO.name,
+							url: SEO.url,
+							logo: {
+								"@type": "ImageObject",
+								url: `${SEO.url}/android-chrome-512x512.png`,
+								width: 512,
+								height: 512,
+							},
+						},
+						mainEntityOfPage: {
+							"@type": "WebPage",
+							"@id": `${SEO.url}${PATH}`,
+						},
+					}),
+				}}
+			/>
+
+			{/* Hero */}
+			<section className="relative pt-20 pb-16 md:pt-28 md:pb-20">
+				<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-0">
+					<div className="absolute left-1/2 top-1/2 h-[400px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/10 dark:bg-violet-700/20 blur-[140px]" />
+				</div>
+				<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
+					<h1 className="text-4xl font-bold tracking-tight sm:text-5xl mb-6 text-center">
+						What is Roo Code?
+					</h1>
+					<p className="text-xl text-muted-foreground text-center max-w-3xl mx-auto mb-8 leading-relaxed">
+						Roo Code is an AI-powered software development platform that puts an entire AI dev team at your
+						disposal. It goes beyond simple code autocompletion by reading and writing across multiple
+						files, executing commands, running tests, and adapting to your workflow.
+					</p>
+					<p className="text-lg text-muted-foreground text-center max-w-3xl mx-auto mb-10 leading-relaxed">
+						The{" "}
+						<Link href="/extension" className="text-primary underline-offset-4 hover:underline">
+							Roo Code VS Code Extension
+						</Link>{" "}
+						is free, open-source, and the #1 most-installed open-source AI coding extension.{" "}
+						<Link href="/cloud" className="text-primary underline-offset-4 hover:underline">
+							Roo Code Cloud
+						</Link>{" "}
+						extends this with autonomous AI agents that run 24/7 in the background.
+					</p>
+					<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+						<Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base" asChild>
+							<a
+								href={EXTERNAL_LINKS.MARKETPLACE}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="flex items-center gap-2">
+								<Download className="h-4 w-4" />
+								Install on VS Code
+							</a>
+						</Button>
+						<Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base" asChild>
+							<a
+								href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="flex items-center gap-2">
+								Try Cloud for Free
+								<ArrowRight className="h-4 w-4" />
+							</a>
+						</Button>
+					</div>
+				</div>
+			</section>
+
+			{/* Two Form Factors */}
+			<section className="py-16 md:py-24 bg-muted/30 border-t border-border">
+				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
+					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4 text-center">
+						Two products, one platform
+					</h2>
+					<p className="text-xl text-muted-foreground text-center max-w-2xl mx-auto mb-12">
+						Use the extension for hands-on work. Use Cloud to delegate tasks to autonomous agents.
+					</p>
+
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+						<div className="rounded-2xl bg-card border border-border p-8 shadow-sm">
+							<div className="flex items-center gap-3 mb-4">
+								<div className="rounded-lg bg-blue-100 dark:bg-blue-900/20 p-2.5">
+									<Laptop className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+								</div>
+								<h3 className="text-2xl font-bold">VS Code Extension</h3>
+							</div>
+							<p className="font-semibold text-blue-600 dark:text-blue-400 mb-3">
+								For interactive, hands-on work
+							</p>
+							<p className="text-muted-foreground mb-4 leading-relaxed">
+								Run Roo directly in VS Code (or any fork, including Cursor). Stay close to the code and
+								control everything: approve every action, manage the context window, preview changes
+								live, and write code by hand when you want to.
+							</p>
+							<p className="text-muted-foreground mb-6 leading-relaxed">
+								Ideal for real-time debugging, quick iteration, and hands-on development where you need
+								full, immediate control.
+							</p>
+							<Button size="sm" variant="outline" asChild>
+								<Link href="/extension" className="flex items-center gap-2">
+									Learn more
+									<ArrowRight className="h-3 w-3" />
+								</Link>
+							</Button>
+						</div>
+
+						<div className="rounded-2xl bg-card border border-border p-8 shadow-sm">
+							<div className="flex items-center gap-3 mb-4">
+								<div className="rounded-lg bg-violet-100 dark:bg-violet-900/20 p-2.5">
+									<Cloud className="h-6 w-6 text-violet-600 dark:text-violet-400" />
+								</div>
+								<h3 className="text-2xl font-bold">Roo Code Cloud</h3>
+							</div>
+							<p className="font-semibold text-violet-600 dark:text-violet-400 mb-3">
+								For autonomous team work
+							</p>
+							<p className="text-muted-foreground mb-4 leading-relaxed">
+								Create your agent team in the cloud, give them access to GitHub, and start delegating
+								tasks from the web, Slack, Linear, or GitHub. Use agents like the Planner, Coder,
+								Explainer, PR Reviewer, and PR Fixer.
+							</p>
+							<p className="text-muted-foreground mb-6 leading-relaxed">
+								Ideal for parallelizing execution, kicking off projects, and looping in the rest of your
+								team.
+							</p>
+							<Button size="sm" variant="outline" asChild>
+								<Link href="/cloud" className="flex items-center gap-2">
+									Learn more
+									<ArrowRight className="h-3 w-3" />
+								</Link>
+							</Button>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			{/* Key Capabilities */}
+			<section className="py-16 md:py-24 border-t border-border">
+				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
+					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4 text-center">Key capabilities</h2>
+					<p className="text-xl text-muted-foreground text-center max-w-2xl mx-auto mb-12">
+						What makes Roo Code different from other AI coding tools.
+					</p>
+
+					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+						<div className="rounded-xl border border-border bg-card p-6">
+							<Brain className="h-8 w-8 text-violet-600 dark:text-violet-400 mb-4" strokeWidth={1.5} />
+							<h3 className="text-lg font-bold mb-2">Model-Agnostic</h3>
+							<p className="text-muted-foreground text-sm leading-relaxed">
+								Works with OpenAI, Anthropic Claude, Google Gemini, Grok, DeepSeek, Mistral, Qwen, local
+								LLMs via Ollama, and any model through OpenRouter. No vendor lock-in. Use the{" "}
+								<Link href="/provider" className="text-primary underline-offset-4 hover:underline">
+									Roo Code Router
+								</Link>{" "}
+								at cost or bring your own API key.
+							</p>
+						</div>
+
+						<div className="rounded-xl border border-border bg-card p-6">
+							<Users2 className="h-8 w-8 text-violet-600 dark:text-violet-400 mb-4" strokeWidth={1.5} />
+							<h3 className="text-lg font-bold mb-2">Custom Modes</h3>
+							<p className="text-muted-foreground text-sm leading-relaxed">
+								Specialized modes stay on task: Architect plans without coding, Code implements, Ask
+								explains, Debug diagnoses, Test writes tests, and Orchestrator coordinates large tasks.
+								Create your own modes or download from the marketplace.
+							</p>
+						</div>
+
+						<div className="rounded-xl border border-border bg-card p-6">
+							<Shield className="h-8 w-8 text-violet-600 dark:text-violet-400 mb-4" strokeWidth={1.5} />
+							<h3 className="text-lg font-bold mb-2">Permission-Based Control</h3>
+							<p className="text-muted-foreground text-sm leading-relaxed">
+								You approve every file change and command execution. Configure granular auto-approval
+								rules to make Roo as autonomous as you want. Nothing runs without your say-so.
+							</p>
+						</div>
+
+						<div className="rounded-xl border border-border bg-card p-6">
+							<Code className="h-8 w-8 text-violet-600 dark:text-violet-400 mb-4" strokeWidth={1.5} />
+							<h3 className="text-lg font-bold mb-2">Multi-File Editing</h3>
+							<p className="text-muted-foreground text-sm leading-relaxed">
+								Goes beyond single-file autocomplete. Roo Code reads, refactors, and updates multiple
+								files at once for holistic code changes. It can also run terminal commands, execute
+								tests, and open a browser for integration testing.
+							</p>
+						</div>
+
+						<div className="rounded-xl border border-border bg-card p-6">
+							<Workflow className="h-8 w-8 text-violet-600 dark:text-violet-400 mb-4" strokeWidth={1.5} />
+							<h3 className="text-lg font-bold mb-2">Large Task Coordination</h3>
+							<p className="text-muted-foreground text-sm leading-relaxed">
+								Orchestrator mode handles large tasks by breaking them into subtasks and coordinating
+								across other modes. It can run for hours, delegating work to Architect, Code, and Test
+								modes as needed.
+							</p>
+						</div>
+
+						<div className="rounded-xl border border-border bg-card p-6">
+							<Keyboard className="h-8 w-8 text-violet-600 dark:text-violet-400 mb-4" strokeWidth={1.5} />
+							<h3 className="text-lg font-bold mb-2">Open Source &amp; Auditable</h3>
+							<p className="text-muted-foreground text-sm leading-relaxed">
+								Fully open source on{" "}
+								<a
+									href={EXTERNAL_LINKS.GITHUB}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="text-primary underline-offset-4 hover:underline">
+									GitHub
+								</a>
+								. Community-driven with no throttling or surprises. Client-only architecture means no
+								code leaves your machine unless you choose. SOC 2 Type II compliant.
+							</p>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			{/* Modes */}
+			<section className="py-16 md:py-24 bg-muted/30 border-t border-border">
+				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
+					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4 text-center">
+						Built-in modes for every task
+					</h2>
+					<p className="text-xl text-muted-foreground text-center max-w-2xl mx-auto mb-12">
+						Each mode is specialized for a type of work, staying focused and delivering better results.
+					</p>
+
+					<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+						{modes.map((mode) => {
+							const Icon = mode.icon
+							return (
+								<div
+									key={mode.name}
+									className="flex items-start gap-4 rounded-xl border border-border bg-card p-5">
+									<div className="rounded-lg bg-violet-100 dark:bg-violet-900/20 p-2 shrink-0">
+										<Icon className="h-5 w-5 text-violet-600 dark:text-violet-400" />
+									</div>
+									<div>
+										<h3 className="font-bold mb-1">{mode.name}</h3>
+										<p className="text-sm text-muted-foreground">{mode.description}</p>
+									</div>
+								</div>
+							)
+						})}
+					</div>
+
+					<p className="text-center text-muted-foreground mt-8">
+						You can also{" "}
+						<a
+							href={EXTERNAL_LINKS.DOCUMENTATION}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-primary underline-offset-4 hover:underline">
+							create your own custom modes
+						</a>{" "}
+						or download community-built modes from the marketplace.
+					</p>
+				</div>
+			</section>
+
+			{/* Who Uses Roo Code */}
+			<section className="py-16 md:py-24 border-t border-border">
+				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
+					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4 text-center">
+						Who uses Roo Code
+					</h2>
+					<p className="text-xl text-muted-foreground text-center max-w-2xl mx-auto mb-12">
+						From solo developers to large enterprise teams.
+					</p>
+
+					<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+						<div className="text-center md:text-left">
+							<h3 className="text-xl font-bold mb-3">Individual Developers</h3>
+							<p className="text-muted-foreground leading-relaxed">
+								Use the free VS Code extension with your favorite AI model. Roo Code handles
+								refactoring, debugging, test writing, and code exploration. Great for both serious
+								enterprise work and casual &ldquo;vibe coding&rdquo; -- quick prototyping, rapid
+								iteration, and design exploration.
+							</p>
+						</div>
+
+						<div className="text-center md:text-left">
+							<h3 className="text-xl font-bold mb-3">Development Teams</h3>
+							<p className="text-muted-foreground leading-relaxed">
+								Roo Code Cloud lets teams delegate work to autonomous agents. Get PR reviews
+								automatically, fix review comments with a single GitHub mention, and create tasks from
+								Slack or Linear. Centralized billing and shared configuration keep everyone aligned.
+							</p>
+						</div>
+
+						<div className="text-center md:text-left">
+							<h3 className="text-xl font-bold mb-3">Enterprises</h3>
+							<p className="text-muted-foreground leading-relaxed">
+								The{" "}
+								<Link href="/enterprise" className="text-primary underline-offset-4 hover:underline">
+									enterprise control-plane
+								</Link>{" "}
+								provides centralized AI management, SAML/SCIM, usage analytics, model allow-lists, cost
+								controls, and audit trails. Self-host AI models or use trusted providers for compliance.
+							</p>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			{/* Comparison Table */}
+			<section className="py-16 md:py-24 bg-muted/30 border-t border-border">
+				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
+					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4 text-center">
+						How Roo Code compares
+					</h2>
+					<p className="text-xl text-muted-foreground text-center max-w-2xl mx-auto mb-12">
+						A factual comparison with other popular AI coding tools.
+					</p>
+
+					<div className="overflow-x-auto rounded-xl border border-border bg-card">
+						<table className="w-full text-sm">
+							<thead>
+								<tr className="border-b border-border">
+									<th className="text-left p-4 font-semibold">Feature</th>
+									<th className="text-center p-4 font-semibold text-violet-600 dark:text-violet-400">
+										Roo Code
+									</th>
+									<th className="text-center p-4 font-semibold">GitHub Copilot</th>
+									<th className="text-center p-4 font-semibold">Cursor</th>
+									<th className="text-center p-4 font-semibold">Windsurf</th>
+								</tr>
+							</thead>
+							<tbody>
+								{comparisons.map((row) => (
+									<tr key={row.name} className="border-b border-border/50 last:border-0">
+										<td className="p-4 font-medium">{row.name}</td>
+										<td className="text-center p-4">
+											{row.rooCode ? (
+												<CheckCircle className="h-5 w-5 text-green-500 mx-auto" />
+											) : (
+												<span className="text-muted-foreground">&#8212;</span>
+											)}
+										</td>
+										<td className="text-center p-4">
+											{row.copilot ? (
+												<CheckCircle className="h-5 w-5 text-green-500 mx-auto" />
+											) : (
+												<span className="text-muted-foreground">&#8212;</span>
+											)}
+										</td>
+										<td className="text-center p-4">
+											{row.cursor ? (
+												<CheckCircle className="h-5 w-5 text-green-500 mx-auto" />
+											) : (
+												<span className="text-muted-foreground">&#8212;</span>
+											)}
+										</td>
+										<td className="text-center p-4">
+											{row.windsurf ? (
+												<CheckCircle className="h-5 w-5 text-green-500 mx-auto" />
+											) : (
+												<span className="text-muted-foreground">&#8212;</span>
+											)}
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</section>
+
+			{/* Getting Started */}
+			<section className="py-16 md:py-24 border-t border-border">
+				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
+					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4 text-center">Getting started</h2>
+					<p className="text-xl text-muted-foreground text-center max-w-2xl mx-auto mb-12">
+						Up and running in under two minutes.
+					</p>
+
+					<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+						<div className="text-center">
+							<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-violet-100 dark:bg-violet-900/20 text-violet-600 dark:text-violet-400 font-bold mb-4">
+								1
+							</div>
+							<h3 className="font-bold mb-2">Install the extension</h3>
+							<p className="text-sm text-muted-foreground">
+								Get Roo Code from the{" "}
+								<a
+									href={EXTERNAL_LINKS.MARKETPLACE}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="text-primary underline-offset-4 hover:underline">
+									VS Code Marketplace
+								</a>{" "}
+								or search &ldquo;Roo Code&rdquo; in VS Code extensions.
+							</p>
+						</div>
+
+						<div className="text-center">
+							<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-violet-100 dark:bg-violet-900/20 text-violet-600 dark:text-violet-400 font-bold mb-4">
+								2
+							</div>
+							<h3 className="font-bold mb-2">Add your API key</h3>
+							<p className="text-sm text-muted-foreground">
+								Connect OpenAI, Anthropic, or any supported provider. Or use the{" "}
+								<Link href="/provider" className="text-primary underline-offset-4 hover:underline">
+									Roo Code Router
+								</Link>{" "}
+								for curated models at cost.
+							</p>
+						</div>
+
+						<div className="text-center">
+							<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-violet-100 dark:bg-violet-900/20 text-violet-600 dark:text-violet-400 font-bold mb-4">
+								3
+							</div>
+							<h3 className="font-bold mb-2">Start building</h3>
+							<p className="text-sm text-muted-foreground">
+								Open the Roo panel in VS Code and describe what you want in plain English. Check out the{" "}
+								<a
+									href={EXTERNAL_LINKS.TUTORIALS}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="text-primary underline-offset-4 hover:underline">
+									tutorial videos
+								</a>{" "}
+								to get started.
+							</p>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			{/* FAQ */}
+			<section className="py-16 md:py-24 bg-muted/30 border-t border-border">
+				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
+					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-12 text-center">
+						Frequently asked questions
+					</h2>
+
+					<div className="space-y-6">
+						{faqData.map((faq) => (
+							<div key={faq.question} className="rounded-xl border border-border bg-card p-6">
+								<h3 className="font-bold text-lg mb-2">{faq.question}</h3>
+								<p className="text-muted-foreground leading-relaxed">{faq.answer}</p>
+							</div>
+						))}
+					</div>
+
+					<p className="text-center text-muted-foreground mt-8">
+						Have more questions? Check out the{" "}
+						<a
+							href={EXTERNAL_LINKS.DOCUMENTATION}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-primary underline-offset-4 hover:underline">
+							documentation
+						</a>{" "}
+						or join the{" "}
+						<a
+							href={EXTERNAL_LINKS.DISCORD}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-primary underline-offset-4 hover:underline">
+							Discord community
+						</a>
+						.
+					</p>
+				</div>
+			</section>
+
+			{/* CTA */}
+			<section className="py-24 border-t border-border">
+				<div className="container px-4 mx-auto sm:px-6 lg:px-8 text-center">
+					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">Ready to try Roo Code?</h2>
+					<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
+						The extension is free and open source. Cloud agents start free too.
+					</p>
+
+					<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+						<Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base" asChild>
+							<a
+								href={EXTERNAL_LINKS.MARKETPLACE}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="flex items-center gap-2">
+								<Download className="h-4 w-4" />
+								Install on VS Code
+							</a>
+						</Button>
+						<Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base" asChild>
+							<a
+								href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="flex items-center gap-2">
+								Try Cloud for Free
+								<ArrowRight className="h-4 w-4" />
+							</a>
+						</Button>
+					</div>
+				</div>
+			</section>
+		</>
+	)
+}
diff --git a/apps/web-roo-code/src/components/chromes/footer.tsx b/apps/web-roo-code/src/components/chromes/footer.tsx
index 7f0de4082f5..a534c058358 100644
--- a/apps/web-roo-code/src/components/chromes/footer.tsx
+++ b/apps/web-roo-code/src/components/chromes/footer.tsx
@@ -162,6 +162,13 @@ export function Footer() {
 							<div className="mt-10 md:mt-0">
 								<h3 className="text-sm font-semibold uppercase leading-6 text-foreground">Resources</h3>
 								<ul className="mt-6 space-y-4">
+									<li>
+										<Link
+											href="/what-is-roo-code"
+											className="text-sm leading-6 text-muted-foreground transition-colors hover:text-foreground">
+											What is Roo Code?
+										</Link>
+									</li>
 									<li>
 										<a
 											href={EXTERNAL_LINKS.EVALS}
diff --git a/apps/web-roo-code/src/components/chromes/nav-bar.tsx b/apps/web-roo-code/src/components/chromes/nav-bar.tsx
index e09836a45c1..e707e9da2a3 100644
--- a/apps/web-roo-code/src/components/chromes/nav-bar.tsx
+++ b/apps/web-roo-code/src/components/chromes/nav-bar.tsx
@@ -120,6 +120,15 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 							</NavigationMenuTrigger>
 							<NavigationMenuContent>
 								<ul className="grid min-w-[260px] gap-1 p-2">
+									<li>
+										<NavigationMenuLink asChild>
+											<Link
+												href="/what-is-roo-code"
+												className="block select-none rounded-md px-3 py-2 text-sm leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+												What is Roo Code?
+											</Link>
+										</NavigationMenuLink>
+									</li>
 									<li>
 										<NavigationMenuLink asChild>
 											<Link
diff --git a/apps/web-roo-code/src/components/faq-structured-data.tsx b/apps/web-roo-code/src/components/faq-structured-data.tsx
new file mode 100644
index 00000000000..164cfc2fc06
--- /dev/null
+++ b/apps/web-roo-code/src/components/faq-structured-data.tsx
@@ -0,0 +1,41 @@
+/**
+ * FAQStructuredData Component
+ *
+ * Renders FAQPage JSON-LD structured data for AEO (Answer Engine Optimization).
+ * AI answer engines specifically look for FAQPage schema to extract Q&A pairs.
+ *
+ * @see https://developers.google.com/search/docs/appearance/structured-data/faqpage
+ */
+
+interface FAQItem {
+	question: string
+	answer: string
+}
+
+interface FAQStructuredDataProps {
+	faqs: FAQItem[]
+}
+
+export function FAQStructuredData({ faqs }: FAQStructuredDataProps) {
+	const structuredData = {
+		"@context": "https://schema.org",
+		"@type": "FAQPage",
+		mainEntity: faqs.map((faq) => ({
+			"@type": "Question",
+			name: faq.question,
+			acceptedAnswer: {
+				"@type": "Answer",
+				text: faq.answer,
+			},
+		})),
+	}
+
+	return (
+		<script
+			type="application/ld+json"
+			dangerouslySetInnerHTML={{
+				__html: JSON.stringify(structuredData),
+			}}
+		/>
+	)
+}

From 803586f386a59a931e2258f05db1366b3b5dad06 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 10 Feb 2026 19:08:48 +0000
Subject: [PATCH 02/10] feat(web): prioritize Cloud over Extension in product
 ordering

---
 .../src/app/what-is-roo-code/page.tsx         | 81 +++++++++----------
 1 file changed, 40 insertions(+), 41 deletions(-)

diff --git a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
index 74a7325d612..52d39315218 100644
--- a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
+++ b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
@@ -242,35 +242,34 @@ export default function WhatIsRooCodePage() {
 						files, executing commands, running tests, and adapting to your workflow.
 					</p>
 					<p className="text-lg text-muted-foreground text-center max-w-3xl mx-auto mb-10 leading-relaxed">
-						The{" "}
-						<Link href="/extension" className="text-primary underline-offset-4 hover:underline">
-							Roo Code VS Code Extension
-						</Link>{" "}
-						is free, open-source, and the #1 most-installed open-source AI coding extension.{" "}
 						<Link href="/cloud" className="text-primary underline-offset-4 hover:underline">
 							Roo Code Cloud
 						</Link>{" "}
-						extends this with autonomous AI agents that run 24/7 in the background.
+						gives you autonomous AI agents that run 24/7 in the background. The{" "}
+						<Link href="/extension" className="text-primary underline-offset-4 hover:underline">
+							Roo Code VS Code Extension
+						</Link>{" "}
+						is free, open-source, and the #1 most-installed open-source AI coding extension.
 					</p>
 					<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
 						<Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base" asChild>
 							<a
-								href={EXTERNAL_LINKS.MARKETPLACE}
+								href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
 								target="_blank"
 								rel="noopener noreferrer"
 								className="flex items-center gap-2">
-								<Download className="h-4 w-4" />
-								Install on VS Code
+								Try Cloud for Free
+								<ArrowRight className="h-4 w-4" />
 							</a>
 						</Button>
 						<Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base" asChild>
 							<a
-								href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
+								href={EXTERNAL_LINKS.MARKETPLACE}
 								target="_blank"
 								rel="noopener noreferrer"
 								className="flex items-center gap-2">
-								Try Cloud for Free
-								<ArrowRight className="h-4 w-4" />
+								<Download className="h-4 w-4" />
+								Install on VS Code
 							</a>
 						</Button>
 					</div>
@@ -284,31 +283,31 @@ export default function WhatIsRooCodePage() {
 						Two products, one platform
 					</h2>
 					<p className="text-xl text-muted-foreground text-center max-w-2xl mx-auto mb-12">
-						Use the extension for hands-on work. Use Cloud to delegate tasks to autonomous agents.
+						Use Cloud to delegate tasks to autonomous agents. Use the extension for hands-on work.
 					</p>
 
 					<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
 						<div className="rounded-2xl bg-card border border-border p-8 shadow-sm">
 							<div className="flex items-center gap-3 mb-4">
-								<div className="rounded-lg bg-blue-100 dark:bg-blue-900/20 p-2.5">
-									<Laptop className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+								<div className="rounded-lg bg-violet-100 dark:bg-violet-900/20 p-2.5">
+									<Cloud className="h-6 w-6 text-violet-600 dark:text-violet-400" />
 								</div>
-								<h3 className="text-2xl font-bold">VS Code Extension</h3>
+								<h3 className="text-2xl font-bold">Roo Code Cloud</h3>
 							</div>
-							<p className="font-semibold text-blue-600 dark:text-blue-400 mb-3">
-								For interactive, hands-on work
+							<p className="font-semibold text-violet-600 dark:text-violet-400 mb-3">
+								For autonomous team work
 							</p>
 							<p className="text-muted-foreground mb-4 leading-relaxed">
-								Run Roo directly in VS Code (or any fork, including Cursor). Stay close to the code and
-								control everything: approve every action, manage the context window, preview changes
-								live, and write code by hand when you want to.
+								Create your agent team in the cloud, give them access to GitHub, and start delegating
+								tasks from the web, Slack, Linear, or GitHub. Use agents like the Planner, Coder,
+								Explainer, PR Reviewer, and PR Fixer.
 							</p>
 							<p className="text-muted-foreground mb-6 leading-relaxed">
-								Ideal for real-time debugging, quick iteration, and hands-on development where you need
-								full, immediate control.
+								Ideal for parallelizing execution, kicking off projects, and looping in the rest of your
+								team.
 							</p>
 							<Button size="sm" variant="outline" asChild>
-								<Link href="/extension" className="flex items-center gap-2">
+								<Link href="/cloud" className="flex items-center gap-2">
 									Learn more
 									<ArrowRight className="h-3 w-3" />
 								</Link>
@@ -317,25 +316,25 @@ export default function WhatIsRooCodePage() {
 
 						<div className="rounded-2xl bg-card border border-border p-8 shadow-sm">
 							<div className="flex items-center gap-3 mb-4">
-								<div className="rounded-lg bg-violet-100 dark:bg-violet-900/20 p-2.5">
-									<Cloud className="h-6 w-6 text-violet-600 dark:text-violet-400" />
+								<div className="rounded-lg bg-blue-100 dark:bg-blue-900/20 p-2.5">
+									<Laptop className="h-6 w-6 text-blue-600 dark:text-blue-400" />
 								</div>
-								<h3 className="text-2xl font-bold">Roo Code Cloud</h3>
+								<h3 className="text-2xl font-bold">VS Code Extension</h3>
 							</div>
-							<p className="font-semibold text-violet-600 dark:text-violet-400 mb-3">
-								For autonomous team work
+							<p className="font-semibold text-blue-600 dark:text-blue-400 mb-3">
+								For interactive, hands-on work
 							</p>
 							<p className="text-muted-foreground mb-4 leading-relaxed">
-								Create your agent team in the cloud, give them access to GitHub, and start delegating
-								tasks from the web, Slack, Linear, or GitHub. Use agents like the Planner, Coder,
-								Explainer, PR Reviewer, and PR Fixer.
+								Run Roo directly in VS Code (or any fork, including Cursor). Stay close to the code and
+								control everything: approve every action, manage the context window, preview changes
+								live, and write code by hand when you want to.
 							</p>
 							<p className="text-muted-foreground mb-6 leading-relaxed">
-								Ideal for parallelizing execution, kicking off projects, and looping in the rest of your
-								team.
+								Ideal for real-time debugging, quick iteration, and hands-on development where you need
+								full, immediate control.
 							</p>
 							<Button size="sm" variant="outline" asChild>
-								<Link href="/cloud" className="flex items-center gap-2">
+								<Link href="/extension" className="flex items-center gap-2">
 									Learn more
 									<ArrowRight className="h-3 w-3" />
 								</Link>
@@ -688,22 +687,22 @@ export default function WhatIsRooCodePage() {
 					<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
 						<Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base" asChild>
 							<a
-								href={EXTERNAL_LINKS.MARKETPLACE}
+								href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
 								target="_blank"
 								rel="noopener noreferrer"
 								className="flex items-center gap-2">
-								<Download className="h-4 w-4" />
-								Install on VS Code
+								Try Cloud for Free
+								<ArrowRight className="h-4 w-4" />
 							</a>
 						</Button>
 						<Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base" asChild>
 							<a
-								href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
+								href={EXTERNAL_LINKS.MARKETPLACE}
 								target="_blank"
 								rel="noopener noreferrer"
 								className="flex items-center gap-2">
-								Try Cloud for Free
-								<ArrowRight className="h-4 w-4" />
+								<Download className="h-4 w-4" />
+								Install on VS Code
 							</a>
 						</Button>
 					</div>

From fb729d9ba9727424282f0ec2c4492a554ab11b41 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 10 Feb 2026 19:10:40 +0000
Subject: [PATCH 03/10] feat(web): remove comparison table section from What is
 Roo Code page

---
 .../src/app/what-is-roo-code/page.tsx         | 123 ------------------
 1 file changed, 123 deletions(-)

diff --git a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
index 52d39315218..6be47ef68e6 100644
--- a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
+++ b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
@@ -4,7 +4,6 @@ import {
 	ArrowRight,
 	Brain,
 	Bug,
-	CheckCircle,
 	Cloud,
 	Code,
 	Download,
@@ -134,65 +133,6 @@ const faqData = [
 	},
 ]
 
-const comparisons = [
-	{
-		name: "Open Source",
-		rooCode: true,
-		copilot: false,
-		cursor: false,
-		windsurf: false,
-	},
-	{
-		name: "Model-Agnostic",
-		rooCode: true,
-		copilot: false,
-		cursor: false,
-		windsurf: false,
-	},
-	{
-		name: "Multi-File Agentic Editing",
-		rooCode: true,
-		copilot: false,
-		cursor: true,
-		windsurf: true,
-	},
-	{
-		name: "Custom Modes",
-		rooCode: true,
-		copilot: false,
-		cursor: false,
-		windsurf: false,
-	},
-	{
-		name: "Permission-Based Control",
-		rooCode: true,
-		copilot: false,
-		cursor: false,
-		windsurf: false,
-	},
-	{
-		name: "Autonomous Cloud Agents",
-		rooCode: true,
-		copilot: false,
-		cursor: false,
-		windsurf: false,
-	},
-	{
-		name: "Works in VS Code (any fork)",
-		rooCode: true,
-		copilot: true,
-		cursor: false,
-		windsurf: false,
-	},
-	{
-		name: "Bring Your Own API Key",
-		rooCode: true,
-		copilot: false,
-		cursor: true,
-		windsurf: false,
-	},
-]
-
 export default function WhatIsRooCodePage() {
 	return (
 		<>
@@ -513,69 +453,6 @@ export default function WhatIsRooCodePage() {
 				</div>
 			</section>
 
-			{/* Comparison Table */}
-			<section className="py-16 md:py-24 bg-muted/30 border-t border-border">
-				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
-					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4 text-center">
-						How Roo Code compares
-					</h2>
-					<p className="text-xl text-muted-foreground text-center max-w-2xl mx-auto mb-12">
-						A factual comparison with other popular AI coding tools.
-					</p>
-
-					<div className="overflow-x-auto rounded-xl border border-border bg-card">
-						<table className="w-full text-sm">
-							<thead>
-								<tr className="border-b border-border">
-									<th className="text-left p-4 font-semibold">Feature</th>
-									<th className="text-center p-4 font-semibold text-violet-600 dark:text-violet-400">
-										Roo Code
-									</th>
-									<th className="text-center p-4 font-semibold">GitHub Copilot</th>
-									<th className="text-center p-4 font-semibold">Cursor</th>
-									<th className="text-center p-4 font-semibold">Windsurf</th>
-								</tr>
-							</thead>
-							<tbody>
-								{comparisons.map((row) => (
-									<tr key={row.name} className="border-b border-border/50 last:border-0">
-										<td className="p-4 font-medium">{row.name}</td>
-										<td className="text-center p-4">
-											{row.rooCode ? (
-												<CheckCircle className="h-5 w-5 text-green-500 mx-auto" />
-											) : (
-												<span className="text-muted-foreground">&#8212;</span>
-											)}
-										</td>
-										<td className="text-center p-4">
-											{row.copilot ? (
-												<CheckCircle className="h-5 w-5 text-green-500 mx-auto" />
-											) : (
-												<span className="text-muted-foreground">&#8212;</span>
-											)}
-										</td>
-										<td className="text-center p-4">
-											{row.cursor ? (
-												<CheckCircle className="h-5 w-5 text-green-500 mx-auto" />
-											) : (
-												<span className="text-muted-foreground">&#8212;</span>
-											)}
-										</td>
-										<td className="text-center p-4">
-											{row.windsurf ? (
-												<CheckCircle className="h-5 w-5 text-green-500 mx-auto" />
-											) : (
-												<span className="text-muted-foreground">&#8212;</span>
-											)}
-										</td>
-									</tr>
-								))}
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</section>
-
 			{/* Getting Started */}
 			<section className="py-16 md:py-24 border-t border-border">
 				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">

From 3e41ab2ab027638fba3d1cbf91d6b0d69de041fa Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 10 Feb 2026 19:13:08 +0000
Subject: [PATCH 04/10] feat(web): update Getting Started section to lead with
 Roo Code Cloud

---
 .../src/app/what-is-roo-code/page.tsx         | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
index 6be47ef68e6..7f3358d50bd 100644
--- a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
+++ b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
@@ -466,17 +466,17 @@ export default function WhatIsRooCodePage() {
 							<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-violet-100 dark:bg-violet-900/20 text-violet-600 dark:text-violet-400 font-bold mb-4">
 								1
 							</div>
-							<h3 className="font-bold mb-2">Install the extension</h3>
+							<h3 className="font-bold mb-2">Sign up for free</h3>
 							<p className="text-sm text-muted-foreground">
-								Get Roo Code from the{" "}
+								Create your{" "}
 								<a
-									href={EXTERNAL_LINKS.MARKETPLACE}
+									href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
 									target="_blank"
 									rel="noopener noreferrer"
 									className="text-primary underline-offset-4 hover:underline">
-									VS Code Marketplace
+									Roo Code Cloud
 								</a>{" "}
-								or search &ldquo;Roo Code&rdquo; in VS Code extensions.
+								account. No credit card needed.
 							</p>
 						</div>
 
@@ -484,13 +484,14 @@ export default function WhatIsRooCodePage() {
 							<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-violet-100 dark:bg-violet-900/20 text-violet-600 dark:text-violet-400 font-bold mb-4">
 								2
 							</div>
-							<h3 className="font-bold mb-2">Add your API key</h3>
+							<h3 className="font-bold mb-2">Connect GitHub</h3>
 							<p className="text-sm text-muted-foreground">
-								Connect OpenAI, Anthropic, or any supported provider. Or use the{" "}
+								Pick which repos your agents can work with, choose your model, and configure your agent
+								team. Use the{" "}
 								<Link href="/provider" className="text-primary underline-offset-4 hover:underline">
 									Roo Code Router
 								</Link>{" "}
-								for curated models at cost.
+								or bring your own API key.
 							</p>
 						</div>
 
@@ -498,17 +499,17 @@ export default function WhatIsRooCodePage() {
 							<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-violet-100 dark:bg-violet-900/20 text-violet-600 dark:text-violet-400 font-bold mb-4">
 								3
 							</div>
-							<h3 className="font-bold mb-2">Start building</h3>
+							<h3 className="font-bold mb-2">Start delegating</h3>
 							<p className="text-sm text-muted-foreground">
-								Open the Roo panel in VS Code and describe what you want in plain English. Check out the{" "}
+								Give tasks to your agents from the web, Slack, or Linear. Or{" "}
 								<a
-									href={EXTERNAL_LINKS.TUTORIALS}
+									href={EXTERNAL_LINKS.MARKETPLACE}
 									target="_blank"
 									rel="noopener noreferrer"
 									className="text-primary underline-offset-4 hover:underline">
-									tutorial videos
+									install the VS Code extension
 								</a>{" "}
-								to get started.
+								for hands-on coding.
 							</p>
 						</div>
 					</div>

From 26cf4e771d6ab7efb80474afa5620bc66968503e Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 10 Feb 2026 19:16:52 +0000
Subject: [PATCH 05/10] feat(web): reposition page content to lead with Roo
 Code Cloud throughout

---
 .../src/app/what-is-roo-code/page.tsx         | 49 +++++++++----------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
index 7f3358d50bd..cbc4d51718d 100644
--- a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
+++ b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
@@ -25,8 +25,8 @@ import { ogImageUrl } from "@/lib/og"
 
 const TITLE = "What is Roo Code?"
 const DESCRIPTION =
-	"Roo Code is a free, open-source AI coding assistant for VS Code and an autonomous cloud agent platform. Model-agnostic, multi-file editing, permission-based control, and more."
-const OG_DESCRIPTION = "The open-source AI dev team for VS Code and the Cloud"
+	"Roo Code is an AI-powered development platform with autonomous cloud agents and a free, open-source VS Code extension. Delegate tasks to AI agents from the web, Slack, Linear, or GitHub."
+const OG_DESCRIPTION = "Your AI software engineering team in the Cloud and the IDE"
 const PATH = "/what-is-roo-code"
 
 export const metadata: Metadata = {
@@ -107,29 +107,29 @@ const modes = [
 ]
 
 const faqData = [
+	{
+		question: "What are Roo Code Cloud Agents?",
+		answer: "Roo Code Cloud Agents are autonomous AI agents that run 24/7 in isolated cloud containers. You can delegate tasks to specialized agents like the Planner, Coder, Explainer, PR Reviewer, and PR Fixer from the web, Slack, Linear, or GitHub. They work in the background while you focus on other things.",
+	},
 	{
 		question: "Is Roo Code free?",
-		answer: "Yes. The Roo Code VS Code extension is completely free and open source. You only pay for AI model usage if you use a paid API (like OpenAI or Anthropic). If you choose free or self-hosted models, there is no cost at all. Roo Code Cloud has both free and paid tiers.",
+		answer: "Roo Code Cloud has a free tier that includes access to Cloud Agents, the Roo Code Router, task history, and professional support. The VS Code extension is completely free and open source. Paid plans add team features, Slack and Linear integrations, and centralized billing.",
 	},
 	{
 		question: "Which AI models does Roo Code support?",
-		answer: "Roo Code is fully model-agnostic. It supports OpenAI models (GPT-4o, GPT-4, o1), Anthropic Claude (including Claude 3.5 Sonnet), Google Gemini, Grok, DeepSeek, Mistral, Qwen, local LLMs via Ollama, and any model accessible through OpenRouter or compatible APIs.",
+		answer: "Roo Code is fully model-agnostic. It supports OpenAI models (GPT-4o, GPT-4, o1), Anthropic Claude (including Claude 3.5 Sonnet), Google Gemini, Grok, DeepSeek, Mistral, Qwen, and any model accessible through OpenRouter or compatible APIs. Use the Roo Code Router for curated models at cost, or bring your own API key.",
 	},
 	{
-		question: "Will my code stay private?",
-		answer: "Yes. The Roo Code extension runs locally in VS Code, so your code never leaves your machine unless you connect to an external AI API. Even then, you control exactly what is sent. You can use .rooignore to exclude sensitive files, and you can run with offline/local models for full privacy.",
+		question: "Is my code secure?",
+		answer: "Yes. Cloud Agents run in isolated containers with access only to the repositories you explicitly authorize. The VS Code extension runs locally, so your code never leaves your machine unless you choose. Roo Code is SOC 2 Type II compliant, fully open source and auditable, and supports enterprise governance features like model allow-lists and data residency controls.",
 	},
 	{
 		question: "How does Roo Code differ from Copilot, Cursor, or Windsurf?",
-		answer: "Roo Code is open-source and fully customizable, letting you integrate any AI model you choose. It is built for multi-file edits, so it can read, refactor, and update multiple files at once. Its agentic abilities go beyond typical AI autocomplete, enabling it to run tests, open a browser, and handle deeper tasks. You are always in control: Roo Code is permission-based, meaning you control and approve any file changes or command executions.",
-	},
-	{
-		question: "Does Roo Code support my programming language?",
-		answer: "Likely yes. Roo Code supports Python, Java, C#, JavaScript, TypeScript, Go, Rust, and many more. Since it leverages AI model understanding, new or lesser-known languages may also work depending on model support.",
+		answer: "Roo Code is the only platform that combines autonomous cloud agents with a local IDE extension. Unlike Copilot, Cursor, or Windsurf, Roo Code is open source, model-agnostic, and offers specialized modes for different tasks. Cloud Agents can review PRs, fix code from GitHub comments, and be triggered from Slack or Linear -- capabilities the others do not offer.",
 	},
 	{
 		question: "Can it handle large, enterprise-scale projects?",
-		answer: "Yes. Roo Code uses efficient strategies like partial-file analysis, summarization, and configurable semantic search to handle large codebases. Enterprises can use on-premises or self-hosted models for compliance and security needs. SOC 2 Type II compliant.",
+		answer: "Yes. Roo Code Cloud provides enterprise-grade governance, SAML/SCIM, usage analytics, cost controls, and audit trails. Cloud Agents work in isolated containers and can be configured with model allow-lists and data residency controls. The VS Code extension uses efficient strategies like semantic search to handle large codebases locally.",
 	},
 ]
 
@@ -357,8 +357,8 @@ export default function WhatIsRooCodePage() {
 									className="text-primary underline-offset-4 hover:underline">
 									GitHub
 								</a>
-								. Community-driven with no throttling or surprises. Client-only architecture means no
-								code leaves your machine unless you choose. SOC 2 Type II compliant.
+								. Community-driven with no throttling or surprises. Cloud Agents run in isolated
+								containers; the extension runs locally. SOC 2 Type II compliant.
 							</p>
 						</div>
 					</div>
@@ -419,16 +419,6 @@ export default function WhatIsRooCodePage() {
 					</p>
 
 					<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-						<div className="text-center md:text-left">
-							<h3 className="text-xl font-bold mb-3">Individual Developers</h3>
-							<p className="text-muted-foreground leading-relaxed">
-								Use the free VS Code extension with your favorite AI model. Roo Code handles
-								refactoring, debugging, test writing, and code exploration. Great for both serious
-								enterprise work and casual &ldquo;vibe coding&rdquo; -- quick prototyping, rapid
-								iteration, and design exploration.
-							</p>
-						</div>
-
 						<div className="text-center md:text-left">
 							<h3 className="text-xl font-bold mb-3">Development Teams</h3>
 							<p className="text-muted-foreground leading-relaxed">
@@ -449,6 +439,15 @@ export default function WhatIsRooCodePage() {
 								controls, and audit trails. Self-host AI models or use trusted providers for compliance.
 							</p>
 						</div>
+
+						<div className="text-center md:text-left">
+							<h3 className="text-xl font-bold mb-3">Individual Developers</h3>
+							<p className="text-muted-foreground leading-relaxed">
+								Use the free VS Code extension with your favorite AI model for hands-on coding. Or sign
+								up for Cloud to kick off tasks from anywhere. Great for both serious work and casual
+								prototyping.
+							</p>
+						</div>
 					</div>
 				</div>
 			</section>
@@ -559,7 +558,7 @@ export default function WhatIsRooCodePage() {
 				<div className="container px-4 mx-auto sm:px-6 lg:px-8 text-center">
 					<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">Ready to try Roo Code?</h2>
 					<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
-						The extension is free and open source. Cloud agents start free too.
+						Cloud Agents start free. The VS Code extension is free and open source.
 					</p>
 
 					<div className="flex flex-col sm:flex-row items-center justify-center gap-4">

From 65027aeb84f1bf2eed4f69d1e81150227291d7ac Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 10 Feb 2026 19:19:10 +0000
Subject: [PATCH 06/10] feat(web): replace comparison FAQ with Cloud
 integrations question

---
 apps/web-roo-code/src/app/what-is-roo-code/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
index cbc4d51718d..1f998da2a1a 100644
--- a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
+++ b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
@@ -124,8 +124,8 @@ const faqData = [
 		answer: "Yes. Cloud Agents run in isolated containers with access only to the repositories you explicitly authorize. The VS Code extension runs locally, so your code never leaves your machine unless you choose. Roo Code is SOC 2 Type II compliant, fully open source and auditable, and supports enterprise governance features like model allow-lists and data residency controls.",
 	},
 	{
-		question: "How does Roo Code differ from Copilot, Cursor, or Windsurf?",
-		answer: "Roo Code is the only platform that combines autonomous cloud agents with a local IDE extension. Unlike Copilot, Cursor, or Windsurf, Roo Code is open source, model-agnostic, and offers specialized modes for different tasks. Cloud Agents can review PRs, fix code from GitHub comments, and be triggered from Slack or Linear -- capabilities the others do not offer.",
+		question: "What integrations does Roo Code Cloud support?",
+		answer: "Roo Code Cloud integrates with GitHub for PR reviews, code fixes, and repository access. You can trigger agents from Slack by mentioning @Roomote in any channel, or assign work directly from Linear issues. Tasks can also be created from the Roo Code Cloud web UI. All integrations work with the same model-agnostic, bring-your-own-key approach.",
 	},
 	{
 		question: "Can it handle large, enterprise-scale projects?",

From 4d2f8decbc518a7e630e5b783c7f76a12d0df8b2 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 10 Feb 2026 19:22:00 +0000
Subject: [PATCH 07/10] feat(web): redesign hero with bold gradient headline
 and separate AEO prose section

---
 .../src/app/what-is-roo-code/page.tsx         | 65 ++++++++++++-------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
index 1f998da2a1a..2c2c9ea8115 100644
--- a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
+++ b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
@@ -168,47 +168,43 @@ export default function WhatIsRooCodePage() {
 			/>
 
 			{/* Hero */}
-			<section className="relative pt-20 pb-16 md:pt-28 md:pb-20">
-				<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-0">
-					<div className="absolute left-1/2 top-1/2 h-[400px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/10 dark:bg-violet-700/20 blur-[140px]" />
+			<section className="relative pt-24 pb-20 md:pt-36 md:pb-28 overflow-hidden">
+				{/* Layered background effects */}
+				<div className="absolute inset-0 z-0">
+					<div className="absolute left-1/4 top-1/3 h-[500px] w-[500px] rounded-full bg-violet-500/8 dark:bg-violet-600/15 blur-[120px]" />
+					<div className="absolute right-1/4 bottom-1/4 h-[400px] w-[400px] rounded-full bg-blue-500/6 dark:bg-blue-600/10 blur-[100px]" />
 				</div>
-				<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
-					<h1 className="text-4xl font-bold tracking-tight sm:text-5xl mb-6 text-center">
-						What is Roo Code?
+
+				<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center">
+					<h1 className="text-5xl font-extrabold tracking-tight sm:text-6xl lg:text-7xl mb-6">
+						Your AI{" "}
+						<span className="bg-gradient-to-r from-violet-600 via-purple-500 to-blue-500 bg-clip-text text-transparent">
+							Software Engineering
+						</span>
+						<br />
+						Team.
 					</h1>
-					<p className="text-xl text-muted-foreground text-center max-w-3xl mx-auto mb-8 leading-relaxed">
-						Roo Code is an AI-powered software development platform that puts an entire AI dev team at your
-						disposal. It goes beyond simple code autocompletion by reading and writing across multiple
-						files, executing commands, running tests, and adapting to your workflow.
-					</p>
-					<p className="text-lg text-muted-foreground text-center max-w-3xl mx-auto mb-10 leading-relaxed">
-						<Link href="/cloud" className="text-primary underline-offset-4 hover:underline">
-							Roo Code Cloud
-						</Link>{" "}
-						gives you autonomous AI agents that run 24/7 in the background. The{" "}
-						<Link href="/extension" className="text-primary underline-offset-4 hover:underline">
-							Roo Code VS Code Extension
-						</Link>{" "}
-						is free, open-source, and the #1 most-installed open-source AI coding extension.
+					<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10">
+						Autonomous agents in the cloud. A powerful coding assistant in your IDE.
 					</p>
 					<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-						<Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base" asChild>
+						<Button size="xl" asChild>
 							<a
 								href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
 								target="_blank"
 								rel="noopener noreferrer"
 								className="flex items-center gap-2">
 								Try Cloud for Free
-								<ArrowRight className="h-4 w-4" />
+								<ArrowRight className="h-5 w-5" />
 							</a>
 						</Button>
-						<Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base" asChild>
+						<Button variant="outline" size="xl" asChild>
 							<a
 								href={EXTERNAL_LINKS.MARKETPLACE}
 								target="_blank"
 								rel="noopener noreferrer"
 								className="flex items-center gap-2">
-								<Download className="h-4 w-4" />
+								<Download className="h-5 w-5" />
 								Install on VS Code
 							</a>
 						</Button>
@@ -216,6 +212,27 @@ export default function WhatIsRooCodePage() {
 				</div>
 			</section>
 
+			{/* Overview prose -- AEO-rich content that reads naturally after the hero */}
+			<section className="py-16 md:py-20 border-t border-border">
+				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
+					<p className="text-lg text-muted-foreground leading-relaxed mb-6">
+						Roo Code is an AI-powered software development platform that puts an entire AI dev team at your
+						disposal. It goes beyond simple code autocompletion by reading and writing across multiple
+						files, executing commands, running tests, and adapting to your workflow.
+					</p>
+					<p className="text-lg text-muted-foreground leading-relaxed">
+						<Link href="/cloud" className="text-primary underline-offset-4 hover:underline">
+							Roo Code Cloud
+						</Link>{" "}
+						gives you autonomous AI agents that run 24/7 in the background. The{" "}
+						<Link href="/extension" className="text-primary underline-offset-4 hover:underline">
+							Roo Code VS Code Extension
+						</Link>{" "}
+						is free, open-source, and the #1 most-installed open-source AI coding extension.
+					</p>
+				</div>
+			</section>
+
 			{/* Two Form Factors */}
 			<section className="py-16 md:py-24 bg-muted/30 border-t border-border">
 				<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">

From d0335af94786d9c2e416a2323c192f669294e280 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 10 Feb 2026 19:23:05 +0000
Subject: [PATCH 08/10] fix(web): split hero subtitle into two lines to prevent
 orphan

---
 apps/web-roo-code/src/app/what-is-roo-code/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
index 2c2c9ea8115..6baa828280b 100644
--- a/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
+++ b/apps/web-roo-code/src/app/what-is-roo-code/page.tsx
@@ -185,7 +185,8 @@ export default function WhatIsRooCodePage() {
 						Team.
 					</h1>
 					<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10">
-						Autonomous agents in the cloud. A powerful coding assistant in your IDE.
+						Autonomous agents in the cloud.
+						<br />A powerful coding assistant in your IDE.
 					</p>
 					<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
 						<Button size="xl" asChild>

From 31b7edda9c374cd798569369d9ed6cf57fef5121 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 10 Feb 2026 19:32:38 +0000
Subject: [PATCH 09/10] fix(web): add What is Roo Code link to mobile nav
 Resources section

---
 apps/web-roo-code/src/components/chromes/nav-bar.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/web-roo-code/src/components/chromes/nav-bar.tsx b/apps/web-roo-code/src/components/chromes/nav-bar.tsx
index e707e9da2a3..e8e6d4c486c 100644
--- a/apps/web-roo-code/src/components/chromes/nav-bar.tsx
+++ b/apps/web-roo-code/src/components/chromes/nav-bar.tsx
@@ -296,6 +296,12 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 							<div className="px-5 pb-2 pt-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
 								Resources
 							</div>
+							<Link
+								href="/what-is-roo-code"
+								className="block w-full p-5 py-3 text-left text-foreground active:opacity-50"
+								onClick={() => setIsMenuOpen(false)}>
+								What is Roo Code?
+							</Link>
 							<ScrollButton
 								targetId="faq"
 								className="block w-full p-5 py-3 text-left text-foreground active:opacity-50"

From f1420a3abda26d94a151f029f32b562af8e22e65 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 10 Feb 2026 19:33:47 +0000
Subject: [PATCH 10/10] fix(web): add [&_svg]:size-5 to xl button variant to
 fix icon sizing specificity

---
 apps/web-roo-code/src/components/ui/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web-roo-code/src/components/ui/button.tsx b/apps/web-roo-code/src/components/ui/button.tsx
index 2884f45c816..3434c0c27df 100644
--- a/apps/web-roo-code/src/components/ui/button.tsx
+++ b/apps/web-roo-code/src/components/ui/button.tsx
@@ -20,7 +20,7 @@ const buttonVariants = cva(
 				default: "h-9 px-4 py-2",
 				sm: "h-8 px-3 text-xs",
 				lg: "h-10 px-8",
-				xl: "h-14 px-8 text-lg",
+				xl: "h-14 px-8 text-lg [&_svg]:size-5",
 				icon: "h-9 w-9",
 			},
 		},