Under Hero Strip Logos Block for React

Edit CUSTOMERS at the top of the file: each entry is a name, an icon (any Lucide icon), a lettering (the Tailwind classes for the name's type) and a mark, which is where the icon sits: inline, badge, ring or trailing. Six fills two rows of three on a tablet and one line on desktop; other counts wrap, but the spread-out desktop row looks best with five to seven.

Replace each icon and name with the company's one-colour logo at about h-5 tall, drawn in currentColor so it keeps the muted colour and the hover. Give an img the company's name as its alt, or an inline svg a role="img" and an aria-label. The strip needs no other change.

A strip is a line of proof, not a section of its own, so it has no h2. The logos are a list named "Companies hiring on Harrierly", and the sentence above gives the context. If your page needs the strip in its outline, make the sentence a heading.

Yes. The strip draws only the page's top rule, so under a hero it adds one hairline and no second rule beneath it: the next block's top rule closes it. Its padding is py-8 on a phone and py-10 from md, a little less than a full section.

The wordmarks are a centred flex row that wraps, two to a line at 320 px and three on a wider phone, with a larger gap between rows than between marks. Nothing is hidden: all six stay.

The logos are a real list, each item's name is text, and the icons are hidden from assistive technology. The names use text-muted-foreground at full strength, which passes WCAG AA on the page background. Nothing is focusable, so the hover colour is a visual touch only, and each logo keeps its own direction on a right-to-left page.

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.