feat(sprint-5): document all blocks from perm.oclinica.ru/lor
Created 8 pages from real site (screenshot source): - /components/navigation — header: top-bar, logo, nav menu (8 items) - /blocks/hero — hero banner: #b8e6ed bg, 3 checkmarks, CTA button - /blocks/ceo — intro text: clinic description + Q&A stimuli - /blocks/doctors — doctors: 3 stats (#dff0fa) + 6 card grid - /blocks/reviews — reviews carousel: #eef4d1 bg, decorative quote - /blocks/contact-forms — 2 forms: "Будьте здоровы!" (#b8e6ed) + "Стоимость" - /blocks/news — 4 news cards row + "Все новости" button - /blocks/contact — footer: 4 link columns + logo + address + hours globals.css: added .bb-nav-link:hover (#0089c3) Sidebar: all blocks/navigation unlocked (removed soon), v0.5.1 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
@@ -0,0 +1,300 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Шапка и навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const NAV_ITEMS = [
|
||||
"Клиника",
|
||||
"ЛОР врачи",
|
||||
"Заболевания",
|
||||
"Вопрос-ответ",
|
||||
"ЛОР-операции",
|
||||
"Сурдология",
|
||||
"Цены",
|
||||
"Контакты",
|
||||
];
|
||||
|
||||
const LLM_NAV_TEXT = `
|
||||
БЛОК: Шапка и навигация сайта (Header)
|
||||
Источник: perm.oclinica.ru/lor — реальная шапка сайта
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА ШАПКИ (3 зоны сверху вниз):
|
||||
|
||||
1. ТОП-БАР (~40px высота, фон #fff, border-bottom 1px solid #e5e7eb)
|
||||
Левая часть:
|
||||
— Адрес: «Б. Цитная, 3» с иконкой 📍
|
||||
— Ссылка: «Клиника ухо горло нос и аллергия»
|
||||
— Ссылка: «Центр аллергологии и пульмонологии»
|
||||
Правая часть:
|
||||
— Телефон: «/342/ 255-53-84» (font-weight: bold, color: #111827)
|
||||
— Кнопка «Заказать звонок» — стиль bb-btn-pill (#e9e4d4, border #d5cfbd, border-radius 25px)
|
||||
|
||||
2. ЛОГОТИП (~64px, фон #fff)
|
||||
— Иконка кружок синий (#0089c3) с крестом
|
||||
— Текст «КЛИНИКА УХО ГОРЛО НОС» жирный uppercase, цвет #53514e
|
||||
— Подпись «им. проф. Е.Н.Оленевой» мелкий, цвет #9ca3af
|
||||
|
||||
3. ГЛАВНОЕ МЕНЮ (~46px, фон #fff, border-top 1px solid #e5e7eb)
|
||||
Пункты (8 штук): Клиника | ЛОР врачи | Заболевания | Вопрос-ответ | ЛОР-операции | Сурдология | Цены | Контакты
|
||||
Шрифт: Fira Sans 14px, weight 400
|
||||
Цвет ссылок: #53514e (--brand-073m)
|
||||
Активный / Hover: #0089c3 (--brand-053m)
|
||||
Разделители: border-right 1px solid #f3f4f6 между пунктами
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Логотип всегда кликабелен — ведёт на главную страницу раздела
|
||||
✓ Кнопка «Заказать звонок» всегда видна, pill-стиль
|
||||
✓ Телефон кликабелен (tel: ссылка)
|
||||
✓ Активный пункт меню — цвет #0089c3, остальные #53514e
|
||||
✕ Не добавлять пункты меню, которых нет на сайте
|
||||
✕ Не менять порядок пунктов меню
|
||||
`.trim();
|
||||
|
||||
export default function NavigationPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Компоненты
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Шапка и навигация
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Точное воспроизведение шапки с perm.oclinica.ru/lor. Три зоны: топ-бар, логотип, главное меню.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl overflow-hidden"
|
||||
style={{ border: "1px solid var(--bb-border)", boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}
|
||||
>
|
||||
{/* Топ-бар */}
|
||||
<div
|
||||
className="flex items-center justify-between px-6 py-2 text-xs border-b"
|
||||
style={{ background: "#fff", borderColor: "#e5e7eb", color: "#6b7280" }}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<span>📍 Б. Цитная, 3</span>
|
||||
<a href="#" style={{ color: "#0089c3" }}>
|
||||
Клиника ухо горло нос и аллергия
|
||||
</a>
|
||||
<a href="#" style={{ color: "#0089c3" }}>
|
||||
Центр аллергологии и пульмонологии
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="font-bold text-sm" style={{ color: "#111827" }}>
|
||||
/342/ 255-53-84
|
||||
</span>
|
||||
<button className="bb-btn bb-btn-sm bb-btn-pill">Заказать звонок</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Логотип */}
|
||||
<div className="flex items-center px-6 py-3 bg-white">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-lg shrink-0"
|
||||
style={{ background: "#0089c3" }}
|
||||
>
|
||||
✚
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="text-[11px] font-bold leading-tight uppercase tracking-wide"
|
||||
style={{ color: "#53514e" }}
|
||||
>
|
||||
Клиника<br />ухо, горло, нос
|
||||
</div>
|
||||
<div className="text-[9px] leading-tight mt-0.5" style={{ color: "#9ca3af" }}>
|
||||
им. проф. Е.Н.Оленевой
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Навигация */}
|
||||
<nav className="flex border-t bg-white" style={{ borderColor: "#e5e7eb" }}>
|
||||
{NAV_ITEMS.map((item, i) => (
|
||||
<a
|
||||
key={item}
|
||||
href="#"
|
||||
className="px-4 py-3 text-sm bb-nav-link whitespace-nowrap"
|
||||
style={{
|
||||
color: i === 0 ? "#0089c3" : "#53514e",
|
||||
borderRight: "1px solid #f3f4f6",
|
||||
fontWeight: i === 0 ? 500 : 400,
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Анатомия шапки
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{[
|
||||
{
|
||||
zone: "1. Топ-бар",
|
||||
bg: "#f0f9ff",
|
||||
height: "~40px",
|
||||
color: "Фон: #fff",
|
||||
desc: "Адрес, ссылки на разделы клиники, телефон, кнопка «Заказать звонок» (pill)",
|
||||
},
|
||||
{
|
||||
zone: "2. Логотип",
|
||||
bg: "#f0fdf4",
|
||||
height: "~64px",
|
||||
color: "Фон: #fff",
|
||||
desc: "Иконка-кружок (#0089c3) + название клиники двумя строками + подпись мелким",
|
||||
},
|
||||
{
|
||||
zone: "3. Навигация",
|
||||
bg: "#fefce8",
|
||||
height: "~46px",
|
||||
color: "Фон: #fff, border-top",
|
||||
desc: "8 горизонтальных пунктов, активный = #0089c3, остальные = #53514e",
|
||||
},
|
||||
].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>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{z.desc}
|
||||
</p>
|
||||
<p className="text-[11px] font-mono mt-1" style={{ color: "var(--bb-text-muted)" }}>
|
||||
H: {z.height} · {z.color}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Пункты меню */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Пункты главного меню
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{NAV_ITEMS.map((item, i) => (
|
||||
<span
|
||||
key={item}
|
||||
className="px-3 py-1.5 rounded text-sm"
|
||||
style={{
|
||||
background: i === 0 ? "#dff0fa" : "var(--bb-sidebar-bg)",
|
||||
color: i === 0 ? "var(--brand-053m)" : "var(--bb-text)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
fontWeight: i === 0 ? 500 : 400,
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
{i === 0 && (
|
||||
<span className="ml-1.5 text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
|
||||
(активный)
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Порядок пунктов фиксирован. Hover и активный пункт — цвет #0089c3 (--brand-053m).
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Токены */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Цвета и токены
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ label: "Фон шапки", value: "#ffffff", token: "—" },
|
||||
{ label: "Ссылки меню", value: "#53514e", token: "--brand-073m" },
|
||||
{ label: "Активный / hover", value: "#0089c3", token: "--brand-053m" },
|
||||
{ label: "Кнопка «Заказать»", value: "#e9e4d4", token: "bb-btn-pill" },
|
||||
].map((t) => (
|
||||
<div
|
||||
key={t.label}
|
||||
className="p-3 rounded-xl space-y-2"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded border"
|
||||
style={{ background: t.value, borderColor: "var(--bb-border)" }}
|
||||
/>
|
||||
<p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>
|
||||
{t.label}
|
||||
</p>
|
||||
<p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{t.value}
|
||||
</p>
|
||||
<p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{t.token}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/components/navigation" version="v1.0" specText={LLM_NAV_TEXT}>
|
||||
<LlmSection title="Зоны шапки" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Высота", "Фон", "Содержимое"]}
|
||||
rows={[
|
||||
["Топ-бар", "~40px", "#fff", "Адрес, ссылки разделов, телефон /342/ 255-53-84, кнопка «Заказать звонок»"],
|
||||
["Логотип", "~64px", "#fff", "Кружок #0089c3 + «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»"],
|
||||
["Навигация", "~46px", "#fff + border-top", "8 пунктов: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Фон шапки", "#ffffff", "—"],
|
||||
["Ссылки меню (default)", "#53514e", "--brand-073m"],
|
||||
["Активный пункт / hover", "#0089c3", "--brand-053m"],
|
||||
["Кнопка «Заказать звонок»", "#e9e4d4 / border #d5cfbd", "bb-btn-pill"],
|
||||
["Телефон", "#111827, font-weight bold", "—"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Логотип ведёт на главную страницу раздела" },
|
||||
{ ok: true, text: "Кнопка «Заказать звонок» всегда видна, pill-стиль" },
|
||||
{ ok: true, text: "Телефон — кликабельная ссылка tel:" },
|
||||
{ ok: true, text: "Активный пункт меню — цвет #0089c3" },
|
||||
{ ok: false, text: "Не добавлять пункты меню, которых нет на сайте" },
|
||||
{ ok: false, text: "Не менять порядок 8 пунктов меню" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user