Skip to content

Commit 8870348

Browse files
roomote[bot]roomotedaniel-lxs
authored
feat: add Google Ads conversion tracking to reviewer page (#8831)
* feat: add Google Ads conversion tracking to reviewer page * fix: add asChild prop to first button to prevent invalid HTML nesting --------- Co-authored-by: Roo Code <[email protected]> Co-authored-by: daniel-lxs <[email protected]>
1 parent f7009e9 commit 8870348

File tree

3 files changed

+237
-208
lines changed

3 files changed

+237
-208
lines changed

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

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
"use client"
2+
3+
import { ArrowRight, Blocks, BookMarked, ListChecks, LucideIcon } from "lucide-react"
4+
import Image from "next/image"
5+
6+
import { Button } from "@/components/ui"
7+
import { AnimatedBackground } from "@/components/homepage"
8+
import { AgentCarousel } from "@/components/reviewer/agent-carousel"
9+
import { EXTERNAL_LINKS } from "@/lib/constants"
10+
import { trackGoogleAdsConversion } from "@/lib/analytics/google-ads"
11+
12+
interface Feature {
13+
icon: LucideIcon
14+
title: string
15+
description: string | React.ReactNode
16+
logos?: string[]
17+
}
18+
19+
const howItWorks: Feature[] = [
20+
{
21+
icon: Blocks,
22+
title: "Our agents, your provider keys",
23+
description: (
24+
<>
25+
<p>
26+
We orchestrate the review, optimize the hell out of the prompts, integrate with GitHub, keep you
27+
properly posted.
28+
</p>
29+
<p>We&apos;re thoughtful about token usage, but not incentivized to skimp to grow our margins.</p>
30+
</>
31+
),
32+
},
33+
{
34+
icon: ListChecks,
35+
title: "Advanced reasoning and workflows",
36+
description:
37+
"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.",
38+
},
39+
{
40+
icon: BookMarked,
41+
title: "Fully repository-aware",
42+
description:
43+
"Reviews traverse code ownership, dependency graphs, and historical patterns to surface risk and deviations, not noise.",
44+
},
45+
]
46+
47+
// Workaround for next/image choking on these for some reason
48+
import hero from "/public/heroes/agent-reviewer.png"
49+
50+
export function ReviewerContent() {
51+
return (
52+
<>
53+
<section className="relative flex md:h-[calc(70vh-theme(spacing.12))] items-center overflow-hidden">
54+
<AnimatedBackground />
55+
<div className="container relative flex items-center h-full z-10 mx-auto px-4 sm:px-6 lg:px-8">
56+
<div className="grid h-full relative gap-4 md:gap-20 lg:grid-cols-2">
57+
<div className="flex flex-col px-4 justify-center space-y-6 sm:space-y-8">
58+
<div>
59+
<h1 className="text-3xl font-bold tracking-tight mt-8 md:text-left md:text-4xl lg:text-5xl lg:mt-0">
60+
Get comprehensive code reviews that save you time, not&nbsp;tokens.
61+
</h1>
62+
<div className="mt-4 max-w-lg space-y-4 text-base text-muted-foreground md:text-left sm:mt-6">
63+
<p>
64+
Regular AI code review tools cap model usage to protect their margins from fixed
65+
monthly prices. That leads to shallow prompts, limited context, and missed
66+
issues.
67+
</p>
68+
<p>
69+
Roo Code&apos;s PR Reviewer flips the script: you bring your own key and
70+
leverage it to the max – to find real issues, increase code quality and keep
71+
your PR queue moving.
72+
</p>
73+
</div>
74+
</div>
75+
<div className="flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0 md:items-center">
76+
<Button
77+
size="lg"
78+
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"
79+
asChild>
80+
<a
81+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
82+
target="_blank"
83+
rel="noopener noreferrer"
84+
onClick={trackGoogleAdsConversion}
85+
className="flex w-full items-center justify-center">
86+
Start 14-day Free Trial
87+
<ArrowRight className="ml-2" />
88+
</a>
89+
</Button>
90+
<span className="text-sm text-center md:text-left text-muted-foreground md:ml-2">
91+
(cancel anytime)
92+
</span>
93+
</div>
94+
</div>
95+
<div className="flex items-center justify-end mx-auto h-full mt-8 lg:mt-0">
96+
<div className="md:w-[800px] md:h-[474px] relative overflow-clip">
97+
<div className="block">
98+
<Image
99+
src={hero}
100+
alt="Example of a code review generated by Roo Code PR Reviewer"
101+
className="max-w-full h-auto"
102+
width={800}
103+
height={474}
104+
/>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
</section>
111+
112+
<section className="relative overflow-hidden border-t border-border py-32">
113+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
114+
<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
115+
<div>
116+
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
117+
Why Roo&apos;s PR Reviewer is so much better
118+
</h2>
119+
</div>
120+
</div>
121+
122+
<div className="relative mx-auto md:max-w-[1200px]">
123+
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
124+
{howItWorks.map((feature, index) => {
125+
const Icon = feature.icon
126+
return (
127+
<li
128+
key={index}
129+
className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300">
130+
<Icon className="size-6 text-foreground/80" />
131+
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">
132+
{feature.title}
133+
</h3>
134+
<div className="leading-relaxed font-light text-muted-foreground space-y-2">
135+
{feature.description}
136+
</div>
137+
{feature.logos && (
138+
<div className="mt-4 flex flex-wrap items-center gap-4">
139+
{feature.logos.map((logo) => (
140+
<Image
141+
key={logo}
142+
width={20}
143+
height={20}
144+
className="w-5 h-5 overflow-clip opacity-50 dark:invert"
145+
src={`/logos/${logo.toLowerCase()}.svg`}
146+
alt={`${logo} Logo`}
147+
/>
148+
))}
149+
</div>
150+
)}
151+
</li>
152+
)
153+
})}
154+
</ul>
155+
</div>
156+
</div>
157+
</section>
158+
159+
<section className="relative overflow-hidden border-t border-border py-32">
160+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
161+
<div className="mx-auto mb-12 max-w-4xl text-center">
162+
<div>
163+
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
164+
The first member of a whole new team
165+
</h2>
166+
167+
<p className="mt-6 text-lg text-muted-foreground">
168+
Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "}
169+
<em>almost everything</em> we do today is mostly through our agents. Now we&apos;re
170+
bringing them to you.
171+
</p>
172+
<p className="mt-2 text-lg text-muted-foreground">
173+
Roo&apos;s PR Reviewer isn&apos;t yet another single-purpose tool to add to your already
174+
complicated stack.
175+
<br />
176+
It&apos;s the first member of your AI-powered development team. More agents are shipping
177+
soon.
178+
</p>
179+
</div>
180+
</div>
181+
182+
<div className="relative mx-auto md:max-w-[1200px]">
183+
<AgentCarousel />
184+
</div>
185+
</div>
186+
</section>
187+
188+
{/* CTA Section */}
189+
<section className="py-20">
190+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
191+
<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">
192+
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Stop wasting time.</h2>
193+
<p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
194+
Give Roo Code&apos;s PR Reviewer your model key and turn painful reviews into a tangible
195+
quality advantage.
196+
</p>
197+
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
198+
<Button
199+
size="lg"
200+
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"
201+
asChild>
202+
<a
203+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
204+
target="_blank"
205+
rel="noopener noreferrer"
206+
onClick={trackGoogleAdsConversion}
207+
className="flex items-center justify-center">
208+
Start 14-day Free Trial
209+
<ArrowRight className="ml-2 h-4 w-4" />
210+
</a>
211+
</Button>
212+
</div>
213+
</div>
214+
</div>
215+
</section>
216+
</>
217+
)
218+
}

0 commit comments

Comments
 (0)