Centered Event Details CTA Block for React

Edit EVENT, DETAILS and SPEAKERS at the top of the file. DETAILS is one entry per cell, with a Lucide icon, a label and a value; three fit a row, and below the sm breakpoint they stack with a rule between them. Each speaker has initials, a name and a role. To show photos, add an AvatarImage with an empty alt before the fallback, since the name is written beside it.

EVENT.seats is the capacity and EVENT.registered the count so far; "seats left" is worked out from the two in SEATS_LEFT, and the meter is filled from the same numbers, so none of them can drift apart. Feed registered from your event system where the page is built. The meter is decoration, hidden from screen readers, because the sentence beside it says the same in words.

A date typed into a block is wrong a month later. This one describes a recurring session ("First Thursday of every month"), so it stays true. For a one-off event, replace the first detail with the date as text, or compute it on the server from your event data so it's never a leftover.

The headline is an h2, the three details are a description list (each label then its value) and the speakers are a list named "Speakers". The button reads "Save my seat at the next webinar": the sr-only part says where it goes when the link is heard out of context. The status dot and the meter are hidden, and the registered and seats-left counts are real text.

Yes. Nothing in the block forces a scheme: the bands are drawn with the theme's border colour, the text with its foreground tokens, and the meter's fill is foreground, so the Shine Button stays the one primary control. It's light on a light page and dark on a dark one.

Below the sm breakpoint the three details and the speakers stack, each in its own ruled row, and the meter keeps its width. The button comes before the bands, so it's on the first screen. A long speaker role wraps beside its avatar rather than pushing it off screen, so the block reads at 320 pixels without scrolling sideways.