From dce549898df1bdccad6b9092e6ec11917695a5a9 Mon Sep 17 00:00:00 2001 From: Roo Code Date: Thu, 20 Nov 2025 06:14:10 +0000 Subject: [PATCH] feat: add cloud agents landing page - Create comprehensive /cloud-agents landing page based on marketing brief - Implement all sections: hero, team overview, day-in-life scenarios, pillars, agent cards, getting started, and FAQ - Add Cloud dropdown to navigation with Cloud Agents and Roomote Control links - Include SEO metadata and keywords for cloud agents page - Use consistent design patterns from existing agent pages - Add links to PR Reviewer and PR Fixer agent pages --- .../src/app/cloud-agents/page.tsx | 649 ++++++++++++++++++ .../src/components/chromes/nav-bar.tsx | 51 +- 2 files changed, 689 insertions(+), 11 deletions(-) create mode 100644 apps/web-roo-code/src/app/cloud-agents/page.tsx diff --git a/apps/web-roo-code/src/app/cloud-agents/page.tsx b/apps/web-roo-code/src/app/cloud-agents/page.tsx new file mode 100644 index 0000000000..8d1b197405 --- /dev/null +++ b/apps/web-roo-code/src/app/cloud-agents/page.tsx @@ -0,0 +1,649 @@ +import { + ArrowRight, + Bot, + Bug, + CheckCircle, + FileText, + Gauge, + GitPullRequest, + Github, + Languages, + LucideIcon, + MessageCircle, + Microscope, + PocketKnife, + Shield, + Slack, + TestTube, + Users, + Wrench, + Zap, +} from "lucide-react" +import type { Metadata } from "next" +import Link from "next/link" + +import { Button } from "@/components/ui" +import { AnimatedBackground } from "@/components/homepage" +import { SEO } from "@/lib/seo" +import { ogImageUrl } from "@/lib/og" +import { EXTERNAL_LINKS } from "@/lib/constants" + +const TITLE = "Cloud Agents" +const DESCRIPTION = + "Roo Code Cloud Agents are your AI software development team in the cloud — a set of specialized agents that plug into your stack and help your real team ship reliable code to production." +const OG_DESCRIPTION = "Your AI dev team in the cloud" +const PATH = "/cloud-agents" + +export const metadata: Metadata = { + title: TITLE, + description: DESCRIPTION, + alternates: { + canonical: `${SEO.url}${PATH}`, + }, + openGraph: { + title: TITLE, + description: DESCRIPTION, + url: `${SEO.url}${PATH}`, + siteName: SEO.name, + images: [ + { + url: ogImageUrl(TITLE, OG_DESCRIPTION), + width: 1200, + height: 630, + alt: TITLE, + }, + ], + locale: SEO.locale, + type: "website", + }, + twitter: { + card: SEO.twitterCard, + title: TITLE, + description: DESCRIPTION, + images: [ogImageUrl(TITLE, OG_DESCRIPTION)], + }, + keywords: [ + ...SEO.keywords, + "cloud agents", + "AI development team", + "AI code review", + "automated code fixes", + "GitHub integration", + "Slack integration", + "PR reviewer", + "PR fixer", + "AI software team", + "production code", + "repository-aware AI", + "bring your own key", + "BYOK AI", + ], +} + +interface Agent { + icon: LucideIcon + name: string + description: string + page?: string +} + +interface DayInLifeScenario { + title: string + icon: LucideIcon + description: string + steps: string[] +} + +const agents: Agent[] = [ + { + icon: GitPullRequest, + name: "PR Reviewer", + description: "Catches logic, security, and integration issues before they ship.", + page: "/reviewer", + }, + { + icon: Wrench, + name: "PR Fixer", + description: "Applies review feedback as clean commits.", + page: "/pr-fixer", + }, + { + icon: Bug, + name: "Bug Fixer", + description: "Takes Sentry or issue tracker signals and proposes fixes.", + }, + { + icon: TestTube, + name: "Test Engineer", + description: "Writes and updates tests tailored to your codebase.", + }, + { + icon: Microscope, + name: "Security Auditor", + description: "Flags security concerns before they reach production.", + }, + { + icon: Gauge, + name: "Performance Optimizer", + description: "Identifies hotspots, helps optimize critical paths.", + }, + { + icon: FileText, + name: "Documentation Writer", + description: "Keeps docs and copy in sync with changes.", + }, + { + icon: Languages, + name: "String Translator", + description: "Manages translations and localization.", + }, + { + icon: PocketKnife, + name: "Generalist", + description: "Handles general development tasks and questions.", + }, +] + +const dayInLifeScenarios: DayInLifeScenario[] = [ + { + title: "During Development", + icon: GitPullRequest, + description: "Your code changes get reviewed and fixed automatically", + steps: [ + "Dev opens PR → PR Reviewer runs automatically → catches subtle issues", + 'Dev comments "@Roomote: fix the feedback above"', + "PR Fixer applies changes and pushes a clean commit", + ], + }, + { + title: "After an Incident", + icon: Bug, + description: "Errors get traced and fixed with minimal human intervention", + steps: [ + "Sentry logs an error → Agent investigates", + "Proposes a fix → opens a PR reviewed by another agent", + "Human approves & deploys", + ], + }, + { + title: "Outside Engineering", + icon: MessageCircle, + description: "Non-engineers get answers without bothering the team", + steps: [ + 'PM in Slack: "Roo, how does billing work for EU customers?" → gets code-level explanation', + "Support rep pastes stack trace → agent traces it to a bug and drafts a fix", + "Analyst asks about revenue calculation → gets pointers to relevant code", + ], + }, +] + +interface Pillar { + icon: LucideIcon + title: string + description: string + bullets?: string[] +} + +const pillars: Pillar[] = [ + { + icon: Shield, + title: "Serious teams, production code", + description: + "For real teams shipping to prod, not vibe-coders tinkering with side projects. Roo's agents are designed to catch the issues that other tools miss.", + bullets: [ + "PR Reviewer catches logic, security, and architecture-level issues using deep repo context", + "PR Fixer turns review comments into clean, scoped commits", + "Every change goes through the same GitHub review + CI pipeline", + "Used by teams who actually ship with AI, not just talk about it", + ], + }, + { + icon: Users, + title: "A full dev team of agents, not a single bot", + description: + "You're not buying a feature. You're hiring a team. Specialized agents with clear roles that work together.", + bullets: [ + "Multiple agents with specific jobs (reviewing, fixing, testing, documenting)", + "Shared context and repository awareness across all agents", + "Workflows that chain multiple agents together", + "Anything you do repeatedly can become an agent", + ], + }, + { + icon: Zap, + title: "Fits how your whole organization already works", + description: "Roo meets your org where it already lives: GitHub, Slack, Sentry, IDE.", + bullets: [ + "GitHub-native: PR Reviewer and Fixer live inside your pull requests", + "Slack-native: Engineers, PMs, designers, analysts, and support can all talk to agents", + "Monitoring & CI: Sentry hooks trigger agents to investigate and draft patches", + "IDE tie-in: Same agents running in the cloud and in your VS Code extension", + ], + }, +] + +interface FAQ { + question: string + answer: string +} + +const faqs: FAQ[] = [ + { + question: "Won't AI just produce bad code?", + answer: "PR Reviewer uses deep reasoning and repo context with a human-in-the-loop approach. Every change still goes through the same GitHub review + CI pipeline. Roo is designed to reduce risk compared to unmanaged AI usage.", + }, + { + question: "We already have Copilot. Why Roo?", + answer: "Copilot helps individuals write code faster. Roo is an orchestrated dev team that reviews and fixes PRs, hooks into Slack and Sentry, and coordinates multi-step workflows (review → fix → test). They complement each other.", + }, + { + question: "Is this going to be a nightmare to adopt?", + answer: "Start small: turn it on for a single repo or team. Let PR Reviewer + PR Fixer prove themselves on a subset of PRs. No infra changes required, and you can bring your own key with no model lock-in.", + }, + { + question: "Is this only for experimental teams?", + answer: "No. Roo is used by teams who are already shipping production systems. We built Roo Code itself with a tiny core team plus agents, and we ship to production regularly.", + }, + { + question: "How does pricing work with bring your own key?", + answer: "You bring your own API key for models (no markup, no lock-in). Roo Cloud has a subscription fee for the orchestration platform, agent coordination, and infrastructure. This means we optimize for depth and quality, not token savings.", + }, +] + +export default function CloudAgentsPage() { + return ( + <> + {/* Hero Section */} +
+ +
+
+
+
+

+ Your AI dev team in the cloud +

+

+ Roo Code gives you a full team of cloud agents — reviewers, fixers, testers, + debuggers and more — that plug into GitHub, Slack, and Sentry to help your real team + ship reliable code to production. +

+
+ + + GitHub-native + + + + Slack-native + + + + Repository-aware + +
+
+ + +

+ Developers really shipping with AI are using Roo Code. +

+
+ +
+
+
+ {agents.slice(0, 9).map((agent, index) => { + const Icon = agent.icon + return ( +
+ + + {agent.name} + +
+ ) + })} +
+
+
+
+
+
+ + {/* What You're Actually Getting Section */} +
+
+
+

+ You're not buying a feature. You're hiring a team. +

+

+ From one AI assistant to a coordinated dev team +

+
+ +
+
+
+
+ +
+

Your Team

+

Engineers, PMs, designers, support

+
+ +
+
+ + works with + +
+
+ +
+
+ +
+

Roo Cloud Agents

+

Specialized agents with shared context

+
+
+ +
+
+ +
+

Your Stack

+

GitHub, Slack, Sentry, CI, IDE

+
+ +
+
    +
  • + + + Agents with specific jobs (reviewing, fixing, testing, documenting) + +
    • +
  • + + + Shared context and repository awareness across all agents + +
    • +
  • + + + Workflows that chain multiple agents together + +
    • +
+
+
+
+
+ + {/* Day in the Life Section */} +
+
+
+

+ A day in the life with Roo Agents +

+

What changes on a normal Tuesday

+
+ +
+
+ {dayInLifeScenarios.map((scenario, index) => { + const Icon = scenario.icon + return ( +
+ +

{scenario.title}

+

{scenario.description}

+
    + {scenario.steps.map((step, stepIndex) => ( +
  • + + {step} +
    • + ))} +
+
+ ) + })} +
+
+
+
+ + {/* Why Serious Teams Choose Roo Section */} +
+
+
+

Why serious teams choose Roo

+
+ +
+
+ {pillars.map((pillar, index) => { + const Icon = pillar.icon + return ( +
+ +

{pillar.title}

+

{pillar.description}

+ {pillar.bullets && ( +
    + {pillar.bullets.map((bullet, bulletIndex) => ( +
  • + + {bullet} +
    • + ))} +
+ )} +
+ ) + })} +
+
+
+
+ + {/* Meet Your Agents Section */} +
+
+
+

Meet your agents

+

+ The first members of your AI-powered development team +

+
+ +
+
+ {agents.map((agent, index) => { + const Icon = agent.icon + return ( +
+ +

{agent.name}

+

{agent.description}

+ {agent.page && ( + + Learn more + + + )} +
+ ) + })} +
+ +
+

+ These are just the first members of your AI dev team. +

+

+ Anything you do repeatedly in software development can become an agent. More agents are + shipping soon. +

+
+
+
+
+ + {/* How to Get Started Section */} +
+
+
+

How to get started

+

Low-friction, incremental adoption

+
+ +
+
    + {[ + { + number: "1", + title: "Connect GitHub", + description: "Link your repositories to Roo Cloud Agents", + }, + { + number: "2", + title: "Add your model API key(s)", + description: "Bring your own keys for Anthropic, OpenAI, or other providers", + }, + { + number: "3", + title: "Pick a repo or branch to start with", + description: "Start small with a single repo or team", + }, + { + number: "4", + title: "Turn on PR Reviewer + Fixer", + description: "Enable agents for a subset of PRs to test the workflow", + }, + { + number: "5", + title: "Invite your team to the Slack integration", + description: "Let non-engineers ask questions and get help from agents", + }, + ].map((step, index) => ( +
  1. +
    +
    + {step.number} +
    +
    +
    +

    {step.title}

    +

    {step.description}

    +
    +
    2. + ))} +
+
+
+
+ + {/* FAQ Section */} +
+
+
+

Frequently asked questions

+
+ +
+
+ {faqs.map((faq, index) => ( +
+

{faq.question}

+

{faq.answer}

+
+ ))} +
+
+
+
+ + {/* CTA Section */} +
+
+
+

+ Ready to hire your AI dev team? +

+

+ Start with a 14-day free trial. No credit card required. +

+
+ + +
+
+
+
+ + ) +} 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 3e34dc7f90..183751cc4a 100644 --- a/apps/web-roo-code/src/components/chromes/nav-bar.tsx +++ b/apps/web-roo-code/src/components/chromes/nav-bar.tsx @@ -40,11 +40,26 @@ export function NavBar({ stars, downloads }: NavBarProps) { className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground max-lg:hidden"> Extension - - Cloud - + {/* Cloud Dropdown */} +
+ + {/* Dropdown Menu */} +
+ + Cloud Agents + + + Roomote Control + +
+
setIsMenuOpen(false)}> Extension - setIsMenuOpen(false)}> - Cloud - + + {/* Cloud Section */} +
+
+ Cloud +
+ setIsMenuOpen(false)}> + Cloud Agents + + setIsMenuOpen(false)}> + Roomote Control + +
+