Split Avatar Grid Hero Block for React

Edit TEAM at the top of the file: each member has a name, a job, initials and a picture's src, and an empty src shows the initials on a muted circle instead, which also covers a picture that fails to load. Use square photos of at least 192px, so they stay sharp at 96px on high-density screens, with similar light and backgrounds; the avatars crop them to circles. FACTS is the quiet line under the buttons.

Add members to TEAM. The grid has two columns, so six people make three rows, and the cells share the column's height. For a wider grid, change grid-cols-2 to sm:grid-cols-3 and the avatars' sm:size-24 to sm:size-20 so three fit beside the copy. Past six or so, show the founders here and link the second call to action to a full team page.

The page column has Guides bleed marks="top" rules="top": two side rails and one top rule with a plus on each crossing. The divider is the grid column's lg:border-s with Guides marks="start" rules="none" sides={false}. Inside, the cells' hairlines are the gaps of a gap-px bg-border grid, so no edge is drawn twice and the grid's own outer edges are the rail, the top rule and the next block's rule. Below lg the grid sits under a ruled line.

As a list named Core team, with each person's name and role. The pictures are hidden from them, because the name right under each one already says who it is, and the initials behind a missing picture would only repeat it. The headline is the block's one h1, both calls to action are links named by their text, and the facts line is a short list whose dots are hidden.

The two columns stack below the lg breakpoint, with the team grid under the copy behind a ruled line. The grid keeps two columns down to 320px, the avatars step down from 96px to 80px, and a long role wraps, balanced, onto two lines. The headline steps down from text-5xl to text-4xl, and the Shine Button is on the first screen.

Use the grid when the people are the message: an about or careers page, a studio, a founding team, where each face gets a name and a role. Use an avatar stack when faces are social proof beside a product pitch, where a crowd of small overlapping avatars says how many people are on board, not who they are.