Split Light Speech Bubble CTA Block for React

Edit CUSTOMER at the top of the file: quote, name, role and initials. The reply text and its button are written in the second BubbleContent. Keep the reply to a few words, phrased as an answer to the quote ("Same results? Start free"), and ask the customer before you quote them.

The reply bubble holds a Shine Button that is a link, so the bubble frames the action without being the target itself. The button is the block's only primary control; the bubbles are muted and outlined, so the text stays readable on every preset. A band of light sweeps across the button once on hover and keyboard focus. The button renders the link it's given with render, with nativeButton={false}.

The customer's message is a figure with a blockquote and a figcaption for the name and role; the initials avatar is hidden since the name is written. The reply reads "Same results?" and then a single link, "Start free". The section's h2 comes first, and the frame and rules are decoration.

Yes. The two columns swap sides with the page direction, and inside the conversation the customer's bubble moves to the end side and the reply to the start side. The quote sits in a bdi so its marks stay put.

Add an AvatarImage with the photo's src and an empty alt inside the Avatar, before the AvatarFallback. The initials stay as the fallback while it loads or if it fails.

Use the speech bubble for a casual, peer-to-peer tone, where the call to action is the reply to what the customer said. Use the dark quote block when the endorsement should read as a statement, with its key phrase highlighted.