feat(sprint-5): document all blocks from perm.oclinica.ru/lor
Created 8 pages from real site (screenshot source): - /components/navigation — header: top-bar, logo, nav menu (8 items) - /blocks/hero — hero banner: #b8e6ed bg, 3 checkmarks, CTA button - /blocks/ceo — intro text: clinic description + Q&A stimuli - /blocks/doctors — doctors: 3 stats (#dff0fa) + 6 card grid - /blocks/reviews — reviews carousel: #eef4d1 bg, decorative quote - /blocks/contact-forms — 2 forms: "Будьте здоровы!" (#b8e6ed) + "Стоимость" - /blocks/news — 4 news cards row + "Все новости" button - /blocks/contact — footer: 4 link columns + logo + address + hours globals.css: added .bb-nav-link:hover (#0089c3) Sidebar: all blocks/navigation unlocked (removed soon), v0.5.1 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
@@ -0,0 +1,264 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Блок «Отзывы». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const MOCK_REVIEWS = [
|
||||
{
|
||||
text: "Спасибо за приём, мне всё понравилось, спасибо за приём, мне всё понравилось. Врач очень внимательный и профессиональный.",
|
||||
author: "Пациент клиники",
|
||||
doctor: "Тимофеева Наталья Александровна",
|
||||
},
|
||||
{
|
||||
text: "Очень довольна лечением! Прошла курс процедур, нос дышит отлично. Рекомендую клинику всем.",
|
||||
author: "Наталья К.",
|
||||
doctor: "Макарова Людмила Тимофеевна",
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_REVIEWS_TEXT = `
|
||||
БЛОК: Отзывы о нас
|
||||
Источник: perm.oclinica.ru/lor — блок отзывов
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА БЛОКА:
|
||||
1. ЗАГОЛОВОК H2: «Отзывы о нас»
|
||||
Подзаголовок: «За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа
|
||||
более 50000 пациентов. Но дня сейчас мы высоко ценим каждый положительный отзыв и искренние слова благодарности»
|
||||
|
||||
2. КАРУСЕЛЬ ОТЗЫВОВ:
|
||||
— Большая открывающая кавычка (« «) в цвете #b8e6ed, font-size 80–100px
|
||||
— Текст отзыва: курсив, 15–16px, #374151, background #eef4d1
|
||||
— Ссылка «Читать отзыв полностью» в цвете #0089c3
|
||||
— Стрелки навигации < > по бокам (round buttons)
|
||||
— Карусель показывает 1 отзыв за раз
|
||||
|
||||
ЦВЕТА:
|
||||
Фон карточки отзыва: #eef4d1 (светло-жёлто-зелёный)
|
||||
Кавычка: #b8e6ed (светло-бирюзовый)
|
||||
Текст отзыва: #374151
|
||||
Ссылка «Читать полностью»: #0089c3
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ Фон карточки отзыва: #eef4d1 (тот же что у ReviewCard)
|
||||
✓ Большая декоративная кавычка
|
||||
✓ Ссылка «Читать отзыв полностью» обязательна
|
||||
✓ Навигация карусели (стрелки)
|
||||
✕ Не показывать более 1 отзыва за раз в карусели
|
||||
✕ Не убирать навигационные стрелки
|
||||
`.trim();
|
||||
|
||||
export default function ReviewsBlockPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Блок «Отзывы о нас»
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Карусель отзывов с perm.oclinica.ru/lor — большая кавычка, текст, «Читать полностью», стрелки.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-8 space-y-6"
|
||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
{/* Заголовок */}
|
||||
<div>
|
||||
<h2 className="text-xl font-bold mb-2" style={{ color: "#111827" }}>
|
||||
Отзывы о нас
|
||||
</h2>
|
||||
<p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
|
||||
За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа
|
||||
более 50 000 пациентов. Но даже сейчас мы высоко ценим каждый положительный отзыв
|
||||
и искренние слова благодарности.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Карусель (статичная) */}
|
||||
<div className="relative flex items-center gap-4">
|
||||
{/* Стрелка влево */}
|
||||
<button
|
||||
className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
|
||||
style={{
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
}}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
|
||||
{/* Карточка отзыва */}
|
||||
<div
|
||||
className="flex-1 rounded-xl p-6 relative"
|
||||
style={{ background: "#eef4d1" }}
|
||||
>
|
||||
{/* Декоративная кавычка */}
|
||||
<div
|
||||
className="text-8xl leading-none mb-2 font-serif"
|
||||
style={{ color: "#b8e6ed", lineHeight: 0.8 }}
|
||||
>
|
||||
«
|
||||
</div>
|
||||
<p
|
||||
className="text-sm italic leading-relaxed"
|
||||
style={{ color: "#374151" }}
|
||||
>
|
||||
{MOCK_REVIEWS[0].text}
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-block mt-3 text-sm"
|
||||
style={{ color: "#0089c3" }}
|
||||
>
|
||||
Читать отзыв полностью
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Стрелка вправо */}
|
||||
<button
|
||||
className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
|
||||
style={{
|
||||
background: "var(--bb-sidebar-bg)",
|
||||
border: "1px solid var(--bb-border)",
|
||||
color: "var(--bb-text-muted)",
|
||||
}}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Несколько примеров */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Примеры отзывов (mock)
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{MOCK_REVIEWS.map((r, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-xl p-5 space-y-3"
|
||||
style={{ background: "#eef4d1", border: "1px solid #d4e6a0" }}
|
||||
>
|
||||
<div
|
||||
className="text-5xl leading-none font-serif"
|
||||
style={{ color: "#b8e6ed" }}
|
||||
>
|
||||
«
|
||||
</div>
|
||||
<p
|
||||
className="text-sm italic leading-relaxed"
|
||||
style={{ color: "#374151" }}
|
||||
>
|
||||
{r.text}
|
||||
</p>
|
||||
<div className="pt-1">
|
||||
<a href="#" className="text-sm" style={{ color: "#0089c3" }}>
|
||||
Читать отзыв полностью
|
||||
</a>
|
||||
</div>
|
||||
<div className="border-t pt-2" style={{ borderColor: "#c8d8a0" }}>
|
||||
<p className="text-xs font-medium" style={{ color: "#374151" }}>
|
||||
{r.author}
|
||||
</p>
|
||||
<p className="text-[11px]" style={{ color: "#6b7280" }}>
|
||||
о враче: {r.doctor}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Анатомия карточки отзыва
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ label: "Фон карточки", value: "#eef4d1", note: "светло-жёлто-зелёный" },
|
||||
{ label: "Кавычка декоративная", value: "#b8e6ed", note: "80–100px, font-serif" },
|
||||
{ label: "Текст отзыва", value: "#374151", note: "14px, italic" },
|
||||
{ label: "Ссылка", value: "#0089c3", note: "--brand-053m" },
|
||||
].map((t) => (
|
||||
<div
|
||||
key={t.label}
|
||||
className="p-3 rounded-xl space-y-1"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded border"
|
||||
style={{ background: t.value, borderColor: "var(--bb-border)" }}
|
||||
/>
|
||||
<p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>
|
||||
{t.label}
|
||||
</p>
|
||||
<p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{t.value}
|
||||
</p>
|
||||
<p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{t.note}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/reviews" version="v1.0" specText={LLM_REVIEWS_TEXT}>
|
||||
<LlmSection title="Структура блока" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Содержимое", "Стиль"]}
|
||||
rows={[
|
||||
["H2", "«Отзывы о нас»", "text-xl, font-bold, #111827"],
|
||||
["Подзаголовок", "Описание достижений клиники за 12 лет", "14px, #374151"],
|
||||
["Кавычка", "Декоративная «", "80–100px, #b8e6ed, font-serif"],
|
||||
["Текст отзыва", "Полный текст отзыва пациента", "14px, italic, #374151"],
|
||||
["Ссылка", "«Читать отзыв полностью»", "#0089c3"],
|
||||
["Стрелки карусели", "‹ ›", "Round buttons, фон var(--bb-sidebar-bg)"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Цвета" />
|
||||
<LlmTable
|
||||
headers={["Элемент", "Цвет", "Токен"]}
|
||||
rows={[
|
||||
["Фон карточки отзыва", "#eef4d1", "—"],
|
||||
["Декоративная кавычка", "#b8e6ed", "—"],
|
||||
["Текст отзыва", "#374151", "—"],
|
||||
["Ссылка", "#0089c3", "--brand-053m"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "Фон карточки отзыва: #eef4d1" },
|
||||
{ ok: true, text: "Декоративная кавычка цвет #b8e6ed" },
|
||||
{ ok: true, text: "Ссылка «Читать отзыв полностью» обязательна" },
|
||||
{ ok: true, text: "Навигация карусели: стрелки ‹ ›" },
|
||||
{ ok: false, text: "Не показывать несколько отзывов одновременно" },
|
||||
{ ok: false, text: "Не убирать навигационные стрелки" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user