feat: Add new PR Reviewer page with alternative messaging #8995
+348
−0
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
|
There was a problem hiding this comment. Both |
||
| 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 /> | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Both
/reviewerand/pr-reviewerpages use identical titles ("PR Reviewer"), which creates SEO conflicts. Search engines will struggle to differentiate these pages, potentially hurting rankings for both. For effective A/B testing and SEO, use distinct titles like "Roo AI PR Reviewer" or "AI-Powered PR Review" for this alternative page.