Bento Grid Testimonials Block for React

Edit TESTIMONIALS at the top of the file. Each entry has a size: lead (six columns by two rows), medium (six columns), short (three columns) or wide (the full row). Cells fill the grid in the order of the array, so keep the default order (the lead, a medium, two shorts, then the wide one) and the twelve columns close without gaps; a gap would show the border colour behind the cells. If you move the lead, every cell after it flows around it.

Each size has its own type in the SHAPES table: the lead is text-xl on a phone, text-2xl from sm and 1.75rem from lg, the medium and wide quotes are text-lg, the short ones are text-base. Match a quote to its cell by its length: two sentences suit the lead, one sentence the medium cell, and a few words the short ones. A long quote in a short cell just makes that row taller. On the lead, highlight holds the opening sentence, set in the text colour; leave it out to set the whole quote in one colour.

The cells share hairlines: the list is a grid with a one-pixel gap over your border colour, and every cell sits on the page background, so each line is drawn once. The section sits on the page's drafting lines: Guides bleed marks="top" rules="top" on the page column (max-w-6xl, the same in every block) draws two rails that join the rails of the blocks above and below, and one rule along its top edge that runs to the page's edges, so a stack of blocks never doubles a line. Around the grid, a second Guides extend="md" marks="corners" sides={false} draws the grid's top and bottom rules 1rem past the rails, with a plus on each crossing. The guides are decorative and hidden from screen readers, and they take your theme's border and muted-foreground colours, so they follow every preset.

The section's heading is an h2, and the cells are the items of a list named "Customer quotes". Each cell is a figure with a blockquote and a figcaption holding the name, role and company. The quote icon on the lead and the initials avatars are hidden, because the name is written beside them. The quote sits in a bdi, so its quotation marks stay at the ends of the sentence in right-to-left languages.

Below the md breakpoint the list is a horizontal snap carousel: each cell takes 85% of the width, so the next one shows at the edge, and the lead comes first, then the medium quote, the two short ones and the wide one. The cells still share their one-pixel hairlines. The list is a keyboard tab stop that the arrow keys scroll, because it holds no other control. At md the carousel becomes a grid of two columns, with the lead, the medium quote and the wide one across both. Nothing has a fixed height, so every cell fits its quote down to 320 px.

The button is a real link (href="#"): point it at your customer stories page. The button renders the link it's given with render, with nativeButton={false}.