Browse Source

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>
sprint/5
AR 15 M4 1 week ago
parent
commit
52f04f9f5d
  1. 13
      apps/web/components/layout/Sidebar.tsx
  2. 203
      docs/SPRINTS.md

13
apps/web/components/layout/Sidebar.tsx

@ -36,14 +36,14 @@ const NAV: NavSection[] = [
{
title: "Блоки",
items: [
{ label: "Hero + Преимущества", href: "/blocks/hero", soon: true },
{ label: "Шапка / Навигация", href: "/components/navigation", soon: true },
{ label: "Hero-баннер", href: "/blocks/hero", soon: true },
{ label: "Вводный текст", href: "/blocks/ceo", soon: true },
{ label: "Услуги", href: "/blocks/services", soon: true },
{ label: "Наши врачи", href: "/blocks/doctors", soon: true },
{ label: "Отзывы", href: "/blocks/reviews", soon: true },
{ label: "Формы записи", href: "/blocks/contact-forms", soon: true },
{ label: "Новости", href: "/blocks/news", soon: true },
{ label: "Формы контакта", href: "/blocks/contact-forms", soon: true },
{ label: "Контакт", href: "/blocks/contact", soon: true },
{ label: "Подвал / Контакт", href: "/blocks/contact", soon: true },
],
},
{
@ -67,9 +67,10 @@ const NAV: NavSection[] = [
],
},
{
title: "Эксперименты",
title: "Варианты и дубли",
items: [
{ label: "Библиотека", href: "/experiments", soon: true },
{ label: "Варианты блоков", href: "/variants/blocks", soon: true },
{ label: "Варианты страниц", href: "/variants/pages", soon: true },
],
},
];

203
docs/SPRINTS.md

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

Loading…
Cancel
Save