diff --git a/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx b/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx new file mode 100644 index 000000000000..98d6c607311e --- /dev/null +++ b/apps/web-roo-code/src/app/pr-reviewer/PRReviewerContent.tsx @@ -0,0 +1,283 @@ +"use client" + +import { + ArrowRight, + Blocks, + BookMarked, + ListChecks, + LucideIcon, + GitPullRequest, + Key, + MessageSquareCode, +} 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" + +interface Feature { + icon: LucideIcon + title: string + description: string | React.ReactNode + logos?: string[] +} + +const workflowSteps: Feature[] = [ + { + icon: GitPullRequest, + title: "1. Connect Your Repository", + description: "Link your GitHub repository and configure which branches and pull requests should be reviewed.", + }, + { + icon: Key, + title: "2. Add Your API Key", + description: + "Provide your AI provider API key and set your review preferences, custom rules, and quality standards.", + }, + { + icon: MessageSquareCode, + title: "3. Get Review Comments", + description: + "Every pull request gets detailed GitHub comments in minutes from a Roo Code agent highlighting issues and suggesting improvements.", + }, +] + +const howItWorks: Feature[] = [ + { + icon: Blocks, + title: "Bring your own key, get uncompromised reviews", + description: ( + <> +

+ Most AI review tools use fixed pricing, which means they skimp on tokens to protect their margins. + That leads to shallow analysis and missed issues. +

+

+ With Roo, you bring your own API key. We optimize prompts for depth, not cost-cutting, so reviews + focus on real problems like business logic, security vulnerabilities, and architectural issues. +

+ + ), + }, + { + icon: ListChecks, + title: "Advanced reasoning that understands what matters", + description: + "We leverage state-of-the-art reasoning models with sophisticated workflows: diff analysis, context gathering, impact mapping, and contract validation. This catches the subtle bugs that surface-level tools miss—misunderstood requirements, edge cases, and integration risks.", + }, + { + icon: BookMarked, + title: "Repository-aware, not snippet-aware", + description: + "Roo analyzes your entire codebase context—dependency graphs, code ownership, team conventions, and historical patterns. It understands how changes interact with existing systems, not just whether individual lines look correct.", + }, +] + +// Workaround for next/image choking on these for some reason +import hero from "/public/heroes/agent-reviewer.png" + +export function PRReviewerContent() { + return ( + <> +
+ +
+
+
+
+

+ Code reviews that catch what other AI tools miss. +

+
+

+ AI code review tools often catch syntax errors and style issues while missing + the bugs that actually matter: logic flaws, security vulnerabilities, and + misunderstood requirements. +

+

+ Roo Code's PR Reviewer uses advanced reasoning models and full repository + context to find the issues that slip through—before they reach production. +

+
+
+
+ + + (cancel anytime) + +
+
+
+
+
+ Example of a code review generated by Roo Code PR Reviewer +
+
+
+
+
+
+ + {/* How It Works Section */} +
+
+
+
+

How It Works

+
+
+ +
+
    + {workflowSteps.map((step, index) => { + const Icon = step.icon + return ( +
  • + +

    + {step.title} +

    +
    + {step.description} +
    +
    • + ) + })} +
+
+
+
+ +
+
+
+
+

+ Why Roo's PR Reviewer is different +

+
+
+ +
+
    + {howItWorks.map((feature, index) => { + const Icon = feature.icon + return ( +
  • + +

    + {feature.title} +

    +
    + {feature.description} +
    + {feature.logos && ( +
    + {feature.logos.map((logo) => ( + {`${logo} + ))} +
    + )} +
    • + ) + })} +
+
+
+
+ +
+
+
+
+

+ The first member of a whole new team +

+ +

+ Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "} + almost everything we do today is mostly through our agents. Now we're + bringing them to you. +

+

+ 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. +

+
+
+ +
+ +
+
+
+ + {/* CTA Section */} +
+
+
+

+ Ready for better code reviews? +

+

+ Start finding the issues that matter with AI-powered reviews built for depth, not + cost-cutting. +

+
+ +
+
+
+
+ + ) +} diff --git a/apps/web-roo-code/src/app/pr-reviewer/page.tsx b/apps/web-roo-code/src/app/pr-reviewer/page.tsx new file mode 100644 index 000000000000..decb338996e9 --- /dev/null +++ b/apps/web-roo-code/src/app/pr-reviewer/page.tsx @@ -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 = + "Get AI-powered PR reviews that catch what other tools miss. Roo uses advanced reasoning models and full repository context to find logic bugs, security issues, and architectural problems—not just lint errors." +const OG_DESCRIPTION = "Code reviews that catch what other AI tools miss" +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", + "repository-aware review", + "bring your own key", + "BYOK AI", + "code quality", + "development workflow", + "cloud agents", + "AI development team", + "logic bugs", + "security vulnerabilities", + "business logic review", + "advanced reasoning", + ], +} + +export default function PRReviewerPage() { + return +}