From d4d86e634361481cd8ee66f1aed2ecb386c469a5 Mon Sep 17 00:00:00 2001 From: AR 15 M4 Date: Mon, 23 Mar 2026 00:05:10 +0500 Subject: [PATCH] feat(sprint-5): document all blocks from perm.oclinica.ru/lor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- apps/web/app/blocks/ceo/page.tsx | 224 +++++++++++++++ apps/web/app/blocks/contact-forms/page.tsx | 236 +++++++++++++++ apps/web/app/blocks/contact/page.tsx | 257 +++++++++++++++++ apps/web/app/blocks/doctors/page.tsx | 225 +++++++++++++++ apps/web/app/blocks/hero/page.tsx | 304 ++++++++++++++++++++ apps/web/app/blocks/news/page.tsx | 198 +++++++++++++ apps/web/app/blocks/reviews/page.tsx | 264 +++++++++++++++++ apps/web/app/components/navigation/page.tsx | 300 +++++++++++++++++++ apps/web/app/globals.css | 3 + apps/web/components/layout/Sidebar.tsx | 19 +- 10 files changed, 2020 insertions(+), 10 deletions(-) create mode 100644 apps/web/app/blocks/ceo/page.tsx create mode 100644 apps/web/app/blocks/contact-forms/page.tsx create mode 100644 apps/web/app/blocks/contact/page.tsx create mode 100644 apps/web/app/blocks/doctors/page.tsx create mode 100644 apps/web/app/blocks/hero/page.tsx create mode 100644 apps/web/app/blocks/news/page.tsx create mode 100644 apps/web/app/blocks/reviews/page.tsx create mode 100644 apps/web/app/components/navigation/page.tsx diff --git a/apps/web/app/blocks/ceo/page.tsx b/apps/web/app/blocks/ceo/page.tsx new file mode 100644 index 0000000..c71bf22 --- /dev/null +++ b/apps/web/app/blocks/ceo/page.tsx @@ -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 ( +
+ {/* Заголовок страницы */} +
+

+ Блоки +

+

+ Вводный текст (CEO-блок) +

+

+ Блок после hero-баннера на perm.oclinica.ru/lor. Описание специализации клиники + + вопросы-стимулы для пациентов. +

+
+ + {/* Живой пример */} +
+

+ Живой пример +

+
+

+ Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей + с ЛОР заболеваниями. ЛОР клиника представлена на двух адресах:{" "} + ул. Цитная, 9, ул. Г. Звезда, 31а.{" "} + Это Клиника лечения кашля и аллергии. +

+ +
+ {CEO_QUESTIONS.map((q) => ( +

— {q}

+ ))} +
+ +

+ Обращайтесь в ЛОР центр ухо, горло, нос в Перми, наши врачи оториноларингологи обязательно Вам помогут! +

+

+ Клиника ЛОР болезней ухо, горло, нос – это наиболее современный центр оториноларингологии в Перми, + благодаря эндоскопическому оборудованию, высокому профессионализму оториноларингологов. +

+

Будьте здоровы!

+
+
+ + {/* Анатомия */} +
+

+ Структура блока +

+
+ {[ + { + num: "1", + title: "Вводный абзац", + bg: "#f0f9ff", + desc: 'Специализация клиники, адреса. Ключевые слова — ссылки синего цвета (#0089c3).', + }, + { + num: "2", + title: "Вопросы-стимулы", + bg: "#fefce8", + desc: 'Каждый вопрос — отдельный абзац, начинается с «—». Адресован пациенту с конкретным симптомом.', + }, + { + num: "3", + title: "Заключительный абзац", + bg: "#f0fdf4", + desc: 'Призыв обращаться. «Будьте здоровы!» — фирменная подпись клиники.', + }, + ].map((s) => ( +
+
+ {s.num} +
+
+

+ {s.title} +

+

+ {s.desc} +

+
+
+ ))} +
+
+ + {/* Вопросы-стимулы */} +
+

+ Вопросы-стимулы (5 штук) +

+
+ {CEO_QUESTIONS.map((q, i) => ( +
+ + — + + {q} +
+ ))} +
+
+ + {/* LLM блок */} + + + + + + + + +
+ ); +} diff --git a/apps/web/app/blocks/contact-forms/page.tsx b/apps/web/app/blocks/contact-forms/page.tsx new file mode 100644 index 0000000..e9f2384 --- /dev/null +++ b/apps/web/app/blocks/contact-forms/page.tsx @@ -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 ( +
+ {/* Заголовок страницы */} +
+

+ Блоки +

+

+ Формы записи +

+

+ Два блока форм с perm.oclinica.ru/lor — запись на приём и запрос стоимости операции. +

+
+ + {/* Форма 1: Будьте здоровы */} +
+

+ Форма 1 — «Будьте здоровы!» +

+

+ Фон секции: #b8e6ed. Запись на приём к врачу. +

+
+
+

+ Будьте здоровы! +

+

+ Запишитесь на приём к врачу! +

+
+
+ + + + + +
+
+
+ + {/* Форма 2: Узнайте стоимость */} +
+

+ Форма 2 — «Узнайте стоимость операции» +

+

+ Фон секции: #ffffff. Запрос консультации по стоимости. +

+
+
+

+ Узнайте стоимость операции +

+

+ Проконсультируйтесь с ассистентом хирурга +

+
+
+ + + + +
+
+
+ + {/* Сравнение двух форм */} +
+

+ Сравнение двух форм +

+
+ + + + + + + + + + {[ + ["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"], + ["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"], + ["Фон секции", "#b8e6ed", "#ffffff"], + ["Поля", "Имя + Телефон + Select врача + Checkbox", "Имя + Телефон + Checkbox"], + ["Кнопка", "«Запишите меня!»", "«Перезвоните мне»"], + ["Стиль кнопки", "bb-btn-primary (#FFA39C)", "bb-btn-primary (#FFA39C)"], + ].map(([param, f1, f2]) => ( + + + + + + ))} + +
ПараметрФорма 1 «Будьте здоровы!»Форма 2 «Стоимость операции»
{param}{f1}{f2}
+
+
+ + {/* LLM блок */} + + + + + + + + +
+ ); +} diff --git a/apps/web/app/blocks/contact/page.tsx b/apps/web/app/blocks/contact/page.tsx new file mode 100644 index 0000000..c982f2f --- /dev/null +++ b/apps/web/app/blocks/contact/page.tsx @@ -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 ( +
+ {/* Заголовок страницы */} +
+

+ Блоки +

+

+ Подвал (Footer) +

+

+ Подвал сайта с perm.oclinica.ru — 4 колонки ссылок, логотип, адрес, часы работы, соцсети. +

+
+ + {/* Живой пример */} +
+

+ Живой пример +

+
+ {/* 4 колонки ссылок */} +
+ {FOOTER_COLUMNS.map((col) => ( +
+

+ {col.title} +

+ +
+ ))} +
+ + {/* Нижняя полоса */} +
+ {/* Логотип */} +
+
+ ✚ +
+
+
+ Клиника
ухо, горло, нос +
+
+ им. проф. Е.Н.Оленевой +
+
+
+ + {/* Адрес и соцсети */} +
+

+ Мы находимся по адресу: Пермь, ул. Г. Звезда, 31а +

+
+ {["VK", "OK", "YT", "TG"].map((s) => ( + + {s} + + ))} +
+
+ + {/* Часы работы */} +
+

+ Часы работы: +

+

Пн–пт: 9:00–21:00

+

Сб: 9:00–18:00

+

Вс: выходной

+
+
+
+
+ + {/* Колонки */} +
+

+ Четыре колонки ссылок +

+
+ {FOOTER_COLUMNS.map((col) => ( +
+

+ {col.title} +

+

+ {col.links.length} ссылок +

+
+ ))} +
+
+ + {/* LLM блок */} + + + + + + + + + + +
+ ); +} diff --git a/apps/web/app/blocks/doctors/page.tsx b/apps/web/app/blocks/doctors/page.tsx new file mode 100644 index 0000000..c6447c0 --- /dev/null +++ b/apps/web/app/blocks/doctors/page.tsx @@ -0,0 +1,225 @@ +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 MOCK_DOCTORS = [ + { name: "Макарова Людмила Тимофеевна", spec: "ЛОР врач, сурдолог" }, + { name: "Тимофеева Наталья Александровна", spec: "ЛОР врач, мед. Завед. центром сурдологии и а..." }, + { name: "Воронникова Наталья Валентиновна", spec: "Отоларинголог, ЛОР-хирург" }, + { name: "Лобанова Ирина Юрьевна", spec: "ЛОР врач, сурдолог" }, + { name: "Тарасова Наталья Сергеевна", spec: "Специалист по сурдопротезированию (Сурдолог)" }, + { name: "Сильянова Светлана Викторовна", spec: "ЛОР врач, сурдолог" }, +]; + +const LLM_DOCTORS_TEXT = ` +БЛОК: Наши врачи +Источник: perm.oclinica.ru/lor — блок под CEO-текстом +Версия: v1.0 + +СТРУКТУРА БЛОКА: +1. ЗАГОЛОВОК H2: «Приём ведут опытные ЛОР врачи» + Подзаголовок: описание принципа работы врачей клиники + +2. БЛОК СТАТИСТИКИ (3 показателя в ряд): + — «Ежедневно 27 ЛОР врачей работает в клинике» + — «В том числе 6 кандидатов медицинских наук» + — «Свыше 12 000 успешно проведённых операций» + Стиль: число крупное (20px+, bold), текст мелкий (#6b7280), фон #dff0fa + +3. СЕТКА КАРТОЧЕК ВРАЧЕЙ (6 штук, 3 в ряд): + Каждая карточка: + — Фото врача (110×160px или больше, object-fit: cover) + — Имя (14px, font-weight 500) + — Специализация (12px, #6b7280) + Карточки без рамки, простой вертикальный стек + +ЦВЕТА: + Заголовок H2: #111827 + Блок статистики фон: #dff0fa (светло-синий) + Число в статистике: #0089c3 (--brand-053m) + Имя врача: #111827 + Специализация: #6b7280 + +ПРАВИЛА: +✓ Заголовок H2 + описание обязательны +✓ 3 stat-блока в ряд +✓ Сетка 3 колонки, 2 ряда (6 карточек) +✕ Не отображать более 6 врачей в основном блоке +✕ Не убирать статистику +`.trim(); + +export default function DoctorsBlockPage() { + return ( +
+ {/* Заголовок страницы */} +
+

+ Блоки +

+

+ Блок «Наши врачи» +

+

+ Блок на странице perm.oclinica.ru/lor — заголовок, 3 стат-блока, сетка из 6 карточек врачей. +

+
+ + {/* Живой пример */} +
+

+ Живой пример +

+
+ {/* Заголовок */} +
+

+ Приём ведут опытные ЛОР врачи +

+

+ Фундаментальная теоретическая подготовка и большой практический опыт в сочетании + с внимательным индивидуальным подходом является причиной лечения тысяч наших пациентов. +

+
+ + {/* Статистика */} +
+ {STATS.map((s) => ( +
+

+ {s.prefix} +

+

+ {s.num} +

+

+ {s.label} +

+
+ ))} +
+ + {/* Сетка врачей */} +
+ {MOCK_DOCTORS.map((doc) => ( +
+ {/* Фото-заглушка */} +
+ 👩‍⚕️ +
+
+

+ {doc.name} +

+

+ {doc.spec} +

+
+
+ ))} +
+
+
+ + {/* Стат-блоки */} +
+

+ Блок статистики +

+
+ {STATS.map((s) => ( +
+

+ {s.prefix} +

+

+ {s.num} +

+

+ {s.label} +

+

+ фон: #dff0fa · число: #0089c3 +

+
+ ))} +
+
+ + {/* LLM блок */} + + + + + [`${s.prefix} ${s.num}`, s.label])} + /> + + + + + +
+ ); +} diff --git a/apps/web/app/blocks/hero/page.tsx b/apps/web/app/blocks/hero/page.tsx new file mode 100644 index 0000000..4a94074 --- /dev/null +++ b/apps/web/app/blocks/hero/page.tsx @@ -0,0 +1,304 @@ +import type { Metadata } from "next"; +import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock"; + +export const metadata: Metadata = { + title: "Hero-баннер. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой", +}; + +const LLM_HERO_TEXT = ` +БЛОК: Hero-баннер (главный баннер страницы) +Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР +Версия: v1.0 + +ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером): +«ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых» +Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m) + +СТРУКТУРА БАННЕРА (двухколоночная, фон: #b8e6ed): +Левая колонка (~50%, белый блок): + — Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ» + Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827 + — 3 пункта с галочками (✓ зелёный): + 1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы» + 2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия смяткими размерами» + 3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки» + Ключевое слово: uppercase bold; описание: обычный текст, ~13px + — Кнопка «Узнать стоимость операции» — стиль: bb-btn-primary (#FFA39C) +Правая колонка (~50%): + — Фото врача с пациентом, фон #b8e6ed + — Изображение занимает всю высоту блока + +ПОД БАННЕРОМ: + — Кнопки соцсетей (Facebook, VK, Twitter/X), цвет #6b7280 + — Счётчик просмотров + +ЦВЕТА: + Фон баннера: #b8e6ed (светло-бирюзовый) + Левый блок: #ffffff + Кнопка CTA: #FFA39C (--bb-btn-primary) + Заголовок: #111827 + Пункты: ключ #111827 bold, описание #374151 + +ПРАВИЛА: +✓ Фон баннера всегда #b8e6ed +✓ Кнопка CTA — всегда primary (#FFA39C) +✓ Заголовок блока uppercase, жирный +✕ Не менять фон баннера на другой цвет +✕ Не убирать все 3 пункта с галочками +`.trim(); + +const HERO_CHECKS = [ + { + key: "БЕЗОПАСНО", + desc: "оперируют хирурги с 15-летним опытом работы", + }, + { + key: "БЕЗ ВНЕШНИХ РАЗРЕЗОВ", + desc: "хирургия смяткими размерами", + }, + { + key: "БЫСТРО", + desc: "под наблюдением врача пациент находится 1 сутки", + }, +]; + +export default function HeroPage() { + return ( +
+ {/* Заголовок страницы */} +
+

