Single-CTA Ultra-Minimal Statement Hero Block for React

The block is built around one decision: the ShineButton is the only control, so nothing competes with it. Add a second action only if you need it, as an outline Button under the reassurance list.

A two-column grid on the page column: the statement cell and a 24rem action cell. The action cell has lg:border-s and a Guides layer with a + mark where the divider meets the top rule. Below lg that layer is replaced by a top rule with marks, so the stacked cells are still separated by a line.

Keep it to two or three words: at lg:text-8xl a longer line wraps and the cell grows. The supporting sentence sits under it at max-w-md. The action group is pinned to the foot of its cell with lg:mt-auto, so it follows the cell's height.

Yes, a link on every framework: asChild with an a on Ark and Radix, render with nativeButton={false} on Base UI, and href on React Aria. It takes the full width of its cell, and its light sweeps once on hover or focus and fades in under reduced motion.

The page has one h1, the button is a link named by its visible text, and the reassurance lines are a real list with decorative check icons. All text passes AA contrast in light and dark, and each part's fade is turned off for visitors who ask for reduced motion.

The headline steps down to text-5xl and stays on one line at 375 px and wraps cleanly below, the sentence follows, then a rule with + marks and the full-width button with its two lines. The button is on the first screen.