Testimonial Carousel 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 quotes are typed data and the people in them are made up: replace them with customers who agreed to be quoted.

A quote that changes by itself is something a visitor should choose. Press Play and the first quote's bar fills over seven seconds; when it finishes (the bar's own CSS animation ends) the next quote slides in and the next bar starts. The time is the bar's animation duration, so there's no timer to leak, and a paused bar simply stops. Pointing at the quote or putting keyboard focus on a control in it holds the bar where it is; moving away lets it go on. Picking a segment or swiping pauses it, and a polite status message reads out "Playing" or "Paused". While it plays, the quotes are not read out as they change.

The Play button gives way to a sentence of the same height saying so, and the fill bar doesn't run, so nothing ever turns by itself; the carousel still swipes and the segments still choose a quote. Pausing and the fill are in the CSS, so they follow the setting live.

Tab to the three segments and press Enter or Space: each is named "Quote 2 of 3, from" and the person, and the current one is marked. A touch swipe moves the carousel on every target. This carousel is built on Embla, so a mouse can drag it as well as a finger. It has no tab stop of its own, so the segments are the keyboard route.

A disabled button can't explain itself, and keyboard users can't reach it. Here it stays enabled: pressing it with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first, which reads its problem out. Typing clears that field's problem. The browser's own validation bubbles are turned off with noValidate, so the messages look the same in every browser, and each field keeps a line for its problem even when there is none, so a problem never pushes the page.

The quote row 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, with nothing moving.