Tabbed Feature Showcase Hero Block for React

The data is at the top of the file: FEATURES for the checklist, INTEGRATIONS for the tool grid (each with a name, a category and a Lucide icon) and PLAN for the price (currency, amount and its perks). The layout of each panel is in TabPanel, beside the block, one branch per tab: change a branch to show something else, a screenshot or a video, and the tab itself doesn't change.

Add an entry to TABS with an id and a label, and a branch for that id in TabPanel: the trigger, the panel and the panel's place in the height reserve all come from the list. The tab open on load is defaultValue on Tabs. Three or four short labels fit a phone; the triggers share the card's width there and sit at their own width from the sm breakpoint.

The switch is our Tabs, a real tab list named Product overview. Tab moves into it, the arrow keys move between Features, Integrations and Pricing and open each one's panel, and Tab again moves into the open panel. Each panel starts with an h2 under the page's h1, and the price reads as "$29 per seat, per month". Only the open panel is in the page; the copies that hold the card's height are hidden from assistive technology and can't be focused.

Every panel is also rendered, invisible and inert, in the same grid cell as the open one, so the card is always as tall as the tallest panel at the current width. A short panel leaves some space below it, and nothing under the hero moves when a visitor switches tabs. If one panel grows much taller than the others, consider trimming it, since every tab takes its height.

Use tabs when each topic fits in a few lines and visitors look for different things first: some want the feature list, others the price. Use separate sections when a topic needs room to breathe, or when everything should be seen without a click; content in a closed tab isn't in the page until it's opened.