diff --git a/apps/web-roo-code/next.config.ts b/apps/web-roo-code/next.config.ts index ec827646071..a2591c1a30f 100644 --- a/apps/web-roo-code/next.config.ts +++ b/apps/web-roo-code/next.config.ts @@ -27,6 +27,11 @@ const nextConfig: NextConfig = { destination: "https://roo-code.notion.site/238fd1401b0a8087b858e1ad431507cf?pvs=105", permanent: false, }, + { + source: "/provider/pricing", + destination: "/provider", + permanent: true, + }, ] }, } diff --git a/apps/web-roo-code/public/heroes/cloud-screen.png b/apps/web-roo-code/public/heroes/cloud-screen.png index 1c6ba660529..2ed2af3f0eb 100644 Binary files a/apps/web-roo-code/public/heroes/cloud-screen.png and b/apps/web-roo-code/public/heroes/cloud-screen.png differ diff --git a/apps/web-roo-code/src/app/cloud/page.tsx b/apps/web-roo-code/src/app/cloud/page.tsx index cbf7071321b..20307112b6f 100644 --- a/apps/web-roo-code/src/app/cloud/page.tsx +++ b/apps/web-roo-code/src/app/cloud/page.tsx @@ -1,29 +1,33 @@ import { ArrowRight, + Bot, + Brain, ChartLine, - Cloud, - Lock, + Github, + History, LucideIcon, - Megaphone, - MessageCircleQuestionMark, - ReplaceAll, + Pencil, Router, Share2, + Slack, Users, + Users2, } from "lucide-react" import type { Metadata } from "next" +import Image from "next/image" import { Button } from "@/components/ui" -import { AnimatedBackground } from "@/components/homepage" +import { AnimatedBackground, UseExamplesSection } from "@/components/homepage" import { SEO } from "@/lib/seo" import { ogImageUrl } from "@/lib/og" import { EXTERNAL_LINKS } from "@/lib/constants" -import Image from "next/image" +// Workaround for next/image choking on these for some reason +import screenshotDark from "/public/heroes/cloud-screen.png" const TITLE = "Roo Code Cloud" const DESCRIPTION = - "Roo Code Cloud gives you and your team the tools to take AI-coding to the next level with cloud agents, remote control, and more." -const OG_DESCRIPTION = "Go way beyond the IDE" + "Your AI Software Engineering Team in the Cloud. Delegate tasks to autonomous agents, review PRs, and collaborate with your team." +const OG_DESCRIPTION = "Your AI Team in the Cloud" const PATH = "/cloud" export const metadata: Metadata = { @@ -54,161 +58,171 @@ export const metadata: Metadata = { description: DESCRIPTION, images: [ogImageUrl(TITLE, OG_DESCRIPTION)], }, - keywords: [...SEO.keywords, "cloud", "subscription", "cloud agents", "AI cloud development"], + keywords: [...SEO.keywords, "cloud", "subscription", "cloud agents", "AI cloud development", "autonomous agents"], } +const howItWorks = [ + { + title: "1. Connect your GitHub account", + description: + "Pick which repos the agents can work with in their isolated containers and choose what model you want to power each of them. You're in control.", + icon: Github, + }, + { + title: "2. Set up your agent team", + description: + "Choose the roles you want filled, like Explainer, Planner, Coder, PR Reviewer and PR Fixer. They know how to act in each situation and stay on-task with no deviations.", + icon: Users2, + }, + { + title: "3. Start giving them tasks", + description: + "Describe what you want them to do from the web UI, get the Reviewer automatically reviewing PRs, get the Coder building features from Slack threads and much more. They're now part of your team.", + icon: Pencil, + }, +] + interface Feature { icon: LucideIcon title: string description: string - logos?: string[] } -const cloudFeatures: Feature[] = [ +const features: Feature[] = [ { - icon: Router, - title: "Roomote Control", - description: "Control your IDE from anywhere and keep coding away from your computer.", - }, - { - icon: Cloud, - title: "Cloud Agents", + icon: Bot, + title: "Autonomous Cloud Agents", description: - "Specialized agents running in the Cloud to get stuff done while you sleep, with a credit-based system that doesn't lock you in or dumb your models down.", + "Delegate work to specialized agents like the Planner, Coder, Explainer, Reviewer, and Fixer that run 24/7.", }, { - icon: ReplaceAll, - title: "Still Model-agnostic", - description: "Bring your own provider key — no markup, lock-in, no restrictions.", - logos: ["Anthropic", "OpenAI", "Gemini", "Grok", "Qwen", "Kimi", "Mistral", "Ollama"], + icon: Brain, + title: "Model Agnostic", + description: + "Bring your own keys or use the Roo Code Cloud Provider with access to all top models with no markup.", }, { - icon: ChartLine, - title: "Usage Analytics", - description: "Detailed token analytics to help you optimize your costs and usage.", + icon: Github, + title: "GitHub PR Reviews", + description: + "Agents can automatically review Pull Requests, provide feedback, and even push fixes directly to your repository.", }, { - icon: Megaphone, - title: "Early Model Access", - description: "Get early, free access to new, stealth coding models as they become available.", + icon: Slack, + title: "Slack Integration", + description: "Start tasks, get updates, and collaborate with agents directly from your team's Slack channels.", }, { - icon: Share2, - title: "Task Sharing", - description: "Share tasks with friends and co-workers and let them follow your work.", + icon: Router, + title: "Roomote Control", + description: + "Connect to your local VS Code instance and control the extension remotely from the browser or Slack.", }, { icon: Users, - title: "Team Management", + title: "Team Collaboration", description: - "Manage your team and their access to tasks and resources, with centralized billing, analytics and configuration.", + "Manage your team and their access to tasks and resources, with centralized billing and configuration.", }, { - icon: Lock, - title: "Secure and Private", - description: - "Your data is never used for training, and we're SOC2 Type 2 and GDPR compliant, following state-of-the-art security practices, with deep respect for your IP.", + icon: ChartLine, + title: "Usage Analytics", + description: "Detailed token analytics to help you optimize your costs and usage across your team.", }, { - icon: MessageCircleQuestionMark, - title: "Priority support", - description: "Get quick help from the people who know Roo best.", + icon: History, + title: "Task History", + description: "Access from anywhere all of your tasks, from the cloud and the extension", + }, + { + icon: Share2, + title: "Task Sharing", + description: "Share tasks with friends and co-workers and let them follow your work in real-time.", }, ] -// Workaround for next/image choking on these for some reason -import screenshotDark from "/public/heroes/cloud-screen.png" - export default function CloudPage() { return ( <> -
+ {/* Hero Section */} +
-
-
-
-
-

