Testimonials
Two related testimonial sections: the homepage grid of client quotes, and the client-specific block rendered inside a case study.
Testimonials grid (homepage)
Continuously scrolling marquee of client quotes, paused on hover. The track duplicates the sequence so the loop has no seam. Used on the homepage.
Trusted by teams & founders
Tap a review to pause
Yashu Singh
Product Owner, CommBank
You come across as someone with great knowledge of your topic and bring a lot of experience to make things better.
Mark Dawes
CEO, RewardPay
Gabriel is really easy to work with and his output was excellent.
Andrew Barton
Founder, Whistle
Gabriel has been working with us for the better part of two years. We have and continue to be happy with his flexibility in meeting our timeframes, collaboration and excellent…
Ram Prakash K
UX Designer, CommBank
Gabriel consistently brought a strong eye for detail, deep understanding of design systems, and a knack for translating complex requirements into elegant UI solutions.
Alan Ung
Software Engineer, CommBank
One of the most commendable aspects of your work on the CBA project has been your proactive communication. Your highly positive work ethic is evident in the way you promptly…
Mourad Kessas
CTO, RewardPay
l've had the pleasure of working with Gabriel on multiple projects, and the results have always been exceptional. He's creative, prompt, and very easy to work with. I really value…
Michael John Doring
Marketing Manager, Monaco Solicitors
Worked with Gabriel on a refresh for the Monaco Solicitors website. I was on the wireframing side of things, sketching out our initial ideas, and Gabriel was the one turning those…
Alan Ung
Software Engineer, CommBank
One of the most commendable aspects of your work on the CBA project has been your proactive communication. Your highly positive work ethic is evident in the way you promptly…
Mourad Kessas
CTO, RewardPay
l've had the pleasure of working with Gabriel on multiple projects, and the results have always been exceptional. He's creative, prompt, and very easy to work with. I really value…
Michael John Doring
Marketing Manager, Monaco Solicitors
Worked with Gabriel on a refresh for the Monaco Solicitors website. I was on the wireframing side of things, sketching out our initial ideas, and Gabriel was the one turning those…
Case study testimonials
Client-specific block rendered inside /work/[slug]. Up to two cards side-by-side on md+.
What RewardPay says
Mark Dawes
Founder, RewardPay
Gabriel is really easy to work with and his output was excellent. Delivered a clean, scalable pattern we still use today.
Yashu Singh
Senior Manager, CommBank
You come across as someone with great knowledge of your topic and bring a lot of experience to make things better.
Case study testimonials — single
Single testimonial renders as a centered card.
What RewardPay says
Mark Dawes
Founder, RewardPay
Gabriel is really easy to work with and his output was excellent. Delivered a clean, scalable pattern we still use today.
View full version
Testimonials props
| Prop | Type | Default | Description |
|---|---|---|---|
testimonials | Testimonial[] | - | Array of testimonial data. Uses built-in defaults if not provided. |
showTitle | boolean | true | Whether to show the section header with star rating. |
Case study testimonials props
| Prop | Type | Default | Description |
|---|---|---|---|
testimonials* | Testimonial[] | - | Testimonials from the same client as the case study. Returns null when empty. |
clientName* | string | - | Client name used in the heading, e.g. "What RewardPay says". |
Card styling
Both use the .card-radial class:
background: var(--surface-card)border: 1px solid var(--border-subtle)A flat opaque slab, not the lit-plane gradient the other cards use — modelled on the large feature panels on linear.app/build. Opaque on purpose: a translucent version let the decorative page glow bleed through and tint the card blue. Corners come from rounded-xl (12px) in TestimonialCard.tsx, not from the class.
Testimonial data structure
interface Testimonial {
_id: string
name: string
role?: string
company?: string
quote: string
image?: SanityImage
localImagePath?: string // For local images
}Usage
import { Testimonials } from '@/components/sections/Testimonials'
import { CaseStudyTestimonials } from '@/components/sections/CaseStudyTestimonials'
// Homepage grid
<Testimonials />
<Testimonials testimonials={testimonials} />
<Testimonials showTitle={false} />
// Inside a case study page
<CaseStudyTestimonials
testimonials={clientTestimonials}
clientName="RewardPay"
/>Import
import { Testimonials } from '@/components/sections/Testimonials'
import { CaseStudyTestimonials } from '@/components/sections/CaseStudyTestimonials'