Centered Single Price Display Hero Block for React

Edit the PRICE object at the top of the file: name is the plan's label above the figure, currency and amount make the big figure, unit is the short period shown beside it (/mo) and per is the word a screen reader hears instead ("per month"). For a yearly plan, set unit: "/yr" and per: "year". The currency is plain text before the number; for a locale that writes it after, move it in the markup. Keep the subtitle and the trust points in step with the plan.

Point the Shine Button's link at your sign-up or checkout page, such as a Stripe or Paddle checkout URL, in place of #. It's a real link, so it opens in a new tab with a middle click and works before any JavaScript loads. On Base UI, the button renders it with render={<a href="/checkout" />} and nativeButton={false}.

As "$19 per month". The short /mo beside the figure is hidden from assistive technology, and a visually hidden "per month" says the period in words. The figure sits in a dir="ltr" span, so the currency stays before the number on right-to-left pages. The page has one h1, the pill is one link named by its sentence, and the trust points are a list whose check marks are decorative.

Because it never changes. It renders as text on the server, so it's right before any script runs, and it only fades in once with the rest of the hero, with a CSS transition that's off under reduced motion. Counting a price up from zero would show visitors wrong prices on the way. If your plan has monthly and annual prices, the billing toggle hero rolls the figure when the visitor switches.

Below the md breakpoint the frame stacks: the price first, then, under a hairline, the button and the three trust points. The headline wraps, balanced, at text-4xl, and the price drops from text-6xl to text-5xl. The button spans the frame, and ends well within the first screen of a phone.

Use this teaser when you sell one plan, or one plan most people should start with, and the price is a reason to sign up. Use a plan comparison when visitors need to choose between tiers by their features, and send them there from this hero's call to action if you have both.