Centered Minimal Hero Block for React

The two lines are separated by a br, and the second is a muted span, so the hierarchy is in the colour of the words, not a second element. Keep the max-w-2xl on the heading so a long headline doesn't run the full width, and let text-balance even out the lines on a phone.

A bold lead and a muted continuation is how this set sets display type: the first line says the thing, the second adds the turn. The muted colour is text-muted-foreground, which passes AA contrast on the page background in light and dark.

They are the same page rails every block in this set draws, with the top rule and + marks, but with fade="top", so the side lines appear from nothing at the top, which suits a hero that opens a page. When this hero follows another block, remove the fade so the rails stay unbroken.

The ShineButton is the one primary control: a band of light sweeps across it once on hover or focus, and fades in instead for visitors who ask for reduced motion. Both actions are real links: asChild with an a on Ark and Radix, render with nativeButton={false} on Base UI, and href on React Aria.

Yes. The page has one h1, both calls to action are links named by their visible text with a visible focus ring, and the muted line, the sentence and the platform note all pass AA contrast. The entrance only fades and lifts each part a few pixels, and it is off under reduced motion.

When the sentence is the pitch: a strong brand, a known launch, or a product that is easier to say than to show. When visitors need to see the product, use a showcase or split hero; when they need to trust you first, add logos or ratings.