Centered Audience Tabs Hero Block for React

Edit AUDIENCES at the top of the file. Each role has an id, the label on its segment, the headline's two lines (headlineStart and headlineEnd), a subtitle and its features. Add or remove a role and the switch grows or shrinks with it; keep two to four roles with short labels so the switch fits on a phone. The checklist band is three columns, so keep three features per role. The role shown first is the state's starting value, engineers: start with the role most of your visitors have.

Every role's headline, subtitle and checklist is also rendered, invisible and hidden from screen readers, in the same grid cell as the copy on show, so each area is always as tall as the longest role at the current width. The text can differ in length from role to role, and the actions and bands around it stay put.

The switch is our Segment Group: a radio group named Your role. Tab moves into it, the arrow keys change the role, and a screen reader announces each choice as a radio button that's selected. The copy sits in a polite live region, so after a change the new headline, subtitle and checklist are read once the visitor stops. There's still one h1 on the page: the headline of the role on show.

Call your analytics in the switch's onValueChange handler with the new role, and pass the role on with the calls to action, in their links or as a property of the click event, to see which persona signs up most. To keep the choice between visits, put it in the URL (?role=designers) and read it back for the default.

The switch's background slides to the selected role, and each time the role changes the new copy and checklist fade and rise into place. On first load the switch band and the actions fade in the same way. It's all CSS transitions, with no animation library. With reduced motion, the copy changes at once and the switch's background jumps to its new place.

The switch band and the headline come first, then the actions, all within the first screen. The checklist's three cells stack into three ruled rows, and the switch's labels are short enough to fit at 320px.

Use audience tabs when one product serves different people for different reasons, and each would scroll past a pitch written for someone else. Use a single headline when your positioning is unified or one persona brings most of your sign-ups: a switch adds a decision before the visitor has read anything.