+ Блоки +

+

+ Hero-баннер +

+

+ Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок с фоном #b8e6ed. +

+
+ + {/* Живой пример */} +
+

+ Живой пример +

+ + {/* H1 страницы */} +

+ ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых +

+ + {/* Баннер */} +
+ {/* Левая часть — белый блок */} +
+

+ Эндоскопическое хирургическое лечение ЛОР органов +

+
    + {HERO_CHECKS.map((c) => ( +
  • + + ✓ + + + + {c.key} + {" "} + – {c.desc} + +
    • + ))} +
+
+ +
+
+ + {/* Правая часть — фото-заглушка */} +
+
+
+ 👨‍⚕️ +
+

+ Фото врача с пациентом +

+

+ Фон: #b8e6ed +

+
+
+
+ + {/* Под баннером: соцсети */} +
+ + Поделиться: + + {["VK", "FB", "TW"].map((s) => ( + + ))} + + 👁 98 573 просмотра + +
+
+ + {/* Анатомия */} +
+

+ Анатомия баннера +

+
+ {[ + { + zone: "Левый блок (белый)", + bg: "#f8fafc", + items: [ + "Заголовок uppercase bold", + "3 пункта с галочками ✓", + "Кнопка bb-btn-primary", + ], + }, + { + zone: "Правый блок (#b8e6ed)", + bg: "#f0fdfa", + items: [ + "Фото врача с пациентом", + "Фон: #b8e6ed (светло-бирюзовый)", + "Занимает всю высоту блока", + ], + }, + ].map((z) => ( +
+

+ {z.zone} +

+
    + {z.items.map((item) => ( +
  • + · + {item} +
    • + ))} +
+
+ ))} +
+
+ + {/* Пункты с галочками */} +
+

