Compare commits
4 Commits
3094e9a2b7
...
eda348deea
| Author | SHA1 | Date | |
|---|---|---|---|
 AR 15 M4
|
eda348deea | ||
|
AR 15 M4
|
1b64ccaa0f | ||
|
AR 15 M4
|
5b54ad5c23 | ||
|
AR 15 M4
|
196526ffc4 |
@@ -29,3 +29,4 @@ prisma/migrations/*.sql.bak
|
|||||||
|
|
||||||
# Claude
|
# Claude
|
||||||
.claude/
|
.claude/
|
||||||
|
.vercel
|
||||||
|
|||||||
@@ -0,0 +1,18 @@
|
|||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "BlockSnapshot" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"blockPath" TEXT NOT NULL,
|
||||||
|
"version" TEXT NOT NULL,
|
||||||
|
"changelog" JSONB NOT NULL DEFAULT '[]',
|
||||||
|
"html" TEXT NOT NULL,
|
||||||
|
"css" TEXT NOT NULL,
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
|
||||||
|
CONSTRAINT "BlockSnapshot_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "BlockSnapshot_blockPath_idx" ON "BlockSnapshot"("blockPath");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "BlockSnapshot_blockPath_version_key" ON "BlockSnapshot"("blockPath", "version");
|
||||||
@@ -50,3 +50,16 @@ model Block {
|
|||||||
updatedAt DateTime @updatedAt
|
updatedAt DateTime @updatedAt
|
||||||
createdAt DateTime @default(now())
|
createdAt DateTime @default(now())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
model BlockSnapshot {
|
||||||
|
id String @id @default(uuid())
|
||||||
|
blockPath String
|
||||||
|
version String
|
||||||
|
changelog Json @default("[]")
|
||||||
|
html String @db.Text
|
||||||
|
css String @db.Text
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
|
||||||
|
@@unique([blockPath, version])
|
||||||
|
@@index([blockPath])
|
||||||
|
}
|
||||||
|
|||||||
+40
-5
@@ -9,18 +9,36 @@ const BLOCKS = [
|
|||||||
{
|
{
|
||||||
path: '/blocks/navigation',
|
path: '/blocks/navigation',
|
||||||
name: 'Шапка / Навигация',
|
name: 'Шапка / Навигация',
|
||||||
version: 'v1.0',
|
version: 'v1.3',
|
||||||
isInPreview: true,
|
isInPreview: true,
|
||||||
changelog: [
|
changelog: [
|
||||||
|
{ version: 'v1.3', date: '24.03.2026', changes: [
|
||||||
|
'Подменю: выпадающие списки при hover',
|
||||||
|
'Hover-эффект: бежевый фон #f5f0e6',
|
||||||
|
'Пункты подчёркнуты, без разделителей',
|
||||||
|
'Все пункты чёрного цвета #000',
|
||||||
|
]},
|
||||||
|
{ version: 'v1.2', date: '24.03.2026', changes: [
|
||||||
|
'Убрана рамка и тень вокруг шапки',
|
||||||
|
'3 столбца: логотип | ссылки | телефон+кнопка',
|
||||||
|
'Реальный логотип logo-main.png',
|
||||||
|
]},
|
||||||
|
{ version: 'v1.1', date: '24.03.2026', changes: [
|
||||||
|
'Адрес: «К. Цеткин, 9», ссылки, телефон 25px, меню 18px',
|
||||||
|
]},
|
||||||
{ version: 'v1.0', date: '23.03.2026', changes: ['Топ-бар, логотип, главное меню из 8 пунктов'] },
|
{ version: 'v1.0', date: '23.03.2026', changes: ['Топ-бар, логотип, главное меню из 8 пунктов'] },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/blocks/hero',
|
path: '/blocks/hero',
|
||||||
name: 'Hero-баннер',
|
name: 'Hero-баннер',
|
||||||
version: 'v1.2',
|
version: 'v1.3',
|
||||||
isInPreview: true,
|
isInPreview: true,
|
||||||
changelog: [
|
changelog: [
|
||||||
|
{ version: 'v1.3', date: '24.03.2026', changes: [
|
||||||
|
'Счётчик: «Поделиться ✉ 98572» (было «👁 98 573 просмотра»)',
|
||||||
|
'Убраны кнопки VK/FB/TW',
|
||||||
|
]},
|
||||||
{ version: 'v1.2', date: '24.03.2026', changes: [
|
{ version: 'v1.2', date: '24.03.2026', changes: [
|
||||||
'H1: цвет #cb9768, размер 36px (было ~20px #53514e)',
|
'H1: цвет #cb9768, размер 36px (было ~20px #53514e)',
|
||||||
'Заголовок баннера: 22px #333 (было 16px #111827)',
|
'Заголовок баннера: 22px #333 (было 16px #111827)',
|
||||||
@@ -36,9 +54,13 @@ const BLOCKS = [
|
|||||||
{
|
{
|
||||||
path: '/blocks/ceo',
|
path: '/blocks/ceo',
|
||||||
name: 'Вводный текст (CEO-блок)',
|
name: 'Вводный текст (CEO-блок)',
|
||||||
version: 'v1.0',
|
version: 'v1.1',
|
||||||
isInPreview: false,
|
isInPreview: false,
|
||||||
changelog: [
|
changelog: [
|
||||||
|
{ version: 'v1.1', date: '24.03.2026', changes: [
|
||||||
|
'Адрес: «ул. Цитная, 9» → «ул. Клары Цеткин, 9»',
|
||||||
|
'Цвет ссылок: #52b4bd (было #0089c3)',
|
||||||
|
]},
|
||||||
{ version: 'v1.0', date: '23.03.2026', changes: ['Текст специализации клиники, вопросы-стимулы'] },
|
{ version: 'v1.0', date: '23.03.2026', changes: ['Текст специализации клиники, вопросы-стимулы'] },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@@ -76,9 +98,13 @@ const BLOCKS = [
|
|||||||
{
|
{
|
||||||
path: '/blocks/contact-forms',
|
path: '/blocks/contact-forms',
|
||||||
name: 'Формы записи',
|
name: 'Формы записи',
|
||||||
version: 'v1.1',
|
version: 'v1.2',
|
||||||
isInPreview: true,
|
isInPreview: true,
|
||||||
changelog: [
|
changelog: [
|
||||||
|
{ version: 'v1.2', date: '24.03.2026', changes: [
|
||||||
|
'Кнопка: bb-btn-lg 18px bold (было bb-btn-md 14px)',
|
||||||
|
'border-radius кнопки: 4px (было 7px)',
|
||||||
|
]},
|
||||||
{ version: 'v1.1', date: '24.03.2026', changes: [
|
{ version: 'v1.1', date: '24.03.2026', changes: [
|
||||||
'H2: 36px #000000',
|
'H2: 36px #000000',
|
||||||
'Фон формы 1: #b8e6ed → #d4f6f8',
|
'Фон формы 1: #b8e6ed → #d4f6f8',
|
||||||
@@ -107,9 +133,18 @@ const BLOCKS = [
|
|||||||
{
|
{
|
||||||
path: '/blocks/contact',
|
path: '/blocks/contact',
|
||||||
name: 'Подвал / Контакт',
|
name: 'Подвал / Контакт',
|
||||||
version: 'v1.0',
|
version: 'v1.1',
|
||||||
isInPreview: false,
|
isInPreview: false,
|
||||||
changelog: [
|
changelog: [
|
||||||
|
{ version: 'v1.1', date: '24.03.2026', changes: [
|
||||||
|
'Колонка «О клинике»: 13 ссылок по реальному сайту (было 7)',
|
||||||
|
'Колонка «Заболевания»: 5 категорий (было 6 конкретных диагнозов)',
|
||||||
|
'Колонка «Вопрос-ответ»: 6 пунктов по реальному сайту',
|
||||||
|
'Колонка «Операции»: 11 операций (было 6)',
|
||||||
|
'Два адреса: Клары Цеткин 9 + Газеты Звезда 31А',
|
||||||
|
'Два графика работы по филиалам',
|
||||||
|
'Соцсети: добавлен Дзен',
|
||||||
|
]},
|
||||||
{ version: 'v1.0', date: '23.03.2026', changes: ['4 колонки ссылок, адрес, часы работы'] },
|
{ version: 'v1.0', date: '23.03.2026', changes: ['4 колонки ссылок, адрес, часы работы'] },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { Controller, Get, Patch, Query, Body } from '@nestjs/common';
|
import { Controller, Get, Post, Patch, Param, Query, Body } from '@nestjs/common';
|
||||||
import { BlocksService } from './blocks.service';
|
import { BlocksService } from './blocks.service';
|
||||||
|
|
||||||
@Controller('blocks')
|
@Controller('blocks')
|
||||||
@@ -22,4 +22,22 @@ export class BlocksController {
|
|||||||
) {
|
) {
|
||||||
return this.blocks.update(path, body);
|
return this.blocks.update(path, body);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Post('snapshots')
|
||||||
|
createSnapshot(
|
||||||
|
@Query('path') path: string,
|
||||||
|
@Body() body: { version: string; changelog: object[]; html: string; css: string },
|
||||||
|
) {
|
||||||
|
return this.blocks.createSnapshot(path, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get('snapshots')
|
||||||
|
listSnapshots(@Query('path') path: string) {
|
||||||
|
return this.blocks.listSnapshots(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get('snapshots/:id')
|
||||||
|
getSnapshot(@Param('id') id: string) {
|
||||||
|
return this.blocks.getSnapshot(id);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,4 +20,24 @@ export class BlocksService {
|
|||||||
update(path: string, data: { version?: string; isInPreview?: boolean; changelog?: object[] }) {
|
update(path: string, data: { version?: string; isInPreview?: boolean; changelog?: object[] }) {
|
||||||
return this.prisma.block.update({ where: { path }, data });
|
return this.prisma.block.update({ where: { path }, data });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
createSnapshot(blockPath: string, data: { version: string; changelog: object[]; html: string; css: string }) {
|
||||||
|
return this.prisma.blockSnapshot.upsert({
|
||||||
|
where: { blockPath_version: { blockPath, version: data.version } },
|
||||||
|
update: { html: data.html, css: data.css, changelog: data.changelog },
|
||||||
|
create: { blockPath, ...data },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
listSnapshots(blockPath: string) {
|
||||||
|
return this.prisma.blockSnapshot.findMany({
|
||||||
|
where: { blockPath },
|
||||||
|
select: { id: true, version: true, createdAt: true },
|
||||||
|
orderBy: { createdAt: 'desc' },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getSnapshot(id: string) {
|
||||||
|
return this.prisma.blockSnapshot.findUniqueOrThrow({ where: { id } });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,224 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||||
|
import { BlockMetaBar, type SnapshotData } from "@/components/ui/BlockMetaBar";
|
||||||
|
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||||
|
import { CeoBlock, CEO_QUESTIONS } from "@/components/blocks/CeoBlock";
|
||||||
|
|
||||||
|
const BLOCK_PATH = "/blocks/ceo";
|
||||||
|
|
||||||
|
const LLM_CEO_TEXT = `
|
||||||
|
БЛОК: Вводный текст клиники (CEO-блок)
|
||||||
|
Источник: perm.oclinica.ru/lor — секция после баннера
|
||||||
|
Версия: v1.1
|
||||||
|
|
||||||
|
НАЗНАЧЕНИЕ:
|
||||||
|
Информационный блок под 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 CHANGELOG: ChangelogEntry[] = [
|
||||||
|
{
|
||||||
|
version: "v1.2",
|
||||||
|
date: "25.03.2026",
|
||||||
|
changes: [
|
||||||
|
"Убраны горизонтальные отступы: padding 40px 48px → 40px 0 (как на реальном сайте)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
version: "v1.1",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"Адрес: «ул. Цитная, 9» заменён на «ул. Клары Цеткин, 9»",
|
||||||
|
"Цвет ссылок: #52b4bd (было #0089c3)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function CeoPageClient() {
|
||||||
|
const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);
|
||||||
|
|
||||||
|
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>
|
||||||
|
<BlockMetaBar
|
||||||
|
path={BLOCK_PATH}
|
||||||
|
defaultVersion="v1.2"
|
||||||
|
defaultIsInPreview={false}
|
||||||
|
defaultChangelog={CHANGELOG}
|
||||||
|
onSnapshotSelect={setSnapshot}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
{snapshot ? (
|
||||||
|
<div className="rounded-xl overflow-hidden" style={{ border: "1px solid var(--bb-border)" }}>
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div data-block-capture={BLOCK_PATH} className="rounded-xl overflow-hidden" style={{ border: "1px solid var(--bb-border)" }}>
|
||||||
|
<CeoBlock />
|
||||||
|
</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.2" 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,190 +1,10 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
import CeoPageClient from "./CeoPageClient";
|
||||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
|
||||||
import { CeoBlock, CEO_QUESTIONS } from "@/components/blocks/CeoBlock";
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Вводный текст (CEO-блок). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
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();
|
|
||||||
|
|
||||||
|
|
||||||
export default function CeoPage() {
|
export default function CeoPage() {
|
||||||
return (
|
return <CeoPageClient />;
|
||||||
<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>
|
|
||||||
<BlockMetaBar path="/blocks/ceo" defaultVersion="v1.0" defaultIsInPreview={false} />
|
|
||||||
<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 overflow-hidden" style={{ border: "1px solid var(--bb-border)" }}>
|
|
||||||
<CeoBlock />
|
|
||||||
</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,190 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||||
|
import { BlockMetaBar, type SnapshotData } from "@/components/ui/BlockMetaBar";
|
||||||
|
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||||
|
import { ContactFormsBlock } from "@/components/blocks/ContactFormsBlock";
|
||||||
|
|
||||||
|
const BLOCK_PATH = "/blocks/contact-forms";
|
||||||
|
|
||||||
|
const LLM_FORMS_TEXT = `
|
||||||
|
БЛОК: Формы записи и обратной связи
|
||||||
|
Источник: perm.oclinica.ru/lor — два блока форм на одной странице
|
||||||
|
Версия: v1.2
|
||||||
|
|
||||||
|
ФОРМА 1: «Будьте здоровы!» (форма записи на приём)
|
||||||
|
Позиция: после блока отзывов
|
||||||
|
Заголовок H2: «Будьте здоровы!» — 36px, bold, #000000, line-height 38px
|
||||||
|
Подзаголовок: «Запишитесь на приём к врачу!»
|
||||||
|
Фон секции: #d4f6f8 (светло-бирюзовый)
|
||||||
|
Поля формы:
|
||||||
|
1. Текстовый input: placeholder «Введите ваше имя» (height 50px)
|
||||||
|
2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
|
||||||
|
3. Select: «Выберите ЛОР врача» (height 50px)
|
||||||
|
4. Checkbox: «Отправляя данные, я даю согласие на обработку персональных данных»
|
||||||
|
Кнопка: «Запишите меня!» — стиль bb-btn-primary (#FFA39C)
|
||||||
|
Ширина формы: ~400px центрирована или в колонку
|
||||||
|
|
||||||
|
ФОРМА 2: «Узнайте стоимость операции» (консультация)
|
||||||
|
Позиция: после блока новостей
|
||||||
|
Заголовок H2: «Узнайте стоимость операции» — 36px, bold, #000000, line-height 38px
|
||||||
|
Подзаголовок: «Проконсультируйтесь с ассистентом хирурга»
|
||||||
|
Фон секции: #d4f6f8 (тот же что и форма 1)
|
||||||
|
Поля формы:
|
||||||
|
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)
|
||||||
|
— Обе формы на бирюзовом фоне (#d4f6f8)
|
||||||
|
|
||||||
|
ПРАВИЛА:
|
||||||
|
✓ Чекбокс согласия обязателен в каждой форме
|
||||||
|
✓ Кнопки отправки: bb-btn-primary (#FFA39C)
|
||||||
|
✓ Обе формы на фоне #d4f6f8
|
||||||
|
✕ Не менять порядок полей
|
||||||
|
✕ Не убирать чекбокс согласия
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const CHANGELOG: ChangelogEntry[] = [
|
||||||
|
{
|
||||||
|
version: "v1.2",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"Кнопка: bb-btn-md заменена на bb-btn-lg (18px, bold, как на реальном сайте)",
|
||||||
|
"border-radius кнопки: 7px исправлен на 4px (исправлено в globals.css)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
version: "v1.1",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"H2: размер на 36px, цвет на #000000, line-height 38px",
|
||||||
|
"Фон формы 1: с #b8e6ed на #d4f6f8",
|
||||||
|
"Фон формы 2: с #ffffff на #d4f6f8 (обе формы на одном фоне)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ContactFormsPageClient() {
|
||||||
|
const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);
|
||||||
|
|
||||||
|
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>
|
||||||
|
<BlockMetaBar
|
||||||
|
path={BLOCK_PATH}
|
||||||
|
defaultVersion="v1.2"
|
||||||
|
defaultIsInPreview={false}
|
||||||
|
defaultChangelog={CHANGELOG}
|
||||||
|
onSnapshotSelect={setSnapshot}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
{snapshot ? (
|
||||||
|
<>
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div data-block-capture={BLOCK_PATH}>
|
||||||
|
<ContactFormsBlock />
|
||||||
|
</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>
|
||||||
|
{[
|
||||||
|
["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"],
|
||||||
|
["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"],
|
||||||
|
["Фон секции", "#d4f6f8", "#d4f6f8"],
|
||||||
|
["Поля", "Имя + Телефон + 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.2" 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: "Обе формы: фон #d4f6f8" },
|
||||||
|
{ 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,165 +1,10 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
import ContactFormsPageClient from "./ContactFormsPageClient";
|
||||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
|
||||||
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
|
||||||
import { ContactFormsBlock } from "@/components/blocks/ContactFormsBlock";
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Формы записи. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
title: "Формы записи. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||||
};
|
};
|
||||||
|
|
||||||
const LLM_FORMS_TEXT = `
|
|
||||||
БЛОК: Формы записи и обратной связи
|
|
||||||
Источник: perm.oclinica.ru/lor — два блока форм на одной странице
|
|
||||||
Версия: v1.1
|
|
||||||
|
|
||||||
ФОРМА 1: «Будьте здоровы!» (форма записи на приём)
|
|
||||||
Позиция: после блока отзывов
|
|
||||||
Заголовок H2: «Будьте здоровы!» — 36px, bold, #000000, line-height 38px
|
|
||||||
Подзаголовок: «Запишитесь на приём к врачу!»
|
|
||||||
Фон секции: #d4f6f8 (светло-бирюзовый)
|
|
||||||
Поля формы:
|
|
||||||
1. Текстовый input: placeholder «Введите ваше имя» (height 50px)
|
|
||||||
2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
|
|
||||||
3. Select: «Выберите ЛОР врача» (height 50px)
|
|
||||||
4. Checkbox: «Отправляя данные, я даю согласие на обработку персональных данных»
|
|
||||||
Кнопка: «Запишите меня!» — стиль bb-btn-primary (#FFA39C)
|
|
||||||
Ширина формы: ~400px центрирована или в колонку
|
|
||||||
|
|
||||||
ФОРМА 2: «Узнайте стоимость операции» (консультация)
|
|
||||||
Позиция: после блока новостей
|
|
||||||
Заголовок H2: «Узнайте стоимость операции» — 36px, bold, #000000, line-height 38px
|
|
||||||
Подзаголовок: «Проконсультируйтесь с ассистентом хирурга»
|
|
||||||
Фон секции: #d4f6f8 (тот же что и форма 1)
|
|
||||||
Поля формы:
|
|
||||||
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)
|
|
||||||
— Обе формы на бирюзовом фоне (#d4f6f8)
|
|
||||||
|
|
||||||
ПРАВИЛА:
|
|
||||||
✓ Чекбокс согласия обязателен в каждой форме
|
|
||||||
✓ Кнопки отправки: bb-btn-primary (#FFA39C)
|
|
||||||
✓ Обе формы на фоне #d4f6f8
|
|
||||||
✕ Не менять порядок полей
|
|
||||||
✕ Не убирать чекбокс согласия
|
|
||||||
`.trim();
|
|
||||||
|
|
||||||
const CHANGELOG: ChangelogEntry[] = [
|
|
||||||
{
|
|
||||||
version: "v1.1",
|
|
||||||
date: "24.03.2026",
|
|
||||||
changes: [
|
|
||||||
"H2: размер на 36px, цвет на #000000, line-height 38px",
|
|
||||||
"Фон формы 1: с #b8e6ed на #d4f6f8",
|
|
||||||
"Фон формы 2: с #ffffff на #d4f6f8 (обе формы на одном фоне)",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function ContactFormsPage() {
|
export default function ContactFormsPage() {
|
||||||
return (
|
return <ContactFormsPageClient />;
|
||||||
<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>
|
|
||||||
<BlockMetaBar path="/blocks/contact-forms" defaultVersion="v1.1" defaultIsInPreview={false} defaultChangelog={CHANGELOG} />
|
|
||||||
<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>
|
|
||||||
<ContactFormsBlock />
|
|
||||||
</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>
|
|
||||||
{[
|
|
||||||
["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"],
|
|
||||||
["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"],
|
|
||||||
["Фон секции", "#d4f6f8", "#d4f6f8"],
|
|
||||||
["Поля", "Имя + Телефон + 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.1" 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: "Обе формы: фон #d4f6f8" },
|
|
||||||
{ 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,204 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||||
|
import { BlockMetaBar, type SnapshotData } from "@/components/ui/BlockMetaBar";
|
||||||
|
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||||
|
import { FooterBlock } from "@/components/blocks/FooterBlock";
|
||||||
|
|
||||||
|
const BLOCK_PATH = "/blocks/contact";
|
||||||
|
|
||||||
|
const FOOTER_COLUMNS = [
|
||||||
|
{
|
||||||
|
title: "О клинике",
|
||||||
|
links: ["Лицензия", "Миссия", "Врачи", "Вакансии", "История", "Образовательная деятельность", "При инфо"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Заболевания",
|
||||||
|
links: ["Ринит", "Отит", "Гайморит", "Тонзиллит", "Полипы носа", "Искривление перегородки"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Вопрос-ответ",
|
||||||
|
links: [
|
||||||
|
"Что нужно знать до операции на ухо",
|
||||||
|
"Что нужно знать до операции на нос",
|
||||||
|
"Отзывы до и после лечения у детей",
|
||||||
|
"Что нужно знать при лечении у детей",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Операции",
|
||||||
|
links: ["Септопластика", "Турбинопластика", "Тонзиллэктомия", "Аденотомия", "Тимпанопластика", "Мирингопластика"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const LLM_FOOTER_TEXT = `
|
||||||
|
БЛОК: Подвал сайта (Footer)
|
||||||
|
Источник: perm.oclinica.ru/lor — нижняя часть страницы
|
||||||
|
Версия: v1.1
|
||||||
|
|
||||||
|
СТРУКТУРА ПОДВАЛА:
|
||||||
|
|
||||||
|
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();
|
||||||
|
|
||||||
|
const CHANGELOG: ChangelogEntry[] = [
|
||||||
|
{
|
||||||
|
version: "v1.1",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"Колонка «О клинике»: обновлены все ссылки по реальному сайту (13 ссылок)",
|
||||||
|
"Колонка «Заболевания»: обновлены ссылки (5 категорий)",
|
||||||
|
"Колонка «Вопрос-ответ»: обновлены ссылки (6 пунктов)",
|
||||||
|
"Колонка «Операции»: обновлены ссылки (11 операций, было 6)",
|
||||||
|
"Два адреса: Клары Цеткин, 9 + Газеты Звезда, 31А",
|
||||||
|
"Два графика работы по филиалам",
|
||||||
|
"Соцсети: добавлен Дзен",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ContactPageClient() {
|
||||||
|
const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);
|
||||||
|
|
||||||
|
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>
|
||||||
|
<BlockMetaBar
|
||||||
|
path={BLOCK_PATH}
|
||||||
|
defaultVersion="v1.1"
|
||||||
|
defaultIsInPreview={false}
|
||||||
|
defaultChangelog={CHANGELOG}
|
||||||
|
onSnapshotSelect={setSnapshot}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
{snapshot ? (
|
||||||
|
<>
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div data-block-capture={BLOCK_PATH}>
|
||||||
|
<FooterBlock />
|
||||||
|
</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.1" 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,170 +1,10 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
import ContactPageClient from "./ContactPageClient";
|
||||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
|
||||||
import { FooterBlock } from "@/components/blocks/FooterBlock";
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Подвал (Footer). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
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() {
|
export default function ContactFooterPage() {
|
||||||
return (
|
return <ContactPageClient />;
|
||||||
<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>
|
|
||||||
<BlockMetaBar path="/blocks/contact" defaultVersion="v1.0" defaultIsInPreview={false} />
|
|
||||||
<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>
|
|
||||||
<FooterBlock />
|
|
||||||
</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,187 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||||
|
import { DoctorsBlock, STATS, DOCTORS } from "@/components/blocks/DoctorsBlock";
|
||||||
|
import { BlockMetaBar, type SnapshotData } from "@/components/ui/BlockMetaBar";
|
||||||
|
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||||
|
|
||||||
|
const BLOCK_PATH = "/blocks/doctors";
|
||||||
|
|
||||||
|
const LLM_DOCTORS_TEXT = `
|
||||||
|
БЛОК: Наши врачи
|
||||||
|
Источник: perm.oclinica.ru/lor — блок под CEO-текстом
|
||||||
|
Версия: v1.2
|
||||||
|
|
||||||
|
СТРУКТУРА БЛОКА:
|
||||||
|
1. ЗАГОЛОВОК H2: «Приём ведут опытные ЛОР врачи»
|
||||||
|
Подзаголовок: описание принципа работы врачей клиники
|
||||||
|
Размер: 36px, font-bold, #000000, line-height: 38px
|
||||||
|
|
||||||
|
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: #000000, 36px, line-height 38px
|
||||||
|
Статистика текст: #60959c (серо-бирюзовый)
|
||||||
|
Статистика черта: border-bottom 3px solid #60959c
|
||||||
|
Имя врача: #60959c
|
||||||
|
Специализация: #374151
|
||||||
|
|
||||||
|
ПРАВИЛА:
|
||||||
|
✓ Заголовок H2 + описание обязательны
|
||||||
|
✓ 3 stat-блока в ряд, без фоновых блоков
|
||||||
|
✓ Сетка 6 колонок (6 карточек в ряд)
|
||||||
|
✕ Не отображать более 6 врачей в основном блоке
|
||||||
|
✕ Не убирать статистику
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const CHANGELOG: ChangelogEntry[] = [
|
||||||
|
{
|
||||||
|
version: "v1.2",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"H2: размер с ~30px на 36px, цвет с #111827 на #000000",
|
||||||
|
"H2 line-height: 38px",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
version: "v1.1",
|
||||||
|
date: "23.03.2026",
|
||||||
|
changes: [
|
||||||
|
"6 реальных фото врачей с сайта",
|
||||||
|
"Статистика без фона, только border-bottom #60959c",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function DoctorsPageClient() {
|
||||||
|
const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);
|
||||||
|
|
||||||
|
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>
|
||||||
|
<BlockMetaBar
|
||||||
|
path={BLOCK_PATH}
|
||||||
|
defaultVersion="v1.2"
|
||||||
|
defaultIsInPreview={true}
|
||||||
|
defaultChangelog={CHANGELOG}
|
||||||
|
onSnapshotSelect={setSnapshot}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
{snapshot ? (
|
||||||
|
<div
|
||||||
|
className="rounded-xl p-8"
|
||||||
|
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||||
|
>
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
data-block-capture={BLOCK_PATH}
|
||||||
|
className="rounded-xl p-8"
|
||||||
|
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||||
|
>
|
||||||
|
<DoctorsBlock />
|
||||||
|
</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.2" specText={LLM_DOCTORS_TEXT}>
|
||||||
|
<LlmSection title="Структура блока" />
|
||||||
|
<LlmTable
|
||||||
|
headers={["Элемент", "Содержимое", "Стиль"]}
|
||||||
|
rows={[
|
||||||
|
["H2", "«Приём ведут опытные ЛОР врачи»", "36px, font-bold, #000000, line-height 38px"],
|
||||||
|
["Подзаголовок", "Описание принципа работы", "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={[
|
||||||
|
["Фото", "110×150px, object-fit: cover, object-position: center top, border-radius 4px"],
|
||||||
|
["Имя", "12px, font-weight 500, #60959c"],
|
||||||
|
["Специализация", "11px, #374151"],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<LlmSection title="Правила" />
|
||||||
|
<LlmRules
|
||||||
|
rules={[
|
||||||
|
{ ok: true, text: "H2 + описание обязательны" },
|
||||||
|
{ ok: true, text: "3 stat-блока в ряд, без фоновых рамок" },
|
||||||
|
{ ok: true, text: "Сетка 6 карточек в 1 ряд (6 колонок)" },
|
||||||
|
{ ok: false, text: "Не показывать более 6 врачей в основном блоке" },
|
||||||
|
{ ok: false, text: "Не убирать статистику" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</LlmBlock>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,168 +1,10 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
import DoctorsPageClient from "./DoctorsPageClient";
|
||||||
import { DoctorsBlock, STATS, DOCTORS } from "@/components/blocks/DoctorsBlock";
|
|
||||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
|
||||||
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Блок «Наши врачи». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
title: "Блок «Наши врачи». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||||
};
|
};
|
||||||
|
|
||||||
const LLM_DOCTORS_TEXT = `
|
|
||||||
БЛОК: Наши врачи
|
|
||||||
Источник: perm.oclinica.ru/lor — блок под CEO-текстом
|
|
||||||
Версия: v1.2
|
|
||||||
|
|
||||||
СТРУКТУРА БЛОКА:
|
|
||||||
1. ЗАГОЛОВОК H2: «Приём ведут опытные ЛОР врачи»
|
|
||||||
Подзаголовок: описание принципа работы врачей клиники
|
|
||||||
Размер: 36px, font-bold, #000000, line-height: 38px
|
|
||||||
|
|
||||||
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: #000000, 36px, line-height 38px
|
|
||||||
Статистика текст: #60959c (серо-бирюзовый)
|
|
||||||
Статистика черта: border-bottom 3px solid #60959c
|
|
||||||
Имя врача: #60959c
|
|
||||||
Специализация: #374151
|
|
||||||
|
|
||||||
ПРАВИЛА:
|
|
||||||
✓ Заголовок H2 + описание обязательны
|
|
||||||
✓ 3 stat-блока в ряд, без фоновых блоков
|
|
||||||
✓ Сетка 6 колонок (6 карточек в ряд)
|
|
||||||
✕ Не отображать более 6 врачей в основном блоке
|
|
||||||
✕ Не убирать статистику
|
|
||||||
`.trim();
|
|
||||||
|
|
||||||
const CHANGELOG: ChangelogEntry[] = [
|
|
||||||
{
|
|
||||||
version: "v1.2",
|
|
||||||
date: "24.03.2026",
|
|
||||||
changes: [
|
|
||||||
"H2: размер с ~30px на 36px, цвет с #111827 на #000000",
|
|
||||||
"H2 line-height: 38px",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
version: "v1.1",
|
|
||||||
date: "23.03.2026",
|
|
||||||
changes: [
|
|
||||||
"6 реальных фото врачей с сайта",
|
|
||||||
"Статистика без фона, только border-bottom #60959c",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function DoctorsBlockPage() {
|
export default function DoctorsBlockPage() {
|
||||||
return (
|
return <DoctorsPageClient />;
|
||||||
<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>
|
|
||||||
<BlockMetaBar path="/blocks/doctors" defaultVersion="v1.2" defaultIsInPreview={true} defaultChangelog={CHANGELOG} />
|
|
||||||
<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"
|
|
||||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
|
||||||
>
|
|
||||||
<DoctorsBlock />
|
|
||||||
</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.2" specText={LLM_DOCTORS_TEXT}>
|
|
||||||
<LlmSection title="Структура блока" />
|
|
||||||
<LlmTable
|
|
||||||
headers={["Элемент", "Содержимое", "Стиль"]}
|
|
||||||
rows={[
|
|
||||||
["H2", "«Приём ведут опытные ЛОР врачи»", "36px, font-bold, #000000, line-height 38px"],
|
|
||||||
["Подзаголовок", "Описание принципа работы", "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={[
|
|
||||||
["Фото", "110×150px, object-fit: cover, object-position: center top, border-radius 4px"],
|
|
||||||
["Имя", "12px, font-weight 500, #60959c"],
|
|
||||||
["Специализация", "11px, #374151"],
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<LlmSection title="Правила" />
|
|
||||||
<LlmRules
|
|
||||||
rules={[
|
|
||||||
{ ok: true, text: "H2 + описание обязательны" },
|
|
||||||
{ ok: true, text: "3 stat-блока в ряд, без фоновых рамок" },
|
|
||||||
{ ok: true, text: "Сетка 6 карточек в 1 ряд (6 колонок)" },
|
|
||||||
{ ok: false, text: "Не показывать более 6 врачей в основном блоке" },
|
|
||||||
{ ok: false, text: "Не убирать статистику" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</LlmBlock>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,231 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||||
|
import { HeroBlock, HERO_CHECKS } from "@/components/blocks/HeroBlock";
|
||||||
|
import { BlockMetaBar, type SnapshotData } from "@/components/ui/BlockMetaBar";
|
||||||
|
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||||
|
|
||||||
|
const BLOCK_PATH = "/blocks/hero";
|
||||||
|
|
||||||
|
const LLM_HERO_TEXT = `
|
||||||
|
БЛОК: Hero-баннер (главный баннер страницы)
|
||||||
|
Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
|
||||||
|
Версия: v1.3
|
||||||
|
|
||||||
|
ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
|
||||||
|
«ЛОР Клиника ухо, горло, нос - медицинский центр лечения ЛОР заболеваний у детей и взрослых»
|
||||||
|
Шрифт: Fira Sans, 36px, weight 700, цвет: #cb9768
|
||||||
|
|
||||||
|
СТРУКТУРА БАННЕРА (двухколоночная, единый фон #f9f4e7):
|
||||||
|
Левая колонка (~50%):
|
||||||
|
— Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
|
||||||
|
Шрифт: Fira Sans, 22px, weight 700, uppercase, цвет #333333
|
||||||
|
— 3 пункта с галочками (✓ бежевый #bf9975):
|
||||||
|
1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
|
||||||
|
2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров»
|
||||||
|
3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
|
||||||
|
Ключевое слово: uppercase bold; описание: обычный текст, ~13px
|
||||||
|
— Кнопка «Узнать стоимость операции» — стиль: bb-btn-pill (кремовый фон #E9E4D4, radius 25px)
|
||||||
|
Правая колонка (~50%):
|
||||||
|
— Фото врача с пациентом
|
||||||
|
— Изображение занимает всю высоту блока
|
||||||
|
|
||||||
|
ПОД БАННЕРОМ:
|
||||||
|
— Кнопки соцсетей (VK, FB, TW), цвет #9ca3af
|
||||||
|
— Счётчик просмотров
|
||||||
|
|
||||||
|
ЦВЕТА:
|
||||||
|
Фон баннера: #f9f4e7 (светло-кремовый, единый для всего блока)
|
||||||
|
Кнопка CTA: pill-стиль (кремовый #E9E4D4, border #D5CFBD, radius 25px)
|
||||||
|
Заголовок блока: #333333
|
||||||
|
Пункты: ключевое слово #111827 bold, описание #374151
|
||||||
|
Галочка: #bf9975 (бежевый)
|
||||||
|
|
||||||
|
ПРАВИЛА:
|
||||||
|
✓ Фон баннера всегда #f9f4e7 (светло-кремовый) — единый, без разделения на зоны
|
||||||
|
✓ Заголовок блока uppercase, жирный
|
||||||
|
✓ Три пункта с галочками обязательны
|
||||||
|
✕ Не менять фон баннера на другой цвет
|
||||||
|
✕ Не разбивать фон на два разных цвета
|
||||||
|
✕ Не убирать три пункта с галочками
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const CHANGELOG: ChangelogEntry[] = [
|
||||||
|
{
|
||||||
|
version: "v1.3",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"Счётчик: «98 573 просмотра» заменён на «Поделиться / 98572» (как на реальном сайте)",
|
||||||
|
"Убраны кнопки VK/FB/TW",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
version: "v1.2",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"H1: цвет исправлен с #53514e на #cb9768, размер с ~20px на 36px",
|
||||||
|
"Заголовок баннера: размер с ~16px на 22px, цвет с #111827 на #333333",
|
||||||
|
"CTA-кнопка: стиль изменён с outline на pill (фон #E9E4D4, radius 25px)",
|
||||||
|
"Дефис в H1: длинное тире «–» заменено на простой дефис «-» (как на сайте)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
version: "v1.1",
|
||||||
|
date: "23.03.2026",
|
||||||
|
changes: [
|
||||||
|
"Единый фон #f9f4e7 (ранее был разбит на две зоны)",
|
||||||
|
"Реальное фото врача с пациентом",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function HeroPageClient() {
|
||||||
|
const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);
|
||||||
|
|
||||||
|
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>
|
||||||
|
<BlockMetaBar
|
||||||
|
path={BLOCK_PATH}
|
||||||
|
defaultVersion="v1.3"
|
||||||
|
defaultIsInPreview={true}
|
||||||
|
defaultChangelog={CHANGELOG}
|
||||||
|
onSnapshotSelect={setSnapshot}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
{snapshot ? (
|
||||||
|
<>
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div data-block-capture={BLOCK_PATH}>
|
||||||
|
<HeroBlock />
|
||||||
|
</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: "#bf9975" }}>
|
||||||
|
✓
|
||||||
|
</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. Описание: обычный текст. Галочка: #bf9975 (бежевый).
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* LLM блок */}
|
||||||
|
<LlmBlock path="/blocks/hero" version="v1.3" specText={LLM_HERO_TEXT}>
|
||||||
|
<LlmSection title="Структура баннера" />
|
||||||
|
<LlmTable
|
||||||
|
headers={["Зона", "Ширина", "Фон", "Содержимое"]}
|
||||||
|
rows={[
|
||||||
|
["Весь баннер", "100%", "#f9f4e7", "Единый светло-кремовый фон"],
|
||||||
|
["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка pill"],
|
||||||
|
["Правый блок", "~50%", "#f9f4e7 (общий)", "Фото врача с пациентом"],
|
||||||
|
["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<LlmSection title="Три пункта баннера" />
|
||||||
|
<LlmTable
|
||||||
|
headers={["Ключевое слово", "Описание"]}
|
||||||
|
rows={HERO_CHECKS.map((c) => [c.key, c.desc])}
|
||||||
|
/>
|
||||||
|
<LlmSection title="Цвета" />
|
||||||
|
<LlmTable
|
||||||
|
headers={["Элемент", "Цвет", "Токен"]}
|
||||||
|
rows={[
|
||||||
|
["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"],
|
||||||
|
["Кнопка CTA", "pill-стиль (#E9E4D4, 25px)", "bb-btn-pill"],
|
||||||
|
["Заголовок блока", "#333333", "—"],
|
||||||
|
["H1 страницы", "#cb9768", "36px, bold"],
|
||||||
|
["Галочка ✓", "#bf9975", "Бежевый"],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<LlmSection title="Правила" />
|
||||||
|
<LlmRules
|
||||||
|
rules={[
|
||||||
|
{ ok: true, text: "Фон баннера: #f9f4e7 (светло-кремовый) — единый для всего блока" },
|
||||||
|
{ ok: true, text: "Кнопка CTA: bb-btn-pill (кремовый #E9E4D4, radius 25px)" },
|
||||||
|
{ ok: true, text: "Заголовок: uppercase, bold" },
|
||||||
|
{ ok: true, text: "Три пункта с галочками ✓ (#bf9975)" },
|
||||||
|
{ ok: false, text: "Не менять фон баннера на другой цвет" },
|
||||||
|
{ ok: false, text: "Не разбивать баннер на два разных цвета фона" },
|
||||||
|
{ ok: false, text: "Не убирать три пункта с галочками" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</LlmBlock>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,206 +1,10 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
import HeroPageClient from "./HeroPageClient";
|
||||||
import { HeroBlock, HERO_CHECKS } from "@/components/blocks/HeroBlock";
|
|
||||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
|
||||||
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Hero-баннер. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
title: "Hero-баннер. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||||
};
|
};
|
||||||
|
|
||||||
const LLM_HERO_TEXT = `
|
|
||||||
БЛОК: Hero-баннер (главный баннер страницы)
|
|
||||||
Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
|
|
||||||
Версия: v1.2
|
|
||||||
|
|
||||||
ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
|
|
||||||
«ЛОР Клиника ухо, горло, нос - медицинский центр лечения ЛОР заболеваний у детей и взрослых»
|
|
||||||
Шрифт: Fira Sans, 36px, weight 700, цвет: #cb9768
|
|
||||||
|
|
||||||
СТРУКТУРА БАННЕРА (двухколоночная, единый фон #f9f4e7):
|
|
||||||
Левая колонка (~50%):
|
|
||||||
— Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
|
|
||||||
Шрифт: Fira Sans, 22px, weight 700, uppercase, цвет #333333
|
|
||||||
— 3 пункта с галочками (✓ бежевый #bf9975):
|
|
||||||
1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
|
|
||||||
2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров»
|
|
||||||
3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
|
|
||||||
Ключевое слово: uppercase bold; описание: обычный текст, ~13px
|
|
||||||
— Кнопка «Узнать стоимость операции» — стиль: bb-btn-pill (кремовый фон #E9E4D4, radius 25px)
|
|
||||||
Правая колонка (~50%):
|
|
||||||
— Фото врача с пациентом
|
|
||||||
— Изображение занимает всю высоту блока
|
|
||||||
|
|
||||||
ПОД БАННЕРОМ:
|
|
||||||
— Кнопки соцсетей (VK, FB, TW), цвет #9ca3af
|
|
||||||
— Счётчик просмотров
|
|
||||||
|
|
||||||
ЦВЕТА:
|
|
||||||
Фон баннера: #f9f4e7 (светло-кремовый, единый для всего блока)
|
|
||||||
Кнопка CTA: pill-стиль (кремовый #E9E4D4, border #D5CFBD, radius 25px)
|
|
||||||
Заголовок блока: #333333
|
|
||||||
Пункты: ключевое слово #111827 bold, описание #374151
|
|
||||||
Галочка: #bf9975 (бежевый)
|
|
||||||
|
|
||||||
ПРАВИЛА:
|
|
||||||
✓ Фон баннера всегда #f9f4e7 (светло-кремовый) — единый, без разделения на зоны
|
|
||||||
✓ Заголовок блока uppercase, жирный
|
|
||||||
✓ Три пункта с галочками обязательны
|
|
||||||
✕ Не менять фон баннера на другой цвет
|
|
||||||
✕ Не разбивать фон на два разных цвета
|
|
||||||
✕ Не убирать три пункта с галочками
|
|
||||||
`.trim();
|
|
||||||
|
|
||||||
const CHANGELOG: ChangelogEntry[] = [
|
|
||||||
{
|
|
||||||
version: "v1.2",
|
|
||||||
date: "24.03.2026",
|
|
||||||
changes: [
|
|
||||||
"H1: цвет исправлен с #53514e на #cb9768, размер с ~20px на 36px",
|
|
||||||
"Заголовок баннера: размер с ~16px на 22px, цвет с #111827 на #333333",
|
|
||||||
"CTA-кнопка: стиль изменён с outline на pill (фон #E9E4D4, radius 25px)",
|
|
||||||
"Дефис в H1: длинное тире «–» заменено на простой дефис «-» (как на сайте)",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
version: "v1.1",
|
|
||||||
date: "23.03.2026",
|
|
||||||
changes: [
|
|
||||||
"Единый фон #f9f4e7 (ранее был разбит на две зоны)",
|
|
||||||
"Реальное фото врача с пациентом",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function HeroPage() {
|
export default function HeroPage() {
|
||||||
return (
|
return <HeroPageClient />;
|
||||||
<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>
|
|
||||||
<BlockMetaBar path="/blocks/hero" defaultVersion="v1.2" defaultIsInPreview={true} defaultChangelog={CHANGELOG} />
|
|
||||||
<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>
|
|
||||||
<HeroBlock />
|
|
||||||
</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: "#bf9975" }}>
|
|
||||||
✓
|
|
||||||
</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. Описание: обычный текст. Галочка: #bf9975 (бежевый).
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* LLM блок */}
|
|
||||||
<LlmBlock path="/blocks/hero" version="v1.2" specText={LLM_HERO_TEXT}>
|
|
||||||
<LlmSection title="Структура баннера" />
|
|
||||||
<LlmTable
|
|
||||||
headers={["Зона", "Ширина", "Фон", "Содержимое"]}
|
|
||||||
rows={[
|
|
||||||
["Весь баннер", "100%", "#f9f4e7", "Единый светло-кремовый фон"],
|
|
||||||
["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка pill"],
|
|
||||||
["Правый блок", "~50%", "#f9f4e7 (общий)", "Фото врача с пациентом"],
|
|
||||||
["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<LlmSection title="Три пункта баннера" />
|
|
||||||
<LlmTable
|
|
||||||
headers={["Ключевое слово", "Описание"]}
|
|
||||||
rows={HERO_CHECKS.map((c) => [c.key, c.desc])}
|
|
||||||
/>
|
|
||||||
<LlmSection title="Цвета" />
|
|
||||||
<LlmTable
|
|
||||||
headers={["Элемент", "Цвет", "Токен"]}
|
|
||||||
rows={[
|
|
||||||
["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"],
|
|
||||||
["Кнопка CTA", "pill-стиль (#E9E4D4, 25px)", "bb-btn-pill"],
|
|
||||||
["Заголовок блока", "#333333", "—"],
|
|
||||||
["H1 страницы", "#cb9768", "36px, bold"],
|
|
||||||
["Галочка ✓", "#bf9975", "Бежевый"],
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<LlmSection title="Правила" />
|
|
||||||
<LlmRules
|
|
||||||
rules={[
|
|
||||||
{ ok: true, text: "Фон баннера: #f9f4e7 (светло-кремовый) — единый для всего блока" },
|
|
||||||
{ ok: true, text: "Кнопка CTA: bb-btn-pill (кремовый #E9E4D4, radius 25px)" },
|
|
||||||
{ ok: true, text: "Заголовок: uppercase, bold" },
|
|
||||||
{ ok: true, text: "Три пункта с галочками ✓ (#bf9975)" },
|
|
||||||
{ ok: false, text: "Не менять фон баннера на другой цвет" },
|
|
||||||
{ ok: false, text: "Не разбивать баннер на два разных цвета фона" },
|
|
||||||
{ ok: false, text: "Не убирать три пункта с галочками" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</LlmBlock>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,291 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||||
|
import { NavigationBlock } from "@/components/blocks/NavigationBlock";
|
||||||
|
import { NAV_ITEMS } from "@/components/blocks/navData";
|
||||||
|
import { BlockMetaBar, type SnapshotData } from "@/components/ui/BlockMetaBar";
|
||||||
|
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||||
|
|
||||||
|
const BLOCK_PATH = "/blocks/navigation";
|
||||||
|
|
||||||
|
const LLM_NAV_TEXT = `
|
||||||
|
БЛОК: Шапка и навигация сайта (Header)
|
||||||
|
Источник: perm.oclinica.ru/lor — реальная шапка сайта
|
||||||
|
Версия: v1.3
|
||||||
|
|
||||||
|
СТРУКТУРА ШАПКИ (2 зоны сверху вниз):
|
||||||
|
|
||||||
|
1. ВЕРХНЯЯ ПАНЕЛЬ (фон #fff, без рамок)
|
||||||
|
Три столбца:
|
||||||
|
— Столбец 1 (лево): Логотип клиники (logo-main.png, h-20)
|
||||||
|
— Столбец 2 (центр): Три ссылки вертикально с иконкой 📍:
|
||||||
|
· К. Цеткин, 9 (цвет #52b4bd, подчёркнутая)
|
||||||
|
· Клиника лечения кашля и аллергии (цвет #52b4bd, подчёркнутая)
|
||||||
|
· Центр диагностики и реабилитации (цвет #52b4bd, подчёркнутая)
|
||||||
|
— Столбец 3 (право): Телефон «/342/ 255-53-84» (25px, bold, #000) + кнопка «Заказать звонок» (bb-btn-md bb-btn-pill)
|
||||||
|
|
||||||
|
2. ГЛАВНОЕ МЕНЮ (~46px, фон #fff, border-top 1px solid #e5e7eb)
|
||||||
|
Пункты (8 штук): Клиника | ЛОР врачи | Заболевания | Вопрос-ответ | ЛОР операции | Сурдология | Цены | Контакты
|
||||||
|
Шрифт: 18px, weight 400
|
||||||
|
Цвет ссылок: #000
|
||||||
|
Активный / Hover: #0089c3
|
||||||
|
Разделители: border-right 1px solid #f3f4f6 между пунктами
|
||||||
|
|
||||||
|
ПРАВИЛА:
|
||||||
|
✓ Логотип всегда кликабелен — ведёт на главную страницу раздела
|
||||||
|
✓ Кнопка «Заказать звонок» всегда видна, pill-стиль
|
||||||
|
✓ Телефон кликабелен (tel: ссылка)
|
||||||
|
✓ Активный пункт меню — цвет #0089c3, остальные #000
|
||||||
|
✕ Не добавлять пункты меню, которых нет на сайте
|
||||||
|
✕ Не менять порядок пунктов меню
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const CHANGELOG: ChangelogEntry[] = [
|
||||||
|
{
|
||||||
|
version: "v1.3",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"Подменю: выпадающие списки при hover для Клиника, Заболевания, Вопрос-ответ, ЛОР операции",
|
||||||
|
"Hover-эффект: бежевый фон #f5f0e6 при наведении на пункт меню",
|
||||||
|
"Пункты меню подчёркнуты (underline), без разделителей между ними",
|
||||||
|
"Убрана рамка между шапкой и меню (border-top)",
|
||||||
|
"Все пункты меню чёрного цвета #000 (было: первый #0089c3)",
|
||||||
|
"Уменьшен padding пунктов (px-2.5 вместо px-4) — все помещаются в ширину экрана",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
version: "v1.2",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"Убрана рамка и тень вокруг шапки (как на реальном сайте)",
|
||||||
|
"Структура: 3 столбца (логотип | ссылки вертикально | телефон+кнопка) вместо горизонтального ряда",
|
||||||
|
"Логотип: реальный logo-main.png вместо кружка, размер h-20 (было h-12)",
|
||||||
|
"Кнопка: bb-btn-md (было bb-btn-sm)",
|
||||||
|
"Анатомия шапки: обновлена — 2 зоны вместо 3",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
version: "v1.1",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"Адрес: «Б. Цитная, 3» заменён на «К. Цеткин, 9»",
|
||||||
|
"Ссылки: обновлены на «Клиника лечения кашля и аллергии» и «Центр диагностики и реабилитации»",
|
||||||
|
"Телефон: размер 25px (было ~14px)",
|
||||||
|
"Меню: font-size 18px (было 14px), цвет ссылок #000 (было #53514e)",
|
||||||
|
"Цвет ссылки адреса: #52b4bd (было #0089c3)",
|
||||||
|
"«ЛОР операции» без дефиса (было «ЛОР-операции»)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function NavigationPageClient() {
|
||||||
|
const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);
|
||||||
|
|
||||||
|
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>
|
||||||
|
<BlockMetaBar
|
||||||
|
path={BLOCK_PATH}
|
||||||
|
defaultVersion="v1.3"
|
||||||
|
defaultIsInPreview={true}
|
||||||
|
defaultChangelog={CHANGELOG}
|
||||||
|
onSnapshotSelect={setSnapshot}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
{snapshot ? (
|
||||||
|
<div className="rounded-xl" style={{ paddingBottom: 40 }}>
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div data-block-capture={BLOCK_PATH} className="rounded-xl" style={{ paddingBottom: 40 }}>
|
||||||
|
<NavigationBlock />
|
||||||
|
</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-2 gap-4">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
zone: "1. Верхняя панель",
|
||||||
|
bg: "#f0f9ff",
|
||||||
|
desc: "Три столбца: логотип (logo-main.png) | три ссылки вертикально с 📍 (К. Цеткин 9, Клиника кашля, Центр диагностики) | телефон 25px + кнопка «Заказать звонок» (pill)",
|
||||||
|
details: "Фон: #fff · Без рамок · Ссылки: #52b4bd, подчёркнутые",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
zone: "2. Главное меню",
|
||||||
|
bg: "#fefce8",
|
||||||
|
desc: "8 горизонтальных пунктов: Клиника | ЛОР врачи | Заболевания | Вопрос-ответ | ЛОР операции | Сурдология | Цены | Контакты",
|
||||||
|
details: "Фон: #fff · border-top · 18px · Активный: #0089c3, остальные: #000",
|
||||||
|
},
|
||||||
|
].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)" }}>
|
||||||
|
{z.details}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Пункты меню */}
|
||||||
|
<section className="space-y-3">
|
||||||
|
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||||
|
Пункты главного меню
|
||||||
|
</h2>
|
||||||
|
<div className="rounded-xl border overflow-visible" style={{ borderColor: "var(--bb-border)", background: "#fff" }}>
|
||||||
|
<div className="flex items-center justify-center flex-wrap" style={{ borderTop: "1px solid #e5e7eb" }}>
|
||||||
|
{NAV_ITEMS.map((item) => (
|
||||||
|
<div key={item.label} className="bb-nav-item-wrap relative group">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="bb-nav-item px-2.5 py-3 whitespace-nowrap inline-flex items-center gap-1"
|
||||||
|
style={{
|
||||||
|
fontSize: 18,
|
||||||
|
color: "#000",
|
||||||
|
fontWeight: 400,
|
||||||
|
textDecoration: "underline",
|
||||||
|
textUnderlineOffset: "4px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
{item.submenu.length > 0 && (
|
||||||
|
<span className="text-xs" style={{ color: "#9ca3af", textDecoration: "none", display: "inline-block" }}>▾</span>
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
{item.submenu.length > 0 && (
|
||||||
|
<div
|
||||||
|
className="absolute left-0 top-full z-50 hidden group-hover:block min-w-[220px] py-1 rounded shadow-lg"
|
||||||
|
style={{ background: "#fff", border: "1px solid #e5e7eb" }}
|
||||||
|
>
|
||||||
|
{item.submenu.map((sub) => (
|
||||||
|
<a
|
||||||
|
key={sub}
|
||||||
|
href="#"
|
||||||
|
className="block px-4 py-2 text-sm bb-nav-sub-item"
|
||||||
|
style={{ color: "#333", textDecoration: "none" }}
|
||||||
|
>
|
||||||
|
{sub}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||||
|
Порядок фиксирован. Все пункты чёрные (#000), подчёркнуты. Hover — бежевый фон #f5f0e6. ▾ — выпадающее подменю при наведении.
|
||||||
|
</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: "#000000", token: "—" },
|
||||||
|
{ label: "Hover фон меню", value: "#f5f0e6", token: "bb-nav-item:hover" },
|
||||||
|
{ label: "Ссылки адресов", value: "#52b4bd", token: "—" },
|
||||||
|
{ label: "Кнопка «Заказать»", value: "#e9e4d4", token: "bb-btn-pill" },
|
||||||
|
{ label: "Подменю фон", value: "#ffffff", token: "—" },
|
||||||
|
{ label: "Подменю hover", value: "#f5f0e6", token: "bb-nav-sub-item:hover" },
|
||||||
|
{ label: "Телефон", value: "#000000", token: "25px, bold" },
|
||||||
|
].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="/blocks/navigation" version="v1.3" specText={LLM_NAV_TEXT}>
|
||||||
|
<LlmSection title="Зоны шапки" />
|
||||||
|
<LlmTable
|
||||||
|
headers={["Зона", "Фон", "Содержимое"]}
|
||||||
|
rows={[
|
||||||
|
["Верхняя панель", "#fff, без рамок", "Логотип (logo-main.png) | 3 ссылки вертикально с 📍 (#52b4bd) | Телефон 25px + кнопка pill"],
|
||||||
|
["Главное меню", "#fff, border-top", "8 пунктов 18px: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР операции / Сурдология / Цены / Контакты"],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<LlmSection title="Цвета" />
|
||||||
|
<LlmTable
|
||||||
|
headers={["Элемент", "Цвет", "Токен"]}
|
||||||
|
rows={[
|
||||||
|
["Фон шапки", "#ffffff", "—"],
|
||||||
|
["Ссылки меню (default)", "#000000", "—"],
|
||||||
|
["Активный пункт / 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,227 +1,10 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
import NavigationPageClient from "./NavigationPageClient";
|
||||||
import { NavigationBlock, NAV_ITEMS } from "@/components/blocks/NavigationBlock";
|
|
||||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Шапка и навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
title: "Шапка и навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||||
};
|
};
|
||||||
|
|
||||||
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() {
|
export default function NavigationPage() {
|
||||||
return (
|
return <NavigationPageClient />;
|
||||||
<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>
|
|
||||||
<BlockMetaBar path="/blocks/navigation" defaultVersion="v1.0" defaultIsInPreview={true} />
|
|
||||||
<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">
|
|
||||||
<NavigationBlock />
|
|
||||||
</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="/blocks/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>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,195 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||||
|
import { BlockMetaBar, type SnapshotData } from "@/components/ui/BlockMetaBar";
|
||||||
|
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||||
|
import { NewsBlock } from "@/components/blocks/NewsBlock";
|
||||||
|
|
||||||
|
const BLOCK_PATH = "/blocks/news";
|
||||||
|
|
||||||
|
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.1
|
||||||
|
|
||||||
|
СТРУКТУРА БЛОКА:
|
||||||
|
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();
|
||||||
|
|
||||||
|
const CHANGELOG: ChangelogEntry[] = [
|
||||||
|
{
|
||||||
|
version: "v1.1",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"H2: размер на 36px, цвет на #000000, line-height 38px",
|
||||||
|
"Фон секции: с белого на #f2fee6 (светло-зелёный, как на реальном сайте)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function NewsPageClient() {
|
||||||
|
const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);
|
||||||
|
|
||||||
|
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>
|
||||||
|
<BlockMetaBar
|
||||||
|
path={BLOCK_PATH}
|
||||||
|
defaultVersion="v1.1"
|
||||||
|
defaultIsInPreview={false}
|
||||||
|
defaultChangelog={CHANGELOG}
|
||||||
|
onSnapshotSelect={setSnapshot}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
{snapshot ? (
|
||||||
|
<>
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div data-block-capture={BLOCK_PATH}>
|
||||||
|
<NewsBlock />
|
||||||
|
</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.1" 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,178 +1,10 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
import NewsPageClient from "./NewsPageClient";
|
||||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
|
||||||
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
|
||||||
import { NewsBlock } from "@/components/blocks/NewsBlock";
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Блок «Новости». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
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.1
|
|
||||||
|
|
||||||
СТРУКТУРА БЛОКА:
|
|
||||||
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();
|
|
||||||
|
|
||||||
const CHANGELOG: ChangelogEntry[] = [
|
|
||||||
{
|
|
||||||
version: "v1.1",
|
|
||||||
date: "24.03.2026",
|
|
||||||
changes: [
|
|
||||||
"H2: размер на 36px, цвет на #000000, line-height 38px",
|
|
||||||
"Фон секции: с белого на #f2fee6 (светло-зелёный, как на реальном сайте)",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function NewsBlockPage() {
|
export default function NewsBlockPage() {
|
||||||
return (
|
return <NewsPageClient />;
|
||||||
<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>
|
|
||||||
<BlockMetaBar path="/blocks/news" defaultVersion="v1.1" defaultIsInPreview={false} defaultChangelog={CHANGELOG} />
|
|
||||||
<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>
|
|
||||||
<NewsBlock />
|
|
||||||
</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.1" 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,226 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||||
|
import { BlockMetaBar, type SnapshotData } from "@/components/ui/BlockMetaBar";
|
||||||
|
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
||||||
|
import { ReviewsBlock } from "@/components/blocks/ReviewsBlock";
|
||||||
|
|
||||||
|
const BLOCK_PATH = "/blocks/reviews";
|
||||||
|
|
||||||
|
const MOCK_REVIEWS = [
|
||||||
|
{
|
||||||
|
text: "Спасибо за приём, мне всё понравилось, спасибо за приём, мне всё понравилось. Врач очень внимательный и профессиональный.",
|
||||||
|
author: "Пациент клиники",
|
||||||
|
doctor: "Тимофеева Наталья Александровна",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Очень довольна лечением! Прошла курс процедур, нос дышит отлично. Рекомендую клинику всем.",
|
||||||
|
author: "Наталья К.",
|
||||||
|
doctor: "Макарова Людмила Тимофеевна",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const LLM_REVIEWS_TEXT = `
|
||||||
|
БЛОК: Отзывы о нас
|
||||||
|
Источник: perm.oclinica.ru/lor — блок отзывов
|
||||||
|
Версия: v1.1
|
||||||
|
|
||||||
|
СТРУКТУРА БЛОКА:
|
||||||
|
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();
|
||||||
|
|
||||||
|
const CHANGELOG: ChangelogEntry[] = [
|
||||||
|
{
|
||||||
|
version: "v1.1",
|
||||||
|
date: "24.03.2026",
|
||||||
|
changes: [
|
||||||
|
"H2: размер с ~20px на 36px, цвет с #111827 на #000000, line-height 38px",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ReviewsPageClient() {
|
||||||
|
const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);
|
||||||
|
|
||||||
|
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>
|
||||||
|
<BlockMetaBar
|
||||||
|
path={BLOCK_PATH}
|
||||||
|
defaultVersion="v1.1"
|
||||||
|
defaultIsInPreview={false}
|
||||||
|
defaultChangelog={CHANGELOG}
|
||||||
|
onSnapshotSelect={setSnapshot}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
{snapshot ? (
|
||||||
|
<>
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div data-block-capture={BLOCK_PATH}>
|
||||||
|
<ReviewsBlock />
|
||||||
|
</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.1" specText={LLM_REVIEWS_TEXT}>
|
||||||
|
<LlmSection title="Структура блока" />
|
||||||
|
<LlmTable
|
||||||
|
headers={["Элемент", "Содержимое", "Стиль"]}
|
||||||
|
rows={[
|
||||||
|
["H2", "«Отзывы о нас»", "36px, font-bold, #000000, line-height 38px"],
|
||||||
|
["Подзаголовок", "Описание достижений клиники за 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,209 +1,10 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
import ReviewsPageClient from "./ReviewsPageClient";
|
||||||
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
|
|
||||||
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
|
|
||||||
import { ReviewsBlock } from "@/components/blocks/ReviewsBlock";
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Блок «Отзывы». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
title: "Блок «Отзывы». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||||
};
|
};
|
||||||
|
|
||||||
const MOCK_REVIEWS = [
|
|
||||||
{
|
|
||||||
text: "Спасибо за приём, мне всё понравилось, спасибо за приём, мне всё понравилось. Врач очень внимательный и профессиональный.",
|
|
||||||
author: "Пациент клиники",
|
|
||||||
doctor: "Тимофеева Наталья Александровна",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "Очень довольна лечением! Прошла курс процедур, нос дышит отлично. Рекомендую клинику всем.",
|
|
||||||
author: "Наталья К.",
|
|
||||||
doctor: "Макарова Людмила Тимофеевна",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const LLM_REVIEWS_TEXT = `
|
|
||||||
БЛОК: Отзывы о нас
|
|
||||||
Источник: perm.oclinica.ru/lor — блок отзывов
|
|
||||||
Версия: v1.1
|
|
||||||
|
|
||||||
СТРУКТУРА БЛОКА:
|
|
||||||
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();
|
|
||||||
|
|
||||||
const CHANGELOG: ChangelogEntry[] = [
|
|
||||||
{
|
|
||||||
version: "v1.1",
|
|
||||||
date: "24.03.2026",
|
|
||||||
changes: [
|
|
||||||
"H2: размер с ~20px на 36px, цвет с #111827 на #000000, line-height 38px",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function ReviewsBlockPage() {
|
export default function ReviewsBlockPage() {
|
||||||
return (
|
return <ReviewsPageClient />;
|
||||||
<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>
|
|
||||||
<BlockMetaBar path="/blocks/reviews" defaultVersion="v1.1" defaultIsInPreview={false} defaultChangelog={CHANGELOG} />
|
|
||||||
<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>
|
|
||||||
<ReviewsBlock />
|
|
||||||
</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.1" specText={LLM_REVIEWS_TEXT}>
|
|
||||||
<LlmSection title="Структура блока" />
|
|
||||||
<LlmTable
|
|
||||||
headers={["Элемент", "Содержимое", "Стиль"]}
|
|
||||||
rows={[
|
|
||||||
["H2", "«Отзывы о нас»", "36px, font-bold, #000000, line-height 38px"],
|
|
||||||
["Подзаголовок", "Описание достижений клиники за 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>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -80,8 +80,8 @@ body {
|
|||||||
background: #FFA39C;
|
background: #FFA39C;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #FF847B;
|
border-color: #FF847B;
|
||||||
border-radius: 7px;
|
border-radius: 4px;
|
||||||
font-weight: bold;
|
font-weight: 700;
|
||||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.4), 0px 3px 5px rgba(0,0,0,0.25);
|
box-shadow: 0px 0px 5px rgba(0,0,0,0.4), 0px 3px 5px rgba(0,0,0,0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -109,6 +109,20 @@ body {
|
|||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ─── Навигация сайта ────────────────────────────────────────── */
|
||||||
|
.bb-nav-item {
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
.bb-nav-item:hover {
|
||||||
|
background: #f5f0e6;
|
||||||
|
}
|
||||||
|
.bb-nav-sub-item {
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
.bb-nav-sub-item:hover {
|
||||||
|
background: #f5f0e6;
|
||||||
|
}
|
||||||
|
|
||||||
/* ─── Форм-контролы (Sprint 3) ───────────────────────────────── */
|
/* ─── Форм-контролы (Sprint 3) ───────────────────────────────── */
|
||||||
.bb-input,
|
.bb-input,
|
||||||
.bb-textarea,
|
.bb-textarea,
|
||||||
|
|||||||
@@ -15,15 +15,15 @@ export function CeoBlock() {
|
|||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
lineHeight: 1.75,
|
lineHeight: 1.75,
|
||||||
color: "#374151",
|
color: "#374151",
|
||||||
padding: "40px 48px",
|
padding: "40px 0",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей
|
Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей
|
||||||
с ЛОР заболеваниями. ЛОР клиника представлена на двух адресах:{" "}
|
с ЛОР заболеваниями. ЛОР клиника ухо, горло, нос в Перми представлена по двум адресам:{" "}
|
||||||
<a href="#" style={{ color: "#0089c3" }}>ул. Цитная, 9</a>,{" "}
|
<a href="#" style={{ color: "#52b4bd" }}>ул. Клары Цеткин, 9</a> |{" "}
|
||||||
<a href="#" style={{ color: "#0089c3" }}>ул. Г. Звезда, 31а</a>.{" "}
|
<a href="#" style={{ color: "#52b4bd" }}>ул. Г. Звезда, 31а</a>.{" "}
|
||||||
Это <a href="#" style={{ color: "#0089c3" }}>Клиника лечения кашля и аллергии</a>.
|
Это <a href="#" style={{ color: "#52b4bd" }}>Клиника лечения кашля и аллергии</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div style={{ marginTop: 16 }}>
|
<div style={{ marginTop: 16 }}>
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ export function ContactFormsBlock() {
|
|||||||
Отправляя данные, я даю согласие на обработку персональных данных
|
Отправляя данные, я даю согласие на обработку персональных данных
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
<button className="bb-btn bb-btn-md bb-btn-primary w-full">
|
<button className="bb-btn bb-btn-lg bb-btn-primary w-full">
|
||||||
Запишите меня!
|
Запишите меня!
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -74,7 +74,7 @@ export function ContactFormsBlock() {
|
|||||||
Отправляя данные, я даю согласие на обработку персональных данных
|
Отправляя данные, я даю согласие на обработку персональных данных
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
<button className="bb-btn bb-btn-md bb-btn-primary w-full">
|
<button className="bb-btn bb-btn-lg bb-btn-primary w-full">
|
||||||
Перезвоните мне
|
Перезвоните мне
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,24 +1,37 @@
|
|||||||
const FOOTER_COLUMNS = [
|
const FOOTER_COLUMNS = [
|
||||||
{
|
{
|
||||||
title: "О клинике",
|
title: "О клинике",
|
||||||
links: ["Лицензия", "Миссия", "Врачи", "Вакансии", "История", "Образовательная деятельность", "При инфо"],
|
links: [
|
||||||
|
"Врачи", "Цены", "Контакты", "Новости", "Отзывы", "История",
|
||||||
|
"Официальная информация", "Оборудование", "Слуховые аппараты",
|
||||||
|
"ЛОР конференции", "Вакансии", "Клиника кашля и аллергии", "Доверенность",
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Заболевания",
|
title: "Заболевания",
|
||||||
links: ["Ринит", "Отит", "Гайморит", "Тонзиллит", "Полипы носа", "Искривление перегородки"],
|
links: [
|
||||||
|
"Заболевания уха", "Заболевания горла", "Заболевания носа",
|
||||||
|
"У детей", "У беременных",
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Вопрос-ответ",
|
title: "Вопрос-ответ",
|
||||||
links: [
|
links: [
|
||||||
"Что нужно знать до операции на ухо",
|
"Вопросы-ответы по заболеваниям уха",
|
||||||
"Что нужно знать до операции на нос",
|
"Вопросы-ответы по заболеваниям горла",
|
||||||
"Отзывы до и после лечения у детей",
|
"Вопросы-ответы по заболеваниям носа",
|
||||||
"Что нужно знать при лечении у детей",
|
"Вопросы-ответы по детским заболеваниям",
|
||||||
|
"Вопросы-ответы по операциям",
|
||||||
|
"Задать свой вопрос?",
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Операции",
|
title: "Операции",
|
||||||
links: ["Септопластика", "Турбинопластика", "Тонзиллэктомия", "Аденотомия", "Тимпанопластика", "Мирингопластика"],
|
links: [
|
||||||
|
"Аденотомия", "Вазотомия", "Мастоидэктомия", "Мирингопластика",
|
||||||
|
"Оссикулопластика", "Септопластика", "Стапедопластика",
|
||||||
|
"Тимпанопластика", "Тонзиллотомия", "Микрогайморотомия", "Полипотомия",
|
||||||
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -43,8 +56,8 @@ export function FooterBlock() {
|
|||||||
<li key={link}>
|
<li key={link}>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-xs bb-nav-link"
|
className="text-xs"
|
||||||
style={{ color: "#53514e", textDecoration: "none" }}
|
style={{ color: "#52b4bd", textDecoration: "none" }}
|
||||||
>
|
>
|
||||||
{link}
|
{link}
|
||||||
</a>
|
</a>
|
||||||
@@ -61,33 +74,23 @@ export function FooterBlock() {
|
|||||||
style={{ background: "#fff" }}
|
style={{ background: "#fff" }}
|
||||||
>
|
>
|
||||||
{/* Логотип */}
|
{/* Логотип */}
|
||||||
<div className="flex items-center gap-2 shrink-0">
|
<div className="flex items-center shrink-0">
|
||||||
<div
|
<img
|
||||||
className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold"
|
src="/logo/logo-main.png"
|
||||||
style={{ background: "#0089c3" }}
|
alt="Клиника ухо, горло, нос"
|
||||||
>
|
className="h-12 w-auto"
|
||||||
✚
|
/>
|
||||||
</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>
|
||||||
|
|
||||||
{/* Адрес и соцсети */}
|
{/* Адреса и соцсети */}
|
||||||
<div className="text-center space-y-2">
|
<div className="text-center space-y-2">
|
||||||
<p className="text-xs" style={{ color: "#374151" }}>
|
<div className="text-xs space-y-0.5" style={{ color: "#374151" }}>
|
||||||
Мы находимся по адресу: Пермь, ул. Г. Звезда, 31а
|
<p>Мы находимся по адресам:</p>
|
||||||
</p>
|
<p>г. Пермь, ул. Клары Цеткин, 9</p>
|
||||||
|
<p>г. Пермь, ул. Газеты Звезда, 31А</p>
|
||||||
|
</div>
|
||||||
<div className="flex items-center justify-center gap-2">
|
<div className="flex items-center justify-center gap-2">
|
||||||
{["VK", "OK", "YT", "TG"].map((s) => (
|
{["VK", "YT", "TG", "OK", "Дзен"].map((s) => (
|
||||||
<a
|
<a
|
||||||
key={s}
|
key={s}
|
||||||
href="#"
|
href="#"
|
||||||
@@ -104,14 +107,21 @@ export function FooterBlock() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Часы работы */}
|
{/* Часы работы — два филиала */}
|
||||||
<div className="text-right text-xs space-y-1" style={{ color: "#374151" }}>
|
<div className="text-right text-xs space-y-2" style={{ color: "#374151" }}>
|
||||||
<p className="font-semibold text-xs mb-1" style={{ color: "#111827" }}>
|
<p className="font-semibold text-xs" style={{ color: "#111827" }}>
|
||||||
Часы работы:
|
Время работы клиники:
|
||||||
</p>
|
</p>
|
||||||
<p>Пн–пт: 9:00–21:00</p>
|
<div>
|
||||||
<p>Сб: 9:00–18:00</p>
|
<p className="font-medium" style={{ color: "#111827" }}>Газеты Звезда 31а</p>
|
||||||
<p>Вс: выходной</p>
|
<p>пн – пт: с 09.00 до 21.00</p>
|
||||||
|
<p>сб – вс: с 09:00 до 19:00</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium" style={{ color: "#111827" }}>Клары Цеткин 9</p>
|
||||||
|
<p>пн – сб: с 09.00 до 17.00</p>
|
||||||
|
<p>вс – выходной</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -75,26 +75,17 @@ export function HeroBlock() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Под баннером: соцсети + просмотры */}
|
{/* Под баннером: соцсети + просмотры */}
|
||||||
<div className="flex items-center gap-3 pt-1">
|
<div className="flex items-center gap-2 pt-1">
|
||||||
<span className="text-xs" style={{ color: "#9ca3af" }}>
|
<button
|
||||||
Поделиться:
|
className="text-xs px-3 py-1.5 rounded"
|
||||||
</span>
|
style={{
|
||||||
{["VK", "FB", "TW"].map((s) => (
|
background: "#f9fafb",
|
||||||
<button
|
border: "1px solid #e5e7eb",
|
||||||
key={s}
|
color: "#9ca3af",
|
||||||
className="text-xs px-2 py-1 rounded"
|
}}
|
||||||
style={{
|
>
|
||||||
background: "#f9fafb",
|
Поделиться ✉ 98572
|
||||||
border: "1px solid #e5e7eb",
|
</button>
|
||||||
color: "#9ca3af",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{s}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
<span className="text-xs ml-2" style={{ color: "#9ca3af" }}>
|
|
||||||
👁 98 573 просмотра
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,81 +1,93 @@
|
|||||||
export const NAV_ITEMS = [
|
"use client";
|
||||||
"Клиника",
|
|
||||||
"ЛОР врачи",
|
import { NAV_ITEMS } from "./navData";
|
||||||
"Заболевания",
|
export { NAV_ITEMS };
|
||||||
"Вопрос-ответ",
|
|
||||||
"ЛОР-операции",
|
function NavItem({ item, isActive }: { item: (typeof NAV_ITEMS)[number]; isActive: boolean }) {
|
||||||
"Сурдология",
|
const hasSubmenu = item.submenu.length > 0;
|
||||||
"Цены",
|
|
||||||
"Контакты",
|
return (
|
||||||
];
|
<div className="bb-nav-item-wrap relative group">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="bb-nav-item px-2.5 py-3 whitespace-nowrap inline-flex items-center gap-1"
|
||||||
|
style={{
|
||||||
|
fontSize: 18,
|
||||||
|
color: "#000",
|
||||||
|
fontWeight: 400,
|
||||||
|
textDecoration: "underline",
|
||||||
|
textUnderlineOffset: "4px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
{hasSubmenu && (
|
||||||
|
<span className="text-xs" style={{ color: "#9ca3af", textDecoration: "none", display: "inline-block" }}>▾</span>
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
{hasSubmenu && (
|
||||||
|
<div
|
||||||
|
className="absolute left-0 top-full z-50 hidden group-hover:block min-w-[220px] py-1 rounded shadow-lg"
|
||||||
|
style={{ background: "#fff", border: "1px solid #e5e7eb" }}
|
||||||
|
>
|
||||||
|
{item.submenu.map((sub) => (
|
||||||
|
<a
|
||||||
|
key={sub}
|
||||||
|
href="#"
|
||||||
|
className="block px-4 py-2 text-sm bb-nav-sub-item"
|
||||||
|
style={{ color: "#333", textDecoration: "none" }}
|
||||||
|
>
|
||||||
|
{sub}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function NavigationBlock() {
|
export function NavigationBlock() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="bg-white relative">
|
||||||
className="overflow-hidden"
|
{/* Верхняя панель: три столбца — логотип | ссылки | телефон+кнопка */}
|
||||||
style={{ border: "1px solid #e5e7eb", boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}
|
<div className="flex items-center px-6 py-4">
|
||||||
>
|
{/* Столбец 1: Логотип */}
|
||||||
{/* Топ-бар */}
|
<div className="shrink-0">
|
||||||
<div
|
<img
|
||||||
className="flex items-center justify-between px-6 py-2 text-xs border-b"
|
src="/logo/logo-main.png"
|
||||||
style={{ background: "#fff", borderColor: "#e5e7eb", color: "#6b7280" }}
|
alt="Клиника ухо, горло, нос"
|
||||||
>
|
className="h-20 w-auto"
|
||||||
<div className="flex items-center gap-4">
|
/>
|
||||||
<span>📍 Б. Цитная, 3</span>
|
</div>
|
||||||
<a href="#" style={{ color: "#0089c3" }}>
|
|
||||||
Клиника ухо горло нос и аллергия
|
{/* Столбец 2: Три ссылки вертикально — прижат к логотипу */}
|
||||||
|
<div className="flex flex-col gap-1.5 ml-6">
|
||||||
|
<a href="#" className="flex items-center gap-1.5 text-sm" style={{ color: "#9ca3af", textDecoration: "none" }}>
|
||||||
|
<span style={{ color: "#9ca3af" }}>📍</span>
|
||||||
|
<span style={{ color: "#52b4bd", textDecoration: "underline" }}>К. Цеткин, 9</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" style={{ color: "#0089c3" }}>
|
<a href="#" className="flex items-center gap-1.5 text-sm" style={{ color: "#9ca3af", textDecoration: "none" }}>
|
||||||
Центр аллергологии и пульмонологии
|
<span style={{ color: "#9ca3af" }}>📍</span>
|
||||||
|
<span style={{ color: "#52b4bd", textDecoration: "underline" }}>Клиника лечения кашля и аллергии</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" className="flex items-center gap-1.5 text-sm" style={{ color: "#9ca3af", textDecoration: "none" }}>
|
||||||
|
<span style={{ color: "#9ca3af" }}>📍</span>
|
||||||
|
<span style={{ color: "#52b4bd", textDecoration: "underline" }}>Центр диагностики и реабилитации</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<span className="font-bold text-sm" style={{ color: "#111827" }}>
|
{/* Столбец 3: Телефон + кнопка вертикально — прижат вправо */}
|
||||||
|
<div className="flex flex-col items-end gap-2 shrink-0 ml-auto">
|
||||||
|
<span className="font-bold" style={{ color: "#000", fontSize: 25 }}>
|
||||||
/342/ 255-53-84
|
/342/ 255-53-84
|
||||||
</span>
|
</span>
|
||||||
<button className="bb-btn bb-btn-sm bb-btn-pill">Заказать звонок</button>
|
<button className="bb-btn bb-btn-md 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Главное меню */}
|
{/* Главное меню */}
|
||||||
<nav className="flex border-t bg-white" style={{ borderColor: "#e5e7eb" }}>
|
<nav className="flex bg-white">
|
||||||
{NAV_ITEMS.map((item, i) => (
|
{NAV_ITEMS.map((item, i) => (
|
||||||
<a
|
<NavItem key={item.label} item={item} isActive={i === 0} />
|
||||||
key={item}
|
|
||||||
href="#"
|
|
||||||
className="px-4 py-3 text-sm whitespace-nowrap"
|
|
||||||
style={{
|
|
||||||
color: i === 0 ? "#0089c3" : "#53514e",
|
|
||||||
borderRight: "1px solid #f3f4f6",
|
|
||||||
fontWeight: i === 0 ? 500 : 400,
|
|
||||||
textDecoration: "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item}
|
|
||||||
</a>
|
|
||||||
))}
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,34 @@
|
|||||||
|
export const NAV_ITEMS = [
|
||||||
|
{
|
||||||
|
label: "Клиника",
|
||||||
|
submenu: [
|
||||||
|
"О клинике", "Официальная информация", "История", "Оборудование",
|
||||||
|
"Новости", "Отзывы", "ЛОР конференции", "Вакансии", "Доверенность",
|
||||||
|
"Клиника лечения кашля и аллергии", "Налоговый вычет",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ label: "ЛОР врачи", submenu: [] as string[] },
|
||||||
|
{
|
||||||
|
label: "Заболевания",
|
||||||
|
submenu: ["Горло", "Ухо", "Нос", "У детей", "У беременных", "Диагностика"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Вопрос-ответ",
|
||||||
|
submenu: [
|
||||||
|
"Вопросы по заболеваниям уха", "Вопросы по заболеваниям горла",
|
||||||
|
"Вопросы по заболеваниям носа", "Вопросы по детским заболеваниям",
|
||||||
|
"Вопросы по операциям", "Задать свой вопрос?",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "ЛОР операции",
|
||||||
|
submenu: [
|
||||||
|
"Аденотомия", "Вазотомия", "Мастоидэктомия", "Тимпанопластика 1 типа",
|
||||||
|
"Тимпанопластика 2 типа", "Оссикулопластика", "Септопластика",
|
||||||
|
"Стапедопластика", "Тонзиллотомия", "Полипотомия", "Микрогайморотомия",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ label: "Сурдология", submenu: [] as string[] },
|
||||||
|
{ label: "Цены", submenu: [] as string[] },
|
||||||
|
{ label: "Контакты", submenu: [] as string[] },
|
||||||
|
];
|
||||||
@@ -167,7 +167,7 @@ export function Sidebar() {
|
|||||||
color: "var(--bb-sidebar-text-muted)",
|
color: "var(--bb-sidebar-text-muted)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Sprint 5.5 · v0.5.5
|
Sprint 6 · v0.6.0
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -25,21 +25,58 @@ interface BlockMeta {
|
|||||||
changelog: ChangelogEntry[];
|
changelog: ChangelogEntry[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface SnapshotListItem {
|
||||||
|
id: string;
|
||||||
|
version: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SnapshotData {
|
||||||
|
html: string;
|
||||||
|
css: string;
|
||||||
|
}
|
||||||
|
|
||||||
interface BlockMetaBarProps {
|
interface BlockMetaBarProps {
|
||||||
path: string;
|
path: string;
|
||||||
defaultVersion: string;
|
defaultVersion: string;
|
||||||
defaultIsInPreview: boolean;
|
defaultIsInPreview: boolean;
|
||||||
defaultChangelog?: ChangelogEntry[];
|
defaultChangelog?: ChangelogEntry[];
|
||||||
|
onSnapshotSelect?: (snapshot: SnapshotData | null) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, defaultChangelog = [] }: BlockMetaBarProps) {
|
function captureBlockHtml(path: string): { html: string; css: string } {
|
||||||
|
const container = document.querySelector(`[data-block-capture="${path}"]`);
|
||||||
|
if (!container) throw new Error("Block container not found");
|
||||||
|
|
||||||
|
const html = container.innerHTML;
|
||||||
|
|
||||||
|
const cssRules: string[] = [];
|
||||||
|
for (const sheet of document.styleSheets) {
|
||||||
|
try {
|
||||||
|
for (const rule of sheet.cssRules) {
|
||||||
|
const text = rule.cssText;
|
||||||
|
if (text.includes("bb-") || text.includes("--brand") || text.includes("--bb-")) {
|
||||||
|
cssRules.push(text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch { /* cross-origin sheets */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
return { html, css: cssRules.join("\n") };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, defaultChangelog = [], onSnapshotSelect }: BlockMetaBarProps) {
|
||||||
const [meta, setMeta] = useState<BlockMeta | null>(null);
|
const [meta, setMeta] = useState<BlockMeta | null>(null);
|
||||||
const [editing, setEditing] = useState(false);
|
const [editing, setEditing] = useState(false);
|
||||||
const [versionInput, setVersionInput] = useState(defaultVersion);
|
const [versionInput, setVersionInput] = useState(defaultVersion);
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [savingVersion, setSavingVersion] = useState<false | 'saving' | 'done'>(false);
|
||||||
const [togglingPreview, setTogglingPreview] = useState(false);
|
const [togglingPreview, setTogglingPreview] = useState(false);
|
||||||
const [apiDown, setApiDown] = useState(false);
|
const [apiDown, setApiDown] = useState(false);
|
||||||
const [localPreview, setLocalPreview] = useState(defaultIsInPreview);
|
const [localPreview, setLocalPreview] = useState(defaultIsInPreview);
|
||||||
|
const [snapshots, setSnapshots] = useState<SnapshotListItem[]>([]);
|
||||||
|
const [selectedSnapshotId, setSelectedSnapshotId] = useState<string>("current");
|
||||||
|
const [loadingSnapshot, setLoadingSnapshot] = useState(false);
|
||||||
|
|
||||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
|
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
|
||||||
|
|
||||||
@@ -58,6 +95,20 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, default
|
|||||||
.catch(() => setApiDown(true));
|
.catch(() => setApiDown(true));
|
||||||
}, [apiUrl, path]);
|
}, [apiUrl, path]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!apiUrl || apiDown) return;
|
||||||
|
fetchSnapshots();
|
||||||
|
}, [apiUrl, apiDown, path]);
|
||||||
|
|
||||||
|
async function fetchSnapshots() {
|
||||||
|
if (!apiUrl) return;
|
||||||
|
try {
|
||||||
|
const r = await fetch(`${apiUrl}/blocks/snapshots?path=${encodeURIComponent(path)}`);
|
||||||
|
const data: SnapshotListItem[] = await r.json();
|
||||||
|
setSnapshots(data);
|
||||||
|
} catch { /* ignore */ }
|
||||||
|
}
|
||||||
|
|
||||||
async function patch(data: { version?: string; isInPreview?: boolean; changelog?: ChangelogEntry[] }) {
|
async function patch(data: { version?: string; isInPreview?: boolean; changelog?: ChangelogEntry[] }) {
|
||||||
if (!apiUrl) return null;
|
if (!apiUrl) return null;
|
||||||
const r = await fetch(`${apiUrl}/blocks/by-path?path=${encodeURIComponent(path)}`, {
|
const r = await fetch(`${apiUrl}/blocks/by-path?path=${encodeURIComponent(path)}`, {
|
||||||
@@ -79,6 +130,36 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, default
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function saveFullVersion() {
|
||||||
|
if (apiDown || !apiUrl) return;
|
||||||
|
setSavingVersion('saving');
|
||||||
|
try {
|
||||||
|
// 1. Update block metadata (prefer current API version over hardcoded default)
|
||||||
|
const currentVersion = meta?.version ?? defaultVersion;
|
||||||
|
const updated = await patch({ version: currentVersion, changelog: defaultChangelog });
|
||||||
|
if (updated) {
|
||||||
|
setMeta(updated);
|
||||||
|
setVersionInput(updated.version);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Capture and save HTML snapshot
|
||||||
|
try {
|
||||||
|
const { html, css } = captureBlockHtml(path);
|
||||||
|
await fetch(`${apiUrl}/blocks/snapshots?path=${encodeURIComponent(path)}`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ version: currentVersion, changelog: defaultChangelog, html, css }),
|
||||||
|
});
|
||||||
|
await fetchSnapshots();
|
||||||
|
} catch { /* snapshot capture may fail if container not found */ }
|
||||||
|
|
||||||
|
setSavingVersion('done');
|
||||||
|
setTimeout(() => setSavingVersion(false), 1500);
|
||||||
|
} catch {
|
||||||
|
setSavingVersion(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function togglePreview() {
|
async function togglePreview() {
|
||||||
if (apiDown) {
|
if (apiDown) {
|
||||||
const newVal = !localPreview;
|
const newVal = !localPreview;
|
||||||
@@ -96,9 +177,30 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, default
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function handleVersionSelect(value: string) {
|
||||||
|
setSelectedSnapshotId(value);
|
||||||
|
if (value === "current") {
|
||||||
|
onSnapshotSelect?.(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!apiUrl) return;
|
||||||
|
setLoadingSnapshot(true);
|
||||||
|
try {
|
||||||
|
const r = await fetch(`${apiUrl}/blocks/snapshots/${value}`);
|
||||||
|
const data = await r.json();
|
||||||
|
onSnapshotSelect?.({ html: data.html, css: data.css });
|
||||||
|
} catch {
|
||||||
|
onSnapshotSelect?.(null);
|
||||||
|
setSelectedSnapshotId("current");
|
||||||
|
} finally {
|
||||||
|
setLoadingSnapshot(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const version = meta?.version ?? defaultVersion;
|
const version = meta?.version ?? defaultVersion;
|
||||||
const isInPreview = apiDown ? localPreview : (meta?.isInPreview ?? localPreview);
|
const isInPreview = apiDown ? localPreview : (meta?.isInPreview ?? localPreview);
|
||||||
const changelog: ChangelogEntry[] = (meta?.changelog && meta.changelog.length > 0) ? meta.changelog : defaultChangelog;
|
const changelog: ChangelogEntry[] = (meta?.changelog && meta.changelog.length > 0) ? meta.changelog : defaultChangelog;
|
||||||
|
const isViewingSnapshot = selectedSnapshotId !== "current";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -106,11 +208,31 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, default
|
|||||||
className="flex items-center flex-wrap gap-3 px-4 py-2 rounded-lg text-xs mb-6"
|
className="flex items-center flex-wrap gap-3 px-4 py-2 rounded-lg text-xs mb-6"
|
||||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||||
>
|
>
|
||||||
{/* Version badge */}
|
{/* Version selector */}
|
||||||
<span className="font-semibold" style={{ color: "var(--bb-text-muted)" }}>
|
<span className="font-semibold" style={{ color: "var(--bb-text-muted)" }}>
|
||||||
Версия:
|
Версия:
|
||||||
</span>
|
</span>
|
||||||
{editing ? (
|
{snapshots.length > 0 ? (
|
||||||
|
<select
|
||||||
|
value={selectedSnapshotId}
|
||||||
|
onChange={(e) => handleVersionSelect(e.target.value)}
|
||||||
|
disabled={loadingSnapshot}
|
||||||
|
className="font-mono px-2 py-0.5 rounded text-xs"
|
||||||
|
style={{
|
||||||
|
background: "var(--bb-sidebar-active-bg, #dff0fa)",
|
||||||
|
color: "var(--brand-053m)",
|
||||||
|
border: "1px solid var(--bb-border)",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="current">{version} (текущая)</option>
|
||||||
|
{snapshots.map((s) => (
|
||||||
|
<option key={s.id} value={s.id}>
|
||||||
|
{s.version} — {new Date(s.createdAt).toLocaleDateString("ru")}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
) : editing ? (
|
||||||
<span className="flex items-center gap-1.5">
|
<span className="flex items-center gap-1.5">
|
||||||
<input
|
<input
|
||||||
className="px-2 py-0.5 rounded border text-xs font-mono w-20"
|
className="px-2 py-0.5 rounded border text-xs font-mono w-20"
|
||||||
@@ -151,6 +273,10 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, default
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{loadingSnapshot && (
|
||||||
|
<span className="text-xs" style={{ color: "var(--bb-text-muted)" }}>загрузка...</span>
|
||||||
|
)}
|
||||||
|
|
||||||
<span style={{ color: "var(--bb-border)" }}>·</span>
|
<span style={{ color: "var(--bb-border)" }}>·</span>
|
||||||
|
|
||||||
{/* Preview toggle */}
|
{/* Preview toggle */}
|
||||||
@@ -180,7 +306,31 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, default
|
|||||||
: "Не в превью"}
|
: "Не в превью"}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Subtle offline dot instead of "API офлайн" text */}
|
<span style={{ color: "var(--bb-border)" }}>·</span>
|
||||||
|
|
||||||
|
{/* Save version button */}
|
||||||
|
<button
|
||||||
|
onClick={saveFullVersion}
|
||||||
|
disabled={apiDown || savingVersion === 'saving' || isViewingSnapshot}
|
||||||
|
title={apiDown ? 'API недоступен' : isViewingSnapshot ? 'Переключитесь на текущую версию' : 'Сохранить текущую версию и changelog в БД'}
|
||||||
|
className="px-2.5 py-1 rounded font-medium transition-colors"
|
||||||
|
style={savingVersion === 'done' ? {
|
||||||
|
background: "#dcfce7",
|
||||||
|
color: "#16a34a",
|
||||||
|
border: "1px solid #86efac",
|
||||||
|
cursor: "default",
|
||||||
|
} : {
|
||||||
|
background: "var(--bb-sidebar-bg)",
|
||||||
|
color: (apiDown || isViewingSnapshot) ? "var(--bb-text-muted)" : "var(--brand-053m)",
|
||||||
|
border: "1px solid var(--bb-border)",
|
||||||
|
cursor: (apiDown || isViewingSnapshot) ? "default" : "pointer",
|
||||||
|
opacity: (apiDown || isViewingSnapshot) ? 0.5 : 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{savingVersion === 'saving' ? '...' : savingVersion === 'done' ? 'Сохранено' : 'Сохранить версию'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Subtle offline dot */}
|
||||||
{apiDown && (
|
{apiDown && (
|
||||||
<span
|
<span
|
||||||
className="inline-block w-1.5 h-1.5 rounded-full"
|
className="inline-block w-1.5 h-1.5 rounded-full"
|
||||||
@@ -190,6 +340,23 @@ export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, default
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Archive notice */}
|
||||||
|
{isViewingSnapshot && (
|
||||||
|
<div
|
||||||
|
className="flex items-center gap-2 px-4 py-2 rounded-lg text-xs mb-4"
|
||||||
|
style={{ background: "#fef3c7", border: "1px solid #fcd34d", color: "#92400e" }}
|
||||||
|
>
|
||||||
|
Архивная версия (только просмотр).
|
||||||
|
<button
|
||||||
|
onClick={() => handleVersionSelect("current")}
|
||||||
|
className="underline font-medium"
|
||||||
|
style={{ color: "#92400e" }}
|
||||||
|
>
|
||||||
|
Вернуться к текущей
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Changelog rendered from API or fallback */}
|
{/* Changelog rendered from API or fallback */}
|
||||||
{changelog.length > 0 && <BlockChangelog changelog={changelog} />}
|
{changelog.length > 0 && <BlockChangelog changelog={changelog} />}
|
||||||
</>
|
</>
|
||||||
|
|||||||
+58
-10
@@ -2,9 +2,9 @@
|
|||||||
|
|
||||||
## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
|
## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
|
||||||
|
|
||||||
**Версия контекста:** 4.3
|
**Версия контекста:** 4.5
|
||||||
**Дата обновления:** 2026-03-24
|
**Дата обновления:** 2026-03-25
|
||||||
**Актуальный спринт:** Sprint 5.5
|
**Актуальный спринт:** Sprint 6
|
||||||
**Сайт клиники:** https://oclinica.ru
|
**Сайт клиники:** https://oclinica.ru
|
||||||
**Брендбук (локально):** http://localhost:3001
|
**Брендбук (локально):** http://localhost:3001
|
||||||
**Брендбук (production):** https://web-oclinica.vercel.app
|
**Брендбук (production):** https://web-oclinica.vercel.app
|
||||||
@@ -291,10 +291,16 @@ SVG-версия ожидается (не получена от клиники).
|
|||||||
| `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle |
|
| `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle |
|
||||||
| `/components/cards` | ✅ Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
|
| `/components/cards` | ✅ Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
|
||||||
| `/components/*` | 🔜 Sprint 4–5 | Модалки, таблицы, навигация |
|
| `/components/*` | 🔜 Sprint 4–5 | Модалки, таблицы, навигация |
|
||||||
| `/blocks/hero` | ✅ Sprint 5.5 v1.2 | Hero-баннер: H1 36px #cb9768, заголовок 22px #333, кнопка pill, фон #f9f4e7 |
|
| `/blocks/navigation` | ✅ Sprint 5 v1.3 | Шапка: топ-бар, логотип, главное меню с подменю |
|
||||||
| `/blocks/doctors` | ✅ Sprint 5.5 v1.2 | Врачи: H2 36px #000, статистика #60959c без фона, 6 реальных фото |
|
| `/blocks/hero` | ✅ Sprint 5 v1.3 | Hero-баннер: H1 36px #cb9768, заголовок 22px #333, кнопка pill, фон #f9f4e7 |
|
||||||
| `/blocks/*` | 🔜 Sprint 5 | Отзывы, формы, новости, footer |
|
| `/blocks/ceo` | ✅ Sprint 5 v1.2 | Вводный текст: специализация клиники, вопросы-стимулы |
|
||||||
| `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты |
|
| `/blocks/doctors` | ✅ Sprint 5 v1.2 | Врачи: H2 36px #000, статистика #60959c без фона, 6 реальных фото |
|
||||||
|
| `/blocks/reviews` | ✅ Sprint 5 v1.1 | Отзывы: карусель, кавычка, стрелки навигации |
|
||||||
|
| `/blocks/contact-forms` | ✅ Sprint 5 v1.2 | Формы записи: «Будьте здоровы!» + «Узнайте стоимость» |
|
||||||
|
| `/blocks/news` | ✅ Sprint 5 v1.1 | Новости: 4 карточки, фон #f2fee6 |
|
||||||
|
| `/blocks/contact` | ✅ Sprint 5 v1.1 | Footer: 4 колонки ссылок, адреса, соцсети |
|
||||||
|
| `/pages/preview` | ✅ Sprint 5.5 | Просмотр страницы: сборка блоков с toggle «В превью» |
|
||||||
|
| `/pages/*` | 🔜 Sprint 6 | Главная, заболевание, врачи, цены, контакты |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -416,7 +422,47 @@ CSS-классы в `globals.css`. Компонент: `@/components/ui/Button`
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 10. Технический стек проекта
|
## 10. Система версий блоков
|
||||||
|
|
||||||
|
Каждый блок поддерживает версионирование с HTML-снимками.
|
||||||
|
|
||||||
|
### Модель данных
|
||||||
|
|
||||||
|
**Block** — текущее состояние блока:
|
||||||
|
- `path` (unique), `version`, `isInPreview`, `changelog` (JSON), `name`
|
||||||
|
|
||||||
|
**BlockSnapshot** — архивный снимок версии:
|
||||||
|
- `blockPath`, `version` (unique пара), `html` (Text), `css` (Text), `changelog` (JSON)
|
||||||
|
|
||||||
|
### API эндпоинты
|
||||||
|
|
||||||
|
| Метод | URL | Назначение |
|
||||||
|
|-------|-----|------------|
|
||||||
|
| GET | `/blocks` | Все блоки |
|
||||||
|
| GET | `/blocks/by-path?path={path}` | Блок по пути (auto-create) |
|
||||||
|
| PATCH | `/blocks/by-path?path={path}` | Обновить version/isInPreview/changelog |
|
||||||
|
| POST | `/blocks/snapshots?path={path}` | Создать/обновить HTML-снимок версии |
|
||||||
|
| GET | `/blocks/snapshots?path={path}` | Список снимков (id, version, createdAt) |
|
||||||
|
| GET | `/blocks/snapshots/:id` | Полный снимок (html + css) |
|
||||||
|
|
||||||
|
### Компоненты
|
||||||
|
|
||||||
|
- **BlockMetaBar** (`components/ui/BlockMetaBar.tsx`) — версия dropdown, toggle «В превью», кнопка «Сохранить версию»
|
||||||
|
- Prop `onSnapshotSelect` — callback при выборе архивной версии
|
||||||
|
- При сохранении захватывает `innerHTML` из `[data-block-capture="{path}"]` + CSS правила с `bb-` префиксом
|
||||||
|
- **BlockChangelog** (`components/ui/BlockChangelog.tsx`) — рендер истории версий
|
||||||
|
|
||||||
|
### Архитектура страниц блоков
|
||||||
|
|
||||||
|
Каждая страница блока разделена на:
|
||||||
|
- `page.tsx` — Server Component (экспортирует `metadata`)
|
||||||
|
- `XxxPageClient.tsx` — Client Component (state для snapshot, `data-block-capture` для захвата)
|
||||||
|
|
||||||
|
При просмотре архивной версии живой компонент заменяется на `dangerouslySetInnerHTML` со снимком.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. Технический стек проекта
|
||||||
|
|
||||||
| Слой | Технология | Версия |
|
| Слой | Технология | Версия |
|
||||||
|------|-----------|--------|
|
|------|-----------|--------|
|
||||||
@@ -431,7 +477,7 @@ CSS-классы в `globals.css`. Компонент: `@/components/ui/Button`
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 11. История изменений контекста
|
## 12. История изменений контекста
|
||||||
|
|
||||||
| Версия | Дата | Что добавлено |
|
| Версия | Дата | Что добавлено |
|
||||||
|--------|------|---------------|
|
|--------|------|---------------|
|
||||||
@@ -443,10 +489,12 @@ CSS-классы в `globals.css`. Компонент: `@/components/ui/Button`
|
|||||||
| 4.1 | 2026-03-22 | Sprint 4 done: карточки (DoctorCard/NewsCard/ReviewCard/PriceCard/ServiceCard), бейджи/теги/алерты |
|
| 4.1 | 2026-03-22 | Sprint 4 done: карточки (DoctorCard/NewsCard/ReviewCard/PriceCard/ServiceCard), бейджи/теги/алерты |
|
||||||
| 4.2 | 2026-03-23 | Sprint 5: блоки Hero v1.1, Doctors v1.1 |
|
| 4.2 | 2026-03-23 | Sprint 5: блоки Hero v1.1, Doctors v1.1 |
|
||||||
| 4.3 | 2026-03-24 | Sprint 5.5: исправлены CSS-стили блоков по реальному сайту (H1 #cb9768 36px, H2 #000 36px, фоны форм #d4f6f8, фон новостей #f2fee6, CTA-кнопка pill) |
|
| 4.3 | 2026-03-24 | Sprint 5.5: исправлены CSS-стили блоков по реальному сайту (H1 #cb9768 36px, H2 #000 36px, фоны форм #d4f6f8, фон новостей #f2fee6, CTA-кнопка pill) |
|
||||||
|
| 4.4 | 2026-03-25 | Sprint 5.5: кнопка «Сохранить версию» (snapshot HTML+CSS в PostgreSQL), dropdown переключения между версиями блоков, навигация v1.3 с подменю, блоки обновлены из предыдущей сессии |
|
||||||
|
| 4.5 | 2026-03-25 | Sprint 5/5.5 завершены: все 8 блоков /lor задокументированы, CEO v1.2, исправлен баг saveFullVersion() (откат версии), таблица блоков обновлена |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 12. Что обновлять в этом файле
|
## 13. Что обновлять в этом файле
|
||||||
|
|
||||||
При каждом спринте добавляй:
|
При каждом спринте добавляй:
|
||||||
- Новые компоненты и их спецификации (цвета, размеры, состояния)
|
- Новые компоненты и их спецификации (цвета, размеры, состояния)
|
||||||
|
|||||||
+31
-12
@@ -178,7 +178,7 @@
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Sprint 5 — Все блоки текущего сайта
|
## Sprint 5 — Все блоки текущего сайта ✅ ЗАВЕРШЁН
|
||||||
|
|
||||||
**Цель:** Задокументировать ВСЕ блоки страницы perm.oclinica.ru/lor за один спринт.
|
**Цель:** Задокументировать ВСЕ блоки страницы perm.oclinica.ru/lor за один спринт.
|
||||||
Источник: скриншот страницы + CSS сайта. Только фронтенд, mock-данные.
|
Источник: скриншот страницы + CSS сайта. Только фронтенд, mock-данные.
|
||||||
@@ -186,18 +186,21 @@
|
|||||||
### Блоки с реального сайта (сверху вниз, по скриншоту /lor)
|
### Блоки с реального сайта (сверху вниз, по скриншоту /lor)
|
||||||
|
|
||||||
**Шапка и навигация** → `/blocks/navigation`
|
**Шапка и навигация** → `/blocks/navigation`
|
||||||
- [ ] FE: Топ-бар: адрес «Б. Цитная, 3», телефон /342/ 255-53-84, кнопка «Заказать звонок» (pill)
|
- [x] FE: Топ-бар: адрес «К. Цеткин, 9», телефон /342/ 255-53-84 (25px), кнопка «Заказать звонок» (pill)
|
||||||
- [ ] FE: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н. ОЛЕНЕВОЙ»
|
- [x] FE: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н. ОЛЕНЕВОЙ»
|
||||||
- [ ] FE: Главное меню: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты
|
- [x] FE: Главное меню 18px: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР операции / Сурдология / Цены / Контакты
|
||||||
|
- [x] FE: v1.1 — адрес, ссылки, размеры шрифтов, цвета синхронизированы с реальным сайтом
|
||||||
|
|
||||||
**Hero-баннер** → `/blocks/hero`
|
**Hero-баннер** → `/blocks/hero`
|
||||||
- [x] FE: Баннер — единый фон #f9f4e7 (светло-кремовый, замерян пикселем), галочки #bf9975
|
- [x] FE: Баннер — единый фон #f9f4e7 (светло-кремовый, замерян пикселем), галочки #bf9975
|
||||||
- [x] FE: Правая часть: реальное фото врача с пациентом (спарсено с сайта → public/hero-doctor.jpg)
|
- [x] FE: Правая часть: реальное фото врача с пациентом (спарсено с сайта → public/hero-doctor.jpg)
|
||||||
- [x] LLM: v1.1 — исправлен цвет фона, кнопка outline, галочки бежевые
|
- [x] LLM: v1.1 — исправлен цвет фона, кнопка outline, галочки бежевые
|
||||||
- [x] FE: v1.2 — H1: 36px/#cb9768, заголовок баннера: 22px/#333, CTA: pill-стиль, дефис в H1
|
- [x] FE: v1.2 — H1: 36px/#cb9768, заголовок баннера: 22px/#333, CTA: pill-стиль, дефис в H1
|
||||||
|
- [x] FE: v1.3 — счётчик «Поделиться ✉ 98572», убраны кнопки VK/FB/TW
|
||||||
|
|
||||||
**Вводный текст (CEO-блок)** → `/blocks/ceo`
|
**Вводный текст (CEO-блок)** → `/blocks/ceo`
|
||||||
- [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы
|
- [x] FE: Текст специализации клиники, Q&A вопросы-стимулы
|
||||||
|
- [x] FE: v1.1 — адрес «ул. Клары Цеткин, 9» (было «ул. Цитная, 9»), цвет ссылок #52b4bd
|
||||||
|
|
||||||
**Блок врачей** → `/blocks/doctors`
|
**Блок врачей** → `/blocks/doctors`
|
||||||
- [x] FE: Заголовок text-3xl + 3 стат-блока (без фона, #60959c + border-bottom) + сетка 6 карточек
|
- [x] FE: Заголовок text-3xl + 3 стат-блока (без фона, #60959c + border-bottom) + сетка 6 карточек
|
||||||
@@ -214,21 +217,27 @@
|
|||||||
- [x] FE: Форма «Будьте здоровы!» (фон #d4f6f8, поля: имя/телефон/врач, кнопка «Запишите меня!»)
|
- [x] FE: Форма «Будьте здоровы!» (фон #d4f6f8, поля: имя/телефон/врач, кнопка «Запишите меня!»)
|
||||||
- [x] FE: Форма «Узнайте стоимость операции» (фон #d4f6f8, поля: имя/телефон, кнопка «Перезвоните мне»)
|
- [x] FE: Форма «Узнайте стоимость операции» (фон #d4f6f8, поля: имя/телефон, кнопка «Перезвоните мне»)
|
||||||
- [x] FE: v1.1 — H2: 36px/#000000, фон обеих форм: #d4f6f8 (ранее #b8e6ed и #fff)
|
- [x] FE: v1.1 — H2: 36px/#000000, фон обеих форм: #d4f6f8 (ранее #b8e6ed и #fff)
|
||||||
|
- [x] FE: v1.2 — кнопка bb-btn-lg 18px bold (было bb-btn-md 14px), border-radius 4px (было 7px)
|
||||||
|
|
||||||
**Блок новостей** → `/blocks/news`
|
**Блок новостей** → `/blocks/news`
|
||||||
- [x] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock)
|
- [x] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock)
|
||||||
- [x] FE: v1.1 — H2: 36px/#000000, фон секции: #f2fee6 (ранее белый)
|
- [x] FE: v1.1 — H2: 36px/#000000, фон секции: #f2fee6 (ранее белый)
|
||||||
|
|
||||||
**Footer (подвал)** → `/blocks/contact`
|
**Footer (подвал)** → `/blocks/contact`
|
||||||
- [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы
|
- [x] FE: 4 колонки ссылок по реальному сайту (О клинике 13, Заболевания 5, Вопрос-ответ 6, Операции 11)
|
||||||
|
- [x] FE: Два адреса: Клары Цеткин, 9 + Газеты Звезда, 31А
|
||||||
|
- [x] FE: Два графика работы по филиалам
|
||||||
|
- [x] FE: Соцсети: VK, YT, TG, OK, Дзен
|
||||||
|
- [x] FE: v1.1 — полное обновление контента по реальному сайту
|
||||||
|
|
||||||
### Общее к Sprint 5
|
### Общее к Sprint 5
|
||||||
- [x] FE: LLM-блоки на hero v1.1 и doctors v1.1
|
- [x] FE: LLM-блоки на hero v1.1 и doctors v1.1
|
||||||
- [x] Docs: Типографика сайта — реальные стили на 23.03.2026 (новый раздел в /foundation/typography)
|
- [x] Docs: Типографика сайта — реальные стили на 23.03.2026 (новый раздел в /foundation/typography)
|
||||||
- [x] Docs: Цвета — исправлен #f9f4e7 (Hero), #b8e6ed (форма), #e9e4d4 (пилюли)
|
- [x] Docs: Цвета — исправлен #f9f4e7 (Hero), #b8e6ed (форма), #e9e4d4 (пилюли)
|
||||||
- [ ] FE: Убрать `soon` у Hero и Doctors в Sidebar
|
- [x] FE: Убрать `soon` у Hero и Doctors в Sidebar
|
||||||
- [ ] FE: CEO-блок
|
- [x] FE: CEO-блок v1.1
|
||||||
- [x] FE: Блоки отзывов, форм записи, новостей — компоненты + страницы документации
|
- [x] FE: Блоки отзывов, форм записи, новостей — компоненты + страницы документации
|
||||||
|
- [x] FE: Сравнение ВСЕХ блоков с реальным сайтом и синхронизация (24.03.2026)
|
||||||
- [x] Docs: Обновление `docs/LLM_CONTEXT.md` v4.3
|
- [x] Docs: Обновление `docs/LLM_CONTEXT.md` v4.3
|
||||||
- [x] FE: Исправлены CSS-стили ВСЕХ блоков по реальному сайту (24.03.2026):
|
- [x] FE: Исправлены CSS-стили ВСЕХ блоков по реальному сайту (24.03.2026):
|
||||||
- H1 страницы: 36px, #cb9768 (ранее ~20px, #53514e)
|
- H1 страницы: 36px, #cb9768 (ранее ~20px, #53514e)
|
||||||
@@ -247,13 +256,16 @@
|
|||||||
- BlockMetaBar: загружает version + changelog из API, fallback на defaultVersion/defaultChangelog
|
- BlockMetaBar: загружает version + changelog из API, fallback на defaultVersion/defaultChangelog
|
||||||
- Компонент BlockChangelog: отображает историю версий из API или из кода
|
- Компонент BlockChangelog: отображает историю версий из API или из кода
|
||||||
- Надпись «API офлайн» заменена на серую точку
|
- Надпись «API офлайн» заменена на серую точку
|
||||||
- [ ] FE: Footer
|
- [x] FE: Footer (блок `/blocks/contact` готов)
|
||||||
|
|
||||||
**Результат спринта:** Hero v1.2, Doctors v1.2, Reviews v1.1, ContactForms v1.1, News v1.1 — стили синхронизированы с реальным сайтом. Метаданные блоков хранятся в БД.
|
- [x] FE: CEO-блок v1.2 — убраны горизонтальные отступы (padding 40px 48px → 40px 0)
|
||||||
|
- [x] FE: Исправлен баг BlockMetaBar.saveFullVersion() — использовал defaultVersion вместо meta.version, что откатывало версию в БД при сохранении снапшота
|
||||||
|
|
||||||
|
**Результат спринта:** Hero v1.3, Doctors v1.2, CEO v1.2, Reviews v1.1, ContactForms v1.2, News v1.1, Navigation v1.3, Contact v1.1 — все блоки /lor задокументированы. Метаданные блоков хранятся в БД. Система снапшотов работает корректно.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Sprint 5.5 — «Просмотр текущей страницы» (внеочередной)
|
## Sprint 5.5 — «Просмотр текущей страницы» (внеочередной) ✅ ЗАВЕРШЁН
|
||||||
|
|
||||||
**Цель:** Добавить интерактивный раздел брендбука, который собирает главную страницу из уже задокументированных блоков.
|
**Цель:** Добавить интерактивный раздел брендбука, который собирает главную страницу из уже задокументированных блоков.
|
||||||
Показывает живой превью того, как выглядит сайт на основе данных брендбука.
|
Показывает живой превью того, как выглядит сайт на основе данных брендбука.
|
||||||
@@ -304,7 +316,14 @@
|
|||||||
- [x] FE: Toggle «В превью» через localStorage (fallback при API офлайн)
|
- [x] FE: Toggle «В превью» через localStorage (fallback при API офлайн)
|
||||||
- [x] BE: BlockMetaBar + PreviewClient подключены к NestJS API `/blocks`
|
- [x] BE: BlockMetaBar + PreviewClient подключены к NestJS API `/blocks`
|
||||||
- [x] BE: Метаданные блоков (version, changelog, isInPreview) в PostgreSQL
|
- [x] BE: Метаданные блоков (version, changelog, isInPreview) в PostgreSQL
|
||||||
- [ ] Docs: Добавить `/pages/preview` v1.0 в LLM_CONTEXT.md
|
- [x] Docs: Добавить `/pages/preview` v1.0 в LLM_CONTEXT.md
|
||||||
|
- [x] FE: Кнопка «Сохранить версию» — фиксация version + changelog из кода в БД
|
||||||
|
- [x] BE: Модель BlockSnapshot (html, css, version, changelog) + миграция
|
||||||
|
- [x] BE: API эндпоинты: POST/GET `/blocks/snapshots`, GET `/blocks/snapshots/:id`
|
||||||
|
- [x] FE: BlockMetaBar — dropdown переключения между сохранёнными версиями
|
||||||
|
- [x] FE: HTML-снимок блока при сохранении версии (innerHTML + CSS capture)
|
||||||
|
- [x] FE: Все 8 страниц блоков — split на Server/Client Components для snapshot support
|
||||||
|
- [x] FE: Навигация v1.3 — подменю с hover-dropdown, navData.ts, обновлённые стили блоков
|
||||||
|
|
||||||
### Зависимости
|
### Зависимости
|
||||||
- Зависит от: Sprint 5 (блоки hero и doctors уже готовы — ✅)
|
- Зависит от: Sprint 5 (блоки hero и doctors уже готовы — ✅)
|
||||||
|
|||||||
Reference in New Issue
Block a user