Featured Focal Hub Logos Block for React

Edit FLAGSHIP at the top of the file: its name, icon, lettering (the Tailwind classes for its type) and the since line. The card sizes itself to its content up to a max-w-md, so a longer name wraps the badge and tenure rather than stretching the card. The header's headline and the bold lead sentence name the customer too, so change them with it.

Edit INTEGRATIONS, six entries in reading order. The bracket is built from the list: each item draws its own drop and its own piece of the horizontal line, and the first and last stop at their drop, so the line always runs from the first drop to the last. Keep it at six: the desktop row is six columns, and the phone grid is two by three, so any other count leaves an empty cell.

With borders and no SVG: a 1 px stem, a 1 px bracket line on each item and a drop from it. Below lg the six columns would be too narrow for the wordmarks, so the bracket and drops are hidden and the list becomes a grid of cells with shared hairlines; the stem still lands on the caption, which then sits on the grid's top edge.

Yes. The header is an h2, the flagship a card with its name as an h3, and the integrations are a list named "Integrations" with each company's name as text; the icons, the stem, the bracket and the drops are hidden from assistive technology. Nothing in the list is focusable, so the hover colour is only a visual touch. In a right-to-left layout the bracket mirrors and each wordmark keeps its own direction, as a logo would.

Yes. Nothing is dark by itself: the card is the card colour with a ring and a shadow, the lines are the border colour and the wordmarks the muted text colour, turning to the text colour on hover.

The header and the tree fade up once when the page loads, with CSS transitions, and each wordmark's colour eases on hover. With reduced motion the transitions are off.