Skip to content

Commit 7276ce0

Browse files
roomoteroomote
committed
feat: add new PR Reviewer page with alternative messaging
- Created /pr-reviewer route with new page component - Implemented PRReviewerContent with edgier, more direct messaging - Focus on AI-generated code risks and security concerns - Uses same structure as /reviewer but with completely different copy - Emphasizes paranoid senior developer angle - Highlights specific issues: JWT bugs, regex backtracking, billing errors
1 parent 5fb36d9 commit 7276ce0

File tree

2 files changed

+398
-0
lines changed

2 files changed

+398
-0
lines changed

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

Lines changed: 333 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,333 @@
1+
"use client"
2+
3+
import { ArrowRight, AlertTriangle, Bot, Shield, Brain, Zap, CheckCircle2 } from "lucide-react"
4+
import Image from "next/image"
5+
6+
import { Button } from "@/components/ui"
7+
import { AnimatedBackground } from "@/components/homepage"
8+
import { AgentCarousel } from "@/components/reviewer/agent-carousel"
9+
import { EXTERNAL_LINKS } from "@/lib/constants"
10+
import { trackGoogleAdsConversion } from "@/lib/analytics/google-ads"
11+
12+
// Workaround for next/image choking on these for some reason
13+
import hero from "/public/heroes/agent-reviewer.png"
14+
15+
export function PRReviewerContent() {
16+
return (
17+
<>
18+
{/* Hero Section */}
19+
<section className="relative flex md:h-[calc(70vh-theme(spacing.12))] items-center overflow-hidden">
20+
<AnimatedBackground />
21+
<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
22+
<div className="grid h-full relative gap-4 md:gap-20 lg:grid-cols-2">
23+
<div className="flex flex-col px-4 justify-center space-y-6 sm:space-y-8">
24+
<div>
25+
<h1 className="text-3xl font-bold tracking-tight mt-8 md:text-left md:text-4xl lg:text-5xl lg:mt-0">
26+
Your AI wrote the code. Roo made sure it&apos;s safe to ship.
27+
</h1>
28+
<div className="mt-4 max-w-lg space-y-4 text-base text-muted-foreground md:text-left sm:mt-6">
29+
<p>
30+
AI-generated commits are flooding PRs. Some are fine. Some disable JWT
31+
verification. Roo PR Reviewer catches what slipped through before it hits prod.
32+
</p>
33+
<blockquote className="italic border-l-4 border-muted-foreground/30 pl-4 text-sm">
34+
&quot;Bold strategy: a trust-based JWT system. What could possibly go
35+
wrong?&quot;
36+
</blockquote>
37+
</div>
38+
</div>
39+
<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0 md:items-center">
40+
<Button
41+
size="lg"
42+
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"
43+
asChild>
44+
<a
45+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
46+
target="_blank"
47+
rel="noopener noreferrer"
48+
onClick={trackGoogleAdsConversion}
49+
className="flex w-full items-center justify-center">
50+
Try Roo Reviewer Free
51+
<ArrowRight className="ml-2" />
52+
</a>
53+
</Button>
54+
</div>
55+
</div>
56+
<div className="flex items-center justify-end mx-auto h-full mt-8 lg:mt-0">
57+
<div className="md:w-[800px] md:h-[474px] relative overflow-clip">
58+
<div className="block">
59+
<Image
60+
src={hero}
61+
alt="Example of a code review generated by Roo Code PR Reviewer"
62+
className="max-w-full h-auto"
63+
width={800}
64+
height={474}
65+
/>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</section>
72+
73+
{/* The Problem Section */}
74+
<section className="relative overflow-hidden border-t border-border py-20">
75+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
76+
<div className="mx-auto max-w-4xl">
77+
<div className="flex items-center gap-3 mb-6">
78+
<AlertTriangle className="size-8 text-amber-500" />
79+
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">The Problem</h2>
80+
</div>
81+
<div className="space-y-4 text-lg text-muted-foreground">
82+
<p>
83+
AI&apos;s writing more code than ever — and most of it <em>looks</em> right. But beneath
84+
that green diff are:
85+
</p>
86+
<ul className="space-y-3 ml-6">
87+
<li className="flex items-start gap-2">
88+
<span className="text-red-500 mt-1">•</span>
89+
<span>silent security holes</span>
90+
</li>
91+
<li className="flex items-start gap-2">
92+
<span className="text-red-500 mt-1">•</span>
93+
<span>rounding bugs that eat customer money</span>
94+
</li>
95+
<li className="flex items-start gap-2">
96+
<span className="text-red-500 mt-1">•</span>
97+
<span>regexes that backtrack until your weekend&apos;s gone</span>
98+
</li>
99+
</ul>
100+
<p className="font-semibold text-foreground pt-4">
101+
Your team is reviewing more code than ever, but catching less.
102+
</p>
103+
</div>
104+
</div>
105+
</div>
106+
</section>
107+
108+
{/* The Roo Fix Section */}
109+
<section className="relative overflow-hidden border-t border-border py-20">
110+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
111+
<div className="mx-auto max-w-4xl">
112+
<div className="flex items-center gap-3 mb-6">
113+
<Bot className="size-8 text-blue-500" />
114+
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">The Roo Fix</h2>
115+
</div>
116+
<div className="space-y-4 text-lg text-muted-foreground">
117+
<p>
118+
<strong className="text-foreground">Roo PR Reviewer</strong> fights AI chaos with AI
119+
precision.
120+
</p>
121+
<p>
122+
It reads your PRs like a senior engineer — not a spellchecker. It flags the real
123+
problems and skips the noise.
124+
</p>
125+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
126+
<div className="flex items-start gap-3">
127+
<CheckCircle2 className="size-5 text-green-500 mt-1 flex-shrink-0" />
128+
<span>Detects logic and security issues (not just lint)</span>
129+
</div>
130+
<div className="flex items-start gap-3">
131+
<CheckCircle2 className="size-5 text-green-500 mt-1 flex-shrink-0" />
132+
<span>
133+
Explains <em>why</em> the change is wrong, not just <em>what</em>
134+
</span>
135+
</div>
136+
<div className="flex items-start gap-3">
137+
<CheckCircle2 className="size-5 text-green-500 mt-1 flex-shrink-0" />
138+
<span>Integrates directly in GitHub PRs</span>
139+
</div>
140+
<div className="flex items-start gap-3">
141+
<CheckCircle2 className="size-5 text-green-500 mt-1 flex-shrink-0" />
142+
<span>Bring-your-own-API-key — no token limits, no model throttling</span>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
</section>
149+
150+
{/* How It Feels Section */}
151+
<section className="relative overflow-hidden border-t border-border py-20">
152+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
153+
<div className="mx-auto max-w-4xl">
154+
<div className="flex items-center gap-3 mb-6">
155+
<Zap className="size-8 text-purple-500" />
156+
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">How It Feels to Use Roo</h2>
157+
</div>
158+
<div className="space-y-4 text-lg text-muted-foreground">
159+
<p>You open a PR, and Roo leaves comments like:</p>
160+
<div className="space-y-4 mt-6">
161+
<blockquote className="border-l-4 border-blue-500 bg-blue-500/5 p-4 italic">
162+
&quot;Great news: &apos;1000&apos; is now cheaper than &apos;200&apos;. Sort
163+
numerically; keep values as numbers.&quot;
164+
</blockquote>
165+
<blockquote className="border-l-4 border-amber-500 bg-amber-500/5 p-4 italic">
166+
&quot;This regex can spend the weekend backtracking. Use a safe validator.&quot;
167+
</blockquote>
168+
<blockquote className="border-l-4 border-red-500 bg-red-500/5 p-4 italic">
169+
&quot;Rounding errors become billing errors. Use `Decimal` end-to-end.&quot;
170+
</blockquote>
171+
</div>
172+
<p className="font-semibold text-foreground pt-4">
173+
It&apos;s like having that one paranoid senior dev back on your team — but this one
174+
never sleeps.
175+
</p>
176+
</div>
177+
</div>
178+
</div>
179+
</section>
180+
181+
{/* Why Engineers Love It Section */}
182+
<section className="relative overflow-hidden border-t border-border py-20">
183+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
184+
<div className="mx-auto max-w-4xl">
185+
<div className="flex items-center gap-3 mb-6">
186+
<Brain className="size-8 text-green-500" />
187+
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Why Engineers Love It</h2>
188+
</div>
189+
<div className="space-y-4 text-lg">
190+
<div className="space-y-3">
191+
<div className="flex items-start gap-3">
192+
<span className="text-green-500 font-bold">•</span>
193+
<div>
194+
<strong className="text-foreground">Fewer false positives</strong> —
195+
<span className="text-muted-foreground ml-1">
196+
Roo comments are focused, not fluffy.
197+
</span>
198+
</div>
199+
</div>
200+
<div className="flex items-start gap-3">
201+
<span className="text-green-500 font-bold">•</span>
202+
<div>
203+
<strong className="text-foreground">Understands your context</strong> —
204+
<span className="text-muted-foreground ml-1">
205+
reads your repo, not a random snippet.
206+
</span>
207+
</div>
208+
</div>
209+
<div className="flex items-start gap-3">
210+
<span className="text-green-500 font-bold">•</span>
211+
<div>
212+
<strong className="text-foreground">Catches what humans miss</strong> —
213+
<span className="text-muted-foreground ml-1">
214+
subtle bugs, security drift, AI hallucinations.
215+
</span>
216+
</div>
217+
</div>
218+
</div>
219+
<p className="font-semibold text-foreground pt-4 text-center italic">
220+
Engineers call it &quot;the only AI review that doesn&apos;t make me dumber.&quot;
221+
</p>
222+
</div>
223+
</div>
224+
</div>
225+
</section>
226+
227+
{/* Try It Section */}
228+
<section className="relative overflow-hidden border-t border-border py-20">
229+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
230+
<div className="mx-auto max-w-4xl">
231+
<div className="flex items-center gap-3 mb-6">
232+
<Shield className="size-8 text-indigo-500" />
233+
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Try It on Your Next PR</h2>
234+
</div>
235+
<div className="space-y-4">
236+
<ol className="space-y-4 text-lg">
237+
<li className="flex items-start gap-3">
238+
<span className="flex-shrink-0 bg-indigo-500 text-white rounded-full w-7 h-7 flex items-center justify-center font-bold text-sm">
239+
1
240+
</span>
241+
<span className="text-muted-foreground">
242+
Add Roo to your repo (takes 3 minutes).
243+
</span>
244+
</li>
245+
<li className="flex items-start gap-3">
246+
<span className="flex-shrink-0 bg-indigo-500 text-white rounded-full w-7 h-7 flex items-center justify-center font-bold text-sm">
247+
2
248+
</span>
249+
<span className="text-muted-foreground">Push a PR — Roo reviews instantly.</span>
250+
</li>
251+
<li className="flex items-start gap-3">
252+
<span className="flex-shrink-0 bg-indigo-500 text-white rounded-full w-7 h-7 flex items-center justify-center font-bold text-sm">
253+
3
254+
</span>
255+
<span className="text-muted-foreground">
256+
Watch it flag the stuff your AI or teammate didn&apos;t notice.
257+
</span>
258+
</li>
259+
</ol>
260+
<div className="mt-8 flex justify-center">
261+
<Button
262+
size="lg"
263+
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"
264+
asChild>
265+
<a
266+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
267+
target="_blank"
268+
rel="noopener noreferrer"
269+
onClick={trackGoogleAdsConversion}
270+
className="flex items-center justify-center">
271+
Try Roo Reviewer Free
272+
<ArrowRight className="ml-2 h-4 w-4" />
273+
</a>
274+
</Button>
275+
</div>
276+
</div>
277+
</div>
278+
</div>
279+
</section>
280+
281+
{/* Agent Team Section */}
282+
<section className="relative overflow-hidden border-t border-border py-32">
283+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
284+
<div className="mx-auto mb-12 max-w-4xl text-center">
285+
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl mb-6">
286+
The first member of a whole new team
287+
</h2>
288+
<p className="text-lg text-muted-foreground">
289+
Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "}
290+
<em>almost everything</em> we do today is mostly through our agents. Now we&apos;re bringing
291+
them to you.
292+
</p>
293+
<p className="mt-4 text-lg text-muted-foreground">
294+
Roo&apos;s PR Reviewer isn&apos;t yet another single-purpose tool to add to your already
295+
complicated stack. It&apos;s the first member of your AI-powered development team. More
296+
agents are shipping soon.
297+
</p>
298+
</div>
299+
<div className="relative mx-auto md:max-w-[1200px]">
300+
<AgentCarousel />
301+
</div>
302+
</div>
303+
</section>
304+
305+
{/* Footer CTA */}
306+
<section className="py-20">
307+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
308+
<div className="mx-auto max-w-4xl rounded-3xl border border-border/50 bg-gradient-to-br from-red-500/5 via-amber-500/5 to-blue-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">
309+
<p className="text-2xl font-bold mb-8 italic text-foreground">
310+
AI is writing your code. Roo makes sure it&apos;s still safe to ship.
311+
</p>
312+
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
313+
<Button
314+
size="lg"
315+
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"
316+
asChild>
317+
<a
318+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
319+
target="_blank"
320+
rel="noopener noreferrer"
321+
onClick={trackGoogleAdsConversion}
322+
className="flex items-center justify-center">
323+
Try Roo Reviewer Free
324+
<ArrowRight className="ml-2 h-4 w-4" />
325+
</a>
326+
</Button>
327+
</div>
328+
</div>
329+
</div>
330+
</section>
331+
</>
332+
)
333+
}

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import type { Metadata } from "next"
2+
3+
import { SEO } from "@/lib/seo"
4+
import { ogImageUrl } from "@/lib/og"
5+
import { PRReviewerContent } from "./PRReviewerContent"
6+
7+
const TITLE = "PR Reviewer"
8+
const DESCRIPTION =
9+
"Your AI wrote the code. Roo made sure it's safe to ship. AI-generated commits are flooding PRs. Roo PR Reviewer catches what slipped through before it hits prod."
10+
const OG_DESCRIPTION = "Your AI wrote the code. Roo made sure it's safe to ship."
11+
const PATH = "/pr-reviewer"
12+
13+
export const metadata: Metadata = {
14+
title: TITLE,
15+
description: DESCRIPTION,
16+
alternates: {
17+
canonical: `${SEO.url}${PATH}`,
18+
},
19+
openGraph: {
20+
title: TITLE,
21+
description: DESCRIPTION,
22+
url: `${SEO.url}${PATH}`,
23+
siteName: SEO.name,
24+
images: [
25+
{
26+
url: ogImageUrl(TITLE, OG_DESCRIPTION),
27+
width: 1200,
28+
height: 630,
29+
alt: TITLE,
30+
},
31+
],
32+
locale: SEO.locale,
33+
type: "website",
34+
},
35+
twitter: {
36+
card: SEO.twitterCard,
37+
title: TITLE,
38+
description: DESCRIPTION,
39+
images: [ogImageUrl(TITLE, OG_DESCRIPTION)],
40+
},
41+
keywords: [
42+
...SEO.keywords,
43+
"PR reviewer",
44+
"code review",
45+
"pull request review",
46+
"AI code review",
47+
"GitHub PR review",
48+
"automated code review",
49+
"AI-generated code",
50+
"security review",
51+
"JWT verification",
52+
"regex security",
53+
"billing errors",
54+
"logic bugs",
55+
"AI hallucinations",
56+
"senior developer",
57+
"paranoid code review",
58+
"bring your own key",
59+
"BYOK AI",
60+
],
61+
}
62+
63+
export default function PRReviewerPage() {
64+
return <PRReviewerContent />
65+
}

0 commit comments

Comments
 (0)