Centered Billing Period Toggle Hero Block for React

Edit the constants at the top of the file: CURRENCY, MONTHLY_PRICE and ANNUAL_PRICE (the monthly price when billed annually), and FEATURES for the checklist. The saving on the Annual badge and the yearly total under the price are computed from the two prices, so they always match: with $29 and $24 the badge says 17% and the line says $288 billed once a year.

The price is our Sliding Number: the server renders the real monthly price, and when the period changes only the digits that differ roll to their new values, so the width barely moves and nothing counts up on load. The line under it swaps between Billed monthly and the yearly total in the same space, so the button below never moves.

The switch is our Segment Group, a radio group named Billing period: the arrow keys change the period, and the Annual option reads as Annual, save 17%. The price and the billing line sit in a polite live region, so after a change a screen reader reads the new price as, for example, $24 per month, $288 billed once a year. The headline is the page's one h1.

Start free trial is a link to #. Build its href from the selected period, for example /checkout?billing=annual, or read the period when the button is pressed and create your checkout session with the matching price. Keep the period in the state the switch already uses, so the price shown and the price charged come from the same value.

On load, the headline, the switch and the band fade and rise into place one after another. The switch's background slides to the chosen period, and the price's digits roll. It's all CSS, with no animation library. With reduced motion, everything is in place from the start, the switch's background jumps, and the price changes at once.

Use this hero when you sell one plan with two ways to pay: the toggle keeps the page about the product, with a single price and a single decision. When you have several tiers whose features differ, show them as plan cards side by side, as the Centered Plan Card Pair hero or a pricing section does, so visitors can compare them.