Commit ded23b7

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

1 file changed

Lines changed: 104 additions & 27 deletions

File tree

‎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
importuseEmblaCarouselfrom"embla-carousel-react"
66
importAutoPlayfrom"embla-carousel-autoplay"
7-
import{ChevronLeft,ChevronRight}from"lucide-react"
7+
import{ChevronLeft,ChevronRight,Star}from"lucide-react"
88

99
exportinterfaceTestimonial{
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
exportconsttestimonials: 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
<divclassName="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
125-
<divclassName="mx-auto mb-8 max-w-5xl text-center">
194+
<divclassName="mx-auto mb-8 md:max-w-2xl text-center">
126195
<h2className="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
<pclassName="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
<ChevronLeftclassName="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
<ChevronRightclassName="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-
<divclassName="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-
<divclassName="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+
<divclassName="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+
<divclassName="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
<divclassName="overflow-hidden"ref={emblaRef}>
162231
<divclassName="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
<divclassName="group relative py-10 h-full">
168237
<divclassName="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-
<divclassName="flex flex-1 flex-col p-6 md:p-8">
238+
<divclassName="flex flex-1 flex-col p-4 md:p-6">
170239
<divclassName="flex-1">
171-
<pclassName="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+
<pclassName="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
<pclassName="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+
<spanclassName="flex items-center mt-1">
253+
{" "}
254+
{Array.from({length: testimonial.stars},(_,i)=>(
255+
<Starkey={i}className="size-4 fill-violet-500"/>
256+
))}
257+
</span>
258+
)}
182259
</p>
183260
</div>
184261
</div>

0 commit comments

