diff --git a/apps/web/components/layout/Sidebar.tsx b/apps/web/components/layout/Sidebar.tsx index d619635..700bb1d 100644 --- a/apps/web/components/layout/Sidebar.tsx +++ b/apps/web/components/layout/Sidebar.tsx @@ -30,24 +30,20 @@ const NAV: NavSection[] = [ { label: "Кнопки", href: "/components/buttons" }, { label: "Форм-контролы", href: "/components/forms" }, { label: "Карточки", href: "/components/cards" }, - { label: "Бейджи и теги", href: "/components/badges", soon: true }, - { label: "Алерты", href: "/components/alerts", soon: true }, - { label: "Модальные окна", href: "/components/modals", soon: true }, - { label: "Таблицы", href: "/components/tables", soon: true }, { label: "Навигация", href: "/components/navigation", soon: true }, ], }, { title: "Блоки", items: [ - { label: "Hero", href: "/blocks/hero" }, - { label: "CEO-текст", href: "/blocks/ceo" }, + { 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/news", soon: true }, { label: "Формы контакта", href: "/blocks/contact-forms", soon: true }, { label: "Контакт", href: "/blocks/contact", soon: true }, - { label: "Услуги", href: "/blocks/services", soon: true }, ], }, { diff --git a/docs/SPRINTS.md b/docs/SPRINTS.md index 4244229..b383c26 100644 --- a/docs/SPRINTS.md +++ b/docs/SPRINTS.md @@ -171,177 +171,178 @@ --- -## Sprint 5 — Hero-блок и CEO-текст +## Принцип документирования (Sprint 5+) -**Цель:** Ключевые верхние блоки страниц. +> **Правило:** Брендбук документирует только то, что реально существует на сайте `perm.oclinica.ru`. +> Никаких придуманных вариантов, никаких новых стилей. Процесс: сначала изучаем реальный сайт → потом воспроизводим в брендбуке. + +--- + +## Sprint 5 — Шапка (Header) и навигация + +**Цель:** Задокументировать реальную шапку сайта perm.oclinica.ru/lor как она есть. ### Задачи -- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — добавить спецификации Hero и CEO-блоков -- [ ] FE: Добавить LLM-блоки на страницы Hero и CEO-текст -- [ ] FE: Hero-блок вариант 1 — фон + заголовок + CTA -- [ ] FE: Hero-блок вариант 2 — иллюстрация сбоку -- [ ] FE: Hero-блок вариант 3 — с встроенной формой записи -- [ ] FE: Блок CEO-текст — фото руководителя, цитата, подпись -- [ ] FE: Блок «Преимущества клиники» — иконки + текст -- [ ] FE: Страница «Блоки → Hero и вступление» -- [ ] Design: Согласование вариантов Hero под разные страницы - -**Результат спринта:** Hero и CEO-секция полностью задокументированы. +- [ ] Research: Изучить реальную шапку сайта — скриншот, CSS, HTML +- [ ] FE: Страница `/components/navigation` — документация реальной навигации сайта + - Логотип в шапке (размер, положение) + - Главное меню: Клиника, ЛОР врачи, Заболевания, Вопрос-ответ, ЛОР операции, Сурдология, Цены, Контакты + - Телефоны в шапке + - Кнопки «Записаться на прием» и «Заказать звонок» (цвета, стили взятые из CSS) +- [ ] FE: Убрать `soon` у `/components/navigation` в Sidebar +- [ ] FE: Добавить LLM-блок v1.0 +- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — секция Navigation + +**Результат спринта:** Шапка и навигация задокументированы по реальному сайту. --- -## Sprint 6 — Врачи и профиль врача +## Sprint 6 — Hero-баннер и блок преимуществ -**Цель:** Блоки и компоненты, связанные с врачами. +**Цель:** Задокументировать реальный баннер страницы /lor и блок преимуществ — ровно так, как они есть. ### Задачи -- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — добавить спецификации блоков врачей -- [ ] FE: Добавить LLM-блок на страницу «Блоки → Врачи» -- [ ] FE: Блок «Наши врачи» — сетка карточек с фильтром по специализации -- [ ] FE: Блок «Врач — профиль» (полная страница): фото, биография, специализации, расписание -- [ ] FE: Компонент «Расписание / слоты записи» -- [ ] FE: Компонент навигации (header menu, breadcrumbs) -- [ ] FE: Пагинация -- [ ] FE: Страница «Блоки → Врачи» - -**Результат спринта:** Все блоки о врачах готовы. +- [ ] 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 — Отзывы и новости +## Sprint 7 — Вводный текст (CEO-блок) и блок услуг -**Цель:** Контентные блоки сайта. +**Цель:** Задокументировать вводный текст от клиники и блок заболеваний/услуг. ### Задачи -- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — добавить спецификации блоков отзывов и новостей -- [ ] FE: Добавить LLM-блок на страницу «Блоки → Отзывы и новости» -- [ ] FE: Блок отзывов — карусель -- [ ] FE: Блок отзывов — статичная сетка -- [ ] FE: Блок рейтинга (звёзды + количество отзывов) -- [ ] FE: Блок новостей — сетка превью (3 в ряд) -- [ ] FE: Блок новостей — горизонтальный список -- [ ] FE: Блок «Последние новости» для сайдбара -- [ ] FE: Блок услуг / заболеваний — иконки + список -- [ ] FE: Страница «Блоки → Отзывы и новости» - -**Результат спринта:** Контентные блоки задокументированы. +- [ ] Research: Изучить вводный текст на /lor (секция после баннера) — структура, стили +- [ ] FE: Страница `/blocks/ceo` — вводный текст: + - Структура секции (заголовок, описание специализации, вопросы-стимулы) + - Типографика, цвета, отступы — взятые с реального сайта +- [ ] Research: Блок заболеваний / услуг — как выглядит список (иконки/текст/карточки?) +- [ ] FE: Блок «Услуги и заболевания» на странице `/blocks/services` +- [ ] FE: Добавить LLM-блоки v1.0 +- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` + +**Результат спринта:** Вводный блок и услуги задокументированы по реальному сайту. --- -## Sprint 8 — Формы контакта и модальные окна +## Sprint 8 — Врачи: блок на главной + страница списка -**Цель:** Все формы и диалоги взаимодействия с пациентом. +**Цель:** Задокументировать все блоки, связанные с врачами, по реальному сайту /lor/doctors. ### Задачи -- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — добавить спецификации форм и модальных окон -- [ ] FE: Добавить LLM-блок на страницу «Блоки → Формы и контакты» -- [ ] FE: Форма записи — короткая (имя, телефон) -- [ ] FE: Форма записи — расширенная (имя, телефон, специализация, врач, дата) -- [ ] FE: Форма записи в модальном окне -- [ ] FE: Контактная форма (имя, email, сообщение) -- [ ] FE: Блок «Контакт» — карта + адрес + часы работы -- [ ] FE: Модальное окно — информационное -- [ ] FE: Модальное окно — подтверждение -- [ ] FE: Страница «Блоки → Формы и контакты» - -**Результат спринта:** Все формы и диалоги готовы. +- [ ] 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 — Страницы: Главная и Заболевание +## Sprint 9 — Отзывы и новости -**Цель:** Первые две полноразмерные страницы в брендбуке. +**Цель:** Задокументировать блоки отзывов и новостей — только то, что реально на сайте. ### Задачи -- [ ] FE: Страница «Главная» — сборка из утверждённых блоков -- [ ] FE: Страница «Заболевание» — Hero (мини), описание, врачи по теме, форма -- [ ] FE: Раздел «Страницы» в навигации брендбука -- [ ] FE: Адаптивность страниц (desktop / tablet / mobile) -- [ ] Design: Ревью и согласование страниц +- [ ] Research: Изучить блок отзывов на /lor — реальная вёрстка (список? карусель? что именно?) +- [ ] Research: Изучить страницу /lor/news — структура списка новостей +- [ ] FE: Страница `/blocks/reviews` — блок отзывов как на сайте +- [ ] FE: Страница `/blocks/news` — блок новостей как на сайте (список с датами + пагинация) +- [ ] FE: Добавить LLM-блоки v1.0 +- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` -**Результат спринта:** 2 страницы задокументированы в брендбуке. +**Результат спринта:** Блоки отзывов и новостей задокументированы по реальному сайту. --- -## Sprint 10 — Страницы: Врачи, Врач, Цены +## Sprint 10 — Формы записи и контакт -**Цель:** Три страницы с ключевым контентом. +**Цель:** Задокументировать реальные формы и блок контактов. ### Задачи -- [ ] FE: Страница «Все врачи» — фильтры, сетка, пагинация -- [ ] FE: Страница «Врач (профиль)» -- [ ] FE: Страница «Цены» — фильтры, таблица, форма -- [ ] FE: Таблица цен с сортировкой -- [ ] FE: Адаптивность всех трёх страниц -- [ ] Design: Ревью страниц +- [ ] Research: Модальная форма записи на приём — реальная с сайта (структура, поля, стили) +- [ ] Research: Блок «Контакт» — адрес, телефоны, карта, часы работы +- [ ] FE: Страница `/blocks/contact-forms` — форма записи (реальная с сайта) +- [ ] FE: Страница `/blocks/contact` — блок контактной информации +- [ ] FE: Добавить LLM-блоки v1.0 +- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` -**Результат спринта:** Ещё 3 страницы в брендбуке. +**Результат спринта:** Формы и контакт задокументированы по реальному сайту. --- -## Sprint 11 — Страница Контакты и Экспериментальная секция (MVP) +## Sprint 11 — Страницы: Заболевание + Главная (сборки) -**Цель:** Последняя страница + запуск механизма экспериментов. +**Цель:** Задокументировать полные страницы как сборки из задокументированных блоков. ### Задачи -- [ ] FE: Страница «Контакты» -- [ ] BE + DB: Модели `Component`, `Page`, `Block` в Prisma -- [ ] BE: CRUD API для компонентов (`/api/components`) -- [ ] BE: CRUD API для страниц (`/api/pages`) -- [ ] FE: Секция «Эксперименты» в брендбуке -- [ ] FE: Форма создания нового экспериментального компонента -- [ ] FE: Список экспериментальных компонентов со статусами +- [ ] Research: Выбрать реальную страницу заболевания (напр. /lor/rinit) — изучить все её блоки +- [ ] FE: Страница `/pages/disease` — сборка блоков по реальной странице заболевания +- [ ] FE: Страница `/pages/home` — сборка блоков по главной странице /lor +- [ ] FE: Раздел «Страницы» в навигации — убрать soon +- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` -**Результат спринта:** Все страницы готовы, эксперименты — базовый функционал. +**Результат спринта:** 2 реальные страницы задокументированы в брендбуке. --- -## Sprint 12 — Полировка, финальный деплой и документация +## 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: Финальный ревью брендбука +- [ ] 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), хостинг выбирается в Sprint 12 +- **Бэкенд:** локально (Docker Compose), хостинг выбирается позднее -**Результат спринта:** Брендбук полностью готов, оба сервиса задеплоены, автодеплой настроен. +**Результат спринта:** Брендбук полностью задокументирован по реальному сайту. --- ## Сводная таблица -| Спринт | Тема | Ключевой результат | +| Спринт | Тема | Источник | |--------|---------------------------------------|-----------------------------------------| -| 1 | Инициализация + Логотип | Брендбук запускается, страница Логотипа готова | -| 2 | Цвета, Типографика, Оффлайн элементы | Фундамент + оффлайн раздел готовы | -| 3 | Кнопки и форм-контролы | Базовые компоненты готовы | -| 4 | Карточки | Все карточки задокументированы | -| 5 | Hero и CEO-текст | Ключевые блоки страниц готовы | -| 6 | Врачи | Блоки о врачах готовы | -| 7 | Отзывы и новости | Контентные блоки готовы | -| 8 | Формы и модальные окна | Все формы задокументированы | -| 9 | Страницы: Главная, Заболевание | 2 страницы в брендбуке | -| 10 | Страницы: Врачи, Цены | 3 страницы в брендбуке | -| 11 | Контакты + Эксперименты MVP | Все страницы + система экспериментов | -| 12 | Деплой и полировка | Брендбук живёт в продакшне | +| 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 (вне основных спринтов) -- Тёмная тема -- Экспорт компонентов в Figma -- Drag-and-drop конструктор страниц -- История версий экспериментальных компонентов -- Мультиязычность (если потребуется) - Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора) +- Экспериментальная секция — если потребуется CRUD API (NestJS + Prisma) +- Тёмная тема — только если появится на реальном сайте +- Мультиязычность — только если появится на реальном сайте