# План спринтов — Брендбук О!Клиника

> Недельные спринты. Каждый спринт = 1 рабочая неделя.
> Базовая дата начала: уточняется при старте разработки.

---

## Обозначения

- **FE** — задача фронтенда (Next.js)
- **BE** — задача бэкенда (NestJS + Prisma)
- **DB** — изменения схемы базы данных
- **Design** — дизайн-решения, требующие согласования

---

## Sprint 1 — Инициализация проекта + страница «Логотип» ✅ ЗАВЕРШЁН

**Цель:** Рабочее окружение, monorepo, базовая архитектура, первая живая страница брендбука — «Логотип».

### Задачи — инфраструктура
- [x] FE: Инициализация Next.js 16 (App Router, Tailwind 4, TypeScript) в `apps/web`
- [x] BE: Инициализация NestJS 11 в `apps/api`
- [x] DB: PostgreSQL 16 + Prisma 7, схема User + ExperimentalComponent
- [x] Настройка Docker Compose (порт 5433 — 5432 занят на хосте)
- [x] Настройка monorepo (pnpm workspaces)
- [x] Создание `.env.example`
- [x] Git: создание веток `develop` и `sprint/1`, подключён remote git.pirogov.ai
- [x] FE: Layout с боковой навигацией (все разделы, статус «скоро»)
- [x] FE: Fira Sans подключён через next/font/google, CSS-токены бренда в globals.css

### Задачи — страница «Логотип»
- [x] Design: PNG логотипа извлечён из PDF программно (PyMuPDF + Pillow)
- [x] FE: Прозрачная версия логотипа (удалён белый фон через numpy)
- [x] FE: Страница `/foundation/logo`
- [x] FE: Иерархия версий (Основной / Общий) с реальным изображением из PDF
- [x] FE: Цветовые варианты: светлый / инвертированный (CSS filter) / на форме
- [x] FE: Охранная зона с визуализацией отступов
- [x] FE: Таблица минимальных размеров (до 46 р. и от 48 р.)
- [x] FE: 6 правил недопустимого использования
- [x] FE: Placeholder «Скачать вектор» (кнопка неактивна)

### Фактические результаты
- Брендбук запущен локально на `http://localhost:3001`
- Название клиники исправлено: «Клиника ухо, горло, нос им. проф. Е.Н.Оленевой»
- Инвертированный логотип корректно отображается (белый на тёмном фоне)

### Технические решения Sprint 1
- PostgreSQL запущен на порту **5433** (5432 занят на хосте)
- Логотип хранится как PNG с прозрачным фоном (`public/logo/logo-transparent.png`)
- Инверсия логотипа: CSS `filter: brightness(0) invert(1)` на прозрачном PNG
- Next.js запускается на порту **3001** (3000 занят на хосте)

---

## Sprint 2 — Цвета, типографика и оффлайн элементы (Brand Foundation) ✅ ЗАВЕРШЁН

**Цель:** Секция «Фундамент бренда» — цвета, оба шрифта, а также первый оффлайн-раздел.

### Задачи — цвета
- [x] Design: Зафиксировать HEX-эквиваленты всех цветов бренда (053M, 073M, 066M, 050M, 081M, 080M)
- [x] FE: Создать CSS-переменные / дизайн-токены для всей цветовой палитры
- [x] FE: Страница «Цвета» — палитра с кодами Oracal/Pantone, HEX, RGB, HSL, копирование в клик
- [x] FE: Проверка контрастности пар цветов (WCAG AA/AAA)
- [x] FE: Экспорт токенов в JSON (Figma-compatible)

### Задачи — типографика
- [x] FE: Страница «Типографика» — раздел DINPro (бренд/оффлайн) + раздел Fira Sans (веб)
- [x] FE: Шкала размеров для обоих шрифтов: h1–h6, body, caption, label, overline
- [x] FE: Чёткое указание: где DINPro, где Fira Sans
- [x] FE: Живые примеры текста обоими шрифтами

