Countdown Offer Pricing Block for React

Edit the data at the top of the file. Each entry in PLANS has its name, description, price, features, call to action text and href, and one plan has offer: true with an originalPrice: the struck price, the badge's percentage and the "$8 off" line are all worked out from the two prices. The deadline is endOfMonth, a function that returns a Date; return your own date, such as the end of a launch week, and the clock follows.

The timer stops at zero and nothing else changes: the block doesn't remove the offer for you. Treat the clock as a display of a deadline you enforce on your server: stop applying the launch price at checkout at that moment, and render the plans without originalPrice (or remove the section) once it has passed. Never rely on the visitor's clock for the price itself.

The deadline is read from the visitor's own clock, so the server can't know it. The timer holds a placeholder, hidden, until the browser has the time and then starts, so the server's markup and the first client render always agree.

Each call to action is a real link to its plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. Point the offer's link at a checkout that applies the launch price, a coupon or a separate discounted price at your payment provider, and expire it on your server at the deadline.

The timer has the timer role, which isn't announced as it changes, so a screen reader doesn't read out every second; it's named by the "Launch price ends in" line, and each unit has its full word ("days", "hours") for screen readers. Under reduced motion the seconds column is removed and the clock changes once a minute, and the entrance animations are switched off. On a phone the plan selector is a radio group named "Plan": the arrow keys change the plan, and the plans that aren't shown are invisible to assistive technology and to Tab.

The header stacks: headline, sentence, then the countdown, all within the first screen. Below md the Segment Group picks one plan and the other two are hidden with visibility, but all three share one grid cell, so the block keeps the height of the tallest plan and nothing jumps when you switch. From md the three plans sit side by side and share their rows through CSS subgrid, so names, prices, buttons and feature lists line up.