Split Layout Image Hero Block for React

Replace <Editor /> with an img that fills the cell (absolute inset-0 size-full object-cover) and give it alt text that says what the screenshot shows; take aria-hidden and inert off the cell. The cell keeps its height on wide screens from the copy beside it and is h-80 or h-96 below lg, so the page doesn't jump as it loads.

The code is CODE, then SUGGESTION, then CODE_AFTER: each line is a list of [text, tone] pairs where the tone (kw, fn, str or plain) sets its weight. FILES is the file tree and CONTEXT the files in the assistant's panel; ANSWER is its one sentence.

The copy's cell has a border-s with a + mark where it meets the section's top rule, from our Guides component; the editor runs to the column's start rail and the section's rails and top rule come from <Guides bleed marks="top" rules="top" />. Below lg the divider becomes a rule between the stacked parts.

It reads the announcement link, the headline (the block's one h1), the paragraph, the checklist and the two links. The editor is decoration, so it's hidden from screen readers and marked inert; a real screenshot should be shown to them, with alt text. The copy comes first in the document and the editor is moved to the start only on wide screens.

The parts stack below the lg breakpoint, copy first and the editor under it in a 20 rem band, its code fading out at the foot. Below sm the file tree, the Tab key and the assistant's panel are hidden so the code keeps the room. The Shine Button sits on the first screen.

The copy fades and rises in on load and the editor fades in just after it. It's all CSS, with no animation library, and nothing loops. With reduced motion on, everything appears in place.