Alternating Mockup Rows Features Block for React

Each window is a small component (TicketsScreen, SettingsScreen, ChartScreen) inside a shared BrowserWindow. Edit the data lists at the top of the file (TICKETS, RULES, DAYS) to change the rows, the toggles and the bars. The chart's heights and totals are worked out from DAYS, so a new number changes the bar, the legend and the total together.

No. The windows are pictures of the product, so they are hidden from assistive technology and hold nothing you can focus: the heading and sentence beside each say what it shows. Keyboard users move from one row's link to the next.

Every row is a two-column grid, 2fr 3fr or 3fr 2fr, and the divider is the start border of whichever cell comes second on the page, with a + mark where it meets the row's rule. Flip a row by passing flip, which swaps the columns and moves the border; the copy stays first in the reading order.

Yes. The windows use theme tokens only: light on a light page, dark on a dark one, in any preset. Selected chips, toggles that are on and the primary bars use the foreground colour, so the page's one primary colour stays free for a real button.

The header fades up once on load and the link arrows slide on hover. Nothing else moves. With reduced motion the transitions are off and the section simply appears.

Each band stacks with its text first, then the window, which shows only its top part and fades out at its foot. The divider is hidden while stacked and each band keeps its rule. Nothing scrolls sideways at 320 pixels.