Audience Tabs Pricing Block for React

Edit the AUDIENCES array at the top of the file. Each audience has an id, the tile's label and who line, a Lucide icon and its plans. A plan has its name, description, price per editor a month, featureHeading and features, the call to action's cta and href, and popular for the tinted plan. A price of 0 shows "Free" and null shows "Custom". Keep three plans per audience so the cells fill the row, and three audiences so the tiles fill the header.

Each call to action is a real link to its plan's href: send self-serve plans to checkout with the audience and plan in the address (/checkout?audience=studio&plan=studio) and the custom one to your contact form. It's a ShineButton with render set to an a element and nativeButton={false}. Every button names its plan for screen readers, as in "Start 14-day trial, Studio plan".

Yes. They're real tabs: a tab list named "Audience" whose tabs each control a panel, so a screen reader announces the tab, its position and the panel it opens. Tab reaches the selected audience, the arrow keys move between audiences, and Tab moves on into the open panel. The chosen tile is marked by its tint and the line across its top, not by colour alone. In each panel the plans are h3 headings under the section's h2, prices are read with their unit ("$29 per editor per month"), and the most chosen plan's badge is text.

Below the md breakpoint the three plan cells become one. A segment group named after the audience ("Studio plans") sits above the panel: a radio group, so the arrow keys move and choose, and the chosen plan's cell is the only one visible, all three stacked in the same space so switching never moves the page, with its call to action a short scroll from the header. It opens on the most chosen plan, and each audience remembers the plan its visitor picked while they look at the others. The tiles keep their icon and name and drop the line under it, so the three fit a 320px screen.

Use audience tabs when your customers are distinct groups whose plans differ in price model, limits and features, such as a freelancer paying for one seat and an agency paying per editor with client portals: each group sees only the plans meant for it, and picking the tile is the first step of choosing. If everyone follows the same upgrade path, one row of tiers or a comparison table is simpler and lets visitors see every plan at once.