Skip to content

Commit f3a505f

Browse files
brunobergherellipsis-dev[bot]
brunobergher
and
ellipsis-dev[bot]
authored
web: Landing page for the reviewerFirst pass (#8740)
* First pass * SEO * Update apps/web-roo-code/src/app/reviewer/page.tsx Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> --------- Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
1 parent 4e6c717 commit f3a505f

File tree

4 files changed

+392
-0
lines changed

4 files changed

+392
-0
lines changed

‎apps/web-roo-code/public/heroes/agent-reviewer.png‎

442 KB
Loading

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

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
import { ArrowRight, Blocks, BookMarked, ListChecks, LucideIcon } from "lucide-react"
2+
import type { Metadata } from "next"
3+
4+
import { Button } from "@/components/ui"
5+
import { AnimatedBackground } from "@/components/homepage"
6+
import { AgentCarousel } from "@/components/reviewer/agent-carousel"
7+
import { SEO } from "@/lib/seo"
8+
import { EXTERNAL_LINKS } from "@/lib/constants"
9+
import Image from "next/image"
10+
11+
const TITLE = "PR Reviewer · Roo Code Cloud"
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."
14+
const PATH = "/reviewer"
15+
const OG_IMAGE = SEO.ogImage
16+
17+
export const metadata: Metadata = {
18+
title: TITLE,
19+
description: DESCRIPTION,
20+
alternates: {
21+
canonical: `${SEO.url}${PATH}`,
22+
},
23+
openGraph: {
24+
title: TITLE,
25+
description: DESCRIPTION,
26+
url: `${SEO.url}${PATH}`,
27+
siteName: SEO.name,
28+
images: [
29+
{
30+
url: OG_IMAGE.url,
31+
width: OG_IMAGE.width,
32+
height: OG_IMAGE.height,
33+
alt: OG_IMAGE.alt,
34+
},
35+
],
36+
locale: SEO.locale,
37+
type: "website",
38+
},
39+
twitter: {
40+
card: SEO.twitterCard,
41+
title: TITLE,
42+
description: DESCRIPTION,
43+
images: [OG_IMAGE.url],
44+
},
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+
],
61+
}
62+
63+
interface Feature {
64+
icon: LucideIcon
65+
title: string
66+
description: string | React.ReactNode
67+
logos?: string[]
68+
}
69+
70+
const howItWorks: Feature[] = [
71+
{
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+
),
83+
},
84+
{
85+
icon: ListChecks,
86+
title: "Advanced reasoning and workflows",
87+
description:
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.",
89+
},
90+
{
91+
icon: BookMarked,
92+
title: "Fully repository-aware",
93+
description:
94+
"Reviews traverse code ownership, dependency graphs, and historical patterns to surface risk and deviations, not noise.",
95+
},
96+
]
97+
98+
// Workaround for next/image choking on these for some reason
99+
import hero from "/public/heroes/agent-reviewer.png"
100+
101+
export default function AgentReviewerPage() {
102+
return (
103+
<>
104+
<section className="relative flex md:h-[calc(70vh-theme(spacing.12))] items-center overflow-hidden">
105+
<AnimatedBackground />
106+
<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
107+
<div className="grid h-full relative gap-4 md:gap-20 lg:grid-cols-2">
108+
<div className="flex flex-col px-4 justify-center space-y-6 sm:space-y-8">
109+
<div>
110+
<h1 className="text-3xl font-bold tracking-tight mt-8 md:text-left md:text-4xl lg:text-5xl lg:mt-0">
111+
Get comprehensive reviews that save you time, not&nbsp;tokens.
112+
</h1>
113+
<div className="mt-4 max-w-lg space-y-4 text-base text-muted-foreground md:text-left sm:mt-6">
114+
<p>
115+
Regular AI code review tools cap model usage to protect their margins from fixed
116+
monthly prices. That leads to shallow prompts, limited context, and missed
117+
issues.
118+
</p>
119+
<p>
120+
Roo Code&apos;s PR Reviewer flips the model: you bring your own key and leverage
121+
it to the max – to find real issues, increase code quality and keep your PR
122+
queue moving.
123+
</p>
124+
</div>
125+
</div>
126+
<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0 md:items-center">
127+
<Button
128+
size="lg"
129+
className="w-full sm:w-auto backdrop-blur-sm border hover:shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all duration-300">
130+
<a
131+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
132+
target="_blank"
133+
rel="noopener noreferrer"
134+
className="flex w-full items-center justify-center">
135+
Start 14-day Free Trial
136+
<ArrowRight className="ml-2" />
137+
</a>
138+
</Button>
139+
<span className="text-sm text-center md:text-left text-muted-foreground md:ml-2">
140+
(cancel anytime)
141+
</span>
142+
</div>
143+
</div>
144+
<div className="flex items-center justify-end mx-auto h-full mt-8 lg:mt-0">
145+
<div className="md:w-[800px] md:h-[474px] relative overflow-clip">
146+
<div className="block">
147+
<Image
148+
src={hero}
149+
alt="Example of a code review generated by Roo Code PR Reviewer"
150+
className="max-w-full h-auto"
151+
width={800}
152+
height={474}
153+
/>
154+
</div>
155+
</div>
156+
</div>
157+
</div>
158+
</div>
159+
</section>
160+
161+
<section className="relative overflow-hidden border-t border-border py-32">
162+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
163+
<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
164+
<div>
165+
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
166+
Why Roo&apos;s PR Reviewer is so much better
167+
</h2>
168+
</div>
169+
</div>
170+
171+
<div className="relative mx-auto md:max-w-[1200px]">
172+
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
173+
{howItWorks.map((feature, index) => {
174+
const Icon = feature.icon
175+
return (
176+
<li
177+
key={index}
178+
className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300">
179+
<Icon className="size-6 text-foreground/80" />
180+
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">
181+
{feature.title}
182+
</h3>
183+
<div className="leading-relaxed font-light text-muted-foreground space-y-2">
184+
{feature.description}
185+
</div>
186+
{feature.logos && (
187+
<div className="mt-4 flex flex-wrap items-center gap-4">
188+
{feature.logos.map((logo) => (
189+
<Image
190+
key={logo}
191+
width={20}
192+
height={20}
193+
className="w-5 h-5 overflow-clip opacity-50 dark:invert"
194+
src={`/logos/${logo.toLowerCase()}.svg`}
195+
alt={`${logo} Logo`}
196+
/>
197+
))}
198+
</div>
199+
)}
200+
</li>
201+
)
202+
})}
203+
</ul>
204+
</div>
205+
</div>
206+
</section>
207+
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+
237+
{/* CTA Section */}
238+
<section className="py-20">
239+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
240+
<div className="mx-auto max-w-4xl rounded-3xl border border-border/50 bg-gradient-to-br from-blue-500/5 via-cyan-500/5 to-purple-500/5 p-8 text-center shadow-2xl backdrop-blur-xl dark:border-white/20 dark:bg-gradient-to-br dark:from-gray-800 dark:via-gray-900 dark:to-black sm:p-12">
241+
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Stop wasting time.</h2>
242+
<p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
243+
Give Roo Code&apos;s PR Reviewer your model key and turn painful reviews into a tangible
244+
quality advantage.
245+
</p>
246+
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
247+
<Button
248+
size="lg"
249+
className="bg-black text-white hover:bg-gray-800 hover:shadow-lg hover:shadow-black/20 dark:bg-white dark:text-black dark:hover:bg-gray-200 dark:hover:shadow-white/20 transition-all duration-300"
250+
asChild>
251+
<a
252+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
253+
target="_blank"
254+
rel="noopener noreferrer"
255+
className="flex items-center justify-center">
256+
Start 14-day Free Trial
257+
<ArrowRight className="ml-2 h-4 w-4" />
258+
</a>
259+
</Button>
260+
</div>
261+
</div>
262+
</div>
263+
</section>
264+
</>
265+
)
266+
}

‎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)