Horizontal Timeline Logos Block for React

Edit RESERVES at the top of the file, in the order they joined: a name, a Lucide icon, a lettering and a mark. The label under each node is "Year" and the item's position, so reorder the list to change the story, or replace it with your own labels in the markup. Six fit one row from md; for another count change md:grid-cols-6.

A decorative box, positioned on the node row, holds a Guides component that draws its top rule and the two + marks where the rule meets the rails; on a phone the same box is a one-pixel vertical line instead. The node row's height is fixed (6rem for the wordmark, 1.5rem for the node), so the rule and the nodes always line up.

The list follows the page direction: Year 1 starts at the end side and the years run towards the start, as a written timeline does, and the vertical rule on a phone sits at the start side. Each wordmark keeps its own direction, as a logo would.

The header is an h2 and the timeline is an ordered list named "Reserves in the year they joined Heronry". Each item reads the customer's name and then its year. The nodes and the rule are hidden decoration.

The header and the timeline fade up once when the page loads, and a wordmark's colour eases on hover. With reduced motion both are off.