Left-Heavy Single Testimonial Hero Block for React

Edit the TESTIMONIAL object at the top of the file: the quote, the customer's name, role and company, the initials shown in the avatar, and the result line under the quote (metric, before and after). The customer and company in the block are fictional, so use a real quote and a result you have permission to publish, word for word. Two to three sentences read best: a longer quote makes the card taller than the copy beside it.

Add an AvatarImage with the photo's src inside the Avatar, before the AvatarFallback, and set its alt to an empty string: the name is written beside it, so a screen reader would only hear it twice. The initials stay as the fallback and show until the photo loads, or if it fails. A square photo of at least 64px looks sharp at the avatar's size.

The announcement pill and the "View the case study" button already point at #: give them your case study's URL. To make the card itself a way in, add a link under the attribution ("Read Fernway's story") rather than wrapping the whole card in one, so the quote stays easy to select and the link's name stays short.

Yes. The headline is the page's one h1, and the card sits in an aside named "Customer testimonial". The quote is a figure with a blockquote and a figcaption for the attribution, so assistive technology reads who said it. The result line is a description list, and its "from" and "to" are read aloud, since the arrow and strike-through are visual only. The large quote mark is decorative, and it mirrors in right-to-left layouts along with the rest of the block.

Use one anchored quote when you have a single exceptional customer story, with a concrete result ("two weeks to two days") from someone your buyers recognise. It reads in seconds and nothing moves. A rotating carousel shows breadth, but most visitors see only its first slide, and it needs pause controls; the Rotating Testimonials hero has them.

Below the lg breakpoint the grid becomes one column: the copy comes first, with both calls to action on the first screen, and the card follows at full width behind a rule with + marks. The headline wraps, balanced, at text-4xl, the calls to action wrap when the row runs out of room, and the quote steps down from text-2xl to text-xl. Nothing scrolls sideways down to 320px.