## Итерация 02 — страницы и секции (UI) на данных из `data/` ### Цель Собрать UI лендинга с секциями из плана, но без “случайного” стейта в компонентах: данные/конфиги лежат в `landing/data`, общее состояние — в Pinia. ### Правила, чтобы лендинг было легко менять - **Порядок секций** задаётся конфигом (например `landing/data/sections.ts`), чтобы можно было переставлять/скрывать блоки без переписывания `pages/index.vue`. - **Тексты и контент**: разделяем “микрокопирайт” и “контент секций”. - Микрокопирайт (кнопки, лейблы, короткие подписи) — через i18n (`landing/locales/*`). - Контент секций (FAQ, список фич, описания провайдеров, тексты блоков) — через локализованные контент-файлы по структуре (например `landing/content/{locale}.ts` или `landing/content/{locale}.json`). - В `landing/data/*` храним **структуру и стабильные id**, а не длинные строки и не “россыпь ключей”. - Правило простое: чтобы изменить один пункт FAQ, не нужно искать 10 ключей — открыл контент-файл нужной локали и поправил. - **UI-атомы** (`components/ui/*`) не знают про бизнес и не ходят в store. Они получают props и рендерят. - **Секции** (`components/sections/*`) отвечают за композицию: берут данные из `data/*`, нужные значения из store и связывают это с UI. ### Шаги 1) **Layout**: - `layouts/default.vue`: header/footer, контейнер, базовые отступы. 2) **Страница `/`**: - Hero, Features, Providers, Screenshots, Download, Privacy, FAQ. 3) **Страница `/download`**: - Платформо-специфичный блок + инструкции установки. 4) **Секция Privacy**: - Чётко подсветить: локальное хранение ключей, опциональные ключи, отсутствие облачного хранилища. - Отдельный блок: “часть компонентов open-source” (без излишних обещаний). 5) **i18n покрытие**: - Все тексты вытащены в locales, не оставляем хардкод строк. 6) **Data-driven подход**: - Карточки фич, FAQ, провайдеры, список платформ — из `landing/data/*`. 7) **Навигация по секциям**: - Якоря/scroll в рамках страницы так, чтобы это было доступно (фокус/URL, без поломки истории). ### Критерии готовности - Компоненты секций не содержат бизнес-данных “внутри себя”. - Минимум логики внутри шаблонов, максимум — через computed/props и util-функции. - i18n покрывает весь UI без пропусков. - Любую секцию можно скрыть конфигом, и страница остаётся валидной. - Для изображений есть корректные `alt`/подписи, а для кнопок — понятные названия/label. ### Чеклист перепроверки - Нет дублирования конфигов секций. - Секции легко переставить/скрыть, не ломая остальное. - Нет лишних сторонних зависимостей “на всякий случай”. - На мобильных нет “сломанных” отступов/переполнений (особенно в таблицах/списках).