Split Layout Tab-Switch Browser Hero Block for React

Replace the drawing inside each TabsContent (ProjectsView, AnalyticsView, SettingsView) with an img that fills the panel (size-full object-cover object-top), with an alt that says what that screen shows, and remove the sr-only description and the inert and aria-hidden wrapper that belonged to the drawing. Every panel has the same height (PANEL), so the window doesn't jump when you switch tabs; give your screenshots one shape for the same result.

Each view is one tab and one panel: an entry in VIEWS (its id, label, Lucide icon and a one-line description that screen readers hear) and a TabsContent with the same value (an id on React Aria). Change defaultValue (defaultSelectedKey on React Aria) to open on another view. Three or four tabs fit side by side down to 320 px; past that, shorten the labels.

Yes. They're real tabs: Tab moves focus to the selected one, the arrow keys move between views and show each one as it's focused, and Home and End jump to the first and the last. The tab row comes before the window, in the reading order and on screen, so the tabs are announced before the view they control.

The headline is the block's one h1, and the announcement and both calls to action are links named by their text. The tab list is named Product view, and each panel reads the view's description; the drawn screens and the window's title bar are hidden from assistive technology and out of the tab order.

The header stacks below the lg breakpoint, the pitch following the headline, and the window sits under the tabs inside the band. The headline steps down from text-6xl to text-4xl, the calls to action wrap when they don't fit side by side, the three tabs share the width, and each view hides its sidebar or second column, so nothing scrolls sideways down to 320 px.

The copy fades and rises in on load, and the tabs and window fade in just after. Each view slides a few pixels in from the reading direction's end when its tab opens, which is from the left in right-to-left layouts. All of it is CSS transitions from starting: styles, with no animation library; with reduced motion, nothing moves and the views simply swap.