Skip to content

Commit 9aee31f

Browse files
brunobergherroomote[bot]
brunobergher
and
roomote[bot]
authored
web: Cloud page and updates to Pricing to explain Cloud Agent Credits (#8605)
* Adds mention of Cloud agents to /pricing * Credit pricing FAQ * Skeleton of a /cloud page and more pricing page tweaks * Lint * Update apps/web-roo-code/src/app/cloud/page.tsx Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> * Code review * Updates copy to new credit system * Moves Terms of Service to be backed by a markdown file, easier to read/edit/diff * Updated ToS * Twerm copy tweaks * Cloud screenshot and style adjustments * Style tweaks * Styles --------- Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>
1 parent 270dce5 commit 9aee31f

File tree

8 files changed

+527
-355
lines changed

8 files changed

+527
-355
lines changed

‎apps/web-roo-code/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,10 @@
3131
"react-cookie-consent": "^9.0.0",
3232
"react-dom": "^18.3.1",
3333
"react-icons": "^5.5.0",
34+
"react-markdown": "^9.0.3",
3435
"recharts": "^2.15.3",
36+
"rehype-raw": "^7.0.0",
37+
"remark-gfm": "^4.0.1",
3538
"tailwind-merge": "^3.3.0",
3639
"tailwindcss-animate": "^1.0.7",
3740
"tldts": "^6.1.86",

‎apps/web-roo-code/public/heroes/cloud-screen.png‎

1.06 MB
Loading

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

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
import {
2+
ArrowRight,
3+
ChartLine,
4+
Cloud,
5+
Lock,
6+
LucideIcon,
7+
Megaphone,
8+
MessageCircleQuestionMark,
9+
ReplaceAll,
10+
Router,
11+
Share2,
12+
Users,
13+
} from "lucide-react"
14+
import type { Metadata } from "next"
15+
16+
import { Button } from "@/components/ui"
17+
import { AnimatedBackground } from "@/components/homepage"
18+
import { SEO } from "@/lib/seo"
19+
import { EXTERNAL_LINKS } from "@/lib/constants"
20+
import Image from "next/image"
21+
22+
const TITLE = "Roo Code Cloud"
23+
const DESCRIPTION =
24+
"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."
25+
const PATH = "/cloud"
26+
const OG_IMAGE = SEO.ogImage
27+
28+
export const metadata: Metadata = {
29+
title: TITLE,
30+
description: DESCRIPTION,
31+
alternates: {
32+
canonical: `${SEO.url}${PATH}`,
33+
},
34+
openGraph: {
35+
title: TITLE,
36+
description: DESCRIPTION,
37+
url: `${SEO.url}${PATH}`,
38+
siteName: SEO.name,
39+
images: [
40+
{
41+
url: OG_IMAGE.url,
42+
width: OG_IMAGE.width,
43+
height: OG_IMAGE.height,
44+
alt: OG_IMAGE.alt,
45+
},
46+
],
47+
locale: SEO.locale,
48+
type: "website",
49+
},
50+
twitter: {
51+
card: SEO.twitterCard,
52+
title: TITLE,
53+
description: DESCRIPTION,
54+
images: [OG_IMAGE.url],
55+
},
56+
keywords: [...SEO.keywords, "cloud", "subscription", "cloud agents", "AI cloud development"],
57+
}
58+
59+
interface Feature {
60+
icon: LucideIcon
61+
title: string
62+
description: string
63+
logos?: string[]
64+
}
65+
66+
const cloudFeatures: Feature[] = [
67+
{
68+
icon: Router,
69+
title: "Roomote Control",
70+
description: "Control your IDE from anywhere and keep coding away from your computer.",
71+
},
72+
{
73+
icon: Cloud,
74+
title: "Cloud Agents",
75+
description:
76+
"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.",
77+
},
78+
{
79+
icon: ReplaceAll,
80+
title: "Still Model-agnostic",
81+
description: "Bring your own provider key — no markup, lock-in, no restrictions.",
82+
logos: ["Anthropic", "OpenAI", "Gemini", "Grok", "Qwen", "Kimi", "Mistral", "Ollama"],
83+
},
84+
{
85+
icon: ChartLine,
86+
title: "Usage Analytics",
87+
description: "Detailed token analytics to help you optimize your costs and usage.",
88+
},
89+
{
90+
icon: Megaphone,
91+
title: "Early Model Access",
92+
description: "Get early, free access to new, stealth coding models as they become available.",
93+
},
94+
{
95+
icon: Share2,
96+
title: "Task Sharing",
97+
description: "Share tasks with friends and co-workers and let them follow your work.",
98+
},
99+
{
100+
icon: Users,
101+
title: "Team Management",
102+
description:
103+
"Manage your team and their access to tasks and resources, with centralized billing, analytics and configuration.",
104+
},
105+
{
106+
icon: Lock,
107+
title: "Secure and Private",
108+
description:
109+
"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.",
110+
},
111+
{
112+
icon: MessageCircleQuestionMark,
113+
title: "Priority support",
114+
description: "Get quick help from the people who know Roo best.",
115+
},
116+
]
117+
118+
// Workaround for next/image choking on these for some reason
119+
import screenshotDark from "/public/heroes/cloud-screen.png"
120+
121+
export default function CloudPage() {
122+
return (
123+
<>
124+
<section className="relative flex md:h-[calc(80vh-theme(spacing.12))] items-center overflow-hidden">
125+
<AnimatedBackground />
126+
<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
127+
<div className="grid h-full relative gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
128+
<div className="flex flex-col px-4 justify-center space-y-6 sm:space-y-8">
129+
<div>
130+
<h1 className="text-4xl font-bold tracking-tight mt-8 text-center md:text-left md:text-4xl lg:text-5xl lg:mt-0">
131+
Go <em>way</em> beyond the IDE
132+
</h1>
133+
<p className="mt-4 max-w-md text-lg text-muted-foreground text-center md:text-left sm:mt-6">
134+
Roo Code Cloud gives you (and your team) the tools to take AI-coding to the next
135+
level
136+
</p>
137+
</div>
138+
<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
139+
<Button
140+
variant="outline"
141+
size="lg"
142+
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">
143+
<a
144+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
145+
target="_blank"
146+
rel="noopener noreferrer"
147+
className="flex w-full items-center justify-center">
148+
Start Free Trial
149+
<ArrowRight className="ml-2" />
150+
</a>
151+
</Button>
152+
</div>
153+
</div>
154+
<div className="flex items-center justify-end mx-auto h-full mt-8 lg:mt-0">
155+
<div className="md:w-[900px] md:h-[530px] bg-black dark:bg-white relative rounded-md overflow-clip shadow-2xl">
156+
<div className="block">
157+
<Image
158+
src={screenshotDark}
159+
alt="Screenshot of Roo Code Cloud"
160+
className="max-w-full h-auto"
161+
width={2680}
162+
height={1784}
163+
/>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
</section>
170+
171+
<section className="relative overflow-hidden border-t border-border py-32">
172+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
173+
<div className="mx-auto mb-12 md:mb-24 max-w-4xl text-center">
174+
<div>
175+
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">Power and Flexibility</h2>
176+
<p className="mt-6 text-lg text-muted-foreground">
177+
Code in the cloud, access free models, get usage analytics and more
178+
</p>
179+
</div>
180+
</div>
181+
182+
<div className="relative mx-auto md:max-w-[1200px]">
183+
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
184+
{cloudFeatures.map((feature, index) => {
185+
const Icon = feature.icon
186+
return (
187+
<li
188+
key={index}
189+
className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300">
190+
<Icon className="size-6 text-foreground/80" />
191+
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">
192+
{feature.title}
193+
</h3>
194+
<p className="leading-relaxed font-light text-muted-foreground">
195+
{feature.description}
196+
</p>
197+
{feature.logos && (
198+
<div className="mt-4 flex flex-wrap items-center gap-4">
199+
{feature.logos.map((logo) => (
200+
<Image
201+
key={logo}
202+
width={20}
203+
height={20}
204+
className="w-5 h-5 overflow-clip opacity-50 dark:invert"
205+
src={`/logos/${logo.toLowerCase()}.svg`}
206+
alt={`${logo} Logo`}
207+
/>
208+
))}
209+
</div>
210+
)}
211+
</li>
212+
)
213+
})}
214+
</ul>
215+
</div>
216+
</div>
217+
</section>
218+
219+
<div id="faq"></div>
220+
221+
{/* CTA Section */}
222+
<section className="py-20">
223+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
224+
<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">
225+
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Try Roo Code Cloud now</h2>
226+
<p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">Code from anywhere.</p>
227+
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
228+
<Button
229+
size="lg"
230+
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"
231+
asChild>
232+
<a
233+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
234+
target="_blank"
235+
rel="noopener noreferrer"
236+
className="flex items-center justify-center">
237+
Create a free Cloud account
238+
<ArrowRight className="ml-2 h-4 w-4" />
239+
</a>
240+
</Button>
241+
</div>
242+
</div>
243+
</div>
244+
</section>
245+
</>
246+
)
247+
}

0 commit comments

Comments
 (0)