Glass Card Hero Block for React

They're a Mesh Gradient, which is the frame's fill: GLOW gives it one colour per corner, clockwise from the top, here your theme's --primary and two mixes of it, so the glow follows your accent and no new hue joins the page. Pass any CSS colours, such as var(--chart-2). The block sets their strength with --mesh-gradient-strength (0.7 on a light page, 0.4 on a dark one); raise it for a bolder glow, but check the muted text stays readable over the brightest corner.

The inner panel is a translucent bg-card/70 with a border, a ring, a shadow and backdrop-blur-xl, so it blurs the mesh and its fine grain behind it, and both drift softly through it. Nothing has a dark scope, so the panel, the text, the pill and both buttons use your theme's own tokens with no overrides: a pale frosted pane on a light page, a smoked one on a dark page. On a low-powered device, drop the blur: the panel still separates by its tint, ring and border.

Start free and Read the docs are links (href="#"); point them at your sign-up page and your documentation. Each button renders the link it's given with render, with nativeButton={false}.

Yes: every text keeps WCAG AA contrast, in light and dark pages and across theme presets, because it sits on the glass panel and not directly on the mesh. The mesh is hidden from assistive tech, the headline is the page's h1, the features are a list with their ticks hidden, and the pill and buttons are links with a visible focus ring. With reduced motion the colours hold still and nothing fades or rises on load.

The space around the glass shrinks from m-8 to m-3 and its padding tightens, the headline steps down from text-5xl to text-4xl, and the feature lines wrap beside their ticks. The buttons wrap onto two lines when the row is too narrow, and both end on the first screen.

Use it when a sense of depth and colour suits the brand, as for AI and design products: the glow draws the eye and the glass keeps the text calm on top of it. When the product is the picture (code, a terminal, a dashboard), a hero such as Dark Code Window gives that picture the attention instead.