Split Social Proof Wall Hero Block for React

Edit QUOTES at the top of the file. Each entry has the quote, the author's name, role and initials. Keep the quotes to a short line: the cells are about 190px wide, so a quote of eight words takes two or three lines. FEATURED is the index of the raised cell; with nine quotes, 4 is the centre of the three-by-three wall.

Yes, the wall is a grid that fills row by row: three columns from the md breakpoint up, a row of cards below it. Six or twelve quotes fill whole rows, and the rows share the panel's height. With another count, check that the last row looks complete, or move FEATURED.

Yes. The quotes are real content, not decoration: the wall is a list named What customers say, and each item is a figure with the quote in a blockquote and the author in its figcaption, so each attribution stays tied to its quote. The featured cell's stars are hidden and a hidden sentence says Rated 5 out of 5. The initials avatars are hidden, since the name follows them. On a phone, where the cards scroll sideways, the list takes keyboard focus, so the arrow keys can scroll it.

Yes. Add an AvatarImage with the photo's src before the AvatarFallback in each cell's Avatar, and give your data a field for it. The initials stay as the fallback while a photo loads or if it fails. The Avatar docs show the parts.

The copy fades and rises in, then the nine cells follow one after another, from the first to the last. It's all CSS transitions on first paint, with no animation library. With reduced motion on, everything appears in place at once.

The two columns stack below the lg breakpoint, with the wall under the copy and a ruled line between them. Below md the nine cells become cards in a row that snaps to each card, 78% of the width, so the next one shows at the edge as the cue to swipe; the actions stay on the first screen. Names and roles that don't fit end with an ellipsis, so nothing scrolls sideways down to 320 px apart from the row itself.