Mosaic Testimonials Block for React

Edit PEOPLE at the top of the file. Each entry has the name, initials, role, company, quote and two placement strings: portraitAt and quoteAt, the grid cell of its two tiles. The default places make the checker: the first two people fill row one, and the next two swap sides in row two. To add a second pair of rows, copy the pattern with the next row numbers.

The grid has two columns on a phone and four from lg. Each tile is placed by its col-start-* and row-start-* classes, with the lg: ones for the desktop cell. On a phone the portraits alternate sides row by row, and on a desktop two rows of four do the same. Rows have equal heights, and a 1 px gap on the border colour is the hairline between tiles, so they join cleanly.

Replace the monogram span in a portrait tile with an img that fills the tile (absolute inset-0 size-full object-cover) and give it an empty alt, because the speaker's name is already in the quote's caption. Keep the name under the photo on a bg-background backing, so it stays readable over any picture.

The section's heading is an h2, and the quotes are the items of a list named "Customer quotes", each a figure with a blockquote and a figcaption with the name, role and company. The portrait tiles are decorative and hidden, because the same name is in the caption beside them, so nothing is read twice. The quote sits in a bdi, so its quotation marks stay put in right-to-left languages.

Yes. The grid keeps two columns, tiles have no fixed height and the quote text steps down to text-sm on phones, so each short quote wraps inside its tile and the row grows to fit the longest one. Keep quotes to about 90 characters; longer ones make the whole row tall on a phone. The Shine Button sits under the header text there.

Yes. The grid runs from the inline start, so the checkerboard mirrors in Arabic or Hebrew and each portrait still sits beside its own quote. The captions follow the reading direction.