# План спринтов — Брендбук О!Клиника > Недельные спринты. Каждый спринт = 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` — схема формы, таблица размеров логотипа, правила использования - Страница `/offline/badges` — макеты бейджей 70×30 мм (светлый/тёмный), состав текста, применение - Страница `/offline/navigation` — 4 шаблона табличек, технические требования, цвета Oracal - Страница `/offline/transport` — CSS-макет трамвая с трёхполосной схемой, таблица зон - Страница `/offline/print` — макеты визитки (лицо/оборот) и листовки А5, Telegram-бот - Sidebar: убраны «скоро» для Цветов, Типографики и всех 5 страниц Оффлайн - Версия обновлена до **Sprint 2 · v0.2.0** - **Деплой на Vercel:** https://web-oclinica.vercel.app (production, бесплатно) ### Технические решения Sprint 2 - Страница «Цвета» — `"use client"` для clipboard API и экспорта JSON - WCAG relative luminance вычисляется на клиенте, без зависимостей - DINPro отображается с фоллбэком Arial (лицензионный шрифт) - Макеты (бейджи, трамвай, визитки) — чистый CSS/Tailwind без внешних зависимостей **Результат спринта:** Разделы «Цвета», «Типографика» и «Оффлайн элементы» полностью готовы. --- ## Sprint 3 — Базовые компоненты: кнопки и поля ввода **Цель:** Все варианты кнопок и форм-контролов в брендбуке. ### Задачи - [ ] FE: Компонент Button (все варианты: primary/secondary/ghost/danger, размеры, состояния) - [ ] FE: Компонент Input (text, password, focus/error/disabled) - [ ] FE: Компонент Textarea - [ ] FE: Компонент Select - [ ] FE: Компонент Checkbox и Radio - [ ] FE: Компонент Toggle/Switch - [ ] FE: Страница брендбука «Компоненты → Кнопки» с документацией - [ ] FE: Страница брендбука «Компоненты → Форм-контролы» - [ ] FE: Копирование HTML/CSS кода компонента в один клик **Результат спринта:** Раздел «Базовые компоненты — кнопки и ввод» готов. --- ## Sprint 4 — Карточки (Cards) **Цель:** Все типы карточек, используемых на сайте. ### Задачи - [ ] FE: Карточка врача (DoctorCard) — фото, имя, специализация, кнопка записи - [ ] FE: Карточка услуги / заболевания - [ ] FE: Карточка новости — превью, дата, заголовок, анонс, читать далее - [ ] FE: Карточка отзыва — автор, текст, рейтинг (звёзды), дата - [ ] FE: Карточка цены — услуга, стоимость, описание - [ ] FE: Бейджи, теги, алерты (inline и toast) - [ ] FE: Страница «Компоненты → Карточки» с документацией **Результат спринта:** Все карточки задокументированы и показаны в брендбуке. --- ## Sprint 5 — Hero-блок и CEO-текст **Цель:** Ключевые верхние блоки страниц. ### Задачи - [ ] FE: Hero-блок вариант 1 — фон + заголовок + CTA - [ ] FE: Hero-блок вариант 2 — иллюстрация сбоку - [ ] FE: Hero-блок вариант 3 — с встроенной формой записи - [ ] FE: Блок CEO-текст — фото руководителя, цитата, подпись - [ ] FE: Блок «Преимущества клиники» — иконки + текст - [ ] FE: Страница «Блоки → Hero и вступление» - [ ] Design: Согласование вариантов Hero под разные страницы **Результат спринта:** Hero и CEO-секция полностью задокументированы. --- ## Sprint 6 — Врачи и профиль врача **Цель:** Блоки и компоненты, связанные с врачами. ### Задачи - [ ] FE: Блок «Наши врачи» — сетка карточек с фильтром по специализации - [ ] FE: Блок «Врач — профиль» (полная страница): фото, биография, специализации, расписание - [ ] FE: Компонент «Расписание / слоты записи» - [ ] FE: Компонент навигации (header menu, breadcrumbs) - [ ] FE: Пагинация - [ ] FE: Страница «Блоки → Врачи» **Результат спринта:** Все блоки о врачах готовы. --- ## Sprint 7 — Отзывы и новости **Цель:** Контентные блоки сайта. ### Задачи - [ ] FE: Блок отзывов — карусель - [ ] FE: Блок отзывов — статичная сетка - [ ] FE: Блок рейтинга (звёзды + количество отзывов) - [ ] FE: Блок новостей — сетка превью (3 в ряд) - [ ] FE: Блок новостей — горизонтальный список - [ ] FE: Блок «Последние новости» для сайдбара - [ ] FE: Блок услуг / заболеваний — иконки + список - [ ] FE: Страница «Блоки → Отзывы и новости» **Результат спринта:** Контентные блоки задокументированы. --- ## Sprint 8 — Формы контакта и модальные окна **Цель:** Все формы и диалоги взаимодействия с пациентом. ### Задачи - [ ] FE: Форма записи — короткая (имя, телефон) - [ ] FE: Форма записи — расширенная (имя, телефон, специализация, врач, дата) - [ ] FE: Форма записи в модальном окне - [ ] FE: Контактная форма (имя, email, сообщение) - [ ] FE: Блок «Контакт» — карта + адрес + часы работы - [ ] FE: Модальное окно — информационное - [ ] FE: Модальное окно — подтверждение - [ ] FE: Страница «Блоки → Формы и контакты» **Результат спринта:** Все формы и диалоги готовы. --- ## Sprint 9 — Страницы: Главная и Заболевание **Цель:** Первые две полноразмерные страницы в брендбуке. ### Задачи - [ ] FE: Страница «Главная» — сборка из утверждённых блоков - [ ] FE: Страница «Заболевание» — Hero (мини), описание, врачи по теме, форма - [ ] FE: Раздел «Страницы» в навигации брендбука - [ ] FE: Адаптивность страниц (desktop / tablet / mobile) - [ ] Design: Ревью и согласование страниц **Результат спринта:** 2 страницы задокументированы в брендбуке. --- ## Sprint 10 — Страницы: Врачи, Врач, Цены **Цель:** Три страницы с ключевым контентом. ### Задачи - [ ] FE: Страница «Все врачи» — фильтры, сетка, пагинация - [ ] FE: Страница «Врач (профиль)» - [ ] FE: Страница «Цены» — фильтры, таблица, форма - [ ] FE: Таблица цен с сортировкой - [ ] FE: Адаптивность всех трёх страниц - [ ] Design: Ревью страниц **Результат спринта:** Ещё 3 страницы в брендбуке. --- ## Sprint 11 — Страница Контакты и Экспериментальная секция (MVP) **Цель:** Последняя страница + запуск механизма экспериментов. ### Задачи - [ ] FE: Страница «Контакты» - [ ] BE + DB: Модели `Component`, `Page`, `Block` в Prisma - [ ] BE: CRUD API для компонентов (`/api/components`) - [ ] BE: CRUD API для страниц (`/api/pages`) - [ ] FE: Секция «Эксперименты» в брендбуке - [ ] FE: Форма создания нового экспериментального компонента - [ ] FE: Список экспериментальных компонентов со статусами **Результат спринта:** Все страницы готовы, эксперименты — базовый функционал. --- ## Sprint 12 — Полировка, финальный деплой и документация **Цель:** Финальный релиз. Фронтенд уже живёт на Vercel с Sprint 2, Sprint 12 — финальная полировка и production-готовность бэкенда. ### Задачи - [ ] BE + FE: Полный smoke-тест всего брендбука - [ ] FE: Мобильная адаптация — финальная проверка всех страниц - [ ] FE: Accessibility-аудит (WCAG AA) - [ ] Деплой BE: выбрать и настроить хостинг для NestJS + PostgreSQL - [ ] Деплой: настроить автоматический деплой через Gitea Actions → Vercel (при пуше в `main`) - [ ] Docs: Обновление `docs/DEPLOY.md` финальными инструкциями - [ ] Design: Финальный ревью брендбука ### Текущий статус деплоя - **Фронтенд:** https://web-oclinica.vercel.app (Vercel Hobby, задеплоен в Sprint 2) - **Команда деплоя:** `cd apps/web && vercel --prod --yes` - **Бэкенд:** локально (Docker Compose), хостинг выбирается в Sprint 12 **Результат спринта:** Брендбук полностью готов, оба сервиса задеплоены, автодеплой настроен. --- ## Сводная таблица | Спринт | Тема | Ключевой результат | |--------|---------------------------------------|-----------------------------------------| | 1 | Инициализация + Логотип | Брендбук запускается, страница Логотипа готова | | 2 | Цвета, Типографика, Оффлайн элементы | Фундамент + оффлайн раздел готовы | | 3 | Кнопки и форм-контролы | Базовые компоненты готовы | | 4 | Карточки | Все карточки задокументированы | | 5 | Hero и CEO-текст | Ключевые блоки страниц готовы | | 6 | Врачи | Блоки о врачах готовы | | 7 | Отзывы и новости | Контентные блоки готовы | | 8 | Формы и модальные окна | Все формы задокументированы | | 9 | Страницы: Главная, Заболевание | 2 страницы в брендбуке | | 10 | Страницы: Врачи, Цены | 3 страницы в брендбуке | | 11 | Контакты + Эксперименты MVP | Все страницы + система экспериментов | | 12 | Деплой и полировка | Брендбук живёт в продакшне | --- ## Backlog (вне основных спринтов) - Тёмная тема - Экспорт компонентов в Figma - Drag-and-drop конструктор страниц - История версий экспериментальных компонентов - Мультиязычность (если потребуется) - Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора)