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,198 @@
|
||||
import type { Metadata } from "next";
|
||||
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Блок «Новости». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
|
||||
};
|
||||
|
||||
const MOCK_NEWS = [
|
||||
{
|
||||
date: "20.12.2025",
|
||||
title: "Наша работа клиники и новогодние праздники",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
date: "11.08.2025",
|
||||
title: "СЕРВИС ОБНОВЛЕНИЕ: Обновление графика работы клиники",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
date: "12.06.2025",
|
||||
title: "СЕРВИС ОБНОВЛЕНИЕ: Временное изменение работы клиники 22.06.25 г.",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
date: "11.06.2025",
|
||||
title: "График работы клиники в ближайшие праздники",
|
||||
href: "#",
|
||||
},
|
||||
];
|
||||
|
||||
const LLM_NEWS_TEXT = `
|
||||
БЛОК: Новости
|
||||
Источник: perm.oclinica.ru/lor — блок новостей внизу страницы
|
||||
Версия: v1.0
|
||||
|
||||
СТРУКТУРА БЛОКА:
|
||||
1. ЗАГОЛОВОК H2: «Новости»
|
||||
Выравнивание: по центру или слева
|
||||
|
||||
2. СЕТКА КАРТОЧЕК НОВОСТЕЙ (4 штуки в ряд):
|
||||
Каждая карточка:
|
||||
— Дата: малый текст сверху (формат DD.MM.YYYY), цвет #6b7280
|
||||
— Заголовок новости: синяя ссылка (#0089c3), 14px, font-weight 500, hover underline
|
||||
— Без превью-изображения
|
||||
— Без описания (только дата + заголовок-ссылка)
|
||||
Hover на карточке: bg #eef4d1, box-shadow 0 0 16px 0 #9e9e9a (bb-news-card)
|
||||
|
||||
3. КНОПКА «Все новости»:
|
||||
Стиль: outline (#BF9975) или teal (#60959c), выровнена по центру под сеткой
|
||||
На сайте: ссылка «Все новости»
|
||||
|
||||
ЦВЕТА:
|
||||
Дата: #6b7280
|
||||
Заголовок-ссылка: #0089c3 (--brand-053m)
|
||||
Hover фон карточки: #eef4d1
|
||||
Hover тень: 0 0 16px 0 #9e9e9a
|
||||
|
||||
ПРАВИЛА:
|
||||
✓ 4 карточки в ряд
|
||||
✓ Дата сверху карточки
|
||||
✓ Заголовок = ссылка #0089c3
|
||||
✓ Hover: bg #eef4d1 (класс bb-news-card)
|
||||
✓ Кнопка «Все новости» под сеткой
|
||||
✕ Не добавлять изображения в карточки новостей главной страницы
|
||||
✕ Не добавлять описание/анонс в карточку
|
||||
`.trim();
|
||||
|
||||
export default function NewsBlockPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-10">
|
||||
{/* Заголовок страницы */}
|
||||
<div>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-1"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Блоки
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
|
||||
Блок «Новости»
|
||||
</h1>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Блок новостей с perm.oclinica.ru/lor — 4 карточки в ряд (дата + заголовок-ссылка),
|
||||
кнопка «Все новости».
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Живой пример */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Живой пример
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-8 space-y-6"
|
||||
style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<h2 className="text-xl font-bold" style={{ color: "#111827" }}>
|
||||
Новости
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{MOCK_NEWS.map((n) => (
|
||||
<div
|
||||
key={n.date}
|
||||
className="bb-news-card rounded-lg p-3 cursor-pointer"
|
||||
style={{
|
||||
border: "1px solid var(--bb-border)",
|
||||
transition: "background 0.15s, box-shadow 0.15s",
|
||||
}}
|
||||
>
|
||||
<p className="text-xs mb-2" style={{ color: "#6b7280" }}>
|
||||
{n.date}
|
||||
</p>
|
||||
<a
|
||||
href={n.href}
|
||||
className="text-sm font-medium leading-snug block"
|
||||
style={{ color: "#0089c3", textDecoration: "none" }}
|
||||
>
|
||||
{n.title}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<button className="bb-btn bb-btn-md bb-btn-outline">
|
||||
Все новости
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Анатомия карточки */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
|
||||
Анатомия карточки новости
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-xl p-6 max-w-xs"
|
||||
style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
|
||||
style={{ background: "#f0f9ff", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
① Дата: DD.MM.YYYY · цвет #6b7280
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
|
||||
style={{ background: "#f0f9ff", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
② Заголовок-ссылка · #0089c3 · font-weight 500
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
|
||||
style={{ background: "#fefce8", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
Hover: bg #eef4d1 · shadow 0 0 16px #9e9e9a
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Нет изображений, нет описания — только дата и заголовок.
|
||||
CSS-класс <code className="font-mono">.bb-news-card</code> обрабатывает hover.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* LLM блок */}
|
||||
<LlmBlock path="/blocks/news" version="v1.0" specText={LLM_NEWS_TEXT}>
|
||||
<LlmSection title="Структура карточки новости" />
|
||||
<LlmTable
|
||||
headers={["Поле", "Стиль", "Значение"]}
|
||||
rows={[
|
||||
["Дата", "text-xs, #6b7280", "Формат DD.MM.YYYY"],
|
||||
["Заголовок", "text-sm, font-weight 500, #0089c3", "Ссылка на новость"],
|
||||
["Hover фон", ".bb-news-card:hover", "#eef4d1"],
|
||||
["Hover тень", ".bb-news-card:hover", "0 0 16px 0 #9e9e9a"],
|
||||
]}
|
||||
/>
|
||||
<LlmSection title="Mock-данные (4 реальные новости с сайта)" />
|
||||
<LlmTable
|
||||
headers={["Дата", "Заголовок"]}
|
||||
rows={MOCK_NEWS.map((n) => [n.date, n.title])}
|
||||
/>
|
||||
<LlmSection title="Правила" />
|
||||
<LlmRules
|
||||
rules={[
|
||||
{ ok: true, text: "4 карточки в ряд (grid-cols-4)" },
|
||||
{ ok: true, text: "Дата сверху, заголовок-ссылка ниже" },
|
||||
{ ok: true, text: "Hover: класс bb-news-card (bg #eef4d1)" },
|
||||
{ ok: true, text: "Кнопка «Все новости» под сеткой (bb-btn-outline)" },
|
||||
{ ok: false, text: "Не добавлять изображения в карточки" },
|
||||
{ ok: false, text: "Не добавлять текст-анонс в карточку" },
|
||||
]}
|
||||
/>
|
||||
</LlmBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user