Centered Trusted By Logo Row Hero Block for React

Edit the CUSTOMERS array at the top of the file. Each wordmark is a name, a Lucide icon and its lettering classes, set in text-muted-foreground so the row stays quiet in both themes. For real logos, put an SVG drawn in currentColor (it follows the same color) or an image with the company's name as its alt in each list item, about h-8 high. Ask your customers before you show their logos.

The headline is the page's one h1. The pill and both calls to action are links, each named by its text. "Trusted by the teams that ship" is an h2, and the wordmarks under it are a list of names, so a screen reader says who the customers are, not six unnamed shapes. The check marks, the status dot and the wordmarks' icons are hidden from assistive technology, and so are the hairlines.

It's CSS. Each part has starting: styles (@starting-style) that start it transparent and a few pixels low, and a transition that moves it to rest when it first renders: the hero's parts one after another, then the logo bands together. With reduced motion there is no transition, so everything renders at rest at once. Nothing runs in JavaScript, and the server-rendered HTML animates the same way.

The pill and both buttons are links to #: point them at your customer stories, sign-up and sales pages. The pill is an Announcement rendered as the link itself, so it keeps its link role. On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.

Below the sm breakpoint the headline drops its forced line break and wraps, balanced, at text-4xl. The two calls to action stack, centered, and the trust points wrap onto centered rows. The wordmarks sit in a grid: three rows of two on a phone, with the hairlines between the cells, and one row of six from lg. The label stays on one line.

Use this band for four to six well-known customers under your headline, all visible at once and standing still. Use a logo marquee for ten or more logos that scroll, and a logo cloud for a larger grid further down the page.