mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-10-07 02:58:15 +00:00
feat(web): add llms.txt, llms-full.txt, and /what-is-roo-code page for AEO
This commit is contained in:
Roo Code
parent
7da429da19
commit
0c4567f1b0
6 changed files with 982 additions and 0 deletions
|
|
@ -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';
|
||||
|
|
|
|||
280
apps/web-roo-code/public/llms-full.txt
Normal file
280
apps/web-roo-code/public/llms-full.txt
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
# Roo Code
|
||||
|
||||
> Your AI Software Engineering Team in the IDE and the Cloud.
|
||||
|
||||
Roo Code is an open-source, AI-powered coding agent built by Roo Code, Inc. It works both as a VS Code extension for interactive, local development and as autonomous cloud agents that handle tasks like planning, coding, PR review, and PR fixing. Unlike simple autocompletion tools, Roo Code reads and writes across multiple files, executes terminal commands, opens browsers for testing, and adapts to your workflow with role-specific modes.
|
||||
|
||||
Website: https://roocode.com
|
||||
Documentation: https://docs.roocode.com
|
||||
GitHub: https://github.com/RooCodeInc/Roo-Code
|
||||
License: Apache 2.0
|
||||
|
||||
---
|
||||
|
||||
## Roo Code VS Code Extension
|
||||
|
||||
The Roo Code VS Code Extension is a free, open-source AI coding assistant that runs locally in Visual Studio Code (and any VS Code fork, including Cursor). It provides deep, project-wide context and agentic capabilities far beyond autocomplete.
|
||||
|
||||
Product page: https://roocode.com/extension
|
||||
Install: https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline
|
||||
|
||||
### Core Capabilities
|
||||
|
||||
- **Multi-file editing**: Reads, refactors, and updates multiple files at once for holistic code changes.
|
||||
- **Terminal command execution**: Runs commands like npm install, test suites, build tools -- always with your permission.
|
||||
- **Browser integration**: Can open a web browser for integration testing when approved.
|
||||
- **Deep project context**: Understands your entire codebase structure, not just the current file.
|
||||
- **Permission-based**: Every file change and command execution requires your approval (or can be set to auto-approve).
|
||||
|
||||
### Role-Specific Modes
|
||||
|
||||
Modes keep AI models focused on a given task and limit their access to tools relevant to their role, keeping the context window clearer and avoiding surprises. Built-in modes include:
|
||||
|
||||
- **Architect**: Plans complex changes without making code modifications. Ideal for designing system architecture and breaking down complex problems.
|
||||
- **Code**: Implements, refactors, and optimizes code. The primary mode for writing and modifying code.
|
||||
- **Ask**: Explains functionality and program behavior. Best for understanding concepts and analyzing existing code.
|
||||
- **Debug**: Diagnoses issues, traces failures, and proposes targeted, reliable fixes.
|
||||
- **Test**: Creates and improves tests without changing the actual functionality.
|
||||
|
||||
You can also create custom modes with their own system prompts, tool permissions, and file access restrictions. Modes are smart enough to ask to switch to another mode when stepping outside their responsibilities.
|
||||
|
||||
### Model-Agnostic Design
|
||||
|
||||
Roo Code does not lock you into a single AI provider. It works with dozens of models and providers, including:
|
||||
|
||||
- OpenAI (GPT-4o, GPT-4, o1, o3)
|
||||
- Anthropic (Claude 4 Sonnet, Claude 4 Opus, Claude 3.5 Sonnet)
|
||||
- Google (Gemini 2.5 Pro, Gemini 2.0 Flash)
|
||||
- DeepSeek
|
||||
- Mistral
|
||||
- xAI (Grok)
|
||||
- Qwen
|
||||
- Kimi / Moonshot
|
||||
- Local LLMs via Ollama
|
||||
- OpenRouter (access to hundreds of models)
|
||||
- Amazon Bedrock
|
||||
- And many more via the Model Context Protocol (MCP)
|
||||
|
||||
You can bring your own API key from any provider or use the Roo Code Router for at-cost access to top models.
|
||||
|
||||
### Configurability
|
||||
|
||||
- Highly tweakable settings to fit your workflow
|
||||
- Keyboard shortcut support
|
||||
- .rooignore files to exclude sensitive files from AI context
|
||||
- Custom system prompts per mode
|
||||
- Auto-approval settings for trusted operations
|
||||
- MCP (Model Context Protocol) for extending capabilities
|
||||
|
||||
### Privacy and Security
|
||||
|
||||
- Code never leaves your machine unless you connect to an external AI API
|
||||
- You control exactly what is sent to the AI model
|
||||
- Works with offline/local models for full privacy
|
||||
- Open source -- fully auditable
|
||||
- The extension does not use your data for training
|
||||
|
||||
### Language Support
|
||||
|
||||
Roo Code supports a wide range of programming languages including Python, Java, C#, JavaScript, TypeScript, Go, Rust, Ruby, PHP, Swift, Kotlin, and many more. Since it leverages the AI model's understanding, most languages with model support will work.
|
||||
|
||||
---
|
||||
|
||||
## Roo Code Cloud
|
||||
|
||||
Roo Code Cloud provides autonomous AI agents that run in the cloud, handling development tasks without requiring your local machine. Agents can be triggered from the web UI, Slack, Linear, or GitHub.
|
||||
|
||||
Product page: https://roocode.com/cloud
|
||||
Sign up: https://app.roocode.com/sign-up
|
||||
|
||||
### Cloud Agents
|
||||
|
||||
- **Planner**: Plans complex changes and creates detailed implementation strategies.
|
||||
- **Coder**: Writes and implements code changes autonomously.
|
||||
- **Explainer**: Analyzes and explains code functionality and behavior.
|
||||
- **PR Reviewer**: Automatically reviews pull requests with repository-aware analysis and actionable feedback.
|
||||
- **PR Fixer**: Applies fixes to pull requests based on review comments, transforming feedback into clean commits.
|
||||
|
||||
### How It Works
|
||||
|
||||
1. **Connect your GitHub account**: Pick which repositories the agents can work with in their isolated containers and choose which model powers each agent.
|
||||
2. **Set up your agent team**: Choose the roles you want filled. Agents know how to act in each situation and stay on-task.
|
||||
3. **Start giving them tasks**: Describe what you want from the web UI, get the Reviewer automatically reviewing PRs, and more.
|
||||
|
||||
### Cloud Features
|
||||
|
||||
- Autonomous task execution 24/7
|
||||
- Model-agnostic (bring your own keys or use the Roo Code Router)
|
||||
- GitHub PR reviews with automatic feedback and fix suggestions
|
||||
- Slack integration for starting tasks and getting updates
|
||||
- Linear integration for assigning issues to agents
|
||||
- Team collaboration with centralized billing and configuration
|
||||
- Token usage analytics
|
||||
- Task history accessible from anywhere
|
||||
- Task sharing with co-workers in real-time
|
||||
|
||||
---
|
||||
|
||||
## Roo Code for Slack
|
||||
|
||||
Start tasks, get updates, and collaborate with cloud agents directly from your team's Slack channels. No need to switch tools -- just describe what you need and an agent handles it.
|
||||
|
||||
Product page: https://roocode.com/slack
|
||||
|
||||
---
|
||||
|
||||
## Roo Code for Linear
|
||||
|
||||
Assign issues to Roo Code directly from Linear. Get PRs back without switching tools. The agent reads the issue context and implements the changes autonomously.
|
||||
|
||||
Product page: https://roocode.com/linear
|
||||
|
||||
---
|
||||
|
||||
## PR Reviewer
|
||||
|
||||
The PR Reviewer is a Cloud Agent that provides comprehensive, AI-powered pull request reviews. It offers repository-aware analysis with actionable feedback to keep your PR queue moving. Supports bring-your-own-key (BYOK) so you choose which model powers the reviews.
|
||||
|
||||
Product page: https://roocode.com/reviewer
|
||||
|
||||
---
|
||||
|
||||
## PR Fixer
|
||||
|
||||
The PR Fixer is a Cloud Agent that automatically applies high-quality fixes to pull requests based on review comments. It uses comment-aware, GitHub-native workflows to transform review feedback into clean commits.
|
||||
|
||||
Product page: https://roocode.com/pr-fixer
|
||||
|
||||
---
|
||||
|
||||
## Roo Code Router
|
||||
|
||||
Access top AI models at cost with no markup. The Roo Code Router provides a curated selection of frontier and open-weight models that work well with Roo Code, available to both extension and cloud users.
|
||||
|
||||
Product page: https://roocode.com/provider
|
||||
|
||||
---
|
||||
|
||||
## Pricing
|
||||
|
||||
### VS Code Extension
|
||||
- **Price**: Free forever
|
||||
- **Details**: Unlimited local use, bring your own model/API key, powerful extensible modes, community support
|
||||
|
||||
### Cloud Free
|
||||
- **Price**: $0/month
|
||||
- **Credits**: Pay-as-you-go at $5 per credit pack
|
||||
- **Includes**: Cloud Agents, Roo Code Router access, task sharing, token usage analytics, professional support
|
||||
|
||||
### Cloud Team
|
||||
- **Price**: $99/month (free 14-day trial)
|
||||
- **Credits**: $5 per credit pack
|
||||
- **Includes**: Everything in Free plus unlimited users (no per-seat cost), shared configuration & policies, centralized billing, Slack and Linear integrations
|
||||
|
||||
### Enterprise
|
||||
- Custom pricing
|
||||
- Includes: SAML/SCIM SSO, advanced governance, dedicated support, SLA, custom deployment options
|
||||
- Contact: https://roocode.com/enterprise
|
||||
|
||||
Full pricing details: https://roocode.com/pricing
|
||||
|
||||
---
|
||||
|
||||
## How Roo Code Compares
|
||||
|
||||
### vs GitHub Copilot
|
||||
Roo Code is open-source and fully customizable, letting you integrate any AI model. It provides multi-file editing, agentic terminal execution, and role-specific modes. Copilot focuses primarily on inline autocompletion tied to OpenAI models.
|
||||
|
||||
### vs Cursor
|
||||
Roo Code runs as an extension inside VS Code (or any fork, including Cursor itself). It is model-agnostic, open-source, and provides cloud agents for autonomous work. Cursor is a proprietary VS Code fork with its own model integrations.
|
||||
|
||||
### vs Windsurf
|
||||
Roo Code is open-source with full transparency on how it works. It supports any AI model and includes cloud agents for team collaboration. Windsurf is a closed-source editor with its own AI capabilities.
|
||||
|
||||
### Key Differentiators
|
||||
- **Open source**: Fully auditable, Apache 2.0 licensed
|
||||
- **Model-agnostic**: Not locked to any single AI provider
|
||||
- **Role-specific modes**: Keep models focused and under control
|
||||
- **Cloud agents**: Autonomous development beyond the local IDE
|
||||
- **Team integrations**: Slack, Linear, GitHub native workflows
|
||||
- **Highly configurable**: Custom modes, system prompts, permissions, and keyboard shortcuts
|
||||
|
||||
---
|
||||
|
||||
## Security and Compliance
|
||||
|
||||
- SOC2 Type 2 compliant
|
||||
- Open-source extension (fully auditable)
|
||||
- Code stays on your machine unless you connect to an external API
|
||||
- Permission-based execution (every action requires approval)
|
||||
- .rooignore for excluding sensitive files
|
||||
- Self-hosted model support for full data privacy
|
||||
- Trust Center: https://trust.roocode.com
|
||||
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
1. Install the Roo Code extension from the VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline
|
||||
2. Add your AI API key (OpenAI, Anthropic, or any supported provider) in the extension settings.
|
||||
3. Open the Roo Code panel in VS Code and start typing commands in plain English.
|
||||
4. Optionally, sign up for Roo Code Cloud at https://app.roocode.com/sign-up to access autonomous cloud agents.
|
||||
|
||||
Tutorials: https://docs.roocode.com/tutorial-videos
|
||||
Documentation: https://docs.roocode.com
|
||||
|
||||
---
|
||||
|
||||
## Community
|
||||
|
||||
- GitHub: https://github.com/RooCodeInc/Roo-Code
|
||||
- Discord: https://discord.gg/roocode
|
||||
- Reddit: https://reddit.com/r/RooCode
|
||||
- X / Twitter: https://x.com/roocode
|
||||
- LinkedIn: https://www.linkedin.com/company/roo-code
|
||||
- YouTube: https://www.youtube.com/@RooCodeYT
|
||||
- Blog: https://blog.roocode.com
|
||||
- Bluesky: https://bsky.app/profile/roocode.bsky.social
|
||||
|
||||
---
|
||||
|
||||
## Frequently Asked Questions
|
||||
|
||||
### What exactly is Roo Code?
|
||||
Roo Code is an open-source, AI-powered coding assistant that runs in VS Code. It goes beyond simple autocompletion by reading and writing across multiple files, executing commands, and adapting to your workflow -- like having a whole dev team right inside your editor.
|
||||
|
||||
### How does Roo Code differ from Copilot, Cursor, or Windsurf?
|
||||
Roo Code is open-source and fully customizable, letting you integrate any AI model you choose (OpenAI, Anthropic, local LLMs, etc.). 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. And you are always in control: Roo Code is permission-based, meaning you approve any file changes or command executions.
|
||||
|
||||
### Is Roo Code really free?
|
||||
Yes. Roo Code is completely free and open-source. You only pay for the AI model usage if you use a paid API (like OpenAI). If you choose free or self-hosted models, there is no cost at all.
|
||||
|
||||
### Will my code stay private?
|
||||
Yes. Because Roo Code is an extension in your local VS Code, your code never leaves your machine unless you connect to an external AI API. Even then, you control exactly what is sent to the AI model. You can use .rooignore to exclude sensitive files, and you can run Roo Code with offline/local models for full privacy.
|
||||
|
||||
### Which AI models does Roo Code support?
|
||||
Roo Code is fully model-agnostic. It supports OpenAI models (GPT-4o, GPT-4, o1), Anthropic Claude, Google Gemini, local LLMs via Ollama, and many more. You can connect any model that follows the supported API patterns.
|
||||
|
||||
### Does Roo Code support my programming language?
|
||||
Likely yes. Roo Code supports a wide range of languages -- Python, Java, C#, JavaScript/TypeScript, Go, Rust, and many more. Since it leverages the AI model's understanding, new or lesser-known languages may also work depending on model support.
|
||||
|
||||
### How do I install and get started?
|
||||
Install Roo Code from the VS Code Marketplace, add your AI keys in the extension settings, open the Roo panel, and start typing commands in plain English.
|
||||
|
||||
### Can it handle large, enterprise-scale projects?
|
||||
Absolutely. Roo Code uses efficient strategies like partial-file analysis, summarization, and user-specified context to handle large codebases. Enterprises appreciate the on-prem or self-hosted model option for compliance and security needs.
|
||||
|
||||
### Is it safe for enterprise use?
|
||||
Yes. You can self-host AI models or use your own trusted provider. All file changes and commands go through permission gating. Because Roo Code is fully open-source, it is auditable.
|
||||
|
||||
### Can Roo Code run commands and tests automatically?
|
||||
Yes. Roo Code can execute terminal commands like npm install, run your test suites, and open a web browser for integration testing -- always optional and fully permission-based.
|
||||
|
||||
### Can I contribute to Roo Code?
|
||||
Yes. Roo Code is open-source on GitHub. Submit issues, suggest features, or open a pull request. There is an active community on Discord and Reddit.
|
||||
|
||||
---
|
||||
|
||||
## Evals and Benchmarks
|
||||
|
||||
Roo Code publishes transparent evaluations of AI model performance on coding tasks. See the latest results at https://roocode.com/evals.
|
||||
35
apps/web-roo-code/public/llms.txt
Normal file
35
apps/web-roo-code/public/llms.txt
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
# Roo Code
|
||||
|
||||
> Your AI Software Engineering Team in the IDE and the Cloud.
|
||||
|
||||
Roo Code is an open-source, AI-powered coding agent that works as a VS Code extension and as autonomous cloud agents. It goes beyond simple autocompletion -- reading and writing across multiple files, executing terminal commands, reviewing PRs, and adapting to your workflow.
|
||||
|
||||
## Products
|
||||
|
||||
- [Roo Code VS Code Extension](https://roocode.com/extension): Free, open-source AI coding assistant that runs locally in VS Code. Model-agnostic, with role-specific modes and deep project-wide context.
|
||||
- [Roo Code Cloud](https://roocode.com/cloud): Autonomous AI agents in the cloud that handle tasks like planning, coding, PR review, and PR fixing -- triggered from the web, Slack, Linear, or GitHub.
|
||||
- [Roo Code for Slack](https://roocode.com/slack): Start tasks and collaborate with cloud agents directly from Slack channels.
|
||||
- [Roo Code for Linear](https://roocode.com/linear): Assign Linear issues to Roo Code and get PRs back without switching tools.
|
||||
- [Roo Code Router](https://roocode.com/provider): Access top AI models at cost with no markup.
|
||||
|
||||
## Key Links
|
||||
|
||||
- [Documentation](https://docs.roocode.com)
|
||||
- [Pricing](https://roocode.com/pricing)
|
||||
- [Enterprise](https://roocode.com/enterprise)
|
||||
- [Evals & Benchmarks](https://roocode.com/evals)
|
||||
- [GitHub Repository](https://github.com/RooCodeInc/Roo-Code)
|
||||
- [Blog](https://blog.roocode.com)
|
||||
- [Trust & Security Center](https://trust.roocode.com)
|
||||
- [Full LLM Context](https://roocode.com/llms-full.txt)
|
||||
|
||||
## Quick Facts
|
||||
|
||||
- Open source (Apache 2.0 license)
|
||||
- VS Code extension with millions of installs
|
||||
- Model-agnostic: works with OpenAI, Anthropic, Google Gemini, DeepSeek, Mistral, Ollama, and dozens more
|
||||
- Role-specific modes: Architect, Code, Ask, Debug, Test, plus custom modes
|
||||
- Cloud agents: Planner, Coder, Explainer, PR Reviewer, PR Fixer
|
||||
- Integrations: Slack, Linear, GitHub
|
||||
- SOC2 Type 2 compliant
|
||||
- Free extension (bring your own API key); Cloud has free and paid tiers
|
||||
642
apps/web-roo-code/src/app/what-is-roo-code/page.tsx
Normal file
642
apps/web-roo-code/src/app/what-is-roo-code/page.tsx
Normal file
|
|
@ -0,0 +1,642 @@
|
|||
import type { Metadata } from "next"
|
||||
import Link from "next/link"
|
||||
import {
|
||||
ArrowRight,
|
||||
Brain,
|
||||
Bug,
|
||||
Check,
|
||||
Cloud,
|
||||
Code,
|
||||
Download,
|
||||
Keyboard,
|
||||
Laptop,
|
||||
Map,
|
||||
MessageCircleQuestion,
|
||||
Shield,
|
||||
TestTube,
|
||||
Users2,
|
||||
} from "lucide-react"
|
||||
|
||||
import { Button } from "@/components/ui"
|
||||
import { FAQSection, CTASection } from "@/components/homepage"
|
||||
import { SEO } from "@/lib/seo"
|
||||
import { ogImageUrl } from "@/lib/og"
|
||||
import { EXTERNAL_LINKS } from "@/lib/constants"
|
||||
|
||||
const TITLE = "What is Roo Code? AI Coding Agent for VS Code & Cloud"
|
||||
const DESCRIPTION =
|
||||
"Roo Code is an open-source, AI-powered coding agent that runs in VS Code and the cloud. Learn how it works, what makes it different from Copilot and Cursor, and how to get started."
|
||||
const OG_DESCRIPTION = "The open-source AI coding agent 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 review",
|
||||
"roo code vs copilot",
|
||||
"roo code vs cursor",
|
||||
"roo code vs windsurf",
|
||||
"open source AI coding assistant",
|
||||
"AI pair programmer VS Code",
|
||||
"AI coding agent free",
|
||||
"best AI coding tool",
|
||||
],
|
||||
}
|
||||
|
||||
const modes = [
|
||||
{
|
||||
name: "Architect",
|
||||
description: "Plans complex changes and designs system architecture without modifying code.",
|
||||
icon: Map,
|
||||
},
|
||||
{
|
||||
name: "Code",
|
||||
description: "Implements, refactors, and optimizes code across multiple files.",
|
||||
icon: Code,
|
||||
},
|
||||
{
|
||||
name: "Ask",
|
||||
description: "Explains functionality, answers questions, and analyzes existing code.",
|
||||
icon: MessageCircleQuestion,
|
||||
},
|
||||
{
|
||||
name: "Debug",
|
||||
description: "Diagnoses issues, traces failures, and proposes targeted fixes.",
|
||||
icon: Bug,
|
||||
},
|
||||
{
|
||||
name: "Test",
|
||||
description: "Creates and improves tests without changing the actual functionality.",
|
||||
icon: TestTube,
|
||||
},
|
||||
]
|
||||
|
||||
const providers = [
|
||||
"OpenAI",
|
||||
"Anthropic",
|
||||
"Google Gemini",
|
||||
"DeepSeek",
|
||||
"Mistral",
|
||||
"xAI (Grok)",
|
||||
"Qwen",
|
||||
"Ollama (local)",
|
||||
"OpenRouter",
|
||||
"Amazon Bedrock",
|
||||
]
|
||||
|
||||
// AboutPage + Article structured data for answer engines
|
||||
function WhatIsRooCodeStructuredData() {
|
||||
const structuredData = {
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{
|
||||
"@type": "AboutPage",
|
||||
"@id": `${SEO.url}${PATH}#aboutpage`,
|
||||
url: `${SEO.url}${PATH}`,
|
||||
name: TITLE,
|
||||
description: DESCRIPTION,
|
||||
isPartOf: { "@id": `${SEO.url}#website` },
|
||||
publisher: { "@id": `${SEO.url}#org` },
|
||||
},
|
||||
{
|
||||
"@type": "Article",
|
||||
"@id": `${SEO.url}${PATH}#article`,
|
||||
headline: "What is Roo Code?",
|
||||
description: DESCRIPTION,
|
||||
url: `${SEO.url}${PATH}`,
|
||||
publisher: { "@id": `${SEO.url}#org` },
|
||||
isPartOf: { "@id": `${SEO.url}${PATH}#aboutpage` },
|
||||
about: {
|
||||
"@type": "SoftwareApplication",
|
||||
"@id": `${SEO.url}#vscode-extension`,
|
||||
},
|
||||
speakable: {
|
||||
"@type": "SpeakableSpecification",
|
||||
cssSelector: ["#what-is-roo-code", "#why-roo-code"],
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
return (
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify(structuredData),
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default function WhatIsRooCode() {
|
||||
return (
|
||||
<>
|
||||
<WhatIsRooCodeStructuredData />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden pt-20 pb-16 md:pt-32 md:pb-24">
|
||||
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
|
||||
<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 text-center md:text-5xl mb-6">
|
||||
What is Roo Code?
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground text-center max-w-3xl mx-auto">
|
||||
Roo Code is an open-source, AI-powered coding agent that puts an entire AI dev team right in
|
||||
your editor and in the cloud.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Overview Section */}
|
||||
<section id="what-is-roo-code" className="py-16 border-t border-border">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
|
||||
<div className="prose prose-lg dark:prose-invert max-w-none">
|
||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
||||
Roo Code goes far beyond simple autocompletion. It reads and writes across multiple files,
|
||||
executes terminal commands, runs your tests, opens a browser for integration testing, and
|
||||
adapts to the way you work. Think of it as having a team of specialized AI developers
|
||||
working for you, both in the cloud and inside your editor.
|
||||
</p>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed mt-4">
|
||||
<Link href="/cloud" className="text-primary underline-offset-4 hover:underline">
|
||||
Roo Code Cloud
|
||||
</Link>{" "}
|
||||
provides autonomous AI agents that handle tasks like planning, coding, PR review, and PR
|
||||
fixing -- triggered from the web, Slack, Linear, or GitHub. Delegate work to your AI team
|
||||
and get results back as pull requests, without being tied to your IDE.
|
||||
</p>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed mt-4">
|
||||
The{" "}
|
||||
<Link href="/extension" className="text-primary underline-offset-4 hover:underline">
|
||||
Roo Code VS Code Extension
|
||||
</Link>{" "}
|
||||
is completely free and open-source under the Apache 2.0 license. It works with any AI model
|
||||
you choose -- from OpenAI and Anthropic to local models running on your own machine via
|
||||
Ollama. Your code stays on your machine unless you explicitly connect to an external API.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Key Capabilities */}
|
||||
<section className="py-16 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 text-center mb-4">What can Roo Code do?</h2>
|
||||
<p className="text-lg text-muted-foreground text-center max-w-2xl mx-auto mb-12">
|
||||
Roo Code combines deep project understanding with agentic capabilities that go well beyond
|
||||
autocomplete.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-background rounded-2xl border border-border p-6">
|
||||
<h3 className="text-xl font-semibold mb-3">Multi-file editing</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Reads, refactors, and updates multiple files at once for holistic code changes.
|
||||
Understands your entire codebase structure, not just the current file.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-background rounded-2xl border border-border p-6">
|
||||
<h3 className="text-xl font-semibold mb-3">Terminal command execution</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Runs commands like npm install, executes your test suites, and manages build tools --
|
||||
always with your permission or auto-approval if you choose.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-background rounded-2xl border border-border p-6">
|
||||
<h3 className="text-xl font-semibold mb-3">Browser testing</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Can open a web browser for integration testing and visual verification of changes when
|
||||
approved.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-background rounded-2xl border border-border p-6">
|
||||
<h3 className="text-xl font-semibold mb-3">Deep project context</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Uses efficient strategies like partial-file analysis and summarization to understand
|
||||
large codebases. Works well with enterprise-scale projects.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-background rounded-2xl border border-border p-6">
|
||||
<h3 className="text-xl font-semibold mb-3">Permission-based control</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Every file change and command execution requires your approval. Nothing runs without
|
||||
your explicit permission, keeping you in full control.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-background rounded-2xl border border-border p-6">
|
||||
<h3 className="text-xl font-semibold mb-3">Extensible via MCP</h3>
|
||||
<p className="text-muted-foreground">
|
||||
The Model Context Protocol lets you extend Roo Code with custom tools and resources,
|
||||
connecting it to databases, APIs, and other systems.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Role-Specific Modes */}
|
||||
<section className="py-16 border-t border-border">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<Users2 className="size-8 text-violet-600 shrink-0 mt-1 hidden md:block" strokeWidth={1.5} />
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold tracking-tight">Role-specific modes</h2>
|
||||
<p className="text-lg text-muted-foreground mt-2 max-w-2xl">
|
||||
Modes keep AI models focused on a given task and limit their access to tools relevant to
|
||||
their role. This keeps the context window clearer and avoids surprises. Modes are smart
|
||||
enough to request switching to another mode when stepping outside their
|
||||
responsibilities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
|
||||
{modes.map((mode) => {
|
||||
const Icon = mode.icon
|
||||
return (
|
||||
<div
|
||||
key={mode.name}
|
||||
className="rounded-xl border border-border bg-background p-5 flex gap-3">
|
||||
<Icon className="text-violet-600 size-5 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<h3 className="font-semibold">{mode.name}</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">{mode.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div className="rounded-xl border border-dashed border-border bg-muted/20 p-5 flex items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
Plus <strong className="text-foreground">custom modes</strong> you create with their own
|
||||
prompts, tools, and file restrictions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Model-Agnostic */}
|
||||
<section className="py-16 bg-muted/30 border-t border-border">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<Brain className="size-8 text-violet-600 shrink-0 mt-1 hidden md:block" strokeWidth={1.5} />
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold tracking-tight">Model-agnostic by design</h2>
|
||||
<p className="text-lg text-muted-foreground mt-2 max-w-3xl">
|
||||
“The best model in the world” changes every other week. Providers throttle
|
||||
models with no warning. First-party coding agents only work with their own models. Roo
|
||||
Code works with dozens of models and providers, so you are never locked in.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
{providers.map((provider) => (
|
||||
<span
|
||||
key={provider}
|
||||
className="rounded-lg border border-border bg-background px-4 py-2 text-sm font-medium">
|
||||
{provider}
|
||||
</span>
|
||||
))}
|
||||
<span className="rounded-lg border border-dashed border-border bg-muted/20 px-4 py-2 text-sm text-muted-foreground">
|
||||
+ many more
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground mt-6">
|
||||
Bring your own API key from any provider, or use the{" "}
|
||||
<Link href="/provider" className="text-primary underline-offset-4 hover:underline">
|
||||
Roo Code Router
|
||||
</Link>{" "}
|
||||
for at-cost access to top models with no markup.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How Roo Code Works: Extension vs Cloud */}
|
||||
<section className="py-16 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 text-center mb-4">
|
||||
Two ways to work with Roo Code
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground text-center max-w-2xl mx-auto mb-12">
|
||||
Delegate to cloud agents for autonomous work, or use the extension for hands-on control.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="rounded-2xl bg-background border border-border p-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="size-12 rounded-full bg-violet-100 dark:bg-violet-900/20 flex items-center justify-center">
|
||||
<Cloud className="size-6 text-violet-600 dark:text-violet-400" strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold">Cloud Agents</h3>
|
||||
<p className="text-sm text-violet-600 dark:text-violet-400 font-medium">
|
||||
For autonomous work
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Create your agent team in the cloud, give them access to GitHub, and start delegating
|
||||
tasks:
|
||||
</p>
|
||||
<ul className="space-y-2 text-muted-foreground">
|
||||
<li className="flex items-start gap-2">
|
||||
<Check className="size-4 shrink-0 mt-1 text-violet-500" />
|
||||
<span>Agents: Planner, Coder, Explainer, Reviewer, Fixer</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Check className="size-4 shrink-0 mt-1 text-violet-500" />
|
||||
<span>Trigger tasks from the web, Slack, Linear, or GitHub</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Check className="size-4 shrink-0 mt-1 text-violet-500" />
|
||||
<span>Get PR reviews and fixes automatically</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Check className="size-4 shrink-0 mt-1 text-violet-500" />
|
||||
<span>Collaborate with your team on shared tasks</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Check className="size-4 shrink-0 mt-1 text-violet-500" />
|
||||
<span>Track usage and costs with analytics</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-6">
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full sm:w-auto bg-violet-600 hover:bg-violet-700 text-white">
|
||||
<a
|
||||
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
|
||||
className="flex items-center justify-center gap-2">
|
||||
Try Cloud for Free
|
||||
<ArrowRight className="size-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl bg-background border border-border p-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="size-12 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center">
|
||||
<Laptop className="size-6 text-blue-600 dark:text-blue-400" strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold">VS Code Extension</h3>
|
||||
<p className="text-sm text-blue-600 dark:text-blue-400 font-medium">
|
||||
For interactive work
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Run Roo directly in VS Code (or any fork, including Cursor), stay close to the code, and
|
||||
control everything:
|
||||
</p>
|
||||
<ul className="space-y-2 text-muted-foreground">
|
||||
<li className="flex items-start gap-2">
|
||||
<Check className="size-4 shrink-0 mt-1 text-blue-500" />
|
||||
<span>Approve every action or set auto-approval</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Check className="size-4 shrink-0 mt-1 text-blue-500" />
|
||||
<span>Manage the context window directly</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Check className="size-4 shrink-0 mt-1 text-blue-500" />
|
||||
<span>Configure every detail of the AI behavior</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Check className="size-4 shrink-0 mt-1 text-blue-500" />
|
||||
<span>Preview changes live in your editor</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Check className="size-4 shrink-0 mt-1 text-blue-500" />
|
||||
<span>Works with your existing VS Code setup</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-6">
|
||||
<Button size="lg" className="w-full sm:w-auto">
|
||||
<a
|
||||
href={EXTERNAL_LINKS.MARKETPLACE}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2">
|
||||
<Download className="size-4" />
|
||||
Install Free Extension
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Roo Code / Differentiators */}
|
||||
<section id="why-roo-code" className="py-16 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 text-center mb-4">
|
||||
Why developers choose Roo Code
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground text-center max-w-2xl mx-auto mb-12">
|
||||
What sets Roo Code apart.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="text-center p-6">
|
||||
<div className="size-14 mx-auto mb-4 rounded-full bg-emerald-100 dark:bg-emerald-900/20 flex items-center justify-center">
|
||||
<Code className="size-7 text-emerald-600 dark:text-emerald-400" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-2">Open source</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Fully auditable under the Apache 2.0 license. See exactly how it works and contribute to
|
||||
its development.
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center p-6">
|
||||
<div className="size-14 mx-auto mb-4 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center">
|
||||
<Brain className="size-7 text-blue-600 dark:text-blue-400" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-2">Not locked to one model</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Use any AI provider. Switch models freely. Bring your own key or use the Roo Code Router
|
||||
at cost.
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center p-6">
|
||||
<div className="size-14 mx-auto mb-4 rounded-full bg-violet-100 dark:bg-violet-900/20 flex items-center justify-center">
|
||||
<Users2 className="size-7 text-violet-600 dark:text-violet-400" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-2">Modes keep agents focused</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Role-specific modes limit what the AI can do, keeping it on task and avoiding unintended
|
||||
side effects.
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center p-6">
|
||||
<div className="size-14 mx-auto mb-4 rounded-full bg-amber-100 dark:bg-amber-900/20 flex items-center justify-center">
|
||||
<Keyboard className="size-7 text-amber-600 dark:text-amber-400" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-2">Highly configurable</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Custom modes, system prompts, auto-approval rules, keyboard shortcuts, and .rooignore
|
||||
for sensitive files.
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center p-6">
|
||||
<div className="size-14 mx-auto mb-4 rounded-full bg-rose-100 dark:bg-rose-900/20 flex items-center justify-center">
|
||||
<Shield className="size-7 text-rose-600 dark:text-rose-400" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-2">Private and secure</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Code stays local. Permission-based execution. SOC2 Type 2 compliant. Works fully offline
|
||||
with local models.
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center p-6">
|
||||
<div className="size-14 mx-auto mb-4 rounded-full bg-cyan-100 dark:bg-cyan-900/20 flex items-center justify-center">
|
||||
<Cloud className="size-7 text-cyan-600 dark:text-cyan-400" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-2">IDE + Cloud</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Work interactively in VS Code or delegate to autonomous cloud agents. No other tool
|
||||
offers both.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Getting Started */}
|
||||
<section className="py-16 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 text-center mb-12">Get started in 2 minutes</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex gap-4 items-start">
|
||||
<div className="size-8 shrink-0 rounded-full bg-violet-600 text-white flex items-center justify-center text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">Install the extension</h3>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Search for “Roo Code” in the VS Code Marketplace or{" "}
|
||||
<a
|
||||
href={EXTERNAL_LINKS.MARKETPLACE}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
install it directly
|
||||
</a>
|
||||
. It works in VS Code and any fork, including Cursor.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-start">
|
||||
<div className="size-8 shrink-0 rounded-full bg-violet-600 text-white flex items-center justify-center text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">Add your AI API key</h3>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Connect any supported provider (OpenAI, Anthropic, Google, etc.) in the extension
|
||||
settings, or use the{" "}
|
||||
<Link href="/provider" className="text-primary underline-offset-4 hover:underline">
|
||||
Roo Code Router
|
||||
</Link>{" "}
|
||||
for at-cost model access.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-start">
|
||||
<div className="size-8 shrink-0 rounded-full bg-violet-600 text-white flex items-center justify-center text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">Start coding with AI</h3>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Open the Roo Code panel in VS Code and start typing commands in plain English.
|
||||
Choose a mode (Code, Architect, Debug, etc.) and let Roo help you build.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-start">
|
||||
<div className="size-8 shrink-0 rounded-full border-2 border-violet-600 text-violet-600 flex items-center justify-center text-sm font-bold">
|
||||
+
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">Try Cloud Agents (optional)</h3>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
<a
|
||||
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
Sign up for Roo Code Cloud
|
||||
</a>{" "}
|
||||
to access autonomous agents that handle tasks from the web, Slack, Linear, and
|
||||
GitHub.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 text-center">
|
||||
<p className="text-muted-foreground">
|
||||
Need help getting started?{" "}
|
||||
<a
|
||||
href={EXTERNAL_LINKS.TUTORIALS}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
Watch our tutorials
|
||||
</a>{" "}
|
||||
or visit the{" "}
|
||||
<a
|
||||
href={EXTERNAL_LINKS.DOCUMENTATION}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline-offset-4 hover:underline">
|
||||
documentation
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ */}
|
||||
<FAQSection />
|
||||
|
||||
{/* CTA */}
|
||||
<CTASection />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -287,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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue