mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-08-28 05:27:24 +00:00
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>
This commit is contained in:
roomote[bot]
GitHub
parent
08eed65aff
commit
a148b0b7f3
4 changed files with 311 additions and 7 deletions
297
apps/web-roo-code/src/app/cloud/team/page.tsx
Normal file
297
apps/web-roo-code/src/app/cloud/team/page.tsx
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
import {
|
||||
ArrowRight,
|
||||
Users,
|
||||
Settings,
|
||||
BarChart3,
|
||||
Lock,
|
||||
Puzzle,
|
||||
ShieldCheck,
|
||||
DollarSign,
|
||||
Share2,
|
||||
LucideIcon,
|
||||
Server,
|
||||
ServerIcon,
|
||||
RefreshCcw,
|
||||
} from "lucide-react"
|
||||
import type { Metadata } from "next"
|
||||
|
||||
import { Button } from "@/components/ui"
|
||||
import { AnimatedBackground } from "@/components/homepage"
|
||||
import { SEO } from "@/lib/seo"
|
||||
import { ogImageUrl } from "@/lib/og"
|
||||
import { EXTERNAL_LINKS } from "@/lib/constants"
|
||||
|
||||
const TITLE = "Roo Code Cloud Team Plan"
|
||||
const DESCRIPTION =
|
||||
"Scale your development with team collaboration features. Centralized billing, shared configuration, team-wide analytics, and unified GitHub and Slack integrations."
|
||||
const OG_DESCRIPTION = "Team collaboration for AI-powered development"
|
||||
const PATH = "/cloud/team"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: TITLE,
|
||||
description: DESCRIPTION,
|
||||
alternates: {
|
||||
canonical: `${SEO.url}${PATH}`,
|
||||
},
|
||||
openGraph: {
|
||||
title: TITLE,
|
||||
description: DESCRIPTION,
|
||||
url: `${SEO.url}${PATH}`,
|
||||
siteName: SEO.name,
|
||||
images: [
|
||||
{
|
||||
url: ogImageUrl(TITLE, OG_DESCRIPTION),
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: TITLE,
|
||||
},
|
||||
],
|
||||
locale: SEO.locale,
|
||||
type: "website",
|
||||
},
|
||||
twitter: {
|
||||
card: SEO.twitterCard,
|
||||
title: TITLE,
|
||||
description: DESCRIPTION,
|
||||
images: [ogImageUrl(TITLE, OG_DESCRIPTION)],
|
||||
},
|
||||
keywords: [
|
||||
...SEO.keywords,
|
||||
"team",
|
||||
"collaboration",
|
||||
"enterprise",
|
||||
"organization",
|
||||
"centralized billing",
|
||||
"team management",
|
||||
],
|
||||
}
|
||||
|
||||
const keyBenefits = [
|
||||
{
|
||||
title: "No Per-Seat Costs",
|
||||
description: "Add unlimited team members without worrying about escalating per-seat charges.",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
title: "Centralized Billing",
|
||||
description:
|
||||
"Single billing point for all team members using Cloud Agents and the Roo Code Cloud Provider. No more API key management.",
|
||||
icon: DollarSign,
|
||||
},
|
||||
{
|
||||
title: "Unified Integrations",
|
||||
description:
|
||||
"Connect GitHub and Slack once for the entire team. No need for each member to set up individual integrations.",
|
||||
icon: Settings,
|
||||
},
|
||||
{
|
||||
title: "Team-Wide Visibility",
|
||||
description: "Access task history and usage analytics across your entire team with granular per-user filters.",
|
||||
icon: BarChart3,
|
||||
},
|
||||
{
|
||||
title: "Configuration Enforcement",
|
||||
description:
|
||||
"Set policies for providers, models, and MCP servers to ensure your team follows organizational standards.",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
title: "Secure Environment Variables",
|
||||
description:
|
||||
"Centrally manage secrets, API keys, and environment variables for Cloud Agents in our encrypted secret store.",
|
||||
icon: Lock,
|
||||
},
|
||||
]
|
||||
|
||||
interface Feature {
|
||||
icon: LucideIcon
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const features: Feature[] = [
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Configuration Enforcement",
|
||||
description:
|
||||
"Require team members to log in to the VS Code Extension so policies can be enforced via MDM distribution.",
|
||||
},
|
||||
{
|
||||
icon: Server,
|
||||
title: "Provider Management",
|
||||
description:
|
||||
"Configure and manage the model providers your team can access for both the Extension and Cloud Agents, with API-key-free management.",
|
||||
},
|
||||
{
|
||||
icon: Puzzle,
|
||||
title: "Centralized Integration",
|
||||
description:
|
||||
"Centralized GitHub and Slack connection for the entire team. Agents can review PRs, collaborate on your repositories and respond on your team channels.",
|
||||
},
|
||||
{
|
||||
icon: RefreshCcw,
|
||||
title: "Extension Task Sync Config",
|
||||
description:
|
||||
"Require task syncing from VS Code Extension and control visibility settings for who can view each other's tasks.",
|
||||
},
|
||||
{
|
||||
icon: Share2,
|
||||
title: "Task Sharing Controls",
|
||||
description: "Enable per-task sharing with customizable audience controls and link expiration times.",
|
||||
},
|
||||
{
|
||||
icon: ServerIcon,
|
||||
title: "MCP Server Controls",
|
||||
description: "Control access to the Roo MCP Marketplace and what custom MCPs to make available to your team.",
|
||||
},
|
||||
]
|
||||
|
||||
export default function CloudTeamPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section className="relative flex pt-32 pb-20 items-center overflow-hidden">
|
||||
<AnimatedBackground />
|
||||
<div className="container relative flex flex-col items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-4xl mx-auto mb-12">
|
||||
<h1 className="text-4xl font-bold tracking-tight mb-6 md:text-6xl">Roo Code Cloud Team</h1>
|
||||
<h2 className="text-2xl font-bold tracking-tight mb-6 md:text-4xl">
|
||||
Built for <span className="text-violet-500">AI-Forward Teams</span>
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground mb-8 mx-auto">
|
||||
Empower your entire team with confidence with team-wide configuration, centralized billing,
|
||||
analytics and more. No per-seat costs, no API key juggling.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="xl"
|
||||
className="bg-violet-600 hover:bg-violet-700 text-white transition-all duration-300 shadow-lg hover:shadow-violet-500/25"
|
||||
asChild>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/checkout/team"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center">
|
||||
Start 14-Day Free Trial
|
||||
<ArrowRight className="ml-2 size-5" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button variant="outline" size="xl" className="backdrop-blur-sm" asChild>
|
||||
<a href="/pricing" className="flex items-center justify-center">
|
||||
View Pricing
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Key Benefits Section */}
|
||||
<section className="relative overflow-hidden border-t border-border py-32">
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
|
||||
<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]" />
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold tracking-tight mb-4">Why Teams Choose Roo</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Streamline collaboration and scale your development capacity with team-first features.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mx-auto md:max-w-[1200px]">
|
||||
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-6">
|
||||
{keyBenefits.map((benefit, index) => {
|
||||
const Icon = benefit.icon
|
||||
return (
|
||||
<li
|
||||
key={index}
|
||||
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">
|
||||
{Icon && (
|
||||
<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">
|
||||
<Icon className="size-5 text-violet-500" />
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-xl font-bold tracking-tight mb-2">{benefit.title}</h3>
|
||||
<div className="text-sm text-muted-foreground leading-relaxed">
|
||||
{benefit.description}
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Grid */}
|
||||
<section className="py-24 bg-muted/30">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative">
|
||||
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
|
||||
<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]" />
|
||||
</div>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold tracking-tight mb-4">Complete Team Management</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Access all capabilities from your Organization Settings. Everything you need to manage your
|
||||
team in one place.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto relative">
|
||||
{features.map((feature, index) => {
|
||||
const Icon = feature.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300">
|
||||
<Icon className="size-6 text-foreground/80" />
|
||||
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">{feature.title}</h3>
|
||||
<p className="leading-relaxed font-light text-muted-foreground">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-24">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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">
|
||||
<h2 className="mb-6 text-3xl font-bold tracking-tight sm:text-4xl">
|
||||
Ready to scale your team's development?
|
||||
</h2>
|
||||
<p className="mx-auto mb-10 max-w-2xl text-lg text-muted-foreground">
|
||||
Start your free 14-day trial today. Got questions? Get in touch.
|
||||
</p>
|
||||
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-foreground text-background hover:bg-foreground/90 transition-all duration-300"
|
||||
asChild>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/checkout/team"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center">
|
||||
Start Free Trial
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button variant="outline" size="lg" className="backdrop-blur-sm" asChild>
|
||||
<a href={EXTERNAL_LINKS.SUPPORT} className="flex items-center justify-center">
|
||||
Contact Support
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -71,6 +71,7 @@ interface PricingTier {
|
|||
text: string
|
||||
href?: string
|
||||
}
|
||||
learnMoreLink?: string
|
||||
}
|
||||
|
||||
const pricingTiers: PricingTier[] = [
|
||||
|
|
@ -123,6 +124,7 @@ const pricingTiers: PricingTier[] = [
|
|||
text: "Sign up",
|
||||
href: EXTERNAL_LINKS.CLOUD_APP_SIGNUP + "?redirect_url=/billing",
|
||||
},
|
||||
learnMoreLink: "/cloud/team",
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -164,11 +166,11 @@ export default function PricingPage() {
|
|||
<Icon className="size-6" strokeWidth={1.5} />
|
||||
</div>
|
||||
|
||||
<div className="grow mb-8">
|
||||
<div className="grow mb-8 md:h-[214px]">
|
||||
<p className="text-sm text-muted-foreground font-light mb-2">
|
||||
{tier.featuresIntro}
|
||||
</p>
|
||||
<ul className="space-y-3 my-0 md:h-[192px]">
|
||||
<ul className="space-y-3 my-0">
|
||||
{tier.features.map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-2">
|
||||
<Check className="mt-0.5 h-4 w-4 text-muted-foreground shrink-0" />
|
||||
|
|
@ -176,6 +178,15 @@ export default function PricingPage() {
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{tier.learnMoreLink && (
|
||||
<div className="mt-2">
|
||||
<Link
|
||||
href={tier.learnMoreLink}
|
||||
className="text-sm text-violet-600 dark:text-violet-400 hover:underline">
|
||||
Learn more →
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-base font-light">{tier.trial}</p>
|
||||
|
|
|
|||
|
|
@ -70,11 +70,6 @@ export function NavBar({ stars, downloads }: NavBarProps) {
|
|||
</button>
|
||||
{/* Dropdown Menu */}
|
||||
<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">
|
||||
<ScrollButton
|
||||
targetId="faq"
|
||||
className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
|
||||
FAQ
|
||||
</ScrollButton>
|
||||
<Link
|
||||
href="/evals"
|
||||
className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ export const EXTERNAL_LINKS = {
|
|||
CLOUD_APP_SIGNUP: "https://app.roocode.com/sign-up",
|
||||
CLOUD_APP_SIGNUP_HOME: "https://app.roocode.com/sign-up?redirect_url=/cloud-agents/setup",
|
||||
CLOUD_APP_SIGNUP_PRO: "https://app.roocode.com/sign-up?redirect_url=/cloud-agents/setup",
|
||||
SUPPORT: "mailto:support@roocode.com",
|
||||
}
|
||||
|
||||
export const INTERNAL_LINKS = {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue