Skip to content

Commit a8764ae

Browse files
brunobergherbrunobergher
committed
Skeleton of a /cloud page and more pricing page tweaks
1 parent e1dba19 commit a8764ae

File tree

3 files changed

+232
-5
lines changed

3 files changed

+232
-5
lines changed

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

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

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,9 @@ const pricingTiers: PricingTier[] = [
8181
description: "For folks just getting started",
8282
features: [
8383
"Token usage analytics",
84-
"Access your task history across devices",
8584
"Follow your tasks from anywhere",
85+
"Share tasks with friends and co-workers",
86+
"Early access to free AI Models",
8687
"Community support",
8788
],
8889
cta: {
@@ -269,8 +270,11 @@ export default function PricingPage() {
269270
You can run as many as you want, and bring your own inference provider key.
270271
</p>
271272
<p className="mt-2 text-sm text-muted-foreground">
272-
To cover our costs, we charge $0.25 per million tokens used by them (outside of
273-
inference costs).
273+
To cover our infrastructure costs, we charge $0.25 per million tokens used by them
274+
(outside of inference providers).
275+
</p>
276+
<p className="mt-2 text-sm text-muted-foreground">
277+
There are no tiers, no monthly fees, no dumbing-down of models to increase our profit.
274278
</p>
275279
</div>
276280
<div className="rounded-lg border border-border bg-card p-6">

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,13 @@ export function NavBar({ stars, downloads }: NavBarProps) {
3838
<ScrollButton
3939
targetId="product"
4040
className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground max-lg:hidden">
41-
Product
41+
Extension
4242
</ScrollButton>
43+
<Link
44+
href="/cloud"
45+
className="text-muted-foreground px-4 py-6 transition-transform duration-200 hover:scale-105 hover:text-foreground">
46+
Cloud
47+
</Link>
4348
<a
4449
href={EXTERNAL_LINKS.DOCUMENTATION}
4550
target="_blank"
@@ -140,8 +145,14 @@ export function NavBar({ stars, downloads }: NavBarProps) {
140145
targetId="product"
141146
className="block w-full p-5 py-3 text-left text-foreground active:opacity-50"
142147
onClick={() => setIsMenuOpen(false)}>
143-
Product
148+
Extension
144149
</ScrollButton>
150+
<Link
151+
href="/cloud"
152+
className="block w-full p-5 text-left text-foreground active:opacity-50"
153+
onClick={() => setIsMenuOpen(false)}>
154+
Cloud
155+
</Link>
145156
<a
146157
href={EXTERNAL_LINKS.DOCUMENTATION}
147158
target="_blank"

0 commit comments

Comments
 (0)