Minimal Single Plan Pricing Block for React

Edit the PLAN constant at the top of the file: its name, the launch price, the regular price it replaces, the features, the cta label, the href and a line of terms under the button. CURRENCY is the symbol. The "Save 44%" badge is worked out from the two prices, so it always matches them. For a plan with no launch discount, delete the struck price and the badge.

The call to action is a real link to PLAN.href; point it at your sign-up or checkout. The link is render={<a href="#" />} on ShineButton, with nativeButton={false}: change its href.

The old price is a real <s> element with hidden "Was" before it, and the new price has hidden "now" before it and "per month" after it, so the sequence reads "Was $9, now $5 per month" while the visible "/month" is hidden from assistive technology to avoid saying it twice. Both prices are isolated with dir="ltr", so the currency symbol stays beside its number in right-to-left layouts.

By structure. The Frame is a tinted shell, the price panel is a raised bg-card surface with a faint shadow, and the feature list sits on the shell beside it. The only colour is the call to action's primary button. Everything else uses the foreground and muted tokens, so it works in any theme, light or dark.

Below md the card stacks: name, price and button first, then the six features in one column, so the button is reached well inside the first screen and there is nothing to collapse. From md the two parts sit side by side, the panel taking five twelfths. The features fade in one after another with a CSS transition that is switched off under reduced motion.