feat: Add Team Plan prerequisite to Slack page and update copy

- Add Team Plan step with free trial link to onboarding steps
- Update value prop titles to be shorter and consistent
- Change 'humans' to 'you' throughout the page
- Update CTA to mention Team Plan trial
- Update value props: 'Anyone can contribute' instead of 'investigate'
- Remove redundant 'One platform, multiple surfaces' prop

apps/web-roo-code/src/app/slack/slack-cta-section.tsx

@@ -9,10 +9,10 @@ export function SlackCTASection() {
 			<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">
-						Bring your AI team into Slack
+						Start using Roo Code in Slack
 					</h2>
 					<p className="mx-auto mb-10 max-w-2xl text-lg text-muted-foreground">
-						Start collaborating with agents where your team already works. Free to try.
+						Start with a free 14-day Team Plan trial.
 					</p>
 					<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
 						<Button

apps/web-roo-code/src/app/slack/slack-onboarding-steps.tsx

@@ -1,30 +1,46 @@
-import { Settings, Link2, Hash, LucideIcon } from "lucide-react"
+import { Settings, Link2, Hash, CreditCard, LucideIcon } from "lucide-react"
+
+import { EXTERNAL_LINKS } from "@/lib/constants"
 
 interface OnboardingStep {
 	step: number
 	icon: LucideIcon
 	title: string
 	description: string
+	link?: {
+		href: string
+		text: string
+	}
 }
 
 const onboardingSteps: OnboardingStep[] = [
 	{
 		step: 1,
-		icon: Settings,
-		title: "Connect your Slack workspace",
-		description: "Go to your personal or org settings in the top right user menu",
+		icon: CreditCard,
+		title: "Get a Team Plan",
+		description: "Slack requires a Team Plan.",
+		link: {
+			href: EXTERNAL_LINKS.CLOUD_APP_TEAM_TRIAL,
+			text: "Start a free 14-day trial",
+		},
 	},
 	{
 		step: 2,
-		icon: Link2,
-		title: "Authorize the integration",
-		description: "Click on 'Connect' and follow the OAuth process",
+		icon: Settings,
+		title: "Connect Slack",
+		description: 'Go to Organization Settings and click "Connect" under Integrations.',
 	},
 	{
 		step: 3,
+		icon: Link2,
+		title: "Authorize",
+		description: "Complete the OAuth flow to connect your workspace.",
+	},
+	{
+		step: 4,
 		icon: Hash,
-		title: "Add @Roomote to channels",
-		description: "Add the @Roomote bot to the channels where you want it to be available",
+		title: "Add to channels",
+		description: "Add @Roomote to the channels where you want it available.",
 	},
 ]
 
@@ -38,15 +54,15 @@ export function SlackOnboardingSteps() {
 
 				<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
 					<div>
-						<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-4">Get started in 3 steps</h2>
+						<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-4">Get started in minutes</h2>
 						<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-							Connect your Slack workspace and start collaborating with agents in minutes.
+							Connect your Slack workspace and start working with AI agents.
 						</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-3 lg:gap-8">
+					<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-4 lg:gap-8">
 						{onboardingSteps.map((step) => {
 							const Icon = step.icon
 							return (
@@ -64,6 +80,18 @@ export function SlackOnboardingSteps() {
 									<h3 className="mb-3 text-xl font-semibold text-foreground">{step.title}</h3>
 									<div className="leading-relaxed font-light text-muted-foreground">
 										{step.description}
+										{step.link && (
+											<>
+												{" "}
+												<a
+													href={step.link.href}
+													target="_blank"
+													rel="noopener noreferrer"
+													className="text-violet-600 dark:text-violet-400 hover:underline">
+													{step.link.text}
+												</a>
+											</>
+										)}
 									</div>
 								</li>
 							)

apps/web-roo-code/src/app/slack/slack-value-props-section.tsx

@@ -1,4 +1,4 @@
-import { MessageSquare, Brain, GitBranch, Users, GraduationCap, Share2, Shield, LucideIcon } from "lucide-react"
+import { MessageSquare, Brain, GitBranch, Users, GraduationCap, Shield, LucideIcon } from "lucide-react"
 
 interface ValueProp {
 	icon: LucideIcon
@@ -9,43 +9,37 @@ interface ValueProp {
 const valueProps: ValueProp[] = [
 	{
 		icon: MessageSquare,
-		title: "From discussion to shipped feature",
+		title: "Discussion to feature.",
 		description:
 			"Your team discusses a feature in Slack. @Roomote turns the discussion into a plan. Then builds it. All without leaving the conversation.",
 	},
 	{
 		icon: Brain,
-		title: "The agent knows the thread",
+		title: "Full thread context.",
 		description:
 			"@Roomote reads the conversation before responding. Ask 'why is this happening?' after a team discussion and it understands.",
 	},
 	{
 		icon: GitBranch,
-		title: "Chain agents for complex work",
+		title: "Chain agents together.",
 		description:
 			"Start with a Planner to spec it out. Then call the Coder to build it. Multi-step workflows, one Slack thread.",
 	},
 	{
 		icon: Users,
-		title: "Non-technical team members can investigate",
+		title: "Anyone can contribute.",
 		description:
-			"PMs, CSMs, and support can ask @Roomote to explain code or investigate issues. Engineering gets pulled in only when truly needed.",
+			"PMs, CSMs, and Sales can ask @Roomote to explain code, prototype features, or build internal tools. No engineering bottleneck.",
 	},
 	{
 		icon: GraduationCap,
-		title: "Team learning, built in",
+		title: "Team learning, built in.",
 		description: "Public channel mentions show everyone how to leverage agents. Learn by watching.",
 	},
-	{
-		icon: Share2,
-		title: "One platform, multiple surfaces",
-		description:
-			"The same agents that work in your IDE and review your PRs are available in Slack. Different surfaces, same quality.",
-	},
 	{
 		icon: Shield,
-		title: "Safe by design",
-		description: "Agents never touch main/master directly. They produce branches and PRs. Humans approve.",
+		title: "Safe by design.",
+		description: "Agents never touch main/master directly. They produce branches and PRs. You approve.",
 	},
 ]
 
@@ -61,7 +55,7 @@ export function SlackValuePropsSection() {
 						Why teams love working with @Roomote
 					</h2>
 					<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-						Collaboration where it already happens, with AI that understands context.
+						AI agents that understand context, chain together for complex work, and keep you in control.
 					</p>
 				</div>
 				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto relative">

apps/web-roo-code/src/app/slack/thread-to-feature-workflow.tsx

@@ -108,7 +108,7 @@ const workflowSteps: WorkflowStep[] = [
 		step: 4,
 		title: "Review and ship",
 		description: "Review the PR and merge when ready",
-		result: "Human oversight at every step. Agents produce artifacts; humans decide what ships.",
+		result: "You stay in control. Agents produce artifacts; you decide what ships.",
 		messages: [
 			{
 				user: "Roomote",
@@ -140,7 +140,8 @@ function SlackMessageComponent({ message }: { message: SlackMessage }) {
 			</div>
 			<div className="flex-1 min-w-0">
 				<div className="flex items-baseline gap-2 mb-0.5">
-					<span className={`font-semibold text-sm ${message.isBot ? "text-violet-600 dark:text-violet-400" : ""}`}>
+					<span
+						className={`font-semibold text-sm ${message.isBot ? "text-violet-600 dark:text-violet-400" : ""}`}>
 						{message.user}
 					</span>
 					<span className="text-xs text-muted-foreground">{message.role}</span>
@@ -227,7 +228,7 @@ export function ThreadToFeatureWorkflow() {
 				<div className="mt-12 text-center">
 					<p className="text-muted-foreground max-w-2xl mx-auto">
 						<strong className="text-foreground">No context switch required.</strong> Everyone sees the
-						workflow in public channels. Multi-agent handoffs from Planner to Coder. Human oversight at
+						workflow in public channels. Multi-agent handoffs from Planner to Coder. You stay in control at
 						every step.
 					</p>
 				</div>

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

@@ -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",
+	CLOUD_APP_TEAM_TRIAL: "https://app.roocode.com/checkout/team",
 	SUPPORT: "mailto:support@roocode.com",
 	SLACK_INTEGRATION_DOCS: "https://docs.roocode.com/roo-code-cloud/slack-integration",
 }