arazor72/brand_book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
52f04f9f5d87cc1dc151729969c6cb161504d9cd
brand_book/docs/SPRINTS.md
T
AR 15 M4 52f04f9f5d plan: consolidate all blocks into Sprint 5, add variants/duplicates sprints 
- Sprint 5: ALL site blocks in one sprint (header, hero, CEO text, doctors,
  reviews, contact forms, news, footer) — taken from real perm.oclinica.ru/lor
- Sprint 6: Page assemblies (home, disease, doctors)
- Sprint 7: Duplicate/variant system for components and blocks
- Sprint 8: Duplicate/variant system for pages (templates per section)
- Sprint 9: Remaining pages (prices, contacts, doctor profile)
- Sprint 10: Final polish and deploy

Sidebar: added Variants section, reordered Blocks to match real page flow,
removed Experiments section.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-22 23:45:41 +05:00

346 lines
26 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# План спринтов — Брендбук О!Клиника
> Недельные спринты. Каждый спринт = 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)
- Тёмная тема — только если появится на реальном сайте
- Мультиязычность — только если появится на реальном сайте
Reference in New Issue View Git Blame Copy Permalink