Full-Bleed Launch Banner Block for React

Edit DAYS at the top of the file: each entry has a title and a live flag. Set live to true for the launches that are out; the cell is lit and its status line reads "Live now". When a second day goes live, flip its flag and the earlier one can stay lit or not as you prefer. The day chip numbers itself from the entry's position, "Day 1" to "Day 5". The lit cell also carries aria-current, so a screen reader hears which one is live.

A date in a banner goes stale the day after the launch week ends, and a banner with a wrong date is worse than none. The cells say "Live now" and "Soon", which stay true as you update the flags. If your week has fixed days, put the weekday names in the titles yourself.

Below the medium breakpoint the five cells are a horizontal scroller, each cell 85% of the width so the next one peeks in, snapping one at a time. The scroller is a list with a label and a tab stop, so a keyboard user can focus it and scroll with the arrow keys, and it shows a focus ring inside its edge. The header stacks: the text, then the button.

It's a link (href="#"): point it at your waitlist. The only action in the block is this outline Shine Button, a band of light that sweeps across it once on hover and keyboard focus. The button renders the link it's given with render, with nativeButton={false}.

Yes. The tint is bg-muted/50 on the full-width section, the lit cell is bg-card, and the dots are the foreground colour or a muted tone. There's no bg-foreground panel and no primary surface, so it reads the same in light and dark.