Слой архитектора
Дизайн
Имя, адреса, мета и внешний вид этого проекта. Сохранённые настройки читаются на лету — изменение видно при следующей загрузке страницы, без пересборки.
Блоки
Все блоки, из которых этот проект собирает страницы, нарисованные настоящим рендерером. Сгруппированы по назначению.
Блок — это единица, из которой собрана страница. Страница здесь не свёрстанный файл, а СПИСОК БЛОКОВ. Рендереры уже собраны; страница лишь говорит, какие виды на ней стоят, в каком порядке и с каким текстом. Именно поэтому все страницы проекта выглядят одним продуктом, а не работой пяти разных людей.
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.
Две половины, между которыми ходит подсветка: активная занимает 7/10 ширины, соседняя 3/10, а полоса под заголовком отсчитывает девять секунд. Перенесена с витрины. От `splitPair` отличается ПОВЕДЕНИЕМ, а не рисунком: `splitPair` берут, чтобы показать продукт с двух равных сторон, этот вид — чтобы противопоставить две вещи и заставить смотреть на одну за раз. Ни строки скрипта: движение делает анимация, выбор — радиокнопка, и нажатие на половину останавливает подсветку на ней навсегда.
Two halves of the same day
The spotlight moves on its own every nine seconds. Click a half and it stops there.