From 950799193af328c74a7970c2deefed0eb4ac063c Mon Sep 17 00:00:00 2001 From: AR 15 M4 Date: Tue, 24 Mar 2026 18:41:41 +0500 Subject: [PATCH] fix(sprint-5): sync block CSS styles with real site perm.oclinica.ru/lor - H1: 36px #cb9768 (was ~20px #53514e) - H2 sections: 36px #000 (was ~20-30px #111827) - Hero title: 22px #333 (was 16px #111827) - Hero CTA: pill style (was outline) - Contact forms bg: #d4f6f8 for both (was #b8e6ed / #fff) - News bg: #f2fee6 (was #fff) - Added version changelogs to all block pages - Updated typography, LLM_CONTEXT v4.3, SPRINTS.md Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/web/app/blocks/contact-forms/page.tsx | 37 +++++++++---- apps/web/app/blocks/doctors/page.tsx | 35 ++++++++++--- apps/web/app/blocks/hero/page.tsx | 52 ++++++++++++++----- apps/web/app/blocks/news/page.tsx | 20 +++++-- apps/web/app/blocks/reviews/page.tsx | 21 ++++++-- apps/web/app/foundation/typography/page.tsx | 6 +-- .../components/blocks/ContactFormsBlock.tsx | 8 +-- apps/web/components/blocks/DoctorsBlock.tsx | 2 +- apps/web/components/blocks/HeroBlock.tsx | 12 ++--- apps/web/components/blocks/NewsBlock.tsx | 4 +- apps/web/components/blocks/ReviewsBlock.tsx | 2 +- docs/LLM_CONTEXT.md | 15 +++--- docs/SPRINTS.md | 32 +++++++++--- 13 files changed, 178 insertions(+), 68 deletions(-) diff --git a/apps/web/app/blocks/contact-forms/page.tsx b/apps/web/app/blocks/contact-forms/page.tsx index b4506f9..5b81e07 100644 --- a/apps/web/app/blocks/contact-forms/page.tsx +++ b/apps/web/app/blocks/contact-forms/page.tsx @@ -10,13 +10,13 @@ export const metadata: Metadata = { const LLM_FORMS_TEXT = ` БЛОК: Формы записи и обратной связи Источник: perm.oclinica.ru/lor — два блока форм на одной странице -Версия: v1.0 +Версия: v1.1 ФОРМА 1: «Будьте здоровы!» (форма записи на приём) Позиция: после блока отзывов - Заголовок H2: «Будьте здоровы!» + Заголовок H2: «Будьте здоровы!» — 36px, bold, #000000, line-height 38px Подзаголовок: «Запишитесь на приём к врачу!» - Фон секции: #b8e6ed (светло-бирюзовый) + Фон секции: #d4f6f8 (светло-бирюзовый) Поля формы: 1. Текстовый input: placeholder «Введите ваше имя» (height 50px) 2. Телефонный input: placeholder «Введите ваш телефон» (height 50px) @@ -27,9 +27,9 @@ const LLM_FORMS_TEXT = ` ФОРМА 2: «Узнайте стоимость операции» (консультация) Позиция: после блока новостей - Заголовок H2: «Узнайте стоимость операции» + Заголовок H2: «Узнайте стоимость операции» — 36px, bold, #000000, line-height 38px Подзаголовок: «Проконсультируйтесь с ассистентом хирурга» - Фон секции: #ffffff + Фон секции: #d4f6f8 (тот же что и форма 1) Поля формы: 1. Текстовый input: placeholder «каша» / «Введите ваше имя» (height 50px) 2. Телефонный input: placeholder «Введите ваш телефон» (height 50px) @@ -40,12 +40,12 @@ const LLM_FORMS_TEXT = ` — Оба поля input/select: bb-input / bb-select (height 50px, border 1px solid #ccc) — Чекбокс обязателен в обеих формах — Кнопка отправки: всегда bb-btn-primary (#FFA39C) - — Форма 1 на бирюзовом фоне (#b8e6ed), форма 2 на белом + — Обе формы на бирюзовом фоне (#d4f6f8) ПРАВИЛА: ✓ Чекбокс согласия обязателен в каждой форме ✓ Кнопки отправки: bb-btn-primary (#FFA39C) -✓ Форма 1 на фоне #b8e6ed +✓ Обе формы на фоне #d4f6f8 ✕ Не менять порядок полей ✕ Не убирать чекбокс согласия `.trim(); @@ -64,7 +64,7 @@ export default function ContactFormsPage() {

