Skip to content

Commit ded23b7

Browse files
authored
web: Testimonials (#8360)
* Adds lots of testimonials, 5-stars from marketplace * Fits more testimonials in one page * Testimonial heading tweak
1 parent a57528d commit ded23b7

File tree

1 file changed

+104
-27
lines changed

1 file changed

+104
-27
lines changed

apps/web-roo-code/src/components/homepage/testimonials.tsx

Lines changed: 104 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,114 @@ import { useRef, useCallback, useEffect } from "react"
44
import { motion } from "framer-motion"
55
import useEmblaCarousel from "embla-carousel-react"
66
import AutoPlay from "embla-carousel-autoplay"
7-
import { ChevronLeft, ChevronRight } from "lucide-react"
7+
import { ChevronLeft, ChevronRight, Star } from "lucide-react"
88

99
export interface Testimonial {
10-
id: number
1110
name: string
1211
role: string
13-
company: string
14-
image?: string
12+
origin: string
1513
quote: string
14+
image?: string
15+
stars?: number
1616
}
1717

1818
export const testimonials: Testimonial[] = [
1919
{
20-
id: 1,
2120
name: "Luca",
2221
role: "Reviewer",
23-
company: "VS Code Marketplace",
22+
origin: "VS Code Marketplace",
2423
quote: "Roo Code is an absolute game-changer! 🚀 It makes coding faster, easier, and more intuitive with its smart AI-powered suggestions, real-time debugging, and automation features. The seamless integration with VS Code is a huge plus, and the constant updates ensure it keeps getting better",
24+
stars: 5,
2525
},
2626
{
27-
id: 2,
2827
name: "Taro Woollett-Chiba",
2928
role: "AI Product Lead",
30-
company: "Vendidit",
29+
origin: "Vendidit",
3130
quote: "Easily the best AI code editor. Roo Code has the best features and capabilities, along with the best development team. I swear, they're the fastest to support new models and implement useful functionality whenever users mention it... simply amazing.",
3231
},
3332
{
34-
id: 3,
3533
name: "Can Nuri",
3634
role: "Reviewer",
37-
company: "VS Code Marketplace",
35+
origin: "VS Code Marketplace",
3836
quote: "Roo Code is one of the most inspiring projects I have seen for a long time. It shapes the way I think and deal with software development.",
37+
stars: 5,
3938
},
4039
{
41-
id: 4,
4240
name: "Michael",
4341
role: "Reviewer",
44-
company: "VS Code Marketplace",
42+
origin: "VS Code Marketplace",
4543
quote: "I switched from Windsurf to Roo Code in January and honestly, it's been a huge upgrade. Windsurf kept making mistakes and being dumb when I ask it for things. Roo just gets it. Projects that used to take a full day now wrap up before lunch. ",
44+
stars: 5,
45+
},
46+
{
47+
name: "Darien Hardin",
48+
role: "Reviewer",
49+
origin: "VS Code Marketplace",
50+
quote: "By far the best coding tool I have used. Looking forward to where this goes in the future. Also, their Discord is an excellent resource with many knowledgeable users sharing their discoveries.",
51+
stars: 5,
52+
},
53+
{
54+
name: "Wiliam Azzam",
55+
role: "Reviewer",
56+
origin: "VS Code Marketplace",
57+
quote: "I've tried Cursor, Windsurf, Cline, Trae and others, and although using RooCode with OpenRouter is more expensive, it is also far more effective. Its agents and initial setup, and learning how to use Code/Architect/Orchestrator, help a great deal in developing quality projects.",
58+
stars: 5,
59+
},
60+
{
61+
name: "Matěj Zapletal",
62+
role: "Reviewer",
63+
origin: "VS Code Marketplace",
64+
quote: "Definitely the best AI coding agent extension.",
65+
stars: 5,
66+
},
67+
{
68+
name: "Ali Davachi",
69+
role: "Reviewer",
70+
origin: "VS Code Marketplace",
71+
quote: "We tried the rest, now we are using the best. The alternatives are more restrictive. I didn't use competitors for a reason. This team is killing it.",
72+
stars: 5,
73+
},
74+
{
75+
name: "Ryan Booth",
76+
role: "Reviewer",
77+
origin: "VS Code Marketplace",
78+
quote: "I work inside Roo about 60+ hours a week and usually roo is building something at all hours of the day. An amazing tool by an amazing team!",
79+
stars: 5,
80+
},
81+
{
82+
name: "Matthew Martin",
83+
role: "Reviewer",
84+
origin: "VS Code Marketplace",
85+
quote: "i spent a fortune trying to dial in various tools to get them to work the way i want, and then i found roocode. customizable for your flavors on your terms. this is what i always wanted.",
86+
stars: 5,
87+
},
88+
{
89+
name: "Edwin Jacques",
90+
role: "Reviewer",
91+
origin: "VS Code Marketplace",
92+
quote: "The BEST. Super fast, no-nonsense, UI that makes sense, many API provider choices, responsive, helpful developer community.",
93+
stars: 5,
94+
},
95+
{
96+
name: "Sean McCann",
97+
role: "Reviewer",
98+
origin: "VS Code Marketplace",
99+
quote: "Roo Code is impressively capable while staying refreshingly simple. It integrates seamlessly into VS Code and handles everything from generating code to refactoring with accuracy and speed. It feels like a natural part of the workflow—no clutter, just results. Extra points for the flexibility of the different agents and the ability to customize them to fit the job.",
100+
stars: 5,
101+
},
102+
{
103+
name: "Colin Tate",
104+
role: "Reviewer",
105+
origin: "VS Code Marketplace",
106+
quote: "Absolutely amazing extension. I had tried Cursor previously, and this just beats it hands down. I've used it for several large projects now, and it is now my go-to for creating things that would normally take weeks or months. Highly recommended.",
107+
stars: 5,
108+
},
109+
{
110+
name: "Michael Scott",
111+
role: "Reviewer",
112+
origin: "VS Code Marketplace",
113+
quote: "I've used all the IDEs and all the assistants - Roo Code is hands down the best of them. It's also one of the few that lets you bring your own API keys - no subscriptions required, just pay as you need/go! Fantastic team and support as well!",
114+
stars: 5,
46115
},
47116
]
48117

@@ -58,8 +127,8 @@ export function Testimonials() {
58127
[
59128
AutoPlay({
60129
playOnInit: true,
61-
delay: 4000,
62-
stopOnInteraction: true,
130+
delay: 3_500,
131+
stopOnInteraction: false,
63132
stopOnMouseEnter: true,
64133
stopOnFocusIn: true,
65134
}),
@@ -122,53 +191,53 @@ export function Testimonials() {
122191
</div>
123192

124193
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
125-
<div className="mx-auto mb-8 max-w-5xl text-center">
194+
<div className="mx-auto mb-8 md:max-w-2xl text-center">
126195
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">
127-
AI-forward developers are using Roo Code
196+
Developers <em>really</em> shipping with AI are using Roo Code
128197
</h2>
129198
<p className="mt-6 text-lg text-muted-foreground">
130-
Join more than 800k people revolutionizing their workflow worldwide
199+
Join more than 1M people revolutionizing their workflow worldwide
131200
</p>
132201
</div>
133202

134203
<motion.div
135-
className="relative mx-auto max-w-[1400px]"
204+
className="relative -mx-4 md:mx-auto max-w-[1400px]"
136205
variants={containerVariants}
137206
initial="hidden"
138207
whileInView="visible"
139208
viewport={{ once: true }}>
140209
{/* Previous Button */}
141210
<button
142211
onClick={scrollPrev}
143-
className="absolute left-0 top-1/2 z-20 -translate-y-1/2 rounded-full border border-border/50 bg-background/80 p-2 backdrop-blur-xl transition-all duration-300 hover:scale-110 hover:shadow-lg md:left-4 md:p-3 lg:left-8"
212+
className="absolute left-1 top-1/2 z-20 -translate-y-1/2 rounded-full border border-border/50 bg-background/80 p-2 backdrop-blur-xl transition-all duration-300 hover:scale-110 hover:shadow-lg md:left-4 md:p-3 lg:left-8"
144213
aria-label="Previous testimonial">
145214
<ChevronLeft className="h-5 w-5 text-muted-foreground transition-colors hover:text-foreground md:h-6 md:w-6" />
146215
</button>
147216

148217
{/* Next Button */}
149218
<button
150219
onClick={scrollNext}
151-
className="absolute right-0 top-1/2 z-20 -translate-y-1/2 rounded-full border border-border/50 bg-background/80 p-2 backdrop-blur-xl transition-all duration-300 hover:scale-110 hover:shadow-lg md:right-4 md:p-3 lg:right-8"
220+
className="absolute right-1 top-1/2 z-20 -translate-y-1/2 rounded-full border border-border/50 bg-background/80 p-2 backdrop-blur-xl transition-all duration-300 hover:scale-110 hover:shadow-lg md:right-4 md:p-3 lg:right-8"
152221
aria-label="Next testimonial">
153222
<ChevronRight className="h-5 w-5 text-muted-foreground transition-colors hover:text-foreground md:h-6 md:w-6" />
154223
</button>
155224

156225
{/* Gradient Overlays */}
157-
<div className="absolute inset-y-0 left-0 z-10 w-[10%] bg-gradient-to-r from-background to-transparent pointer-events-none md:w-[15%]" />
158-
<div className="absolute inset-y-0 right-0 z-10 w-[10%] bg-gradient-to-l from-background to-transparent pointer-events-none md:w-[15%]" />
226+
<div className="hidden md:block absolute inset-y-0 left-0 z-10 w-[10%] bg-gradient-to-r from-background to-transparent pointer-events-none md:w-[15%]" />
227+
<div className="hidden md:block absolute inset-y-0 right-0 z-10 w-[10%] bg-gradient-to-l from-background to-transparent pointer-events-none md:w-[15%]" />
159228

160229
{/* Embla Carousel Container */}
161230
<div className="overflow-hidden" ref={emblaRef}>
162231
<div className="flex">
163232
{testimonials.map((testimonial) => (
164233
<div
165-
key={testimonial.id}
166-
className="relative min-w-0 flex-[0_0_85%] px-2 md:flex-[0_0_70%] md:px-4 lg:flex-[0_0_60%]">
234+
key={testimonial.name}
235+
className="relative min-w-0 flex-[0_0_85%] px-2 md:flex-[0_0_70%] md:px-4 lg:flex-[0_0_30%]">
167236
<div className="group relative py-10 h-full">
168237
<div className="relative flex h-full flex-col rounded-2xl border border-border bg-background transition-all duration-500 ease-out group-hover:scale-[1.02] group-hover:border-border group-hover:bg-background/40 group-hover:shadow-xl dark:border-border/70 dark:bg-background/40 dark:group-hover:border-border dark:group-hover:bg-background/60 dark:group-hover:shadow-[0_20px_50px_rgba(59,130,246,0.15)]">
169-
<div className="flex flex-1 flex-col p-6 md:p-8">
238+
<div className="flex flex-1 flex-col p-4 md:p-6">
170239
<div className="flex-1">
171-
<p className="relative text-sm leading-relaxed text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80 dark:text-foreground/70 dark:group-hover:text-foreground/90 md:text-lg">
240+
<p className="relative text-sm leading-relaxed text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80 dark:text-foreground/70 dark:group-hover:text-foreground/90">
172241
{testimonial.quote}
173242
</p>
174243
</div>
@@ -178,7 +247,15 @@ export function Testimonials() {
178247
{testimonial.name}
179248
</h3>
180249
<p className="text-sm text-muted-foreground transition-colors duration-300 dark:text-muted-foreground/80">
181-
{testimonial.role} at {testimonial.company}
250+
{testimonial.role} at {testimonial.origin}
251+
{testimonial.stars && (
252+
<span className="flex items-center mt-1">
253+
{" "}
254+
{Array.from({ length: testimonial.stars }, (_, i) => (
255+
<Star key={i} className="size-4 fill-violet-500" />
256+
))}
257+
</span>
258+
)}
182259
</p>
183260
</div>
184261
</div>

0 commit comments

Comments
 (0)