Architect layer
Design
The name, addresses, meta and appearance of this project. Saved settings are read at runtime — a change shows on the next page load, with no rebuild.
Blocks
Every block this project can build a page from, drawn by the real renderer. Grouped by what the block is for.
A block is the unit a page is made of. A page here is not a laid-out file — it is a LIST OF BLOCKS. The renderers are already compiled; the page says which kinds stand on it, in what order and with what text. That is why every page in the project looks like one product rather than like the work of five different people.
A set of independent cases, read ONE at a time: the list on the left, the opened case on the right — what is required on top, why it works here underneath. Different from flow: flow has ORDER and shows every step at once; here there is no order, and each case has two sides that must sit one under the other so the lower one reads as the answer to the upper. Switching is pure CSS (radio + :checked in styles/globals.css) — every case ships in the server markup, so the crawler and a visitor without JavaScript get all of it, and no separate copy "for robots" is needed. Panels are stacked in ONE grid cell, so the height equals the longest case and the page never jumps while switching. Six cases maximum — that is how many rules the stylesheet carries.
Two sides of the same case
Pick a case on the left; the card shows what it demands and how this project answers it.
What is required
The upper half states what the situation asks of you — plainly, in the words of somebody living through it rather than of somebody selling a cure.
Why it works here
The lower half answers. It reads as a reply because it stands underneath: put the two side by side and the connection turns into a comparison.
What is required
Cases are independent — there is no first and no last. That is precisely why this is not a numbered list: numbering would promise an order that does not exist.
Why it works here
The list on the left is a group of radio buttons, so a keyboard walks the cases with arrow keys and a screen reader announces them without any help from us.
What is required
Cases differ in length, and a card that resizes on every switch makes the page jump under the cursor — the reader loses the place they were holding.
Why it works here
All panels live in one grid cell, so the section is as tall as the longest case and stays that way. Nothing moves except the text fading in.
Two halves with the spotlight moving between them: the active one takes 7/10 of the width, its neighbour 3/10, and a bar under the heading counts the nine seconds down. Ported from the storefront. It differs from `splitPair` by BEHAVIOUR, not by drawing: take `splitPair` to show a product from two equal sides, take this one to set two things against each other so the reader looks at one at a time. Not a line of script: the movement is a CSS animation, the choice is a radio input, and clicking a half stops the spotlight on it for good.
Two halves of the same day
The spotlight moves on its own every nine seconds. Click a half and it stops there.