# План спринтов — Брендбук О!Клиника > Недельные спринты. Каждый спринт = 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 — Шапка (Header) и навигация **Цель:** Задокументировать реальную шапку сайта perm.oclinica.ru/lor как она есть. ### Задачи - [ ] Research: Изучить реальную шапку сайта — скриншот, CSS, HTML - [ ] FE: Страница `/components/navigation` — документация реальной навигации сайта - Логотип в шапке (размер, положение) - Главное меню: Клиника, ЛОР врачи, Заболевания, Вопрос-ответ, ЛОР операции, Сурдология, Цены, Контакты - Телефоны в шапке - Кнопки «Записаться на прием» и «Заказать звонок» (цвета, стили взятые из CSS) - [ ] FE: Убрать `soon` у `/components/navigation` в Sidebar - [ ] FE: Добавить LLM-блок v1.0 - [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — секция Navigation **Результат спринта:** Шапка и навигация задокументированы по реальному сайту. --- ## Sprint 6 — Hero-баннер и блок преимуществ **Цель:** Задокументировать реальный баннер страницы /lor и блок преимуществ — ровно так, как они есть. ### Задачи - [ ] Research: Скриншот + CSS баннера с perm.oclinica.ru/lor - [ ] FE: Страница `/blocks/hero` — реальный баннер: - Фото врача-хирурга на фоне #b8e6ed - Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ» - 3 преимущества (безопасность, без внешних разрезов, скорость восстановления) - Кнопка «Узнать стоимость операции» (primary #FFA39C) - [ ] FE: Блок «Преимущества клиники» на той же странице: - 4 иконки + текст: кандидаты наук, оборудование, династия врачей, количество пациентов - [ ] FE: Добавить LLM-блок v1.0 - [ ] Docs: Обновить `docs/LLM_CONTEXT.md` **Результат спринта:** Hero и блок преимуществ задокументированы по реальному сайту. --- ## Sprint 7 — Вводный текст (CEO-блок) и блок услуг **Цель:** Задокументировать вводный текст от клиники и блок заболеваний/услуг. ### Задачи - [ ] Research: Изучить вводный текст на /lor (секция после баннера) — структура, стили - [ ] FE: Страница `/blocks/ceo` — вводный текст: - Структура секции (заголовок, описание специализации, вопросы-стимулы) - Типографика, цвета, отступы — взятые с реального сайта - [ ] Research: Блок заболеваний / услуг — как выглядит список (иконки/текст/карточки?) - [ ] FE: Блок «Услуги и заболевания» на странице `/blocks/services` - [ ] FE: Добавить LLM-блоки v1.0 - [ ] Docs: Обновить `docs/LLM_CONTEXT.md` **Результат спринта:** Вводный блок и услуги задокументированы по реальному сайту. --- ## Sprint 8 — Врачи: блок на главной + страница списка **Цель:** Задокументировать все блоки, связанные с врачами, по реальному сайту /lor/doctors. ### Задачи - [ ] Research: Изучить страницу perm.oclinica.ru/lor/doctors — CSS, HTML, скриншоты - [ ] FE: Страница `/blocks/doctors` — блок «Наши врачи»: - Сетка карточек врачей (реальная вёрстка с сайта) - Фильтры: по адресу клиники, стоимости приёма, стажу, специализации - Пагинация — если есть на сайте - [ ] FE: Страница `/pages/doctors` — полная страница врачей как сборка блоков - [ ] FE: Добавить LLM-блоки v1.0 - [ ] Docs: Обновить `docs/LLM_CONTEXT.md` **Результат спринта:** Все компоненты страницы врачей задокументированы. --- ## Sprint 9 — Отзывы и новости **Цель:** Задокументировать блоки отзывов и новостей — только то, что реально на сайте. ### Задачи - [ ] Research: Изучить блок отзывов на /lor — реальная вёрстка (список? карусель? что именно?) - [ ] Research: Изучить страницу /lor/news — структура списка новостей - [ ] FE: Страница `/blocks/reviews` — блок отзывов как на сайте - [ ] FE: Страница `/blocks/news` — блок новостей как на сайте (список с датами + пагинация) - [ ] FE: Добавить LLM-блоки v1.0 - [ ] Docs: Обновить `docs/LLM_CONTEXT.md` **Результат спринта:** Блоки отзывов и новостей задокументированы по реальному сайту. --- ## Sprint 10 — Формы записи и контакт **Цель:** Задокументировать реальные формы и блок контактов. ### Задачи - [ ] Research: Модальная форма записи на приём — реальная с сайта (структура, поля, стили) - [ ] Research: Блок «Контакт» — адрес, телефоны, карта, часы работы - [ ] FE: Страница `/blocks/contact-forms` — форма записи (реальная с сайта) - [ ] FE: Страница `/blocks/contact` — блок контактной информации - [ ] FE: Добавить LLM-блоки v1.0 - [ ] Docs: Обновить `docs/LLM_CONTEXT.md` **Результат спринта:** Формы и контакт задокументированы по реальному сайту. --- ## Sprint 11 — Страницы: Заболевание + Главная (сборки) **Цель:** Задокументировать полные страницы как сборки из задокументированных блоков. ### Задачи - [ ] Research: Выбрать реальную страницу заболевания (напр. /lor/rinit) — изучить все её блоки - [ ] FE: Страница `/pages/disease` — сборка блоков по реальной странице заболевания - [ ] FE: Страница `/pages/home` — сборка блоков по главной странице /lor - [ ] FE: Раздел «Страницы» в навигации — убрать soon - [ ] Docs: Обновить `docs/LLM_CONTEXT.md` **Результат спринта:** 2 реальные страницы задокументированы в брендбуке. --- ## Sprint 12 — Страницы: Цены + Контакты **Цель:** Задокументировать страницы цен и контактов. ### Задачи - [ ] Research: Реальная страница цен на сайте — структура, таблица, фильтры - [ ] Research: Реальная страница контактов — карта, адреса, часы, схема проезда - [ ] FE: Страница `/pages/prices` — по реальной странице цен - [ ] FE: Страница `/pages/contacts` — по реальной странице контактов - [ ] FE: Полный smoke-тест брендбука - [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md` ### Текущий статус деплоя - **Фронтенд:** https://web-oclinica.vercel.app (Vercel Hobby, задеплоен в Sprint 2) - **Команда деплоя:** `cd apps/web && vercel --prod --yes` - **Бэкенд:** локально (Docker Compose), хостинг выбирается позднее **Результат спринта:** Брендбук полностью задокументирован по реальному сайту. --- ## Сводная таблица | Спринт | Тема | Источник | |--------|---------------------------------------|-----------------------------------------| | 1 | Инициализация + Логотип | PDF брендбука | | 2 | Цвета, Типографика, Оффлайн элементы | PDF брендбука + Oracal каталог | | 3 | Кнопки и форм-контролы | CSS реального сайта perm.oclinica.ru | | 4 | Карточки | CSS реального сайта perm.oclinica.ru | | 5 | Шапка и навигация | Реальная шапка perm.oclinica.ru | | 6 | Hero-баннер + Преимущества | Реальная страница /lor | | 7 | Вводный текст + Услуги | Реальные блоки /lor | | 8 | Врачи | Реальная страница /lor/doctors | | 9 | Отзывы и Новости | Реальные блоки /lor + /lor/news | | 10 | Формы записи + Контакт | Реальные формы и контакты с сайта | | 11 | Страницы: Заболевание + Главная | Сборки по реальным страницам | | 12 | Страницы: Цены + Контакты | Реальные страницы + финальный smoke | --- ## Backlog (вне основных спринтов) - Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора) - Экспериментальная секция — если потребуется CRUD API (NestJS + Prisma) - Тёмная тема — только если появится на реальном сайте - Мультиязычность — только если появится на реальном сайте