Partner Program Pricing Block for React

Edit the constants at the top of the file. LIST_PRICE is the seat price before any discount and FEATURED the id of the tier that is tinted and shown first on a phone. Each tier in TIERS has its name, commission in percent, term (how long a referred customer pays it), seatDiscount in percent, the minimum referred revenue a year, a perks sentence, the call to action's cta and href, featured and an optional badge. The seat price is worked out from LIST_PRICE and seatDiscount, so the figures always agree. EVERY_PARTNER lists the left column.

Each call to action is a real link to its tier's href. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at your application form with the tier in the address (/partners/apply?tier=gold). Once a partner is approved, give their seats the tier's price in your billing system, as a separate price or a coupon, and track their referrals against the tier's commission.

Below the md breakpoint a Segment Group named "Partner tier" lists Silver, Gold and Platinum, with Gold selected, and only the chosen tier's row is shown (the others get max-md:hidden). It's a radio group, so arrow keys move between tiers. From md up the control is hidden and all three rows show. The commission and the apply button of the tier you chose land well within the first screen and a half of an iPhone.

Yes. The list price stays in the page as a struck-through s element with hidden words around it, so a screen reader reads "Seats were $40, now $30 per seat per month, 25% off" rather than two bare numbers. The section has one h2; each tier is an h3 in a named list, and the commission and its term read as one phrase.

From the lg breakpoint the header and the benefits list sit in a column on the left and the tiers fill the right, divided by one hairline with a + where it meets the top rule. Below it, the order is the header, the tiers, then the benefits. The page uses CSS grid areas for that, so the benefits come after the tiers without being repeated in the markup. Each row is three columns from sm (the commission, the details, the button) and stacks below it.

A partner program sells to people who earn from it, so the percentage they keep is the first thing they compare. The seat discount for their own use is a perk of the tier, shown struck through beside the list price as a smaller line. If your program pays flat bounties instead, put the amount in the same place at the same size.