Centered Two-Column Plan Card Hero Block for React

Edit the PLANS array at the top of the file. Each plan has an id, a name, a description, a currency and a monthly price, its features, the call to action's label (cta) and href, and an optional badge. The plan marked featured gets the tint, the Shine Button and is the one the phone shows first; the other gets an outline Button. The trial terms under the band are the TERMS array.

Both calls to action are links: point Free's href at your sign-up page and Pro's at your checkout with the plan in the query (/checkout?plan=pro), and work the price out again on the server rather than trusting the page. On Base UI, each button renders its link with render={<a href={plan.href} />} and nativeButton={false}.

The headline is the page's one h1 and each plan's name is an h2, so the plans can be reached from the headings list. The price is read as 19 dollars per month: the visible /month is hidden and a visually hidden per month is read instead. The features are a list, their check marks are decorative, and the trial terms are a list of three, with the dots between them hidden. On a phone the plan that is switched off is invisible, so it leaves the tab order and the accessibility tree.

Below the md breakpoint a Plan switch of Free and Pro sits under the promise, and the band shows the chosen plan, Pro by default. Both plans share one grid cell, so the block keeps the taller plan's height and the page doesn't jump when you switch. The Shine Button ends about 545 px down the first screen. Above md the switch is gone and the two cells sit side by side at the same height, so their calls to action line up whatever the length of each checklist. Below sm the trial terms stack, without the dots.

Pro is set apart by structure, not colour: a tint, a badge and the one filled button, while the page's primary colour stays on that button only. For more, give its cell ring-1 ring-foreground/15 and a shadow-sm, or enlarge the price. Avoid filling the whole cell with bg-primary: the theme's accent changes from preset to preset and a flat primary surface loses its contrast in some of them.

Use it when the offer is a free tier and one paid plan, and you want visitors to pick one without leaving the first screen. With three or more plans, or features that need a comparison table, link to a full pricing page instead.