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)
Michael John Doring
Marketing Manager, Monaco Solicitors
WorkedwithGabrielonarefreshfortheMonacoSolicitorswebsite.Iwasonthewireframingsideofthings,sketchingoutourinitialideas,andGabrielwastheoneturningthosesketchesintosuperpolishedfinaldesignsinFigma.
Theguy'snotjusttalented;he'squickandno-nonsense,too.Noendlessback-and-forth,justclear,efficientworkthatnailedwhatwewereafter.Ourdevs,who'veseenafairshareofdesigns,weregenuinelyimpressedwithhisFigmafiles,whichspeaksvolumes!
Ifyou'reonthehuntforaUXdesignerwho'snotonlygoodbutalsosupereasyandfasttoworkwith,Gabriel'syourman.Reallypleasedwithhoweverythingturnedoutandwouldn'thesitatetoworkwithhimagain!
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. |
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'