Centered Testimonial Card Grid Hero Block for React

Edit TESTIMONIALS at the top of the file: each has a lead (the opening of the quote, in the text colour), an optional rest (muted), the customer's name, role, company and the initials shown in the avatar. The wall lays out as many as you give it; a multiple of three (or of two, if most visitors are on tablets) keeps the last row full. Keep quotes to one or two sentences: cells in a row stretch to the tallest, so one long quote makes its whole row taller.

Add an AvatarImage with the photo's src inside each Avatar, before the AvatarFallback, and add the photo to each testimonial's data. The photo shows once it has loaded and the initials remain the fallback. Leave its alt empty: the name is right beside it, so a description would only repeat it.

The cells are a list named "What our customers say", so a screen reader announces six items before reading them. Each cell is a figure: the quote is a blockquote and the author's name, role and company are its figcaption. The initials avatars are hidden, since the name follows each one. The headline is the page's single h1. On a phone the list scrolls sideways and is a tab stop, so a keyboard user can focus it and move through the cards with the arrow keys.

It's a snap carousel on a phone, with each card 85% of the width so the next one shows as the cue to swipe; two columns from the md breakpoint and three from lg. The cells share one-pixel hairlines, so no edge is drawn twice, and the outer edges are the page's rails and the band's rule. The headline grows from text-4xl to text-6xl, and a long name or role wraps inside its cell instead of being cut off.

On first paint the headline, the sentence and the buttons fade up in turn, then the cells follow one after another, 70 milliseconds apart. It's CSS transitions on first paint, with no JavaScript, so the block is a server component. With reduced motion everything appears at once, and the Shine Button's light fades in instead of sweeping.

Use a wall when the argument is breadth: many teams in different industries and roles getting value, which a visitor takes in at a glance without reading every quote. Use a single featured testimonial when one voice answers your buyers' biggest objection; in a wall that quote would be one cell among six.