Centered CTA with Avatar Social Proof Block for React

Edit MEMBERS at the top of the file: each entry has first (the name shown in the cell), initials, name, role, online and years since joining. Set TOTAL to your member count; the line under the headline prints it with a fixed Intl.NumberFormat("en-US"), so the server and the browser agree. To use photos, add an AvatarImage with the member's name as alt inside each Avatar; the initials stay as the fallback while it loads. Six cells fill the band at every width; with a different number, change the grid's column counts.

A card opens when the pointer rests on a cell and when the cell gets keyboard focus, and it closes on Escape or when the pointer or focus leaves. A hover card is a preview, never the only way to a fact: on a touch screen, tapping a cell follows its link to the member's profile instead, and the cell already shows the name and role. Point each href at the real profile page.

Yes. The section's one heading is an h2. The band is a list named "Community members", and each cell is a link named "Sarah Chen's profile", so the faces are reached with Tab in order. The initials are decorative, and the sentence under the headline already says "Join 8,400+ developers". The online dot is hidden too: the card says "Online now" or "Away" in text. On Base UI, the cell link is the HoverCardTrigger itself, which renders an a.

Yes. The cells run from the right and the entrances use logical properties. The count is isolated with bdi, so "8,400+" keeps its sign in place, and nothing in the band is a physical side.

The only motion is a one-time fade-up on load, a CSS transition, and a colour change when you hover a cell. With reduced motion turned on, the entrance is skipped; the hover card still opens.

It's a link (href="#"): point it at your community's sign-up page. The Shine Button renders the link it's given with render, with nativeButton={false}.

Use the band when trust is the objection and each person should be inspectable: a community, a beta or a group where who else is in matters more than what a button says. Use the avatar-stack button variant when the page has one action and you want its proof inside the thing people click.