Skip to content
This repository was archived by the owner on May 15, 2026. It is now read-only.

Commit a148b0b

Browse files
roomote[bot]roomotebrunobergher
authored
feat: add Cloud Team page with comprehensive team features (#10267)
* feat: add Cloud Team page with features and pricing integration * Copy tweaks * Visual tweaks * Content adjustments * Update apps/web-roo-code/src/app/cloud/team/page.tsx Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> --------- Co-authored-by: Roo Code <roomote@roocode.com> Co-authored-by: Bruno Bergher <bruno@roocode.com> Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>
1 parent 08eed65 commit a148b0b

4 files changed

Lines changed: 311 additions & 7 deletions

File tree

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

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
import {
2+
ArrowRight,
3+
Users,
4+
Settings,
5+
BarChart3,
6+
Lock,
7+
Puzzle,
8+
ShieldCheck,
9+
DollarSign,
10+
Share2,
11+
LucideIcon,
12+
Server,
13+
ServerIcon,
14+
RefreshCcw,
15+
} from "lucide-react"
16+
import type { Metadata } from "next"
17+
18+
import { Button } from "@/components/ui"
19+
import { AnimatedBackground } from "@/components/homepage"
20+
import { SEO } from "@/lib/seo"
21+
import { ogImageUrl } from "@/lib/og"
22+
import { EXTERNAL_LINKS } from "@/lib/constants"
23+
24+
const TITLE = "Roo Code Cloud Team Plan"
25+
const DESCRIPTION =
26+
"Scale your development with team collaboration features. Centralized billing, shared configuration, team-wide analytics, and unified GitHub and Slack integrations."
27+
const OG_DESCRIPTION = "Team collaboration for AI-powered development"
28+
const PATH = "/cloud/team"
29+
30+
export const metadata: Metadata = {
31+
title: TITLE,
32+
description: DESCRIPTION,
33+
alternates: {
34+
canonical: `${SEO.url}${PATH}`,
35+
},
36+
openGraph: {
37+
title: TITLE,
38+
description: DESCRIPTION,
39+
url: `${SEO.url}${PATH}`,
40+
siteName: SEO.name,
41+
images: [
42+
{
43+
url: ogImageUrl(TITLE, OG_DESCRIPTION),
44+
width: 1200,
45+
height: 630,
46+
alt: TITLE,
47+
},
48+
],
49+
locale: SEO.locale,
50+
type: "website",
51+
},
52+
twitter: {
53+
card: SEO.twitterCard,
54+
title: TITLE,
55+
description: DESCRIPTION,
56+
images: [ogImageUrl(TITLE, OG_DESCRIPTION)],
57+
},
58+
keywords: [
59+
...SEO.keywords,
60+
"team",
61+
"collaboration",
62+
"enterprise",
63+
"organization",
64+
"centralized billing",
65+
"team management",
66+
],
67+
}
68+
69+
const keyBenefits = [
70+
{
71+
title: "No Per-Seat Costs",
72+
description: "Add unlimited team members without worrying about escalating per-seat charges.",
73+
icon: Users,
74+
},
75+
{
76+
title: "Centralized Billing",
77+
description:
78+
"Single billing point for all team members using Cloud Agents and the Roo Code Cloud Provider. No more API key management.",
79+
icon: DollarSign,
80+
},
81+
{
82+
title: "Unified Integrations",
83+
description:
84+
"Connect GitHub and Slack once for the entire team. No need for each member to set up individual integrations.",
85+
icon: Settings,
86+
},
87+
{
88+
title: "Team-Wide Visibility",
89+
description: "Access task history and usage analytics across your entire team with granular per-user filters.",
90+
icon: BarChart3,
91+
},
92+
{
93+
title: "Configuration Enforcement",
94+
description:
95+
"Set policies for providers, models, and MCP servers to ensure your team follows organizational standards.",
96+
icon: ShieldCheck,
97+
},
98+
{
99+
title: "Secure Environment Variables",
100+
description:
101+
"Centrally manage secrets, API keys, and environment variables for Cloud Agents in our encrypted secret store.",
102+
icon: Lock,
103+
},
104+
]
105+
106+
interface Feature {
107+
icon: LucideIcon
108+
title: string
109+
description: string
110+
}
111+
112+
const features: Feature[] = [
113+
{
114+
icon: ShieldCheck,
115+
title: "Configuration Enforcement",
116+
description:
117+
"Require team members to log in to the VS Code Extension so policies can be enforced via MDM distribution.",
118+
},
119+
{
120+
icon: Server,
121+
title: "Provider Management",
122+
description:
123+
"Configure and manage the model providers your team can access for both the Extension and Cloud Agents, with API-key-free management.",
124+
},
125+
{
126+
icon: Puzzle,
127+
title: "Centralized Integration",
128+
description:
129+
"Centralized GitHub and Slack connection for the entire team. Agents can review PRs, collaborate on your repositories and respond on your team channels.",
130+
},
131+
{
132+
icon: RefreshCcw,
133+
title: "Extension Task Sync Config",
134+
description:
135+
"Require task syncing from VS Code Extension and control visibility settings for who can view each other's tasks.",
136+
},
137+
{
138+
icon: Share2,
139+
title: "Task Sharing Controls",
140+
description: "Enable per-task sharing with customizable audience controls and link expiration times.",
141+
},
142+
{
143+
icon: ServerIcon,
144+
title: "MCP Server Controls",
145+
description: "Control access to the Roo MCP Marketplace and what custom MCPs to make available to your team.",
146+
},
147+
]
148+
149+
export default function CloudTeamPage() {
150+
return (
151+
<>
152+
{/* Hero Section */}
153+
<section className="relative flex pt-32 pb-20 items-center overflow-hidden">
154+
<AnimatedBackground />
155+
<div className="container relative flex flex-col items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
156+
<div className="text-center max-w-4xl mx-auto mb-12">
157+
<h1 className="text-4xl font-bold tracking-tight mb-6 md:text-6xl">Roo Code Cloud Team</h1>
158+
<h2 className="text-2xl font-bold tracking-tight mb-6 md:text-4xl">
159+
Built for <span className="text-violet-500">AI-Forward Teams</span>
160+
</h2>
161+
<p className="text-xl text-muted-foreground mb-8 mx-auto">
162+
Empower your entire team with confidence with team-wide configuration, centralized billing,
163+
analytics and more. No per-seat costs, no API key juggling.
164+
</p>
165+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
166+
<Button
167+
size="xl"
168+
className="bg-violet-600 hover:bg-violet-700 text-white transition-all duration-300 shadow-lg hover:shadow-violet-500/25"
169+
asChild>
170+
<a
171+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/checkout/team"}
172+
target="_blank"
173+
rel="noopener noreferrer"
174+
className="flex items-center justify-center">
175+
Start 14-Day Free Trial
176+
<ArrowRight className="ml-2 size-5" />
177+
</a>
178+
</Button>
179+
<Button variant="outline" size="xl" className="backdrop-blur-sm" asChild>
180+
<a href="/pricing" className="flex items-center justify-center">
181+
View Pricing
182+
</a>
183+
</Button>
184+
</div>
185+
</div>
186+
</div>
187+
</section>
188+
189+
{/* Key Benefits Section */}
190+
<section className="relative overflow-hidden border-t border-border py-32">
191+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
192+
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
193+
<div className="absolute left-1/2 top-1/2 h-[400px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/10 dark:bg-blue-700/20 blur-[140px]" />
194+
</div>
195+
196+
<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
197+
<div>
198+
<h2 className="text-4xl font-bold tracking-tight mb-4">Why Teams Choose Roo</h2>
199+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
200+
Streamline collaboration and scale your development capacity with team-first features.
201+
</p>
202+
</div>
203+
</div>
204+
205+
<div className="relative mx-auto md:max-w-[1200px]">
206+
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-6">
207+
{keyBenefits.map((benefit, index) => {
208+
const Icon = benefit.icon
209+
return (
210+
<li
211+
key={index}
212+
className="rounded-3xl bg-card outline outline-border/50 hover:outline-8 shadow-xl p-8 h-full w-full group transition-all hover:shadow-2xl hover:shadow-violet-800/30 relative">
213+
{Icon && (
214+
<div className="size-15 p-3 rounded-full flex items-center justify-center shadow-lg absolute -top-4 -right-2 transition-all outline outline-foreground/5 bg-card group-hover:outline-3 group-hover:scale-105">
215+
<Icon className="size-5 text-violet-500" />
216+
</div>
217+
)}
218+
<h3 className="text-xl font-bold tracking-tight mb-2">{benefit.title}</h3>
219+
<div className="text-sm text-muted-foreground leading-relaxed">
220+
{benefit.description}
221+
</div>
222+
</li>
223+
)
224+
})}
225+
</ul>
226+
</div>
227+
</div>
228+
</section>
229+
230+
{/* Features Grid */}
231+
<section className="py-24 bg-muted/30">
232+
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative">
233+
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
234+
<div className="absolute left-1/2 top-1/2 h-[800px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/10 dark:bg-violet-700/20 blur-[140px]" />
235+
</div>
236+
<div className="text-center mb-16">
237+
<h2 className="text-4xl font-bold tracking-tight mb-4">Complete Team Management</h2>
238+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
239+
Access all capabilities from your Organization Settings. Everything you need to manage your
240+
team in one place.
241+
</p>
242+
</div>
243+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto relative">
244+
{features.map((feature, index) => {
245+
const Icon = feature.icon
246+
return (
247+
<div
248+
key={index}
249+
className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300">
250+
<Icon className="size-6 text-foreground/80" />
251+
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">{feature.title}</h3>
252+
<p className="leading-relaxed font-light text-muted-foreground">
253+
{feature.description}
254+
</p>
255+
</div>
256+
)
257+
})}
258+
</div>
259+
</div>
260+
</section>
261+
262+
{/* CTA Section */}
263+
<section className="py-24">
264+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
265+
<div className="mx-auto max-w-4xl rounded-3xl border border-border/50 bg-gradient-to-br from-violet-500/10 via-purple-500/5 to-blue-500/5 p-8 text-center shadow-2xl backdrop-blur-xl dark:border-white/10 sm:p-16">
266+
<h2 className="mb-6 text-3xl font-bold tracking-tight sm:text-4xl">
267+
Ready to scale your team&apos;s development?
268+
</h2>
269+
<p className="mx-auto mb-10 max-w-2xl text-lg text-muted-foreground">
270+
Start your free 14-day trial today. Got questions? Get in touch.
271+
</p>
272+
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
273+
<Button
274+
size="lg"
275+
className="bg-foreground text-background hover:bg-foreground/90 transition-all duration-300"
276+
asChild>
277+
<a
278+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/checkout/team"}
279+
target="_blank"
280+
rel="noopener noreferrer"
281+
className="flex items-center justify-center">
282+
Start Free Trial
283+
<ArrowRight className="ml-2 h-4 w-4" />
284+
</a>
285+
</Button>
286+
<Button variant="outline" size="lg" className="backdrop-blur-sm" asChild>
287+
<a href={EXTERNAL_LINKS.SUPPORT} className="flex items-center justify-center">
288+
Contact Support
289+
</a>
290+
</Button>
291+
</div>
292+
</div>
293+
</div>
294+
</section>
295+
</>
296+
)
297+
}

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ interface PricingTier {
7171
text: string
7272
href?: string
7373
}
74+
learnMoreLink?: string
7475
}
7576

