Inset Tray Strip Logos Block for React

Each href="#" in LinkedWordmark is a placeholder for the customer's story or case study. Replace it per customer: add an href field to CUSTOMERS and pass it through. If a customer has no page, render that one as a plain span instead of a link.

The slug keeps the name of shadcn.io's black tray, but the block follows your theme instead of forcing a dark panel: depth comes from the nested Frame and FramePanel (a tinted shell around a bg-card panel), which reads as a raised tray in light and dark.

Edit CUSTOMERS: each entry is a name, an icon and a lettering. Six fills two rows in three columns; on a phone they are three rows of two.

Each link has a visible focus ring and the same underline as the hover state, drawn with group-focus-visible, and the colour turns to full strength for the focused item. The six links are six tab stops, in reading order.

The list is a real list, each link's name is the customer's name as text and the icon is hidden from assistive technology. The names use text-muted-foreground at full strength, which passes WCAG AA on the card. The underline is not the only cue: focus also shows a ring.

The block fades up once when the page loads, with a CSS transition, and each logo eases to the text colour on hover. With reduced motion the entrance is off and the hover colour changes at once.