Split Layout Pricing Block for React

Edit the constants at the top of the file. PLAN holds the name, the monthly price, the yearly price (the monthly amount when billed once a year) and the call to action's cta and href; the saving and the yearly total are worked out from the prices. FEATURES is the checklist and CALLOUTS the numbered list under the mock; its numbers match the dots in ProductMock, so keep the two in the same order.

ProductMock is a small component of plain markup and our Badge and Kbd, so swap its rows for your app's own. Keep the outer element aria-hidden and inert: it's decoration, and nothing inside it should take focus. Put a numbered dot (the MARKER class) inside each element you want to point at, and describe it in CALLOUTS. The sidebar only appears when the mock is wide enough, using a container query, so the mock shrinks cleanly on narrow screens.

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

The mock is hidden from assistive technology on purpose, because a screen reader gets nothing from a drawing of an app. Everything it points at is written out in the numbered list under it, a real ordered list with a heading and a sentence for each point, and in the plan's checklist. The billing switch is a radio group named "Billing period": arrow keys move and select. The price keeps its amount in visually hidden text and isn't a live region.

Below lg the halves stack with the plan first, so the button is the first thing under the header; the mock and its callouts follow. The sidebar hides on a narrow mock, the callouts become two-line rows, and the checklist shows five features until "All 9 features" is pressed. From lg the mock sits on the start side of a vertical divider whose ends carry + marks where it meets the section's rules.

When the interface is the selling point and the plan is simple: seeing the feature in place does more than a bullet that names it. It suits single-plan apps and the Pro tier of a freemium product. For a product whose value is behind the screen (an API, an infrastructure service), use a table or a calculator instead.