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,304 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Hero-баннер. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const LLM_HERO_TEXT = `
|
||||
БЛОК: Hero-баннер (главный баннер страницы)
|
||||
Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
|
||||
Версия: v1.0
|
||||
|
||||
ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
|
||||
«ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых»
|
||||
Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m)
|
||||
|
||||
СТРУКТУРА БАННЕРА (двухколоночная, фон: #b8e6ed):
|
||||
Левая колонка (~50%, белый блок):
|
||||
— Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
|
||||
Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827
|
||||
— 3 пункта с галочками (✓ зелёный):
|
||||
1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
|
||||
2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия смяткими размерами»
|
||||
3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
|
||||
Ключевое слово: uppercase bold; описание: обычный текст, ~13px
|
||||
— Кнопка «Узнать стоимость операции» — стиль: bb-btn-primary (#FFA39C)
|
||||
Правая колонка (~50%):
|
||||
— Фото врача с пациентом, фон #b8e6ed
|
||||
— Изображение занимает всю высоту блока
|
||||
|
||||
ПОД БАННЕРОМ:
|
||||
— Кнопки соцсетей (Facebook, VK, Twitter/X), цвет #6b7280
|
||||
— Счётчик просмотров
|
||||
|
||||
ЦВЕТА:
|
||||
Фон баннера: #b8e6ed (светло-бирюзовый)
|
||||
Левый блок: #ffffff
|
||||
Кнопка CTA: #FFA39C (--bb-btn-primary)
|
||||
Заголовок: #111827
|
||||
Пункты: ключ #111827 bold, описание #374151
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Фон баннера всегда #b8e6ed
|
||||
✓ Кнопка CTA — всегда primary (#FFA39C)
|
||||
✓ Заголовок блока uppercase, жирный
|
||||
✕ Не менять фон баннера на другой цвет
|
||||
✕ Не убирать все 3 пункта с галочками
|
||||
`.trim();
|
||||
|
||||
const HERO_CHECKS = [
|
||||
{
|
||||
key: "БЕЗОПАСНО",
|
||||
desc: "оперируют хирурги с 15-летним опытом работы",
|
||||
},
|
||||
{
|
||||
key: "БЕЗ ВНЕШНИХ РАЗРЕЗОВ",
|
||||
desc: "хирургия смяткими размерами",
|
||||
},
|
||||
{
|
||||
key: "БЫСТРО",
|
||||
desc: "под наблюдением врача пациент находится 1 сутки",
|
||||
},
|
||||
];
|
||||
|
||||
export default function HeroPage() {
|
||||
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)" }}>
|
||||
Hero-баннер
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок с фоном #b8e6ed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
|
||||
{/* H1 страницы */}
|
||||
<h2
|
||||
className="text-xl font-bold leading-snug"
|
||||
style={{ color: "#53514e" }}
|
||||
>
|
||||
ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых
|
||||
</h2>
|
||||
|
||||
{/* Баннер */}
|
||||
<div
|
||||
className="rounded-xl overflow-hidden flex"
|
||||
style={{ background: "#b8e6ed", minHeight: 280, border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
{/* Левая часть — белый блок */}
|
||||
<div
|
||||
className="flex flex-col justify-center gap-5 p-8"
|
||||
style={{ background: "#fff", minWidth: "48%", maxWidth: "52%" }}
|
||||
>
|
||||
<p
|
||||
className="text-base font-bold uppercase leading-snug"
|
||||
style={{ color: "#111827" }}
|
||||
>
|
||||
Эндоскопическое хирургическое лечение ЛОР органов
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{HERO_CHECKS.map((c) => (
|
||||
<li key={c.key} className="flex items-start gap-2 text-sm">
|
||||
<span
|
||||
className="shrink-0 font-bold"
|
||||
style={{ color: "#22c55e", marginTop: 1 }}
|
||||
>
|
||||
✓
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-bold uppercase" style={{ color: "#111827" }}>
|
||||
{c.key}
|
||||
</span>{" "}
|
||||
<span style={{ color: "#374151" }}>– {c.desc}</span>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div>
|
||||
<button className="bb-btn bb-btn-md bb-btn-primary">
|
||||
Узнать стоимость операции
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Правая часть — фото-заглушка */}
|
||||
<div
|
||||
className="flex-1 flex items-center justify-center"
|
||||
style={{ background: "#b8e6ed" }}
|
||||
>
|
||||
<div className="text-center space-y-2">
|
||||
<div
|
||||
className="w-20 h-20 rounded-full mx-auto flex items-center justify-center text-3xl"
|
||||
style={{ background: "rgba(255,255,255,0.4)" }}
|
||||
>
|
||||
👨⚕️
|
||||
</div>
|
||||
<p className="text-xs font-medium" style={{ color: "#0089c3" }}>
|
||||
Фото врача с пациентом
|
||||
</p>
|
||||
<p className="text-[10px]" style={{ color: "#53514e" }}>
|
||||
Фон: #b8e6ed
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Под баннером: соцсети */}
|
||||
<div className="flex items-center gap-3 pt-1">
|
||||
<span className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Поделиться:
|
||||
</span>
|
||||
{["VK", "FB", "TW"].map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
className="text-xs px-2 py-1 rounded"
|
||||
style={{
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
}}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
<span className="text-xs ml-2" style={{ color: "var(--bb-text-muted)" }}>
|
||||
👁 98 573 просмотра
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Анатомия баннера
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{[
|
||||
{
|
||||
zone: "Левый блок (белый)",
|
||||
bg: "#f8fafc",
|
||||
items: [
|
||||
"Заголовок uppercase bold",
|
||||
"3 пункта с галочками ✓",
|
||||
"Кнопка bb-btn-primary",
|
||||
],
|
||||
},
|
||||
{
|
||||
zone: "Правый блок (#b8e6ed)",
|
||||
bg: "#f0fdfa",
|
||||
items: [
|
||||
"Фото врача с пациентом",
|
||||
"Фон: #b8e6ed (светло-бирюзовый)",
|
||||
"Занимает всю высоту блока",
|
||||
],
|
||||
},
|
||||
].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>
|
||||
</section>
|
||||
|
||||
{/* Пункты с галочками */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Три пункта баннера
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{HERO_CHECKS.map((c) => (
|
||||
<div
|
||||
key={c.key}
|
||||
className="flex items-start gap-3 p-3 rounded-lg"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<span className="font-bold text-lg shrink-0" style={{ color: "#22c55e" }}>
|
||||
✓
|
||||
</span>
|
||||
<div>
|
||||
<span className="text-sm font-bold uppercase" style={{ color: "#111827" }}>
|
||||
{c.key}
|
||||
</span>
|
||||
<span className="text-sm" style={{ color: "#374151" }}>
|
||||
{" "}– {c.desc}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Ключевое слово: uppercase + bold. Описание: обычный текст. Галочка: #22c55e.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/hero" version="v1.0" specText={LLM_HERO_TEXT}>
|
||||
<LlmSection title="Структура баннера" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Ширина", "Фон", "Содержимое"]}
|
||||
rows={[
|
||||
["Левый блок", "~50%", "#ffffff", "Заголовок uppercase + 3 галочки + кнопка bb-btn-primary"],
|
||||
["Правый блок", "~50%", "#b8e6ed", "Фото врача с пациентом"],
|
||||
["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Три пункта баннера" />
|
||||
<LlmTable
|
||||
headers={["Ключевое слово", "Описание"]}
|
||||
rows={HERO_CHECKS.map((c) => [c.key, c.desc])}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Фон баннера", "#b8e6ed", "—"],
|
||||
["Левый блок", "#ffffff", "—"],
|
||||
["Кнопка CTA", "#FFA39C", "bb-btn-primary"],
|
||||
["Заголовок блока", "#111827", "—"],
|
||||
["Галочка", "#22c55e", "—"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Фон баннера: #b8e6ed (светло-бирюзовый)" },
|
||||
{ ok: true, text: "Кнопка CTA: bb-btn-primary (#FFA39C)" },
|
||||
{ ok: true, text: "Заголовок: uppercase, bold" },
|
||||
{ ok: true, text: "Три пункта с галочками ✓ (#22c55e)" },
|
||||
{ ok: false, text: "Не менять фон баннера на другой цвет" },
|
||||
{ ok: false, text: "Не убирать три пункта с галочками" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user