feat(sprint-5.5): add page preview section with Create button

- 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>

apps/web/app/blocks/hero/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { HeroBlock, HERO_CHECKS } from "@/components/blocks/HeroBlock";
 
 export const metadata: Metadata = {
   title: "Hero-баннер. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -18,7 +19,7 @@ const LLM_HERO_TEXT = `
 Левая колонка (~50%):
   — Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
     Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827
-  — 3 пункта с галочками (✓ зелёный):
+  — 3 пункта с галочками (✓ бежевый #bf9975):
     1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
     2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров»
     3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
@@ -29,7 +30,7 @@ const LLM_HERO_TEXT = `
   — Изображение занимает всю высоту блока
 
 ПОД БАННЕРОМ:
-  — Кнопки соцсетей (Facebook, VK, Twitter/X), цвет #6b7280
+  — Кнопки соцсетей (VK, FB, TW), цвет #9ca3af
   — Счётчик просмотров
 
 ЦВЕТА:
@@ -37,7 +38,7 @@ const LLM_HERO_TEXT = `
   Кнопка CTA: outline-стиль (светлая), не коралловая
   Заголовок блока: #111827
   Пункты: ключевое слово #111827 bold, описание #374151
-  Галочка: цвет бренда (бежевый/золотой ~#bf9975)
+  Галочка: #bf9975 (бежевый)
 
 ПРАВИЛА:
 ✓ Фон баннера всегда #f9f4e7 (светло-кремовый) — единый, без разделения на зоны
@@ -48,21 +49,6 @@ const LLM_HERO_TEXT = `
 ✕ Не убирать три пункта с галочками
 `.trim();
 
-const HERO_CHECKS = [
-  {
-    key: "БЕЗОПАСНО",
-    desc: "оперируют хирурги с 15-летним опытом работы",
-  },
-  {
-    key: "БЕЗ ВНЕШНИХ РАЗРЕЗОВ",
-    desc: "хирургия смяткими размерами",
-  },
-  {
-    key: "БЫСТРО",
-    desc: "под наблюдением врача пациент находится 1 сутки",
-  },
-];
-
 export default function HeroPage() {
   return (
     <div className="p-8 max-w-5xl mx-auto space-y-10">
@@ -78,7 +64,8 @@ export default function HeroPage() {
           Hero-баннер
         </h1>
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
-          Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон <strong>#f9f4e7</strong>.
+          Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон{" "}
+          <strong>#f9f4e7</strong>.
         </p>
       </div>
 
@@ -87,99 +74,7 @@ export default function HeroPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-
-        {/* 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: "var(--bb-text-muted)" }}>
-            Поделиться:
-          </span>
-          {["VK", "FB", "TW"].map((s) => (
-            <button
-              key={s}
-              className="text-xs px-2 py-1 rounded"
-              style={{
-                background: "var(--bb-sidebar-bg)",
-                border: "1px solid var(--bb-border)",
-                color: "var(--bb-text-muted)",
-              }}
-            >
-              {s}
-            </button>
-          ))}
-          <span className="text-xs ml-2" style={{ color: "var(--bb-text-muted)" }}>
-            👁 98 573 просмотра
-          </span>
-        </div>
+        <HeroBlock />
       </section>
 
       {/* Анатомия */}
@@ -210,7 +105,7 @@ export default function HeroPage() {
         </div>
       </section>
 
-      {/* Пункты с галочками */}
+      {/* Три пункта с галочками */}
       <section className="space-y-3">
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Три пункта баннера
@@ -222,7 +117,7 @@ export default function HeroPage() {
               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: "#22c55e" }}>
+              <span className="font-bold text-lg shrink-0" style={{ color: "#bf9975" }}>
                 ✓
               </span>
               <div>
@@ -237,7 +132,7 @@ export default function HeroPage() {
           ))}
         </div>
         <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
-          Ключевое слово: uppercase + bold. Описание: обычный текст. Галочка: #22c55e.
+          Ключевое слово: uppercase + bold. Описание: обычный текст. Галочка: #bf9975 (бежевый).
         </p>
       </section>
 
@@ -265,7 +160,7 @@ export default function HeroPage() {
             ["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"],
             ["Кнопка CTA", "outline-стиль", "bb-btn-outline"],
             ["Заголовок блока", "#111827", "—"],
-            ["Галочка ✓", "#bf9975", "Бежевый (--brand-081m approx.)"],
+            ["Галочка ✓", "#bf9975", "Бежевый"],
           ]}
         />
         <LlmSection title="Правила" />