Skip to content

Commit 96308c4

Browse files
roomoteroomote
committed
feat: add Google Ads conversion tracking to reviewer page
1 parent 98b8d5b commit 96308c4

File tree

3 files changed

+236
-208
lines changed

3 files changed

+236
-208
lines changed

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

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
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+
<a
80+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
81+
target="_blank"
82+
rel="noopener noreferrer"
83+
onClick={trackGoogleAdsConversion}
84+
className="flex w-full items-center justify-center">
85+
Start 14-day Free Trial
86+
<ArrowRight className="ml-2" />
87+
</a>
88+
</Button>
89+
<span className="text-sm text-center md:text-left text-muted-foreground md:ml-2">
90+
(cancel anytime)
91+
</span>
92+
</div>
93+
</div>
94+
<div className="flex items-center justify-end mx-auto h-full mt-8 lg:mt-0">
95+
<div className="md:w-[800px] md:h-[474px] relative overflow-clip">
96+
<div className="block">
97+
<Image
98+
src={hero}
99+
alt="Example of a code review generated by Roo Code PR Reviewer"
100+
className="max-w-full h-auto"
101+
width={800}
102+
height={474}
103+
/>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</section>
110+
111+
<section className="relative overflow-hidden border-t border-border py-32">
112+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
113+
<div className="mx-auto mb-12 md:mb-24 max-w-5xl text-center">
114+
<div>
115+
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
116+
Why Roo&apos;s PR Reviewer is so much better
117+
</h2>
118+
</div>
119+
</div>
120+
121+
<div className="relative mx-auto md:max-w-[1200px]">
122+
<ul className="grid grid-cols-1 place-items-center gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
123+
{howItWorks.map((feature, index) => {
124+
const Icon = feature.icon
125+
return (
126+
<li
127+
key={index}
128+
className="relative h-full border border-border rounded-2xl bg-background p-8 transition-all duration-300">
129+
<Icon className="size-6 text-foreground/80" />
130+
<h3 className="mb-3 mt-3 text-xl font-semibold text-foreground">
131+
{feature.title}
132+
</h3>
133+
<div className="leading-relaxed font-light text-muted-foreground space-y-2">
134+
{feature.description}
135+
</div>
136+
{feature.logos && (
137+
<div className="mt-4 flex flex-wrap items-center gap-4">
138+
{feature.logos.map((logo) => (
139+
<Image
140+
key={logo}
141+
width={20}
142+
height={20}
143+
className="w-5 h-5 overflow-clip opacity-50 dark:invert"
144+
src={`/logos/${logo.toLowerCase()}.svg`}
145+
alt={`${logo} Logo`}
146+
/>
147+
))}
148+
</div>
149+
)}
150+
</li>
151+
)
152+
})}
153+
</ul>
154+
</div>
155+
</div>
156+
</section>
157+
158+
<section className="relative overflow-hidden border-t border-border py-32">
159+
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
160+
<div className="mx-auto mb-12 max-w-4xl text-center">
161+
<div>
162+
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
163+
The first member of a whole new team
164+
</h2>
165+
166+
<p className="mt-6 text-lg text-muted-foreground">
167+
Architecture, coding, reviewing, testing, debugging, documenting, designing –{" "}
168+
<em>almost everything</em> we do today is mostly through our agents. Now we&apos;re
169+
bringing them to you.
170+
</p>
171+
<p className="mt-2 text-lg text-muted-foreground">
172+
Roo&apos;s PR Reviewer isn&apos;t yet another single-purpose tool to add to your already
173+
complicated stack.
174+
<br />
175+
It&apos;s the first member of your AI-powered development team. More agents are shipping
176+
soon.
177+
</p>
178+
</div>
179+
</div>
180+
181+
<div className="relative mx-auto md:max-w-[1200px]">
182+
<AgentCarousel />
183+
</div>
184+
</div>
185+
</section>
186+
187+
{/* CTA Section */}
188+
<section className="py-20">
189+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
190+
<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">
191+
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Stop wasting time.</h2>
192+
<p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
193+
Give Roo Code&apos;s PR Reviewer your model key and turn painful reviews into a tangible
194+
quality advantage.
195+
</p>
196+
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
197+
<Button
198+
size="lg"
199+
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"
200+
asChild>
201+
<a
202+
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_PRO}
203+
target="_blank"
204+
rel="noopener noreferrer"
205+
onClick={trackGoogleAdsConversion}
206+
className="flex items-center justify-center">
207+
Start 14-day Free Trial
208+
<ArrowRight className="ml-2 h-4 w-4" />
209+
</a>
210+
</Button>
211+
</div>
212+
</div>
213+
</div>
214+
</section>
215+
</>
216+
)
217+
}

0 commit comments

Comments
 (0)