Skip to content

Commit b4548f0

Browse files
roomoteroomote
committed
feat: add Cloud Team page with features and pricing integration
1 parent 2bb3755 commit b4548f0

File tree

2 files changed

+393
-0
lines changed

2 files changed

+393
-0
lines changed

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

Lines changed: 381 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,381 @@
1+
import {
2+
ArrowRight,
3+
Users,
4+
Settings,
5+
Github,
6+
Slack,
7+
BarChart3,
8+
Lock,
9+
Puzzle,
10+
ShieldCheck,
11+
UserCog,
12+
DollarSign,
13+
Share2,
14+
LucideIcon,
15+
Server,
16+
FileKey,
17+
Building,
18+
} from "lucide-react"
19+
import type { Metadata } from "next"
20+
21+
import { Button } from "@/components/ui"
22+
import { AnimatedBackground } from "@/components/homepage"
23+
import { SEO } from "@/lib/seo"
24+
import { ogImageUrl } from "@/lib/og"
25+
import { EXTERNAL_LINKS } from "@/lib/constants"
26+
27+
const TITLE = "Roo Code Cloud Team Plan"
28+
const DESCRIPTION =
29+
"Scale your development with team collaboration features. Centralized billing, shared configuration, team-wide analytics, and unified GitHub and Slack integrations."
30+
const OG_DESCRIPTION = "Team collaboration for AI-powered development"
31+
const PATH = "/cloud/team"
32+
33+
export const metadata: Metadata = {
34+
title: TITLE,
35+
description: DESCRIPTION,
36+
alternates: {
37+
canonical: `${SEO.url}${PATH}`,
38+
},
39+
openGraph: {
40+
title: TITLE,
41+
description: DESCRIPTION,
42+
url: `${SEO.url}${PATH}`,
43+
siteName: SEO.name,
44+
images: [
45+
{
46+
url: ogImageUrl(TITLE, OG_DESCRIPTION),
47+
width: 1200,
48+
height: 630,
49+
alt: TITLE,
50+
},
51+
],
52+
locale: SEO.locale,
53+
type: "website",
54+
},
55+
twitter: {
56+
card: SEO.twitterCard,
57+
title: TITLE,
58+
description: DESCRIPTION,
59+
images: [ogImageUrl(TITLE, OG_DESCRIPTION)],
60+
},
61+
keywords: [
62+
...SEO.keywords,
63+
"team",
64+
"collaboration",
65+
"enterprise",
66+
"organization",
67+
"centralized billing",
68+
"team management",
69+
],
70+
}
71+
72+
const keyBenefits = [
73+
{
74+
title: "No Per-Seat Costs",
75+
description: "Add unlimited team members without worrying about escalating per-seat charges.",
76+
icon: Users,
77+
},
78+
{
79+
title: "Centralized Billing",
80+
description:
81+
"Single billing point for all team members using Cloud Agents and the Roo Code Cloud Provider. No more API key management.",
82+
icon: DollarSign,
83+
},
84+
{
85+
title: "Unified Integrations",
86+
description:
87+
"Connect GitHub and Slack once for the entire team. No need for each member to set up individual integrations.",
88+
icon: Settings,
89+
},
90+
{
91+
title: "Team-Wide Visibility",
92+
description: "Access task history and usage analytics across your entire team with granular per-user filters.",
93+
icon: BarChart3,
94+
},
95+
{
96+
title: "Configuration Enforcement",
97+
description:
98+
"Set policies for providers, models, and MCP servers to ensure your team follows organizational standards.",
99+
icon: ShieldCheck,
100+
},
101+
{
102+
title: "Secure Environment Variables",
103+
description:
104+
"Centrally manage secrets, API keys, and environment variables for Cloud Agents in our encrypted secret store.",
105+
icon: Lock,
106+
},
107+
]
108+
109+
interface Feature {
110+
icon: LucideIcon
111+
title: string
112+
description: string
113+
}
114+
115+
const features: Feature[] = [
116+
{
117+
icon: UserCog,
118+
title: "Team Member Management",
119+
description:
120+
"Invite, remove, and manage permissions for team members. Assign Admin or regular member roles to control access.",
121+
},
122+
{
123+
icon: Building,
124+
title: "Organization Profile",
125+
description: "Customize your organization with logo, name, and branding to create a cohesive team identity.",
126+
},
127+
{
128+
icon: Github,
129+
title: "GitHub Integration",
130+
description:
131+
"Centralized GitHub connection for the entire team. Agents can review PRs and collaborate on your repositories.",
132+
},
133+
{
134+
icon: Slack,
135+
title: "Slack Integration",
136+
description:
137+
"Connect Slack once for your organization. Team members can interact with agents directly from channels.",
138+
},
139+
{
140+
icon: Server,
141+
title: "Cloud Model Providers",
142+
description:
143+
"Configure and manage model providers for Cloud Agents with centralized API key management and team-wide access.",
144+
},
145+
{
146+
icon: BarChart3,
147+
title: "Extension Task Sync",
148+
description:
149+
"Require task syncing from VS Code Extension and control visibility settings for who can view each other's tasks.",
150+
},
151+
{
152+
icon: Share2,
153+
title: "Task Sharing Controls",
154+
description: "Enable per-task sharing with customizable audience controls and link expiration times.",
155+
},
156+
{
157+
icon: FileKey,
158+
title: "Environment Variables",
159+
description:
160+
"Securely store connection strings, package manager URLs, keys, and secrets for Cloud Agents in encrypted storage.",
161+
},
162+
{
163+
icon: Puzzle,
164+
title: "Marketplace MCP Management",
165+
description: "Create allow/deny lists for MCPs from the Roo Code marketplace available to team members.",
166+
},
167+
{
168+
icon: Puzzle,
169+
title: "Custom MCP Servers",
170+
description: "Deploy vetted, custom MCP servers and make them available to all team members automatically.",
171+
},
172+
{
173+
icon: Settings,
174+
title: "Extension Provider Control",
175+
description:
176+
"Manage which inference providers team members can use in the VS Code Extension with allow/deny lists.",
177+
},
178+
{
179+
icon: ShieldCheck,
180+
title: "Connection Policy Enforcement",
181+
description:
182+
"Require team members to log in to the VS Code Extension so policies can be enforced via MDM distribution.",
183+
},
184+
]
185+
186+
export default function CloudTeamPage() {
187+
return (
188+
<>
189+
{/* Hero Section */}
190+
<section className="relative flex pt-32 pb-20 items-center overflow-hidden">
191+
<AnimatedBackground />
192+
<div className="container relative flex flex-col items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
193+
<div className="text-center max-w-4xl mx-auto mb-12">
194+
<h1 className="text-4xl font-bold tracking-tight mb-6 md:text-5xl lg:text-6xl">
195+
Built for <span className="text-violet-500">AI-Forward Teams</span>
196+
</h1>
197+
<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
198+
Empower your entire team with autonomous AI agents, centralized billing, and unified
199+
configuration. No per-seat costs, no API key juggling.
200+
</p>
201+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
202+
<Button
203+
size="xl"
204+
className="bg-violet-600 hover:bg-violet-700 text-white transition-all duration-300 shadow-lg hover:shadow-violet-500/25"
205+
asChild>
206+
<a
207+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/checkout/team"}
208+
target="_blank"
209+
rel="noopener noreferrer"
210+
className="flex items-center justify-center">
211+
Start 14-Day Free Trial
212+
<ArrowRight className="ml-2 size-5" />
213+
</a>
214+
</Button>
215+
<Button variant="outline" size="xl" className="backdrop-blur-sm" asChild>
216+
<a href="/pricing" className="flex items-center justify-center">
217+
View Pricing
218+
</a>
219+
</Button>
220+
</div>
221+
</div>
222+
</div>
223+
</section>
224+
225+
{/* Key Benefits Section */}
226+
<section className="relative overflow-hidden border-t border-border py-32">
227+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
228+
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
229+
<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]" />
230+
</div>
231+
232+
<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
233+
<div>
234+
<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-4">Why Teams Choose Roo</h2>
235+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
236+
Streamline collaboration and scale your development capacity with team-first features.
237+
</p>
238+
</div>
239+
</div>
240+
241+
<div className="relative mx-auto md:max-w-[1200px]">
242+
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
243+
{keyBenefits.map((benefit, index) => {
244+
const Icon = benefit.icon
245+
return (
246+
<li
247+
key={index}
248+
className="relative h-full w-full border border-border rounded-2xl bg-background p-8 transition-all duration-300 hover:shadow-lg">
249+
{Icon && (
250+
<div className="bg-violet-100 dark:bg-violet-900/20 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
251+
<Icon className="size-6 text-violet-600 dark:text-violet-400" />
252+
</div>
253+
)}
254+
<h3 className="mb-3 text-xl font-semibold text-foreground">{benefit.title}</h3>
255+
<div className="leading-relaxed font-light text-muted-foreground">
256+
{benefit.description}
257+
</div>
258+
</li>
259+
)
260+
})}
261+
</ul>
262+
</div>
263+
</div>
264+
</section>
265+
266+
{/* Features Grid */}
267+
<section className="py-24 bg-muted/30">
268+
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative">
269+
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
270+
<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]" />
271+
</div>
272+
<div className="text-center mb-16">
273+
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">Complete Team Management</h2>
274+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
275+
Access all capabilities from your Organization Settings. Everything you need to manage your
276+
team in one place.
277+
</p>
278+
</div>
279+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto relative">
280+
{features.map((feature, index) => {
281+
const Icon = feature.icon
282+
return (
283+
<div
284+
key={index}
285+
className="bg-background p-8 rounded-2xl border border-border hover:shadow-lg transition-all duration-300">
286+
<div className="bg-violet-100 dark:bg-violet-900/20 w-12 h-12 rounded-lg flex items-center justify-center mb-6">
287+
<Icon className="size-6 text-violet-600 dark:text-violet-400" />
288+
</div>
289+
<h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
290+
<p className="text-muted-foreground leading-relaxed">{feature.description}</p>
291+
</div>
292+
)
293+
})}
294+
</div>
295+
</div>
296+
</section>
297+
298+
{/* Additional Features Section */}
299+
<section className="py-24 border-t border-border">
300+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
301+
<div className="max-w-4xl mx-auto">
302+
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-8 text-center">
303+
Additional Team Functionality
304+
</h2>
305+
<div className="space-y-6">
306+
<div className="border border-border rounded-xl p-6 bg-background">
307+
<h3 className="text-xl font-semibold mb-3 flex items-center gap-2">
308+
<BarChart3 className="size-5 text-violet-600 dark:text-violet-400" />
309+
Usage Analytics
310+
</h3>
311+
<p className="text-muted-foreground">
312+
Track team-wide activity with detailed analytics. Filter by user to understand
313+
individual usage patterns and optimize costs across your organization.
314+
</p>
315+
</div>
316+
<div className="border border-border rounded-xl p-6 bg-background">
317+
<h3 className="text-xl font-semibold mb-3 flex items-center gap-2">
318+
<Users className="size-5 text-violet-600 dark:text-violet-400" />
319+
Team Task Lists
320+
</h3>
321+
<p className="text-muted-foreground">
322+
View all team tasks in one place from the Home and Agent pages. Track what your team
323+
is working on and collaborate more effectively.
324+
</p>
325+
</div>
326+
</div>
327+
<div className="mt-8 text-center">
328+
<p className="text-muted-foreground">
329+
We&apos;re constantly expanding team functionality. Need something specific?{" "}
330+
<a
331+
href="mailto:[email protected]"
332+
className="text-violet-600 dark:text-violet-400 hover:underline">
333+
Get in touch with us
334+
</a>
335+
.
336+
</p>
337+
</div>
338+
</div>
339+
</div>
340+
</section>
341+
342+
{/* CTA Section */}
343+
<section className="py-24">
344+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
345+
<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">
346+
<h2 className="mb-6 text-3xl font-bold tracking-tight sm:text-4xl">
347+
Ready to scale your team&apos;s development?
348+
</h2>
349+
<p className="mx-auto mb-10 max-w-2xl text-lg text-muted-foreground">
350+
Start your free 14-day trial today. No credit card required for trial access.
351+
</p>
352+
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
353+
<Button
354+
size="lg"
355+
className="bg-foreground text-background hover:bg-foreground/90 transition-all duration-300"
356+
asChild>
357+
<a
358+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/checkout/team"}
359+
target="_blank"
360+
rel="noopener noreferrer"
361+
className="flex items-center justify-center">
362+
Start Free Trial
363+
<ArrowRight className="ml-2 h-4 w-4" />
364+
</a>
365+
</Button>
366+
<Button variant="outline" size="lg" className="backdrop-blur-sm" asChild>
367+
<a
368+
href={EXTERNAL_LINKS.DISCORD}
369+
target="_blank"
370+
rel="noopener noreferrer"
371+
className="flex items-center justify-center">
372+
Talk to Sales
373+
</a>
374+
</Button>
375+
</div>
376+
</div>
377+
</div>
378+
</section>
379+
</>
380+
)
381+
}

0 commit comments

Comments
 (0)