Case Study Testimonial Block for React

Edit the constants at the top of the file. COMPANY, DISPATCHERS and GLANCE fill the list and the intro, PLANNING and MISSED hold the before and after numbers, and the Challenge, Solution and Result paragraphs and the PERSON quote are plain text in the markup and the object beside them. The large figure is Math.floor(PLANNING.before / PLANNING.after), so changing the two numbers changes both the figure and the line beside it. Keep each claim something the customer has agreed to.

The section's headline is an h2, and Challenge, Solution and Result are each an h3, so a screen reader can jump between them. The at-a-glance list is a description list, so each label is announced with its value. The quote is a figure with a blockquote and a caption naming the speaker, and the large figure and its caption sit together in one paragraph, so "18×" is read with "faster planning, from 6 hours to 20 minutes". The rules and + marks are decoration and hidden.

Replace the constants with props or a fetched object of the same shape: the list rows, the before and after numbers, the three paragraphs and the quote. The block is a server component with no state, so it can render a story fetched on the server with no client code, and the figure stays correct because it is computed from the numbers you pass.

Below the lg breakpoint the two columns stack: the headline, the buttons and the list first, then the bands, each with its heading above its text and a full-width rule. It reads at 320px with no sideways scroll. In a right-to-left page the layout mirrors on its own, the divider and its + marks move to the other side, and the figure, the numbers and the quote each sit in a bdi, so "18×" and the quotation marks keep their order.

Only a single fade-up of the two columns when the page loads, in CSS, and it is off under reduced motion. The Shine Button sweeps its light across once when the pointer or keyboard focus arrives, and with reduced motion the light fades in where it stands. The headline figure is plain text from the first paint: it does not count up, so the page never shows a zero.

Use this when you have one customer story that is worth reading from start to finish, with a measurable result. When you have several equally strong opinions and no single narrative, a grid or a wall of quotes shows them faster.