Review Rating Card
The 5.0 Google rating with real client reviews under it, on the live aqua silk (StatCard with the flow backdrop). Its only link is the icon button out to the full Google reviews. Leads the UX audit's proof bento and sits above the proof on the other service pages. Reviews opt in from Sanity by having a pull quote.
Rotating (two or more reviews)
5.0Google rating
“Working with Gabriel on our new website for Hychem Flooring was a genuinely great experience. He's refreshingly direct. He tells you how it is, gives you a realistic plan and then delivers it, with no fluff and no runaround.”
Single review (no dots, no timer)
5.0Google rating
“Working with Gabriel on our new website for Hychem Flooring was a genuinely great experience. He's refreshingly direct. He tells you how it is, gives you a realistic plan and then delivers it, with no fluff and no runaround.”
Behaviour
- Every review sits in the same grid cell, so the card is always as tall as its longest review and never jumps when one changes.
- The outgoing review hides at once and only the incoming one fades in. A crossfade would show two quotes, two faces and two names on top of each other mid-change.
- Advances every 7 seconds, only while at least 40% of it is on screen. Pauses on hover and keyboard focus. Never auto-advances for visitors who prefer reduced motion; the dots work for everyone.
- All reviews are in the server HTML; hidden ones are
invisible,aria-hiddenandinert. The live region is off while it rotates (WAI carousel pattern), so screen readers aren't interrupted.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
reviews | RatingCardReview[] | - | Reviews to rotate, in order — the result of `reviewCardQuery` (testimonials with a `pullQuote` set in Sanity, sorted by their "Rating card position"). Falls back to `defaultRatingReviews` when empty. |
className | string | - | Additional classes merged onto the card. |
Import
tsx
import { ReviewRatingCard } from '@/components/ui/ReviewRatingCard'Usage
tsx
const reviews = await sanityFetch<RatingCardReview[]>({
query: reviewCardQuery,
tags: ['testimonial'],
})
<ReviewRatingCard reviews={reviews} />