Role Tabs Testimonials Block for React

Edit PERSONAS at the top of the file: each role has a label, an icon from lucide-react, a one-line need for the list, an intro for the line above the ticks, three cares and one quote with its person. The list and the panels are both built from it, so adding a role adds a tab. Keep the three ticks to a short line each; they share the panel with the quote.

A vertical tab list is used with the up and down arrow keys, so it stays a vertical list at every width instead of turning into a row that would use different keys. It sits above the panel below the lg breakpoint, with a rule between them, and on the smallest screens the one-line need is dropped so the four rows stay short.

They are real tabs with real panels. Up and down move between the roles and open the one you land on, Home and End jump to the first and last, and Tab moves on into the open panel. The list is announced as "Role" and each tab by its label and need. The quote is a figure with a blockquote and the person as its figcaption; the icons are decorative.

An unseen copy of every role's panel sits in the same grid cell as the open one, so the cell is always as tall as the tallest role. The copies are hidden from screen readers and can't take focus.

The fade-and-lift entrances are skipped: the panel simply appears when you pick a role.

Yes. The split flips, so the list is at the end of the line; the marker beside the selected role and the line beside the quote both sit at the start of their side, and the quote keeps its curly marks in place.