Split Kanban Board Hero Block for React

Edit COLUMNS at the top of the file: each column has a title and its issues, and drop: true adds the dashed slot at its foot. Each issue has an id, a title, a one-word label, an owner initial and active for the outlined one. DRAGGED is the lifted card, PEOPLE the avatars.

Not in the hero: it's a picture of the product, hidden from screen readers and marked inert. For a working board, keep the columns in state and add a drag-and-drop library with a keyboard alternative; the card and the drop slot here show what to build.

The window is wider than its cell and pinned to the cell's end, and the cell clips it, so the window's start is cut by the section's start rail while its end keeps rounded corners; a mask fades its foot. The divider is a border-s on the copy's cell with a + mark where it meets the top rule, from our Guides component.

It reads the announcement link, the headline (the block's one h1), the paragraph, the checklist and the two links. The board is hidden and inert, so none of its cards are in the tab order. The copy comes first in the document and the board is moved to the start only on wide screens.

The parts stack below the lg breakpoint, copy first and the board under it in a 20 rem band, its columns running off the end. The Shine Button sits on the first screen.

The copy fades and rises in, the window settles in and the columns rise one after another. It's all CSS, with no animation library, and nothing loops. With reduced motion on, everything appears in place.