- Go way beyond the IDE -

-

- Roo Code Cloud gives you (and your team) the tools to take AI-coding to the next - level -

-
- -
-
-
-
- Screenshot of Roo Code Cloud -
-
+
+
+

+ Your AI Team in the Cloud +

+

+ Create your agent team in the Cloud, give them access to GitHub, and start delegating tasks + from Web and Slack. +

+
+ + {/* Screenshot */} +
+ Roo Code Cloud Interface +
+ {/* How It Works Section */}
-
+
+
+
+ +
-

Power and Flexibility

-

- Code in the cloud, access free models, get usage analytics and more +

How it works

+

+ It only takes 2 minutes to expand your team by 10x.

-
    - {cloudFeatures.map((feature, index) => { - const Icon = feature.icon +
      + {howItWorks.map((step, index) => { + const Icon = step.icon return (
    • - + className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300 hover:shadow-lg"> + {Icon && }

      - {feature.title} + {step.title}

      -

      - {feature.description} -

      - {feature.logos && ( -
      - {feature.logos.map((logo) => ( - {`${logo} - ))} -
      - )} +
      + {step.description} +
      • ) })} @@ -217,25 +231,61 @@ export default function CloudPage() {
-
+ {/* Use Cases Section */} + + + {/* Features Grid */} +
+
+
+
+
+
+

+ Powering the next generation of software development +

+

+ Everything you need to scale your development capacity with AI. +

+
+
+ {features.map((feature, index) => { + const Icon = feature.icon + return ( +
+
+ +
+

{feature.title}

+

{feature.description}

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

Try Roo Code Cloud now

-

Code from anywhere.

+
+

+ Try a completely new way of working. +

+

Start for free today.

diff --git a/apps/web-roo-code/src/app/extension/page.tsx b/apps/web-roo-code/src/app/extension/page.tsx new file mode 100644 index 00000000000..56219a34519 --- /dev/null +++ b/apps/web-roo-code/src/app/extension/page.tsx @@ -0,0 +1,84 @@ +/* eslint-disable react/jsx-no-target-blank */ + +import { getVSCodeDownloads } from "@/lib/stats" + +import { Button } from "@/components/ui" +import { + AnimatedBackground, + CodeExample, + CompanyLogos, + FAQSection, + Features, + InstallSection, + Testimonials, +} from "@/components/homepage" +import { EXTERNAL_LINKS } from "@/lib/constants" +import { ArrowRight } from "lucide-react" +import { StructuredData } from "@/components/structured-data" + +// Invalidate cache when a request comes in, at most once every hour. +export const revalidate = 3600 + +export default async function ExtensionPage() { + const downloads = await getVSCodeDownloads() + + return ( + <> + +
+ +
+
+
+
+

+ The Open Source AI Coding Assistant for serious work. +

+

+ Specialized modes stay on task and ship great code. +
+ Fully model-agnostic so you can use the best (or most cost-effective) model for + each task. +

+

+ Stop chasing this week's hot new model or CLI tool and go deep with Roo Code. +

+
+ +
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+ + + ) +} diff --git a/apps/web-roo-code/src/app/pricing/page.tsx b/apps/web-roo-code/src/app/pricing/page.tsx index 361bc3f7882..9029b9fde8b 100644 --- a/apps/web-roo-code/src/app/pricing/page.tsx +++ b/apps/web-roo-code/src/app/pricing/page.tsx @@ -194,8 +194,8 @@ export default function PricingPage() { )} Inference:{" "} - - Roo Provider + + Roo Provider pricing {" "} credits or{" "} diff --git a/apps/web-roo-code/src/app/provider/pricing/page.tsx b/apps/web-roo-code/src/app/provider/page.tsx similarity index 83% rename from apps/web-roo-code/src/app/provider/pricing/page.tsx rename to apps/web-roo-code/src/app/provider/page.tsx index 4558355d2c6..7bcebae2463 100644 --- a/apps/web-roo-code/src/app/provider/pricing/page.tsx +++ b/apps/web-roo-code/src/app/provider/page.tsx @@ -1,10 +1,10 @@ "use client" import { useEffect, useMemo, useState } from "react" -import { ModelCard } from "./components/model-card" +import { ModelCard } from "./pricing/components/model-card" import { Model, ModelWithTotalPrice, ModelsResponse, SortOption } from "@/lib/types/models" import Link from "next/link" -import { ChevronDown, CircleX, Loader, LoaderCircle, Search } from "lucide-react" +import { ChevronDown, CircleX, Cloud, Loader, LoaderCircle, Puzzle, Search } from "lucide-react" const API_URL = "https://api.roocode.com/proxy/v1/models?include_paid=true" @@ -13,28 +13,29 @@ const faqs = [ question: "What are AI model providers?", answer: "AI model providers offer various language models with different capabilities and pricing.", }, - { - question: "How is pricing calculated?", - answer: "Pricing is based on token usage for input and output, measured per million tokens, like pretty much any other provider out there.", - }, { question: "What is the Roo Code Cloud Provider?", answer: ( <>

This is our very own model provider, optimized to work seamlessly with Roo Code Cloud.

-

- It offers a selection of state-of-the-art LLMs (both closed and open weight) we know work well with - Roo for you to choose, with no markup. -

-

- We also often feature 100% free models which labs share with us for the community to use and provide - feedback. -

+

You don't have to use it to use Roo Code, but it's the easiest way to do it.

), }, { - question: "But how much does the Roo Code Cloud service cost?", + question: "Do I have to use the Roo Code Cloud Provider to use the Roo Code products?", + answer: "Not at all! You can bring your own provider key, no problem. This is just meant to make it easier.", + }, + { + question: "How is pricing calculated?", + answer: "Pricing is based on token usage for input and output, measured per million tokens, like pretty much any other provider out there.", + }, + { + question: "How is my data treated?", + answer: "The Roo Code Cloud provider doesn't keep any of your data, the service only aims to make it easier to use Roo Code. Each model vendor has their own privacy policy though, and usually free models use your data for training, so keep that in mind.", + }, + { + question: "How much does the Roo Code Cloud service cost?", answer: ( <> Our{" "} @@ -57,7 +58,7 @@ function enrichModelWithTotalPrice(model: Model): ModelWithTotalPrice { } } -export default function ProviderPricingPage() { +export default function ProviderPage() { const [models, setModels] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) @@ -133,13 +134,22 @@ export default function ProviderPricingPage() {
-

- Roo Code Cloud Provider Pricing -

-

- See pricing and features for all models we offer in our selection. -
- You can always bring your own key ( +

The Roo Code Cloud Provider

+

+ The easiest way to use Roo Code (in the{" "} + + + Cloud + {" "} + or the{" "} + + + Extension + + ) with the best free and paid models – no separate accounts, no messing with API keys. +

+

+ And you can always bring your own key ( FAQ @@ -240,7 +250,7 @@ export default function ProviderPricingPage() {

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

{faq.question}

{faq.answer}

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 2442e3b759e..fa51f081cec 100644 --- a/apps/web-roo-code/src/components/chromes/nav-bar.tsx +++ b/apps/web-roo-code/src/components/chromes/nav-bar.tsx @@ -13,7 +13,7 @@ import { EXTERNAL_LINKS } from "@/lib/constants" import { useLogoSrc } from "@/lib/hooks/use-logo-src" import { ScrollButton } from "@/components/ui" import ThemeToggle from "@/components/chromes/theme-toggle" -import { ChevronDown, X } from "lucide-react" +import { Brain, ChevronDown, Cloud, Puzzle, X } from "lucide-react" interface NavBarProps { stars: string | null @@ -25,7 +25,7 @@ export function NavBar({ stars, downloads }: NavBarProps) { const logoSrc = useLogoSrc() return ( -
+
@@ -34,72 +34,89 @@ export function NavBar({ stars, downloads }: NavBarProps) {
{/* Desktop Navigation */} -