Platform Fee Pricing Block for React

Edit the TIERS array at the top of the file. Each tier has its name and description, the takeRate in percent (a number, so 1.5 keeps its decimal), the monthly fee in dollars (null for a custom contract), the payouts speed, the call to action's cta and href, and featured for the recommended tier. TRUST lists the trust points beside the headline, each with a Lucide icon. The bars are measured against the first tier's rate, so keep the highest rate first.

It's worked out from the tiers, never typed: the plan fee a tier adds over the one before it, divided by how much less of each sale it takes. Growth costs $29 more than Starter and takes 3 points less, so it's cheaper above $967 a month in sales; Business costs $70 more than Growth and takes 2 points less, so it's cheaper above $3,500. Change a fee or a rate and the numbers follow. A custom contract has no number and says Custom.

Each call to action is a real link to its tier's href. Point it at your onboarding route with the tier in the address, for example /onboarding?tier=business, and let your server apply that tier's fee schedule when it creates the seller's account. It's ShineButton with render={<a href={tier.href} />} and nativeButton={false}.

Each tier is an h3 under the section's h2. The rate is read as "3% take rate" and the bar is decorative and hidden, so the numbers carry everything. The plan fee, the break-even sales and the payout speed are a description list, so a screen reader reads each value with its label. Each call to action names its tier for screen readers, as in "Choose Growth, Growth plan".

From the md breakpoint the list is one grid with four columns, the rate, the name, the facts and the button, and each row is a subgrid that shares them, so every rate, fact and button lines up without fixed widths inside a row. Below it each row stacks: the rate and name side by side, the facts, then a full-width button. The trust points are hidden on a phone to keep the header short.

Move featured: true to that tier. Its row takes a tinted band and its Recommended Badge, and its button becomes the default (primary) variant while the others are outlines.

Use rows when every tier is measured on the same few numbers, a rate, a fee, a payout speed, and buyers scan down a column to see them fall. The bars make the trade-off visible at a glance, which suits marketplaces where the falling take rate is the selling point. Use plan cards when tiers differ by features rather than by rates.