web: Product pages (#9865)

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>

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,
+			},
 		]
 	},
 }

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 (
 		<>
-			<section className="relative flex md:h-[calc(80vh-theme(spacing.12))] items-center overflow-hidden">
+			{/* Hero Section */}
+			<section className="relative flex pt-32 pb-20 items-center overflow-hidden">
 				<AnimatedBackground />
-				<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
-					<div className="grid h-full relative gap-4 md:gap-0 lg:grid-cols-2">
-						<div className="flex flex-col px-4 justify-center space-y-6 sm:space-y-8">
-							<div>
-								<h1 className="text-4xl font-bold tracking-tight mt-8 text-center md:text-left md:text-4xl lg:text-5xl lg:mt-0">
-									Go <em>way</em> beyond the IDE
-								</h1>
-								<p className="mt-4 max-w-md text-lg text-muted-foreground text-center md:text-left sm:mt-6">
-									Roo Code Cloud gives you (and your team) the tools to take AI-coding to the next
-									level
-								</p>
-							</div>
-							<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
-								<Button
-									variant="outline"
-									size="lg"
-									className="w-full sm:w-auto bg-white/20 dark:bg-white/10 backdrop-blur-sm border border-black/40 dark:border-white/30 hover:border-blue-400 hover:bg-white/30 dark:hover:bg-white/20 hover:shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all duration-300">
-									<a
-										href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
-										target="_blank"
-										rel="noopener noreferrer"
-										className="flex w-full items-center justify-center">
-										Start Free Trial
-										<ArrowRight className="ml-2" />
-									</a>
-								</Button>
-							</div>
-						</div>
-						<div className="flex items-center justify-end mx-auto h-full mt-8 lg:mt-0">
-							<div className="md:w-[900px] md:h-[700px] relative rounded-md overflow-clip">
-								<div className="block">
-									<Image
-										src={screenshotDark}
-										alt="Screenshot of Roo Code Cloud"
-										className="max-w-full h-auto"
-										width={1390}
-										height={1012}
-									/>
-								</div>
-							</div>
+				<div className="container relative flex flex-col items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
+					<div className="text-center max-w-4xl mx-auto mb-12">
+						<h1 className="text-4xl font-bold tracking-tight mb-6 md:text-5xl lg:text-6xl">
+							Your AI Team <span className="text-violet-500">in the Cloud</span>
+						</h1>
+						<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+						Create your agent team in the Cloud, give them access to GitHub, and start delegating tasks
+							from Web and Slack.
+						</p>
+						<div className="flex flex-col sm:flex-row gap-4 justify-center">
+							<Button
+								size="xl"
+								className="bg-violet-600 hover:bg-violet-700 text-white transition-all duration-300 shadow-lg hover:shadow-violet-500/25"
+								asChild>
+								<a
+									href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="flex items-center justify-center">
+									Try Cloud for Free
+									<ArrowRight className="ml-2 size-5" />
+								</a>
+							</Button>
+							<Button variant="outline" size="xl" className="backdrop-blur-sm" asChild>
+								<a href="/pricing" className="flex items-center justify-center">
+									View Pricing
+								</a>
+							</Button>
 						</div>
 					</div>
+
+					{/* Screenshot */}
+					<div className="relative mx-auto mt-4 md:max-w-[1000px]">
+						<Image
+							src={screenshotDark}
+							alt="Roo Code Cloud Interface"
+							className="w-full h-auto"
+							width={1390}
+							height={1012}
+							priority
+						/>
+					</div>
 				</div>
 			</section>
 
+			{/* How It Works Section */}
 			<section className="relative overflow-hidden border-t border-border py-32">
 				<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
-					<div className="mx-auto mb-12 md:mb-24 max-w-4xl text-center">
+					<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-blue-500/10 dark:bg-blue-700/20 blur-[140px]" />
+					</div>
+
+					<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
 						<div>
-							<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">Power and Flexibility</h2>
-							<p className="mt-6 text-lg text-muted-foreground">
-								Code in the cloud, access free models, get usage analytics and more
+							<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-4">How it works</h2>
+							<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+								It only takes 2 minutes to expand your team by 10x.
 							</p>
 						</div>
 					</div>
 
 					<div className="relative mx-auto md:max-w-[1200px]">
-						<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
-							{cloudFeatures.map((feature, index) => {
-								const Icon = feature.icon
+						<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-3 lg:gap-8">
+							{howItWorks.map((step, index) => {
+								const Icon = step.icon
 								return (
 									<li
 										key={index}
-										className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300">
-										<Icon className="size-6 text-foreground/80" />
+										className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300 hover:shadow-lg">
+										{Icon && <Icon className="size-6 text-foreground/80" />}
 										<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">
-											{feature.title}
+											{step.title}
 										</h3>
-										<p className="leading-relaxed font-light text-muted-foreground">
-											{feature.description}
-										</p>
-										{feature.logos && (
-											<div className="mt-4 flex flex-wrap items-center gap-4">
-												{feature.logos.map((logo) => (
-													<Image
-														key={logo}
-														width={20}
-														height={20}
-														className="w-5 h-5 overflow-clip opacity-50 dark:invert"
-														src={`/logos/${logo.toLowerCase()}.svg`}
-														alt={`${logo} Logo`}
-													/>
-												))}
-											</div>
-										)}
+										<div className="leading-relaxed font-light text-muted-foreground">
+											{step.description}
+										</div>
 									</li>
 								)
 							})}
@@ -217,25 +231,61 @@ export default function CloudPage() {
 				</div>
 			</section>
 
-			<div id="faq"></div>
+			{/* Use Cases Section */}
+			<UseExamplesSection />
+
+			{/* Features Grid */}
+			<section className="py-24 bg-muted/30">
+				<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+					<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-[800px] 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="text-center mb-16">
+						<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">
+							Powering the next generation of software development
+						</h2>
+						<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+							Everything you need to scale your development capacity with AI.
+						</p>
+					</div>
+					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto relative">
+						{features.map((feature, index) => {
+							const Icon = feature.icon
+							return (
+								<div
+									key={index}
+									className="bg-background p-8 rounded-2xl border border-border hover:shadow-lg transition-all duration-300">
+									<div className="bg-violet-100 dark:bg-violet-900/20 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
+										<Icon className="size-6 text-violet-600 dark:text-violet-400" />
+									</div>
+									<h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
+									<p className="text-muted-foreground leading-relaxed">{feature.description}</p>
+								</div>
+							)
+						})}
+					</div>
+				</div>
+			</section>
 
 			{/* CTA Section */}
-			<section className="py-20">
+			<section className="py-24">
 				<div className="container mx-auto px-4 sm:px-6 lg:px-8">
-					<div className="mx-auto max-w-4xl rounded-3xl border border-border/50 bg-gradient-to-br from-blue-500/5 via-cyan-500/5 to-purple-500/5 p-8 text-center shadow-2xl backdrop-blur-xl dark:border-white/20 dark:bg-gradient-to-br dark:from-gray-800 dark:via-gray-900 dark:to-black sm:p-12">
-						<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Try Roo Code Cloud now</h2>
-						<p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">Code from anywhere.</p>
+					<div className="mx-auto max-w-4xl rounded-3xl border border-border/50 bg-gradient-to-br from-violet-500/10 via-purple-500/5 to-blue-500/5 p-8 text-center shadow-2xl backdrop-blur-xl dark:border-white/10 sm:p-16">
+						<h2 className="mb-6 text-3xl font-bold tracking-tight sm:text-4xl">
+							Try a completely new way of working.
+						</h2>
+						<p className="mx-auto mb-10 max-w-2xl text-lg text-muted-foreground">Start for free today.</p>
 						<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
 							<Button
 								size="lg"
-								className="bg-black text-white hover:bg-gray-800 hover:shadow-lg hover:shadow-black/20 dark:bg-white dark:text-black dark:hover:bg-gray-200 dark:hover:shadow-white/20 transition-all duration-300"
+								className="bg-foreground text-background hover:bg-foreground/90 transition-all duration-300"
 								asChild>
 								<a
 									href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
 									target="_blank"
 									rel="noopener noreferrer"
 									className="flex items-center justify-center">
-									Create a free Cloud account
+									Sign up now
 									<ArrowRight className="ml-2 h-4 w-4" />
 								</a>
 							</Button>

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 (
+		<>
+			<StructuredData />
+			<section className="relative flex h-[calc(125vh-theme(spacing.12))] items-center overflow-hidden md:h-[calc(80svh-theme(spacing.12))]">
+				<AnimatedBackground />
+				<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
+					<div className="grid h-full relative gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
+						<div className="flex flex-col justify-center space-y-4 sm:space-y-8">
+							<div>
+								<h1 className="text-4xl font-bold tracking-tight mt-8 text-center md:text-left md:text-4xl lg:text-5xl lg:mt-0">
+									The Open Source AI Coding Assistant for serious work.
+								</h1>
+								<p className="mt-4 max-w-lg text-lg text-muted-foreground text-center md:text-left sm:mt-6">
+									Specialized modes stay on task and ship great code.
+									<br />
+									Fully model-agnostic so you can use the best (or most cost-effective) model for
+									each task.
+								</p>
+								<p className="max-w-lg text-lg text-muted-foreground text-center md:text-left sm:mt-6">
+									Stop chasing this week&apos;s hot new model or CLI tool and go deep with Roo Code.
+								</p>
+							</div>
+							<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
+								<Button
+									size="lg"
+									className="w-full hover:bg-gray-200 dark:bg-white dark:text-black sm:w-auto">
+									<a
+										href={EXTERNAL_LINKS.MARKETPLACE}
+										target="_blank"
+										className="flex w-full items-center justify-center">
+										Install VS Code Extension
+										<ArrowRight className="ml-2" />
+									</a>
+								</Button>
+							</div>
+							<div className="md:max-h-[70px] md:overflow-clip text-center md:text-left pt-6 md:pt-0">
+								<CompanyLogos />
+							</div>
+						</div>
+						<div className="relative flex items-center mx-auto h-full mt-8 lg:mt-0">
+							<div className="flex items-center justify-center">
+								<CodeExample />
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+			<div id="product">
+				<Features />
+			</div>
+			<div id="testimonials">
+				<Testimonials />
+			</div>
+			<div id="faq">
+				<FAQSection />
+			</div>
+			<InstallSection downloads={downloads} />
+		</>
+	)
+}

apps/web-roo-code/src/app/pricing/page.tsx

@@ -194,8 +194,8 @@ export default function PricingPage() {
 											</>
 										)}
 										Inference:{" "}
-										<Link href="/provider/pricing" className="underline hover:no-underline">
-											Roo Provider
+										<Link href="/provider" className="underline hover:no-underline">
+											Roo Provider pricing
 										</Link>{" "}
 										credits or{" "}
 										<abbr title="Bring Your Own Model" className="cursor-help">

apps/web-roo-code/src/app/provider/pricing/page.tsx → 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: (
 			<>
 				<p>This is our very own model provider, optimized to work seamlessly with Roo Code Cloud.</p>
-				<p>
-					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.
-				</p>
-				<p>
-					We also often feature 100% free models which labs share with us for the community to use and provide
-					feedback.
-				</p>
+				<p>You don&apos;t have to use it to use Roo Code, but it&apos;s the easiest way to do it.</p>
 			</>
 		),
 	},
 	{
-		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<ModelWithTotalPrice[]>([])
 	const [loading, setLoading] = useState(true)
 	const [error, setError] = useState<string | null>(null)
@@ -133,13 +134,22 @@ export default function ProviderPricingPage() {
 			<section className="relative overflow-hidden py-16">
 				<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
 					<div className="text-center">
-						<h1 className="text-4xl md:text-5xl font-bold tracking-tight">
-							Roo Code Cloud Provider Pricing
-						</h1>
-						<p className="mx-auto mt-4 max-w-2xl md:text-lg text-muted-foreground">
-							See pricing and features for all models we offer in our selection.
-							<br />
-							You can always bring your own key (
+						<h1 className="text-4xl md:text-5xl font-bold tracking-tight">The Roo Code Cloud Provider</h1>
+						<p className="mx-auto mt-4 max-w-3xl md:text-lg text-muted-foreground">
+							The easiest way to use Roo Code (in the{" "}
+							<Link href="/cloud" className="underline hover:no-underline">
+								<Cloud className="inline size-5 mx-1 -mt-0.5" />
+								Cloud
+							</Link>{" "}
+							or the{" "}
+							<Link href="/extension" className="underline hover:no-underline">
+								<Puzzle className="inline size-5 mx-1 -mt-0.5" />
+								Extension
+							</Link>
+							) with the best free and paid models – no separate accounts, no messing with API keys.
+						</p>
+						<p className="mx-auto mt-2 max-w-2xl md:text-lg text-muted-foreground">
+							And you can always bring your own key (
 							<Link href="#faq" className="underline hover:no-underline">
 								FAQ
 							</Link>
@@ -240,7 +250,7 @@ export default function ProviderPricingPage() {
 					</div>
 					<div className="mx-auto mt-12 grid max-w-5xl gap-8 md:grid-cols-2">
 						{faqs.map((faq, index) => (
-							<div key={index} className="rounded-lg border border-border bg-card p-6">
+							<div key={index} className="rounded-2xl border border-border bg-card p-6">
 								<h3 className="font-semibold">{faq.question}</h3>
 								<p className="mt-2 text-sm text-muted-foreground">{faq.answer}</p>
 							</div>

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 (
-		<header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
+		<header className="sticky font-light top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
 			<div className="container flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
 				<div className="flex items-center">
 					<Link href="/" className="flex items-center">
@@ -34,72 +34,89 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 				</div>
 
 				{/* Desktop Navigation */}
-				<nav className="grow ml-6 hidden text-sm font-medium md:flex md:items-center">
-					<ScrollButton
-						targetId="product"
-						className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground max-lg:hidden">
-						Extension
-					</ScrollButton>
-					<Link
-						href="/cloud"
-						className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
-						Cloud
-					</Link>
-					<a
-						href={EXTERNAL_LINKS.DOCUMENTATION}
-						target="_blank"
-						className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
-						Docs
-					</a>
-					<Link
-						href="/pricing"
-						className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
-						Pricing
-					</Link>
+				<nav className="grow ml-6 hidden text-sm md:flex md:items-center">
+					{/* Product Dropdown */}
+					<div className="relative group">
+						<button className="flex items-center px-4 py-6 gap-1 transition-transform duration-200 hover:scale-105 hover:text-foreground">
+							Product
+							<ChevronDown className="size-3 ml-1 mt-0.5" />
+						</button>
+						<div className="absolute left-0 top-12 mt-2 w-[260px] rounded-md border border-border bg-background py-1 shadow-lg opacity-0 -translate-y-2 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto transition-all duration-200">
+							<Link
+								href="/extension"
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
+								<Puzzle className="size-3 inline mr-2 -mt-0.5" />
+								Roo Code VS Code Extension
+							</Link>
+							<Link
+								href="/cloud"
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
+								<Cloud className="size-3 inline mr-2 -mt-0.5" />
+								Roo Code Cloud
+							</Link>
+							<Link
+								href="/provider"
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
+								<Brain className="size-3 inline mr-2 -mt-0.5" />
+								Roo Code Cloud Provider
+							</Link>
+						</div>
+					</div>
 					{/* Resources Dropdown */}
 					<div className="relative group">
-						<button className="flex items-center px-4 py-6 gap-1 text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
+						<button className="flex items-center px-4 py-6 gap-1 transition-transform duration-200 hover:scale-105 hover:text-foreground">
 							Resources
-							<ChevronDown className="size-3" />
+							<ChevronDown className="size-3 ml-1 mt-0.5" />
 						</button>
 						{/* Dropdown Menu */}
 						<div className="absolute left-0 top-12 mt-2 w-40 rounded-md border border-border bg-background py-1 shadow-lg opacity-0 -translate-y-2 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto transition-all duration-200">
 							<ScrollButton
 								targetId="faq"
-								className="block px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
 								FAQ
 							</ScrollButton>
 							<Link
 								href="/evals"
-								className="block px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
 								Evals
 							</Link>
 							<a
 								href={EXTERNAL_LINKS.DISCORD}
 								target="_blank"
 								rel="noopener noreferrer"
-								className="block px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
 								Discord
 							</a>
 							<a
 								href={EXTERNAL_LINKS.SECURITY}
 								target="_blank"
 								rel="noopener noreferrer"
-								className="block px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground"
 								onClick={() => setIsMenuOpen(false)}>
 								Trust Center
 							</a>
 						</div>
 					</div>
+					<a
+						href={EXTERNAL_LINKS.DOCUMENTATION}
+						target="_blank"
+						className="px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
+						Docs
+					</a>
+					<Link
+						href="/pricing"
+						className="px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
+						Pricing
+					</Link>
 				</nav>
 
-				<div className="hidden md:flex md:items-center md:space-x-4 flex-shrink-0">
+				<div className="hidden md:flex md:items-center md:space-x-4 flex-shrink-0 font-medium">
 					<div className="flex flex-row space-x-2 flex-shrink-0">
 						<ThemeToggle />
 						<Link
 							href={EXTERNAL_LINKS.GITHUB}
 							target="_blank"
-							className="hidden items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground md:flex whitespace-nowrap">
+							className="hidden items-center gap-1.5 text-sm hover:text-foreground md:flex whitespace-nowrap">
 							<RxGithubLogo className="h-4 w-4" />
 							{stars !== null && <span>{stars}</span>}
 						</Link>
@@ -108,20 +125,20 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 						href={EXTERNAL_LINKS.CLOUD_APP_LOGIN}
 						target="_blank"
 						rel="noopener noreferrer"
-						className="hidden items-center gap-1.5 rounded-md py-2 text-sm border border-primary-background px-4 font-medium text-primary-background transition-all duration-200 hover:shadow-lg hover:scale-105 lg:flex">
+						className="hidden items-center gap-1.5 rounded-md py-2 text-sm border border-primary-background px-4 text-primary-background transition-all duration-200 hover:shadow-lg hover:scale-105 lg:flex">
 						Log in
 					</a>
 					<a
 						href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
 						target="_blank"
 						rel="noopener noreferrer"
-						className="hidden items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex">
+						className="hidden items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex">
 						Sign Up
 					</a>
 					<Link
 						href={EXTERNAL_LINKS.MARKETPLACE}
 						target="_blank"
-						className="hidden items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex whitespace-nowrap">
+						className="hidden items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex whitespace-nowrap">
 						<VscVscode className="-mr-[2px] mt-[1px] h-4 w-4" />
 						<span>
 							Install <span className="font-black max-lg:text-xs">&middot;</span>
@@ -147,18 +164,6 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 				<nav className="flex flex-col justify-between h-full pb-16 overflow-y-auto bg-background pointer-events-auto">
 					{/* Main navigation items */}
 					<div className="grow-1 py-4 font-semibold text-lg">
-						<ScrollButton
-							targetId="product"
-							className="block w-full p-5 py-3 text-left text-foreground active:opacity-50"
-							onClick={() => setIsMenuOpen(false)}>
-							Extension
-						</ScrollButton>
-						<Link
-							href="/cloud"
-							className="block w-full p-5 text-left text-foreground active:opacity-50"
-							onClick={() => setIsMenuOpen(false)}>
-							Cloud
-						</Link>
 						<a
 							href={EXTERNAL_LINKS.DOCUMENTATION}
 							target="_blank"
@@ -173,6 +178,31 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 							Pricing
 						</Link>
 
+						{/* Product Section */}
+						<div className="mt-4 w-full">
+							<div className="px-5 pb-2 pt-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+								Product
+							</div>
+							<Link
+								href="/extension"
+								className="block w-full p-5 py-3 text-left text-foreground active:opacity-50"
+								onClick={() => setIsMenuOpen(false)}>
+								Roo Code VS Code Extension
+							</Link>
+							<Link
+								href="/cloud"
+								className="block w-full p-5 py-3 text-left text-foreground active:opacity-50"
+								onClick={() => setIsMenuOpen(false)}>
+								Roo Code Cloud
+							</Link>
+							<Link
+								href="/provider"
+								className="block w-full p-5 py-3 text-left text-foreground active:opacity-50"
+								onClick={() => setIsMenuOpen(false)}>
+								Roo Code Cloud Provider
+							</Link>
+						</div>
+
 						{/* Resources Section */}
 						<div className="mt-4 w-full">
 							<div className="px-5 pb-2 pt-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
@@ -215,7 +245,7 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 							<Link
 								href={EXTERNAL_LINKS.GITHUB}
 								target="_blank"
-								className="inline-flex items-center gap-2 rounded-md p-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+								className="inline-flex items-center gap-2 rounded-md p-3 text-sm transition-colors hover:bg-accent hover:text-foreground"
 								onClick={() => setIsMenuOpen(false)}>
 								<RxGithubLogo className="h-6 w-6" />
 								{stars !== null && <span>{stars}</span>}
@@ -226,7 +256,7 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 							<Link
 								href={EXTERNAL_LINKS.MARKETPLACE}
 								target="_blank"
-								className="inline-flex items-center gap-2 rounded-md p-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+								className="inline-flex items-center gap-2 rounded-md p-3 text-sm transition-colors hover:bg-accent hover:text-foreground"
 								onClick={() => setIsMenuOpen(false)}>
 								<VscVscode className="h-6 w-6" />
 								{downloads !== null && <span>{downloads}</span>}

apps/web-roo-code/src/components/homepage/company-logos.tsx

@@ -12,7 +12,7 @@ export function CompanyLogos() {
 				initial={{ opacity: 0, y: 10 }}
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ duration: 0.5, ease: "easeOut" }}
-				className="text-xs text-muted-foreground text-center mb-2 ">
+				className="text-xs text-muted-foreground mb-2 ">
 				Helping teams ship more at
 			</motion.p>
 			<div className="mt-4 flex flex-wrap items-center gap-6 justify-center sm:justify-start">
@@ -25,7 +25,7 @@ export function CompanyLogos() {
 						<Image
 							width={0}
 							height={0}
-							className="h-[22px] w-auto overflow-clip opacity-70 dark:invert"
+							className="h-[20px] w-auto overflow-clip opacity-70 dark:invert"
 							src={`/logos/${logo.toLowerCase().replace(/\s+/g, "-")}.svg`}
 							alt={`${logo} Logo`}
 						/>

apps/web-roo-code/src/components/homepage/features.tsx

@@ -1,7 +1,17 @@
 "use client"
 
 import { motion } from "framer-motion"
-import { Shield, Users2, ReplaceAll, Keyboard, LucideIcon, CheckCheck, GitPullRequest } from "lucide-react"
+import {
+	Shield,
+	Users2,
+	ReplaceAll,
+	Keyboard,
+	LucideIcon,
+	CheckCheck,
+	GitPullRequest,
+	Boxes,
+	TextSearch,
+} from "lucide-react"
 import Image from "next/image"
 
 export interface Feature {
@@ -21,7 +31,8 @@ export const features: Feature[] = [
 	{
 		icon: ReplaceAll,
 		title: "Model-agnostic",
-		description: "Bring your own provider key or even run local inference — no markup, lock-in, no restrictions.",
+		description:
+			"Use the Roo Code cloud Provider, bring your own provider key or even run local inference — no markup, lock-in, no restrictions.",
 		logos: ["Anthropic", "OpenAI", "Gemini", "Grok", "Qwen", "Kimi", "Mistral", "Ollama"],
 	},
 	{
@@ -31,16 +42,27 @@ export const features: Feature[] = [
 			"Control each action and make Roo as autonomous as you want as you build confidence. Or go YOLO and let it rip.",
 	},
 	{
-		icon: GitPullRequest,
-		title: "Proudly open source",
+		icon: Boxes,
+		title: "Large task coordination",
 		description:
-			"Community-driven and fully auditable: no throttling or surprises about what's happening behind the scenes.",
+			"Orchestrator mode handles large tasks by coordinating tasks for other agents, running for hours and delivering.",
+	},
+	{
+		icon: TextSearch,
+		title: "Performant with large codebases",
+		description: "Configurable integrated semantic search for quicker retrieval in large codebases.",
 	},
 	{
 		icon: Keyboard,
 		title: "Highly customizable",
 		description:
-			"Fine-tune settings for Roo to work for you, like inference context, model properties, slash commands and more.",
+			"Fine-tune settings for Roo to work for you, like inference context, model properties, slash commands and more. Most settings can be global or serialized in your repository.",
+	},
+	{
+		icon: GitPullRequest,
+		title: "Proudly open source",
+		description:
+			"Community-driven and fully auditable: no throttling or surprises about what's happening behind the scenes.",
 	},
 	{
 		icon: Shield,

apps/web-roo-code/src/components/homepage/pillars-section.tsx

@@ -71,14 +71,14 @@ export function PillarsSection() {
 								<div className="text-muted-foreground my-4 space-y-1">
 									<p>
 										&quot;The best model in the world&quot; changes every other week. Providers
-							throttle models with no warning. 1st-party coding agents only work with their own
-										models.
+										throttle models with no warning. 1st-party coding agents only work with their
+										own models.
 									</p>
 									<p>Roo doesn&apos;t care.</p>
 									<p>
 										It works great with 10s of models, from frontier to open weight. Choose from{" "}
-										<Link href="/provider/pricing">the curated selection we offer at-cost</Link> or
-										bring your own key.
+										<Link href="/provider">the curated selection we offer at-cost</Link> or bring
+										your own key.
 									</p>
 								</div>
 								<div className="mt-6">
@@ -164,7 +164,7 @@ export function PillarsSection() {
 										Developer tools need to fit like gloves. Highly tweakable,
 										keyboard-shortcut-heavy gloves.
 									</p>
-								<p>We made Roo thoughtfully configurable to fit your workflow as best it can.</p>
+									<p>We made Roo thoughtfully configurable to fit your workflow as best it can.</p>
 								</div>
 							</div>
 						</div>
@@ -188,7 +188,7 @@ export function PillarsSection() {
 										your data for training.
 									</p>
 									<p>
-							Plus we&apos;re fully SOC2 Type 2 compliant and follow industry-standard
+										Plus we&apos;re fully SOC2 Type 2 compliant and follow industry-standard
 										security practices.
 									</p>
 								</div>