Unlimited Plan Pricing Block for React

Edit the constants at the top of the file. PRICE is the monthly price per domain and CURRENCY the symbol; FEATURES lists the cells, each with a name and a detail; PROMISES are the three lines under the button. The "All 8 features" label is counted from FEATURES. The wordmark is the h2: change the word, or the icon, to name a different plan.

The call to action is a real link in the plan's cell. Point it at your sign-up or checkout; one plan means there's nothing to choose. The link is render={<a href="#" />} on ShineButton, with nativeButton={false}: change its href.

Yes. It's the section's h2, so a screen reader announces "Unlimited" as the heading; the infinity icon beside it is decorative and hidden. Its size steps from text-5xl on a phone to text-8xl from lg, and it never grows taller than about 100 px, so the price and the button stay in the first screen on a laptop.

The side rails and top rule with their + marks come from one Guides layer on the section's column, the same on every block. The band under the wordmark is a grid with gap-px over a bg-border background, so the plan's cell and the eight feature cells share single hairlines, and a second Guides layer puts + marks where the band's rules meet the rails.

The plan's cell comes first, so the price and the button are reached before any feature. The cells then stack in one column showing five features; "All 8 features" (aria-expanded) reveals the rest. From sm the cells form two columns and from md all eight are visible with no button; from lg the plan's cell takes two fifths of the band.

Only if it is. Every cell here is a claim the plan has to keep, so write the ones you mean, and put a fair-use line in your terms if one exists. If a limit applies to something customers will notice, name it on the card (for example "Unlimited mailboxes, 100 GB pooled storage") rather than hiding it behind the word.