Testimonials With CTA Block for React

Edit the STORIES array at the top of the file. Each story has the quote, the speaker's name, initials, role and company, and a result made of a percent and a label that completes the sentence ("faster builds", "fewer failed deploys"). Keep the result something the customer measured and agreed to share, and use their exact words for the quote.

It takes the story with the largest percent, so the call to action always repeats the strongest number the page has actually shown. Add a third story and the headline still follows the data; nothing in the panel is typed by hand.

Both are real links: point their href at your sign-up, trial or product page. The label of the main one says what the visitor gets rather than "Learn more". The Shine Button is the block's only primary control; the second is an outline button. Each button renders the link it's given with render, with nativeButton={false}.

The section's h2 introduces two quotes in a list, each a figure with a blockquote and a figcaption; the result is the first line of its cell, written as "62% faster builds". The panel's headline is an h3 followed by two links. The avatars are decorative because each name is written beside them, and the + marks and lines are hidden.

Yes. The band, the divider and the panel follow the reading direction, and the percentages sit in a bdi so they keep their order. The quotes keep their quotation marks at the ends of the sentence.

The two quotes stack in one column below md, with a rule and + marks between them, and in the panel the headline sits above the buttons below lg, so everything reads at 320px with no horizontal scroll.