### Задачи — оффлайн элементы (справочный раздел)
- [x] FE: Раздел «Оффлайн элементы» в навигации брендбука
- [x] FE: Страница «Форма сотрудников» — схема размещения логотипа, таблица размеров
- [x] FE: Страница «Бейджи» — размеры 70×30 мм, варианты (светлый/тёмный), состав текста
- [x] FE: Страница «Внутренняя навигация» — шаблоны табличек, материалы, цвета Oracal
- [x] FE: Страница «Брендирование транспорта» — макет трамвая, цветовая схема
- [x] FE: Страница «Печатные материалы» — листовки, визитки, Telegram-бот

### Фактические результаты
- Страница `/foundation/colors` — 7 цветов с HEX/RGB/HSL/CSS-var и копированием, WCAG-контраст 7 пар, экспорт JSON
- Страница `/foundation/typography` — DINPro (оффлайн) + Fira Sans (веб), таблица применения, полные шкалы, живой пример
- Страница `/offline/uniform` — реальные фото из PDF (беж + синий вариант), таблица размеров, правила
- Страница `/offline/badges` — реальные фото из PDF (лицевая + оборотная), состав текста, пример
- Страница `/offline/navigation` — макеты из PDF (Кабинет 04, карточка врача), фото дверей с номерами (13, 31), указатели по этажам
- Страница `/offline/transport` — макет трамвая из PDF (оба вида, реальный рендер), таблица зон, цвета Oracal
- Страница `/offline/print` — убрана из навигации (нет данных из брендбука)
- Sidebar: убраны «скоро» для Цветов, Типографики и всех страниц Оффлайн кроме Печати
- Версия обновлена до **Sprint 2 · v0.2.0**
- **Деплой на Vercel:** https://web-oclinica.vercel.app (production, бесплатно)
- **Тайтлы страниц:** единый формат «Раздел. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой»

### Технические решения Sprint 2
- Страница «Цвета» — `"use client"` для clipboard API и экспорта JSON
- WCAG relative luminance вычисляется на клиенте, без зависимостей
- DINPro отображается с фоллбэком Arial (лицензионный шрифт)
- Реальные фото и макеты из PDF: PyMuPDF (fitz) — извлечение растровых изображений и рендер векторных страниц
- Рендер PDF страниц: 2.5–3.0x масштаб → JPEG, кроп до нужной области через Pillow

### Ретроспектива Sprint 2 — LLM-контекст
- [x] Docs: Создан `docs/LLM_CONTEXT.md` — сводный файл дизайн-данных для LLM (v2.1)
- [x] TZ: Добавлено требование ФТ-03-LLM — LLM-блок на каждой странице брендбука
- [ ] FE: Добавить LLM-блоки на страницы Sprint 1–2 (логотип, цвета, типографика, оффлайн) — перенесено в Sprint 3

**Результат спринта:** Разделы «Цвета», «Типографика» и «Оффлайн элементы» полностью готовы с реальными материалами из брендбука.

---

## Sprint 3 — Базовые компоненты: кнопки и поля ввода ✅ ЗАВЕРШЁН

**Цель:** Все варианты кнопок и форм-контролов в брендбуке. LLM-блоки на страницах.

### Задачи — LLM-контекст
- [x] FE: Добавить LLM-блок на страницу «Логотип» (`/foundation/logo`) — v1.0
- [x] FE: Добавить LLM-блок на страницу «Цвета» (`/foundation/colors`) — v2.1
- [x] FE: Добавить LLM-блок на страницу «Типографика» (`/foundation/typography`) — v2.0
- [x] FE: Создать переиспользуемый компонент `components/llm/LlmBlock.tsx` (LlmBlock, LlmSection, LlmTable, LlmRules)
- [x] Docs: Обновить `docs/LLM_CONTEXT.md` по итогам спринта — версия 3.0

