Split Before and After List CTA Block for React

Edit CHANGES at the top of the file: each pair has a was line and a now line. Keep each line short, a phrase rather than a sentence, so the rows stay aligned and readable at half width. Three pairs fill the panel next to the copy; with more, the panel grows taller than the copy and the rows keep their height.

The Before and After labels and every row use the same three-column grid (the old line, the arrow, the new line), so the arrow sits in the same place on each row and the labels sit over their columns. Below the sm breakpoint the band is dropped and each pair reads top to bottom with a downward arrow, because the struck-through line and the arrow already say which is which.

As one sentence: "Before: Reviews that take days, became, After: Feedback in seconds". The band, the arrow and the word "became" are hidden or shown to match, so the visual arrow adds nothing for assistive technology and nothing is read twice. The pairs are a list, so a screen reader announces how many there are.

Yes. The panel and the divider swap sides with the page direction, the old way sits at the end and the new at the start, and the sideways arrow is mirrored so it still points from old to new. The downward arrow on a phone needs no mirroring.

The copy comes first, so the Shine Button is on the first screen; the rows follow under a rule that runs from rail to rail. Each pair stacks the old line, the arrow and the new line in one cell, and the three cells keep their ruled hairlines.

The copy fades up once on load, and the Shine Button sweeps a band of light across itself when you hover or focus it. It's all CSS, with no animation library. With reduced motion on, everything appears in place and the light fades in instead of sweeping.