Avatar Stack Side Rail Hero Block for React

Edit MEMBERS at the top of the file: each member has initials and a picture's src, and an empty src shows the initials on a muted circle instead. Use square pictures of at least 96px, so they stay sharp at 48px on high-density screens; the avatars crop them to circles. Seven faces and a count read as a crowd; change the +99 in AvatarGroupCount to match. Ask your members before you show their faces.

The counts are plain text: the 12,400+ in the social proof line, the +99 on the stack and the three STATS. Fill them from your backend where your page loads its data, and round them (12,400+, not 12,417) so they don't go stale between deploys. Every figure is set in tabular numbers, so a new value doesn't shift its neighbours.

They are the Guides component, an aria-hidden layer that draws the lines of the box it sits in. The page column (max-w-6xl, the same in every block) has Guides bleed marks="top" rules="top": two side rails that run the section's full height, so they join the rails of the blocks above and below, and one rule along the top edge that runs to the page's edges, with a plus on each crossing. The block below draws the next rule, so a stack of blocks never doubles a line. Inside, the divider is the rail's lg:border-s with Guides marks="start" rules="none" sides={false} for the plus where it meets the top rule, and the stats sit under Guides marks="top" rules="top" sides={false}, a rule from the divider to the end rail with a plus on each end; the rows below are split by divide-y. Every line is solid and is the theme's border colour, so it follows any preset.

They skip it: the stack is aria-hidden, because its faces and its +99 say nothing a screen reader user could use, and the sentence under it, Loved by 12,400+ members across 60 countries, says it in words. The headline is the block's one h1, the pill and both calls to action are links named by their text, and the stats are a description list, so each number is read with its label.

Below lg the two sides stack, with the copy first and the rail of proof under it behind a ruled line, and the copy aligns to the start. The headline wraps, balanced, at text-4xl, the two calls to action sit side by side or wrap, and both are on the first screen of a phone. In the rail, the stack of eight 40px circles fits in a row down to 320px, and each stat row keeps its label and figure on one line.

Each avatar is size-10 (40px) on phones and size-12 (48px) from sm, set by *:data-[slot=avatar]:size-10 sm:*:data-[slot=avatar]:size-12 on the AvatarGroup, and the count has the same sizes; change both together. The overlap comes from AvatarGroup's negative spacing, and each avatar gets a ring in the page's colour so the edges stay crisp where they overlap. For a looser stack, add -space-x-1 to the AvatarGroup's classes.