Alternating Device Frame Rows Features Block for React

Each screen is a small component (PlannerScreen, ArrivalsScreen) that renders inside the shared Phone, which supplies the bezel, the status bar and the room for a tab bar. Fill it with your own rows, and change the data lists at the top of the file (JOURNEYS, ARRIVALS, LINE_CHIPS) to change what they show.

They are pictures of the product, not content: the heading and sentence beside each one say what it shows. The phone is marked as decorative and holds no links or buttons, so Tab moves from one row's link to the next.

Each row ends in a text link (href="#"): point it at the matching page. The arrow slides on hover and mirrors in a right-to-left layout. There is no button in this block, so no Shine Button.

Yes. The bezel, the screen and the floor use theme tokens only, so they are light on a light page and dark on a dark one in any preset. The one selected chip and the first arrival use the foreground colour as their accent.

The header fades up once on load and the link arrows slide on hover. The phones are still. With reduced motion every transition is off and the section simply appears.

Each row stacks with its text first, then the frame. The phone drawing gets a little smaller and drops its third list row, so it fits in the frame without scrolling, and nothing scrolls sideways at 320 pixels.