Split Layout Dark Terminal Hero Block for React

Edit the constants at the top of the file: METHOD and ENDPOINT for the request line, and RESPONSE_TEXT for the body, written as the JSON you want to show. The terminal and the copy button both read from it, so what visitors copy is exactly what they see. Keep the body to ten lines or so, and prefer strings, as the block does: they read well on the dark window in every theme.

The hero does: its section, copy, buttons and band are light in a light theme and dark in a dark one. Only the terminal carries the dark class, because a terminal reads as a dark window, so your theme's dark colours apply inside it. A border keeps it apart from a dark page. Remove the dark class and the terminal follows the page like the rest.

It's our CopyButton: a press puts the response body on the clipboard, the icon turns into a check for a few seconds, and screen readers hear "Copied". If the browser refuses (no permission, or a page not served over HTTPS), it shows a cross and says so instead.

It's our JsonText, set to a quick pace. Once the terminal is a quarter in view, each key types itself out and its value fades in a beat later, then the next key. It plays once, in CSS. With reduced motion on, the JSON is simply there.

The terminal is a figure named "Terminal: an example quote", and everything in it is real text: the method, the path, "Response 201 Created 38 ms", the copy button (named "Copy the response") and the JSON. Only the title bar's three dots are hidden. The headline is the block's one h1, and the figures in the band are a description list.

The columns stack below the lg breakpoint with the text first, so the Shine Button stays on the first screen, then a rule with + marks and the terminal on its tinted panel. A path too long for the request line ends with an ellipsis, and the copy button wraps under the status line if it runs out of room. The band keeps its three figures side by side with smaller type. Nothing scrolls sideways down to 320 px.