AR 15 M4
72829b5d46
- New route /pages/preview with empty state ("Создать") and assembled preview
- Preview assembles real site blocks in order (Hero + Doctors ready, rest placeholders)
- localStorage persists created state; "Пересобрать" resets it
- Extracted HeroBlock and DoctorsBlock as reusable components
- Refactored hero and doctors pages to import from components/blocks/
- Sidebar: added "Просмотр страницы" link, bumped to Sprint 5.5 · v0.5.5
- SPRINTS.md: added Sprint 5.5 plan with summary table row
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
export const HERO_CHECKS = [
|
||
{ key: "БЕЗОПАСНО", desc: "оперируют хирурги с 15-летним опытом работы" },
|
||
{ key: "БЕЗ ВНЕШНИХ РАЗРЕЗОВ", desc: "хирургия сверхмалых размеров" },
|
||
{ key: "БЫСТРО", desc: "под наблюдением врача пациент находится 1 сутки" },
|
||
];
|
||
|
||
export function HeroBlock() {
|
||
return (
|
||
<div className="space-y-3">
|
||
{/* H1 страницы */}
|
||
<h2
|
||
className="text-xl font-bold leading-snug"
|
||
style={{ color: "#53514e" }}
|
||
>
|
||
ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых
|
||
</h2>
|
||
|
||
{/* Баннер — единый светло-кремовый фон */}
|
||
<div
|
||
className="rounded-xl overflow-hidden flex"
|
||
style={{ background: "#f9f4e7", minHeight: 280 }}
|
||
>
|
||
{/* Левая часть — контент */}
|
||
<div
|
||
className="flex flex-col justify-center gap-5 p-8"
|
||
style={{ width: "50%", flexShrink: 0 }}
|
||
>
|
||
<p
|
||
className="text-base font-bold uppercase leading-snug"
|
||
style={{ color: "#111827" }}
|
||
>
|
||
Эндоскопическое хирургическое лечение ЛОР органов
|
||
</p>
|
||
<ul className="space-y-3">
|
||
{HERO_CHECKS.map((c) => (
|
||
<li key={c.key} className="flex items-start gap-2 text-sm">
|
||
<span
|
||
className="shrink-0 font-bold"
|
||
style={{ color: "#bf9975", marginTop: 1 }}
|
||
>
|
||
✓
|
||
</span>
|
||
<span>
|
||
<span className="font-bold uppercase" style={{ color: "#111827" }}>
|
||
{c.key}
|
||
</span>{" "}
|
||
<span style={{ color: "#374151" }}>– {c.desc}</span>
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<div>
|
||
<button className="bb-btn bb-btn-md bb-btn-outline">
|
||
Узнать стоимость операции
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Правая часть — фото врача */}
|
||
<div className="flex-1 relative overflow-hidden" style={{ minHeight: 280 }}>
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src="/hero-doctor.jpg"
|
||
alt="Врач на приёме с пациентом"
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
objectFit: "cover",
|
||
objectPosition: "center top",
|
||
position: "absolute",
|
||
inset: 0,
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Под баннером: соцсети + просмотры */}
|
||
<div className="flex items-center gap-3 pt-1">
|
||
<span className="text-xs" style={{ color: "#9ca3af" }}>
|
||
Поделиться:
|
||
</span>
|
||
{["VK", "FB", "TW"].map((s) => (
|
||
<button
|
||
key={s}
|
||
className="text-xs px-2 py-1 rounded"
|
||
style={{
|
||
background: "#f9fafb",
|
||
border: "1px solid #e5e7eb",
|
||
color: "#9ca3af",
|
||
}}
|
||
>
|
||
{s}
|
||
</button>
|
||
))}
|
||
<span className="text-xs ml-2" style={{ color: "#9ca3af" }}>
|
||
👁 98 573 просмотра
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|