Progress Urgency CTA Block for React

Edit TOTAL_SEATS and CLAIMED_SEATS at the top of the file. The map is drawn from a list with one entry per seat, the seats left, the headline and the screen-reader summary are all worked out from those two numbers, and PULSING sets how many open seats pulse. The map is forty columns wide on desktop and twenty-five on phones, so use 200 (a multiple of both) or adjust grid-cols-* to match, or the last row will be short.

No: it's a typed number, and the block never calls a server. To make it live, pass the claimed count in from your server or build (a prop, or a fetch in the page) in place of the constant; every figure and the dots follow from it.

The map is a single image with a label built from the numbers ("153 of 200 founding seats claimed, 47 left"); the two hundred dots themselves are hidden from assistive technology, since two hundred empty elements would say nothing. The seats left are also written out as text under the map.

The map is drawn row by row from the top when the section loads, and the next six open seats pulse in turn with Tailwind's animate-pulse and a staggered delay. With reduced motion the map is simply there and nothing pulses. The pulse is a soft decoration that carries no information; the legend and the numbers say everything it does.

LIST_PRICE and FOUNDER_PRICE are the two numbers you type; the percentage in the badge is worked out from them with whole-number arithmetic, rounded down ($20 off $49 is 40%). The old price is read by screen readers as "Was $49" and the new one as ", now $29 per month".

Claim your spot is a real link (href="#"): point it at your sign-up or checkout. It is a ShineButton with render set to an a element and nativeButton={false}.