diff --git a/apps/web-roo-code/public/heroes/agent-reviewer.png b/apps/web-roo-code/public/heroes/agent-reviewer.png new file mode 100644 index 000000000000..244898029791 Binary files /dev/null and b/apps/web-roo-code/public/heroes/agent-reviewer.png differ diff --git a/apps/web-roo-code/src/app/reviewer/page.tsx b/apps/web-roo-code/src/app/reviewer/page.tsx new file mode 100644 index 000000000000..a7ff6a78876f --- /dev/null +++ b/apps/web-roo-code/src/app/reviewer/page.tsx @@ -0,0 +1,266 @@ +import { ArrowRight, Blocks, BookMarked, ListChecks, LucideIcon } from "lucide-react" +import type { Metadata } from "next" + +import { Button } from "@/components/ui" +import { AnimatedBackground } from "@/components/homepage" +import { AgentCarousel } from "@/components/reviewer/agent-carousel" +import { SEO } from "@/lib/seo" +import { EXTERNAL_LINKS } from "@/lib/constants" +import Image from "next/image" + +const TITLE = "PR Reviewer · Roo Code Cloud" +const DESCRIPTION = + "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." +const PATH = "/reviewer" +const OG_IMAGE = SEO.ogImage + +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: OG_IMAGE.url, + width: OG_IMAGE.width, + height: OG_IMAGE.height, + alt: OG_IMAGE.alt, + }, + ], + locale: SEO.locale, + type: "website", + }, + twitter: { + card: SEO.twitterCard, + title: TITLE, + description: DESCRIPTION, + images: [OG_IMAGE.url], + }, + 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", + ], +} + +interface Feature { + icon: LucideIcon + title: string + description: string | React.ReactNode + logos?: string[] +} + +const howItWorks: Feature[] = [ + { + icon: Blocks, + title: "Our agents, your provider keys", + description: ( + <> +

+ We orchestrate the review, optimize the hell out of the prompts, integrate with GitHub, keep you + properly posted. +

+

We're thoughtful about token usage, but not incentivized to skimp to grow our margins.

+ + ), + }, + { + icon: ListChecks, + title: "Advanced reasoning and workflows", + description: + "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.", + }, + { + icon: BookMarked, + title: "Fully repository-aware", + description: + "Reviews traverse code ownership, dependency graphs, and historical patterns to surface risk and deviations, not noise.", + }, +] + +// Workaround for next/image choking on these for some reason +import hero from "/public/heroes/agent-reviewer.png" + +export default function AgentReviewerPage() { + return ( + <> +
+ +
+
+
+
+

+ Get comprehensive reviews that save you time, not tokens. +

+
+

+ Regular AI code review tools cap model usage to protect their margins from fixed + monthly prices. That leads to shallow prompts, limited context, and missed + issues. +

+

+ Roo Code's PR Reviewer flips the model: you bring your own key and leverage + it to the max – to find real issues, increase code quality and keep your PR + queue moving. +

+
+
+
+ + + (cancel anytime) + +
+
+
+
+
+ Example of a code review generated by Roo Code PR Reviewer +
+
+
+
+
+
+ +
+
+
+
+

+ Why Roo's PR Reviewer is so much better +

+
+
+ +
+
    + {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 */} +
+
+
+

Stop wasting time.

+

+ Give Roo Code's PR Reviewer your model key and turn painful reviews into a tangible + quality advantage. +

+
+ +
+
+
+
+ + ) +} diff --git a/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx b/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx new file mode 100644 index 000000000000..c935db6e1c74 --- /dev/null +++ b/apps/web-roo-code/src/components/reviewer/agent-carousel.tsx @@ -0,0 +1,125 @@ +"use client" + +import { useEffect } from "react" +import { motion } from "framer-motion" +import useEmblaCarousel from "embla-carousel-react" +import AutoPlay from "embla-carousel-autoplay" +import { Bug, FileText, Gauge, Languages, Microscope, PocketKnife, TestTube, type LucideIcon } from "lucide-react" + +// AI Agent types for the carousel +interface AIAgent { + icon: LucideIcon + name: string +} + +const aiAgents: AIAgent[] = [ + { icon: PocketKnife, name: "Generalist" }, + { icon: Bug, name: "Bug Fixer" }, + { icon: TestTube, name: "Test Engineer" }, + { icon: Microscope, name: "Security Auditor" }, + { icon: Gauge, name: "Performance Optimizer" }, + { icon: FileText, name: "Documentation Writer" }, + { icon: Languages, name: "String Translator" }, +] + +export function AgentCarousel() { + const [emblaRef, emblaApi] = useEmblaCarousel( + { + loop: true, + align: "start", + watchDrag: true, + dragFree: false, + containScroll: false, + duration: 10000, + }, + [ + AutoPlay({ + playOnInit: true, + delay: 0, + stopOnInteraction: false, + stopOnMouseEnter: false, + stopOnFocusIn: false, + }), + ], + ) + + // Continuous scrolling effect + useEffect(() => { + if (!emblaApi) return + + const autoPlay = emblaApi?.plugins()?.autoPlay as + | { + play?: () => void + } + | undefined + + if (autoPlay?.play) { + autoPlay.play() + } + + // Set up continuous scrolling + const interval = setInterval(() => { + if (emblaApi) { + emblaApi.scrollNext() + } + }, 30) // Smooth continuous scroll + + return () => clearInterval(interval) + }, [emblaApi]) + + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + duration: 0.6, + ease: [0.21, 0.45, 0.27, 0.9], + }, + }, + } + + // Duplicate the agents array for seamless infinite scroll + const displayAgents = [...aiAgents, ...aiAgents] + + return ( + + {/* Gradient Overlays */} +
+
+ + {/* Embla Carousel Container */} +
+
+ {displayAgents.map((agent, index) => { + const Icon = agent.icon + return ( +
+
+
+ +

+ {agent.name} +

+
+
+
+ ) + })} +
+
+ + ) +} diff --git a/apps/web-roo-code/src/lib/constants.ts b/apps/web-roo-code/src/lib/constants.ts index c474481805c9..5dd1cce9707e 100644 --- a/apps/web-roo-code/src/lib/constants.ts +++ b/apps/web-roo-code/src/lib/constants.ts @@ -26,6 +26,7 @@ export const EXTERNAL_LINKS = { TESTIMONIALS: "https://roocode.com/#testimonials", CLOUD_APP_LOGIN: "https://app.roocode.com/sign-in", CLOUD_APP_SIGNUP: "https://app.roocode.com/sign-up", + CLOUD_APP_SIGNUP_PRO: "https://app.roocode.com/sign-up?redirect=/checkout/pro", } export const INTERNAL_LINKS = {