### Задачи — компоненты
- [x] FE: Компонент Button (`components/ui/Button.tsx`) — варианты primary/outline/teal/pill, размеры sm/md/lg, loading
- [x] FE: Компонент Input (`.bb-input`) — text, password, focus/error/disabled, height 50px как на сайте
- [x] FE: Компонент Textarea (`.bb-textarea`) — resize:vertical, min-height 100px
- [x] FE: Компонент Select (`.bb-select`) — height 50px, кастомная стрелка SVG
- [x] FE: Компонент Checkbox (`.bb-checkbox`) и Radio (`.bb-radio`)
- [x] FE: Компонент Toggle/Switch (`components/ui/Toggle.tsx`) — React "use client", defaultChecked/disabled/label
- [x] FE: Страница `/components/buttons` — 4 варианта по реальному сайту, размеры, состояния, «Где применяется», LLM-блок v2.0
- [x] FE: Страница `/components/forms` — все 6 контролов, контекст на сайте с макетом, LLM-блок v2.0
- [x] FE: Копирование HTML/CSS кода в один клик (`components/ui/CodeCopy.tsx`)

### Фактические результаты
- **4 варианта кнопок** — скопированы с реального сайта perm.oclinica.ru: primary(#FFA39C), outline(#BF9975), teal(#60959c), pill(#e9e4d4)
- **6 форм-контролов** — input/textarea/select/checkbox/radio/toggle с полной документацией состояний
- **Input/Select** — height 50px, border 1px solid #ccc, border-radius 4px (entityform CSS с реального сайта)
- **Макет формы** на фоне #b8e6ed как «Узнайте стоимость операции» на oclinica.ru/lor
- **LLM-блоки** добавлены на логотип, цвета, типографику, кнопки, форм-контролы
- **Компоненты:** Button.tsx, Toggle.tsx, CodeCopy.tsx в `components/ui/`
- **Sidebar:** Sprint 3 · v0.3.0, кнопки/формы убраны из «скоро»
- **Деплой:** https://web-oclinica.vercel.app (production)

**Результат спринта:** Раздел «Базовые компоненты» полностью готов. Стили соответствуют реальному сайту.

---

## Sprint 4 — Карточки (Cards) ✅ ЗАВЕРШЁН

**Цель:** Все типы карточек, используемых на сайте.

### Задачи
- [x] Docs: Обновить `docs/LLM_CONTEXT.md` → версия 4.0
- [x] FE: Добавить LLM-блок на страницу «Карточки» — v1.0
- [x] FE: Карточка врача (DoctorCard) — фото 110×160px, имя, специализация, стаж, кнопка outline
- [x] FE: Карточка услуги / заболевания (ServiceCard) — иконка + заголовок + описание
- [x] FE: Карточка новости — превью, дата, заголовок, анонс, hover #eef4d1 (CSS сайта)
- [x] FE: Карточка отзыва — рейтинг SVG-звёзды, 4-строчный clamp, фон #eef4d1
- [x] FE: Карточка цены — услуга + стоимость + highlighted-вариант
- [x] FE: Бейджи (6 вариантов), теги (default/active), алерты (info/success/warning/error)
- [x] FE: Страница `/components/cards` с документацией и LLM-блоком

### Фактические результаты
- **5 типов карточек:** DoctorCard, NewsCard, ReviewCard, PriceCard, ServiceCard
- **NewsCard hover** — bg `#eef4d1` + box-shadow `0 0 16px #9e9e9a` (1:1 с реальным CSS сайта)
- **ReviewCard** — фон `#eef4d1` из CSS сайта, WebkitLineClamp: 4
- **Бейджи** — 6 вариантов (primary/success/warning/danger/neutral/outline-blue)
- **Алерты** — info (#dff0fa), success (#d1fae5), warning (#fef3c7), error (#fee2e2)
- **Исправлены цвета Oracal** — точные RGB из каталога для всех 6 плёнок
- **Деплой:** https://web-oclinica.vercel.app (production)

**Результат спринта:** Все карточки задокументированы. Цвета Oracal исправлены по каталогу.

---

## Принцип документирования (Sprint 5+)

> **Правило:** Брендбук документирует только то, что реально существует на сайте `perm.oclinica.ru`.
> Никаких придуманных вариантов. Процесс: сначала изучаем реальный сайт → потом воспроизводим в брендбуке.

---

## Sprint 5 — Все блоки текущего сайта

**Цель:** Задокументировать ВСЕ блоки страницы perm.oclinica.ru/lor за один спринт.
Источник: скриншот страницы + CSS сайта.

### Блоки с реального сайта (сверху вниз)

**Шапка и навигация** → `/components/navigation`
- [ ] FE: Топ-бар: адрес «Б. Цитная, 3», ссылки на разделы, телефон /342/ 255-53-84, кнопка «Заказать звонок» (pill)
- [ ] FE: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н. ОЛЕНЕВОЙ»
- [ ] FE: Главное меню: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты
- [ ] FE: Убрать `soon` у `/components/navigation` в Sidebar

**Hero-баннер** → `/blocks/hero`
- [ ] FE: Левая часть: белый блок, заголовок «ЭНДОСКОПИЧЕСКОЕ...», 3 пункта с галочками, кнопка «Узнать стоимость операции» (primary)
- [ ] FE: Правая часть: фото врача, фон #b8e6ed
- [ ] FE: Под баннером: кнопки соцсетей + счётчик просмотров

**Вводный текст (CEO-блок)** → `/blocks/ceo`
- [ ] FE: Текст специализации клиники, вопросы-стимулы в формате Q&A (— У вас болит ухо?...)

**Блок врачей** → `/blocks/doctors`
- [ ] FE: Заголовок «Приём ведут опытные ЛОР врачи»
- [ ] FE: 3 стат-блока: «Ежедневно 27 врачей», «6 кандидатов наук», «Свыше 12 000 операций»
- [ ] FE: Сетка карточек врачей (6 штук)

**Блок отзывов** → `/blocks/reviews`
- [ ] FE: Заголовок «Отзывы о нас», подзаголовок
- [ ] FE: Карусель: большая кавычка, текст отзыва, ссылка «Читать отзыв полностью», стрелки

**Форма записи «Будьте здоровы!»** → `/blocks/contact-forms`
- [ ] FE: Фон #b8e6ed (бирюзовый), заголовок, поля: имя / телефон / выбор врача (select), чекбокс согласия, кнопка «Запишите меня!»

**Форма «Узнайте стоимость операции»** → на той же странице `/blocks/contact-forms`
- [ ] FE: Белый фон, заголовок, поля: имя / телефон, чекбокс, кнопка «Перезвоните мне»

**Блок новостей** → `/blocks/news`
- [ ] FE: Заголовок «Новости», 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости»

**Footer (подвал)** → `/blocks/contact`
- [ ] FE: 4 колонки ссылок: О клинике / Заболевания / Вопрос-ответ / Операции
- [ ] FE: Логотип внизу, адрес «Пермь, ул. Г. Звезда», иконки соцсетей, часы работы

### Общее
- [ ] FE: Добавить LLM-блоки v1.0 на каждую страницу блоков
- [ ] FE: Убрать `soon` у всех блоков в Sidebar
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — секции по всем блокам

**Результат спринта:** Все блоки текущего сайта задокументированы.

---

## Sprint 6 — Страницы (сборки из блоков)

**Цель:** Задокументировать полные страницы как сборки уже готовых блоков.

### Задачи
- [ ] Research: Изучить реальную страницу заболевания (напр. perm.oclinica.ru/lor/rinit) — какие блоки там, в каком порядке
- [ ] Research: Изучить страницу /lor/doctors — фильтры, сетка, пагинация
- [ ] FE: Страница `/pages/home` — полная главная (сборка блоков Sprint 5)
- [ ] FE: Страница `/pages/disease` — страница заболевания (сборка по реальной /lor/rinit)
- [ ] FE: Страница `/pages/doctors` — страница врачей с фильтрами и пагинацией
- [ ] FE: Убрать `soon` у страниц в Sidebar
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md`

**Результат спринта:** 3 полные страницы задокументированы в брендбуке.

---

## Sprint 7 — Дублирование компонентов и блоков

**Цель:** Возможность создавать дубли существующих компонентов и блоков для адаптации под конкретные страницы или разделы.

### Концепция
Каждый задокументированный блок/компонент можно «продублировать» — получить копию с другим наполнением (другой врач, другое заболевание, другие тексты). Дубль хранится как вариант и отображается рядом с оригиналом.

### Задачи
- [ ] Design: Определить UI «дублирования» — кнопка Duplicate на каждой карточке блока/компонента
- [ ] FE: Компонент `DuplicateCard` — обёртка над блоком с пометкой «Вариант» и именем
- [ ] FE: На страницах компонентов (buttons, forms, cards) — кнопка «+ Создать вариант»
- [ ] FE: Секция «Варианты» на каждой странице блока — список дублей с метками
- [ ] FE: Статические варианты блоков (задаются в коде, не CRUD): например, Hero для раздела Аллергология
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — описание системы вариантов

**Результат спринта:** Система вариантов/дублей для компонентов и блоков.

---

## Sprint 8 — Дублирование страниц

**Цель:** Возможность создавать дубли страниц — шаблон одной страницы адаптируется под другой раздел клиники (ЛОР → Аллергология → Сурдология).

### Концепция
Страница заболевания для ЛОР-раздела — это шаблон. Аллергология использует те же блоки, но с другим контентом. Брендбук показывает этот шаблон и его варианты.

### Задачи
- [ ] Design: Определить структуру шаблона страницы — какие блоки обязательны, какие опциональны
- [ ] FE: На странице `/pages/disease` — секция «Варианты этой страницы» с примерами для разных разделов
- [ ] FE: Страница `/pages/home` — варианты для Аллергологии (другой Hero, другой CEO-текст)
- [ ] FE: Компонент `PageTemplate` — отображение структуры страницы как схемы блоков
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — шаблоны страниц

**Результат спринта:** Шаблонная система страниц, варианты для разных разделов сайта.

---

## Sprint 9 — Оставшиеся страницы: Цены, Контакты, Врач

**Цель:** Задокументировать оставшиеся страницы.

### Задачи
- [ ] Research: Реальная страница цен — структура таблицы, фильтры
- [ ] Research: Реальная страница контактов — карта, адреса клиник, часы, схема проезда
- [ ] Research: Страница профиля врача — структура, блоки
- [ ] FE: Страница `/pages/prices`
- [ ] FE: Страница `/pages/contacts`
- [ ] FE: Страница `/pages/doctor`
- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md`

**Результат спринта:** Все страницы брендбука задокументированы.

---

## Sprint 10 — Финальная полировка и деплой

**Цель:** Финальный релиз.

### Задачи
- [ ] FE: Полный smoke-тест всего брендбука
- [ ] FE: LLM-блоки на всех страницах — проверка актуальности
- [ ] FE: Мобильная адаптация — финальная проверка
- [ ] Деплой: автоматический деплой через Gitea Actions → Vercel (при пуше в `main`)
- [ ] Design: Финальный ревью брендбука

### Текущий статус деплоя
- **Фронтенд:** https://web-oclinica.vercel.app (Vercel Hobby)
- **Команда деплоя:** `cd apps/web && vercel --prod --yes`

**Результат спринта:** Брендбук полностью готов и задеплоен.

---

## Сводная таблица

| Спринт | Тема                                  | Источник / Суть                                |
|--------|---------------------------------------|------------------------------------------------|
| 1      | Инициализация + Логотип               | PDF брендбука                                  |
| 2      | Цвета, Типографика, Оффлайн элементы  | PDF брендбука + Oracal каталог                 |
| 3      | Кнопки и форм-контролы                | CSS реального сайта                            |
| 4      | Карточки, бейджи, алерты             | CSS реального сайта                            |
| 5      | ВСЕ блоки текущего сайта              | Все блоки /lor одним спринтом                  |
| 6      | Страницы (сборки)                     | Главная + Заболевание + Врачи                  |
| 7      | Дублирование компонентов и блоков     | UI для создания вариантов блоков               |
| 8      | Дублирование страниц                  | Шаблоны страниц + варианты по разделам         |
| 9      | Цены, Контакты, Врач                  | Оставшиеся страницы по реальному сайту         |
| 10     | Финальная полировка                   | Smoke-тест + LLM-блоки + деплой                |

---

## Backlog (вне основных спринтов)

- Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора)
- Экспериментальная секция — если потребуется CRUD API (NestJS + Prisma)
- Тёмная тема — только если появится на реальном сайте
- Мультиязычность — только если появится на реальном сайте