Comments
 (0)
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Commit ded23b7
Browse files
brunobergherbrunobergher
authored
web: Testimonials (RooCodeInc#8360)
* Adds lots of testimonials, 5-stars from marketplace
* Fits more testimonials in one page
* Testimonial heading tweak
1 parent a57528d commit ded23b7
1 file changed
Lines changed: 104 additions & 27 deletions
File tree
‎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
importuseEmblaCarouselfrom"embla-carousel-react"
66
importAutoPlayfrom"embla-carousel-autoplay"
7-
import{ChevronLeft,ChevronRight}from"lucide-react"
7+
import{ChevronLeft,ChevronRight,Star}from"lucide-react"
88

99
exportinterfaceTestimonial{
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
exportconsttestimonials: 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
<divclassName="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
125-
<divclassName="mx-auto mb-8 max-w-5xl text-center">
194+
<divclassName="mx-auto mb-8 md:max-w-2xl text-center">
126195
<h2className="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
<pclassName="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
<ChevronLeftclassName="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
<ChevronRightclassName="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-
<divclassName="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-
<divclassName="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+
<divclassName="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+
<divclassName="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
<divclassName="overflow-hidden"ref={emblaRef}>
162231
<divclassName="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
<divclassName="group relative py-10 h-full">
168237
<divclassName="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-
<divclassName="flex flex-1 flex-col p-6 md:p-8">
238+
<divclassName="flex flex-1 flex-col p-4 md:p-6">
170239
<divclassName="flex-1">
171-
<pclassName="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+
<pclassName="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
<pclassName="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+
<spanclassName="flex items-center mt-1">
253+
{" "}
254+
{Array.from({length: testimonial.stars},(_,i)=>(
255+
<Starkey={i}className="size-4 fill-violet-500"/>
256+
))}
257+
</span>
258+
)}
182259
</p>
183260
</div>
184261
</div>
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit ded23b7
Browse files
brunobergherbrunobergher
authored
web: Testimonials (RooCodeInc#8360)
* Adds lots of testimonials, 5-stars from marketplace
* Fits more testimonials in one page
* Testimonial heading tweak
1 parent a57528d commit ded23b7
1 file changed
Lines changed: 104 additions & 27 deletions
File tree
‎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
importuseEmblaCarouselfrom"embla-carousel-react"
66
importAutoPlayfrom"embla-carousel-autoplay"
7-
import{ChevronLeft,ChevronRight}from"lucide-react"
7+
import{ChevronLeft,ChevronRight,Star}from"lucide-react"
88

99
exportinterfaceTestimonial{
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
exportconsttestimonials: 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
<divclassName="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
125-
<divclassName="mx-auto mb-8 max-w-5xl text-center">
194+
<divclassName="mx-auto mb-8 md:max-w-2xl text-center">
126195
<h2className="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
<pclassName="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
<ChevronLeftclassName="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
<ChevronRightclassName="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-
<divclassName="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-
<divclassName="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+
<divclassName="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+
<divclassName="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
<divclassName="overflow-hidden"ref={emblaRef}>
162231
<divclassName="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
<divclassName="group relative py-10 h-full">
168237
<divclassName="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-
<divclassName="flex flex-1 flex-col p-6 md:p-8">
238+
<divclassName="flex flex-1 flex-col p-4 md:p-6">
170239
<divclassName="flex-1">
171-
<pclassName="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+
<pclassName="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
<pclassName="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+
<spanclassName="flex items-center mt-1">
253+
{" "}
254+
{Array.from({length: testimonial.stars},(_,i)=>(
255+
<Starkey={i}className="size-4 fill-violet-500"/>
256+
))}
257+
</span>
258+
)}
182259
</p>
183260
</div>
184261
</div>
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit ded23b7
Browse files
brunobergherbrunobergher
authored
web: Testimonials (RooCodeInc#8360)
* Adds lots of testimonials, 5-stars from marketplace
* Fits more testimonials in one page
* Testimonial heading tweak
1 parent a57528d commit ded23b7
1 file changed
Lines changed: 104 additions & 27 deletions
File tree
‎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
importuseEmblaCarouselfrom"embla-carousel-react"
66
importAutoPlayfrom"embla-carousel-autoplay"
7-
import{ChevronLeft,ChevronRight}from"lucide-react"
7+
import{ChevronLeft,ChevronRight,Star}from"lucide-react"
88

99
exportinterfaceTestimonial{
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
exportconsttestimonials: 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
<divclassName="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
125-
<divclassName="mx-auto mb-8 max-w-5xl text-center">
194+
<divclassName="mx-auto mb-8 md:max-w-2xl text-center">
126195
<h2className="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
<pclassName="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
<ChevronLeftclassName="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
<ChevronRightclassName="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-
<divclassName="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-
<divclassName="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+
<divclassName="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+
<divclassName="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
<divclassName="overflow-hidden"ref={emblaRef}>
162231
<divclassName="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
<divclassName="group relative py-10 h-full">
168237
<divclassName="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-
<divclassName="flex flex-1 flex-col p-6 md:p-8">
238+
<divclassName="flex flex-1 flex-col p-4 md:p-6">
170239
<divclassName="flex-1">
171-
<pclassName="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+
<pclassName="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
<pclassName="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+
<spanclassName="flex items-center mt-1">
253+
{" "}
254+
{Array.from({length: testimonial.stars},(_,i)=>(
255+
<Starkey={i}className="size-4 fill-violet-500"/>
256+
))}
257+
</span>
258+
)}
182259
</p>
183260
</div>
184261
</div>
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Commit ded23b7
Browse files
brunobergherbrunobergher
authored
web: Testimonials (RooCodeInc#8360)
* Adds lots of testimonials, 5-stars from marketplace
* Fits more testimonials in one page
* Testimonial heading tweak
1 parent a57528d commit ded23b7
1 file changed
Lines changed: 104 additions & 27 deletions
File tree
‎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
importuseEmblaCarouselfrom"embla-carousel-react"
66
importAutoPlayfrom"embla-carousel-autoplay"
7-
import{ChevronLeft,ChevronRight}from"lucide-react"
7+
import{ChevronLeft,ChevronRight,Star}from"lucide-react"
88

99
exportinterfaceTestimonial{
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
exportconsttestimonials: 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
<divclassName="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
125-
<divclassName="mx-auto mb-8 max-w-5xl text-center">
194+
<divclassName="mx-auto mb-8 md:max-w-2xl text-center">
126195
<h2className="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
<pclassName="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
<ChevronLeftclassName="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
<ChevronRightclassName="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-
<divclassName="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-
<divclassName="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+
<divclassName="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+
<divclassName="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
<divclassName="overflow-hidden"ref={emblaRef}>
162231
<divclassName="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
<divclassName="group relative py-10 h-full">
168237
<divclassName="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-
<divclassName="flex flex-1 flex-col p-6 md:p-8">
238+
<divclassName="flex flex-1 flex-col p-4 md:p-6">
170239
<divclassName="flex-1">
171-
<pclassName="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+
<pclassName="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
<pclassName="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+
<spanclassName="flex items-center mt-1">
253+
{" "}
254+
{Array.from({length: testimonial.stars},(_,i)=>(
255+
<Starkey={i}className="size-4 fill-violet-500"/>
256+
))}
257+
</span>
258+
)}
182259
</p>
183260
</div>
184261
</div>
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit ded23b7
Browse files
brunobergherbrunobergher
authored
web: Testimonials (RooCodeInc#8360)
* Adds lots of testimonials, 5-stars from marketplace
* Fits more testimonials in one page
* Testimonial heading tweak
1 parent a57528d commit ded23b7
1 file changed
Lines changed: 104 additions & 27 deletions
File tree
‎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
importuseEmblaCarouselfrom"embla-carousel-react"
66
importAutoPlayfrom"embla-carousel-autoplay"
7-
import{ChevronLeft,ChevronRight}from"lucide-react"
7+
import{ChevronLeft,ChevronRight,Star}from"lucide-react"
88

99
exportinterfaceTestimonial{
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
exportconsttestimonials: 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
<divclassName="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
125-
<divclassName="mx-auto mb-8 max-w-5xl text-center">
194+
<divclassName="mx-auto mb-8 md:max-w-2xl text-center">
126195
<h2className="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
<pclassName="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
<ChevronLeftclassName="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
<ChevronRightclassName="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-
<divclassName="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-
<divclassName="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+
<divclassName="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+
<divclassName="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
<divclassName="overflow-hidden"ref={emblaRef}>
162231
<divclassName="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
<divclassName="group relative py-10 h-full">
168237
<divclassName="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-
<divclassName="flex flex-1 flex-col p-6 md:p-8">
238+
<divclassName="flex flex-1 flex-col p-4 md:p-6">
170239
<divclassName="flex-1">
171-
<pclassName="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+
<pclassName="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
<pclassName="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+
<spanclassName="flex items-center mt-1">
253+
{" "}
254+
{Array.from({length: testimonial.stars},(_,i)=>(
255+
<Starkey={i}className="size-4 fill-violet-500"/>
256+
))}
257+
</span>
258+
)}
182259
</p>
183260
</div>
184261
</div>
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit ded23b7
Browse files
brunobergherbrunobergher
authored
web: Testimonials (RooCodeInc#8360)
* Adds lots of testimonials, 5-stars from marketplace
* Fits more testimonials in one page
* Testimonial heading tweak
1 parent a57528d commit ded23b7
1 file changed
Lines changed: 104 additions & 27 deletions
File tree
‎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
importuseEmblaCarouselfrom"embla-carousel-react"
66
importAutoPlayfrom"embla-carousel-autoplay"
7-
import{ChevronLeft,ChevronRight}from"lucide-react"
7+
import{ChevronLeft,ChevronRight,Star}from"lucide-react"
88

99
exportinterfaceTestimonial{
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
exportconsttestimonials: 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
<divclassName="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
125-
<divclassName="mx-auto mb-8 max-w-5xl text-center">
194+
<divclassName="mx-auto mb-8 md:max-w-2xl text-center">
126195
<h2className="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
<pclassName="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
<ChevronLeftclassName="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
<ChevronRightclassName="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-
<divclassName="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-
<divclassName="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+
<divclassName="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+
<divclassName="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
<divclassName="overflow-hidden"ref={emblaRef}>
162231
<divclassName="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
<divclassName="group relative py-10 h-full">
168237
<divclassName="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-
<divclassName="flex flex-1 flex-col p-6 md:p-8">
238+
<divclassName="flex flex-1 flex-col p-4 md:p-6">
170239
<divclassName="flex-1">
171-
<pclassName="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+
<pclassName="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
<pclassName="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+
<spanclassName="flex items-center mt-1">
253+
{" "}
254+
{Array.from({length: testimonial.stars},(_,i)=>(
255+
<Starkey={i}className="size-4 fill-violet-500"/>
256+
))}
257+
</span>
258+
)}
182259
</p>
183260
</div>
184261
</div>
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Commit ded23b7
Browse files
brunobergherbrunobergher
authored
web: Testimonials (RooCodeInc#8360)
* Adds lots of testimonials, 5-stars from marketplace
* Fits more testimonials in one page
* Testimonial heading tweak
1 parent a57528d commit ded23b7
1 file changed
Lines changed: 104 additions & 27 deletions
File tree
‎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
importuseEmblaCarouselfrom"embla-carousel-react"
66
importAutoPlayfrom"embla-carousel-autoplay"
7-
import{ChevronLeft,ChevronRight}from"lucide-react"
7+
import{ChevronLeft,ChevronRight,Star}from"lucide-react"
88

99
exportinterfaceTestimonial{
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
exportconsttestimonials: 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
<divclassName="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
125-
<divclassName="mx-auto mb-8 max-w-5xl text-center">
194+
<divclassName="mx-auto mb-8 md:max-w-2xl text-center">
126195
<h2className="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
<pclassName="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
<ChevronLeftclassName="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
<ChevronRightclassName="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-
<divclassName="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-
<divclassName="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+
<divclassName="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+
<divclassName="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
<divclassName="overflow-hidden"ref={emblaRef}>
162231
<divclassName="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
<divclassName="group relative py-10 h-full">
168237
<divclassName="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-
<divclassName="flex flex-1 flex-col p-6 md:p-8">
238+
<divclassName="flex flex-1 flex-col p-4 md:p-6">
170239
<divclassName="flex-1">
171-
<pclassName="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+
<pclassName="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
<pclassName="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+
<spanclassName="flex items-center mt-1">
253+
{" "}
254+
{Array.from({length: testimonial.stars},(_,i)=>(
255+
<Starkey={i}className="size-4 fill-violet-500"/>
256+
))}
257+
</span>
258+
)}
182259
</p>
183260
</div>
184261
</div>
0 commit comments
Comments
 (0)