Testimonial Inline Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has a name, a description, its monthly price, its annual price (the monthly amount when billed yearly, 20% off here), its features, featured for the tinted row with the primary button, an optional badge and the button's cta and href. Its testimonial has the quote, the author with their initials, role and company. SHOWN is how many features show before the disclosure. The quotes here are made up for the demo: use real ones, with permission.

It's a native details element, so it needs no script and works with Enter or Space, in every browser and on every base. Its summary reads "All 8 features" when closed and "Fewer features" when open, and the chevron turns with CSS (not at all under reduced motion). The first four features are always visible; opening it adds the rest below them.

Each button is a real link to its plan's href: point it at your sign-up or checkout route with the plan and the period, for example /checkout?plan=growth&billing=annually, and send Agency to your sales form. It's a ShineButton with render set to an a element and nativeButton={false}.

Yes. The plans are a list, each plan's name is an h3 under the section's h2, and each quote is a figure with a blockquote and a caption naming who said it. The avatars are decorative and hidden from screen readers, since the name is in the caption. Each price keeps its amount in visually hidden text with "per month", each button names its plan ("Start 14-day trial, Growth plan"), and the billing switch is a radio group named "Billing period".

Below the lg breakpoint each row stacks: the plan with its price and button on one line, the first four features with the disclosure, then the quote, so the Growth button is within the first screen and a half. Nothing scrolls sideways, and the quote keeps its reading size.

When buyers hesitate over which plan is right for them: a peer on the plan they're considering answers that better than a feature line. Keep each quote to one or two sentences about why that plan fit, and match it to the plan's real customers. If you have a few strong quotes rather than one per plan, a single testimonial strip under the plans is simpler.