Split Layout Overlapping Browser Frames Hero Block for React

Each window's screen is drawn by ProjectsView or EditorView, picked by the window's view in WINDOWS. To show screenshots instead, replace that line inside the AspectRatio with an img (or your framework's image component) with className="size-full object-cover object-top", and keep the title bar as it is. Capture both screenshots at the same 16:10 ratio, and show two different views, such as a dashboard and a report, so the second window adds something. If the screenshots carry information a visitor needs, take aria-hidden and inert off the panel and give each image an alt.

Each window is an entry in WINDOWS: its place (logical position classes such as -end-[6%] top-[8%], plus the delay of its entrance), its shadow and the view it shows. A negative offset lets the window run off the panel's edge, where the panel crops it. The later entry is drawn on top, so the front window comes last and casts the deeper shadow. For a third window, add an entry between the two, centred (start-[14%] top-[30%]), and shrink all three to about 60% wide so their title bars still show.

They are the Guides component, an aria-hidden layer that draws the lines of the box it sits in. The page column (max-w-6xl, the same in every block) has Guides bleed marks="top" rules="top": two side rails that run the section's full height, so they join the rails of the blocks above and below, and one rule along the top edge that runs to the page's edges, with a plus on each crossing. The block below draws the next rule, so a stack of blocks never doubles a line. The divider is the panel's lg:border-s with Guides marks="start" rules="none" sides={false} for the plus where it meets the top rule. The panel is flush with the rail and has no frame of its own: the windows are cropped by its edges. Every line is solid and is the theme's border colour, so it follows any preset.

The headline is the block's one h1. The pill and both calls to action are links named by their text, and the ticks are a list whose check icons are hidden. The panel with the two windows is decoration: it's aria-hidden and inert, so screen readers skip it and nothing in it can be focused. That's right while it shows a sketch; with real screenshots that matter, describe them with alt text instead.

The two columns stack below the lg breakpoint, with the copy first and the panel under it behind a ruled line. The panel is 20rem tall on phones and 24rem from sm, so the windows keep their overlap at every width, and the editor drops its layers list when its window is narrow; side by side, it takes the height of the copy column. The headline wraps, balanced, the calls to action wrap onto a second line when the row runs out of room, down to 320px, and the Shine Button is on the first screen of a phone.

The copy fades up in steps on load, then the back window rises in, then the front one 250 ms later. Each is a CSS transition from @starting-style, so it runs once when the page renders, with no animation library and no script. With reduced motion turned on, everything is in place from the start.