Feature Heatmap Pricing Block for React

Edit the arrays at the top of the file. GROUPS holds the sections (Teaching, Selling…), each with its features: a feature has a name and, in levels, a level per plan id from 0 (not included) to 3 (full). PLANS holds each plan's name, tagline, monthly price, call to action and href, and popular for the recommended one. GRADES holds each level's legend label and colors, in level order. Add a plan and TypeScript points at every feature that still needs a level for it.

Each call to action is already a link: point its plan's href at your checkout with the plan in the address (/checkout?plan=academy), and Campus's at your sales form, then let your server map the plan to your payment provider's price. The link is render={<a href={plan.href} />} on ShineButton, with nativeButton={false}.

Color is never the only cue: every cell shows its level as a number, and screen readers hear the level's name instead ("Full", "Limited", "Not included"). Plan names are column headers, feature names row headers and each group's name heads the rows under it, so a cell reads as "Academy, Live cohorts, Standard". The table is named by the section's heading, and each call to action says which plan it's for. The legend is a list, and the phone's plan switch is a radio group.

Below md the plan switch appears with the recommended plan selected, and the table shows the feature names and that one plan's squares, so the call to action sits in the first screen and nothing scrolls sideways. The legend folds into two rows. The full table and the one-plan table are rendered from the same data and the one not in use is display: none, so assistive technology meets only one.

They are greys from the theme's foreground, so they follow your theme and dark mode and never compete with the one primary button: level 1 is a 10% tint and level 2 a 25% tint, both under the text color, level 3 is the solid foreground with the background as its text, and level 0 is an outline with no fill. Each pairing keeps its digit above WCAG AA contrast. Change a level's tone in GRADES to restyle it; the legend and every cell of that level follow.

Use a heatmap when your plans differ in how deeply they support the same features (limited, standard, full) rather than whether they have them, as when every plan can sell a course but higher plans add bundles, payment plans and affiliates. Use a comparison table when the differences are mostly yes or no, or limits best written as text.