arazor72/brand_book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(sprint-5): sync block CSS styles with real site perm.oclinica.ru/lor

Browse Source 
- 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) <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
2026-03-24 18:41:41 +05:00
parent 2ed7eee63d
commit 950799193a
13 changed files with 177 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/blocks/contact-forms/page.tsx
+26 -11
View File
@@ -10,13 +10,13 @@ export const metadata: Metadata = {
const LLM_FORMS_TEXT = ` const LLM_FORMS_TEXT = `
БЛОК: Формы записи и обратной связи БЛОК: Формы записи и обратной связи
Источник: perm.oclinica.ru/lor — два блока форм на одной странице Источник: perm.oclinica.ru/lor — два блока форм на одной странице
Версия: v1.0 Версия: v1.1
ФОРМА 1: «Будьте здоровы!» (форма записи на приём) ФОРМА 1: «Будьте здоровы!» (форма записи на приём)
Позиция: после блока отзывов Позиция: после блока отзывов
Заголовок H2: «Будьте здоровы!» Заголовок H2: «Будьте здоровы!» — 36px, bold, #000000, line-height 38px
Подзаголовок: «Запишитесь на приём к врачу!» Подзаголовок: «Запишитесь на приём к врачу!»
Фон секции: #b8e6ed (светло-бирюзовый) Фон секции: #d4f6f8 (светло-бирюзовый)
Поля формы: Поля формы:
1. Текстовый input: placeholder «Введите ваше имя» (height 50px) 1. Текстовый input: placeholder «Введите ваше имя» (height 50px)
2. Телефонный input: placeholder «Введите ваш телефон» (height 50px) 2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
@@ -27,9 +27,9 @@ const LLM_FORMS_TEXT = `
ФОРМА 2: «Узнайте стоимость операции» (консультация) ФОРМА 2: «Узнайте стоимость операции» (консультация)
Позиция: после блока новостей Позиция: после блока новостей
Заголовок H2: «Узнайте стоимость операции» Заголовок H2: «Узнайте стоимость операции» — 36px, bold, #000000, line-height 38px
Подзаголовок: «Проконсультируйтесь с ассистентом хирурга» Подзаголовок: «Проконсультируйтесь с ассистентом хирурга»
Фон секции: #ffffff Фон секции: #d4f6f8 (тот же что и форма 1)
Поля формы: Поля формы:
1. Текстовый input: placeholder «каша» / «Введите ваше имя» (height 50px) 1. Текстовый input: placeholder «каша» / «Введите ваше имя» (height 50px)
2. Телефонный 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) — Оба поля input/select: bb-input / bb-select (height 50px, border 1px solid #ccc)
— Чекбокс обязателен в обеих формах — Чекбокс обязателен в обеих формах
— Кнопка отправки: всегда bb-btn-primary (#FFA39C) — Кнопка отправки: всегда bb-btn-primary (#FFA39C)
— Форма 1 на бирюзовом фоне (#b8e6ed), форма 2 на белом — Обе формы на бирюзовом фоне (#d4f6f8)
ПРАВИЛА: ПРАВИЛА:
✓ Чекбокс согласия обязателен в каждой форме ✓ Чекбокс согласия обязателен в каждой форме
✓ Кнопки отправки: bb-btn-primary (#FFA39C) ✓ Кнопки отправки: bb-btn-primary (#FFA39C)
✓ Форма 1 на фоне #b8e6ed ✓ Обе формы на фоне #d4f6f8
✕ Не менять порядок полей ✕ Не менять порядок полей
✕ Не убирать чекбокс согласия ✕ Не убирать чекбокс согласия
`.trim(); `.trim();
@@ -64,7 +64,7 @@ export default function ContactFormsPage() {
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}> <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
Формы записи Формы записи
</h1> </h1>
<BlockMetaBar path="/blocks/contact-forms" defaultVersion="v1.0" defaultIsInPreview={false} /> <BlockMetaBar path="/blocks/contact-forms" defaultVersion="v1.1" defaultIsInPreview={false} />
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}> <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
Два блока форм с perm.oclinica.ru/lor — запись на приём и запрос стоимости операции. Два блока форм с perm.oclinica.ru/lor — запись на приём и запрос стоимости операции.
</p> </p>
@@ -96,7 +96,7 @@ export default function ContactFormsPage() {
{[ {[
["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"], ["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"],
["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"], ["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"],
["Фон секции", "#b8e6ed", "#ffffff"], ["Фон секции", "#d4f6f8", "#d4f6f8"],
["Поля", "Имя + Телефон + Select врача + Checkbox", "Имя + Телефон + Checkbox"], ["Поля", "Имя + Телефон + Select врача + Checkbox", "Имя + Телефон + Checkbox"],
["Кнопка", "«Запишите меня!»", "«Перезвоните мне»"], ["Кнопка", "«Запишите меня!»", "«Перезвоните мне»"],
["Стиль кнопки", "bb-btn-primary (#FFA39C)", "bb-btn-primary (#FFA39C)"], ["Стиль кнопки", "bb-btn-primary (#FFA39C)", "bb-btn-primary (#FFA39C)"],
@@ -112,8 +112,23 @@ export default function ContactFormsPage() {
</div> </div>
</section> </section>
{/* Changelog */}
<section className="space-y-3">
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
История версий
</h2>
<div className="p-3 rounded-lg" style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}>
<p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>v1.1 — 24.03.2026</p>
<ul className="list-disc list-inside space-y-0.5 text-xs" style={{ color: "var(--bb-text-muted)" }}>
<li>H2: размер на <strong>36px</strong>, цвет на <strong>#000000</strong>, line-height 38px</li>
<li>Фон формы 1: с #b8e6ed на <strong>#d4f6f8</strong></li>
<li>Фон формы 2: с #ffffff на <strong>#d4f6f8</strong> (обе формы на одном фоне)</li>
</ul>
</div>
</section>
{/* LLM блок */} {/* LLM блок */}
<LlmBlock path="/blocks/contact-forms" version="v1.0" specText={LLM_FORMS_TEXT}> <LlmBlock path="/blocks/contact-forms" version="v1.1" specText={LLM_FORMS_TEXT}>
<LlmSection title="Форма 1 — Запись на приём" /> <LlmSection title="Форма 1 — Запись на приём" />
<LlmTable <LlmTable
headers={["Поле", "Тип", "Placeholder"]} headers={["Поле", "Тип", "Placeholder"]}
@@ -138,7 +153,7 @@ export default function ContactFormsPage() {
<LlmSection title="Правила" /> <LlmSection title="Правила" />
<LlmRules <LlmRules
rules={[ rules={[
{ ok: true, text: "Форма 1: фон #b8e6ed, форма 2: фон #fff" }, { ok: true, text: "Обе формы: фон #d4f6f8" },
{ ok: true, text: "Чекбокс согласия обязателен в каждой форме" }, { ok: true, text: "Чекбокс согласия обязателен в каждой форме" },
{ ok: true, text: "Кнопки: bb-btn-primary (#FFA39C)" }, { ok: true, text: "Кнопки: bb-btn-primary (#FFA39C)" },
{ ok: true, text: "Все input/select: height 50px (bb-input, bb-select)" }, { ok: true, text: "Все input/select: height 50px (bb-input, bb-select)" },
apps/web/app/blocks/doctors/page.tsx
+29 -6
View File
@@ -10,12 +10,12 @@ export const metadata: Metadata = {
const LLM_DOCTORS_TEXT = ` const LLM_DOCTORS_TEXT = `
БЛОК: Наши врачи БЛОК: Наши врачи
Источник: perm.oclinica.ru/lor — блок под CEO-текстом Источник: perm.oclinica.ru/lor — блок под CEO-текстом
Версия: v1.1 Версия: v1.2
СТРУКТУРА БЛОКА: СТРУКТУРА БЛОКА:
1. ЗАГОЛОВОК H2: «Приём ведут опытные ЛОР врачи» 1. ЗАГОЛОВОК H2: «Приём ведут опытные ЛОР врачи»
Подзаголовок: описание принципа работы врачей клиники Подзаголовок: описание принципа работы врачей клиники
Размер: ~30px (text-3xl), font-bold, #111827 Размер: 36px, font-bold, #000000, line-height: 38px
2. БЛОК СТАТИСТИКИ (3 показателя в ряд): 2. БЛОК СТАТИСТИКИ (3 показателя в ряд):
— «Ежедневно 27 ЛОР врачей работают в клинике» — «Ежедневно 27 ЛОР врачей работают в клинике»
@@ -31,7 +31,7 @@ const LLM_DOCTORS_TEXT = `
Карточки без рамки, gap минимальный Карточки без рамки, gap минимальный
ЦВЕТА: ЦВЕТА:
Заголовок H2: #111827, ~30px (text-3xl) Заголовок H2: #000000, 36px, line-height 38px
Статистика текст: #60959c (серо-бирюзовый) Статистика текст: #60959c (серо-бирюзовый)
Статистика черта: border-bottom 3px solid #60959c Статистика черта: border-bottom 3px solid #60959c
Имя врача: #60959c Имя врача: #60959c
@@ -59,7 +59,7 @@ export default function DoctorsBlockPage() {
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}> <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
Блок «Наши врачи» Блок «Наши врачи»
</h1> </h1>
<BlockMetaBar path="/blocks/doctors" defaultVersion="v1.1" defaultIsInPreview={true} /> <BlockMetaBar path="/blocks/doctors" defaultVersion="v1.2" defaultIsInPreview={true} />
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}> <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
Блок на странице perm.oclinica.ru/lor — заголовок, 3 стат-блока, сетка из 6 карточек врачей. Блок на странице perm.oclinica.ru/lor — заголовок, 3 стат-блока, сетка из 6 карточек врачей.
</p> </p>
@@ -101,13 +101,36 @@ export default function DoctorsBlockPage() {
</div> </div>
</section> </section>
{/* Changelog */}
<section className="space-y-3">
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
История версий
</h2>
<div className="space-y-2 text-sm" style={{ color: "var(--bb-text-muted)" }}>
<div className="p-3 rounded-lg" style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}>
<p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>v1.2 — 24.03.2026</p>
<ul className="list-disc list-inside space-y-0.5 text-xs">
<li>H2: размер с ~30px на <strong>36px</strong>, цвет с #111827 на <strong>#000000</strong></li>
<li>H2 line-height: <strong>38px</strong></li>
</ul>
</div>
<div className="p-3 rounded-lg" style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}>
<p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>v1.1 — 23.03.2026</p>
<ul className="list-disc list-inside space-y-0.5 text-xs">
<li>6 реальных фото врачей с сайта</li>
<li>Статистика без фона, только border-bottom #60959c</li>
</ul>
</div>
</div>
</section>
{/* LLM блок */} {/* LLM блок */}
<LlmBlock path="/blocks/doctors" version="v1.1" specText={LLM_DOCTORS_TEXT}> <LlmBlock path="/blocks/doctors" version="v1.2" specText={LLM_DOCTORS_TEXT}>
<LlmSection title="Структура блока" /> <LlmSection title="Структура блока" />
<LlmTable <LlmTable
headers={["Элемент", "Содержимое", "Стиль"]} headers={["Элемент", "Содержимое", "Стиль"]}
rows={[ rows={[
["H2", "«Приём ведут опытные ЛОР врачи»", "~30px (text-3xl), font-bold, #111827"], ["H2", "«Приём ведут опытные ЛОР врачи»", "36px, font-bold, #000000, line-height 38px"],
["Подзаголовок", "Описание принципа работы", "14px, #374151, line-height 1.7"], ["Подзаголовок", "Описание принципа работы", "14px, #374151, line-height 1.7"],
["Статистика", "3 блока в ряд, без фона", "#60959c bold + border-bottom 3px solid #60959c"], ["Статистика", "3 блока в ряд, без фона", "#60959c bold + border-bottom 3px solid #60959c"],
["Сетка врачей", "6 карточек в 1 ряд", "фото 110×150px + имя #60959c + специализация #374151"], ["Сетка врачей", "6 карточек в 1 ряд", "фото 110×150px + имя #60959c + специализация #374151"],
apps/web/app/blocks/hero/page.tsx
+39 -13
View File
@@ -10,22 +10,22 @@ export const metadata: Metadata = {
const LLM_HERO_TEXT = ` const LLM_HERO_TEXT = `
БЛОК: Hero-баннер (главный баннер страницы) БЛОК: Hero-баннер (главный баннер страницы)
Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
Версия: v1.1 Версия: v1.2
ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером): ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
«ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых» «ЛОР Клиника ухо, горло, нос - медицинский центр лечения ЛОР заболеваний у детей и взрослых»
Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m) Шрифт: Fira Sans, 36px, weight 700, цвет: #cb9768
СТРУКТУРА БАННЕРА (двухколоночная, единый фон #f9f4e7): СТРУКТУРА БАННЕРА (двухколоночная, единый фон #f9f4e7):
Левая колонка (~50%): Левая колонка (~50%):
— Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ» — Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827 Шрифт: Fira Sans, 22px, weight 700, uppercase, цвет #333333
— 3 пункта с галочками (✓ бежевый #bf9975): — 3 пункта с галочками (✓ бежевый #bf9975):
1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы» 1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров» 2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров»
3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки» 3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
Ключевое слово: uppercase bold; описание: обычный текст, ~13px Ключевое слово: uppercase bold; описание: обычный текст, ~13px
— Кнопка «Узнать стоимость операции» — стиль: bb-btn-outline (светлая, без заливки) — Кнопка «Узнать стоимость операции» — стиль: bb-btn-pill (кремовый фон #E9E4D4, radius 25px)
Правая колонка (~50%): Правая колонка (~50%):
— Фото врача с пациентом — Фото врача с пациентом
— Изображение занимает всю высоту блока — Изображение занимает всю высоту блока
@@ -36,8 +36,8 @@ const LLM_HERO_TEXT = `
ЦВЕТА: ЦВЕТА:
Фон баннера: #f9f4e7 (светло-кремовый, единый для всего блока) Фон баннера: #f9f4e7 (светло-кремовый, единый для всего блока)
Кнопка CTA: outline-стиль (светлая), не коралловая Кнопка CTA: pill-стиль (кремовый #E9E4D4, border #D5CFBD, radius 25px)
Заголовок блока: #111827 Заголовок блока: #333333
Пункты: ключевое слово #111827 bold, описание #374151 Пункты: ключевое слово #111827 bold, описание #374151
Галочка: #bf9975 (бежевый) Галочка: #bf9975 (бежевый)
@@ -64,7 +64,7 @@ export default function HeroPage() {
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}> <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
Hero-баннер Hero-баннер
</h1> </h1>
<BlockMetaBar path="/blocks/hero" defaultVersion="v1.1" defaultIsInPreview={true} /> <BlockMetaBar path="/blocks/hero" defaultVersion="v1.2" defaultIsInPreview={true} />
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}> <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон{" "} Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон{" "}
<strong>#f9f4e7</strong>. <strong>#f9f4e7</strong>.
@@ -138,14 +138,39 @@ export default function HeroPage() {
</p> </p>
</section> </section>
{/* Changelog */}
<section className="space-y-3">
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
История версий
</h2>
<div className="space-y-2 text-sm" style={{ color: "var(--bb-text-muted)" }}>
<div className="p-3 rounded-lg" style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}>
<p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>v1.2 — 24.03.2026</p>
<ul className="list-disc list-inside space-y-0.5 text-xs">
<li>H1: цвет исправлен с #53514e на <strong>#cb9768</strong>, размер с ~20px на <strong>36px</strong></li>
<li>Заголовок баннера: размер с ~16px на <strong>22px</strong>, цвет с #111827 на <strong>#333333</strong></li>
<li>CTA-кнопка: стиль изменён с outline на <strong>pill</strong> (фон #E9E4D4, radius 25px)</li>
<li>Дефис в H1: длинное тире «–» заменено на простой дефис «-» (как на сайте)</li>
</ul>
</div>
<div className="p-3 rounded-lg" style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}>
<p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>v1.1 — 23.03.2026</p>
<ul className="list-disc list-inside space-y-0.5 text-xs">
<li>Единый фон #f9f4e7 (ранее был разбит на две зоны)</li>
<li>Реальное фото врача с пациентом</li>
</ul>
</div>
</div>
</section>
{/* LLM блок */} {/* LLM блок */}
<LlmBlock path="/blocks/hero" version="v1.1" specText={LLM_HERO_TEXT}> <LlmBlock path="/blocks/hero" version="v1.2" specText={LLM_HERO_TEXT}>
<LlmSection title="Структура баннера" /> <LlmSection title="Структура баннера" />
<LlmTable <LlmTable
headers={["Зона", "Ширина", "Фон", "Содержимое"]} headers={["Зона", "Ширина", "Фон", "Содержимое"]}
rows={[ rows={[
["Весь баннер", "100%", "#f9f4e7", "Единый светло-кремовый фон"], ["Весь баннер", "100%", "#f9f4e7", "Единый светло-кремовый фон"],
["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка outline"], ["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка pill"],
["Правый блок", "~50%", "#f9f4e7 (общий)", "Фото врача с пациентом"], ["Правый блок", "~50%", "#f9f4e7 (общий)", "Фото врача с пациентом"],
["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"], ["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
]} ]}
@@ -160,8 +185,9 @@ export default function HeroPage() {
headers={["Элемент", "Цвет", "Токен"]} headers={["Элемент", "Цвет", "Токен"]}
rows={[ rows={[
["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"], ["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"],
["Кнопка CTA", "outline-стиль", "bb-btn-outline"], ["Кнопка CTA", "pill-стиль (#E9E4D4, 25px)", "bb-btn-pill"],
["Заголовок блока", "#111827", "—"], ["Заголовок блока", "#333333", "—"],
["H1 страницы", "#cb9768", "36px, bold"],
["Галочка ✓", "#bf9975", "Бежевый"], ["Галочка ✓", "#bf9975", "Бежевый"],
]} ]}
/> />
@@ -169,7 +195,7 @@ export default function HeroPage() {
<LlmRules <LlmRules
rules={[ rules={[
{ ok: true, text: "Фон баннера: #f9f4e7 (светло-кремовый) — единый для всего блока" }, { ok: true, text: "Фон баннера: #f9f4e7 (светло-кремовый) — единый для всего блока" },
{ ok: true, text: "Кнопка CTA: bb-btn-outline (светлая)" }, { ok: true, text: "Кнопка CTA: bb-btn-pill (кремовый #E9E4D4, radius 25px)" },
{ ok: true, text: "Заголовок: uppercase, bold" }, { ok: true, text: "Заголовок: uppercase, bold" },
{ ok: true, text: "Три пункта с галочками ✓ (#bf9975)" }, { ok: true, text: "Три пункта с галочками ✓ (#bf9975)" },
{ ok: false, text: "Не менять фон баннера на другой цвет" }, { ok: false, text: "Не менять фон баннера на другой цвет" },
apps/web/app/blocks/news/page.tsx
+17 -3
View File
@@ -33,7 +33,7 @@ const MOCK_NEWS = [
const LLM_NEWS_TEXT = ` const LLM_NEWS_TEXT = `
БЛОК: Новости БЛОК: Новости
Источник: perm.oclinica.ru/lor — блок новостей внизу страницы Источник: perm.oclinica.ru/lor — блок новостей внизу страницы
Версия: v1.0 Версия: v1.1
СТРУКТУРА БЛОКА: СТРУКТУРА БЛОКА:
1. ЗАГОЛОВОК H2: «Новости» 1. ЗАГОЛОВОК H2: «Новости»
@@ -81,7 +81,7 @@ export default function NewsBlockPage() {
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}> <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
Блок «Новости» Блок «Новости»
</h1> </h1>
<BlockMetaBar path="/blocks/news" defaultVersion="v1.0" defaultIsInPreview={false} /> <BlockMetaBar path="/blocks/news" defaultVersion="v1.1" defaultIsInPreview={false} />
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}> <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
Блок новостей с perm.oclinica.ru/lor — 4 карточки в ряд (дата + заголовок-ссылка), Блок новостей с perm.oclinica.ru/lor — 4 карточки в ряд (дата + заголовок-ссылка),
кнопка «Все новости». кнопка «Все новости».
@@ -132,8 +132,22 @@ export default function NewsBlockPage() {
</p> </p>
</section> </section>
{/* Changelog */}
<section className="space-y-3">
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
История версий
</h2>
<div className="p-3 rounded-lg" style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}>
<p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>v1.1 — 24.03.2026</p>
<ul className="list-disc list-inside space-y-0.5 text-xs" style={{ color: "var(--bb-text-muted)" }}>
<li>H2: размер на <strong>36px</strong>, цвет на <strong>#000000</strong>, line-height 38px</li>
<li>Фон секции: с белого на <strong>#f2fee6</strong> (светло-зелёный, как на реальном сайте)</li>
</ul>
</div>
</section>
{/* LLM блок */} {/* LLM блок */}
<LlmBlock path="/blocks/news" version="v1.0" specText={LLM_NEWS_TEXT}> <LlmBlock path="/blocks/news" version="v1.1" specText={LLM_NEWS_TEXT}>
<LlmSection title="Структура карточки новости" /> <LlmSection title="Структура карточки новости" />
<LlmTable <LlmTable
headers={["Поле", "Стиль", "Значение"]} headers={["Поле", "Стиль", "Значение"]}
apps/web/app/blocks/reviews/page.tsx
+17 -4
View File
@@ -23,7 +23,7 @@ const MOCK_REVIEWS = [
const LLM_REVIEWS_TEXT = ` const LLM_REVIEWS_TEXT = `
БЛОК: Отзывы о нас БЛОК: Отзывы о нас
Источник: perm.oclinica.ru/lor — блок отзывов Источник: perm.oclinica.ru/lor — блок отзывов
Версия: v1.0 Версия: v1.1
СТРУКТУРА БЛОКА: СТРУКТУРА БЛОКА:
1. ЗАГОЛОВОК H2: «Отзывы о нас» 1. ЗАГОЛОВОК H2: «Отзывы о нас»
@@ -66,7 +66,7 @@ export default function ReviewsBlockPage() {
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}> <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
Блок «Отзывы о нас» Блок «Отзывы о нас»
</h1> </h1>
<BlockMetaBar path="/blocks/reviews" defaultVersion="v1.0" defaultIsInPreview={false} /> <BlockMetaBar path="/blocks/reviews" defaultVersion="v1.1" defaultIsInPreview={false} />
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}> <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
Карусель отзывов с perm.oclinica.ru/lor — большая кавычка, текст, «Читать полностью», стрелки. Карусель отзывов с perm.oclinica.ru/lor — большая кавычка, текст, «Читать полностью», стрелки.
</p> </p>
@@ -157,13 +157,26 @@ export default function ReviewsBlockPage() {
</div> </div>
</section> </section>
{/* Changelog */}
<section className="space-y-3">
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
История версий
</h2>
<div className="p-3 rounded-lg" style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}>
<p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>v1.1 — 24.03.2026</p>
<ul className="list-disc list-inside space-y-0.5 text-xs" style={{ color: "var(--bb-text-muted)" }}>
<li>H2: размер с ~20px на <strong>36px</strong>, цвет с #111827 на <strong>#000000</strong>, line-height 38px</li>
</ul>
</div>
</section>
{/* LLM блок */} {/* LLM блок */}
<LlmBlock path="/blocks/reviews" version="v1.0" specText={LLM_REVIEWS_TEXT}> <LlmBlock path="/blocks/reviews" version="v1.1" specText={LLM_REVIEWS_TEXT}>
<LlmSection title="Структура блока" /> <LlmSection title="Структура блока" />
<LlmTable <LlmTable
headers={["Элемент", "Содержимое", "Стиль"]} headers={["Элемент", "Содержимое", "Стиль"]}
rows={[ rows={[
["H2", "«Отзывы о нас»", "text-xl, font-bold, #111827"], ["H2", "«Отзывы о нас»", "36px, font-bold, #000000, line-height 38px"],
["Подзаголовок", "Описание достижений клиники за 12 лет", "14px, #374151"], ["Подзаголовок", "Описание достижений клиники за 12 лет", "14px, #374151"],
["Кавычка", "Декоративная «", "80–100px, #b8e6ed, font-serif"], ["Кавычка", "Декоративная «", "80–100px, #b8e6ed, font-serif"],
["Текст отзыва", "Полный текст отзыва пациента", "14px, italic, #374151"], ["Текст отзыва", "Полный текст отзыва пациента", "14px, italic, #374151"],
apps/web/app/foundation/typography/page.tsx
+3 -3
View File
@@ -421,9 +421,9 @@ export default function TypographyPage() {
</thead> </thead>
<tbody> <tbody>
{[ {[
["H1 страницы (над Hero)", "Fira Sans", "~28–30px", "700", "#bf9975", "ЛОР Клиника ухо, горло, нос…"], ["H1 страницы (над Hero)", "Fira Sans", "36px", "700", "#cb9768", "ЛОР Клиника ухо, горло, нос…"],
["H2 секции", "Fira Sans", "~30px", "700", "#111827", "Приём ведут опытные ЛОР врачи"], ["H2 секции", "Fira Sans", "36px", "700", "#000000", "Приём ведут опытные ЛОР врачи"],
["Заголовок Hero-баннера", "Fira Sans", "~18px", "700", "#111827", "ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ…"], ["Заголовок Hero-баннера", "Fira Sans", "22px", "700", "#333333", "ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ…"],
["Статистика (цифра+текст)", "Fira Sans", "~18px", "700", "#60959c", "Ежедневно 27 ЛОР врачей…"], ["Статистика (цифра+текст)", "Fira Sans", "~18px", "700", "#60959c", "Ежедневно 27 ЛОР врачей…"],
["Подзаголовок секции", "Fira Sans", "~14px", "400", "#374151", "Фундаментальная теоретическая…"], ["Подзаголовок секции", "Fira Sans", "~14px", "400", "#374151", "Фундаментальная теоретическая…"],
["Пункт checklist (ключ)", "Fira Sans", "13px", "700", "#111827", "БЕЗОПАСНО"], ["Пункт checklist (ключ)", "Fira Sans", "13px", "700", "#111827", "БЕЗОПАСНО"],
apps/web/components/blocks/ContactFormsBlock.tsx
+4 -4
View File
@@ -4,10 +4,10 @@ export function ContactFormsBlock() {
{/* Форма 1: Будьте здоровы */} {/* Форма 1: Будьте здоровы */}
<div <div
className="rounded-xl py-10 px-8 flex flex-col items-center gap-6" className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
style={{ background: "#b8e6ed" }} style={{ background: "#d4f6f8" }}
> >
<div className="text-center"> <div className="text-center">
<h2 className="text-2xl font-bold mb-1" style={{ color: "#111827" }}> <h2 className="font-bold mb-1" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
Будьте здоровы! Будьте здоровы!
</h2> </h2>
<p className="text-sm" style={{ color: "#374151" }}> <p className="text-sm" style={{ color: "#374151" }}>
@@ -45,10 +45,10 @@ export function ContactFormsBlock() {
{/* Форма 2: Узнайте стоимость */} {/* Форма 2: Узнайте стоимость */}
<div <div
className="rounded-xl py-10 px-8 flex flex-col items-center gap-6" className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
style={{ background: "#fff", border: "1px solid var(--bb-border)" }} style={{ background: "#d4f6f8" }}
> >
<div className="text-center"> <div className="text-center">
<h2 className="text-2xl font-bold mb-1" style={{ color: "#111827" }}> <h2 className="font-bold mb-1" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
Узнайте стоимость операции Узнайте стоимость операции
</h2> </h2>
<p className="text-sm" style={{ color: "#374151" }}> <p className="text-sm" style={{ color: "#374151" }}>
apps/web/components/blocks/DoctorsBlock.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export function DoctorsBlock() {
<div className="space-y-8"> <div className="space-y-8">
{/* Заголовок + описание */} {/* Заголовок + описание */}
<div> <div>
<h2 className="text-3xl font-bold mb-3" style={{ color: "#111827" }}> <h2 className="font-bold mb-3" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
Приём ведут опытные ЛОР врачи Приём ведут опытные ЛОР врачи
</h2> </h2>
<p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}> <p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
apps/web/components/blocks/HeroBlock.tsx
+6 -6
View File
@@ -9,10 +9,10 @@ export function HeroBlock() {
<div className="space-y-3"> <div className="space-y-3">
{/* H1 страницы */} {/* H1 страницы */}
<h2 <h2
className="text-xl font-bold leading-snug" className="font-bold"
style={{ color: "#53514e" }} style={{ color: "#cb9768", fontSize: 36, lineHeight: "51px" }}
> >
ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых ЛОР Клиника ухо, горло, нос - медицинский центр лечения ЛОР заболеваний у детей и взрослых
</h2> </h2>
{/* Баннер — единый светло-кремовый фон */} {/* Баннер — единый светло-кремовый фон */}
@@ -26,8 +26,8 @@ export function HeroBlock() {
style={{ width: "50%", flexShrink: 0 }} style={{ width: "50%", flexShrink: 0 }}
> >
<p <p
className="text-base font-bold uppercase leading-snug" className="font-bold uppercase leading-snug"
style={{ color: "#111827" }} style={{ color: "#333333", fontSize: 22 }}
> >
Эндоскопическое хирургическое лечение ЛОР органов Эндоскопическое хирургическое лечение ЛОР органов
</p> </p>
@@ -50,7 +50,7 @@ export function HeroBlock() {
))} ))}
</ul> </ul>
<div> <div>
<button className="bb-btn bb-btn-md bb-btn-outline"> <button className="bb-btn bb-btn-md bb-btn-pill">
Узнать стоимость операции Узнать стоимость операции
</button> </button>
</div> </div>
apps/web/components/blocks/NewsBlock.tsx
+2 -2
View File
@@ -25,9 +25,9 @@ export function NewsBlock() {
return ( return (
<div <div
className="rounded-xl p-8 space-y-6" className="rounded-xl p-8 space-y-6"
style={{ background: "#fff", border: "1px solid var(--bb-border)" }} style={{ background: "#f2fee6" }}
> >
<h2 className="text-xl font-bold" style={{ color: "#111827" }}> <h2 className="font-bold" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
Новости Новости
</h2> </h2>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
apps/web/components/blocks/ReviewsBlock.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export function ReviewsBlock() {
> >
{/* Заголовок */} {/* Заголовок */}
<div> <div>
<h2 className="text-xl font-bold mb-2" style={{ color: "#111827" }}> <h2 className="font-bold mb-2" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
Отзывы о нас Отзывы о нас
</h2> </h2>
<p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}> <p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
docs/LLM_CONTEXT.md
+9 -6
View File
@@ -2,9 +2,9 @@
## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой ## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
**Версия контекста:** 4.2 **Версия контекста:** 4.3
**Дата обновления:** 2026-03-23 **Дата обновления:** 2026-03-24
**Актуальный спринт:** Sprint 5 **Актуальный спринт:** Sprint 5.5
**Сайт клиники:** https://oclinica.ru **Сайт клиники:** https://oclinica.ru
**Брендбук (локально):** http://localhost:3001 **Брендбук (локально):** http://localhost:3001
**Брендбук (production):** https://web-oclinica.vercel.app **Брендбук (production):** https://web-oclinica.vercel.app
@@ -67,8 +67,9 @@
| Коралловый | `#ffa39c` | rgb(255,163,156) | Акценты | 2 | CTA-кнопки («Запишите меня!») | | Коралловый | `#ffa39c` | rgb(255,163,156) | Акценты | 2 | CTA-кнопки («Запишите меня!») |
| Основной текст | `#464646` | rgb(70,70,70) | Текст | 3 | Цвет основного текста на сайте | | Основной текст | `#464646` | rgb(70,70,70) | Текст | 3 | Цвет основного текста на сайте |
| Второстепенный текст | `#949290` | rgb(148,146,144) | Текст | 4 | Подписи, второстепенный контент | | Второстепенный текст | `#949290` | rgb(148,146,144) | Текст | 4 | Подписи, второстепенный контент |
| H1 страницы | `#cb9768` | rgb(203,151,104) | Текст | 1 | Цвет H1 на страницах разделов |
| Светло-кремовый Hero | `#f9f4e7` | rgb(249,244,231) | Фоны | 1 | Фон Hero-баннера страниц разделов | | Светло-кремовый 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 | Тёплые фоны кнопок-пилюль, вторичные секции | | Кремовый фон | `#e9e4d4` | rgb(233,228,212) | Фоны | 1 | Тёплые фоны кнопок-пилюль, вторичные секции |
| Светло-жёлтый фон | `#eef4d1` | rgb(238,244,209) | Фоны | 1 | Фон карточек отзывов | | Светло-жёлтый фон | `#eef4d1` | rgb(238,244,209) | Фоны | 1 | Фон карточек отзывов |
| Светло-зелёный фон | `#f2fee6` | rgb(242,254,230) | Фоны | 1 | Фон секции новостей | | Светло-зелёный фон | `#f2fee6` | rgb(242,254,230) | Фоны | 1 | Фон секции новостей |
@@ -290,8 +291,8 @@ SVG-версия ожидается (не получена от клиники).
| `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle | | `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle |
| `/components/cards` | ✅ Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты | | `/components/cards` | ✅ Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
| `/components/*` | 🔜 Sprint 4–5 | Модалки, таблицы, навигация | | `/components/*` | 🔜 Sprint 4–5 | Модалки, таблицы, навигация |
| `/blocks/hero` | ✅ Sprint 5 v1.1 | Hero-баннер: фон #f9f4e7, реальное фото врача, галочки #bf9975, кнопка outline | | `/blocks/hero` | ✅ Sprint 5.5 v1.2 | Hero-баннер: H1 36px #cb9768, заголовок 22px #333, кнопка pill, фон #f9f4e7 |
| `/blocks/doctors` | ✅ Sprint 5 v1.1 | Врачи: H2 30px, статистика #60959c без фона, 6 реальных фото | | `/blocks/doctors` | ✅ Sprint 5.5 v1.2 | Врачи: H2 36px #000, статистика #60959c без фона, 6 реальных фото |
| `/blocks/*` | 🔜 Sprint 5 | Отзывы, формы, новости, footer | | `/blocks/*` | 🔜 Sprint 5 | Отзывы, формы, новости, footer |
| `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты | | `/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-блок на логотипе | | 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.0 | 2026-03-22 | Sprint 4 start: исправлены цвета Oracal (точные RGB из каталога), кнопки/формы по реальному сайту |
| 4.1 | 2026-03-22 | Sprint 4 done: карточки (DoctorCard/NewsCard/ReviewCard/PriceCard/ServiceCard), бейджи/теги/алерты | | 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) |
--- ---
docs/SPRINTS.md
+23 -7
View File
@@ -194,6 +194,7 @@
- [x] FE: Баннер — единый фон #f9f4e7 (светло-кремовый, замерян пикселем), галочки #bf9975 - [x] FE: Баннер — единый фон #f9f4e7 (светло-кремовый, замерян пикселем), галочки #bf9975
- [x] FE: Правая часть: реальное фото врача с пациентом (спарсено с сайта → public/hero-doctor.jpg) - [x] FE: Правая часть: реальное фото врача с пациентом (спарсено с сайта → public/hero-doctor.jpg)
- [x] LLM: v1.1 — исправлен цвет фона, кнопка outline, галочки бежевые - [x] LLM: v1.1 — исправлен цвет фона, кнопка outline, галочки бежевые
- [x] FE: v1.2 — H1: 36px/#cb9768, заголовок баннера: 22px/#333, CTA: pill-стиль, дефис в H1
**Вводный текст (CEO-блок)** → `/blocks/ceo` **Вводный текст (CEO-блок)** → `/blocks/ceo`
- [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы - [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы
@@ -203,16 +204,20 @@
- [x] FE: Реальные фото 6 врачей (спарсены с сайта → public/doctors/) - [x] FE: Реальные фото 6 врачей (спарсены с сайта → public/doctors/)
- [x] FE: Реальные имена и специализации врачей из слайдера /lor - [x] FE: Реальные имена и специализации врачей из слайдера /lor
- [x] LLM: v1.1 - [x] LLM: v1.1
- [x] FE: v1.2 — H2: 36px/#000000, line-height 38px
**Блок отзывов** → `/blocks/reviews` **Блок отзывов** → `/blocks/reviews`
- [ ] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки - [x] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки
- [x] FE: v1.1 — H2: 36px/#000000, line-height 38px
**Формы записи** → `/blocks/contact-forms` **Формы записи** → `/blocks/contact-forms`
- [ ] FE: Форма «Будьте здоровы!» (фон #b8e6ed, поля: имя/телефон/врач, кнопка «Запишите меня!») - [x] FE: Форма «Будьте здоровы!» (фон #d4f6f8, поля: имя/телефон/врач, кнопка «Запишите меня!»)
- [ ] FE: Форма «Узнайте стоимость операции» (белый фон, поля: имя/телефон, кнопка «Перезвоните мне») - [x] FE: Форма «Узнайте стоимость операции» (фон #d4f6f8, поля: имя/телефон, кнопка «Перезвоните мне»)
- [x] FE: v1.1 — H2: 36px/#000000, фон обеих форм: #d4f6f8 (ранее #b8e6ed и #fff)
**Блок новостей** → `/blocks/news` **Блок новостей** → `/blocks/news`
- [ ] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock) - [x] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock)
- [x] FE: v1.1 — H2: 36px/#000000, фон секции: #f2fee6 (ранее белый)
**Footer (подвал)** → `/blocks/contact` **Footer (подвал)** → `/blocks/contact`
- [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы - [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы
@@ -222,10 +227,21 @@
- [x] Docs: Типографика сайта — реальные стили на 23.03.2026 (новый раздел в /foundation/typography) - [x] Docs: Типографика сайта — реальные стили на 23.03.2026 (новый раздел в /foundation/typography)
- [x] Docs: Цвета — исправлен #f9f4e7 (Hero), #b8e6ed (форма), #e9e4d4 (пилюли) - [x] Docs: Цвета — исправлен #f9f4e7 (Hero), #b8e6ed (форма), #e9e4d4 (пилюли)
- [ ] FE: Убрать `soon` у Hero и Doctors в Sidebar - [ ] FE: Убрать `soon` у Hero и Doctors в Sidebar
- [ ] FE: CEO-блок, отзывы, формы, новости, footer - [ ] FE: CEO-блок
- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md` по итогам Sprint 5 - [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 + Doctors задокументированы с реальными фото и точными цветами. **Результат спринта:** Hero v1.2, Doctors v1.2, Reviews v1.1, ContactForms v1.1, News v1.1 — все стили синхронизированы с реальным сайтом.
--- ---