Формы записи

- +

Два блока форм с perm.oclinica.ru/lor — запись на приём и запрос стоимости операции.

@@ -96,7 +96,7 @@ export default function ContactFormsPage() { {[ ["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"], ["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"], - ["Фон секции", "#b8e6ed", "#ffffff"], + ["Фон секции", "#d4f6f8", "#d4f6f8"], ["Поля", "Имя + Телефон + Select врача + Checkbox", "Имя + Телефон + Checkbox"], ["Кнопка", "«Запишите меня!»", "«Перезвоните мне»"], ["Стиль кнопки", "bb-btn-primary (#FFA39C)", "bb-btn-primary (#FFA39C)"], @@ -112,8 +112,23 @@ export default function ContactFormsPage() { + {/* Changelog */} +
+

+ История версий +

+
+

v1.1 — 24.03.2026

+
    +
  • H2: размер на 36px, цвет на #000000, line-height 38px
    • +
  • Фон формы 1: с #b8e6ed на #d4f6f8
    • +
  • Фон формы 2: с #ffffff на #d4f6f8 (обе формы на одном фоне)
    • +
+
+
+ {/* LLM блок */} - + Блок «Наши врачи» - +

Блок на странице perm.oclinica.ru/lor — заголовок, 3 стат-блока, сетка из 6 карточек врачей.

@@ -101,13 +101,36 @@ export default function DoctorsBlockPage() { + {/* Changelog */} +
+

+ История версий +

+
+
+

v1.2 — 24.03.2026

+
    +
  • H2: размер с ~30px на 36px, цвет с #111827 на #000000
    • +
  • H2 line-height: 38px
    • +
+
+
+

v1.1 — 23.03.2026

+
    +
  • 6 реальных фото врачей с сайта
    • +
  • Статистика без фона, только border-bottom #60959c
    • +
+
+
+
+ {/* LLM блок */} - + Hero-баннер - +

Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон{" "} #f9f4e7. @@ -138,14 +138,39 @@ export default function HeroPage() {

+ {/* Changelog */} +
+

+ История версий +

+
+
+

v1.2 — 24.03.2026

+
    +
  • H1: цвет исправлен с #53514e на #cb9768, размер с ~20px на 36px
    • +
  • Заголовок баннера: размер с ~16px на 22px, цвет с #111827 на #333333
    • +
  • CTA-кнопка: стиль изменён с outline на pill (фон #E9E4D4, radius 25px)
    • +
  • Дефис в H1: длинное тире «–» заменено на простой дефис «-» (как на сайте)
    • +
+
+
+

v1.1 — 23.03.2026

+
    +
  • Единый фон #f9f4e7 (ранее был разбит на две зоны)
    • +
  • Реальное фото врача с пациентом
    • +
+
+
+
+ {/* LLM блок */} - + @@ -169,7 +195,7 @@ export default function HeroPage() { Блок «Новости» - +

Блок новостей с perm.oclinica.ru/lor — 4 карточки в ряд (дата + заголовок-ссылка), кнопка «Все новости». @@ -132,8 +132,22 @@ export default function NewsBlockPage() {

+ {/* Changelog */} +
+

+ История версий +

+
+

v1.1 — 24.03.2026

+
    +
  • H2: размер на 36px, цвет на #000000, line-height 38px
    • +
  • Фон секции: с белого на #f2fee6 (светло-зелёный, как на реальном сайте)
    • +
+
+
+ {/* LLM блок */} - + Блок «Отзывы о нас» - +

Карусель отзывов с perm.oclinica.ru/lor — большая кавычка, текст, «Читать полностью», стрелки.

@@ -157,13 +157,26 @@ export default function ReviewsBlockPage() { + {/* Changelog */} +
+

+ История версий +

+
+

v1.1 — 24.03.2026

+
    +
  • H2: размер с ~20px на 36px, цвет с #111827 на #000000, line-height 38px
    • +
+
+
+ {/* LLM блок */} - + {[ - ["H1 страницы (над Hero)", "Fira Sans", "~28–30px", "700", "#bf9975", "ЛОР Клиника ухо, горло, нос…"], - ["H2 секции", "Fira Sans", "~30px", "700", "#111827", "Приём ведут опытные ЛОР врачи"], - ["Заголовок Hero-баннера", "Fira Sans", "~18px", "700", "#111827", "ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ…"], + ["H1 страницы (над Hero)", "Fira Sans", "36px", "700", "#cb9768", "ЛОР Клиника ухо, горло, нос…"], + ["H2 секции", "Fira Sans", "36px", "700", "#000000", "Приём ведут опытные ЛОР врачи"], + ["Заголовок Hero-баннера", "Fira Sans", "22px", "700", "#333333", "ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ…"], ["Статистика (цифра+текст)", "Fira Sans", "~18px", "700", "#60959c", "Ежедневно 27 ЛОР врачей…"], ["Подзаголовок секции", "Fira Sans", "~14px", "400", "#374151", "Фундаментальная теоретическая…"], ["Пункт checklist (ключ)", "Fira Sans", "13px", "700", "#111827", "БЕЗОПАСНО"], diff --git a/apps/web/components/blocks/ContactFormsBlock.tsx b/apps/web/components/blocks/ContactFormsBlock.tsx index 35e3813..c748952 100644 --- a/apps/web/components/blocks/ContactFormsBlock.tsx +++ b/apps/web/components/blocks/ContactFormsBlock.tsx @@ -4,10 +4,10 @@ export function ContactFormsBlock() { {/* Форма 1: Будьте здоровы */}
-

+

Будьте здоровы!

@@ -45,10 +45,10 @@ export function ContactFormsBlock() { {/* Форма 2: Узнайте стоимость */}

-

+

Узнайте стоимость операции

diff --git a/apps/web/components/blocks/DoctorsBlock.tsx b/apps/web/components/blocks/DoctorsBlock.tsx index 9be73c9..75e4de3 100644 --- a/apps/web/components/blocks/DoctorsBlock.tsx +++ b/apps/web/components/blocks/DoctorsBlock.tsx @@ -42,7 +42,7 @@ export function DoctorsBlock() {

{/* Заголовок + описание */}
-

+

Приём ведут опытные ЛОР врачи

diff --git a/apps/web/components/blocks/HeroBlock.tsx b/apps/web/components/blocks/HeroBlock.tsx index 718e4ed..3ef9fec 100644 --- a/apps/web/components/blocks/HeroBlock.tsx +++ b/apps/web/components/blocks/HeroBlock.tsx @@ -9,10 +9,10 @@ export function HeroBlock() {

{/* H1 страницы */}

- ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых + ЛОР Клиника ухо, горло, нос - медицинский центр лечения ЛОР заболеваний у детей и взрослых

{/* Баннер — единый светло-кремовый фон */} @@ -26,8 +26,8 @@ export function HeroBlock() { style={{ width: "50%", flexShrink: 0 }} >

Эндоскопическое хирургическое лечение ЛОР органов

@@ -50,7 +50,7 @@ export function HeroBlock() { ))}
-
diff --git a/apps/web/components/blocks/NewsBlock.tsx b/apps/web/components/blocks/NewsBlock.tsx index 5518d7c..3215781 100644 --- a/apps/web/components/blocks/NewsBlock.tsx +++ b/apps/web/components/blocks/NewsBlock.tsx @@ -25,9 +25,9 @@ export function NewsBlock() { return (
-

+

Новости

diff --git a/apps/web/components/blocks/ReviewsBlock.tsx b/apps/web/components/blocks/ReviewsBlock.tsx index 3e4eba2..69a1c45 100644 --- a/apps/web/components/blocks/ReviewsBlock.tsx +++ b/apps/web/components/blocks/ReviewsBlock.tsx @@ -19,7 +19,7 @@ export function ReviewsBlock() { > {/* Заголовок */}
-

+

Отзывы о нас

diff --git a/docs/LLM_CONTEXT.md b/docs/LLM_CONTEXT.md index 1962719..f32f860 100644 --- a/docs/LLM_CONTEXT.md +++ b/docs/LLM_CONTEXT.md @@ -2,9 +2,9 @@ ## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой -**Версия контекста:** 4.2 -**Дата обновления:** 2026-03-23 -**Актуальный спринт:** Sprint 5 +**Версия контекста:** 4.3 +**Дата обновления:** 2026-03-24 +**Актуальный спринт:** Sprint 5.5 **Сайт клиники:** https://oclinica.ru **Брендбук (локально):** http://localhost:3001 **Брендбук (production):** https://web-oclinica.vercel.app @@ -67,8 +67,9 @@ | Коралловый | `#ffa39c` | rgb(255,163,156) | Акценты | 2 | CTA-кнопки («Запишите меня!») | | Основной текст | `#464646` | rgb(70,70,70) | Текст | 3 | Цвет основного текста на сайте | | Второстепенный текст | `#949290` | rgb(148,146,144) | Текст | 4 | Подписи, второстепенный контент | +| H1 страницы | `#cb9768` | rgb(203,151,104) | Текст | 1 | Цвет H1 на страницах разделов | | Светло-кремовый Hero | `#f9f4e7` | rgb(249,244,231) | Фоны | 1 | Фон Hero-баннера страниц разделов | -| Светло-бирюзовый фон | `#b8e6ed` | rgb(184,230,237) | Фоны | 1 | Фон формы записи («Будьте здоровы!») | +| Светло-бирюзовый фон | `#d4f6f8` | rgb(212,246,248) | Фоны | 2 | Фон обеих форм записи (ранее #b8e6ed) | | Кремовый фон | `#e9e4d4` | rgb(233,228,212) | Фоны | 1 | Тёплые фоны кнопок-пилюль, вторичные секции | | Светло-жёлтый фон | `#eef4d1` | rgb(238,244,209) | Фоны | 1 | Фон карточек отзывов | | Светло-зелёный фон | `#f2fee6` | rgb(242,254,230) | Фоны | 1 | Фон секции новостей | @@ -290,8 +291,8 @@ SVG-версия ожидается (не получена от клиники). | `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle | | `/components/cards` | ✅ Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты | | `/components/*` | 🔜 Sprint 4–5 | Модалки, таблицы, навигация | -| `/blocks/hero` | ✅ Sprint 5 v1.1 | Hero-баннер: фон #f9f4e7, реальное фото врача, галочки #bf9975, кнопка outline | -| `/blocks/doctors` | ✅ Sprint 5 v1.1 | Врачи: H2 30px, статистика #60959c без фона, 6 реальных фото | +| `/blocks/hero` | ✅ Sprint 5.5 v1.2 | Hero-баннер: H1 36px #cb9768, заголовок 22px #333, кнопка pill, фон #f9f4e7 | +| `/blocks/doctors` | ✅ Sprint 5.5 v1.2 | Врачи: H2 36px #000, статистика #60959c без фона, 6 реальных фото | | `/blocks/*` | 🔜 Sprint 5 | Отзывы, формы, новости, footer | | `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты | @@ -440,6 +441,8 @@ CSS-классы в `globals.css`. Компонент: `@/components/ui/Button` | 3.0 | 2026-03-22 | Sprint 3: кнопки (Button), форм-контролы (Input/Textarea/Select/Checkbox/Radio/Toggle), LLM-блок на логотипе | | 4.0 | 2026-03-22 | Sprint 4 start: исправлены цвета Oracal (точные RGB из каталога), кнопки/формы по реальному сайту | | 4.1 | 2026-03-22 | Sprint 4 done: карточки (DoctorCard/NewsCard/ReviewCard/PriceCard/ServiceCard), бейджи/теги/алерты | +| 4.2 | 2026-03-23 | Sprint 5: блоки Hero v1.1, Doctors v1.1 | +| 4.3 | 2026-03-24 | Sprint 5.5: исправлены CSS-стили блоков по реальному сайту (H1 #cb9768 36px, H2 #000 36px, фоны форм #d4f6f8, фон новостей #f2fee6, CTA-кнопка pill) | --- diff --git a/docs/SPRINTS.md b/docs/SPRINTS.md index cfe9a9a..f22114d 100644 --- a/docs/SPRINTS.md +++ b/docs/SPRINTS.md @@ -194,6 +194,7 @@ - [x] FE: Баннер — единый фон #f9f4e7 (светло-кремовый, замерян пикселем), галочки #bf9975 - [x] FE: Правая часть: реальное фото врача с пациентом (спарсено с сайта → public/hero-doctor.jpg) - [x] LLM: v1.1 — исправлен цвет фона, кнопка outline, галочки бежевые +- [x] FE: v1.2 — H1: 36px/#cb9768, заголовок баннера: 22px/#333, CTA: pill-стиль, дефис в H1 **Вводный текст (CEO-блок)** → `/blocks/ceo` - [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы @@ -203,16 +204,20 @@ - [x] FE: Реальные фото 6 врачей (спарсены с сайта → public/doctors/) - [x] FE: Реальные имена и специализации врачей из слайдера /lor - [x] LLM: v1.1 +- [x] FE: v1.2 — H2: 36px/#000000, line-height 38px **Блок отзывов** → `/blocks/reviews` -- [ ] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки +- [x] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки +- [x] FE: v1.1 — H2: 36px/#000000, line-height 38px **Формы записи** → `/blocks/contact-forms` -- [ ] FE: Форма «Будьте здоровы!» (фон #b8e6ed, поля: имя/телефон/врач, кнопка «Запишите меня!») -- [ ] FE: Форма «Узнайте стоимость операции» (белый фон, поля: имя/телефон, кнопка «Перезвоните мне») +- [x] FE: Форма «Будьте здоровы!» (фон #d4f6f8, поля: имя/телефон/врач, кнопка «Запишите меня!») +- [x] FE: Форма «Узнайте стоимость операции» (фон #d4f6f8, поля: имя/телефон, кнопка «Перезвоните мне») +- [x] FE: v1.1 — H2: 36px/#000000, фон обеих форм: #d4f6f8 (ранее #b8e6ed и #fff) **Блок новостей** → `/blocks/news` -- [ ] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock) +- [x] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock) +- [x] FE: v1.1 — H2: 36px/#000000, фон секции: #f2fee6 (ранее белый) **Footer (подвал)** → `/blocks/contact` - [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы @@ -222,10 +227,21 @@ - [x] Docs: Типографика сайта — реальные стили на 23.03.2026 (новый раздел в /foundation/typography) - [x] Docs: Цвета — исправлен #f9f4e7 (Hero), #b8e6ed (форма), #e9e4d4 (пилюли) - [ ] FE: Убрать `soon` у Hero и Doctors в Sidebar -- [ ] FE: CEO-блок, отзывы, формы, новости, footer -- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md` по итогам Sprint 5 - -**Результат спринта (в работе):** Hero + Doctors задокументированы с реальными фото и точными цветами. +- [ ] FE: CEO-блок +- [x] FE: Блоки отзывов, форм записи, новостей — компоненты + страницы документации +- [x] Docs: Обновление `docs/LLM_CONTEXT.md` v4.3 +- [x] FE: Исправлены CSS-стили ВСЕХ блоков по реальному сайту (24.03.2026): + - H1 страницы: 36px, #cb9768 (ранее ~20px, #53514e) + - H2 секций: 36px, #000000 (ранее ~20-30px, #111827) + - Hero заголовок: 22px, #333 (ранее 16px, #111827) + - CTA-кнопка Hero: pill (ранее outline) + - Фон форм: #d4f6f8 (ранее #b8e6ed и #fff) + - Фон новостей: #f2fee6 (ранее #fff) + - Типографика сайта: обновлена таблица стилей +- [x] FE: Добавлена «История версий» с changelog на каждую страницу блока +- [ ] FE: Footer + +**Результат спринта:** Hero v1.2, Doctors v1.2, Reviews v1.1, ContactForms v1.1, News v1.1 — все стили синхронизированы с реальным сайтом. ---