Evolution Case Study Gallery Block for React

The Toc watches the four headings (each band's h3 has the id its entry links to) and marks the one on screen with a bar. Choosing an entry scrolls to its heading and updates the address. The index sits in a sticky column, so it stays beside the pictures on wide screens.

Each stage in STAGES has an id, an anchor, a time, a heading and a sentence, and ArtFor returns its picture. Replace a drawing with an img (keep its box, 16 by 10 from md), and keep the heading's id: the index reads the anchors from the same list.

Tab reaches the index's links, and Enter jumps to a band. The pictures are drawings, so the heading and sentence beside each one carry the meaning. On phones the chips are links to the same anchors.

The split and the index bar mirror. The drawn pictures keep their own direction, since they show a layout and a mark, and the summary's year is left as digits.

The index becomes a row of chips, the summary two columns, and each band stacks its picture above its heading; the longer sentences are left out to keep the page short.

Yes. Every tone is mixed from your foreground, background and card colours, so the sketch, the grey mock-up and the shipped page are light in a light theme and low-key in a dark one.