Featured Quote Stacked Layout Logos Block for React

The block's h2 is a box with a border on three sides (border border-t-0), rounded at its bottom corners, centred at the very top of the column, where the page's top rule runs. Its missing top edge is the rule, so the tab looks hung from the line. It has a solid card background, so the rule is never seen through it.

Edit CUSTOMER and QUOTE at the top of the file. CUSTOMER is the name, an icon (any Lucide icon), the lettering classes for the name's type and the tenure line. QUOTE is the text and the person: initials, name and role. Two sentences read best at this size; the quote is centred and balanced, so a third makes it a paragraph.

Yes. The heading is the customer's name and tenure, the quote is a figure holding a blockquote and a figcaption, and the curly quotation marks are text inside the quote, wrapped in a bdi element so a right-to-left page keeps them in order. The icon and the avatar are decorative and hidden from assistive technology, because the names are already text. The wordmark keeps its own direction, as a logo would.

The tab and then the quote fade up once when the page loads, with CSS transitions. With reduced motion the transitions are off and the block simply appears.

The layout is the same, narrower: the quote steps down from text-4xl to text-2xl and wraps in balanced lines, and the padding at both sides shrinks. The tab keeps its size and nothing scrolls sideways at 320 pixels.