Testimonials

Two related testimonial sections: the homepage grid of client quotes, and the client-specific block rendered inside a case study.

Testimonials grid (homepage)

Full grid of client quotes with a CTA card. 3 columns on desktop, 2 on tablet, 1 on mobile. Used on the homepage.

Trusted by teams & founders

5.0

Rated 5 stars on Google

Yashu Singh

CommBank

You come across as someone with great knowledge of your topic and bring a lot of experience to make things better.

Mark Dawes

RewardPay

Gabriel is really easy to work with and his output was excellent.

Andrew Barton

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 result!

Ram Prakash K

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

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 address queries...

Mourad Kessas

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 the quality of his work and would highly recommend him.

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

View grid on homepage

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: radial-gradient with light glow at topborder: 1px solid var(--border)border-radius: 20px

Testimonial data structure

tsx

interface Testimonial {
  _id: string
  name: string
  role?: string
  company?: string
  quote: string
  image?: SanityImage
  localImagePath?: string  // For local images
}

Usage

tsx

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

tsx

import { Testimonials } from '@/components/sections/Testimonials'
import { CaseStudyTestimonials } from '@/components/sections/CaseStudyTestimonials'