+ Три пункта баннера +

+
+ {HERO_CHECKS.map((c) => ( +
+ + ✓ + +
+ + {c.key} + + + {" "}– {c.desc} + +
+
+ ))} +
+

+ Ключевое слово: uppercase + bold. Описание: обычный текст. Галочка: #22c55e. +

+
+ + {/* LLM блок */} + + + + + [c.key, c.desc])} + /> + + + + + +
+ ); +} diff --git a/apps/web/app/blocks/news/page.tsx b/apps/web/app/blocks/news/page.tsx new file mode 100644 index 0000000..52c7efe --- /dev/null +++ b/apps/web/app/blocks/news/page.tsx @@ -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 ( +
+ {/* Заголовок страницы */} +
+

+ Блоки +

+

+ Блок «Новости» +

+

+ Блок новостей с perm.oclinica.ru/lor — 4 карточки в ряд (дата + заголовок-ссылка), + кнопка «Все новости». +

+
+ + {/* Живой пример */} +
+

+ Живой пример +

+
+

+ Новости +

+
+ {MOCK_NEWS.map((n) => ( +
+

+ {n.date} +

+ + {n.title} + +
+ ))} +
+
+ +
+
+
+ + {/* Анатомия карточки */} +
+

+ Анатомия карточки новости +

+
+
+
+ ① Дата: DD.MM.YYYY · цвет #6b7280 +
+
+ ② Заголовок-ссылка · #0089c3 · font-weight 500 +
+
+ Hover: bg #eef4d1 · shadow 0 0 16px #9e9e9a +
+
+
+

+ Нет изображений, нет описания — только дата и заголовок. + CSS-класс .bb-news-card обрабатывает hover. +

+
+ + {/* LLM блок */} + + + + + [n.date, n.title])} + /> + + + +
+ ); +} diff --git a/apps/web/app/blocks/reviews/page.tsx b/apps/web/app/blocks/reviews/page.tsx new file mode 100644 index 0000000..d415536 --- /dev/null +++ b/apps/web/app/blocks/reviews/page.tsx @@ -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 ( +
+ {/* Заголовок страницы */} +
+

+ Блоки +

+

+ Блок «Отзывы о нас» +

+

+ Карусель отзывов с perm.oclinica.ru/lor — большая кавычка, текст, «Читать полностью», стрелки. +

+
+ + {/* Живой пример */} +
+

+ Живой пример +

+
+ {/* Заголовок */} +
+

+ Отзывы о нас +

+

+ За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа + более 50 000 пациентов. Но даже сейчас мы высоко ценим каждый положительный отзыв + и искренние слова благодарности. +

+
+ + {/* Карусель (статичная) */} +
+ {/* Стрелка влево */} + + + {/* Карточка отзыва */} +
+ {/* Декоративная кавычка */} +
+ « +
+

+ {MOCK_REVIEWS[0].text} +

+ + Читать отзыв полностью + +
+ + {/* Стрелка вправо */} + +
+
+
+ + {/* Несколько примеров */} +
+

+ Примеры отзывов (mock) +

+
+ {MOCK_REVIEWS.map((r, i) => ( +
+
+ « +
+

+ {r.text} +

+ +
+

+ {r.author} +

+

+ о враче: {r.doctor} +

+
+
+ ))} +
+
+ + {/* Анатомия */} +
+

+ Анатомия карточки отзыва +

+
+ {[ + { 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) => ( +
+
+

+ {t.label} +

+

+ {t.value} +

+

+ {t.note} +

+
+ ))} +
+
+ + {/* LLM блок */} + + + + + + + + +
+ ); +} diff --git a/apps/web/app/components/navigation/page.tsx b/apps/web/app/components/navigation/page.tsx new file mode 100644 index 0000000..2930857 --- /dev/null +++ b/apps/web/app/components/navigation/page.tsx @@ -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 ( +
+ {/* Заголовок страницы */} +
+

+ Компоненты +

+

+ Шапка и навигация +

+

+ Точное воспроизведение шапки с perm.oclinica.ru/lor. Три зоны: топ-бар, логотип, главное меню. +

+
+ + {/* Живой пример */} +
+

+ Живой пример +

+
+ {/* Топ-бар */} +
+ +
+ + /342/ 255-53-84 + + +
+
+ + {/* Логотип */} +
+
+
+ ✚ +
+
+
+ Клиника
ухо, горло, нос +
+
+ им. проф. Е.Н.Оленевой +
+
+
+
+ + {/* Навигация */} + +
+
+ + {/* Анатомия */} +
+

+ Анатомия шапки +

+
+ {[ + { + 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) => ( +
+

+ {z.zone} +

+

+ {z.desc} +

+

+ H: {z.height} · {z.color} +

+
+ ))} +
+
+ + {/* Пункты меню */} +
+

+ Пункты главного меню +

+
+ {NAV_ITEMS.map((item, i) => ( + + {item} + {i === 0 && ( + + (активный) + + )} + + ))} +
+

+ Порядок пунктов фиксирован. Hover и активный пункт — цвет #0089c3 (--brand-053m). +

+
+ + {/* Токены */} +
+

+ Цвета и токены +

+
+ {[ + { 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) => ( +
+
+

+ {t.label} +

+

+ {t.value} +

+

+ {t.token} +

+
+ ))} +
+
+ + {/* LLM блок */} + + + + + + + + +
+ ); +} diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index bc26fe4..da33c22 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -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; diff --git a/apps/web/components/layout/Sidebar.tsx b/apps/web/components/layout/Sidebar.tsx index 15b4812..78b60ee 100644 --- a/apps/web/components/layout/Sidebar.tsx +++ b/apps/web/components/layout/Sidebar.tsx @@ -30,20 +30,19 @@ const NAV: NavSection[] = [ { label: "Кнопки", href: "/components/buttons" }, { label: "Форм-контролы", href: "/components/forms" }, { label: "Карточки", href: "/components/cards" }, - { label: "Навигация", href: "/components/navigation", soon: true }, + { label: "Шапка / Навигация", href: "/components/navigation" }, ], }, { title: "Блоки", items: [ - { label: "Шапка / Навигация", href: "/components/navigation", soon: true }, - { label: "Hero-баннер", href: "/blocks/hero", soon: true }, - { label: "Вводный текст", href: "/blocks/ceo", soon: true }, - { label: "Наши врачи", href: "/blocks/doctors", soon: true }, - { label: "Отзывы", href: "/blocks/reviews", soon: true }, - { label: "Формы записи", href: "/blocks/contact-forms", soon: true }, - { label: "Новости", href: "/blocks/news", soon: true }, - { label: "Подвал / Контакт", href: "/blocks/contact", 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" }, ], }, { @@ -167,7 +166,7 @@ export function Sidebar() { color: "var(--bb-sidebar-text-muted)", }} > - Sprint 5 · v0.5.0 + Sprint 5 · v0.5.1 );