Skip to content

Commit 8601787

Browse files
brunobergherbrunobergher
committed
First pass
1 parent a8f87d2 commit 8601787

File tree

3 files changed

+274
-0
lines changed

3 files changed

+274
-0
lines changed

‎apps/web-roo-code/public/heroes/agent-reviewer.png‎

442 KB
Loading

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

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
import {
2+
ArrowRight,
3+
ChartLine,
4+
Cloud,
5+
Lock,
6+
LucideIcon,
7+
Megaphone,
8+
MessageCircleQuestionMark,
9+
ReplaceAll,
10+
Router,
11+
Share2,
12+
Users,
13+
} from "lucide-react"
14+
import type { Metadata } from "next"
15+
16+
import { Button } from "@/components/ui"
17+
import { AnimatedBackground } from "@/components/homepage"
18+
import { SEO } from "@/lib/seo"
19+
import { EXTERNAL_LINKS } from "@/lib/constants"
20+
import Image from "next/image"
21+
22+
const TITLE = "PR Reviewer · Roo Code Cloud"
23+
const DESCRIPTION = "TODO, don't merge without this."
24+
const PATH = "/reviewer"
25+
const OG_IMAGE = SEO.ogImage
26+
27+
export const metadata: Metadata = {
28+
title: TITLE,
29+
description: DESCRIPTION,
30+
alternates: {
31+
canonical: `${SEO.url}${PATH}`,
32+
},
33+
openGraph: {
34+
title: TITLE,
35+
description: DESCRIPTION,
36+
url: `${SEO.url}${PATH}`,
37+
siteName: SEO.name,
38+
images: [
39+
{
40+
url: OG_IMAGE.url,
41+
width: OG_IMAGE.width,
42+
height: OG_IMAGE.height,
43+
alt: OG_IMAGE.alt,
44+
},
45+
],
46+
locale: SEO.locale,
47+
type: "website",
48+
},
49+
twitter: {
50+
card: SEO.twitterCard,
51+
title: TITLE,
52+
description: DESCRIPTION,
53+
images: [OG_IMAGE.url],
54+
},
55+
// TODO, don't merge without this.
56+
keywords: [...SEO.keywords, "cloud", "subscription", "cloud agents", "AI cloud development"],
57+
}
58+
59+
interface Feature {
60+
icon: LucideIcon
61+
title: string
62+
description: string
63+
logos?: string[]
64+
}
65+
66+
const cloudFeatures: Feature[] = [
67+
{
68+
icon: Router,
69+
title: "Roomote Control",
70+
description: "Control your IDE from anywhere and keep coding away from your computer.",
71+
},
72+
{
73+
icon: Cloud,
74+
title: "Cloud Agents",
75+
description:
76+
"Specialized agents running in the Cloud to get stuff done while you sleep, with a credit-based system that doesn't lock you in or dumb your models down.",
77+
},
78+
{
79+
icon: ReplaceAll,
80+
title: "Still Model-agnostic",
81+
description: "Bring your own provider key — no markup, lock-in, no restrictions.",
82+
logos: ["Anthropic", "OpenAI", "Gemini", "Grok", "Qwen", "Kimi", "Mistral", "Ollama"],
83+
},
84+
{
85+
icon: ChartLine,
86+
title: "Usage Analytics",
87+
description: "Detailed token analytics to help you optimize your costs and usage.",
88+
},
89+
{
90+
icon: Megaphone,
91+
title: "Early Model Access",
92+
description: "Get early, free access to new, stealth coding models as they become available.",
93+
},
94+
{
95+
icon: Share2,
96+
title: "Task Sharing",
97+
description: "Share tasks with friends and co-workers and let them follow your work.",
98+
},
99+
{
100+
icon: Users,
101+
title: "Team Management",
102+
description:
103+
"Manage your team and their access to tasks and resources, with centralized billing, analytics and configuration.",
104+
},
105+
{
106+
icon: Lock,
107+
title: "Secure and Private",
108+
description:
109+
"Your data is never used for training, and we're SOC2 Type 2 and GDPR compliant, following state-of-the-art security practices, with deep respect for your IP.",
110+
},
111+
{
112+
icon: MessageCircleQuestionMark,
113+
title: "Priority support",
114+
description: "Get quick help from the people who know Roo best.",
115+
},
116+
]
117+
118+
// Workaround for next/image choking on these for some reason
119+
import hero from "/public/heroes/agent-reviewer.png"
120+
121+
export default function AgentReviewerPage() {
122+
return (
123+
<>
124+
<section className="relative flex md:h-[calc(70vh-theme(spacing.12))] items-center overflow-hidden">
125+
<AnimatedBackground />
126+
<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
127+
<div className="grid h-full relative gap-4 md:gap-20 lg:grid-cols-2">
128+
<div className="flex flex-col px-4 justify-center space-y-6 sm:space-y-8">
129+
<div>
130+
<h1 className="text-3xl font-bold tracking-tight mt-8 md:text-left md:text-4xl lg:text-5xl lg:mt-0">
131+
Get comprehensive reviews that save you time, not&nbsp;tokens.
132+
</h1>
133+
<div className="mt-4 max-w-lg space-y-4 text-base text-muted-foreground md:text-left sm:mt-6">
134+
<p>
135+
Regular AI code review tools cap model usage to protect their margins from fixed
136+
monthly prices. That leads to shallow prompts, limited context, and missed
137+
issues.
138+
</p>
139+
<p>
140+
Roo Code&apos;s PR Reviewer flips the model: you bring your own key and leverage
141+
it to the max – to find real issues, increase code quality and keep your PR
142+
queue moving.
143+
</p>
144+
</div>
145+
</div>
146+
<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0 md:items-center">
147+
<Button
148+
size="lg"
149+
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">
150+
<a
151+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
152+
target="_blank"
153+
rel="noopener noreferrer"
154+
className="flex w-full items-center justify-center">
155+
Start 14-day Free Trial
156+
<ArrowRight className="ml-2" />
157+
</a>
158+
</Button>
159+
<span className="text-sm text-center md:text-left text-muted-foreground md:ml-2">
160+
(sdtop anytime)
161+
</span>
162+
</div>
163+
</div>
164+
<div className="flex items-center justify-end mx-auto h-full mt-8 lg:mt-0">
165+
<div className="md:w-[800px] md:h-[474px] relative overflow-clip">
166+
<div className="block">
167+
<Image
168+
src={hero}
169+
alt="Example of a code review generated by Roo Code PR Reviewer"
170+
className="max-w-full h-auto"
171+
width={800}
172+
height={474}
173+
/>
174+
</div>
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
</section>
180+
181+
<section className="relative overflow-hidden border-t border-border py-32">
182+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
183+
<div className="mx-auto mb-12 md:mb-24 max-w-4xl text-center">
184+
<div>
185+
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
186+
Roo has its priorities straight
187+
</h2>
188+
<p className="mt-6 text-lg text-muted-foreground"></p>
189+
</div>
190+
</div>
191+
192+
<div className="relative mx-auto md:max-w-[1200px]"></div>
193+
</div>
194+
</section>
195+
196+
<section className="relative overflow-hidden border-t border-border py-32">
197+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
198+
<div className="mx-auto mb-12 md:mb-24 max-w-4xl text-center">
199+
<div>
200+
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">Power and Flexibility</h2>
201+
<p className="mt-6 text-lg text-muted-foreground">
202+
Code in the cloud, access free models, get usage analytics and more
203+
</p>
204+
</div>
205+
</div>
206+
207+
<div className="relative mx-auto md:max-w-[1200px]">
208+
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
209+
{cloudFeatures.map((feature, index) => {
210+
const Icon = feature.icon
211+
return (
212+
<li
213+
key={index}
214+
className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300">
215+
<Icon className="size-6 text-foreground/80" />
216+
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">
217+
{feature.title}
218+
</h3>
219+
<p className="leading-relaxed font-light text-muted-foreground">
220+
{feature.description}
221+
</p>
222+
{feature.logos && (
223+
<div className="mt-4 flex flex-wrap items-center gap-4">
224+
{feature.logos.map((logo) => (
225+
<Image
226+
key={logo}
227+
width={20}
228+
height={20}
229+
className="w-5 h-5 overflow-clip opacity-50 dark:invert"
230+
src={`/logos/${logo.toLowerCase()}.svg`}
231+
alt={`${logo} Logo`}
232+
/>
233+
))}
234+
</div>
235+
)}
236+
</li>
237+
)
238+
})}
239+
</ul>
240+
</div>
241+
</div>
242+
</section>
243+
244+
{/* CTA Section */}
245+
<section className="py-20">
246+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
247+
<div className="mx-auto max-w-4xl rounded-3xl border border-border/50 bg-gradient-to-br from-blue-500/5 via-cyan-500/5 to-purple-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">
248+
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Stop wasting time.</h2>
249+
<p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
250+
Give Roo Code&apos;s PR Reviewer your model key at and turn painful reviews into a tangible
251+
quality advantage.
252+
</p>
253+
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
254+
<Button
255+
size="lg"
256+
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"
257+
asChild>
258+
<a
259+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
260+
target="_blank"
261+
rel="noopener noreferrer"
262+
className="flex items-center justify-center">
263+
Start 14-day Free Trial
264+
<ArrowRight className="ml-2 h-4 w-4" />
265+
</a>
266+
</Button>
267+
</div>
268+
</div>
269+
</div>
270+
</section>
271+
</>
272+
)
273+
}

‎apps/web-roo-code/src/lib/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const EXTERNAL_LINKS = {
2626
TESTIMONIALS: "https://roocode.com/#testimonials",
2727
CLOUD_APP_LOGIN: "https://app.roocode.com/sign-in",
2828
CLOUD_APP_SIGNUP: "https://app.roocode.com/sign-up",
29+
CLOUD_APP_SIGNUP_PRO: "https://app.roocode.com/sign-up?redirect=/checkout/pro",
2930
}
3031

3132
export const INTERNAL_LINKS = {

0 commit comments

Comments
 (0)