Skip to content

Commit dcde02e

Browse files
thill2323daniel-lxs
thill2323
authored and
daniel-lxs
committed
Testimonial enhancements
1 parent 05f67b6 commit dcde02e

File tree

2 files changed

+57
-27
lines changed

2 files changed

+57
-27
lines changed

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

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,37 @@ export function TestimonialsMobile() {
1818
<div className="flex">
1919
{testimonials.map((testimonial) => (
2020
<div className="min-w-0 flex-[0_0_100%] px-4" key={testimonial.id}>
21-
<div className="relative py-8">
21+
<div className="relative rounded-2xl border border-border/50 bg-background/30 p-8 backdrop-blur-xl dark:border-border/70 dark:bg-background/40">
2222
<svg
23-
className="absolute left-0 top-0 h-8 w-8 text-blue-500/30"
23+
className="absolute left-8 top-8 h-8 w-8 text-blue-500/30 dark:text-blue-400/50"
2424
fill="currentColor"
2525
viewBox="0 0 32 32">
26-
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
26+
<defs>
27+
<filter id="glow-mobile">
28+
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
29+
<feMerge>
30+
<feMergeNode in="coloredBlur" />
31+
<feMergeNode in="SourceGraphic" />
32+
</feMerge>
33+
</filter>
34+
</defs>
35+
<path
36+
d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z"
37+
className="dark:filter dark:drop-shadow-[0_0_8px_rgba(96,165,250,0.4)]"
38+
/>
2739
</svg>
2840

29-
<blockquote className="mt-8">
30-
<p className="text-lg font-light italic leading-relaxed text-muted-foreground">
41+
<blockquote className="mt-12">
42+
<p className="text-lg font-light italic leading-relaxed text-muted-foreground dark:text-foreground/70">
3143
&quot;{testimonial.quote}&quot;
3244
</p>
3345

3446
<footer className="mt-6">
35-
<div className="h-px w-12 bg-gradient-to-r from-blue-500/30 to-transparent" />
36-
<p className="mt-4 font-medium text-foreground/90">{testimonial.name}</p>
37-
<p className="text-sm text-muted-foreground">
47+
<div className="h-px w-12 bg-gradient-to-r from-blue-500/50 to-transparent dark:from-blue-400/70" />
48+
<p className="mt-4 font-medium text-foreground/90 dark:text-foreground">
49+
{testimonial.name}
50+
</p>
51+
<p className="text-sm text-muted-foreground dark:text-muted-foreground/80">
3852
{testimonial.role} at {testimonial.company}
3953
</p>
4054
</footer>

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

Lines changed: 35 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -135,10 +135,10 @@ export function Testimonials() {
135135
key={testimonial.id}
136136
variants={itemVariants}
137137
className={`group relative ${index % 2 === 0 ? "md:translate-y-4" : "md:translate-y-12"}`}>
138-
<div className="absolute -inset-px rounded-2xl bg-gradient-to-r from-blue-500/30 via-cyan-500/30 to-purple-500/30 opacity-0 blur-sm transition-all duration-500 ease-out group-hover:opacity-100" />
139-
<div className="relative h-full rounded-2xl border border-border/50 bg-background/30 backdrop-blur-xl transition-all duration-500 ease-out group-hover:border-border group-hover:bg-background/40">
138+
<div className="absolute -inset-px rounded-2xl bg-gradient-to-r from-blue-500/30 via-cyan-500/30 to-purple-500/30 opacity-0 blur-sm transition-all duration-500 ease-out group-hover:opacity-100 dark:from-blue-400/40 dark:via-cyan-400/40 dark:to-purple-400/40" />
139+
<div className="relative flex h-full flex-col rounded-2xl border border-border/50 bg-background/30 backdrop-blur-xl transition-all duration-500 ease-out group-hover:scale-[1.02] group-hover:border-border group-hover:bg-background/40 group-hover:shadow-2xl 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)]">
140140
{testimonial.image && (
141-
<div className="absolute -right-3 -top-3 h-16 w-16 overflow-hidden rounded-xl border border-border/50 bg-background/50 p-1.5 backdrop-blur-xl transition-all duration-500 ease-out group-hover:scale-105">
141+
<div className="absolute -right-3 -top-3 h-16 w-16 overflow-hidden rounded-xl border border-border/50 bg-background/50 p-1.5 backdrop-blur-xl transition-all duration-500 ease-out group-hover:scale-110 dark:border-border/70 dark:bg-background/60">
142142
<div className="relative h-full w-full overflow-hidden rounded-lg">
143143
<Image
144144
src={testimonial.image || "/placeholder_pfp.png"}
@@ -150,24 +150,40 @@ export function Testimonials() {
150150
</div>
151151
)}
152152

153-
<div className="p-8">
154-
<div className="mb-6">
155-
<svg
156-
className="h-8 w-8 text-blue-500/20"
157-
fill="currentColor"
158-
viewBox="0 0 32 32">
159-
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
160-
</svg>
161-
</div>
153+
<div className="flex flex-1 flex-col p-8">
154+
<div className="flex-1">
155+
<div className="mb-6">
156+
<svg
157+
className="h-8 w-8 text-blue-500/20 transition-all duration-500 group-hover:text-blue-500/30 dark:text-blue-400/40 dark:group-hover:text-blue-400/60"
158+
fill="currentColor"
159+
viewBox="0 0 32 32">
160+
<defs>
161+
<filter id="glow">
162+
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
163+
<feMerge>
164+
<feMergeNode in="coloredBlur" />
165+
<feMergeNode in="SourceGraphic" />
166+
</feMerge>
167+
</filter>
168+
</defs>
169+
<path
170+
d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z"
171+
className="dark:filter dark:drop-shadow-[0_0_8px_rgba(96,165,250,0.4)]"
172+
/>
173+
</svg>
174+
</div>
162175

163-
<p className="relative mb-6 text-lg leading-relaxed text-muted-foreground">
164-
{testimonial.quote}
165-
</p>
176+
<p className="relative text-lg leading-relaxed text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80 dark:text-foreground/70 dark:group-hover:text-foreground/90">
177+
{testimonial.quote}
178+
</p>
179+
</div>
166180

167-
<div className="relative">
168-
<div className="mb-4 h-px w-12 bg-gradient-to-r from-blue-500/50 to-transparent" />
169-
<h3 className="font-medium text-foreground/90">{testimonial.name}</h3>
170-
<p className="text-sm text-muted-foreground">
181+
<div className="relative mt-6">
182+
<div className="mb-4 h-px w-12 bg-gradient-to-r from-blue-500/50 to-transparent transition-all duration-500 group-hover:w-16 group-hover:from-blue-500/70 dark:from-blue-400/70 dark:group-hover:from-blue-400/90" />
183+
<h3 className="font-medium text-foreground/90 transition-colors duration-300 dark:text-foreground">
184+
{testimonial.name}
185+
</h3>
186+
<p className="text-sm text-muted-foreground transition-colors duration-300 dark:text-muted-foreground/80">
171187
{testimonial.role} at {testimonial.company}
172188
</p>
173189
</div>

0 commit comments

Comments
 (0)