diff --git a/apps/web/components/layout/Sidebar.tsx b/apps/web/components/layout/Sidebar.tsx index 700bb1d..6b20019 100644 --- a/apps/web/components/layout/Sidebar.tsx +++ b/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 }, ], }, ]; diff --git a/docs/SPRINTS.md b/docs/SPRINTS.md index b383c26..b93537e 100644 --- a/docs/SPRINTS.md +++ b/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-блоки + деплой | ---