Team Tiers With Avatar Clusters Block for React

Edit the PLANS array at the top of the file. Each plan has its name, range, per-host price (0 shows "Free"), tagline, features, call to action and href, popular for the tinted plan, and avatars and disc for its cluster: how many of the sixteen initials in PEOPLE to show and how big each one is. Keep the cluster at about 64 pixels tall so it stays a mark and doesn't push the price down the page.

Each call to action is a real link to its plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. Point Duo at your sign-up, Crew at checkout with the plan in the address (/checkout?plan=crew) and Floor at your sales form; create the Crew and Floor subscriptions with a per-unit price and the number of hosts as the quantity.

Yes. Below md the switcher is a SegmentGroup, a radio group named "Plan": Tab reaches the selected plan and the arrow keys move and select. The plans that aren't showing are visibility: hidden, so they're out of the tab order and hidden from screen readers, and there are no hidden focus traps; they keep their space, so the block doesn't change height when you switch. On a desktop every plan shows and the switcher is hidden. The clusters are decorative; the host range under each one says the same in words.

The switcher sits under the headline with Crew selected, so the recommended plan and its button are within the first screen and a half of an iPhone; Duo and Floor are one tap away. The cluster, range, price, button and features of the chosen plan stack in one column. The headline and the line beside it stack too, and the line stays start-aligned.

Because the thing that separates these plans is how many people use them, and a crowd says that faster than a number. A reader can tell a pair from a floor at a glance, before reading a word, which is the card-size test for a plan grid. The clusters are made of initials, not photos, so they work in every theme and never imply real customers.