Dashboard Preview Hero Block for React

Replace everything inside FramePanel with your image, and drop the panel's padding (p-0) so the screenshot fills it: an img with w-full h-auto, and alt text that says what the screenshot shows. Export it at about twice the window's widest size (2,300px across) so it stays sharp on high-density screens, and give it its width and height so the page doesn't jump while it loads. Keep the window's header: its dots and address bar frame any screenshot. The window's height and the fade at its foot belong to the box around it (lg:h-[34rem] and the mask), so they stay.

Yes. The tiles come from METRICS (a label, a value and a change), and the chart's line from REVENUE, twelve numbers drawn into a 600 × 160 box. The sidebar and the list are Skeleton bars with their pulse turned off, sized by NAV and ROWS. The chart is plain SVG, filled and stroked in your theme's foreground colour, so the primary colour stays on the Shine Button.

The window is a picture of the product, so it's hidden from screen readers and inert: nothing in it can be focused or read, and nobody tabs through a sidebar that doesn't work. Everything that matters is in the text above it. The headline is the page's one h1, the pill and both calls to action are links named by their text, and the dot in the trust line is hidden so it isn't read aloud. If you swap the sketch for a screenshot, give the img its alt text and remove aria-hidden and inert from the window.

The sketch rearranges instead of shrinking, and the box around it is shorter (h-80), so the call to action stays inside the first screen. Below the md breakpoint the sidebar is hidden, and below lg the four tiles sit two by two, the chart takes the full width and the list is hidden, so the numbers stay readable on a 320px screen. The headline steps down from text-6xl to text-4xl, and the calls to action wrap onto two lines when the row runs out of room.

The pill, the headline, the supporting line, the buttons and the trust line fade up one after another, then the window rises and fades in. It's all CSS transitions on the first paint, with no animation library and no script. With reduced motion turned on, everything is in place from the start.

Start free trial is the one main action, a Shine Button: a band of light sweeps across it once when the pointer arrives or it takes focus. View live demo is an outline button. Both are links (href="#"); point them at your sign-up route and your demo. Each renders the link it's given with render, with nativeButton={false}.