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

feat(sprint-5): hero #f9f4e7, doctors real photos + typography site section

Browse Source 
- Hero banner: bg #f9f4e7 (pixel-sampled), checks #bf9975, outline btn, real doctor photo
- Doctors: H2 text-3xl, stats #60959c no-bg border-bottom, 6 real photos from site
- Colors: add #f9f4e7 (Hero), fix #b8e6ed (form), #e9e4d4 (pill buttons)
- Typography: add «site state 23.03.2026» table (real font sizes/colors by block)
- Docs: SPRINTS.md Sprint 5 progress, LLM_CONTEXT.md v4.2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
2026-03-23 16:00:35 +05:00
parent d4d86e6343
commit 60619114a5
13 changed files with 238 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/blocks/doctors/page.tsx
+82 -69
View File
@@ -11,13 +11,37 @@ const STATS = [
{ num: "12 000+", label: "успешно проведённых операций", prefix: "Свыше" }, { num: "12 000+", label: "успешно проведённых операций", prefix: "Свыше" },
]; ];
const MOCK_DOCTORS = [ const DOCTORS = [
{ name: "Макарова Людмила Тимофеевна", spec: "ЛОР врач, сурдолог" }, {
{ name: "Тимофеева Наталья Александровна", spec: "ЛОР врач, мед. Завед. центром сурдологии и а..." }, name: "Макарова Людмила Германовна",
{ name: "Воронникова Наталья Валентиновна", spec: "Отоларинголог, ЛОР-хирург" }, spec: "ЛОР врач, сурдолог",
{ name: "Лобанова Ирина Юрьевна", spec: "ЛОР врач, сурдолог" }, photo: "/doctors/makarova.jpg",
{ name: "Тарасова Наталья Сергеевна", spec: "Специалист по сурдопротезированию (Сурдолог)" }, },
{ name: "Сильянова Светлана Викторовна", spec: "ЛОР врач, сурдолог" }, {
name: "Семерикова Наталия Александровна",
spec: "ЛОР врач, сурдолог, хирург. К.М.Н. Завед. Центром сурдологии",
photo: "/doctors/semerikova.png",
},
{
name: "Ворончихина Наталия Валерьевна",
spec: "Отоневролог, хирург. К.М.Н., доцент кафедры ПГМУ",
photo: "/doctors/voronchikhina.png",
},
{
name: "Лобанова Ирина Юрьевна",
spec: "ЛОР врач, сурдолог",
photo: "/doctors/lobanova.jpg",
},
{
name: "Торсунова Наталья Сергеевна",
spec: "Специалист по слухопротезированию (сурдоакустик)",
photo: "/doctors/torsunova.jpg",
},
{
name: "Суворова Светлана Викторовна",
spec: "ЛОР врач, сурдолог",
photo: "/doctors/suvorova.jpg",
},
]; ];
const LLM_DOCTORS_TEXT = ` const LLM_DOCTORS_TEXT = `
@@ -30,24 +54,24 @@ const LLM_DOCTORS_TEXT = `
Подзаголовок: описание принципа работы врачей клиники Подзаголовок: описание принципа работы врачей клиники
2. БЛОК СТАТИСТИКИ (3 показателя в ряд): 2. БЛОК СТАТИСТИКИ (3 показателя в ряд):
— «Ежедневно 27 ЛОР врачей работает в клинике» — «Ежедневно 27 ЛОР врачей работают в клинике»
— «В том числе 6 кандидатов медицинских наук» — «В том числе 6 кандидатов медицинских наук»
— «Свыше 12 000 успешно проведённых операций» — «Свыше 12 000 успешно проведённых операций»
Стиль: число крупное (20px+, bold), текст мелкий (#6b7280), фон #dff0fa Стиль: весь текст #60959c, bold, ~18px. Фона НЕТ. Снизу border-bottom 3px solid #60959c
3. СЕТКА КАРТОЧЕК ВРАЧЕЙ (6 штук, 3 в ряд): 3. СЕТКА КАРТОЧЕК ВРАЧЕЙ (6 штук, 6 в ряд):
Каждая карточка: Каждая карточка:
— Фото врача (110×160px или больше, object-fit: cover) — Фото врача 110×150px, object-fit: cover, object-position: center top, border-radius 4px
— Имя (14px, font-weight 500) — Имя (12px, font-weight 500, цвет #60959c)
— Специализация (12px, #6b7280) — Специализация (11px, #374151)
Карточки без рамки, простой вертикальный стек Карточки без рамки, gap минимальный
ЦВЕТА: ЦВЕТА:
Заголовок H2: #111827 Заголовок H2: #111827, ~30px (text-3xl)
Блок статистики фон: #dff0fa (светло-синий) Статистика текст: #60959c (серо-бирюзовый)
Число в статистике: #0089c3 (--brand-053m) Статистика черта: border-bottom 3px solid #60959c
Имя врача: #111827 Имя врача: #60959c
Специализация: #6b7280 Специализация: #374151
ПРАВИЛА: ПРАВИЛА:
✓ Заголовок H2 + описание обязательны ✓ Заголовок H2 + описание обязательны
@@ -87,63 +111,53 @@ export default function DoctorsBlockPage() {
> >
{/* Заголовок */} {/* Заголовок */}
<div> <div>
<h2 className="text-xl font-bold mb-2" style={{ color: "#111827" }}> <h2 className="text-3xl font-bold mb-3" style={{ color: "#111827" }}>
Приём ведут опытные ЛОР врачи Приём ведут опытные ЛОР врачи
</h2> </h2>
<p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}> <p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
Фундаментальная теоретическая подготовка и большой практический опыт в сочетании Фундаментальная теоретическая подготовка и большой практический опыт в сочетании
с внимательным индивидуальным подходом является причиной лечения тысяч наших пациентов. с внимательным индивидуальным подходом являются причиной успеха лечения тысяч наших пациентов
</p> </p>
</div> </div>
{/* Статистика */} {/* Статистика — текст тёмно-бирюзовым, без фоновых блоков */}
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-6">
{STATS.map((s) => ( {STATS.map((s) => (
<div <div key={s.num} className="pb-3" style={{ borderBottom: "3px solid #60959c" }}>
key={s.num} <p className="text-lg font-bold leading-snug" style={{ color: "#60959c" }}>
className="rounded-xl p-4 text-center" {s.prefix} {s.num} {s.label}
style={{ background: "#dff0fa" }}
>
<p className="text-xs mb-1" style={{ color: "#6b7280" }}>
{s.prefix}
</p>
<p className="text-2xl font-bold mb-1" style={{ color: "#0089c3" }}>
{s.num}
</p>
<p className="text-xs leading-snug" style={{ color: "#374151" }}>
{s.label}
</p> </p>
</div> </div>
))} ))}
</div> </div>
{/* Сетка врачей */} {/* Сетка врачей — плотнее, имена тёмно-бирюзовым */}
<div className="grid grid-cols-3 md:grid-cols-6 gap-4"> <div className="grid grid-cols-6 gap-3">
{MOCK_DOCTORS.map((doc) => ( {DOCTORS.map((doc) => (
<div key={doc.name} className="flex flex-col items-center text-center gap-2"> <div key={doc.name} className="flex flex-col items-center text-center gap-1.5">
{/* Фото-заглушка */} {/* eslint-disable-next-line @next/next/no-img-element */}
<div <img
className="rounded-lg flex items-center justify-center text-3xl" src={doc.photo}
alt={doc.name}
style={{ style={{
width: 88, width: 110,
height: 120, height: 150,
background: "#f3f4f6", objectFit: "cover",
border: "1px solid #e5e7eb", objectPosition: "center top",
flexShrink: 0, borderRadius: 4,
display: "block",
}} }}
> />
👩‍⚕️
</div>
<div> <div>
<p <p
className="text-xs font-medium leading-snug" className="text-xs font-medium leading-snug"
style={{ color: "#111827" }} style={{ color: "#60959c" }}
> >
{doc.name} {doc.name}
</p> </p>
<p <p
className="text-[11px] mt-0.5 leading-snug" className="text-[11px] mt-0.5 leading-snug"
style={{ color: "#6b7280" }} style={{ color: "#374151" }}
> >
{doc.spec} {doc.spec}
</p> </p>
@@ -159,24 +173,18 @@ export default function DoctorsBlockPage() {
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}> <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
Блок статистики Блок статистики
</h2> </h2>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-6">
{STATS.map((s) => ( {STATS.map((s) => (
<div <div
key={s.num} key={s.num}
className="rounded-xl p-4 space-y-1" className="pb-3 space-y-1"
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }} style={{ borderBottom: "3px solid #60959c" }}
> >
<p className="text-[11px]" style={{ color: "var(--bb-text-muted)" }}> <p className="text-base font-bold leading-snug" style={{ color: "#60959c" }}>
{s.prefix} {s.prefix} {s.num} {s.label}
</p>
<p className="text-2xl font-bold" style={{ color: "var(--brand-053m)" }}>
{s.num}
</p>
<p className="text-xs leading-snug" style={{ color: "var(--bb-text)" }}>
{s.label}
</p> </p>
<p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}> <p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
фон: #dff0fa · число: #0089c3 цвет текста: #60959c · черта: 3px solid #60959c
</p> </p>
</div> </div>
))} ))}
@@ -184,15 +192,15 @@ export default function DoctorsBlockPage() {
</section> </section>
{/* LLM блок */} {/* LLM блок */}
<LlmBlock path="/blocks/doctors" version="v1.0" specText={LLM_DOCTORS_TEXT}> <LlmBlock path="/blocks/doctors" version="v1.1" specText={LLM_DOCTORS_TEXT}>
<LlmSection title="Структура блока" /> <LlmSection title="Структура блока" />
<LlmTable <LlmTable
headers={["Элемент", "Содержимое", "Стиль"]} headers={["Элемент", "Содержимое", "Стиль"]}
rows={[ rows={[
["H2", "«Приём ведут опытные ЛОР врачи»", "text-xl, font-bold, #111827"], ["H2", "«Приём ведут опытные ЛОР врачи»", "~30px (text-3xl), font-bold, #111827"],
["Подзаголовок", "Описание принципа работы", "14px, #374151, line-height 1.7"], ["Подзаголовок", "Описание принципа работы", "14px, #374151, line-height 1.7"],
["Статистика", "3 блока в ряд", "фон #dff0fa, число #0089c3, bold"], ["Статистика", "3 блока в ряд, без фона", "#60959c bold + border-bottom 3px solid #60959c"],
["Сетка врачей", "6 карточек, 3 колонки × 2 ряда", "фото + имя + специализация"], ["Сетка врачей", "6 карточек в 1 ряд", "фото 110×150px + имя #60959c + специализация #374151"],
]} ]}
/> />
<LlmSection title="Три показателя" /> <LlmSection title="Три показателя" />
@@ -200,6 +208,11 @@ export default function DoctorsBlockPage() {
headers={["Число", "Описание"]} headers={["Число", "Описание"]}
rows={STATS.map((s) => [`${s.prefix} ${s.num}`, s.label])} rows={STATS.map((s) => [`${s.prefix} ${s.num}`, s.label])}
/> />
<LlmSection title="6 врачей слайдера (perm.oclinica.ru/lor)" />
<LlmTable
headers={["Имя", "Специализация"]}
rows={DOCTORS.map((d) => [d.name, d.spec])}
/>
<LlmSection title="Карточка врача" /> <LlmSection title="Карточка врача" />
<LlmTable <LlmTable
headers={["Поле", "Размер / Стиль"]} headers={["Поле", "Размер / Стиль"]}
apps/web/app/blocks/hero/page.tsx
+69 -87
View File
@@ -8,24 +8,24 @@ export const metadata: Metadata = {
const LLM_HERO_TEXT = ` const LLM_HERO_TEXT = `
БЛОК: Hero-баннер (главный баннер страницы) БЛОК: Hero-баннер (главный баннер страницы)
Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
Версия: v1.0 Версия: v1.1
ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером): ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
«ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых» «ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых»
Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m) Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m)
СТРУКТУРА БАННЕРА (двухколоночная, фон: #b8e6ed): СТРУКТУРА БАННЕРА (двухколоночная, единый фон #f9f4e7):
Левая колонка (~50%, белый блок): Левая колонка (~50%):
— Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ» — Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827 Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827
— 3 пункта с галочками (✓ зелёный): — 3 пункта с галочками (✓ зелёный):
1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы» 1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия смяткими размерами» 2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров»
3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки» 3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
Ключевое слово: uppercase bold; описание: обычный текст, ~13px Ключевое слово: uppercase bold; описание: обычный текст, ~13px
— Кнопка «Узнать стоимость операции» — стиль: bb-btn-primary (#FFA39C) — Кнопка «Узнать стоимость операции» — стиль: bb-btn-outline (светлая, без заливки)
Правая колонка (~50%): Правая колонка (~50%):
— Фото врача с пациентом, фон #b8e6ed — Фото врача с пациентом
— Изображение занимает всю высоту блока — Изображение занимает всю высоту блока
ПОД БАННЕРОМ: ПОД БАННЕРОМ:
@@ -33,18 +33,19 @@ const LLM_HERO_TEXT = `
— Счётчик просмотров — Счётчик просмотров
ЦВЕТА: ЦВЕТА:
Фон баннера: #b8e6ed (светло-бирюзовый) Фон баннера: #f9f4e7 (светло-кремовый, единый для всего блока)
Левый блок: #ffffff Кнопка CTA: outline-стиль (светлая), не коралловая
Кнопка CTA: #FFA39C (--bb-btn-primary) Заголовок блока: #111827
Заголовок: #111827 Пункты: ключевое слово #111827 bold, описание #374151
Пункты: ключ #111827 bold, описание #374151 Галочка: цвет бренда (бежевый/золотой ~#bf9975)
ПРАВИЛА: ПРАВИЛА:
✓ Фон баннера всегда #b8e6ed ✓ Фон баннера всегда #f9f4e7 (светло-кремовый) — единый, без разделения на зоны
✓ Кнопка CTA — всегда primary (#FFA39C)
✓ Заголовок блока uppercase, жирный ✓ Заголовок блока uppercase, жирный
✓ Три пункта с галочками обязательны
✕ Не менять фон баннера на другой цвет ✕ Не менять фон баннера на другой цвет
✕ Не убирать все 3 пункта с галочками ✕ Не разбивать фон на два разных цвета
✕ Не убирать три пункта с галочками
`.trim(); `.trim();
const HERO_CHECKS = [ const HERO_CHECKS = [
@@ -77,7 +78,7 @@ export default function HeroPage() {
Hero-баннер Hero-баннер
</h1> </h1>
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}> <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок с фоном #b8e6ed. Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон <strong>#f9f4e7</strong>.
</p> </p>
</div> </div>
@@ -95,15 +96,15 @@ export default function HeroPage() {
ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых
</h2> </h2>
{/* Баннер */} {/* Баннер — единый светло-кремовый фон */}
<div <div
className="rounded-xl overflow-hidden flex" className="rounded-xl overflow-hidden flex"
style={{ background: "#b8e6ed", minHeight: 280, border: "1px solid var(--bb-border)" }} style={{ background: "#f9f4e7", minHeight: 280 }}
> >
{/* Левая часть — белый блок */} {/* Левая часть — контент на кремовом фоне */}
<div <div
className="flex flex-col justify-center gap-5 p-8" className="flex flex-col justify-center gap-5 p-8"
style={{ background: "#fff", minWidth: "48%", maxWidth: "52%" }} style={{ width: "50%", flexShrink: 0 }}
> >
<p <p
className="text-base font-bold uppercase leading-snug" className="text-base font-bold uppercase leading-snug"
@@ -116,7 +117,7 @@ export default function HeroPage() {
<li key={c.key} className="flex items-start gap-2 text-sm"> <li key={c.key} className="flex items-start gap-2 text-sm">
<span <span
className="shrink-0 font-bold" className="shrink-0 font-bold"
style={{ color: "#22c55e", marginTop: 1 }} style={{ color: "#bf9975", marginTop: 1 }}
> >
✓ ✓
</span> </span>
@@ -130,31 +131,30 @@ export default function HeroPage() {
))} ))}
</ul> </ul>
<div> <div>
<button className="bb-btn bb-btn-md bb-btn-primary"> <button className="bb-btn bb-btn-md bb-btn-outline">
Узнать стоимость операции Узнать стоимость операции
</button> </button>
</div> </div>
</div> </div>
{/* Правая часть — фото-заглушка */} {/* Правая часть — фото врача */}
<div <div
className="flex-1 flex items-center justify-center" className="flex-1 relative overflow-hidden"
style={{ background: "#b8e6ed" }} style={{ minHeight: 280 }}
> >
<div className="text-center space-y-2"> {/* eslint-disable-next-line @next/next/no-img-element */}
<div <img
className="w-20 h-20 rounded-full mx-auto flex items-center justify-center text-3xl" src="/hero-doctor.jpg"
style={{ background: "rgba(255,255,255,0.4)" }} alt="Врач на приёме с пациентом"
> style={{
👨‍⚕️ width: "100%",
</div> height: "100%",
<p className="text-xs font-medium" style={{ color: "#0089c3" }}> objectFit: "cover",
Фото врача с пациентом objectPosition: "center top",
</p> position: "absolute",
<p className="text-[10px]" style={{ color: "#53514e" }}> inset: 0,
Фон: #b8e6ed }}
</p> />
</div>
</div> </div>
</div> </div>
@@ -187,45 +187,26 @@ export default function HeroPage() {
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}> <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
Анатомия баннера Анатомия баннера
</h2> </h2>
<div className="grid grid-cols-2 gap-4"> <div
{[ className="rounded-xl p-5 space-y-2"
{ style={{ background: "#f5f0e8", border: "1px solid #d5cfbd" }}
zone: "Левый блок (белый)", >
bg: "#f8fafc", <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
items: [ Весь баннер — единый фон <span className="font-mono">#f9f4e7</span>
"Заголовок uppercase bold", </p>
"3 пункта с галочками ✓", <ul className="space-y-1">
"Кнопка bb-btn-primary", {[
], "Фон: #f9f4e7 (светло-кремовый) — одинаковый для всего блока",
}, "Левая половина (~50%): заголовок uppercase bold + 3 галочки + кнопка outline",
{ "Правая половина (~50%): фото врача с пациентом",
zone: "Правый блок (#b8e6ed)", "Минимальная высота: ~280px",
bg: "#f0fdfa", ].map((item) => (
items: [ <li key={item} className="text-xs flex items-start gap-1.5">
"Фото врача с пациентом", <span style={{ color: "var(--brand-053m)" }}>·</span>
"Фон: #b8e6ed (светло-бирюзовый)", <span style={{ color: "var(--bb-text-muted)" }}>{item}</span>
"Занимает всю высоту блока", </li>
], ))}
}, </ul>
].map((z) => (
<div
key={z.zone}
className="rounded-xl p-4 space-y-2"
style={{ background: z.bg, border: "1px solid var(--bb-border)" }}
>
<p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
{z.zone}
</p>
<ul className="space-y-1">
{z.items.map((item) => (
<li key={item} className="text-xs flex items-start gap-1.5">
<span style={{ color: "var(--brand-053m)" }}>·</span>
<span style={{ color: "var(--bb-text-muted)" }}>{item}</span>
</li>
))}
</ul>
</div>
))}
</div> </div>
</section> </section>
@@ -261,13 +242,14 @@ export default function HeroPage() {
</section> </section>
{/* LLM блок */} {/* LLM блок */}
<LlmBlock path="/blocks/hero" version="v1.0" specText={LLM_HERO_TEXT}> <LlmBlock path="/blocks/hero" version="v1.1" specText={LLM_HERO_TEXT}>
<LlmSection title="Структура баннера" /> <LlmSection title="Структура баннера" />
<LlmTable <LlmTable
headers={["Зона", "Ширина", "Фон", "Содержимое"]} headers={["Зона", "Ширина", "Фон", "Содержимое"]}
rows={[ rows={[
["Левый блок", "~50%", "#ffffff", "Заголовок uppercase + 3 галочки + кнопка bb-btn-primary"], ["Весь баннер", "100%", "#f9f4e7", "Единый светло-кремовый фон"],
["Правый блок", "~50%", "#b8e6ed", "Фото врача с пациентом"], ["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка outline"],
["Правый блок", "~50%", "#f9f4e7 (общий)", "Фото врача с пациентом"],
["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"], ["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
]} ]}
/> />
@@ -280,21 +262,21 @@ export default function HeroPage() {
<LlmTable <LlmTable
headers={["Элемент", "Цвет", "Токен"]} headers={["Элемент", "Цвет", "Токен"]}
rows={[ rows={[
["Фон баннера", "#b8e6ed", "—"], ["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"],
["Левый блок", "#ffffff", "—"], ["Кнопка CTA", "outline-стиль", "bb-btn-outline"],
["Кнопка CTA", "#FFA39C", "bb-btn-primary"],
["Заголовок блока", "#111827", "—"], ["Заголовок блока", "#111827", "—"],
["Галочка", "#22c55e", "—"], ["Галочка ✓", "#bf9975", "Бежевый (--brand-081m approx.)"],
]} ]}
/> />
<LlmSection title="Правила" /> <LlmSection title="Правила" />
<LlmRules <LlmRules
rules={[ rules={[
{ ok: true, text: "Фон баннера: #b8e6ed (светло-бирюзовый)" }, { ok: true, text: "Фон баннера: #f9f4e7 (светло-кремовый) — единый для всего блока" },
{ ok: true, text: "Кнопка CTA: bb-btn-primary (#FFA39C)" }, { ok: true, text: "Кнопка CTA: bb-btn-outline (светлая)" },
{ ok: true, text: "Заголовок: uppercase, bold" }, { ok: true, text: "Заголовок: uppercase, bold" },
{ ok: true, text: "Три пункта с галочками ✓ (#22c55e)" }, { ok: true, text: "Три пункта с галочками ✓ (#bf9975)" },
{ ok: false, text: "Не менять фон баннера на другой цвет" }, { ok: false, text: "Не менять фон баннера на другой цвет" },
{ ok: false, text: "Не разбивать баннер на два разных цвета фона" },
{ ok: false, text: "Не убирать три пункта с галочками" }, { ok: false, text: "Не убирать три пункта с галочками" },
]} ]}
/> />
apps/web/app/foundation/colors/page.tsx
+12 -5
View File
@@ -145,10 +145,15 @@ const COLOR_MAPPING = [
web: { name: "Второстепенный текст", hex: "#949290", count: 4 }, web: { name: "Второстепенный текст", hex: "#949290", count: 4 },
note: "Только на сайте — нет Oracal-аналога", note: "Только на сайте — нет Oracal-аналога",
}, },
{
brand: null,
web: { name: "Светло-кремовый фон (Hero)", hex: "#f9f4e7", count: 1 },
note: "Только на сайте — фон Hero-баннера страниц разделов. Нет Oracal-аналога",
},
{ {
brand: null, brand: null,
web: { name: "Кремовый фон", hex: "#e9e4d4", count: 1 }, web: { name: "Кремовый фон", hex: "#e9e4d4", count: 1 },
note: "Только на сайте — нет Oracal-аналога", note: "Только на сайте — тёплые фоны кнопок-пилюль, вторичные секции. Нет Oracal-аналога",
}, },
{ {
brand: null, brand: null,
@@ -177,8 +182,9 @@ const WEB_COLORS = [
{ name: "Бирюзовый средний", hex: "#52b4bd", usage: "Вторичные цветовые акценты", count: 4, group: "Акценты" }, { name: "Бирюзовый средний", hex: "#52b4bd", usage: "Вторичные цветовые акценты", count: 4, group: "Акценты" },
{ name: "Основной текст", hex: "#464646", usage: "Цвет основного текста на сайте", count: 3, group: "Текст" }, { name: "Основной текст", hex: "#464646", usage: "Цвет основного текста на сайте", count: 3, group: "Текст" },
{ name: "Второстепенный текст", hex: "#949290", usage: "Подписи, второстепенный контент", count: 4, group: "Текст" }, { name: "Второстепенный текст", hex: "#949290", usage: "Подписи, второстепенный контент", count: 4, group: "Текст" },
{ name: "Светло-бирюзовый фон", hex: "#b8e6ed", usage: "Фоны светлых секций с акцентом", count: 1, group: "Фоны" }, { name: "Светло-бирюзовый фон", hex: "#b8e6ed", usage: "Фон формы записи («Будьте здоровы!»)", count: 1, group: "Фоны" },
{ name: "Кремовый фон", hex: "#e9e4d4", usage: "Тёплые фоны секций", count: 1, group: "Фоны" }, { name: "Светло-кремовый фон (Hero)", hex: "#f9f4e7", usage: "Фон Hero-баннера страниц разделов", count: 1, group: "Фоны" },
{ name: "Кремовый фон", hex: "#e9e4d4", usage: "Тёплые фоны кнопок-пилюль, вторичные секции", count: 1, group: "Фоны" },
{ name: "Коралловый", hex: "#ffa39c", usage: "CTA-кнопки («Запишите меня!»), акцентные призывы к действию", count: 2, group: "Акценты" }, { name: "Коралловый", hex: "#ffa39c", usage: "CTA-кнопки («Запишите меня!»), акцентные призывы к действию", count: 2, group: "Акценты" },
{ name: "Светло-жёлтый фон", hex: "#eef4d1", usage: "Фон карточек отзывов (секция «Отзывы о нас»)", count: 1, group: "Фоны" }, { name: "Светло-жёлтый фон", hex: "#eef4d1", usage: "Фон карточек отзывов (секция «Отзывы о нас»)", count: 1, group: "Фоны" },
{ name: "Светло-зелёный фон", hex: "#f2fee6", usage: "Фон секции новостей", count: 1, group: "Фоны" }, { name: "Светло-зелёный фон", hex: "#f2fee6", usage: "Фон секции новостей", count: 1, group: "Фоны" },
@@ -424,8 +430,9 @@ Oracal | Название | HEX | RGB | CSS-пер
Коралловый | #FFA39C | Акценты | 2 | CTA-кнопки («Запишите меня!») Коралловый | #FFA39C | Акценты | 2 | CTA-кнопки («Запишите меня!»)
Основной текст | #464646 | Текст | 3 | Цвет основного текста сайта Основной текст | #464646 | Текст | 3 | Цвет основного текста сайта
Второстепенный текст | #949290 | Текст | 4 | Подписи, второстепенный контент Второстепенный текст | #949290 | Текст | 4 | Подписи, второстепенный контент
Светло-бирюзовый фон | #B8E6ED | Фоны | 1 | Фоны светлых секций Светло-кремовый Hero | #F9F4E7 | Фоны | 1 | Фон Hero-баннера страниц разделов
Кремовый фон | #E9E4D4 | Фоны | 1 | Тёплые фоны секций Светло-бирюзовый фон | #B8E6ED | Фоны | 1 | Фон формы записи («Будьте здоровы!»)
Кремовый фон | #E9E4D4 | Фоны | 1 | Тёплые фоны кнопок-пилюль, вторичные секции
Светло-жёлтый фон | #EEF4D1 | Фоны | 1 | Фон карточек отзывов Светло-жёлтый фон | #EEF4D1 | Фоны | 1 | Фон карточек отзывов
Светло-зелёный фон | #F2FEE6 | Фоны | 1 | Фон секции новостей Светло-зелёный фон | #F2FEE6 | Фоны | 1 | Фон секции новостей
apps/web/app/foundation/typography/page.tsx
+52
View File
@@ -399,6 +399,58 @@ export default function TypographyPage() {
</div> </div>
</Section> </Section>
{/* Типографика сайта — фактическое состояние 23.03.2026 */}
<Section
title="Типографика сайта — факт на 23.03.2026"
subtitle="Реальные размеры и стили, задокументированные по perm.oclinica.ru/lor. Источник: скриншот + CSS темы clinic_bootstrap_mobile."
>
<div
className="overflow-hidden rounded-xl border"
style={{ borderColor: "var(--bb-border)" }}
>
<table className="w-full text-sm">
<thead>
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
{["Элемент / блок", "Шрифт", "Размер", "Weight", "Цвет", "Пример"].map(h => (
<th key={h} className="text-left px-4 py-3 font-medium text-xs"
style={{ color: "var(--bb-text-muted)" }}>
{h}
</th>
))}
</tr>
</thead>
<tbody>
{[
["H1 страницы (над Hero)", "Fira Sans", "~28–30px", "700", "#bf9975", "ЛОР Клиника ухо, горло, нос…"],
["H2 секции", "Fira Sans", "~30px", "700", "#111827", "Приём ведут опытные ЛОР врачи"],
["Заголовок Hero-баннера", "Fira Sans", "~18px", "700", "#111827", "ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ…"],
["Статистика (цифра+текст)", "Fira Sans", "~18px", "700", "#60959c", "Ежедневно 27 ЛОР врачей…"],
["Подзаголовок секции", "Fira Sans", "~14px", "400", "#374151", "Фундаментальная теоретическая…"],
["Пункт checklist (ключ)", "Fira Sans", "13px", "700", "#111827", "БЕЗОПАСНО"],
["Пункт checklist (описание)", "Fira Sans", "13px", "400", "#374151", "оперируют хирурги с 15-летним…"],
["Имя врача в карточке", "Fira Sans", "12px", "500", "#60959c", "Макарова Людмила Германовна"],
["Специализация врача", "Fira Sans", "11px", "400", "#374151", "ЛОР врач, сурдолог"],
].map(([el, font, size, w, color, example]) => (
<tr key={el} className="border-t" style={{ borderColor: "var(--bb-border)" }}>
<td className="px-4 py-3 font-medium text-xs" style={{ color: "var(--bb-text)" }}>{el}</td>
<td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--brand-073m)" }}>{font}</td>
<td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--bb-text)" }}>{size}</td>
<td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>{w}</td>
<td className="px-4 py-3">
<span className="flex items-center gap-1.5">
<span className="w-3 h-3 rounded-sm inline-block border shrink-0"
style={{ background: color, borderColor: "var(--bb-border)" }} />
<span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>{color}</span>
</span>
</td>
<td className="px-4 py-3 text-xs" style={{ color: "var(--bb-text-muted)" }}>{example}</td>
</tr>
))}
</tbody>
</table>
</div>
</Section>
{/* LLM-спецификация */} {/* LLM-спецификация */}
<section className="mb-8"> <section className="mb-8">
<div className="mb-6"> <div className="mb-6">
apps/web/public/doctors/lobanova.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

apps/web/public/doctors/makarova.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

apps/web/public/doctors/semerikova.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

apps/web/public/doctors/suvorova.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

apps/web/public/doctors/torsunova.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

apps/web/public/doctors/voronchikhina.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

apps/web/public/hero-doctor.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 762 KiB

docs/LLM_CONTEXT.md
+9 -6
View File
@@ -2,8 +2,8 @@
## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой ## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
**Версия контекста:** 4.1 **Версия контекста:** 4.2
**Дата обновления:** 2026-03-22 **Дата обновления:** 2026-03-23
**Актуальный спринт:** Sprint 5 **Актуальный спринт:** Sprint 5
**Сайт клиники:** https://oclinica.ru **Сайт клиники:** https://oclinica.ru
**Брендбук (локально):** http://localhost:3001 **Брендбук (локально):** http://localhost:3001
@@ -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 | Подписи, второстепенный контент |
| Светло-бирюзовый фон | `#b8e6ed` | rgb(184,230,237) | Фоны | 1 | Фоны светлых секций с акцентом | | Светло-кремовый Hero | `#f9f4e7` | rgb(249,244,231) | Фоны | 1 | Фон Hero-баннера страниц разделов |
| Кремовый фон | `#e9e4d4` | rgb(233,228,212) | Фоны | 1 | Тёплые фоны секций | | Светло-бирюзовый фон | `#b8e6ed` | rgb(184,230,237) | Фоны | 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 | Фон секции новостей |
@@ -287,9 +288,11 @@ SVG-версия ожидается (не получена от клиники).
| `/offline/transport` | ✅ Готова | Брендирование транспорта | | `/offline/transport` | ✅ Готова | Брендирование транспорта |
| `/components/buttons` | ✅ Готова | Кнопки — 4 варианта с реального сайта, размеры, состояния | | `/components/buttons` | ✅ Готова | Кнопки — 4 варианта с реального сайта, размеры, состояния |
| `/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/*` | 🔜 Sprint 5–8 | Hero, врачи, отзывы, новости, формы | | `/blocks/hero` | ✅ Sprint 5 v1.1 | Hero-баннер: фон #f9f4e7, реальное фото врача, галочки #bf9975, кнопка outline |
| `/blocks/doctors` | ✅ Sprint 5 v1.1 | Врачи: H2 30px, статистика #60959c без фона, 6 реальных фото |
| `/blocks/*` | 🔜 Sprint 5 | Отзывы, формы, новости, footer |
| `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты | | `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты |
--- ---
docs/SPRINTS.md
+14 -7
View File
@@ -191,14 +191,18 @@
- [ ] FE: Главное меню: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты - [ ] FE: Главное меню: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты
**Hero-баннер** → `/blocks/hero` **Hero-баннер** → `/blocks/hero`
- [ ] FE: Левая часть: белый блок, заголовок «ЭНДОСКОПИЧЕСКОЕ...», 3 пункта с галочками, кнопка «Узнать стоимость операции» - [x] FE: Баннер — единый фон #f9f4e7 (светло-кремовый, замерян пикселем), галочки #bf9975
- [ ] FE: Правая часть: фото врача, фон #b8e6ed - [x] FE: Правая часть: реальное фото врача с пациентом (спарсено с сайта → public/hero-doctor.jpg)
- [x] LLM: v1.1 — исправлен цвет фона, кнопка outline, галочки бежевые
**Вводный текст (CEO-блок)** → `/blocks/ceo` **Вводный текст (CEO-блок)** → `/blocks/ceo`
- [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы - [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы
**Блок врачей** → `/blocks/doctors` **Блок врачей** → `/blocks/doctors`
- [ ] FE: Заголовок «Приём ведут опытные ЛОР врачи» + 3 стат-блока + сетка карточек (mock) - [x] FE: Заголовок text-3xl + 3 стат-блока (без фона, #60959c + border-bottom) + сетка 6 карточек
- [x] FE: Реальные фото 6 врачей (спарсены с сайта → public/doctors/)
- [x] FE: Реальные имена и специализации врачей из слайдера /lor
- [x] LLM: v1.1
**Блок отзывов** → `/blocks/reviews` **Блок отзывов** → `/blocks/reviews`
- [ ] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки - [ ] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки
@@ -214,11 +218,14 @@
- [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы - [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы
### Общее к Sprint 5 ### Общее к Sprint 5
- [ ] FE: LLM-блоки v1.0 на каждую страницу блоков - [x] FE: LLM-блоки на hero v1.1 и doctors v1.1
- [ ] FE: Убрать `soon` у всех заполненных блоков в Sidebar - [x] Docs: Типографика сайта — реальные стили на 23.03.2026 (новый раздел в /foundation/typography)
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` - [x] Docs: Цвета — исправлен #f9f4e7 (Hero), #b8e6ed (форма), #e9e4d4 (пилюли)
- [ ] FE: Убрать `soon` у Hero и Doctors в Sidebar
- [ ] FE: CEO-блок, отзывы, формы, новости, footer
- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md` по итогам Sprint 5
**Результат спринта:** Все блоки текущего сайта задокументированы с mock-данными. **Результат спринта (в работе):** Hero + Doctors задокументированы с реальными фото и точными цветами.
--- ---