7677
const pricingTiers: PricingTier[] = [
@@ -123,6 +124,7 @@ const pricingTiers: PricingTier[] = [
123124
text: "Sign up",
124125
href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/billing",
125126
},
127+
learnMoreLink: "/cloud/team",
126128
},
127129
]
128130

@@ -164,18 +166,27 @@ export default function PricingPage() {
164166
<Icon className="size-6" strokeWidth={1.5} />
165167
</div>
166168

167-
<div className="grow mb-8">
169+
<div className="grow mb-8 md:h-[214px]">
168170
<p className="text-sm text-muted-foreground font-light mb-2">
169171
{tier.featuresIntro}&nbsp;
170172
</p>
171-
<ul className="space-y-3 my-0 md:h-[192px]">
173+
<ul className="space-y-3 my-0">
172174
{tier.features.map((feature) => (
173175
<li key={feature} className="flex items-start gap-2">
174176
<Check className="mt-0.5 h-4 w-4 text-muted-foreground shrink-0" />
175177
<span className="text-sm">{feature}</span>
176178
</li>
177179
))}
178180
</ul>
181+
{tier.learnMoreLink && (
182+
<div className="mt-2">
183+
<Link
184+
href={tier.learnMoreLink}
185+
className="text-sm text-violet-600 dark:text-violet-400 hover:underline">
186+
Learn more →
187+
</Link>
188+
</div>
189+
)}
179190
</div>
180191

181192
<p className="text-base font-light">{tier.trial}</p>

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,6 @@ export function NavBar({ stars, downloads }: NavBarProps) {
7070
</button>
7171
{/* Dropdown Menu */}
7272
<div className="absolute left-0 top-12 mt-2 w-40 rounded-md border border-border bg-background py-1 shadow-lg opacity-0 -translate-y-2 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto transition-all duration-200">
73-
<ScrollButton
74-
targetId="faq"
75-
className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
76-
FAQ
77-
</ScrollButton>
7873
<Link
7974
href="/evals"
8075
className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">

‎apps/web-roo-code/src/lib/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const EXTERNAL_LINKS = {
2828
CLOUD_APP_SIGNUP: "https://app.roocode.com/sign-up",
2929
CLOUD_APP_SIGNUP_HOME: "https://app.roocode.com/sign-up?redirect_url=/cloud-agents/setup",
3030
CLOUD_APP_SIGNUP_PRO: "https://app.roocode.com/sign-up?redirect_url=/cloud-agents/setup",
31+
SUPPORT: "mailto:support@roocode.com",
3132
}
3233

3334
export const INTERNAL_LINKS = {

0 commit comments

Comments
 (0)