Browse Source
Created 8 pages from real site (screenshot source): - /components/navigation — header: top-bar, logo, nav menu (8 items) - /blocks/hero — hero banner: #b8e6ed bg, 3 checkmarks, CTA button - /blocks/ceo — intro text: clinic description + Q&A stimuli - /blocks/doctors — doctors: 3 stats (#dff0fa) + 6 card grid - /blocks/reviews — reviews carousel: #eef4d1 bg, decorative quote - /blocks/contact-forms — 2 forms: "Будьте здоровы!" (#b8e6ed) + "Стоимость" - /blocks/news — 4 news cards row + "Все новости" button - /blocks/contact — footer: 4 link columns + logo + address + hours globals.css: added .bb-nav-link:hover (#0089c3) Sidebar: all blocks/navigation unlocked (removed soon), v0.5.1 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>sprint/5
AR 15 M4
1 week ago
10 changed files with 2020 additions and 10 deletions
@ -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,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> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue