All Inclusive Pricing Block for React

Edit the constants at the top of the file. PRICE is the monthly amount per employee and CURRENCY the symbol before it. GROUPS is the wall: each group has a name and its chips, plain strings with one checkmark each. The "6 included" count on each group, the "All 36 included" label and the header's "All 36 Bramble HR features" are all counted from the data, so adding or removing a chip keeps them right. Six groups of six fill the two-by-three grid exactly; other counts leave a ragged last row.

The call to action is a real link in the header row. Point it at your sign-up or checkout; with a single plan there is nothing to choose, so nothing needs passing along. The link is render={<a href="#" />} on ShineButton, with nativeButton={false}: change its href.

Below the md breakpoint only the first eight chips show, counted across the whole wall, and any group with no visible chips hides its heading too. The "All 36 included" button below the wall reveals the rest, with aria-expanded set and a chevron that turns; its label stays the same so the state isn't announced twice. From md upwards every chip is always visible and the button isn't rendered.

One Guides layer on the section's column draws the side rails and the top rule with its + marks, the same on every block so stacked sections join up. The wall is a grid with gap-px over a bg-border background, so the cells share single hairlines instead of doubling their borders; a second Guides layer with marks="corners" puts the + marks where the wall's top and bottom rules meet the rails. The grid goes from one column to two at sm and three at lg.

Yes. The section has one h2 and each group an h3 over a real list of its chips; the checkmarks are decorative and hidden from assistive technology. Chips are wrapped in bdi, so features with numbers ("360 feedback") keep their order in right-to-left layouts. The disclosure is a button with aria-expanded, reached by Tab like any other, and the entrances are CSS transitions that don't run under reduced motion.

When there is only one plan. A comparison table exists to show what changes between tiers; with nothing gated, the useful thing is to show how much one price covers. The wall makes the breadth visible at a glance, which a three-line feature list can't. If you also sell tiers, use a comparison table instead and keep this for the "everything" plan.