Dismissible Announcement Bar Hero Block for React

Edit ANNOUNCEMENT at the top of the file: the badge's label, the sentence (text), the link's words (link) and where it goes (href). Keep it to one sentence and one link, so it fits on a single line from the sm breakpoint up; on a phone it wraps beside the badge. The link is underlined, so it doesn't rely on its weight alone to read as a link.

Remember the dismissal under a key for this announcement, such as dismissed-v3-launch, so the next announcement shows again. A cookie is the smoothest: the server reads it and renders the page with the bar already closed, so it never flashes. With localStorage, read the key in the browser after the first render and close the bar then; a returning visitor will see it fold away once.

The bar sits in a one-row CSS grid. Dismissing it sets data-state="closed", which eases the row from 1fr to 0fr and the opacity to 0 over 300 ms, so the hero below slides up smoothly without measuring any height in script. The hairline and plus marks along its bottom edge belong to the bar's wrapper, outside the folding row, so when the bar is closed they sit on the top rule and disappear into it. The bar stays in the page but becomes inert: hidden from screen readers and out of the tab order. With reduced motion turned on it closes at once.

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 bar's bottom edge is <Guides marks="bottom" rules="bottom" sides={false} />, and the board sits in Guides extend="sm" marks="corners", a frame of hairlines that run 0.5rem past its corners with a plus on each. Every line is solid and is the theme's border colour, so it follows any preset.

Yes. The close button is a real button named Dismiss announcement. When it's pressed, focus moves to the headline, the block's one h1, instead of being lost with the button, so a screen reader reads the headline next and Tab carries on from there. The link and both calls to action are links named by their text, and the trust line is a list whose separator is hidden.

The board is WorkspacePreview, a small component at the top of the file. Replace the window inside its tinted panel with an img (or your framework's image component) with className="size-full object-cover object-top" and an alt that says what the screenshot shows, and keep the frame's Guides. Or keep the sketch and edit BOARD, SIDEBAR and TEAM so it shows your own product's words. The sketch is decoration: it's aria-hidden and inert, so screen readers skip it and nothing in it can be focused. On a phone the board scrolls under a fade at its end edge, and it's 18rem tall so the buttons stay on the first screen.