Featured Quote With Supporting Trio Logos Block for React

Edit SUPPORTERS at the top of the file. Each entry is a name, an icon (any Lucide icon), a lettering, a mark (inline, ring or trailing), a bold figure and the result that follows it. Keep it to three: the band is a three-column grid from sm, and a fourth cell would leave the hairlines framing an empty one. Write results that a customer would let you print.

Edit FLAGSHIP and QUOTE. The flagship takes the same fields as a supporter, plus the tenure line under the plate. The quote is the text and the person: initials, name and role. The flagship's wordmark is the block's heading, and each supporter's wordmark is an h3 in its cell.

The band ends the block. On a page, the next section draws its own top rule along the band's foot, so a line here would double it, and the column has no bottom padding for the same reason. If nothing follows, add a bottom border to the list's wrapper.

Yes. The quote is a figure with a blockquote and a figcaption; the three customers are a list named "More customers", each with a heading and a sentence; the figures sit in bdi elements so a right-to-left page keeps them in order. Icons are decorative and hidden from assistive technology, because every name is text. The wordmarks keep their own direction, as a logo would.

The plate, the quote and the band fade up once when the page loads, each a moment after the last, with CSS transitions; a hovered supporter's wordmark eases from muted to the text colour. With reduced motion every transition is off.

The plate, the quote and the three customers stack at the full width of the column, with a hairline between the customers. The quote steps down from text-3xl to text-2xl. Nothing scrolls sideways at 320 pixels.