Government Plan Pricing Block for React

Edit the arrays at the top of the file. PLANS holds each plan's name, description, yearly price (null shows "Custom"), call to action, href and whether it's highlighted; GROUPS holds the categories and their features, each with a value per plan id (true for a check, false for a dash, or text such as "IL4") and an optional info sentence that adds the info button. CERTIFICATIONS is the strip of cells under the headline: a standard and the level it reaches. Add a plan and TypeScript points at every feature that still needs a value for it.

Each call to action is a link: point Department's and Agency's href at your quote form with the plan in the address (/quote?plan=agency) so your CRM can route it, and Federal's at your sales contact page. The link is render={<a href={plan.href} />} on ShineButton, with nativeButton={false}.

Plan names are column headers, feature names are row headers and each category heads the rows under it, so a screen reader reads "Federal, ITAR-compliant infrastructure, included" rather than an icon: every check and dash carries hidden text. Prices are read in full ("$72,000 per year"), and each call to action names its plan, so the two "Request quote" links are told apart. The table takes the section's heading as its name, the certification strip is a list, and every info button is named for its term ("What is FedRAMP baseline?").

They're Toggle Tooltips: a real button opens the explanation on hover, on a tap and on Enter or Space, and it closes on a second press, on Escape or when focus moves on. A hover-only tooltip would leave touch and keyboard users without the definitions, which matter most to the procurement officers reading the table.

The certification cells reflow to two columns, then a plan switch (a radio group) picks one plan with the most chosen one selected, and the table shows the feature names beside that plan's column. The call to action is within the first screen and nothing scrolls sideways. 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.

Use a table when buyers must verify many compliance requirements side by side, as procurement teams do with FedRAMP level, impact level and ITAR before they can shortlist a vendor. Plan cards suit offers that differ mostly in volume and price, where a few highlights are enough to choose.