Centered Founder Avatars Hero Block for React

Edit FOUNDERS at the top of the file. Each founder has a name and a role, the initials shown in the avatar, a before line on what they did earlier, and a tone: the avatar's fill and its text color as a pair of theme classes, such as bg-foreground text-background. Keep each pair a background and its own foreground, so the initials stay readable in every theme. For two or four founders, change sm:grid-cols-3.

Add an AvatarImage with the founder's photo before each AvatarFallback. The initials stay as the fallback, shown while the photo loads or if it fails. The avatars are size-11; make them larger and the cells grow with them.

The avatars are decoration: the same names are written out beside them, so the avatars are hidden from assistive technology rather than read twice. The cells are a list labelled Founders, each read as the name, the role and what they did before. The headline is the block's one h1, and both calls to action are links named by their text.

Whatever earns trust for your stage: your investors, an accelerator batch, a well-known angel, or a line such as Bootstrapped and profitable. The names in the block are made up. Keep it to one short line in text-xs: on a phone it wraps, balanced, onto two.

Start free trial and Meet the team are links to #: point them at your sign-up page and your team page. On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.

The headline steps down from text-5xl to text-4xl and the second line is its own block, so it always starts on a new line and wraps balanced. The founder cells stack as rows with the avatar beside the text, and the outline button goes under the Shine Button when the row runs out of room.

Show founders when you're early, before revenue or with few customers, and the team's experience is your strongest trust signal. Switch to a logo wall or stats once you have customer names that visitors will recognize.