Split Layout Testimonial Card Hero Block for React

Edit TESTIMONIAL at the top of the file: the quote, the author's author, role, company and initials, the rating out of five and the results, each a value and a label. The stars follow the rating, and screen readers hear it as Rated 5 out of 5. Keep the quote to two sentences: it's set large, so a long one makes the card taller than the copy.

Yes. Put an AvatarImage before the AvatarFallback inside the Avatar and give it the person's photo; the initials stay as the fallback while it loads. The avatar is decorative, because the name is written next to it.

The block keeps colour for its one action, so the stars are drawn in the foreground colour, and the raised card gets its emphasis from structure: a shell, a ring and a shadow, not a coloured fill. The rating is also in the page for screen readers as text.

The announcement link, the headline (the block's one h1), the paragraph, the two links and the trust line, then the testimonial as a figure: the rating, the quote, and the author's name, role and company. The quote is a real blockquote, and the results are a description list, so each figure is read with its label.

The two columns stack below the lg breakpoint, with the testimonial under the copy and a rule between them. The two results stay side by side, the headline steps down from text-5xl to text-4xl and the actions wrap when they don't fit, so nothing scrolls sideways down to 320 px and the Shine Button ends within the first screen.

The copy fades and rises in on load, and the card scales in just after. It's all CSS transitions from starting: styles, with no animation library, and the block renders on the server with no JavaScript of its own. With reduced motion on, everything is simply there.