Skip to content

Commit fc1d500

Browse files
brunobergherbrunobergher
committed
SEO
1 parent 8601787 commit fc1d500

File tree

2 files changed

+199
-81
lines changed

2 files changed

+199
-81
lines changed

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

Lines changed: 74 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
1-
import {
2-
ArrowRight,
3-
ChartLine,
4-
Cloud,
5-
Lock,
6-
LucideIcon,
7-
Megaphone,
8-
MessageCircleQuestionMark,
9-
ReplaceAll,
10-
Router,
11-
Share2,
12-
Users,
13-
} from "lucide-react"
1+
import { ArrowRight, Blocks, BookMarked, ListChecks, LucideIcon } from "lucide-react"
142
import type { Metadata } from "next"
153

164
import { Button } from "@/components/ui"
175
import { AnimatedBackground } from "@/components/homepage"
6+
import { AgentCarousel } from "@/components/reviewer/agent-carousel"
187
import { SEO } from "@/lib/seo"
198
import { EXTERNAL_LINKS } from "@/lib/constants"
209
import Image from "next/image"
2110

2211
const TITLE = "PR Reviewer · Roo Code Cloud"
23-
const DESCRIPTION = "TODO, don't merge without this."
12+
const DESCRIPTION =
13+
"Get comprehensive AI-powered PR reviews that save you time, not tokens. Bring your own API key and leverage advanced reasoning, repository-aware analysis, and actionable feedback to keep your PR queue moving."
2414
const PATH = "/reviewer"
2515
const OG_IMAGE = SEO.ogImage
2616

@@ -52,66 +42,56 @@ export const metadata: Metadata = {
5242
description: DESCRIPTION,
5343
images: [OG_IMAGE.url],
5444
},
55-
// TODO, don't merge without this.
56-
keywords: [...SEO.keywords, "cloud", "subscription", "cloud agents", "AI cloud development"],
45+
keywords: [
46+
...SEO.keywords,
47+
"PR reviewer",
48+
"code review",
49+
"pull request review",
50+
"AI code review",
51+
"GitHub PR review",
52+
"automated code review",
53+
"repository-aware review",
54+
"bring your own key",
55+
"BYOK AI",
56+
"code quality",
57+
"development workflow",
58+
"cloud agents",
59+
"AI development team",
60+
],
5761
}
5862

5963
interface Feature {
6064
icon: LucideIcon
6165
title: string
62-
description: string
66+
description: string | React.ReactNode
6367
logos?: string[]
6468
}
6569

