mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-08-28 05:27:24 +00:00
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
This commit is contained in:
Roo Code
parent
5fb36d9c85
commit
7276ce00cf
2 changed files with 398 additions and 0 deletions
333
apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx
Normal file
333
apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
"use client"
|
||||
|
||||
import { ArrowRight, AlertTriangle, Bot, Shield, Brain, Zap, CheckCircle2 } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
|
||||
import { Button } from "@/components/ui"
|
||||
import { AnimatedBackground } from "@/components/homepage"
|
||||
import { AgentCarousel } from "@/components/reviewer/agent-carousel"
|
||||
import { EXTERNAL_LINKS } from "@/lib/constants"
|
||||
import { trackGoogleAdsConversion } from "@/lib/analytics/google-ads"
|
||||
|
||||
// Workaround for next/image choking on these for some reason
|
||||
import hero from "/public/heroes/agent-reviewer.png"
|
||||
|
||||
export function PRReviewerContent() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section className="relative flex md:h-[calc(70vh-theme(spacing.12))] items-center overflow-hidden">
|
||||
<AnimatedBackground />
|
||||
<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid h-full relative gap-4 md:gap-20 lg:grid-cols-2">
|
||||
<div className="flex flex-col px-4 justify-center space-y-6 sm:space-y-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight mt-8 md:text-left md:text-4xl lg:text-5xl lg:mt-0">
|
||||
Your AI wrote the code. Roo made sure it's safe to ship.
|
||||
</h1>
|
||||
<div className="mt-4 max-w-lg space-y-4 text-base text-muted-foreground md:text-left sm:mt-6">
|
||||
<p>
|
||||
AI-generated commits are flooding PRs. Some are fine. Some disable JWT
|
||||
verification. Roo PR Reviewer catches what slipped through before it hits prod.
|
||||
</p>
|
||||
<blockquote className="italic border-l-4 border-muted-foreground/30 pl-4 text-sm">
|
||||
"Bold strategy: a trust-based JWT system. What could possibly go
|
||||
wrong?"
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0 md:items-center">
|
||||
<Button
|
||||
size="lg"
|
||||
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"
|
||||
asChild>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={trackGoogleAdsConversion}
|
||||
className="flex w-full items-center justify-center">
|
||||
Try Roo Reviewer Free
|
||||
<ArrowRight className="ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end mx-auto h-full mt-8 lg:mt-0">
|
||||
<div className="md:w-[800px] md:h-[474px] relative overflow-clip">
|
||||
<div className="block">
|
||||
<Image
|
||||
src={hero}
|
||||
alt="Example of a code review generated by Roo Code PR Reviewer"
|
||||
className="max-w-full h-auto"
|
||||
width={800}
|
||||
height={474}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* The Problem Section */}
|
||||
<section className="relative overflow-hidden border-t border-border py-20">
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<AlertTriangle className="size-8 text-amber-500" />
|
||||
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">The Problem</h2>
|
||||
</div>
|
||||
<div className="space-y-4 text-lg text-muted-foreground">
|
||||
<p>
|
||||
AI's writing more code than ever — and most of it <em>looks</em> right. But beneath
|
||||
that green diff are:
|
||||
</p>
|
||||
<ul className="space-y-3 ml-6">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-red-500 mt-1">•</span>
|
||||
<span>silent security holes</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-red-500 mt-1">•</span>
|
||||
<span>rounding bugs that eat customer money</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-red-500 mt-1">•</span>
|
||||
<span>regexes that backtrack until your weekend's gone</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold text-foreground pt-4">
|
||||
Your team is reviewing more code than ever, but catching less.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* The Roo Fix Section */}
|
||||
<section className="relative overflow-hidden border-t border-border py-20">
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Bot className="size-8 text-blue-500" />
|
||||
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">The Roo Fix</h2>
|
||||
</div>
|
||||
<div className="space-y-4 text-lg text-muted-foreground">
|
||||
<p>
|
||||
<strong className="text-foreground">Roo PR Reviewer</strong> fights AI chaos with AI
|
||||
precision.
|
||||
</p>
|
||||
<p>
|
||||
It reads your PRs like a senior engineer — not a spellchecker. It flags the real
|
||||
problems and skips the noise.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="size-5 text-green-500 mt-1 flex-shrink-0" />
|
||||
<span>Detects logic and security issues (not just lint)</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="size-5 text-green-500 mt-1 flex-shrink-0" />
|
||||
<span>
|
||||
Explains <em>why</em> the change is wrong, not just <em>what</em>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="size-5 text-green-500 mt-1 flex-shrink-0" />
|
||||
<span>Integrates directly in GitHub PRs</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="size-5 text-green-500 mt-1 flex-shrink-0" />
|
||||
<span>Bring-your-own-API-key — no token limits, no model throttling</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Feels Section */}
|
||||
<section className="relative overflow-hidden border-t border-border py-20">
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Zap className="size-8 text-purple-500" />
|
||||
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">How It Feels to Use Roo</h2>
|
||||
</div>
|
||||
<div className="space-y-4 text-lg text-muted-foreground">
|
||||
<p>You open a PR, and Roo leaves comments like:</p>
|
||||
<div className="space-y-4 mt-6">
|
||||
<blockquote className="border-l-4 border-blue-500 bg-blue-500/5 p-4 italic">
|
||||
"Great news: '1000' is now cheaper than '200'. Sort
|
||||
numerically; keep values as numbers."
|
||||
</blockquote>
|
||||
<blockquote className="border-l-4 border-amber-500 bg-amber-500/5 p-4 italic">
|
||||
"This regex can spend the weekend backtracking. Use a safe validator."
|
||||
</blockquote>
|
||||
<blockquote className="border-l-4 border-red-500 bg-red-500/5 p-4 italic">
|
||||
"Rounding errors become billing errors. Use `Decimal` end-to-end."
|
||||
</blockquote>
|
||||
</div>
|
||||
<p className="font-semibold text-foreground pt-4">
|
||||
It's like having that one paranoid senior dev back on your team — but this one
|
||||
never sleeps.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Engineers Love It Section */}
|
||||
<section className="relative overflow-hidden border-t border-border py-20">
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Brain className="size-8 text-green-500" />
|
||||
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Why Engineers Love It</h2>
|
||||
</div>
|
||||
<div className="space-y-4 text-lg">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-green-500 font-bold">•</span>
|
||||
<div>
|
||||
<strong className="text-foreground">Fewer false positives</strong> —
|
||||
<span className="text-muted-foreground ml-1">
|
||||
Roo comments are focused, not fluffy.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-green-500 font-bold">•</span>
|
||||
<div>
|
||||
<strong className="text-foreground">Understands your context</strong> —
|
||||
<span className="text-muted-foreground ml-1">
|
||||
reads your repo, not a random snippet.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-green-500 font-bold">•</span>
|
||||
<div>
|
||||
<strong className="text-foreground">Catches what humans miss</strong> —
|
||||
<span className="text-muted-foreground ml-1">
|
||||
subtle bugs, security drift, AI hallucinations.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-semibold text-foreground pt-4 text-center italic">
|
||||
Engineers call it "the only AI review that doesn't make me dumber."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Try It Section */}
|
||||
<section className="relative overflow-hidden border-t border-border py-20">
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Shield className="size-8 text-indigo-500" />
|
||||
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Try It on Your Next PR</h2>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<ol className="space-y-4 text-lg">
|
||||
<li className="flex items-start gap-3">
|
||||
<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">
|
||||
1
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
Add Roo to your repo (takes 3 minutes).
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<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">
|
||||
2
|
||||
</span>
|
||||
<span className="text-muted-foreground">Push a PR — Roo reviews instantly.</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<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">
|
||||
3
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
Watch it flag the stuff your AI or teammate didn't notice.
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div className="mt-8 flex justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
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"
|
||||
asChild>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={trackGoogleAdsConversion}
|
||||
className="flex items-center justify-center">
|
||||
Try Roo Reviewer Free
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Agent Team Section */}
|
||||
<section className="relative overflow-hidden border-t border-border py-32">
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto mb-12 max-w-4xl text-center">
|
||||
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl mb-6">
|
||||
The first member of a whole new team
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "}
|
||||
<em>almost everything</em> we do today is mostly through our agents. Now we're bringing
|
||||
them to you.
|
||||
</p>
|
||||
<p className="mt-4 text-lg text-muted-foreground">
|
||||
Roo's PR Reviewer isn't yet another single-purpose tool to add to your already
|
||||
complicated stack. It's the first member of your AI-powered development team. More
|
||||
agents are shipping soon.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative mx-auto md:max-w-[1200px]">
|
||||
<AgentCarousel />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer CTA */}
|
||||
<section className="py-20">
|
||||
<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-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">
|
||||
<p className="text-2xl font-bold mb-8 italic text-foreground">
|
||||
AI is writing your code. Roo makes sure it's still safe to ship.
|
||||
</p>
|
||||
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<Button
|
||||
size="lg"
|
||||
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"
|
||||
asChild>
|
||||
<a
|
||||
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={trackGoogleAdsConversion}
|
||||
className="flex items-center justify-center">
|
||||
Try Roo Reviewer Free
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
65
apps/web-roo-code/src/app/pr-reviewer/page.tsx
Normal file
65
apps/web-roo-code/src/app/pr-reviewer/page.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import type { Metadata } from "next"
|
||||
|
||||
import { SEO } from "@/lib/seo"
|
||||
import { ogImageUrl } from "@/lib/og"
|
||||
import { PRReviewerContent } from "./PRReviewerContent"
|
||||
|
||||
const TITLE = "PR Reviewer"
|
||||
const DESCRIPTION =
|
||||
"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."
|
||||
const OG_DESCRIPTION = "Your AI wrote the code. Roo made sure it's safe to ship."
|
||||
const PATH = "/pr-reviewer"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: TITLE,
|
||||
description: DESCRIPTION,
|
||||
alternates: {
|
||||
canonical: `${SEO.url}${PATH}`,
|
||||
},
|
||||
openGraph: {
|
||||
title: TITLE,
|
||||
description: DESCRIPTION,
|
||||
url: `${SEO.url}${PATH}`,
|
||||
siteName: SEO.name,
|
||||
images: [
|
||||
{
|
||||
url: ogImageUrl(TITLE, OG_DESCRIPTION),
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: TITLE,
|
||||
},
|
||||
],
|
||||
locale: SEO.locale,
|
||||
type: "website",
|
||||
},
|
||||
twitter: {
|
||||
card: SEO.twitterCard,
|
||||
title: TITLE,
|
||||
description: DESCRIPTION,
|
||||
images: [ogImageUrl(TITLE, OG_DESCRIPTION)],
|
||||
},
|
||||
keywords: [
|
||||
...SEO.keywords,
|
||||
"PR reviewer",
|
||||
"code review",
|
||||
"pull request review",
|
||||
"AI code review",
|
||||
"GitHub PR review",
|
||||
"automated code review",
|
||||
"AI-generated code",
|
||||
"security review",
|
||||
"JWT verification",
|
||||
"regex security",
|
||||
"billing errors",
|
||||
"logic bugs",
|
||||
"AI hallucinations",
|
||||
"senior developer",
|
||||
"paranoid code review",
|
||||
"bring your own key",
|
||||
"BYOK AI",
|
||||
],
|
||||
}
|
||||
|
||||
export default function PRReviewerPage() {
|
||||
return <PRReviewerContent />
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue