Phase Stepper Onboarding Team Block for React

Edit PHASES at the top of the file: each phase has an id, a title, a few words of when, a heading for its tasks, four tasks and its mentor. START lists the task ids ticked on load and START_PHASE the phase chosen. The counts and the bars are counted from the tasks. A phase can have more or fewer than four tasks: the block keeps the height of the tallest panel, so choosing a phase never moves what is below it.

It says where you are, not what you've finished: choosing a phase marks the ones before it as passed, whatever their tasks say. Tab goes to the chosen phase; the arrow keys move focus between phases, and Enter or Space chooses one. A status line reads "Week 1: 3 of 4 tasks done" when the phase or a task changes.

No. Ticks live in the page's memory only, and the copy says so. A reload starts again from the five tasks ticked on load. To keep progress, store the ticked ids in your own app and pass them in as START.

Each phase names its own mentor, with a role and a line: the IT manager for Day 1, a buddy for Week 1, the manager for Month 1 and a sponsor for Month 3. The line is part of the data, so write it in the person's voice. The avatar is an initials circle, hidden from assistive technology, since the name is right beside it.

The stepper keeps its size and scrolls sideways inside the panel; arrowing between phases scrolls the chosen one into view. The phase's descriptions drop away to keep each step narrow. The tasks are one per row and the mentor goes under them, behind a rule.

The header and the panel fade up once when the page loads, with CSS transitions, and the progress bar and the stepper's colours ease between values. With reduced motion all of that is off and values change at once.