Skip to content

Commit d87abe8

Browse files
mp-roocodemrubensroomote
authored
feat(web): redesign Slack page Featured Workflow section with YouTube… (#10880)
Co-authored-by: Matt Rubens <mrubens@users.noreply.github.com> Co-authored-by: Roo Code <roomote@roocode.com>
1 parent 2305888 commit d87abe8

3 files changed

Lines changed: 633 additions & 68 deletions

File tree

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

Lines changed: 84 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,22 @@ import {
55
GitBranch,
66
GraduationCap,
77
Link2,
8-
LucideIcon,
98
MessageSquare,
109
Settings,
1110
Shield,
1211
Slack,
1312
Users,
1413
Zap,
1514
} from "lucide-react"
15+
import type { LucideIcon } from "lucide-react"
1616
import type { Metadata } from "next"
1717

18-
import { Button } from "@/components/ui"
1918
import { AnimatedBackground } from "@/components/homepage"
19+
import { SlackThreadDemo } from "@/components/slack/slack-thread-demo"
20+
import { Button } from "@/components/ui"
21+
import { EXTERNAL_LINKS } from "@/lib/constants"
2022
import { SEO } from "@/lib/seo"
2123
import { ogImageUrl } from "@/lib/og"
22-
import { EXTERNAL_LINKS } from "@/lib/constants"
2324

2425
const TITLE = "Roo Code for Slack"
2526
const DESCRIPTION =
@@ -69,7 +70,7 @@ export const metadata: Metadata = {
6970
// Invalidate cache when a request comes in, at most once every hour.
7071
export const revalidate = 3600
7172

72-
interface ValueProp {
73+
type ValueProp = {
7374
icon: LucideIcon
7475
title: string
7576
description: string
@@ -112,19 +113,17 @@ const VALUE_PROPS: ValueProp[] = [
112113
},
113114
]
114115

115-
interface WorkflowStep {
116+
type WorkflowStep = {
116117
step: number
117118
title: string
118119
description: string
119-
code?: string
120120
}
121121

122122
const WORKFLOW_STEPS: WorkflowStep[] = [
123123
{
124124
step: 1,
125125
title: "Turn the discussion into a plan",
126126
description: "Your team discusses a feature. When it gets complex, summon the Planner agent.",
127-
code: "@Roomote plan out a dark mode feature based on our discussion. Include the toggle, persistence, and system preference detection.",
128127
},
129128
{
130129
step: 2,
@@ -136,7 +135,6 @@ const WORKFLOW_STEPS: WorkflowStep[] = [
136135
step: 3,
137136
title: "Build the plan",
138137
description: "Once the plan looks good, hand it off to the Coder agent to implement.",
139-
code: "@Roomote implement this plan in the frontend-web repo.",
140138
},
141139
{
142140
step: 4,
@@ -145,7 +143,7 @@ const WORKFLOW_STEPS: WorkflowStep[] = [
145143
},
146144
]
147145

148-
interface OnboardingStep {
146+
type OnboardingStep = {
149147
icon: LucideIcon
150148
title: string
151149
description: string
@@ -182,48 +180,54 @@ const ONBOARDING_STEPS: OnboardingStep[] = [
182180
},
183181
]
184182

185-
export default function SlackPage() {
183+
export default function SlackPage(): JSX.Element {
186184
return (
187185
<>
188186
{/* Hero Section */}
189187
<section className="relative flex pt-32 pb-20 items-center overflow-hidden">
190188
<AnimatedBackground />
191189
<div className="container relative flex flex-col items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
192-
<div className="text-center max-w-4xl mx-auto mb-12">
193-
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 text-sm font-medium mb-6">
194-
<Slack className="size-4" />
195-
Powered by Roo Code Cloud
190+
<div className="grid w-full max-w-6xl grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-12">
191+
<div className="text-center lg:text-left">
192+
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 text-sm font-medium mb-6">
193+
<Slack className="size-4" />
194+
Powered by Roo Code Cloud
195+
</div>
196+
<h1 className="text-4xl font-bold tracking-tight mb-6 md:text-5xl lg:text-6xl">
197+
<span className="text-violet-500">@Roomote:</span> Your AI Team in&nbsp;Slack
198+
</h1>
199+
<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto lg:mx-0">
200+
Mention @Roomote in any channel to explain code, plan features, or ship a PR, all
201+
without leaving the conversation.
202+
</p>
203+
<div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
204+
<Button
205+
size="xl"
206+
className="bg-violet-600 hover:bg-violet-700 text-white transition-all duration-300 shadow-lg hover:shadow-violet-500/25"
207+
asChild>
208+
<a
209+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
210+
target="_blank"
211+
rel="noopener noreferrer"
212+
className="flex items-center justify-center">
213+
Get Started
214+
<ArrowRight className="ml-2 size-5" />
215+
</a>
216+
</Button>
217+
<Button variant="outline" size="xl" className="backdrop-blur-sm" asChild>
218+
<a
219+
href={EXTERNAL_LINKS.SLACK_DOCS}
220+
target="_blank"
221+
rel="noopener noreferrer"
222+
className="flex items-center justify-center">
223+
Read the Docs
224+
</a>
225+
</Button>
226+
</div>
196227
</div>
197-
<h1 className="text-4xl font-bold tracking-tight mb-6 md:text-5xl lg:text-6xl">
198-
<span className="text-violet-500">@Roomote:</span> Your AI Team in&nbsp;Slack
199-
</h1>
200-
<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
201-
Mention @Roomote in any channel to explain code, plan features, or ship a PR, all without
202-
leaving the conversation.
203-
</p>
204-
<div className="flex flex-col sm:flex-row gap-4 justify-center">
205-
<Button
206-
size="xl"
207-
className="bg-violet-600 hover:bg-violet-700 text-white transition-all duration-300 shadow-lg hover:shadow-violet-500/25"
208-
asChild>
209-
<a
210-
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
211-
target="_blank"
212-
rel="noopener noreferrer"
213-
className="flex items-center justify-center">
214-
Get Started
215-
<ArrowRight className="ml-2 size-5" />
216-
</a>
217-
</Button>
218-
<Button variant="outline" size="xl" className="backdrop-blur-sm" asChild>
219-
<a
220-
href={EXTERNAL_LINKS.SLACK_DOCS}
221-
target="_blank"
222-
rel="noopener noreferrer"
223-
className="flex items-center justify-center">
224-
Read the Docs
225-
</a>
226-
</Button>
228+
229+
<div className="flex justify-center lg:justify-end">
230+
<SlackThreadDemo />
227231
</div>
228232
</div>
229233
</div>
@@ -264,13 +268,13 @@ export default function SlackPage() {
264268
</section>
265269

266270
{/* Featured Workflow Section */}
267-
<section className="relative overflow-hidden border-t border-border py-32">
271+
<section className="relative overflow-hidden border-t border-border py-24 lg:py-32">
268272
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
269273
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
270274
<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]" />
271275
</div>
272276

273-
<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
277+
<div className="mx-auto mb-12 max-w-5xl text-center">
274278
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
275279
<Zap className="size-4" />
276280
Featured Workflow
@@ -283,29 +287,42 @@ export default function SlackPage() {
283287
</p>
284288
</div>
285289

286-
<div className="relative mx-auto md:max-w-[1000px]">
287-
{/* Workflow Steps */}
288-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
289-
{WORKFLOW_STEPS.map((step) => (
290-
<div
291-
key={step.step}
292-
className="relative border border-border rounded-2xl bg-background p-8 transition-all duration-300 hover:shadow-lg">
293-
<div className="flex items-center gap-3 mb-4">
294-
<div className="bg-blue-100 dark:bg-blue-900/30 w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
295-
{step.step}
290+
<div className="relative mx-auto max-w-6xl">
291+
<div className="grid grid-cols-1 lg:grid-cols-5 gap-8 lg:gap-10 items-center">
292+
{/* YouTube Video Embed */}
293+
<div className="lg:col-span-3 overflow-hidden rounded-2xl border border-border bg-background shadow-lg">
294+
<iframe
295+
className="aspect-video w-full"
296+
src="https://www.youtube-nocookie.com/embed/dJM_8HHGe1E?rel=0"
297+
title="Roo Code Slack Integration Demo"
298+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
299+
referrerPolicy="strict-origin-when-cross-origin"
300+
allowFullScreen
301+
/>
302+
</div>
303+
304+
{/* Workflow Steps */}
305+
<div className="lg:col-span-2 space-y-3">
306+
{WORKFLOW_STEPS.map((step) => (
307+
<div
308+
key={step.step}
309+
className="relative border border-border rounded-xl bg-background p-4 transition-all duration-300 hover:shadow-md hover:border-blue-500/30">
310+
<div className="flex items-start gap-3">
311+
<div className="bg-blue-100 dark:bg-blue-900/30 w-7 h-7 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-xs shrink-0 mt-0.5">
312+
{step.step}
313+
</div>
314+
<div className="min-w-0">
315+
<h3 className="text-base font-semibold text-foreground mb-0.5">
316+
{step.title}
317+
</h3>
318+
<p className="text-sm leading-snug text-muted-foreground">
319+
{step.description}
320+
</p>
321+
</div>
296322
</div>
297-
<h3 className="text-xl font-semibold text-foreground">{step.title}</h3>
298323
</div>
299-
<p className="leading-relaxed font-light text-muted-foreground mb-4">
300-
{step.description}
301-
</p>
302-
{step.code && (
303-
<div className="bg-muted/50 rounded-lg p-4 font-mono text-sm text-foreground/80 border border-border/50">
304-
{step.code}
305-
</div>
306-
)}
307-
</div>
308-
))}
324+
))}
325+
</div>
309326
</div>
310327
</div>
311328
</div>

0 commit comments

Comments
 (0)