Two Column Testimonials Block for React

The intro is sticky with a top-16 offset on lg screens and up, and it aligns to the top of its grid cell with self-start. The sticky box sticks only while the quote column beside it is taller, so keep at least four or five quotes. Sticky positioning stops working under any ancestor with overflow: hidden or overflow: auto, so don't wrap the section in one.

Edit the TESTIMONIALS array at the top of the file. Each entry has a name, role, company, quote and the initials shown in the avatar. Quotes can run from one to three sentences, and the rows simply grow. The first quote is set larger; change that in the index === 0 check. Keep the quotes real and ask each customer for permission before publishing their words.

The heading is the section's h2. The quotes are a list named "Customer quotes", and each one is a figure with a blockquote and a figcaption for the name and role. The initials avatars are decorative and hidden, because the name is written beside them.

Below lg the grid becomes a single column: the heading, summary and button come first, then the rows in the same order as on desktop. The reading order and the tab order are the same at every width. At 320px nothing scrolls sideways, and long role lines wrap.

Yes. The columns swap sides and the divider moves to the other edge, and the quote sits in a bdi so its quotation marks stay at the ends of the sentence.

Change the href of the call to action in the intro. Say where it goes in its label, such as "Browse all customer stories". It's a Shine Button, the one primary control in the block, and a diagonal band of light crosses it once on hover or focus (it fades in instead with reduced motion). On Base UI, the link renders through render={<a href="…" />} with nativeButton={false}.