Pricing With FAQ Block for React

Edit the arrays at the top of the file. Each entry in PLANS has its name, description, a line of facts (the limits that matter), monthly and annual prices (annual is the monthly amount when billed yearly), the call to action's cta and href, and featured for the tinted row and its Best value badge; FEATURED_ID is the plan the phone switch starts on. Each entry in QUESTIONS has an id, the question and its answer; put the objection that costs you the most sales first, and set OPEN_QUESTION to its id so it opens by default. CONTACT_HREF is where "Talk to our team" goes.

Each call to action is a real link to its plan's href, and the contact link one to CONTACT_HREF. The buttons use render with an a element and nativeButton={false}. Add the billing period from the switch's state to the address, such as /signup?plan=grow&billing=yearly, and map the plan and period to your payment provider's price on your server.

Yes. Each question is a button inside a heading that says whether its answer is expanded and which region it controls, so a screen reader can list the questions by heading and open one with Enter or Space. The arrow keys move between questions, and Home and End jump to the first and last. The plus icon is decorative. The billing switch and the phone's plan switch are radio groups named "Billing period" and "Plan", plans are h3 headings under the section's h2 and each call to action names its plan, as in "Choose Grow, Grow plan".

From the lg breakpoint the plan list and the questions sit side by side in the band, and each plan row is its name and limits, its price and its button in one line. Below lg they stack, plans first. Below md a switch named "Plan" shows one plan at a time, the featured one first, and the row stacks: name, price, then a full-width button, so the button is within the first screen and a half. The line under each price keeps the room of its longer text, so changing the period doesn't move the buttons.

Put it next to pricing when a handful of questions (trials, fees, domains, switching plans) decide whether someone buys: the answer is there at the moment of doubt, and the questions are kept short enough not to bury the plans. Keep a separate help page for product how-tos and anything longer than six questions.