Featured Plan Pricing Block for React

Edit the constants at the top of the file. PLAN holds the name, the monthly price, the yearly price (the whole year, billed once) and the call to action's cta and href. FEATURES is the checklist and PITCH the three points beside the card. The "$4.00 a month" and "save 33%" line is worked out from the two prices, so it follows when you change them. CURRENCY is the symbol.

It's one decorative layer behind the grid: a conic gradient whose apex sits above the card, drawn in foreground at 14% and faded out with a mask, so it reads as light in a dark theme and as a soft shade in a light one. It has no colour of its own and is hidden below lg, where the card fills the width. Change the percentage to dim or strengthen it, or delete the layer: the card keeps its ring, shadow and tinted shell, so it still stands out without it.

The call to action is a real link to PLAN.href. Add the period to it, for example /checkout?billing=yearly from the switch's value, and let your server pick your payment provider's monthly or yearly price. The link is render={<a href="#" />} on ShineButton, with nativeButton={false}: change its href.

No. Both billing lines share one grid cell, the hidden one kept invisible and aria-hidden, so the longer line sets the height. The price itself rolls digit by digit; under reduced motion it changes in place. Only the visible line is exposed to a screen reader, and the price's amount sits in visually hidden text with "per month" or "per year" rather than in a live region, so switching doesn't interrupt anyone.

The three parts stack in the order headline, card, pitch: below lg the grid is one column in that source order, and from lg a grid-template-areas layout puts the headline top left, the pitch bottom left and the card across both rows on the right. On a phone the first five features show and the rest wait behind the "All 9 features" button (aria-expanded); from md all nine are visible.