Mission Tiles Onboarding Block for React

Edit MISSIONS: each has an id, a title, a sentence, the label of its link (action) and the picture drawn on its tile (product, domain, payments or theme). START lists the ids that are done on load. The ring, the count and the next-job line are worked out from the list of done ids, so a fifth tile needs only its own entry and drawing. Keep the grid at an even number of tiles so the last row is full.

Each toggle is a real pressed button named for its job ("Mark done: Connect a domain"), so a screen reader says what it marks and whether it is on. Pressing it ticks the tile (a check on its drawing and a filled button), moves the ring and the count, and a polite status line says what changed. Pressing again takes the tick back. The toggle keeps its width in both states, so nothing moves.

All of it: marking a tile changes this page only, and the ghost links go to a placeholder address. In your app point each link at the real screen (the product form, the domain settings) and compute done from what the account already has, so a tile marks itself when the job is finished. Keep the manual toggle if you want people to be able to say they did a job elsewhere.

No. Each is drawn from a few boxes and bars in greyscale tokens, hidden from screen readers (the title and sentence say everything), so they take any theme and any text direction and need no files. Swap them for your own illustrations if you like; keep them decorative.

Yes. Tab goes link, toggle, then the next tile; Space or Enter on a toggle marks the job and keeps focus on it. There is no custom key handling to learn.

The header's ring drops under the sentence, and the four tiles stack in one column. Their drawings shrink to a short strip, the link and the toggle stay on one row at the foot of each tile, and nothing scrolls sideways at 320 pixels.