Open Source Pricing Block for React

Edit the constants at the top of the file. MINUTES is the monthly allowance and BUILD_MINUTES the length of a typical build, which gives the "about 5,000 builds" line. FEATURES lists what's included, each with a name and an optional quantity written in the text colour before it. RULES are the numbered eligibility rules, a title and a detail each. SHOWN_ON_PHONE sets how many features a phone shows before the disclosure.

The call to action is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at your application form or at a sign-in that reads the applicant's repositories, check the rules on your server (license, recent commits), and on approval give the account the plan in your billing system.

Below the md breakpoint, features after the fifth get max-md:hidden until the disclosure is pressed; the button says "All 9 features", flips its chevron and then reads "Show fewer". It has aria-expanded and aria-controls pointing at the list, and it's hidden from md up, where every feature always shows. Nothing is removed from the page, so a search for text finds all of them.

Yes. The plan and "Who qualifies" are h3 headings under the section's h2. Features are a list with decorative checkmarks, and the rules are an ordered list whose digits are decorative, since the list already announces its order. The price reads "$0 forever". The disclosure is a real button with a state.

The card comes first, then the rules. The price, the minutes line and the apply button land within the first screen of an iPhone, with five features and the "All 9 features" button under them. The rules follow as ruled rows. Nothing scrolls sideways at 320 pixels, and in right-to-left pages the layout mirrors.

Use a single card when the offer is one package gated by who qualifies: it keeps attention on the value and the rules, and asks for one action. Use a comparison when you offer several tiers whose features differ, so buyers can weigh them side by side.