Skip to content

Commit 7a06902

Browse files
brunobergherroomote[bot]ellipsis-dev[bot]mrubens
authored
web: Roo Code Cloud Provider pricing page and changes elsewhere (#9195)
Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> Co-authored-by: Matt Rubens <[email protected]>
1 parent 744f4bd commit 7a06902

File tree

5 files changed

+574
-42
lines changed

5 files changed

+574
-42
lines changed

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

Lines changed: 78 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Users, Building2, ArrowRight, Star, LucideIcon, Check, Cloud } from "lucide-react"
1+
import { Users, Building2, ArrowRight, Star, LucideIcon, Check, Cloud, PlugZap } from "lucide-react"
22
import type { Metadata } from "next"
33
import Link from "next/link"
44

@@ -64,7 +64,6 @@ interface PricingTier {
6464
period?: string
6565
creditPrice?: string
6666
trial?: string
67-
cancellation?: string
6867
description: string
6968
featuresIntro?: string
7069
features: string[]
@@ -80,13 +79,12 @@ const pricingTiers: PricingTier[] = [
8079
name: "Cloud Free",
8180
icon: Cloud,
8281
price: "$0",
83-
cancellation: "Cancel anytime",
8482
description: "For folks just getting started",
8583
features: [
8684
"Token usage analytics",
85+
"Access to the Roo Code Cloud Provider, including early access to free stealth models",
8786
"Follow your tasks from anywhere",
8887
"Share tasks with friends and co-workers",
89-
"Early access to free AI Models",
9088
"Community support",
9189
],
9290
cta: {
@@ -95,18 +93,18 @@ const pricingTiers: PricingTier[] = [
9593
},
9694
},
9795
{
98-
name: "Pro",
96+
name: "Cloud Pro",
9997
icon: Star,
10098
price: "$20",
10199
period: "/mo",
102-
trial: "Free 14-day trial · ",
100+
trial: "Free for 14 days, then",
103101
creditPrice: `$${PRICE_CREDITS}`,
104-
cancellation: "Cancel anytime",
105102
description: "For pro Roo coders",
106103
featuresIntro: "Everything in Free +",
107104
features: [
108-
"Cloud Agents: PR Reviewer and more",
109-
"Roomote Control: Start, stop and control tasks from anywhere",
105+
"Cloud Agents: Coder, Explainer, Planner, Reviewer, Fixer and more",
106+
"Start tasks from Slack",
107+
"Roomote Control: Start, stop and control extension tasks from anywhere",
110108
"Paid support",
111109
],
112110
cta: {
@@ -115,13 +113,12 @@ const pricingTiers: PricingTier[] = [
115113
},
116114
},
117115
{
118-
name: "Team",
116+
name: "Cloud Team",
119117
icon: Users,
120118
price: "$99",
121119
period: "/mo",
122120
creditPrice: `$${PRICE_CREDITS}`,
123-
trial: "Free 14-day trial · ",
124-
cancellation: "Cancel anytime",
121+
trial: "Free for 14 days, then",
125122
description: "For AI-forward teams",
126123
featuresIntro: "Everything in Pro +",
127124
features: ["Unlimited users (no per-seat cost)", "Shared configuration & policies", "Centralized billing"],
@@ -151,12 +148,30 @@ export default function PricingPage() {
151148
</div>
152149
</section>
153150

154-
{/* Free Extension Notice */}
155-
<div className="mx-auto max-w-6xl">
156-
<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">
151+
<div className="mx-6 md:mx-auto max-w-6xl">
152+
<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 ">
157153
<p className="text-center">
158-
<strong className="font-semibold">The Roo Code extension is free! </strong>
159-
Roo Code Cloud is an optional service which takes it to the next level.
154+
<strong className="font-semibold">The Roo Code extension is totally free! </strong>
155+
But Cloud takes you so much further.
156+
</p>
157+
</div>
158+
</div>
159+
160+
<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">
161+
<h3 className="text-xl font-semibold flex items-center gap-2 justify-between">
162+
Roo Code Provider
163+
<PlugZap className="size-6" />
164+
</h3>
165+
<div className="text-sm text-muted-foreground space-y-1 mt-2">
166+
<p className="">
167+
On any plan, you can bring your own provider key or use the built-in Roo Code Cloud provider.
168+
</p>
169+
<p className="text-sm text-muted-foreground">
170+
We offer a select mix of tested state of the art closed and open weight LLMs for you to choose,
171+
with no markup.
172+
<Link href="/provider/pricing" className="underline hover:no-underline ml-1">
173+
See detailed pricing
174+
</Link>
160175
</p>
161176
</div>
162177
</div>
@@ -183,7 +198,7 @@ export default function PricingPage() {
183198
<p className="text-sm text-muted-foreground font-light mb-2">
184199
{tier.featuresIntro}&nbsp;
185200
</p>
186-
<ul className="space-y-3 my-0 h-[148px]">
201+
<ul className="space-y-3 my-0 h-[168px]">
187202
{tier.features.map((feature) => (
188203
<li key={feature} className="flex items-start gap-2">
189204
<Check className="mt-0.5 h-4 w-4 text-muted-foreground shrink-0" />
@@ -193,20 +208,28 @@ export default function PricingPage() {
193208
</ul>
194209
</div>
195210

196-
<p className="text-2xl mt-0 mb-1 tracking-tight">
197-
<strong>{tier.price}</strong>
198-
{tier.period}
199-
</p>
211+
<p className="text-base font-light">{tier.trial}</p>
200212

201-
{tier.creditPrice && (
202-
<p className="text-sm text-muted-foreground mb-1">
203-
+ {tier.creditPrice}/hour for Cloud tasks
204-
</p>
205-
)}
213+
<p className="text-xl my-1 tracking-tight font-light">
214+
<strong className="font-bold">{tier.price}</strong>
215+
{tier.period} + prepaid credits
216+
</p>
206217

207-
<p className="text-xs text-muted-foreground mb-4">
208-
{tier.trial}
209-
{tier.cancellation}
218+
<p className="text-sm text-muted-foreground mb-3">
219+
{tier.creditPrice && (
220+
<>
221+
Cloud Agents: {tier.creditPrice}/hour if used
222+
<br />
223+
</>
224+
)}
225+
Inference:{" "}
226+
<Link href="/provider/pricing" className="underline hover:no-underline">
227+
Roo Provider pricing
228+
</Link>{" "}
229+
or{" "}
230+
<abbr title="Bring Your Own Key" className="cursor-help">
231+
BYOK
232+
</abbr>
210233
</p>
211234

212235
{tier.cta.isContactForm ? (
@@ -249,15 +272,15 @@ export default function PricingPage() {
249272
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Frequently Asked Questions</h2>
250273
</div>
251274
<div className="mx-auto mt-12 grid max-w-5xl gap-8 md:grid-cols-2">
252-
<div className="rounded-lg border border-border bg-card p-6">
275+
<div className="rounded-xl border border-border bg-card p-6">
253276
<h3 className="font-semibold">Wait, is Roo Code free or not?</h3>
254277
<p className="mt-2 text-sm text-muted-foreground">
255278
Yes! The Roo Code VS Code extension is open source and free forever. The extension acts
256279
as a powerful AI coding assistant right in your editor. These are the prices for Roo
257280
Code Cloud.
258281
</p>
259282
</div>
260-
<div className="rounded-lg border border-border bg-card p-6">
283+
<div className="rounded-xl border border-border bg-card p-6">
261284
<h3 className="font-semibold">Is there a free trial?</h3>
262285
<p className="mt-2 text-sm text-muted-foreground">
263286
Yes, all paid plans come with a 14-day free trial to try out functionality.
@@ -266,12 +289,25 @@ export default function PricingPage() {
266289
To use Cloud Agents, you can buy credits.
267290
</p>
268291
</div>
269-
<div className="rounded-lg border border-border bg-card p-6">
270-
<h3 className="font-semibold">How do Cloud Agent credits work?</h3>
292+
<div className="rounded-xl border border-border bg-card p-6">
293+
<h3 className="font-semibold">How do credits work?</h3>
271294
<p className="mt-2 text-sm text-muted-foreground">
272-
Cloud Agents are a version of Roo running in the cloud without depending on your IDE.
273-
You can run as many as you want, and bring your own inference provider key.
295+
Roo Code Cloud credits can be used in two ways:
274296
</p>
297+
<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
298+
<li>To pay for Cloud Agents running time (${PRICE_CREDITS}/hour)</li>
299+
<li>
300+
To pay for AI model inference costs (
301+
<a
302+
href="https://app.roocode.com/provider/pricing"
303+
target="_blank"
304+
rel="noopener noreferrer"
305+
className="underline">
306+
varies by model
307+
</a>
308+
)
309+
</li>
310+
</ul>
275311
<p className="mt-2 text-sm text-muted-foreground">
276312
To cover our infrastructure costs, we charge ${PRICE_CREDITS}/hour while the agent is
277313
running (independent of inference costs).
@@ -280,25 +316,25 @@ export default function PricingPage() {
280316
There are no markups, no tiers, no dumbing-down of models to increase our profit.
281317
</p>
282318
</div>
283-
<div className="rounded-lg border border-border bg-card p-6">
319+
<div className="rounded-xl border border-border bg-card p-6">
284320
<h3 className="font-semibold">Do I need a credit card for the free trial?</h3>
285321
<p className="mt-2 text-sm text-muted-foreground">
286322
Yes, but you won&apos;t be charged until your trial ends, except for credit purchases.
287323
</p>
288324
<p className="mt-2 text-sm text-muted-foreground">You can cancel anytime with one click.</p>
289325
</div>
290-
<div className="rounded-lg border border-border bg-card p-6">
326+
<div className="rounded-xl border border-border bg-card p-6">
291327
<h3 className="font-semibold">What payment methods do you accept?</h3>
292328
<p className="mt-2 text-sm text-muted-foreground">
293329
We accept all major credit cards, debit cards, and can arrange invoice billing for
294330
Enterprise customers.
295331
</p>
296332
</div>
297-
<div className="rounded-lg border border-border bg-card p-6">
298-
<h3 className="font-semibold">Can I change plans anytime?</h3>
333+
<div className="rounded-xl border border-border bg-card p-6">
334+
<h3 className="font-semibold">Can I cancel or change plans?</h3>
299335
<p className="mt-2 text-sm text-muted-foreground">
300-
Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in
301-
your next billing cycle.
336+
Yes, you can upgrade, downgrade or cancel your plan at any time. Changes will be
337+
reflected in your next billing cycle.
302338
</p>
303339
</div>
304340
</div>

0 commit comments

Comments
 (0)