Split Layout Browser Frame Hero Block for React

Replace the drawn deployments list inside DeploymentsWindow with an img that fills the window's body (size-full object-cover object-top), and give it an alt that says what the screen shows. Or keep the drawing and edit DEPLOYMENTS and NAV to match your product. The window is decoration while it shows the drawing, so its box is aria-hidden and inert: remove both once it shows a real screenshot.

Edit ADDRESS at the top of the file, for instance to your app's own domain. It sits after a lock icon in a bar that takes the rest of the window's width, up to a maximum, and a long address shortens with an ellipsis instead of pushing the window wider.

The headline is the page's one h1. The pill and both calls to action are links, each named by its text, and the checklist is a list whose check marks are hidden, so each feature reads as plain text. The browser window is hidden from assistive technology and taken out of the tab order with inert, since the drawing is decoration.

Everything stacks: the copy, the checklist (three rows instead of three cells) and then the window, which is 18rem tall on a phone and drops its sidebar and extra columns, so the list stays readable. Both actions end within the first screen, the headline wraps, balanced, and nothing scrolls sideways down to 320 px.

The copy fades in as it rises a few pixels, and the window fades in as it grows from 98% of its size, 150 ms later. Both are CSS transitions from starting: styles (@starting-style), with no animation library. Under reduced motion there are no transitions: everything renders in place.

Use a browser frame when your product is a web application people use on a desktop or laptop: the dots and the address bar say so at a glance. Use a phone mockup for mobile-first products and native apps, where the device itself tells visitors where they'll use it.