Full-Bleed Inverted Banner Block for React

A bar that is dark on a light page and light on a dark one breaks the theme and competes with the hero's button. Here the tint is one step stronger than the other bands (bg-muted instead of bg-muted/50), the text is foreground instead of muted, and a dot leads the line. It reads as inverted emphasis and works in every theme with no dark scope.

Edit NOTICE at the top of the file: the sentence (text), the link's words (link) and its destination (href). Keep the sentence to about 55 characters so the line holds on one row on a desktop and wraps to two lines at most on a 320-pixel phone. It carries no date, so it won't go stale: write the time in the status page, or put a relative phrase in the sentence.

Yes: the dot is Status with variant="warning" and a matching halo, ring-warning/25. Use destructive for an outage or info for a heads-up and change the halo to match. The dot is decoration (it is hidden from screen readers), so the sentence itself should say what kind of notice it is, as "Planned migration" does here.

No: a maintenance notice should stay until the work is over. To add one, take the fold from the Top Bar Banner (a grid row from 1fr to 0fr, an inert strip, focus moved on to what follows).

The tint is on the full-width section and the line sits in the same max-w-6xl page column as every block. The Guides layer draws the rails and one rule along the top with a plus on each crossing, and no bottom rule: the block below draws that line.