Diagonal Split Release Notes 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. Continue with GitHub shows where a real one would send you ("Nothing opens in this demo") with a way back. 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, and point the provider row at your OAuth redirect. The releases are typed data you replace with your own changelog.

Two decorative layers behind the text: a tinted block clipped with clip-path into a wedge, and a one-line SVG for the hairline along the slant, with vector-effect: non-scaling-stroke so it stays one pixel at any height. A small box holds a plus mark at each end of the slant. Each layer carries rtl:-scale-x-100, so in a right-to-left layout the wedge, the hairline and the marks mirror and the slant still meets the band's rules; the text and the chevrons are not flipped by that, they follow the page direction on their own.

Each release is its own disclosure, so any number can be open: the first starts open, and the open ones are kept in one list in the component. A trigger is a real button inside an h3, with the title, the version and the date; pressing it or Enter or Space toggles its detail, and the chevron turns. The dates are fixed ISO days spelled out in UTC (2026-10-06 as Oct 6, 2026), so they read the same on the server and in every time zone. A closed release's detail stays in the page, hidden.

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 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 release list and its wedge are hidden below 1024 px (max-lg:hidden), so a phone shows the product's mark, the heading, the GitHub row, the form and the Sign in button, which ends on the first screen. The list is a nice-to-have, so a phone user loses nothing needed to sign in.