web: New Pricing Page

apps/web-roo-code/src/app/pr-fixer/content-a.tsx

@@ -33,8 +33,9 @@ export const content: AgentPageContent = {
 			],
 		},
 		cta: {
-			buttonText: "Start 14-day Free Trial",
-			disclaimer: "(cancel anytime)",
+			buttonText: "Try now for free",
+			disclaimer: "",
+			tracking: "&agent=pr-fixer",
 		},
 	},
 	howItWorks: {
@@ -89,6 +90,6 @@ export const content: AgentPageContent = {
 	cta: {
 		heading: "Ship fixes, not follow-ups.",
 		description: "Let Roo Code's PR Fixer turn your review feedback into clean, ready-to-merge commits.",
-		buttonText: "Start 14-day Free Trial",
+		buttonText: "Try now for free",
 	},
 }

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

@@ -1,17 +1,16 @@
-import { Users, Building2, ArrowRight, Star, LucideIcon, Check, Cloud, PlugZap } from "lucide-react"
+import { Users, ArrowRight, LucideIcon, Check, SquareTerminal, CornerRightDown, Cloud } from "lucide-react"
 import type { Metadata } from "next"
 import Link from "next/link"
 
 import { Button } from "@/components/ui"
 import { AnimatedBackground } from "@/components/homepage"
-import { ContactForm } from "@/components/enterprise/contact-form"
 import { SEO } from "@/lib/seo"
 import { ogImageUrl } from "@/lib/og"
 import { EXTERNAL_LINKS } from "@/lib/constants"
 
-const TITLE = "Roo Code Cloud Pricing"
+const TITLE = "Roo Code Pricing"
 const DESCRIPTION =
-	"Simple, transparent pricing for Roo Code Cloud. The VS Code extension is free forever. Choose the cloud plan that fits your needs."
+	"Simple, transparent pricing for all Roo Code products. The VS Code extension is free forever. Choose the cloud plan that fits your needs."
 const OG_DESCRIPTION = ""
 const PATH = "/pricing"
 
@@ -61,6 +60,7 @@ interface PricingTier {
 	name: string
 	icon: LucideIcon
 	price: string
+	priceSuffix: string
 	period?: string
 	creditPrice?: string
 	trial?: string
@@ -70,60 +70,57 @@ interface PricingTier {
 	cta: {
 		text: string
 		href?: string
-		isContactForm?: boolean
 	}
 }
 
 const pricingTiers: PricingTier[] = [
 	{
-		name: "Cloud Free",
-		icon: Cloud,
-		price: "$0",
-		description: "For folks just getting started",
-		features: [
-			"Token usage analytics",
-			"Access to the Roo Code Cloud Provider, including early access to free stealth models",
-			"Follow your tasks from anywhere",
-			"Share tasks with friends and co-workers",
-			"Community support",
-		],
+		name: "VS Code Extension",
+		icon: SquareTerminal,
+		price: "Free",
+		priceSuffix: "inference",
+		description: "The best local coding agent",
+		features: ["Unlimited local use", "Bring your own model", "Powerful, extensible modes", "Community support"],
 		cta: {
-			text: "Get started",
-			href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP,
+			text: "Install Now",
+			href: EXTERNAL_LINKS.MARKETPLACE,
 		},
 	},
 	{
-		name: "Cloud Pro",
-		icon: Star,
-		price: "$20",
+		name: "Cloud Free",
+		icon: Cloud,
+		price: "$0",
 		period: "/mo",
-		trial: "Free for 14 days, then",
+		priceSuffix: "credits",
 		creditPrice: `$${PRICE_CREDITS}`,
-		description: "For pro Roo coders",
-		featuresIntro: "Everything in Free +",
+		description: "For AI-forward engineers",
+		featuresIntro: "Go beyond the extension with",
 		features: [
-			"Cloud Agents: Coder, Explainer, Planner, Reviewer, Fixer and more",
-			"Start tasks from Slack",
-			"Roomote Control: Start, stop and control extension tasks from anywhere",
-			"Paid support",
+			"Access to Cloud Agents: fully autonomous development you can call from Slack, Github and the web",
+			"Access to the Roo Code Cloud Provider",
+			"Follow your tasks from anywhere",
+			"Share tasks with friends and co-workers",
+			"Token usage analytics",
+			"Professional support",
 		],
 		cta: {
-			text: "Get started",
-			href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/billing",
+			text: "Sign up",
+			href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP,
 		},
 	},
 	{
 		name: "Cloud Team",
 		icon: Users,
 		price: "$99",
+		priceSuffix: "credits",
 		period: "/mo",
 		creditPrice: `$${PRICE_CREDITS}`,
 		trial: "Free for 14 days, then",
 		description: "For AI-forward teams",
-		featuresIntro: "Everything in Pro +",
+		featuresIntro: "Everything in Free +",
 		features: ["Unlimited users (no per-seat cost)", "Shared configuration & policies", "Centralized billing"],
 		cta: {
-			text: "Get started",
+			text: "Sign up",
 			href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/billing",
 		},
 	},
@@ -135,70 +132,43 @@ export default function PricingPage() {
 			<AnimatedBackground />
 
 			{/* Hero Section */}
-			<section className="relative overflow-hidden pt-16 pb-12">
+			<section className="relative overflow-hidden pt-12 pb-10">
 				<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
 					<div className="text-center">
-						<h1 className="text-5xl font-bold tracking-tight">Roo Code Cloud Pricing</h1>
-						<p className="mx-auto mt-4 max-w-2xl text-lg text-muted-foreground">
-							Simple, transparent pricing that scales with your needs.
-							<br />
-							No inference markups. Free 14-day trials to kick the tires.
+						<h1 className="text-5xl font-bold tracking-tight">Roo Code Pricing</h1>
+						<p className="mt-4 text-lg text-muted-foreground">
+							For all of our products: the Roo Code VS Code Extension, Roo Code Cloud and the Roo Code
+							Cloud inference Provider.
 						</p>
 					</div>
 				</div>
 			</section>
 
-			<div className="mx-6 md:mx-auto max-w-6xl">
-				<div className="rounded-xl p-4 mb-8 text-center bg-gradient-to-r from-blue-500/10 via-cyan-500/10 to-purple-500/10 border border-blue-500/20 dark:border-white/20 ">
-					<p className="text-center">
-						<strong className="font-semibold">The Roo Code extension is totally free! </strong>
-						But Cloud takes you so much further.
-					</p>
-				</div>
-			</div>
-
-			<div className="mx-6 md:mx-auto max-w-6xl p-7 mb-4 relative flex flex-col justify-start bg-background border rounded-2xl transition-all shadow-none hover:shadow-lg">
-				<h3 className="text-xl font-semibold flex items-center gap-2 justify-between">
-					Roo Code Provider
-					<PlugZap className="size-6" />
-				</h3>
-				<div className="text-sm text-muted-foreground space-y-1 mt-2">
-					<p className="">
-						On any plan, you can bring your own provider key or use the built-in Roo Code Cloud provider.
-					</p>
-					<p className="text-sm text-muted-foreground">
-						We offer a select mix of tested state of the art closed and open weight LLMs for you to choose,
-						with no markup.
-						<Link href="/provider/pricing" className="underline hover:no-underline ml-1">
-							See detailed pricing
-						</Link>
-					</p>
-				</div>
-			</div>
-
 			{/* Pricing Tiers */}
 			<section className="">
 				<div className="container mx-auto px-4 sm:px-6 lg:px-8">
-					<div className="mx-auto grid max-w-6xl gap-4 lg:grid-cols-3">
+					<div className="mx-auto grid max-w-6xl gap-4 md:grid-cols-3 md:px-4">
 						{pricingTiers.map((tier) => {
 							const Icon = tier.icon
 							return (
 								<div
 									key={tier.name}
-									className="relative p-6 flex flex-col justify-start bg-background border rounded-2xl transition-all hover:shadow-lg">
+									className="relative group p-6 flex flex-col justify-start bg-background rounded-2xl outline outline-2 outline-border/50 hover:outline-8 transition-all shadow-xl hover:shadow-2xl hover:outline-6">
 									<div className="mb-6">
 										<div className="flex items-center justify-between">
 											<h3 className="text-2xl font-bold tracking-tight">{tier.name}</h3>
-											<Icon className="size-6" />
 										</div>
-										<p className="text-sm text-muted-foreground">{tier.description}</p>
+										<p className="text-sm font-medium">{tier.description}</p>
+									</div>
+									<div className="absolute -right-2 -top-4 rounded-full bg-card shadow-md p-4 outline outline-2 outline-border/50 group-hover:scale-105 group-hover:outline-8 transition-all">
+										<Icon className="size-6" strokeWidth={1.5} />
 									</div>
 
 									<div className="grow mb-8">
 										<p className="text-sm text-muted-foreground font-light mb-2">
 											{tier.featuresIntro}&nbsp;
 										</p>
-										<ul className="space-y-3 my-0 h-[168px]">
+										<ul className="space-y-3 my-0 md:h-[192px]">
 											{tier.features.map((feature) => (
 												<li key={feature} className="flex items-start gap-2">
 													<Check className="mt-0.5 h-4 w-4 text-muted-foreground shrink-0" />
@@ -210,58 +180,65 @@ export default function PricingPage() {
 
 									<p className="text-base font-light">{tier.trial}</p>
 
-									<p className="text-xl my-1 tracking-tight font-light">
+									<p className="text-xl mb-1 tracking-tight font-light">
 										<strong className="font-bold">{tier.price}</strong>
-										{tier.period} + prepaid credits
+										{tier.period} + {tier.priceSuffix}
+										<CornerRightDown className="inline size-4 ml-1 relative top-0.5" />
 									</p>
 
-									<p className="text-sm text-muted-foreground mb-3">
+									<p className="text-sm text-muted-foreground mb-5">
 										{tier.creditPrice && (
 											<>
-												Cloud Agents: {tier.creditPrice}/hour if used
+												Cloud Agents: {tier.creditPrice}/hour in credits
 												<br />
 											</>
 										)}
 										Inference:{" "}
 										<Link href="/provider/pricing" className="underline hover:no-underline">
-											Roo Provider pricing
+											Roo Provider
 										</Link>{" "}
-										or{" "}
-										<abbr title="Bring Your Own Key" className="cursor-help">
-											BYOK
+										credits or{" "}
+										<abbr title="Bring Your Own Model" className="cursor-help">
+											BYOM
 										</abbr>
 									</p>
 
-									{tier.cta.isContactForm ? (
-										<ContactForm
-											formType="demo"
-											buttonText={tier.cta.text}
-											buttonClassName="w-full transition-all duration-300"
-										/>
-									) : (
-										<Button size="lg" className="w-full transition-all duration-300" asChild>
-											<Link href={tier.cta.href!} className="flex items-center justify-center">
-												{tier.cta.text}
-											</Link>
-										</Button>
-									)}
+									<Button size="lg" className="w-full transition-all duration-300" asChild>
+										<Link href={tier.cta.href!} className="flex items-center justify-center">
+											{tier.cta.text}
+											<ArrowRight />
+										</Link>
+									</Button>
+
+									{/* <div className="bg-foreground/20 h-8 absolute -bottom-8 left-1/2 w-[1px]" /> */}
+									<div className="h-[28px] absolute bottom-[-31px] left-1/2 w-[4px] transition-colors bg-gradient-to-b from-transparent to-violet-700/20 group-hover:from-violet-500/50 group-hover:to-violet-500/20" />
 								</div>
 							)
 						})}
 					</div>
-				</div>
 
-				<div className="mx-auto grid max-w-6xl gap-4 mt-4 relative">
-					<p className="bg-background border rounded-2xl p-6 text-center text-sm text-muted-foreground">
-						<Building2 className="inline size-4 mr-2 mb-0.5" />
-						Need SAML, advanced security, custom integrations or terms? Enterprise is for you.
-						<Link
-							href="/enterprise#contact"
-							className="font-medium ml-1 text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">
-							Talk to Sales
-						</Link>
-						.
-					</p>
+					<div className="max-w-6xl mx-auto mt-8 p-7 flex flex-col md:flex-row gap-8 md:gap-4 bg-violet-200/20 outline-violet-700/20 outline outline-1 rounded-2xl transition-all shadow-none">
+						<div className="md:border-r md:pr-4">
+							<h3 className="text-lg font-medium mb-1">Roo Code Provider</h3>
+							<div className="text-sm text-muted-foreground">
+								<p className="">
+									On any plan, you can use your own LLM provider API key or use the built-in Roo Code
+									Cloud provider – curated models to work with Roo with no markup, including the
+									latest Gemini, GPT and Claude. Paid with credits.
+									<Link href="/provider/pricing" className="underline hover:no-underline ml-1">
+										See per model pricing.
+									</Link>
+								</p>
+							</div>
+						</div>
+						<div className="">
+							<h3 className="text-lg font-medium mb-1">Credits</h3>
+							<p className="text-sm text-muted-foreground">
+								Credits are pre-paid, in dollars, and are deducted with usage for inference and Cloud
+								Agent runs. You&apos;re always in control of your spend, no surprises.
+							</p>
+						</div>
+					</div>
 				</div>
 			</section>
 
@@ -337,6 +314,19 @@ export default function PricingPage() {
 								reflected in your next billing cycle.
 							</p>
 						</div>
+						<div className="rounded-xl border border-border bg-card p-6 md:col-span-2">
+							<h3 className="font-semibold">
+								What if I have enterprise-level needs like SAML/SCIM, large-scale deployments, specific
+								integrations and custom terms?
+							</h3>
+							<p className="mt-2 text-sm text-muted-foreground">
+								We have an Enterprise plan which can be a fit. Please{" "}
+								<Link href="/enterprise#contact" className="underline hover:no-underline">
+									reach out to our sales team
+								</Link>{" "}
+								to discuss it.
+							</p>
+						</div>
 					</div>
 
 					<div className="mt-12 text-center">

apps/web-roo-code/src/app/reviewer/content-b.ts

@@ -32,8 +32,9 @@ export const content: AgentPageContent = {
 			],
 		},
 		cta: {
-			buttonText: "Start 14-day Free Trial",
-			disclaimer: "(cancel anytime)",
+			buttonText: "Try now for free",
+			disclaimer: "",
+			tracking: "&agent=reviewer",
 		},
 	},
 	howItWorks: {
@@ -87,6 +88,6 @@ export const content: AgentPageContent = {
 	cta: {
 		heading: "Ready for better code reviews?",
 		description: "Start finding the issues that matter with AI-powered reviews built for depth, not cost-cutting.",
-		buttonText: "Start 14-day Free Trial",
+		buttonText: "Try now for free",
 	},
 }

apps/web-roo-code/src/app/reviewer/content.ts

@@ -32,8 +32,9 @@ export const content: AgentPageContent = {
 			],
 		},
 		cta: {
-			buttonText: "Start 14-day Free Trial",
-			disclaimer: "(cancel anytime)",
+			buttonText: "Try now for free",
+			disclaimer: "",
+			tracking: "&agent=reviewer",
 		},
 	},
 	howItWorks: {
@@ -87,6 +88,6 @@ export const content: AgentPageContent = {
 	cta: {
 		heading: "Ready for better code reviews?",
 		description: "Start finding the issues that matter with AI-powered reviews built for depth, not cost-cutting.",
-		buttonText: "Start 14-day Free Trial",
+		buttonText: "Try now for free",
 	},
 }