Split Quote Stepper Login Block for React

Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "You're signed in" with the address you typed, and a polite status message says nothing was sent; Sign out brings the form back with your email still filled in. To wire it for real, post the email and password to your auth endpoint where the code says so, keep the busy state until it answers, then redirect, or show its error under the field it concerns. The three quotes are typed data and the people in them are made up: replace them with customers who agreed to be quoted.

Previous and Next wrap around, so a button is never disabled under your finger or focus. While focus is anywhere in the stepper, the arrow keys move it too: the end arrow goes to the next quote and the start arrow to the previous one, which is the right arrow in left-to-right and the left arrow in right-to-left. After you move it, a polite status message reads "Quote 2 of 3" and the person's name; nothing is read out on load. The listener is a capture listener on the stepper, so it works on every base, including React Aria, whose buttons stop keys from bubbling.

All three quotes sit in one grid cell. The one on show is visible; the other two are invisible, out of the tab order and hidden from assistive technology, but they still take their space, so the cell is as tall as the longest quote and the controls under it stay put. The quote fades with a CSS transition, which is off under reduced motion.

A quote that changes under the cursor is hard to read and harder to quote back, so this one moves only when you ask. It has no swipe either: it is a stepper of three buttons and two keys. The carousel version of this page does swipe, and turns itself only after you press Play.

The form comes first in the markup, so Tab order and the reading order for a screen reader start with the sign-in and the heading, and on a phone, where the side is gone, nothing has to be reordered. The side is placed at the start of the band with two grid classes (lg:col-start-1 lg:row-start-1) and the divider is its end border. It follows the page direction, so in a right-to-left layout the side sits at the right.

The stepper is hidden below 1024 px (max-lg:hidden), so a phone shows the product's mark, the heading, the form and the Sign in button, which ends on the first screen. Because the quotes aren't part of signing in, a phone loses nothing it needs.