Tabbed Product Views Hero Block for React

Edit VIEWS at the top of the file: each view has an id, the label on its tab and the window title in its frame's chrome. What a view shows is in ProductView, beside the block, one branch per id: replace a branch with your own content, or add a branch when you add a view. The terminal plays SESSION, where a line starting with $ is a command it types and any other line is output it prints; a line starting with a tick is coloured as a success.

The window has a fixed height (h-96, sm:h-[26rem]), and every view is laid out to fit it, so nothing below it moves whichever tab is open. If a view of yours is taller, raise the height or let that view scroll inside the window.

The switch is our Tabs, a real tab list named Product view: Tab moves into it, and the arrow keys move between Chat, Code and Docs, opening each one's panel as they go; Tab again moves into the open panel. The panels hold real text: the chat's messages, each prefixed "Assistant" or "You" for screen readers, the terminal's session, read once as a whole, and the docs excerpt. Only the window chrome, the composer and the docs sidebar are hidden.

The Code panel mounts when its tab opens, and Terminal Text starts typing once the panel is in view: the commands character by character, each output line after its command, ending on a blinking caret. It's CSS animation, with no timer. With reduced motion the whole session is shown at once, the panels swap without fading, and the page's entrance doesn't play.

Listen for the tab change on the root and send the new view to your analytics: onValueChange on Tabs gives the new value. Compare which view was open last before a click on the call to action to see which surface sells the product, and put that one first.

Use tabbed views when the product has several surfaces that matter equally and a visitor should be able to look at each without scrolling. Use a split hero with a single visual when one surface carries the pitch and the rest can wait further down the page; a tab switch asks for a click before the second view is seen.