Featured Testimonial
Homepage hero testimonial with scroll-driven word reveal, star rating, and a link to the review source. Renders fallback copy when no testimonial prop is passed.
Fallback (no testimonial)
In their words
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 sketches into super polished final designs in Figma.
The guy's not just talented; he's quick and no-nonsense, too. No endless back-and-forth, just clear, efficient work that nailed what we were after. Our devs, who've seen a fair share of designs, were genuinely impressed with his Figma files, which speaks volumes!
If you're on the hunt for a UX designer who's not only good but also super easy and fast to work with, Gabriel's your man. Really pleased with how everything turned out and wouldn't hesitate to work with him again!
Michael John Doring
Marketing Manager, Monaco Solicitors
Scroll the preview up and down to see the word-by-word opacity reveal.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
testimonial | Testimonial | null | - | Optional Sanity testimonial. When null or quote is missing, falls back to translation-driven default paragraphs (Michael John Doring, Monaco Solicitors). Quote is split on double newlines into paragraphs that reveal word-by-word on scroll. |
testimonials | Testimonial[] | - | The rest of the roster. The featured testimonial opens the rotation and these follow it, de-duplicated by _id since the featured one also appears in the full list. Omit it and the spotlight shows a single slide. |
Animation details
Scroll reveal
Uses `useScroll` + `useTransform` to map each word's index to an opacity value between 0.15 and 1 based on scroll progress.
Entrance
Card fades / scales in via FadeIn with `animation="scale"` once it enters the viewport.
Import
import { FeaturedTestimonial } from '@/components/sections/FeaturedTestimonial'