Centered Light Link Secondary CTA Block for React

Both are links (href="#"): send the Shine Button to your roadmap or sign-up and the quiet one to the changelog or docs. A band of light sweeps across the Shine Button once on hover and keyboard focus. Each renders the link it's given with render, with nativeButton={false}.

It's a thin span under the label, scaled from nothing to full width with a CSS transition when the link is hovered or takes keyboard focus. It grows from the middle outwards, in your theme's foreground colour. With reduced motion it doesn't grow: it fades in at full width instead. The link has no hover fill, so the line is the only change.

Yes. The arrow after "Read the changelog" is mirrored with an rtl: utility so it points the way the text reads. The roadmap cells follow the page direction, and the vote counts sit in bdi so their digits keep their order.

It's body-sized text in the full foreground colour, an arrow beside it and an underline on hover and focus, and it sits in a button-sized target with padding, so it's well over the minimum touch size. The keyboard focus ring is the button's own.

Everything is centred in one column: the headline steps down from text-5xl to text-3xl, the button and link stack at their natural width, and the three roadmap cells stack one per row, divided by hairlines, so nothing overflows at 320 px. The button lands on the first screen.

When the two actions aren't equals. A second button asks for a decision; a quiet link says "this is optional". If both routes matter equally, use two buttons.