Compare commits
5 Commits
sprint/4
...
60619114a5
| Author | SHA1 | Date | |
|---|---|---|---|
 AR 15 M4
|
60619114a5 | ||
|
AR 15 M4
|
d4d86e6343 | ||
|
AR 15 M4
|
5b1ace962a | ||
|
AR 15 M4
|
52f04f9f5d | ||
|
AR 15 M4
|
754056642d |
@@ -0,0 +1,224 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Вводный текст (CEO-блок). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const LLM_CEO_TEXT = `
|
||||
БЛОК: Вводный текст клиники (CEO-блок)
|
||||
Источник: perm.oclinica.ru/lor — секция после баннера
|
||||
Версия: v1.0
|
||||
|
||||
НАЗНАЧЕНИЕ:
|
||||
Информационный блок под hero-баннером. Рассказывает о специализации клиники
|
||||
и вовлекает пациента через вопросы-стимулы.
|
||||
|
||||
СТРУКТУРА:
|
||||
1. Вводный абзац
|
||||
«Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей
|
||||
с ЛОР заболеваниями. ЛОР клиника представлена на двух адресах: ул. Цитная, 9, ул. Г. Звезда, 31а...»
|
||||
|
||||
2. Вопросы-стимулы (формат: «— Вопрос?»)
|
||||
Каждый вопрос — отдельный абзац с тире, связанный с симптомами пациентов:
|
||||
— У вас болит ухо, заложен нос, першит в горле, и вы не можете понять причину?
|
||||
— Вам срочно нужен платный ЛОР в Перми или, как ещё говорят, «ухогорлонос»?
|
||||
— Заболел ребёнок?
|
||||
— Срочно ищете частные ЛОР-клиники Перми для детей 0+ и взрослых...
|
||||
— Вам назначили проведение эндоскопической операции на ухе, горле или носе?
|
||||
|
||||
3. Заключительный абзац
|
||||
«Обращайтесь в ЛОР центр ухо, горло, нос в Перми...»
|
||||
«Будьте здоровы!»
|
||||
|
||||
ТИПОГРАФИКА:
|
||||
Шрифт: Fira Sans, 14px, line-height 1.6–1.8
|
||||
Цвет текста: #374151 (#bb-text)
|
||||
Вопросы: тот же стиль, начинаются с «—»
|
||||
Ключевые слова в тексте — обычно ссылки синего цвета (#0089c3)
|
||||
Фон блока: #ffffff, отступы 40–60px сверху и снизу
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Вопросы начинаются с «—» (тире)
|
||||
✓ Ключевые медицинские термины — ссылки #0089c3
|
||||
✓ Текст без H2 заголовка — просто связный параграф
|
||||
✕ Не добавлять маркированные списки (только тире)
|
||||
✕ Не менять стиль вопросов на другой формат
|
||||
`.trim();
|
||||
|
||||
const CEO_QUESTIONS = [
|
||||
"У вас болит ухо, заложен нос, першит в горле, и вы не можете понять причину?",
|
||||
"Вам срочно нужен платный ЛОР в Перми или, как ещё говорят, «ухогорлонос»?",
|
||||
"Заболел ребёнок?",
|
||||
"Срочно ищете частные ЛОР-клиники Перми для детей 0+ и взрослых с удобным режимом работы с 9:00 до 21:00 по будням?",
|
||||
"Вам назначили проведение эндоскопической операции на ухе, горле или носе?",
|
||||
];
|
||||
|
||||
export default function CeoPage() {
|
||||
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)" }}>
|
||||
Вводный текст (CEO-блок)
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Блок после hero-баннера на 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 p-8"
|
||||
style={{
|
||||
background: "#fff",
|
||||
border: "1px solid var(--bb-border)",
|
||||
fontFamily: "var(--font-web)",
|
||||
fontSize: 14,
|
||||
lineHeight: 1.75,
|
||||
color: "#374151",
|
||||
}}
|
||||
>
|
||||
<p>
|
||||
Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей
|
||||
с ЛОР заболеваниями. ЛОР клиника представлена на двух адресах:{" "}
|
||||
<a href="#" style={{ color: "#0089c3" }}>ул. Цитная, 9</a>, <a href="#" style={{ color: "#0089c3" }}>ул. Г. Звезда, 31а</a>.{" "}
|
||||
Это <a href="#" style={{ color: "#0089c3" }}>Клиника лечения кашля и аллергии</a>.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 space-y-2">
|
||||
{CEO_QUESTIONS.map((q) => (
|
||||
<p key={q}>— {q}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-4">
|
||||
Обращайтесь в ЛОР центр ухо, горло, нос в Перми, наши врачи оториноларингологи обязательно Вам помогут!
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
Клиника ЛОР болезней ухо, горло, нос – это наиболее современный центр оториноларингологии в Перми,
|
||||
благодаря эндоскопическому оборудованию, высокому профессионализму оториноларингологов.
|
||||
</p>
|
||||
<p className="mt-4 font-medium">Будьте здоровы!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Структура блока
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{
|
||||
num: "1",
|
||||
title: "Вводный абзац",
|
||||
bg: "#f0f9ff",
|
||||
desc: 'Специализация клиники, адреса. Ключевые слова — ссылки синего цвета (#0089c3).',
|
||||
},
|
||||
{
|
||||
num: "2",
|
||||
title: "Вопросы-стимулы",
|
||||
bg: "#fefce8",
|
||||
desc: 'Каждый вопрос — отдельный абзац, начинается с «—». Адресован пациенту с конкретным симптомом.',
|
||||
},
|
||||
{
|
||||
num: "3",
|
||||
title: "Заключительный абзац",
|
||||
bg: "#f0fdf4",
|
||||
desc: 'Призыв обращаться. «Будьте здоровы!» — фирменная подпись клиники.',
|
||||
},
|
||||
].map((s) => (
|
||||
<div
|
||||
key={s.num}
|
||||
className="flex gap-4 p-4 rounded-xl"
|
||||
style={{ background: s.bg, border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div
|
||||
className="w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0"
|
||||
style={{ background: "var(--brand-053m)", color: "#fff" }}
|
||||
>
|
||||
{s.num}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
{s.title}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{s.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Вопросы-стимулы */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Вопросы-стимулы (5 штук)
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{CEO_QUESTIONS.map((q, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-start gap-3 p-3 rounded-lg text-sm"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<span className="font-bold shrink-0 mt-0.5" style={{ color: "var(--brand-053m)" }}>
|
||||
—
|
||||
</span>
|
||||
<span style={{ color: "var(--bb-text)" }}>{q}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/ceo" version="v1.0" specText={LLM_CEO_TEXT}>
|
||||
<LlmSection title="Структура блока" />
|
||||
<LlmTable
|
||||
headers={["Часть", "Содержимое", "Примечание"]}
|
||||
rows={[
|
||||
["Вводный абзац", "Специализация клиники, адреса", "Ключевые слова = ссылки #0089c3"],
|
||||
["Вопросы-стимулы", "5 вопросов от лица пациента, начинаются с «—»", "Без маркированных списков"],
|
||||
["Заключение", 'Призыв обращаться + «Будьте здоровы!»', "Фирменная подпись клиники"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Типографика" />
|
||||
<LlmTable
|
||||
headers={["Параметр", "Значение"]}
|
||||
rows={[
|
||||
["Шрифт", "Fira Sans"],
|
||||
["Размер", "14px"],
|
||||
["Line-height", "1.6–1.8"],
|
||||
["Цвет текста", "#374151 (--bb-text)"],
|
||||
["Цвет ссылок в тексте", "#0089c3 (--brand-053m)"],
|
||||
["Фон блока", "#ffffff"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Вопросы начинаются с «—» (длинное тире)" },
|
||||
{ ok: true, text: "Ключевые медицинские термины — ссылки #0089c3" },
|
||||
{ ok: true, text: "Фирменная подпись «Будьте здоровы!» в конце" },
|
||||
{ ok: false, text: "Не добавлять маркированные списки (•)" },
|
||||
{ ok: false, text: "Не добавлять H2 заголовок внутри блока" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Формы записи. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const LLM_FORMS_TEXT = `
|
||||
БЛОК: Формы записи и обратной связи
|
||||
Источник: perm.oclinica.ru/lor — два блока форм на одной странице
|
||||
Версия: v1.0
|
||||
|
||||
ФОРМА 1: «Будьте здоровы!» (форма записи на приём)
|
||||
Позиция: после блока отзывов
|
||||
Заголовок H2: «Будьте здоровы!»
|
||||
Подзаголовок: «Запишитесь на приём к врачу!»
|
||||
Фон секции: #b8e6ed (светло-бирюзовый)
|
||||
Поля формы:
|
||||
1. Текстовый input: placeholder «Введите ваше имя» (height 50px)
|
||||
2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
|
||||
3. Select: «Выберите ЛОР врача» (height 50px)
|
||||
4. Checkbox: «Отправляя данные, я даю согласие на обработку персональных данных»
|
||||
Кнопка: «Запишите меня!» — стиль bb-btn-primary (#FFA39C)
|
||||
Ширина формы: ~400px центрирована или в колонку
|
||||
|
||||
ФОРМА 2: «Узнайте стоимость операции» (консультация)
|
||||
Позиция: после блока новостей
|
||||
Заголовок H2: «Узнайте стоимость операции»
|
||||
Подзаголовок: «Проконсультируйтесь с ассистентом хирурга»
|
||||
Фон секции: #ffffff
|
||||
Поля формы:
|
||||
1. Текстовый input: placeholder «каша» / «Введите ваше имя» (height 50px)
|
||||
2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
|
||||
3. Checkbox: «Отправляя данные, я даю согласие на обработку персональных данных»
|
||||
Кнопка: «Перезвоните мне» — стиль bb-btn-primary (#FFA39C)
|
||||
|
||||
ОБЩИЕ ПРАВИЛА:
|
||||
— Оба поля input/select: bb-input / bb-select (height 50px, border 1px solid #ccc)
|
||||
— Чекбокс обязателен в обеих формах
|
||||
— Кнопка отправки: всегда bb-btn-primary (#FFA39C)
|
||||
— Форма 1 на бирюзовом фоне (#b8e6ed), форма 2 на белом
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Чекбокс согласия обязателен в каждой форме
|
||||
✓ Кнопки отправки: bb-btn-primary (#FFA39C)
|
||||
✓ Форма 1 на фоне #b8e6ed
|
||||
✕ Не менять порядок полей
|
||||
✕ Не убирать чекбокс согласия
|
||||
`.trim();
|
||||
|
||||
export default function ContactFormsPage() {
|
||||
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>
|
||||
|
||||
{/* Форма 1: Будьте здоровы */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Форма 1 — «Будьте здоровы!»
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Фон секции: #b8e6ed. Запись на приём к врачу.
|
||||
</p>
|
||||
<div
|
||||
className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
|
||||
style={{ background: "#b8e6ed" }}
|
||||
>
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold mb-1" style={{ color: "#111827" }}>
|
||||
Будьте здоровы!
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "#374151" }}>
|
||||
Запишитесь на приём к врачу!
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full max-w-sm space-y-3">
|
||||
<input
|
||||
className="bb-input"
|
||||
type="text"
|
||||
placeholder="Введите ваше имя"
|
||||
readOnly
|
||||
/>
|
||||
<input
|
||||
className="bb-input"
|
||||
type="tel"
|
||||
placeholder="Введите ваш телефон"
|
||||
readOnly
|
||||
/>
|
||||
<select className="bb-select" disabled>
|
||||
<option>Выберите ЛОР врача</option>
|
||||
</select>
|
||||
<label className="flex items-start gap-2 text-xs cursor-pointer" style={{ color: "#374151" }}>
|
||||
<input type="checkbox" className="bb-checkbox mt-0.5" readOnly />
|
||||
<span>
|
||||
Отправляя данные, я даю согласие на обработку персональных данных
|
||||
</span>
|
||||
</label>
|
||||
<button className="bb-btn bb-btn-md bb-btn-primary w-full">
|
||||
Запишите меня!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Форма 2: Узнайте стоимость */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Форма 2 — «Узнайте стоимость операции»
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Фон секции: #ffffff. Запрос консультации по стоимости.
|
||||
</p>
|
||||
<div
|
||||
className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
|
||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold mb-1" style={{ color: "#111827" }}>
|
||||
Узнайте стоимость операции
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "#374151" }}>
|
||||
Проконсультируйтесь с ассистентом хирурга
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full max-w-sm space-y-3">
|
||||
<input
|
||||
className="bb-input"
|
||||
type="text"
|
||||
placeholder="Введите ваше имя"
|
||||
readOnly
|
||||
/>
|
||||
<input
|
||||
className="bb-input"
|
||||
type="tel"
|
||||
placeholder="Введите ваш телефон"
|
||||
readOnly
|
||||
/>
|
||||
<label className="flex items-start gap-2 text-xs cursor-pointer" style={{ color: "#374151" }}>
|
||||
<input type="checkbox" className="bb-checkbox mt-0.5" readOnly />
|
||||
<span>
|
||||
Отправляя данные, я даю согласие на обработку персональных данных
|
||||
</span>
|
||||
</label>
|
||||
<button className="bb-btn bb-btn-md bb-btn-primary w-full">
|
||||
Перезвоните мне
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Сравнение двух форм */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Сравнение двух форм
|
||||
</h2>
|
||||
<div className="overflow-x-auto rounded-xl" style={{ border: "1px solid var(--bb-border)" }}>
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
<th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Параметр</th>
|
||||
<th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Форма 1 «Будьте здоровы!»</th>
|
||||
<th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Форма 2 «Стоимость операции»</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"],
|
||||
["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"],
|
||||
["Фон секции", "#b8e6ed", "#ffffff"],
|
||||
["Поля", "Имя + Телефон + Select врача + Checkbox", "Имя + Телефон + Checkbox"],
|
||||
["Кнопка", "«Запишите меня!»", "«Перезвоните мне»"],
|
||||
["Стиль кнопки", "bb-btn-primary (#FFA39C)", "bb-btn-primary (#FFA39C)"],
|
||||
].map(([param, f1, f2]) => (
|
||||
<tr key={param} style={{ borderTop: "1px solid var(--bb-border)" }}>
|
||||
<td className="px-4 py-2 font-medium text-xs" style={{ color: "var(--bb-text)" }}>{param}</td>
|
||||
<td className="px-4 py-2 text-xs" style={{ color: "var(--bb-text-muted)" }}>{f1}</td>
|
||||
<td className="px-4 py-2 text-xs" style={{ color: "var(--bb-text-muted)" }}>{f2}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/contact-forms" version="v1.0" specText={LLM_FORMS_TEXT}>
|
||||
<LlmSection title="Форма 1 — Запись на приём" />
|
||||
<LlmTable
|
||||
headers={["Поле", "Тип", "Placeholder"]}
|
||||
rows={[
|
||||
["Имя", "input[type=text]", "«Введите ваше имя»"],
|
||||
["Телефон", "input[type=tel]", "«Введите ваш телефон»"],
|
||||
["Врач", "select", "«Выберите ЛОР врача»"],
|
||||
["Согласие", "checkbox", "«Отправляя данные, я даю согласие...»"],
|
||||
["Кнопка", "button bb-btn-primary", "«Запишите меня!»"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Форма 2 — Запрос стоимости" />
|
||||
<LlmTable
|
||||
headers={["Поле", "Тип", "Placeholder"]}
|
||||
rows={[
|
||||
["Имя", "input[type=text]", "«Введите ваше имя»"],
|
||||
["Телефон", "input[type=tel]", "«Введите ваш телефон»"],
|
||||
["Согласие", "checkbox", "«Отправляя данные, я даю согласие...»"],
|
||||
["Кнопка", "button bb-btn-primary", "«Перезвоните мне»"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Форма 1: фон #b8e6ed, форма 2: фон #fff" },
|
||||
{ ok: true, text: "Чекбокс согласия обязателен в каждой форме" },
|
||||
{ ok: true, text: "Кнопки: bb-btn-primary (#FFA39C)" },
|
||||
{ ok: true, text: "Все input/select: height 50px (bb-input, bb-select)" },
|
||||
{ ok: false, text: "Не убирать чекбокс согласия на обработку данных" },
|
||||
{ ok: false, text: "Не менять стиль кнопки на outline или teal" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Подвал (Footer). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const FOOTER_COLUMNS = [
|
||||
{
|
||||
title: "О клинике",
|
||||
links: ["Лицензия", "Миссия", "Врачи", "Вакансии", "История", "Образовательная деятельность", "При инфо"],
|
||||
},
|
||||
{
|
||||
title: "Заболевания",
|
||||
links: ["Ринит", "Отит", "Гайморит", "Тонзиллит", "Полипы носа", "Искривление перегородки"],
|
||||
},
|
||||
{
|
||||
title: "Вопрос-ответ",
|
||||
links: [
|
||||
"Что нужно знать до операции на ухо",
|
||||
"Что нужно знать до операции на нос",
|
||||
"Отзывы до и после лечения у детей",
|
||||
"Что нужно знать при лечении у детей",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Операции",
|
||||
links: ["Септопластика", "Турбинопластика", "Тонзиллэктомия", "Аденотомия", "Тимпанопластика", "Мирингопластика"],
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_FOOTER_TEXT = `
|
||||
БЛОК: Подвал сайта (Footer)
|
||||
Источник: perm.oclinica.ru/lor — нижняя часть страницы
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА ПОДВАЛА:
|
||||
|
||||
1. ОСНОВНАЯ ЧАСТЬ — 4 колонки ссылок:
|
||||
Колонка 1 «О клинике»: Лицензия, Миссия, Врачи, Вакансии, История, Образовательная деятельность
|
||||
Колонка 2 «Заболевания»: Ринит, Отит, Гайморит, Тонзиллит, Полипы носа, Искривление перегородки
|
||||
Колонка 3 «Вопрос-ответ»: 4 вопроса об операциях и лечении
|
||||
Колонка 4 «Операции»: Септопластика, Турбинопластика, Тонзиллэктомия, Аденотомия и др.
|
||||
|
||||
2. НИЖНЯЯ ПОЛОСА:
|
||||
Левая: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»
|
||||
Центр:
|
||||
— «Мы находимся по адресу: Пермь, ул. Г. Звезда...»
|
||||
— Иконки соцсетей: VK, OK, YouTube, Telegram и другие
|
||||
Правая: Часы работы:
|
||||
— Пн-пт: 9:00–21:00
|
||||
— Сб: 9:00–18:00
|
||||
— Вс: выходной
|
||||
— Вторая клиника часы отдельно
|
||||
|
||||
ЦВЕТА:
|
||||
Фон подвала: #fff или светло-серый (#f8f9fa)
|
||||
Заголовки колонок: #111827, font-weight 600
|
||||
Ссылки: #53514e (--brand-073m), hover: #0089c3
|
||||
Разделитель: border-top 1px solid #e5e7eb
|
||||
Часы работы: #374151
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ 4 колонки ссылок в основной части
|
||||
✓ Логотип в нижней полосе слева
|
||||
✓ Адрес + соцсети в центре нижней полосы
|
||||
✓ Часы работы справа
|
||||
✕ Не менять структуру 4 колонок
|
||||
`.trim();
|
||||
|
||||
export default function ContactFooterPage() {
|
||||
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)" }}>
|
||||
Подвал (Footer)
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Подвал сайта с perm.oclinica.ru — 4 колонки ссылок, логотип, адрес, часы работы, соцсети.
|
||||
</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)" }}
|
||||
>
|
||||
{/* 4 колонки ссылок */}
|
||||
<div
|
||||
className="grid grid-cols-4 gap-6 p-8"
|
||||
style={{ background: "#f8f9fa", borderBottom: "1px solid #e5e7eb" }}
|
||||
>
|
||||
{FOOTER_COLUMNS.map((col) => (
|
||||
<div key={col.title}>
|
||||
<p className="font-semibold text-sm mb-3" style={{ color: "#111827" }}>
|
||||
{col.title}
|
||||
</p>
|
||||
<ul className="space-y-1.5">
|
||||
{col.links.map((link) => (
|
||||
<li key={link}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-xs bb-nav-link"
|
||||
style={{ color: "#53514e", textDecoration: "none" }}
|
||||
>
|
||||
{link}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Нижняя полоса */}
|
||||
<div
|
||||
className="flex items-start justify-between gap-6 px-8 py-5"
|
||||
style={{ background: "#fff" }}
|
||||
>
|
||||
{/* Логотип */}
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold"
|
||||
style={{ background: "#0089c3" }}
|
||||
>
|
||||
✚
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="text-[10px] font-bold uppercase leading-tight"
|
||||
style={{ color: "#53514e" }}
|
||||
>
|
||||
Клиника<br />ухо, горло, нос
|
||||
</div>
|
||||
<div className="text-[8px] leading-tight" style={{ color: "#9ca3af" }}>
|
||||
им. проф. Е.Н.Оленевой
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Адрес и соцсети */}
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-xs" style={{ color: "#374151" }}>
|
||||
Мы находимся по адресу: Пермь, ул. Г. Звезда, 31а
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{["VK", "OK", "YT", "TG"].map((s) => (
|
||||
<a
|
||||
key={s}
|
||||
href="#"
|
||||
className="text-[11px] px-2 py-1 rounded"
|
||||
style={{
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
}}
|
||||
>
|
||||
{s}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Часы работы */}
|
||||
<div className="text-right text-xs space-y-1" style={{ color: "#374151" }}>
|
||||
<p className="font-semibold text-xs mb-1" style={{ color: "#111827" }}>
|
||||
Часы работы:
|
||||
</p>
|
||||
<p>Пн–пт: 9:00–21:00</p>
|
||||
<p>Сб: 9:00–18:00</p>
|
||||
<p>Вс: выходной</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Колонки */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Четыре колонки ссылок
|
||||
</h2>
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{FOOTER_COLUMNS.map((col) => (
|
||||
<div
|
||||
key={col.title}
|
||||
className="rounded-xl p-3 space-y-1"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<p className="font-semibold text-xs" style={{ color: "var(--bb-text)" }}>
|
||||
{col.title}
|
||||
</p>
|
||||
<p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{col.links.length} ссылок
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/contact" version="v1.0" specText={LLM_FOOTER_TEXT}>
|
||||
<LlmSection title="Структура подвала" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Содержимое", "Фон"]}
|
||||
rows={[
|
||||
["4 колонки ссылок", "О клинике / Заболевания / Вопрос-ответ / Операции", "#f8f9fa"],
|
||||
["Нижняя полоса — лево", "Логотип клиники (иконка + текст)", "#fff"],
|
||||
["Нижняя полоса — центр", "Адрес + иконки соцсетей (VK, OK, YT, TG)", "#fff"],
|
||||
["Нижняя полоса — право", "Часы работы Пн–пт / Сб / Вс", "#fff"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Часы работы" />
|
||||
<LlmTable
|
||||
headers={["День", "Часы"]}
|
||||
rows={[
|
||||
["Пн–пт", "9:00–21:00"],
|
||||
["Сб", "9:00–18:00"],
|
||||
["Вс", "выходной"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Заголовки колонок", "#111827, font-weight 600", "—"],
|
||||
["Ссылки (default)", "#53514e", "--brand-073m"],
|
||||
["Ссылки (hover)", "#0089c3", "--brand-053m"],
|
||||
["Фон основной части", "#f8f9fa", "—"],
|
||||
["Фон нижней полосы", "#ffffff", "—"],
|
||||
["Разделитель", "1px solid #e5e7eb", "—"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "4 колонки: О клинике / Заболевания / Вопрос-ответ / Операции" },
|
||||
{ ok: true, text: "Логотип в нижней полосе слева" },
|
||||
{ ok: true, text: "Адрес и соцсети в центре" },
|
||||
{ ok: true, text: "Часы работы справа" },
|
||||
{ ok: false, text: "Не менять структуру и порядок 4 колонок" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Блок «Наши врачи». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const STATS = [
|
||||
{ num: "27", label: "ЛОР врачей работает в клинике", prefix: "Ежедневно" },
|
||||
{ num: "6", label: "кандидатов медицинских наук", prefix: "В том числе" },
|
||||
{ num: "12 000+", label: "успешно проведённых операций", prefix: "Свыше" },
|
||||
];
|
||||
|
||||
const DOCTORS = [
|
||||
{
|
||||
name: "Макарова Людмила Германовна",
|
||||
spec: "ЛОР врач, сурдолог",
|
||||
photo: "/doctors/makarova.jpg",
|
||||
},
|
||||
{
|
||||
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 = `
|
||||
БЛОК: Наши врачи
|
||||
Источник: perm.oclinica.ru/lor — блок под CEO-текстом
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА БЛОКА:
|
||||
1. ЗАГОЛОВОК H2: «Приём ведут опытные ЛОР врачи»
|
||||
Подзаголовок: описание принципа работы врачей клиники
|
||||
|
||||
2. БЛОК СТАТИСТИКИ (3 показателя в ряд):
|
||||
— «Ежедневно 27 ЛОР врачей работают в клинике»
|
||||
— «В том числе 6 кандидатов медицинских наук»
|
||||
— «Свыше 12 000 успешно проведённых операций»
|
||||
Стиль: весь текст #60959c, bold, ~18px. Фона НЕТ. Снизу border-bottom 3px solid #60959c
|
||||
|
||||
3. СЕТКА КАРТОЧЕК ВРАЧЕЙ (6 штук, 6 в ряд):
|
||||
Каждая карточка:
|
||||
— Фото врача 110×150px, object-fit: cover, object-position: center top, border-radius 4px
|
||||
— Имя (12px, font-weight 500, цвет #60959c)
|
||||
— Специализация (11px, #374151)
|
||||
Карточки без рамки, gap минимальный
|
||||
|
||||
ЦВЕТА:
|
||||
Заголовок H2: #111827, ~30px (text-3xl)
|
||||
Статистика текст: #60959c (серо-бирюзовый)
|
||||
Статистика черта: border-bottom 3px solid #60959c
|
||||
Имя врача: #60959c
|
||||
Специализация: #374151
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Заголовок H2 + описание обязательны
|
||||
✓ 3 stat-блока в ряд
|
||||
✓ Сетка 3 колонки, 2 ряда (6 карточек)
|
||||
✕ Не отображать более 6 врачей в основном блоке
|
||||
✕ Не убирать статистику
|
||||
`.trim();
|
||||
|
||||
export default function DoctorsBlockPage() {
|
||||
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 — заголовок, 3 стат-блока, сетка из 6 карточек врачей.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-8 space-y-8"
|
||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
{/* Заголовок */}
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold mb-3" style={{ color: "#111827" }}>
|
||||
Приём ведут опытные ЛОР врачи
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
|
||||
Фундаментальная теоретическая подготовка и большой практический опыт в сочетании
|
||||
с внимательным индивидуальным подходом являются причиной успеха лечения тысяч наших пациентов
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Статистика — текст тёмно-бирюзовым, без фоновых блоков */}
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{STATS.map((s) => (
|
||||
<div key={s.num} className="pb-3" style={{ borderBottom: "3px solid #60959c" }}>
|
||||
<p className="text-lg font-bold leading-snug" style={{ color: "#60959c" }}>
|
||||
{s.prefix} {s.num} {s.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Сетка врачей — плотнее, имена тёмно-бирюзовым */}
|
||||
<div className="grid grid-cols-6 gap-3">
|
||||
{DOCTORS.map((doc) => (
|
||||
<div key={doc.name} className="flex flex-col items-center text-center gap-1.5">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={doc.photo}
|
||||
alt={doc.name}
|
||||
style={{
|
||||
width: 110,
|
||||
height: 150,
|
||||
objectFit: "cover",
|
||||
objectPosition: "center top",
|
||||
borderRadius: 4,
|
||||
display: "block",
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-medium leading-snug"
|
||||
style={{ color: "#60959c" }}
|
||||
>
|
||||
{doc.name}
|
||||
</p>
|
||||
<p
|
||||
className="text-[11px] mt-0.5 leading-snug"
|
||||
style={{ color: "#374151" }}
|
||||
>
|
||||
{doc.spec}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Стат-блоки */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Блок статистики
|
||||
</h2>
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{STATS.map((s) => (
|
||||
<div
|
||||
key={s.num}
|
||||
className="pb-3 space-y-1"
|
||||
style={{ borderBottom: "3px solid #60959c" }}
|
||||
>
|
||||
<p className="text-base font-bold leading-snug" style={{ color: "#60959c" }}>
|
||||
{s.prefix} {s.num} {s.label}
|
||||
</p>
|
||||
<p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
цвет текста: #60959c · черта: 3px solid #60959c
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/doctors" version="v1.1" specText={LLM_DOCTORS_TEXT}>
|
||||
<LlmSection title="Структура блока" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Содержимое", "Стиль"]}
|
||||
rows={[
|
||||
["H2", "«Приём ведут опытные ЛОР врачи»", "~30px (text-3xl), font-bold, #111827"],
|
||||
["Подзаголовок", "Описание принципа работы", "14px, #374151, line-height 1.7"],
|
||||
["Статистика", "3 блока в ряд, без фона", "#60959c bold + border-bottom 3px solid #60959c"],
|
||||
["Сетка врачей", "6 карточек в 1 ряд", "фото 110×150px + имя #60959c + специализация #374151"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Три показателя" />
|
||||
<LlmTable
|
||||
headers={["Число", "Описание"]}
|
||||
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="Карточка врача" />
|
||||
<LlmTable
|
||||
headers={["Поле", "Размер / Стиль"]}
|
||||
rows={[
|
||||
["Фото", "88×120px (в блоке) или 110×160px (на странице врачей), object-fit: cover"],
|
||||
["Имя", "12–14px, font-weight 500, #111827"],
|
||||
["Специализация", "11–12px, #6b7280"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "H2 + описание обязательны" },
|
||||
{ ok: true, text: "3 stat-блока в ряд, фон #dff0fa" },
|
||||
{ ok: true, text: "Сетка 6 карточек (3 колонки)" },
|
||||
{ ok: false, text: "Не показывать более 6 врачей в основном блоке" },
|
||||
{ ok: false, text: "Не убирать статистику" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,286 @@
|
||||
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.1
|
||||
|
||||
ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
|
||||
«ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых»
|
||||
Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m)
|
||||
|
||||
СТРУКТУРА БАННЕРА (двухколоночная, единый фон #f9f4e7):
|
||||
Левая колонка (~50%):
|
||||
— Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
|
||||
Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827
|
||||
— 3 пункта с галочками (✓ зелёный):
|
||||
1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
|
||||
2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров»
|
||||
3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
|
||||
Ключевое слово: uppercase bold; описание: обычный текст, ~13px
|
||||
— Кнопка «Узнать стоимость операции» — стиль: bb-btn-outline (светлая, без заливки)
|
||||
Правая колонка (~50%):
|
||||
— Фото врача с пациентом
|
||||
— Изображение занимает всю высоту блока
|
||||
|
||||
ПОД БАННЕРОМ:
|
||||
— Кнопки соцсетей (Facebook, VK, Twitter/X), цвет #6b7280
|
||||
— Счётчик просмотров
|
||||
|
||||
ЦВЕТА:
|
||||
Фон баннера: #f9f4e7 (светло-кремовый, единый для всего блока)
|
||||
Кнопка CTA: outline-стиль (светлая), не коралловая
|
||||
Заголовок блока: #111827
|
||||
Пункты: ключевое слово #111827 bold, описание #374151
|
||||
Галочка: цвет бренда (бежевый/золотой ~#bf9975)
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Фон баннера всегда #f9f4e7 (светло-кремовый) — единый, без разделения на зоны
|
||||
✓ Заголовок блока uppercase, жирный
|
||||
✓ Три пункта с галочками обязательны
|
||||
✕ Не менять фон баннера на другой цвет
|
||||
✕ Не разбивать фон на два разных цвета
|
||||
✕ Не убирать три пункта с галочками
|
||||
`.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. Двухколоночный блок, единый светло-кремовый фон <strong>#f9f4e7</strong>.
|
||||
</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: "#f9f4e7", minHeight: 280 }}
|
||||
>
|
||||
{/* Левая часть — контент на кремовом фоне */}
|
||||
<div
|
||||
className="flex flex-col justify-center gap-5 p-8"
|
||||
style={{ width: "50%", flexShrink: 0 }}
|
||||
>
|
||||
<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: "#bf9975", 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-outline">
|
||||
Узнать стоимость операции
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Правая часть — фото врача */}
|
||||
<div
|
||||
className="flex-1 relative overflow-hidden"
|
||||
style={{ minHeight: 280 }}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src="/hero-doctor.jpg"
|
||||
alt="Врач на приёме с пациентом"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
objectPosition: "center top",
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
}}
|
||||
/>
|
||||
</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="rounded-xl p-5 space-y-2"
|
||||
style={{ background: "#f5f0e8", border: "1px solid #d5cfbd" }}
|
||||
>
|
||||
<p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
|
||||
Весь баннер — единый фон <span className="font-mono">#f9f4e7</span>
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{[
|
||||
"Фон: #f9f4e7 (светло-кремовый) — одинаковый для всего блока",
|
||||
"Левая половина (~50%): заголовок uppercase bold + 3 галочки + кнопка outline",
|
||||
"Правая половина (~50%): фото врача с пациентом",
|
||||
"Минимальная высота: ~280px",
|
||||
].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>
|
||||
</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.1" specText={LLM_HERO_TEXT}>
|
||||
<LlmSection title="Структура баннера" />
|
||||
<LlmTable
|
||||
headers={["Зона", "Ширина", "Фон", "Содержимое"]}
|
||||
rows={[
|
||||
["Весь баннер", "100%", "#f9f4e7", "Единый светло-кремовый фон"],
|
||||
["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка outline"],
|
||||
["Правый блок", "~50%", "#f9f4e7 (общий)", "Фото врача с пациентом"],
|
||||
["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Три пункта баннера" />
|
||||
<LlmTable
|
||||
headers={["Ключевое слово", "Описание"]}
|
||||
rows={HERO_CHECKS.map((c) => [c.key, c.desc])}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"],
|
||||
["Кнопка CTA", "outline-стиль", "bb-btn-outline"],
|
||||
["Заголовок блока", "#111827", "—"],
|
||||
["Галочка ✓", "#bf9975", "Бежевый (--brand-081m approx.)"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Фон баннера: #f9f4e7 (светло-кремовый) — единый для всего блока" },
|
||||
{ ok: true, text: "Кнопка CTA: bb-btn-outline (светлая)" },
|
||||
{ ok: true, text: "Заголовок: uppercase, bold" },
|
||||
{ ok: true, text: "Три пункта с галочками ✓ (#bf9975)" },
|
||||
{ ok: false, text: "Не менять фон баннера на другой цвет" },
|
||||
{ ok: false, text: "Не разбивать баннер на два разных цвета фона" },
|
||||
{ ok: false, text: "Не убирать три пункта с галочками" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Блок «Новости». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const MOCK_NEWS = [
|
||||
{
|
||||
date: "20.12.2025",
|
||||
title: "Наша работа клиники и новогодние праздники",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
date: "11.08.2025",
|
||||
title: "СЕРВИС ОБНОВЛЕНИЕ: Обновление графика работы клиники",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
date: "12.06.2025",
|
||||
title: "СЕРВИС ОБНОВЛЕНИЕ: Временное изменение работы клиники 22.06.25 г.",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
date: "11.06.2025",
|
||||
title: "График работы клиники в ближайшие праздники",
|
||||
href: "#",
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_NEWS_TEXT = `
|
||||
БЛОК: Новости
|
||||
Источник: perm.oclinica.ru/lor — блок новостей внизу страницы
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА БЛОКА:
|
||||
1. ЗАГОЛОВОК H2: «Новости»
|
||||
Выравнивание: по центру или слева
|
||||
|
||||
2. СЕТКА КАРТОЧЕК НОВОСТЕЙ (4 штуки в ряд):
|
||||
Каждая карточка:
|
||||
— Дата: малый текст сверху (формат DD.MM.YYYY), цвет #6b7280
|
||||
— Заголовок новости: синяя ссылка (#0089c3), 14px, font-weight 500, hover underline
|
||||
— Без превью-изображения
|
||||
— Без описания (только дата + заголовок-ссылка)
|
||||
Hover на карточке: bg #eef4d1, box-shadow 0 0 16px 0 #9e9e9a (bb-news-card)
|
||||
|
||||
3. КНОПКА «Все новости»:
|
||||
Стиль: outline (#BF9975) или teal (#60959c), выровнена по центру под сеткой
|
||||
На сайте: ссылка «Все новости»
|
||||
|
||||
ЦВЕТА:
|
||||
Дата: #6b7280
|
||||
Заголовок-ссылка: #0089c3 (--brand-053m)
|
||||
Hover фон карточки: #eef4d1
|
||||
Hover тень: 0 0 16px 0 #9e9e9a
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ 4 карточки в ряд
|
||||
✓ Дата сверху карточки
|
||||
✓ Заголовок = ссылка #0089c3
|
||||
✓ Hover: bg #eef4d1 (класс bb-news-card)
|
||||
✓ Кнопка «Все новости» под сеткой
|
||||
✕ Не добавлять изображения в карточки новостей главной страницы
|
||||
✕ Не добавлять описание/анонс в карточку
|
||||
`.trim();
|
||||
|
||||
export default function NewsBlockPage() {
|
||||
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 — 4 карточки в ряд (дата + заголовок-ссылка),
|
||||
кнопка «Все новости».
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-8 space-y-6"
|
||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<h2 className="text-xl font-bold" style={{ color: "#111827" }}>
|
||||
Новости
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{MOCK_NEWS.map((n) => (
|
||||
<div
|
||||
key={n.date}
|
||||
className="bb-news-card rounded-lg p-3 cursor-pointer"
|
||||
style={{
|
||||
border: "1px solid var(--bb-border)",
|
||||
transition: "background 0.15s, box-shadow 0.15s",
|
||||
}}
|
||||
>
|
||||
<p className="text-xs mb-2" style={{ color: "#6b7280" }}>
|
||||
{n.date}
|
||||
</p>
|
||||
<a
|
||||
href={n.href}
|
||||
className="text-sm font-medium leading-snug block"
|
||||
style={{ color: "#0089c3", textDecoration: "none" }}
|
||||
>
|
||||
{n.title}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<button className="bb-btn bb-btn-md bb-btn-outline">
|
||||
Все новости
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия карточки */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Анатомия карточки новости
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-6 max-w-xs"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
|
||||
style={{ background: "#f0f9ff", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
① Дата: DD.MM.YYYY · цвет #6b7280
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
|
||||
style={{ background: "#f0f9ff", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
② Заголовок-ссылка · #0089c3 · font-weight 500
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
|
||||
style={{ background: "#fefce8", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
Hover: bg #eef4d1 · shadow 0 0 16px #9e9e9a
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Нет изображений, нет описания — только дата и заголовок.
|
||||
CSS-класс <code className="font-mono">.bb-news-card</code> обрабатывает hover.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/news" version="v1.0" specText={LLM_NEWS_TEXT}>
|
||||
<LlmSection title="Структура карточки новости" />
|
||||
<LlmTable
|
||||
headers={["Поле", "Стиль", "Значение"]}
|
||||
rows={[
|
||||
["Дата", "text-xs, #6b7280", "Формат DD.MM.YYYY"],
|
||||
["Заголовок", "text-sm, font-weight 500, #0089c3", "Ссылка на новость"],
|
||||
["Hover фон", ".bb-news-card:hover", "#eef4d1"],
|
||||
["Hover тень", ".bb-news-card:hover", "0 0 16px 0 #9e9e9a"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Mock-данные (4 реальные новости с сайта)" />
|
||||
<LlmTable
|
||||
headers={["Дата", "Заголовок"]}
|
||||
rows={MOCK_NEWS.map((n) => [n.date, n.title])}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "4 карточки в ряд (grid-cols-4)" },
|
||||
{ ok: true, text: "Дата сверху, заголовок-ссылка ниже" },
|
||||
{ ok: true, text: "Hover: класс bb-news-card (bg #eef4d1)" },
|
||||
{ ok: true, text: "Кнопка «Все новости» под сеткой (bb-btn-outline)" },
|
||||
{ ok: false, text: "Не добавлять изображения в карточки" },
|
||||
{ ok: false, text: "Не добавлять текст-анонс в карточку" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Блок «Отзывы». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const MOCK_REVIEWS = [
|
||||
{
|
||||
text: "Спасибо за приём, мне всё понравилось, спасибо за приём, мне всё понравилось. Врач очень внимательный и профессиональный.",
|
||||
author: "Пациент клиники",
|
||||
doctor: "Тимофеева Наталья Александровна",
|
||||
},
|
||||
{
|
||||
text: "Очень довольна лечением! Прошла курс процедур, нос дышит отлично. Рекомендую клинику всем.",
|
||||
author: "Наталья К.",
|
||||
doctor: "Макарова Людмила Тимофеевна",
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_REVIEWS_TEXT = `
|
||||
БЛОК: Отзывы о нас
|
||||
Источник: perm.oclinica.ru/lor — блок отзывов
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА БЛОКА:
|
||||
1. ЗАГОЛОВОК H2: «Отзывы о нас»
|
||||
Подзаголовок: «За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа
|
||||
более 50000 пациентов. Но дня сейчас мы высоко ценим каждый положительный отзыв и искренние слова благодарности»
|
||||
|
||||
2. КАРУСЕЛЬ ОТЗЫВОВ:
|
||||
— Большая открывающая кавычка (« «) в цвете #b8e6ed, font-size 80–100px
|
||||
— Текст отзыва: курсив, 15–16px, #374151, background #eef4d1
|
||||
— Ссылка «Читать отзыв полностью» в цвете #0089c3
|
||||
— Стрелки навигации < > по бокам (round buttons)
|
||||
— Карусель показывает 1 отзыв за раз
|
||||
|
||||
ЦВЕТА:
|
||||
Фон карточки отзыва: #eef4d1 (светло-жёлто-зелёный)
|
||||
Кавычка: #b8e6ed (светло-бирюзовый)
|
||||
Текст отзыва: #374151
|
||||
Ссылка «Читать полностью»: #0089c3
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Фон карточки отзыва: #eef4d1 (тот же что у ReviewCard)
|
||||
✓ Большая декоративная кавычка
|
||||
✓ Ссылка «Читать отзыв полностью» обязательна
|
||||
✓ Навигация карусели (стрелки)
|
||||
✕ Не показывать более 1 отзыва за раз в карусели
|
||||
✕ Не убирать навигационные стрелки
|
||||
`.trim();
|
||||
|
||||
export default function ReviewsBlockPage() {
|
||||
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-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-8 space-y-6"
|
||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
{/* Заголовок */}
|
||||
<div>
|
||||
<h2 className="text-xl font-bold mb-2" style={{ color: "#111827" }}>
|
||||
Отзывы о нас
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
|
||||
За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа
|
||||
более 50 000 пациентов. Но даже сейчас мы высоко ценим каждый положительный отзыв
|
||||
и искренние слова благодарности.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Карусель (статичная) */}
|
||||
<div className="relative flex items-center gap-4">
|
||||
{/* Стрелка влево */}
|
||||
<button
|
||||
className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
|
||||
style={{
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
}}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
|
||||
{/* Карточка отзыва */}
|
||||
<div
|
||||
className="flex-1 rounded-xl p-6 relative"
|
||||
style={{ background: "#eef4d1" }}
|
||||
>
|
||||
{/* Декоративная кавычка */}
|
||||
<div
|
||||
className="text-8xl leading-none mb-2 font-serif"
|
||||
style={{ color: "#b8e6ed", lineHeight: 0.8 }}
|
||||
>
|
||||
«
|
||||
</div>
|
||||
<p
|
||||
className="text-sm italic leading-relaxed"
|
||||
style={{ color: "#374151" }}
|
||||
>
|
||||
{MOCK_REVIEWS[0].text}
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-block mt-3 text-sm"
|
||||
style={{ color: "#0089c3" }}
|
||||
>
|
||||
Читать отзыв полностью
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Стрелка вправо */}
|
||||
<button
|
||||
className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
|
||||
style={{
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
}}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Несколько примеров */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Примеры отзывов (mock)
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{MOCK_REVIEWS.map((r, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-xl p-5 space-y-3"
|
||||
style={{ background: "#eef4d1", border: "1px solid #d4e6a0" }}
|
||||
>
|
||||
<div
|
||||
className="text-5xl leading-none font-serif"
|
||||
style={{ color: "#b8e6ed" }}
|
||||
>
|
||||
«
|
||||
</div>
|
||||
<p
|
||||
className="text-sm italic leading-relaxed"
|
||||
style={{ color: "#374151" }}
|
||||
>
|
||||
{r.text}
|
||||
</p>
|
||||
<div className="pt-1">
|
||||
<a href="#" className="text-sm" style={{ color: "#0089c3" }}>
|
||||
Читать отзыв полностью
|
||||
</a>
|
||||
</div>
|
||||
<div className="border-t pt-2" style={{ borderColor: "#c8d8a0" }}>
|
||||
<p className="text-xs font-medium" style={{ color: "#374151" }}>
|
||||
{r.author}
|
||||
</p>
|
||||
<p className="text-[11px]" style={{ color: "#6b7280" }}>
|
||||
о враче: {r.doctor}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</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: "#eef4d1", note: "светло-жёлто-зелёный" },
|
||||
{ label: "Кавычка декоративная", value: "#b8e6ed", note: "80–100px, font-serif" },
|
||||
{ label: "Текст отзыва", value: "#374151", note: "14px, italic" },
|
||||
{ label: "Ссылка", value: "#0089c3", note: "--brand-053m" },
|
||||
].map((t) => (
|
||||
<div
|
||||
key={t.label}
|
||||
className="p-3 rounded-xl space-y-1"
|
||||
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.note}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/reviews" version="v1.0" specText={LLM_REVIEWS_TEXT}>
|
||||
<LlmSection title="Структура блока" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Содержимое", "Стиль"]}
|
||||
rows={[
|
||||
["H2", "«Отзывы о нас»", "text-xl, font-bold, #111827"],
|
||||
["Подзаголовок", "Описание достижений клиники за 12 лет", "14px, #374151"],
|
||||
["Кавычка", "Декоративная «", "80–100px, #b8e6ed, font-serif"],
|
||||
["Текст отзыва", "Полный текст отзыва пациента", "14px, italic, #374151"],
|
||||
["Ссылка", "«Читать отзыв полностью»", "#0089c3"],
|
||||
["Стрелки карусели", "‹ ›", "Round buttons, фон var(--bb-sidebar-bg)"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Фон карточки отзыва", "#eef4d1", "—"],
|
||||
["Декоративная кавычка", "#b8e6ed", "—"],
|
||||
["Текст отзыва", "#374151", "—"],
|
||||
["Ссылка", "#0089c3", "--brand-053m"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Фон карточки отзыва: #eef4d1" },
|
||||
{ ok: true, text: "Декоративная кавычка цвет #b8e6ed" },
|
||||
{ ok: true, text: "Ссылка «Читать отзыв полностью» обязательна" },
|
||||
{ ok: true, text: "Навигация карусели: стрелки ‹ ›" },
|
||||
{ ok: false, text: "Не показывать несколько отзывов одновременно" },
|
||||
{ ok: false, text: "Не убирать навигационные стрелки" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -145,10 +145,15 @@ const COLOR_MAPPING = [
|
||||
web: { name: "Второстепенный текст", hex: "#949290", count: 4 },
|
||||
note: "Только на сайте — нет Oracal-аналога",
|
||||
},
|
||||
{
|
||||
brand: null,
|
||||
web: { name: "Светло-кремовый фон (Hero)", hex: "#f9f4e7", count: 1 },
|
||||
note: "Только на сайте — фон Hero-баннера страниц разделов. Нет Oracal-аналога",
|
||||
},
|
||||
{
|
||||
brand: null,
|
||||
web: { name: "Кремовый фон", hex: "#e9e4d4", count: 1 },
|
||||
note: "Только на сайте — нет Oracal-аналога",
|
||||
note: "Только на сайте — тёплые фоны кнопок-пилюль, вторичные секции. Нет Oracal-аналога",
|
||||
},
|
||||
{
|
||||
brand: null,
|
||||
@@ -177,8 +182,9 @@ const WEB_COLORS = [
|
||||
{ name: "Бирюзовый средний", hex: "#52b4bd", usage: "Вторичные цветовые акценты", count: 4, group: "Акценты" },
|
||||
{ name: "Основной текст", hex: "#464646", usage: "Цвет основного текста на сайте", count: 3, group: "Текст" },
|
||||
{ name: "Второстепенный текст", hex: "#949290", usage: "Подписи, второстепенный контент", count: 4, group: "Текст" },
|
||||
{ name: "Светло-бирюзовый фон", hex: "#b8e6ed", usage: "Фоны светлых секций с акцентом", count: 1, group: "Фоны" },
|
||||
{ name: "Кремовый фон", hex: "#e9e4d4", usage: "Тёплые фоны секций", count: 1, group: "Фоны" },
|
||||
{ name: "Светло-бирюзовый фон", hex: "#b8e6ed", 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: "#eef4d1", usage: "Фон карточек отзывов (секция «Отзывы о нас»)", count: 1, group: "Фоны" },
|
||||
{ name: "Светло-зелёный фон", hex: "#f2fee6", usage: "Фон секции новостей", count: 1, group: "Фоны" },
|
||||
@@ -424,8 +430,9 @@ Oracal | Название | HEX | RGB | CSS-пер
|
||||
Коралловый | #FFA39C | Акценты | 2 | CTA-кнопки («Запишите меня!»)
|
||||
Основной текст | #464646 | Текст | 3 | Цвет основного текста сайта
|
||||
Второстепенный текст | #949290 | Текст | 4 | Подписи, второстепенный контент
|
||||
Светло-бирюзовый фон | #B8E6ED | Фоны | 1 | Фоны светлых секций
|
||||
Кремовый фон | #E9E4D4 | Фоны | 1 | Тёплые фоны секций
|
||||
Светло-кремовый Hero | #F9F4E7 | Фоны | 1 | Фон Hero-баннера страниц разделов
|
||||
Светло-бирюзовый фон | #B8E6ED | Фоны | 1 | Фон формы записи («Будьте здоровы!»)
|
||||
Кремовый фон | #E9E4D4 | Фоны | 1 | Тёплые фоны кнопок-пилюль, вторичные секции
|
||||
Светло-жёлтый фон | #EEF4D1 | Фоны | 1 | Фон карточек отзывов
|
||||
Светло-зелёный фон | #F2FEE6 | Фоны | 1 | Фон секции новостей
|
||||
|
||||
|
||||
@@ -399,6 +399,58 @@ export default function TypographyPage() {
|
||||
</div>
|
||||
</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-спецификация */}
|
||||
<section className="mb-8">
|
||||
<div className="mb-6">
|
||||
|
||||
@@ -169,6 +169,9 @@ body {
|
||||
}
|
||||
.bb-service-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
|
||||
/* ─── Навигация сайта (Sprint 5) ────────────────────────────── */
|
||||
.bb-nav-link:hover { color: var(--brand-053m) !important; }
|
||||
|
||||
/* ─── Тумблер (Sprint 3) ──────────────────────────────────────── */
|
||||
.bb-toggle-track {
|
||||
display: inline-flex;
|
||||
|
||||
@@ -30,24 +30,19 @@ const NAV: NavSection[] = [
|
||||
{ label: "Кнопки", href: "/components/buttons" },
|
||||
{ label: "Форм-контролы", href: "/components/forms" },
|
||||
{ label: "Карточки", href: "/components/cards" },
|
||||
{ label: "Бейджи и теги", href: "/components/badges", soon: true },
|
||||
{ label: "Алерты", href: "/components/alerts", soon: true },
|
||||
{ label: "Модальные окна", href: "/components/modals", soon: true },
|
||||
{ label: "Таблицы", href: "/components/tables", soon: true },
|
||||
{ label: "Навигация", href: "/components/navigation", soon: true },
|
||||
{ label: "Шапка / Навигация", href: "/components/navigation" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Блоки",
|
||||
items: [
|
||||
{ label: "Hero", href: "/blocks/hero" },
|
||||
{ label: "CEO-текст", href: "/blocks/ceo" },
|
||||
{ label: "Наши врачи", href: "/blocks/doctors", soon: true },
|
||||
{ label: "Отзывы", href: "/blocks/reviews", soon: true },
|
||||
{ label: "Новости", href: "/blocks/news", soon: true },
|
||||
{ label: "Формы контакта", href: "/blocks/contact-forms", soon: true },
|
||||
{ label: "Контакт", href: "/blocks/contact", soon: true },
|
||||
{ label: "Услуги", href: "/blocks/services", soon: true },
|
||||
{ label: "Hero-баннер", href: "/blocks/hero" },
|
||||
{ label: "Вводный текст", href: "/blocks/ceo" },
|
||||
{ label: "Наши врачи", href: "/blocks/doctors" },
|
||||
{ label: "Отзывы", href: "/blocks/reviews" },
|
||||
{ label: "Формы записи", href: "/blocks/contact-forms" },
|
||||
{ label: "Новости", href: "/blocks/news" },
|
||||
{ label: "Подвал / Контакт", href: "/blocks/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -73,7 +68,8 @@ const NAV: NavSection[] = [
|
||||
{
|
||||
title: "Эксперименты",
|
||||
items: [
|
||||
{ label: "Библиотека", href: "/experiments", soon: true },
|
||||
{ label: "Дубли компонентов", href: "/variants/blocks", soon: true },
|
||||
{ label: "Дубли страниц", href: "/variants/pages", soon: true },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -170,7 +166,7 @@ export function Sidebar() {
|
||||
color: "var(--bb-sidebar-text-muted)",
|
||||
}}
|
||||
>
|
||||
Sprint 5 · v0.5.0
|
||||
Sprint 5 · v0.5.1
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 762 KiB |
+9
-6
@@ -2,8 +2,8 @@
|
||||
|
||||
## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
|
||||
|
||||
**Версия контекста:** 4.1
|
||||
**Дата обновления:** 2026-03-22
|
||||
**Версия контекста:** 4.2
|
||||
**Дата обновления:** 2026-03-23
|
||||
**Актуальный спринт:** Sprint 5
|
||||
**Сайт клиники:** https://oclinica.ru
|
||||
**Брендбук (локально):** http://localhost:3001
|
||||
@@ -67,8 +67,9 @@
|
||||
| Коралловый | `#ffa39c` | rgb(255,163,156) | Акценты | 2 | CTA-кнопки («Запишите меня!») |
|
||||
| Основной текст | `#464646` | rgb(70,70,70) | Текст | 3 | Цвет основного текста на сайте |
|
||||
| Второстепенный текст | `#949290` | rgb(148,146,144) | Текст | 4 | Подписи, второстепенный контент |
|
||||
| Светло-бирюзовый фон | `#b8e6ed` | rgb(184,230,237) | Фоны | 1 | Фоны светлых секций с акцентом |
|
||||
| Кремовый фон | `#e9e4d4` | rgb(233,228,212) | Фоны | 1 | Тёплые фоны секций |
|
||||
| Светло-кремовый Hero | `#f9f4e7` | rgb(249,244,231) | Фоны | 1 | Фон Hero-баннера страниц разделов |
|
||||
| Светло-бирюзовый фон | `#b8e6ed` | rgb(184,230,237) | Фоны | 1 | Фон формы записи («Будьте здоровы!») |
|
||||
| Кремовый фон | `#e9e4d4` | rgb(233,228,212) | Фоны | 1 | Тёплые фоны кнопок-пилюль, вторичные секции |
|
||||
| Светло-жёлтый фон | `#eef4d1` | rgb(238,244,209) | Фоны | 1 | Фон карточек отзывов |
|
||||
| Светло-зелёный фон | `#f2fee6` | rgb(242,254,230) | Фоны | 1 | Фон секции новостей |
|
||||
|
||||
@@ -287,9 +288,11 @@ SVG-версия ожидается (не получена от клиники).
|
||||
| `/offline/transport` | ✅ Готова | Брендирование транспорта |
|
||||
| `/components/buttons` | ✅ Готова | Кнопки — 4 варианта с реального сайта, размеры, состояния |
|
||||
| `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle |
|
||||
| `/components/cards` | 🚧 Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
|
||||
| `/components/cards` | ✅ Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
|
||||
| `/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 | Главная, заболевание, врачи, цены, контакты |
|
||||
|
||||
---
|
||||
|
||||
+145
-121
@@ -171,177 +171,201 @@
|
||||
|
||||
---
|
||||
|
||||
## Sprint 5 — Hero-блок и CEO-текст
|
||||
## Принцип документирования (Sprint 5+)
|
||||
|
||||
**Цель:** Ключевые верхние блоки страниц.
|
||||
|
||||
### Задачи
|
||||
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — добавить спецификации Hero и CEO-блоков
|
||||
- [ ] FE: Добавить LLM-блоки на страницы Hero и CEO-текст
|
||||
- [ ] FE: Hero-блок вариант 1 — фон + заголовок + CTA
|
||||
- [ ] FE: Hero-блок вариант 2 — иллюстрация сбоку
|
||||
- [ ] FE: Hero-блок вариант 3 — с встроенной формой записи
|
||||
- [ ] FE: Блок CEO-текст — фото руководителя, цитата, подпись
|
||||
- [ ] FE: Блок «Преимущества клиники» — иконки + текст
|
||||
- [ ] FE: Страница «Блоки → Hero и вступление»
|
||||
- [ ] Design: Согласование вариантов Hero под разные страницы
|
||||
|
||||
**Результат спринта:** Hero и CEO-секция полностью задокументированы.
|
||||
> **Правило:** Брендбук документирует только то, что реально существует на сайте `perm.oclinica.ru`.
|
||||
> Никаких придуманных вариантов. Процесс: сначала изучаем реальный сайт → потом воспроизводим в брендбуке.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 6 — Врачи и профиль врача
|
||||
## Sprint 5 — Все блоки текущего сайта
|
||||
|
||||
**Цель:** Блоки и компоненты, связанные с врачами.
|
||||
**Цель:** Задокументировать ВСЕ блоки страницы perm.oclinica.ru/lor за один спринт.
|
||||
Источник: скриншот страницы + CSS сайта. Только фронтенд, mock-данные.
|
||||
|
||||
### Задачи
|
||||
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — добавить спецификации блоков врачей
|
||||
- [ ] FE: Добавить LLM-блок на страницу «Блоки → Врачи»
|
||||
- [ ] FE: Блок «Наши врачи» — сетка карточек с фильтром по специализации
|
||||
- [ ] FE: Блок «Врач — профиль» (полная страница): фото, биография, специализации, расписание
|
||||
- [ ] FE: Компонент «Расписание / слоты записи»
|
||||
- [ ] FE: Компонент навигации (header menu, breadcrumbs)
|
||||
- [ ] FE: Пагинация
|
||||
- [ ] FE: Страница «Блоки → Врачи»
|
||||
### Блоки с реального сайта (сверху вниз, по скриншоту /lor)
|
||||
|
||||
**Результат спринта:** Все блоки о врачах готовы.
|
||||
**Шапка и навигация** → `/components/navigation`
|
||||
- [ ] FE: Топ-бар: адрес «Б. Цитная, 3», телефон /342/ 255-53-84, кнопка «Заказать звонок» (pill)
|
||||
- [ ] FE: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н. ОЛЕНЕВОЙ»
|
||||
- [ ] FE: Главное меню: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты
|
||||
|
||||
**Hero-баннер** → `/blocks/hero`
|
||||
- [x] FE: Баннер — единый фон #f9f4e7 (светло-кремовый, замерян пикселем), галочки #bf9975
|
||||
- [x] FE: Правая часть: реальное фото врача с пациентом (спарсено с сайта → public/hero-doctor.jpg)
|
||||
- [x] LLM: v1.1 — исправлен цвет фона, кнопка outline, галочки бежевые
|
||||
|
||||
**Вводный текст (CEO-блок)** → `/blocks/ceo`
|
||||
- [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы
|
||||
|
||||
**Блок врачей** → `/blocks/doctors`
|
||||
- [x] FE: Заголовок text-3xl + 3 стат-блока (без фона, #60959c + border-bottom) + сетка 6 карточек
|
||||
- [x] FE: Реальные фото 6 врачей (спарсены с сайта → public/doctors/)
|
||||
- [x] FE: Реальные имена и специализации врачей из слайдера /lor
|
||||
- [x] LLM: v1.1
|
||||
|
||||
**Блок отзывов** → `/blocks/reviews`
|
||||
- [ ] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки
|
||||
|
||||
**Формы записи** → `/blocks/contact-forms`
|
||||
- [ ] FE: Форма «Будьте здоровы!» (фон #b8e6ed, поля: имя/телефон/врач, кнопка «Запишите меня!»)
|
||||
- [ ] FE: Форма «Узнайте стоимость операции» (белый фон, поля: имя/телефон, кнопка «Перезвоните мне»)
|
||||
|
||||
**Блок новостей** → `/blocks/news`
|
||||
- [ ] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock)
|
||||
|
||||
**Footer (подвал)** → `/blocks/contact`
|
||||
- [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы
|
||||
|
||||
### Общее к Sprint 5
|
||||
- [x] FE: LLM-блоки на hero v1.1 и doctors v1.1
|
||||
- [x] Docs: Типографика сайта — реальные стили на 23.03.2026 (новый раздел в /foundation/typography)
|
||||
- [x] Docs: Цвета — исправлен #f9f4e7 (Hero), #b8e6ed (форма), #e9e4d4 (пилюли)
|
||||
- [ ] FE: Убрать `soon` у Hero и Doctors в Sidebar
|
||||
- [ ] FE: CEO-блок, отзывы, формы, новости, footer
|
||||
- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md` по итогам Sprint 5
|
||||
|
||||
**Результат спринта (в работе):** Hero + Doctors задокументированы с реальными фото и точными цветами.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 7 — Отзывы и новости
|
||||
## Sprint 6 — Страницы (сборки из блоков)
|
||||
|
||||
**Цель:** Контентные блоки сайта.
|
||||
**Цель:** Задокументировать полные страницы как сборки уже готовых блоков.
|
||||
Данные пока mock — реальные появятся в Sprint 8.
|
||||
|
||||
### Задачи
|
||||
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — добавить спецификации блоков отзывов и новостей
|
||||
- [ ] FE: Добавить LLM-блок на страницу «Блоки → Отзывы и новости»
|
||||
- [ ] FE: Блок отзывов — карусель
|
||||
- [ ] FE: Блок отзывов — статичная сетка
|
||||
- [ ] FE: Блок рейтинга (звёзды + количество отзывов)
|
||||
- [ ] FE: Блок новостей — сетка превью (3 в ряд)
|
||||
- [ ] FE: Блок новостей — горизонтальный список
|
||||
- [ ] FE: Блок «Последние новости» для сайдбара
|
||||
- [ ] FE: Блок услуг / заболеваний — иконки + список
|
||||
- [ ] FE: Страница «Блоки → Отзывы и новости»
|
||||
- [ ] Research: Страница заболевания perm.oclinica.ru/lor/rinit — порядок блоков, что отличается от главной
|
||||
- [ ] Research: Страница врачей /lor/doctors — фильтры, сетка, пагинация
|
||||
- [ ] FE: `/pages/home` — сборка блоков из Sprint 5 в порядке реальной страницы /lor
|
||||
- [ ] FE: `/pages/disease` — страница заболевания по /lor/rinit
|
||||
- [ ] FE: `/pages/doctors` — список врачей с фильтрами (mock) и пагинацией
|
||||
- [ ] FE: `/pages/prices` — страница цен (Research: реальная структура таблицы)
|
||||
- [ ] FE: `/pages/contacts` — контакты + карта
|
||||
- [ ] FE: `/pages/doctor` — профиль врача
|
||||
- [ ] FE: Убрать `soon` у страниц в Sidebar
|
||||
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md`
|
||||
|
||||
**Результат спринта:** Контентные блоки задокументированы.
|
||||
**Результат спринта:** Все страницы брендбука задокументированы (с mock-данными).
|
||||
|
||||
---
|
||||
|
||||
## Sprint 8 — Формы контакта и модальные окна
|
||||
## Sprint 7 — Авторизация (viewer / editor)
|
||||
|
||||
**Цель:** Все формы и диалоги взаимодействия с пациентом.
|
||||
**Цель:** Реализовать систему ролей из ТЗ: `viewer` видит брендбук, `editor` видит кнопки дублирования.
|
||||
Требует бэкенд (NestJS) и БД (PostgreSQL + Prisma).
|
||||
|
||||
### Задачи
|
||||
- [ ] Docs: Обновить `docs/LLM_CONTEXT.md` — добавить спецификации форм и модальных окон
|
||||
- [ ] FE: Добавить LLM-блок на страницу «Блоки → Формы и контакты»
|
||||
- [ ] FE: Форма записи — короткая (имя, телефон)
|
||||
- [ ] FE: Форма записи — расширенная (имя, телефон, специализация, врач, дата)
|
||||
- [ ] FE: Форма записи в модальном окне
|
||||
- [ ] FE: Контактная форма (имя, email, сообщение)
|
||||
- [ ] FE: Блок «Контакт» — карта + адрес + часы работы
|
||||
- [ ] FE: Модальное окно — информационное
|
||||
- [ ] FE: Модальное окно — подтверждение
|
||||
- [ ] FE: Страница «Блоки → Формы и контакты»
|
||||
### Задачи — бэкенд
|
||||
- [ ] BE: Prisma-модель `User` (id, email, name, passwordHash, role: viewer/editor, createdAt)
|
||||
- [ ] BE: Prisma миграция + seed (создать тестовых пользователей: 1 viewer, 1 editor)
|
||||
- [ ] BE: NestJS модуль `auth` — JWT-авторизация, `/api/auth/login`, `/api/auth/me`
|
||||
- [ ] BE: JWT-токен в httpOnly cookie (не localStorage) — ФТ-64
|
||||
- [ ] BE: Guard для защиты эндпоинтов по роли
|
||||
|
||||
**Результат спринта:** Все формы и диалоги готовы.
|
||||
### Задачи — фронтенд
|
||||
- [ ] FE: Страница `/login` — форма email + пароль + кнопка «Войти» — ФТ-61
|
||||
- [ ] FE: Редирект неавторизованных на `/login` — ФТ-60
|
||||
- [ ] FE: После входа — редирект обратно на запрошенную страницу — ФТ-62
|
||||
- [ ] FE: В шапке брендбука: имя пользователя, роль, кнопка «Выйти» — ФТ-63
|
||||
- [ ] FE: `editor` видит шапку с дополнительными действиями; `viewer` — только чтение
|
||||
|
||||
**Результат спринта:** Рабочая авторизация, два типа пользователей, защищённые маршруты.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 9 — Страницы: Главная и Заболевание
|
||||
## Sprint 8 — Реальные данные (интеграция с oclinica.ru)
|
||||
|
||||
**Цель:** Первые две полноразмерные страницы в брендбуке.
|
||||
**Цель:** Подключить реальные данные с сайта клиники — врачи, новости, услуги, цены, отзывы.
|
||||
Данные проксируются через NestJS с кэшем 15 минут — ИНТ-01-04.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Страница «Главная» — сборка из утверждённых блоков
|
||||
- [ ] FE: Страница «Заболевание» — Hero (мини), описание, врачи по теме, форма
|
||||
- [ ] FE: Раздел «Страницы» в навигации брендбука
|
||||
- [ ] FE: Адаптивность страниц (desktop / tablet / mobile)
|
||||
- [ ] Design: Ревью и согласование страниц
|
||||
### Задачи — бэкенд
|
||||
- [ ] BE: Research — проверить доступные эндпоинты oclinica.ru (JSON:API Drupal или /node?_format=json)
|
||||
- [ ] BE: NestJS модуль `oclinica` — HTTP-клиент к oclinica.ru API
|
||||
- [ ] BE: Кэш TTL 15 минут (in-memory или Redis) — ИНТ-03
|
||||
- [ ] BE: Graceful degradation: если API недоступен — возврат mock-данных — ИНТ-04
|
||||
- [ ] BE: Эндпоинты: `/api/doctors`, `/api/news`, `/api/services`, `/api/prices`, `/api/reviews`
|
||||
|
||||
**Результат спринта:** 2 страницы задокументированы в брендбуке.
|
||||
### Задачи — фронтенд
|
||||
- [ ] FE: Блок «Наши врачи» (`/blocks/doctors`) — реальные карточки врачей с фото
|
||||
- [ ] FE: Блок «Новости» (`/blocks/news`) — реальные новости
|
||||
- [ ] FE: Страницы (`/pages/*`) — замена mock-данных на реальные
|
||||
|
||||
**Результат спринта:** Брендбук показывает реальных врачей, новости, услуги с сайта клиники.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 10 — Страницы: Врачи, Врач, Цены
|
||||
## Sprint 9 — Эксперименты: дублирование компонентов
|
||||
|
||||
**Цель:** Три страницы с ключевым контентом.
|
||||
**Цель:** Реализовать систему создания дублей — `editor` может дублировать любой компонент/блок,
|
||||
редактировать атрибуты и отправить на согласование. ФТ-50 – ФТ-56.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Страница «Все врачи» — фильтры, сетка, пагинация
|
||||
- [ ] FE: Страница «Врач (профиль)»
|
||||
- [ ] FE: Страница «Цены» — фильтры, таблица, форма
|
||||
- [ ] FE: Таблица цен с сортировкой
|
||||
- [ ] FE: Адаптивность всех трёх страниц
|
||||
- [ ] Design: Ревью страниц
|
||||
### Задачи — бэкенд
|
||||
- [ ] BE: Prisma-модель `ExperimentalComponent` (id, name, baseComponent, attributes JSON, status, authorId, createdAt, updatedAt)
|
||||
- [ ] BE: Prisma миграция
|
||||
- [ ] BE: NestJS модуль `components` — CRUD: `POST /api/components`, `GET /api/components`, `PATCH /api/components/:id`, `DELETE /api/components/:id`
|
||||
- [ ] BE: Эндпоинт смены статуса: `PATCH /api/components/:id/status` (draft→review→approved)
|
||||
- [ ] BE: Guard: мутирующие операции только для `editor` — ФТ-52, ФТ-55
|
||||
|
||||
**Результат спринта:** Ещё 3 страницы в брендбуке.
|
||||
### Задачи — фронтенд
|
||||
- [ ] FE: Кнопка «Дублировать» на каждом компоненте/блоке (видна только `editor`) — ФТ-51
|
||||
- [ ] FE: Форма редактирования атрибутов дубля — ФТ-52:
|
||||
- Текстовые поля (заголовки, описания)
|
||||
- Color picker — только из токенов бренда (`--brand-*`)
|
||||
- Выбор размера из допустимых значений
|
||||
- Real-time preview при изменении
|
||||
- Кнопки: «Сохранить как черновик», «Отмена»
|
||||
- [ ] FE: Раздел `/variants/blocks` — список всех дублей компонентов — ФТ-50, ФТ-56:
|
||||
- `viewer`: только approved
|
||||
- `editor`: все (draft, review, approved)
|
||||
- [ ] FE: Карточка дубля: название, автор, дата, статус, базовый компонент, превью — ФТ-56
|
||||
- [ ] FE: Управление статусом для `editor`: draft→review→approved, удаление draft — ФТ-54, ФТ-55
|
||||
|
||||
**Результат спринта:** Рабочая система создания и согласования дублей компонентов.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 11 — Страница Контакты и Экспериментальная секция (MVP)
|
||||
## Sprint 10 — Финальная полировка и деплой
|
||||
|
||||
**Цель:** Последняя страница + запуск механизма экспериментов.
|
||||
**Цель:** Финальный релиз — smoke-тест, адаптивность, деплой бэкенда.
|
||||
|
||||
### Задачи
|
||||
- [ ] FE: Страница «Контакты»
|
||||
- [ ] BE + DB: Модели `Component`, `Page`, `Block` в Prisma
|
||||
- [ ] BE: CRUD API для компонентов (`/api/components`)
|
||||
- [ ] BE: CRUD API для страниц (`/api/pages`)
|
||||
- [ ] FE: Секция «Эксперименты» в брендбуке
|
||||
- [ ] FE: Форма создания нового экспериментального компонента
|
||||
- [ ] FE: Список экспериментальных компонентов со статусами
|
||||
|
||||
**Результат спринта:** Все страницы готовы, эксперименты — базовый функционал.
|
||||
|
||||
---
|
||||
|
||||
## Sprint 12 — Полировка, финальный деплой и документация
|
||||
|
||||
**Цель:** Финальный релиз. Фронтенд уже живёт на Vercel с Sprint 2, Sprint 12 — финальная полировка и production-готовность бэкенда.
|
||||
|
||||
### Задачи
|
||||
- [ ] BE + FE: Полный smoke-тест всего брендбука
|
||||
- [ ] FE: Мобильная адаптация — финальная проверка всех страниц
|
||||
- [ ] FE: Accessibility-аудит (WCAG AA)
|
||||
- [ ] Деплой BE: выбрать и настроить хостинг для NestJS + PostgreSQL
|
||||
- [ ] Деплой: настроить автоматический деплой через Gitea Actions → Vercel (при пуше в `main`)
|
||||
- [ ] Docs: Обновление `docs/DEPLOY.md` финальными инструкциями
|
||||
- [ ] Design: Финальный ревью брендбука
|
||||
- [ ] BE+FE: Полный smoke-тест всего брендбука (все роли, все страницы)
|
||||
- [ ] FE: LLM-блоки на всех страницах — проверка актуальности
|
||||
- [ ] FE: Мобильная адаптация — финальная проверка (1440 / 768 / 375px)
|
||||
- [ ] FE: Accessibility-аудит WCAG AA — особенно форма дублирования
|
||||
- [ ] Деплой BE: выбрать хостинг для NestJS + PostgreSQL (Railway / Render / VPS клиники)
|
||||
- [ ] Деплой: автоматический деплой через Gitea Actions → Vercel (push в `main`)
|
||||
- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md`, `DEPLOY.md`
|
||||
|
||||
### Текущий статус деплоя
|
||||
- **Фронтенд:** https://web-oclinica.vercel.app (Vercel Hobby, задеплоен в Sprint 2)
|
||||
- **Фронтенд:** https://web-oclinica.vercel.app (Vercel Hobby)
|
||||
- **Команда деплоя:** `cd apps/web && vercel --prod --yes`
|
||||
- **Бэкенд:** локально (Docker Compose), хостинг выбирается в Sprint 12
|
||||
- **Бэкенд:** локально (Docker Compose), хостинг выбирается в Sprint 10
|
||||
|
||||
**Результат спринта:** Брендбук полностью готов, оба сервиса задеплоены, автодеплой настроен.
|
||||
**Результат спринта:** Брендбук полностью готов, оба сервиса задеплоены, реальные данные, роли работают.
|
||||
|
||||
---
|
||||
|
||||
## Сводная таблица
|
||||
|
||||
| Спринт | Тема | Ключевой результат |
|
||||
|--------|---------------------------------------|-----------------------------------------|
|
||||
| 1 | Инициализация + Логотип | Брендбук запускается, страница Логотипа готова |
|
||||
| 2 | Цвета, Типографика, Оффлайн элементы | Фундамент + оффлайн раздел готовы |
|
||||
| 3 | Кнопки и форм-контролы | Базовые компоненты готовы |
|
||||
| 4 | Карточки | Все карточки задокументированы |
|
||||
| 5 | Hero и CEO-текст | Ключевые блоки страниц готовы |
|
||||
| 6 | Врачи | Блоки о врачах готовы |
|
||||
| 7 | Отзывы и новости | Контентные блоки готовы |
|
||||
| 8 | Формы и модальные окна | Все формы задокументированы |
|
||||
| 9 | Страницы: Главная, Заболевание | 2 страницы в брендбуке |
|
||||
| 10 | Страницы: Врачи, Цены | 3 страницы в брендбуке |
|
||||
| 11 | Контакты + Эксперименты MVP | Все страницы + система экспериментов |
|
||||
| 12 | Деплой и полировка | Брендбук живёт в продакшне |
|
||||
| Спринт | Тема | Слой | Суть |
|
||||
|--------|---------------------------------|---------------|--------------------------------------------------------|
|
||||
| 1 | Инициализация + Логотип | FE | PDF брендбука, первая страница |
|
||||
| 2 | Цвета, Типографика, Оффлайн | FE | PDF + Oracal каталог |
|
||||
| 3 | Кнопки и форм-контролы | FE | CSS реального сайта |
|
||||
| 4 | Карточки, бейджи, алерты | FE | CSS реального сайта |
|
||||
| 5 | ВСЕ блоки сайта | FE | Все блоки /lor, mock-данные |
|
||||
| 6 | Все страницы (сборки) | FE | Сборки из блоков, mock-данные |
|
||||
| 7 | Авторизация (viewer / editor) | BE + FE | JWT, роли, login-страница, шапка с именем |
|
||||
| 8 | Реальные данные | BE + FE | NestJS прокси → oclinica.ru, кэш 15 мин |
|
||||
| 9 | Эксперименты (дубли) | BE + FE | Duplicate button, форма атрибутов, статусы, раздел |
|
||||
| 10 | Финальная полировка | BE + FE | Smoke-тест, деплой бэкенда, адаптивность |
|
||||
|
||||
---
|
||||
|
||||
## Backlog (вне основных спринтов)
|
||||
|
||||
- Тёмная тема
|
||||
- Экспорт компонентов в Figma
|
||||
- Drag-and-drop конструктор страниц
|
||||
- История версий экспериментальных компонентов
|
||||
- Мультиязычность (если потребуется)
|
||||
- Раздел «Логотип»: активация кнопки скачивания SVG (после получения вектора)
|
||||
- Экспериментальная секция — если потребуется CRUD API (NestJS + Prisma)
|
||||
- Тёмная тема — только если появится на реальном сайте
|
||||
- Мультиязычность — только если появится на реальном сайте
|
||||
|
||||
Reference in New Issue
Block a user