Benefits Accordion 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, if you ticked Remember me, "Stays signed in on this device"; 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, the password and the Remember me choice 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 benefits are typed copy about a made-up product: write your own, and keep each one true.

It's a single accordion: opening a row closes the other, the first starts open, and the open row can be closed again. Each trigger is a button inside an h3 with the check mark and the title, and pressing it or Enter or Space toggles it. In this version the arrow keys don't move between triggers: Tab goes from one to the next. A closed row's detail stays in the page, hidden.

It sets one choice and shows its effect in the result, as a real form would send it: ticked, the sign-in lasts on this device; unticked, only until the tab closes. Nothing is stored. When you wire it up, pass the value to your auth call so the session cookie gets the longer or the shorter lifetime. The checkbox is a real labelled control in the foreground tones, so the Shine Button stays the only primary-colored element.

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.

Yes, and only true ones: the rows are the typed BENEFITS list, with a title and a line of detail each. A trial length, a price or a security claim is a promise a visitor will hold you to, so keep it in step with your pricing page, and add or remove rows freely; the heading names the count in words, so change "Five reasons" if you do.

The accordion 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.