Skip to content

Commit 9ec0d24

Browse files
brunobergherbrunobergher
committed
First pass at pricing page
1 parent 3368f64 commit 9ec0d24

File tree

2 files changed

+323
-0
lines changed

2 files changed

+323
-0
lines changed

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

Lines changed: 312 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,312 @@
1+
import { Users, Building2, ArrowRight, Star, LucideIcon, Check, Cloud } from "lucide-react"
2+
import type { Metadata } from "next"
3+
import Link from "next/link"
4+
5+
import { Button } from "@/components/ui"
6+
import { AnimatedBackground } from "@/components/homepage"
7+
import { SEO } from "@/lib/seo"
8+
import { EXTERNAL_LINKS } from "@/lib/constants"
9+
10+
const TITLE = "Pricing - Roo Code Cloud"
11+
const DESCRIPTION =
12+
"Simple, transparent pricing for Roo Code Cloud. The VS Code extension is free forever. Choose the cloud plan that fits your needs."
13+
const PATH = "/pricing"
14+
const OG_IMAGE = SEO.ogImage
15+
16+
export const metadata: Metadata = {
17+
title: TITLE,
18+
description: DESCRIPTION,
19+
alternates: {
20+
canonical: `${SEO.url}${PATH}`,
21+
},
22+
openGraph: {
23+
title: TITLE,
24+
description: DESCRIPTION,
25+
url: `${SEO.url}${PATH}`,
26+
siteName: SEO.name,
27+
images: [
28+
{
29+
url: OG_IMAGE.url,
30+
width: OG_IMAGE.width,
31+
height: OG_IMAGE.height,
32+
alt: OG_IMAGE.alt,
33+
},
34+
],
35+
locale: SEO.locale,
36+
type: "website",
37+
},
38+
twitter: {
39+
card: SEO.twitterCard,
40+
title: TITLE,
41+
description: DESCRIPTION,
42+
images: [OG_IMAGE.url],
43+
},
44+
keywords: [
45+
...SEO.keywords,
46+
"pricing",
47+
"plans",
48+
"subscription",
49+
"cloud pricing",
50+
"AI development pricing",
51+
"team pricing",
52+
"enterprise pricing",
53+
],
54+
}
55+
56+
interface PricingTier {
57+
name: string
58+
icon: LucideIcon
59+
price: string
60+
period?: string
61+
cancellation?: string
62+
description: string
63+
featuresIntro?: string
64+
features: string[]
65+
cta: {
66+
text: string
67+
href: string
68+
}
69+
}
70+
71+
const pricingTiers: PricingTier[] = [
72+
{
73+
name: "Cloud Free",
74+
icon: Cloud,
75+
price: "$0",
76+
cancellation: "Cancel anytime",
77+
description: "For folks just getting started",
78+
features: [
79+
"Token usage analytics",
80+
"Access your task history across devices",
81+
"Follow your tasks from anywhere",
82+
"Community support",
83+
],
84+
cta: {
85+
text: "Get started",
86+
href: EXTERNAL_LINKS.CLOUD_APP,
87+
},
88+
},
89+
{
90+
name: "Pro",
91+
icon: Star,
92+
price: "$20",
93+
period: "/month",
94+
cancellation: "Cancel anytime",
95+
description: "For pro Roo coders",
96+
featuresIntro: "Everything in Free, plus:",
97+
features: [
98+
"Roomote Control",
99+
"Start, stop and control tasks from anywhere",
100+
"Course-correct Roo from afar",
101+
"Paid support",
102+
],
103+
cta: {
104+
text: "Start 14-day Free Trial",
105+
href: EXTERNAL_LINKS.CLOUD_APP,
106+
},
107+
},
108+
{
109+
name: "Team",
110+
icon: Users,
111+
price: "$99",
112+
period: "/month",
113+
cancellation: "Cancel anytime",
114+
description: "For AI-forward teams",
115+
featuresIntro: "Everything in Pro, plus:",
116+
features: ["Unlimited users (no per-seat cost)", "Shared configuration & policies", "Centralized billing"],
117+
cta: {
118+
text: "Start 14-day Free Trial",
119+
href: EXTERNAL_LINKS.CLOUD_APP,
120+
},
121+
},
122+
{
123+
name: "Enterprise",
124+
icon: Building2,
125+
price: "Custom",
126+
description: "For complex orgs",
127+
featuresIntro: "Everything in Team, plus:",
128+
features: [
129+
"SAML SSO + SCIM provisioning",
130+
"Custom integrations and terms",
131+
"Security questionnaires and all that fun stuff",
132+
"Dedicated support",
133+
],
134+
cta: {
135+
text: "Talk to Sales",
136+
href: "/enterprise#contact",
137+
},
138+
},
139+
]
140+
141+
export default function PricingPage() {
142+
return (
143+
<>
144+
<AnimatedBackground />
145+
146+
{/* Hero Section */}
147+
<section className="relative overflow-hidden pt-16 pb-12">
148+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
149+
<div className="text-center">
150+
<h1 className="text-5xl font-bold tracking-tight">Roo Code Cloud Pricing</h1>
151+
<p className="mx-auto mt-4 max-w-2xl text-lg text-muted-foreground">
152+
Simple, transparent pricing that scales with your needs.
153+
<br />
154+
Free 14-day trials to kick the tires.
155+
</p>
156+
</div>
157+
</div>
158+
</section>
159+
160+
{/* Free Extension Notice */}
161+
<div className="mx-auto max-w-6xl">
162+
<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">
163+
<p className="text-center">
164+
<strong className="font-semibold">The Roo Code extension is free! </strong>
165+
Roo Code Cloud is an optional service which takes it to the next level.
166+
</p>
167+
</div>
168+
</div>
169+
170+
{/* Pricing Tiers */}
171+
<section className="">
172+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
173+
<div className="mx-auto grid max-w-6xl gap-4 lg:grid-cols-4">
174+
{pricingTiers.map((tier) => {
175+
const Icon = tier.icon
176+
return (
177+
<div
178+
key={tier.name}
179+
className="relative p-6 flex flex-col justify-start bg-background border rounded-2xl transition-all hover:shadow-lg">
180+
<div className="mb-6">
181+
<div className="flex items-center justify-between">
182+
<h3 className="text-2xl font-bold">{tier.name}</h3>
183+
<Icon className="size-6" />
184+
</div>
185+
<p className="text-sm text-muted-foreground">{tier.description}</p>
186+
</div>
187+
188+
<div className="grow mb-8">
189+
<p className="text-sm text-muted-foreground font-light mb-2">
190+
{tier.featuresIntro}&nbsp;
191+
</p>
192+
<ul className="space-y-3 my-0">
193+
{tier.features.map((feature) => (
194+
<li key={feature} className="flex items-start gap-2">
195+
<Check className="mt-0.5 h-4 w-4 text-muted-foreground shrink-0" />
196+
<span className="text-sm">{feature}</span>
197+
</li>
198+
))}
199+
</ul>
200+
</div>
201+
202+
<p className="text-xl my-0 font-bold tracking-tight">
203+
{tier.price}
204+
{tier.period}
205+
</p>
206+
<p className="text-xs text-muted-foreground">{tier.cancellation}&nbsp;</p>
207+
208+
<Button size="lg" className="w-full mt-2 transition-all duration-300" asChild>
209+
<Link href={tier.cta.href} className="flex items-center justify-center">
210+
{tier.cta.text}
211+
</Link>
212+
</Button>
213+
</div>
214+
)
215+
})}
216+
</div>
217+
</div>
218+
</section>
219+
220+
{/* Additional Information */}
221+
<section className="bg-background py-16 my-16 border-t border-b relative z-50">
222+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
223+
<div className="mx-auto max-w-3xl text-center">
224+
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Frequently Asked Questions</h2>
225+
<p className="mt-4 text-lg text-muted-foreground">Got questions about our pricing?</p>
226+
</div>
227+
<div className="mx-auto mt-12 grid max-w-5xl gap-8 md:grid-cols-2">
228+
<div className="rounded-lg border border-border bg-card p-6">
229+
<h3 className="font-semibold">Wait, is Roo Code free or not?</h3>
230+
<p className="mt-2 text-sm text-muted-foreground">
231+
Yes! The Roo Code VS Code extension is open source and free forever. The extension acts
232+
as a powerful AI coding assistant right in your editor. These are the prices for Roo
233+
Code Cloud.
234+
</p>
235+
</div>
236+
<div className="rounded-lg border border-border bg-card p-6">
237+
<h3 className="font-semibold">Is there a free trial?</h3>
238+
<p className="mt-2 text-sm text-muted-foreground">
239+
Yes, all paid plans come with a 14-day free trial.
240+
</p>
241+
</div>
242+
<div className="rounded-lg border border-border bg-card p-6">
243+
<h3 className="font-semibold">Do I need a credit card for the free trial?</h3>
244+
<p className="mt-2 text-sm text-muted-foreground">
245+
Yes, but you won&apos;t be charged until your trial ends. You can cancel anytime with
246+
one click .
247+
</p>
248+
</div>
249+
<div className="rounded-lg border border-border bg-card p-6">
250+
<h3 className="font-semibold">What payment methods do you accept?</h3>
251+
<p className="mt-2 text-sm text-muted-foreground">
252+
We accept all major credit cards, debit cards, and can arrange invoice billing for
253+
Enterprise customers.
254+
</p>
255+
</div>
256+
<div className="rounded-lg border border-border bg-card p-6">
257+
<h3 className="font-semibold">Can I change plans anytime?</h3>
258+
<p className="mt-2 text-sm text-muted-foreground">
259+
Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in
260+
your next billing cycle.
261+
</p>
262+
</div>
263+
</div>
264+
265+
<div className="mt-12 text-center">
266+
<p className="text-muted-foreground">
267+
Still have questions?{" "}
268+
<a
269+
href={EXTERNAL_LINKS.DISCORD}
270+
target="_blank"
271+
rel="noopener noreferrer"
272+
className="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">
273+
Join our Discord
274+
</a>{" "}
275+
or{" "}
276+
<Link
277+
href="/enterprise#contact"
278+
className="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">
279+
contact our sales team
280+
</Link>
281+
</p>
282+
</div>
283+
</div>
284+
</section>
285+
286+
{/* CTA Section */}
287+
<section className="py-20">
288+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
289+
<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">
290+
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Try Roo Code Cloud now</h2>
291+
<p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">Code from anywhere.</p>
292+
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
293+
<Button
294+
size="lg"
295+
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"
296+
asChild>
297+
<a
298+
href={EXTERNAL_LINKS.CLOUD_APP}
299+
target="_blank"
300+
rel="noopener noreferrer"
301+
className="flex items-center justify-center">
302+
Start Free Cloud Trial
303+
<ArrowRight className="ml-2 h-4 w-4" />
304+
</a>
305+
</Button>
306+
</div>
307+
</div>
308+
</div>
309+
</section>
310+
</>
311+
)
312+
}

‎apps/web-roo-code/src/components/chromes/nav-bar.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,11 @@ export function NavBar({ stars, downloads }: NavBarProps) {
5151
className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
5252
Docs
5353
</a>
54+
<Link
55+
href="/pricing"
56+
className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
57+
Pricing
58+
</Link>
5459
{/* Resources Dropdown */}
5560
<div className="relative group">
5661
<button className="flex items-center px-4 py-6 gap-1 text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
@@ -155,6 +160,12 @@ export function NavBar({ stars, downloads }: NavBarProps) {
155160
onClick={() => setIsMenuOpen(false)}>
156161
Docs
157162
</a>
163+
<Link
164+
href="/pricing"
165+
className="block w-full p-5 text-left text-foreground active:opacity-50"
166+
onClick={() => setIsMenuOpen(false)}>
167+
Pricing
168+
</Link>
158169

159170
{/* Resources Section */}
160171
<div className="mt-4 w-full">

0 commit comments

Comments
 (0)