Per-Seat Pricing by Seat Type Block for React

Edit the SEAT_TYPES array at the top of the file: each type has a name, a description, an icon, a price per seat per month (0 for free), the min seats a team needs and the tone of its segment in the bar. START holds the counts the page loads with. The tiles, the bar, the legend, the sum and the total are all worked out from the array, so a fourth type needs no other change; for four tiles on a desktop, widen the grid by one column.

The call to action is a real link, and its screen-reader text includes the head count and the total. It's a ShineButton with render set to an a element and nativeButton={false}. Build its href from counts, for example /checkout?full=3&collaborator=4&viewer=12, and create one subscription item per seat type with its count as the quantity.

Yes. Each stepper is a group named for its seat type, with buttons named "Add a Full seat" and "Remove a Full seat" and the count in an output element that announces its changes politely. At the lowest and highest counts the button is marked aria-disabled rather than disabled, so pressing it never moves the keyboard's place, and the count simply stays. The bar is decorative; the legend under it says the same thing in words.

Below the md breakpoint the tiles become compact rows, name and price on the start side, the stepper on the end, and the total cell is position: sticky at the foot of the section, so the total and the call to action stay in reach while the visitor changes counts. It sits inside the section, not fixed to the screen, so it scrolls away with the block. From md it's an ordinary cell in the grid.

Because they are the reason the price is fair. A team lead who sees that the designer's manager, the client and the whole sales team can open diagrams for nothing stops counting heads and starts counting builders. Keep the free type's limits honest in the description, and put a count of them in the bar so the mix tells the story.