Treemap Quota Pricing Block for React

CATEGORIES lists the four resources, each with its label and a tone from the TONES ramp. PLANS holds the plans: each has an allocations entry per resource with the display text written on its tile and in the quota list, and the dollars of the plan's price that go to that resource. The price is the sum of a plan's dollars, so change both together. Each plan also has its tagline, cta, href and features, and popular adds the tint, the Most popular badge and the filled button.

With slice and dice. The largest resource takes a slice across the longer side of the treemap, the next takes a slice across the longer side of what remains, and the last fills the rest, so every tile's area is its dollars' share of the plan. The layout is worked out once from the data when the module loads, as percentages, so the treemap scales with its cell and needs no measuring. The treemap is a fixed 176 px tall and as wide as its cell; the areas stay true at any width.

Each treemap is one image named with the plan's split, for example "Growth plan, share of the price by resource: Compute 8 vCPU, 40%; Memory 32 GB, 21%; …", so the tiles aren't read one by one. The quota list under it is a real description list of each resource, its quota and its share, the price is read as "$95 per month", and each call to action carries its plan's name ("Start free trial, Growth plan"), so two links with the same text stay distinct.

Every tile is a size container. When a tile is narrower than about 56 px its resource name hides and the quota stays, so the text never spills out of the tile; the legend's tones, the quota list below and the image's name still identify every resource. The tiles' colours are a ramp of the theme's text colour, from solid to faint, each with a label colour that keeps AA contrast in light and dark mode and in every preset.

Below lg the plans sit in a row you swipe sideways, each card snapping to the middle, the popular plan first and the next card peeking so it's clear there's more. The dots under it are buttons named for each plan: the one in view is marked and pressing another scrolls its card into view, smoothly unless the visitor prefers reduced motion. Each card keeps the treemap, the price and the button together, so the call to action is within the first screen and a half. From lg the three cards are a row of cells.

Each call to action is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Set each plan's href to your checkout or sign-up route with the plan in the query, for example /signup?plan=growth. The treemap is display only and has no effect on billing.