66-
const cloudFeatures: Feature[] = [
70+
const howItWorks: Feature[] = [
6771
{
68-
icon: Router,
69-
title: "Roomote Control",
70-
description: "Control your IDE from anywhere and keep coding away from your computer.",
72+
icon: Blocks,
73+
title: "Our agents, your provider keys",
74+
description: (
75+
<>
76+
<p>
77+
We orchestrate the review, optimize the hell out of the prompts, integrate with GitHub, keep you
78+
properly posted.
79+
</p>
80+
<p>We&apos;re thoughtful about token usage, but not incentivized to skimp to grow our margins.</p>
81+
</>
82+
),
7183
},
7284
{
73-
icon: Cloud,
74-
title: "Cloud Agents",
85+
icon: ListChecks,
86+
title: "Advanced reasoning and workflows",
7587
description:
76-
"Specialized agents running in the Cloud to get stuff done while you sleep, with a credit-based system that doesn't lock you in or dumb your models down.",
88+
"We optimize for state-of-the-art reasoning models and leverage powerful workflows (Diff analysis → Context Gathering → Impact Mapping → Contract checks) to produce crisp, actionable comments at the right level.",
7789
},
7890
{
79-
icon: ReplaceAll,
80-
title: "Still Model-agnostic",
81-
description: "Bring your own provider key — no markup, lock-in, no restrictions.",
82-
logos: ["Anthropic", "OpenAI", "Gemini", "Grok", "Qwen", "Kimi", "Mistral", "Ollama"],
83-
},
84-
{
85-
icon: ChartLine,
86-
title: "Usage Analytics",
87-
description: "Detailed token analytics to help you optimize your costs and usage.",
88-
},
89-
{
90-
icon: Megaphone,
91-
title: "Early Model Access",
92-
description: "Get early, free access to new, stealth coding models as they become available.",
93-
},
94-
{
95-
icon: Share2,
96-
title: "Task Sharing",
97-
description: "Share tasks with friends and co-workers and let them follow your work.",
98-
},
99-
{
100-
icon: Users,
101-
title: "Team Management",
102-
description:
103-
"Manage your team and their access to tasks and resources, with centralized billing, analytics and configuration.",
104-
},
105-
{
106-
icon: Lock,
107-
title: "Secure and Private",
91+
icon: BookMarked,
92+
title: "Fully repository-aware",
10893
description:
109-
"Your data is never used for training, and we're SOC2 Type 2 and GDPR compliant, following state-of-the-art security practices, with deep respect for your IP.",
110-
},
111-
{
112-
icon: MessageCircleQuestionMark,
113-
title: "Priority support",
114-
description: "Get quick help from the people who know Roo best.",
94+
"Reviews traverse code ownership, dependency graphs, and historical patterns to surface risk and deviations, not noise.",
11595
},
11696
]
11797

@@ -157,7 +137,7 @@ export default function AgentReviewerPage() {
157137
</a>
158138
</Button>
159139
<span className="text-sm text-center md:text-left text-muted-foreground md:ml-2">
160-
(sdtop anytime)
140+
(cancel anytime)
161141
</span>
162142
</div>
163143
</div>
@@ -180,33 +160,17 @@ export default function AgentReviewerPage() {
180160

181161
<section className="relative overflow-hidden border-t border-border py-32">
182162
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
183-
<div className="mx-auto mb-12 md:mb-24 max-w-4xl text-center">
163+
<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
184164
<div>
185165
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
186-
Roo has its priorities straight
166+
Why Roo&apos;s PR Reviewer is so much better
187167
</h2>
188-
<p className="mt-6 text-lg text-muted-foreground"></p>
189-
</div>
190-
</div>
191-
192-
<div className="relative mx-auto md:max-w-[1200px]"></div>
193-
</div>
194-
</section>
195-
196-
<section className="relative overflow-hidden border-t border-border py-32">
197-
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
198-
<div className="mx-auto mb-12 md:mb-24 max-w-4xl text-center">
199-
<div>
200-
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">Power and Flexibility</h2>
201-
<p className="mt-6 text-lg text-muted-foreground">
202-
Code in the cloud, access free models, get usage analytics and more
203-
</p>
204168
</div>
205169
</div>
206170

207171
<div className="relative mx-auto md:max-w-[1200px]">
208172
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
209-
{cloudFeatures.map((feature, index) => {
173+
{howItWorks.map((feature, index) => {
210174
const Icon = feature.icon
211175
return (
212176
<li
@@ -216,9 +180,9 @@ export default function AgentReviewerPage() {
216180
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">
217181
{feature.title}
218182
</h3>
219-
<p className="leading-relaxed font-light text-muted-foreground">
183+
<div className="leading-relaxed font-light text-muted-foreground space-y-2">
220184
{feature.description}
221-
</p>
185+
</div>
222186
{feature.logos && (
223187
<div className="mt-4 flex flex-wrap items-center gap-4">
224188
{feature.logos.map((logo) => (
@@ -241,6 +205,35 @@ export default function AgentReviewerPage() {
241205
</div>
242206
</section>
243207

208+
<section className="relative overflow-hidden border-t border-border py-32">
209+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
210+
<div className="mx-auto mb-12 max-w-4xl text-center">
211+
<div>
212+
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
213+
The first member of a whole new team
214+
</h2>
215+
216+
<p className="mt-6 text-lg text-muted-foreground">
217+
Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "}
218+
<em>almost everything</em> we do today is mostly through our agents. Now we&apos;re
219+
bringing them to you.
220+
</p>
221+
<p className="mt-2 text-lg text-muted-foreground">
222+
Roo&apos;s PR Reviewer isn&apos;t yet another single-purpose tool to add to your already
223+
complicated stack.
224+
<br />
225+
It&apos;s the first member of your AI-powered development team. More agents are shipping
226+
soon.
227+
</p>
228+
</div>
229+
</div>
230+
231+
<div className="relative mx-auto md:max-w-[1200px]">
232+
<AgentCarousel />
233+
</div>
234+
</div>
235+
</section>
236+
244237
{/* CTA Section */}
245238
<section className="py-20">
246239
<div className="container mx-auto px-4 sm:px-6 lg:px-8">

‎apps/web-roo-code/src/components/reviewer/agent-carousel.tsx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
"use client"
2+
3+
import { useEffect } from "react"
4+
import { motion } from "framer-motion"
5+
import useEmblaCarousel from "embla-carousel-react"
6+
import AutoPlay from "embla-carousel-autoplay"
7+
import { Bug, FileText, Gauge, Languages, Microscope, PocketKnife, TestTube, type LucideIcon } from "lucide-react"
8+
9+
// AI Agent types for the carousel
10+
interface AIAgent {
11+
icon: LucideIcon
12+
name: string
13+
}
14+
15+
const aiAgents: AIAgent[] = [
16+
{ icon: PocketKnife, name: "Generalist" },
17+
{ icon: Bug, name: "Bug Fixer" },
18+
{ icon: TestTube, name: "Test Engineer" },
19+
{ icon: Microscope, name: "Security Auditor" },
20+
{ icon: Gauge, name: "Performance Optimizer" },
21+
{ icon: FileText, name: "Documentation Writer" },
22+
{ icon: Languages, name: "String Translator" },
23+
]
24+
25+
export function AgentCarousel() {
26+
const [emblaRef, emblaApi] = useEmblaCarousel(
27+
{
28+
loop: true,
29+
align: "start",
30+
watchDrag: true,
31+
dragFree: false,
32+
containScroll: false,
33+
duration: 10000,
34+
},
35+
[
36+
AutoPlay({
37+
playOnInit: true,
38+
delay: 0,
39+
stopOnInteraction: false,
40+
stopOnMouseEnter: false,
41+
stopOnFocusIn: false,
42+
}),
43+
],
44+
)
45+
46+
// Continuous scrolling effect
47+
useEffect(() => {
48+
if (!emblaApi) return
49+
50+
const autoPlay = emblaApi?.plugins()?.autoPlay as
51+
| {
52+
play?: () => void
53+
}
54+
| undefined
55+
56+
if (autoPlay?.play) {
57+
autoPlay.play()
58+
}
59+
60+
// Set up continuous scrolling
61+
const interval = setInterval(() => {
62+
if (emblaApi) {
63+
emblaApi.scrollNext()
64+
}
65+
}, 30) // Smooth continuous scroll
66+
67+
return () => clearInterval(interval)
68+
}, [emblaApi])
69+
70+
const containerVariants = {
71+
hidden: { opacity: 0 },
72+
visible: {
73+
opacity: 1,
74+
transition: {
75+
duration: 0.6,
76+
ease: [0.21, 0.45, 0.27, 0.9],
77+
},
78+
},
79+
}
80+
81+
// Duplicate the agents array for seamless infinite scroll
82+
const displayAgents = [...aiAgents, ...aiAgents]
83+
84+
return (
85+
<motion.div
86+
className="relative -mx-4 md:mx-auto max-w-[1400px]"
87+
variants={containerVariants}
88+
initial="hidden"
89+
whileInView="visible"
90+
viewport={{ once: true }}>
91+
{/* Gradient Overlays */}
92+
<div className="absolute inset-y-0 left-0 z-10 w-[10%] bg-gradient-to-r from-background to-transparent pointer-events-none md:w-[15%]" />
93+
<div className="absolute inset-y-0 right-0 z-10 w-[10%] bg-gradient-to-l from-background to-transparent pointer-events-none md:w-[15%]" />
94+
95+
{/* Embla Carousel Container */}
96+
<div className="overflow-hidden" ref={emblaRef}>
97+
<div className="flex pb-4">
98+
{displayAgents.map((agent, index) => {
99+
const Icon = agent.icon
100+
return (
101+
<div
102+
key={`${agent.name}-${index}`}
103+
className="relative min-w-0 flex-[0_0_45%] px-2 md:flex-[0_0_30%] md:px-4 lg:flex-[0_0_15%]">
104+
<div className="group relative py-6 cursor-default">
105+
<div
106+
className="relative flex flex-col items-center justify-center rounded-full w-[150px] h-[150px] border border-border bg-background p-6 transition-all duration-500 ease-out shadow-xl
107+
hover:scale-110 hover:-translate-y-2
108+
hover:shadow-[0_20px_50px_rgba(39,110,226,0.25)] dark:hover:shadow-[0_20px_50px_rgba(59,130,246,0.25)]">
109+
<Icon
110+
strokeWidth={1}
111+
className="size-9 mb-2 text-foreground transition-colors duration-300"
112+
/>
113+
<h3 className="text-center leading-tight tracking-tight font-medium text-foreground/90 transition-colors duration-300 dark:text-foreground">
114+
{agent.name}
115+
</h3>
116+
</div>
117+
</div>
118+
</div>
119+
)
120+
})}
121+
</div>
122+
</div>
123+
</motion.div>
124+
)
125+
}

0 commit comments

Comments
 (0)