refactor: move navigation page from /components to /blocks section

- Moved /components/navigation → /blocks/navigation
- Updated Sidebar: navigation is now first item in "Блоки"
- Updated PreviewClient block path
- Updated seed block path
- Updated SPRINTS.md

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/api/package.json

@@ -24,8 +24,11 @@
     "@nestjs/common": "^11.0.1",
     "@nestjs/core": "^11.0.1",
     "@nestjs/platform-express": "^11.0.1",
+    "@prisma/adapter-pg": "^7.5.0",
     "@prisma/client": "^7.5.0",
+    "@types/pg": "^8.20.0",
     "dotenv": "^17.3.1",
+    "pg": "^8.20.0",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.1"
   },
@@ -52,9 +55,13 @@
     "ts-loader": "^9.5.2",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.20.0"
   },
+  "prisma": {
+    "seed": "ts-node prisma/seed.ts"
+  },
   "jest": {
     "moduleFileExtensions": [
       "js",

apps/api/prisma.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
   schema: "prisma/schema.prisma",
   migrations: {
     path: "prisma/migrations",
+    seed: "tsx prisma/seed.ts",
   },
   datasource: {
     url: process.env["DATABASE_URL"],

apps/api/prisma/migrations/20260323120441_add_block_model/migration.sql

@@ -0,0 +1,53 @@
+-- CreateEnum
+CREATE TYPE "Role" AS ENUM ('viewer', 'editor');
+
+-- CreateEnum
+CREATE TYPE "ComponentStatus" AS ENUM ('draft', 'review', 'approved');
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "passwordHash" TEXT NOT NULL,
+    "role" "Role" NOT NULL DEFAULT 'viewer',
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ExperimentalComponent" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "baseComponent" TEXT NOT NULL,
+    "attributes" JSONB NOT NULL,
+    "status" "ComponentStatus" NOT NULL DEFAULT 'draft',
+    "authorId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "ExperimentalComponent_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Block" (
+    "id" TEXT NOT NULL,
+    "path" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "version" TEXT NOT NULL,
+    "isInPreview" BOOLEAN NOT NULL DEFAULT false,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Block_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Block_path_key" ON "Block"("path");
+
+-- AddForeignKey
+ALTER TABLE "ExperimentalComponent" ADD CONSTRAINT "ExperimentalComponent_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

apps/api/prisma/migrations/20260324141120_add_changelog_field/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Block" ADD COLUMN     "changelog" JSONB NOT NULL DEFAULT '[]';

apps/api/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"

apps/api/prisma/schema.prisma

@@ -1,6 +1,5 @@
 generator client {
-  provider = "prisma-client"
+  provider = "prisma-client-js"
-  output   = "../generated/prisma"
 }
 
 datasource db {
@@ -40,3 +39,14 @@ model ExperimentalComponent {
   createdAt     DateTime        @default(now())
   updatedAt     DateTime        @updatedAt
 }
+
+model Block {
+  id          String   @id @default(uuid())
+  path        String   @unique
+  name        String
+  version     String
+  isInPreview Boolean  @default(false)
+  changelog   Json     @default("[]")
+  updatedAt   DateTime @updatedAt
+  createdAt   DateTime @default(now())
+}

apps/api/prisma/seed.ts

@@ -0,0 +1,134 @@
+import 'dotenv/config';
+import { PrismaPg } from '@prisma/adapter-pg';
+import { PrismaClient } from '@prisma/client';
+
+const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL });
+const prisma = new PrismaClient({ adapter });
+
+const BLOCKS = [
+  {
+    path: '/blocks/navigation',
+    name: 'Шапка / Навигация',
+    version: 'v1.0',
+    isInPreview: true,
+    changelog: [
+      { version: 'v1.0', date: '23.03.2026', changes: ['Топ-бар, логотип, главное меню из 8 пунктов'] },
+    ],
+  },
+  {
+    path: '/blocks/hero',
+    name: 'Hero-баннер',
+    version: 'v1.2',
+    isInPreview: true,
+    changelog: [
+      { version: 'v1.2', date: '24.03.2026', changes: [
+        'H1: цвет #cb9768, размер 36px (было ~20px #53514e)',
+        'Заголовок баннера: 22px #333 (было 16px #111827)',
+        'CTA-кнопка: pill-стиль (было outline)',
+        'Дефис в H1: «–» → «-»',
+      ]},
+      { version: 'v1.1', date: '23.03.2026', changes: [
+        'Единый фон #f9f4e7 (ранее разбит на две зоны)',
+        'Реальное фото врача с пациентом',
+      ]},
+    ],
+  },
+  {
+    path: '/blocks/ceo',
+    name: 'Вводный текст (CEO-блок)',
+    version: 'v1.0',
+    isInPreview: false,
+    changelog: [
+      { version: 'v1.0', date: '23.03.2026', changes: ['Текст специализации клиники, вопросы-стимулы'] },
+    ],
+  },
+  {
+    path: '/blocks/doctors',
+    name: 'Наши врачи',
+    version: 'v1.2',
+    isInPreview: true,
+    changelog: [
+      { version: 'v1.2', date: '24.03.2026', changes: [
+        'H2: 36px #000000 (было ~30px #111827)',
+        'line-height: 38px',
+      ]},
+      { version: 'v1.1', date: '23.03.2026', changes: [
+        '6 реальных фото врачей с сайта',
+        'Статистика без фона, только border-bottom #60959c',
+      ]},
+    ],
+  },
+  {
+    path: '/blocks/reviews',
+    name: 'Отзывы',
+    version: 'v1.1',
+    isInPreview: true,
+    changelog: [
+      { version: 'v1.1', date: '24.03.2026', changes: [
+        'H2: 36px #000000 (было ~20px #111827)',
+        'line-height: 38px',
+      ]},
+      { version: 'v1.0', date: '23.03.2026', changes: [
+        'Карусель отзывов: кавычка, текст, стрелки',
+      ]},
+    ],
+  },
+  {
+    path: '/blocks/contact-forms',
+    name: 'Формы записи',
+    version: 'v1.1',
+    isInPreview: true,
+    changelog: [
+      { version: 'v1.1', date: '24.03.2026', changes: [
+        'H2: 36px #000000',
+        'Фон формы 1: #b8e6ed → #d4f6f8',
+        'Фон формы 2: #ffffff → #d4f6f8 (обе формы на одном фоне)',
+      ]},
+      { version: 'v1.0', date: '23.03.2026', changes: [
+        'Две формы записи: «Будьте здоровы!» и «Узнайте стоимость операции»',
+      ]},
+    ],
+  },
+  {
+    path: '/blocks/news',
+    name: 'Новости',
+    version: 'v1.1',
+    isInPreview: true,
+    changelog: [
+      { version: 'v1.1', date: '24.03.2026', changes: [
+        'H2: 36px #000000',
+        'Фон секции: #fff → #f2fee6 (светло-зелёный)',
+      ]},
+      { version: 'v1.0', date: '23.03.2026', changes: [
+        '4 карточки новостей в ряд, кнопка «Все новости»',
+      ]},
+    ],
+  },
+  {
+    path: '/blocks/contact',
+    name: 'Подвал / Контакт',
+    version: 'v1.0',
+    isInPreview: false,
+    changelog: [
+      { version: 'v1.0', date: '23.03.2026', changes: ['4 колонки ссылок, адрес, часы работы'] },
+    ],
+  },
+];
+
+async function main() {
+  for (const block of BLOCKS) {
+    await prisma.block.upsert({
+      where: { path: block.path },
+      update: { version: block.version, isInPreview: block.isInPreview, changelog: block.changelog },
+      create: block,
+    });
+  }
+  console.log(`Seeded ${BLOCKS.length} blocks`);
+}
+
+main()
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());

apps/api/src/app.module.ts

@@ -1,9 +1,10 @@
 import { Module } from '@nestjs/common';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
+import { BlocksModule } from './blocks/blocks.module';
 
 @Module({
-  imports: [],
+  imports: [BlocksModule],
   controllers: [AppController],
   providers: [AppService],
 })

apps/api/src/blocks/blocks.controller.ts

@@ -0,0 +1,25 @@
+import { Controller, Get, Patch, Query, Body } from '@nestjs/common';
+import { BlocksService } from './blocks.service';
+
+@Controller('blocks')
+export class BlocksController {
+  constructor(private blocks: BlocksService) {}
+
+  @Get()
+  findAll() {
+    return this.blocks.findAll();
+  }
+
+  @Get('by-path')
+  findByPath(@Query('path') path: string) {
+    return this.blocks.findByPath(path);
+  }
+
+  @Patch('by-path')
+  update(
+    @Query('path') path: string,
+    @Body() body: { version?: string; isInPreview?: boolean; changelog?: object[] },
+  ) {
+    return this.blocks.update(path, body);
+  }
+}

apps/api/src/blocks/blocks.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { BlocksController } from './blocks.controller';
+import { BlocksService } from './blocks.service';
+import { PrismaService } from '../prisma/prisma.service';
+
+@Module({
+  controllers: [BlocksController],
+  providers: [BlocksService, PrismaService],
+})
+export class BlocksModule {}

apps/api/src/blocks/blocks.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+
+@Injectable()
+export class BlocksService {
+  constructor(private prisma: PrismaService) {}
+
+  findAll() {
+    return this.prisma.block.findMany({ orderBy: { createdAt: 'asc' } });
+  }
+
+  async findByPath(path: string) {
+    const existing = await this.prisma.block.findUnique({ where: { path } });
+    if (existing) return existing;
+    return this.prisma.block.create({
+      data: { path, name: path, version: 'v0.1', isInPreview: false },
+    });
+  }
+
+  update(path: string, data: { version?: string; isInPreview?: boolean; changelog?: object[] }) {
+    return this.prisma.block.update({ where: { path }, data });
+  }
+}

apps/api/src/main.ts

@@ -1,8 +1,10 @@
+import 'dotenv/config';
 import { NestFactory } from '@nestjs/core';
 import { AppModule } from './app.module';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
+  app.enableCors({ origin: [/^http:\/\/localhost:\d+$/] });
   await app.listen(process.env.PORT ?? 3000);
 }
 bootstrap();

apps/api/src/prisma/prisma.service.ts

@@ -0,0 +1,19 @@
+import { Injectable, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
+import { PrismaPg } from '@prisma/adapter-pg';
+import { PrismaClient } from '@prisma/client';
+
+@Injectable()
+export class PrismaService extends PrismaClient implements OnModuleInit, OnModuleDestroy {
+  constructor() {
+    const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL });
+    super({ adapter });
+  }
+
+  async onModuleInit() {
+    await this.$connect();
+  }
+
+  async onModuleDestroy() {
+    await this.$disconnect();
+  }
+}

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

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+import { CeoBlock, CEO_QUESTIONS } from "@/components/blocks/CeoBlock";
 
 export const metadata: Metadata = {
   title: "Вводный текст (CEO-блок). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -46,13 +48,6 @@ const LLM_CEO_TEXT = `
 ✕ Не менять стиль вопросов на другой формат
 `.trim();
 
-const CEO_QUESTIONS = [
-  "У вас болит ухо, заложен нос, першит в горле, и вы не можете понять причину?",
-  "Вам срочно нужен платный ЛОР в Перми или, как ещё говорят, «ухогорлонос»?",
-  "Заболел ребёнок?",
-  "Срочно ищете частные ЛОР-клиники Перми для детей 0+ и взрослых с удобным режимом работы с 9:00 до 21:00 по будням?",
-  "Вам назначили проведение эндоскопической операции на ухе, горле или носе?",
-];
 
 export default function CeoPage() {
   return (
@@ -68,6 +63,7 @@ export default function CeoPage() {
         <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. Описание специализации клиники
           + вопросы-стимулы для пациентов.
@@ -79,38 +75,8 @@ export default function CeoPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-        <div
+        <div className="rounded-xl overflow-hidden" style={{ border: "1px solid var(--bb-border)" }}>
-          className="rounded-xl p-8"
+          <CeoBlock />
-          style={{
-            background: "#fff",
-            border: "1px solid var(--bb-border)",
-            fontFamily: "var(--font-web)",
-            fontSize: 14,
-            lineHeight: 1.75,
-            color: "#374151",
-          }}
-        >
-          <p>
-            Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей
-            с ЛОР заболеваниями. ЛОР клиника представлена на двух адресах:{" "}
-            <a href="#" style={{ color: "#0089c3" }}>ул. Цитная, 9</a>, <a href="#" style={{ color: "#0089c3" }}>ул. Г. Звезда, 31а</a>.{" "}
-            Это <a href="#" style={{ color: "#0089c3" }}>Клиника лечения кашля и аллергии</a>.
-          </p>
-
-          <div className="mt-4 space-y-2">
-            {CEO_QUESTIONS.map((q) => (
-              <p key={q}>— {q}</p>
-            ))}
-          </div>
-
-          <p className="mt-4">
-            Обращайтесь в ЛОР центр ухо, горло, нос в Перми, наши врачи оториноларингологи обязательно Вам помогут!
-          </p>
-          <p className="mt-2">
-            Клиника ЛОР болезней ухо, горло, нос – это наиболее современный центр оториноларингологии в Перми,
-            благодаря эндоскопическому оборудованию, высокому профессионализму оториноларингологов.
-          </p>
-          <p className="mt-4 font-medium">Будьте здоровы!</p>
         </div>
       </section>
 

apps/web/app/blocks/contact-forms/page.tsx

@@ -1,5 +1,8 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
+import { ContactFormsBlock } from "@/components/blocks/ContactFormsBlock";
 
 export const metadata: Metadata = {
   title: "Формы записи. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -8,13 +11,13 @@ export const metadata: Metadata = {
 const LLM_FORMS_TEXT = `
 БЛОК: Формы записи и обратной связи
 Источник: perm.oclinica.ru/lor — два блока форм на одной странице
-Версия: v1.0
+Версия: v1.1
 
 ФОРМА 1: «Будьте здоровы!» (форма записи на приём)
   Позиция: после блока отзывов
-  Заголовок H2: «Будьте здоровы!»
+  Заголовок H2: «Будьте здоровы!» — 36px, bold, #000000, line-height 38px
   Подзаголовок: «Запишитесь на приём к врачу!»
-  Фон секции: #b8e6ed (светло-бирюзовый)
+  Фон секции: #d4f6f8 (светло-бирюзовый)
   Поля формы:
     1. Текстовый input: placeholder «Введите ваше имя» (height 50px)
     2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
@@ -25,9 +28,9 @@ const LLM_FORMS_TEXT = `
 
 ФОРМА 2: «Узнайте стоимость операции» (консультация)
   Позиция: после блока новостей
-  Заголовок H2: «Узнайте стоимость операции»
+  Заголовок H2: «Узнайте стоимость операции» — 36px, bold, #000000, line-height 38px
   Подзаголовок: «Проконсультируйтесь с ассистентом хирурга»
-  Фон секции: #ffffff
+  Фон секции: #d4f6f8 (тот же что и форма 1)
   Поля формы:
     1. Текстовый input: placeholder «каша» / «Введите ваше имя» (height 50px)
     2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
@@ -38,16 +41,28 @@ const LLM_FORMS_TEXT = `
   — Оба поля input/select: bb-input / bb-select (height 50px, border 1px solid #ccc)
   — Чекбокс обязателен в обеих формах
   — Кнопка отправки: всегда bb-btn-primary (#FFA39C)
-  — Форма 1 на бирюзовом фоне (#b8e6ed), форма 2 на белом
+  — Обе формы на бирюзовом фоне (#d4f6f8)
 
 ПРАВИЛА:
 ✓ Чекбокс согласия обязателен в каждой форме
 ✓ Кнопки отправки: bb-btn-primary (#FFA39C)
-✓ Форма 1 на фоне #b8e6ed
+✓ Обе формы на фоне #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() {
   return (
     <div className="p-8 max-w-5xl mx-auto space-y-10">
@@ -62,104 +77,18 @@ export default function ContactFormsPage() {
         <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>
 
-      {/* Форма 1: Будьте здоровы */}
+      {/* Живой пример */}
-      <section className="space-y-3">
-        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
-          Форма 1 — «Будьте здоровы!»
-        </h2>
-        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
-          Фон секции: #b8e6ed. Запись на приём к врачу.
-        </p>
-        <div
-          className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
-          style={{ background: "#b8e6ed" }}
-        >
-          <div className="text-center">
-            <h2 className="text-2xl font-bold mb-1" style={{ color: "#111827" }}>
-              Будьте здоровы!
-            </h2>
-            <p className="text-sm" style={{ color: "#374151" }}>
-              Запишитесь на приём к врачу!
-            </p>
-          </div>
-          <div className="w-full max-w-sm space-y-3">
-            <input
-              className="bb-input"
-              type="text"
-              placeholder="Введите ваше имя"
-              readOnly
-            />
-            <input
-              className="bb-input"
-              type="tel"
-              placeholder="Введите ваш телефон"
-              readOnly
-            />
-            <select className="bb-select" disabled>
-              <option>Выберите ЛОР врача</option>
-            </select>
-            <label className="flex items-start gap-2 text-xs cursor-pointer" style={{ color: "#374151" }}>
-              <input type="checkbox" className="bb-checkbox mt-0.5" readOnly />
-              <span>
-                Отправляя данные, я даю согласие на обработку персональных данных
-              </span>
-            </label>
-            <button className="bb-btn bb-btn-md bb-btn-primary w-full">
-              Запишите меня!
-            </button>
-          </div>
-        </div>
-      </section>
-
-      {/* Форма 2: Узнайте стоимость */}
       <section className="space-y-3">
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
-          Форма 2 — «Узнайте стоимость операции»
+          Живой пример
         </h2>
-        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+        <ContactFormsBlock />
-          Фон секции: #ffffff. Запрос консультации по стоимости.
-        </p>
-        <div
-          className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
-          style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
-        >
-          <div className="text-center">
-            <h2 className="text-2xl font-bold mb-1" style={{ color: "#111827" }}>
-              Узнайте стоимость операции
-            </h2>
-            <p className="text-sm" style={{ color: "#374151" }}>
-              Проконсультируйтесь с ассистентом хирурга
-            </p>
-          </div>
-          <div className="w-full max-w-sm space-y-3">
-            <input
-              className="bb-input"
-              type="text"
-              placeholder="Введите ваше имя"
-              readOnly
-            />
-            <input
-              className="bb-input"
-              type="tel"
-              placeholder="Введите ваш телефон"
-              readOnly
-            />
-            <label className="flex items-start gap-2 text-xs cursor-pointer" style={{ color: "#374151" }}>
-              <input type="checkbox" className="bb-checkbox mt-0.5" readOnly />
-              <span>
-                Отправляя данные, я даю согласие на обработку персональных данных
-              </span>
-            </label>
-            <button className="bb-btn bb-btn-md bb-btn-primary w-full">
-              Перезвоните мне
-            </button>
-          </div>
-        </div>
       </section>
 
       {/* Сравнение двух форм */}
@@ -180,7 +109,7 @@ export default function ContactFormsPage() {
               {[
                 ["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"],
                 ["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"],
-                ["Фон секции", "#b8e6ed", "#ffffff"],
+                ["Фон секции", "#d4f6f8", "#d4f6f8"],
                 ["Поля", "Имя + Телефон + Select врача + Checkbox", "Имя + Телефон + Checkbox"],
                 ["Кнопка", "«Запишите меня!»", "«Перезвоните мне»"],
                 ["Стиль кнопки", "bb-btn-primary (#FFA39C)", "bb-btn-primary (#FFA39C)"],
@@ -197,7 +126,7 @@ export default function ContactFormsPage() {
       </section>
 
       {/* LLM блок */}
-      <LlmBlock path="/blocks/contact-forms" version="v1.0" specText={LLM_FORMS_TEXT}>
+      <LlmBlock path="/blocks/contact-forms" version="v1.1" specText={LLM_FORMS_TEXT}>
         <LlmSection title="Форма 1 — Запись на приём" />
         <LlmTable
           headers={["Поле", "Тип", "Placeholder"]}
@@ -222,7 +151,7 @@ export default function ContactFormsPage() {
         <LlmSection title="Правила" />
         <LlmRules
           rules={[
-            { ok: true, text: "Форма 1: фон #b8e6ed, форма 2: фон #fff" },
+            { 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)" },

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

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+import { FooterBlock } from "@/components/blocks/FooterBlock";
 
 export const metadata: Metadata = {
   title: "Подвал (Footer). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -82,6 +84,7 @@ export default function ContactFooterPage() {
         <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>
@@ -92,97 +95,7 @@ export default function ContactFooterPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-        <div
+        <FooterBlock />
-          className="rounded-xl overflow-hidden"
-          style={{ border: "1px solid var(--bb-border)" }}
-        >
-          {/* 4 колонки ссылок */}
-          <div
-            className="grid grid-cols-4 gap-6 p-8"
-            style={{ background: "#f8f9fa", borderBottom: "1px solid #e5e7eb" }}
-          >
-            {FOOTER_COLUMNS.map((col) => (
-              <div key={col.title}>
-                <p className="font-semibold text-sm mb-3" style={{ color: "#111827" }}>
-                  {col.title}
-                </p>
-                <ul className="space-y-1.5">
-                  {col.links.map((link) => (
-                    <li key={link}>
-                      <a
-                        href="#"
-                        className="text-xs bb-nav-link"
-                        style={{ color: "#53514e", textDecoration: "none" }}
-                      >
-                        {link}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-
-          {/* Нижняя полоса */}
-          <div
-            className="flex items-start justify-between gap-6 px-8 py-5"
-            style={{ background: "#fff" }}
-          >
-            {/* Логотип */}
-            <div className="flex items-center gap-2 shrink-0">
-              <div
-                className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold"
-                style={{ background: "#0089c3" }}
-              >
-                ✚
-              </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 className="text-center space-y-2">
-              <p className="text-xs" style={{ color: "#374151" }}>
-                Мы находимся по адресу: Пермь, ул. Г. Звезда, 31а
-              </p>
-              <div className="flex items-center justify-center gap-2">
-                {["VK", "OK", "YT", "TG"].map((s) => (
-                  <a
-                    key={s}
-                    href="#"
-                    className="text-[11px] px-2 py-1 rounded"
-                    style={{
-                      background: "var(--bb-sidebar-bg)",
-                      border: "1px solid var(--bb-border)",
-                      color: "var(--bb-text-muted)",
-                    }}
-                  >
-                    {s}
-                  </a>
-                ))}
-              </div>
-            </div>
-
-            {/* Часы работы */}
-            <div className="text-right text-xs space-y-1" style={{ color: "#374151" }}>
-              <p className="font-semibold text-xs mb-1" style={{ color: "#111827" }}>
-                Часы работы:
-              </p>
-              <p>Пн–пт: 9:00–21:00</p>
-              <p>Сб: 9:00–18:00</p>
-              <p>Вс: выходной</p>
-            </div>
-          </div>
-        </div>
       </section>
 
       {/* Колонки */}

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

@@ -1,57 +1,22 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+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 = {
   title: "Блок «Наши врачи». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
 };
 
-const STATS = [
-  { num: "27", label: "ЛОР врачей работает в клинике", prefix: "Ежедневно" },
-  { num: "6", label: "кандидатов медицинских наук", prefix: "В том числе" },
-  { num: "12 000+", label: "успешно проведённых операций", prefix: "Свыше" },
-];
-
-const DOCTORS = [
-  {
-    name: "Макарова Людмила Германовна",
-    spec: "ЛОР врач, сурдолог",
-    photo: "/doctors/makarova.jpg",
-  },
-  {
-    name: "Семерикова Наталия Александровна",
-    spec: "ЛОР врач, сурдолог, хирург. К.М.Н. Завед. Центром сурдологии",
-    photo: "/doctors/semerikova.png",
-  },
-  {
-    name: "Ворончихина Наталия Валерьевна",
-    spec: "Отоневролог, хирург. К.М.Н., доцент кафедры ПГМУ",
-    photo: "/doctors/voronchikhina.png",
-  },
-  {
-    name: "Лобанова Ирина Юрьевна",
-    spec: "ЛОР врач, сурдолог",
-    photo: "/doctors/lobanova.jpg",
-  },
-  {
-    name: "Торсунова Наталья Сергеевна",
-    spec: "Специалист по слухопротезированию (сурдоакустик)",
-    photo: "/doctors/torsunova.jpg",
-  },
-  {
-    name: "Суворова Светлана Викторовна",
-    spec: "ЛОР врач, сурдолог",
-    photo: "/doctors/suvorova.jpg",
-  },
-];
-
 const LLM_DOCTORS_TEXT = `
 БЛОК: Наши врачи
 Источник: perm.oclinica.ru/lor — блок под CEO-текстом
-Версия: v1.0
+Версия: v1.2
 
 СТРУКТУРА БЛОКА:
 1. ЗАГОЛОВОК H2: «Приём ведут опытные ЛОР врачи»
    Подзаголовок: описание принципа работы врачей клиники
+   Размер: 36px, font-bold, #000000, line-height: 38px
 
 2. БЛОК СТАТИСТИКИ (3 показателя в ряд):
    — «Ежедневно 27 ЛОР врачей работают в клинике»
@@ -67,7 +32,7 @@ const LLM_DOCTORS_TEXT = `
    Карточки без рамки, gap минимальный
 
 ЦВЕТА:
-  Заголовок H2: #111827, ~30px (text-3xl)
+  Заголовок H2: #000000, 36px, line-height 38px
   Статистика текст: #60959c (серо-бирюзовый)
   Статистика черта: border-bottom 3px solid #60959c
   Имя врача: #60959c
@@ -75,12 +40,31 @@ const LLM_DOCTORS_TEXT = `
 
 ПРАВИЛА:
 ✓ Заголовок H2 + описание обязательны
-✓ 3 stat-блока в ряд
+✓ 3 stat-блока в ряд, без фоновых блоков
-✓ Сетка 3 колонки, 2 ряда (6 карточек)
+✓ Сетка 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() {
   return (
     <div className="p-8 max-w-5xl mx-auto space-y-10">
@@ -95,6 +79,7 @@ export default function DoctorsBlockPage() {
         <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>
@@ -106,69 +91,14 @@ export default function DoctorsBlockPage() {
           Живой пример
         </h2>
         <div
-          className="rounded-xl p-8 space-y-8"
+          className="rounded-xl p-8"
           style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
         >
-          {/* Заголовок */}
+          <DoctorsBlock />
-          <div>
-            <h2 className="text-3xl font-bold mb-3" style={{ color: "#111827" }}>
-              Приём ведут опытные ЛОР врачи
-            </h2>
-            <p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
-              Фундаментальная теоретическая подготовка и большой практический опыт в сочетании
-              с внимательным индивидуальным подходом являются причиной успеха лечения тысяч наших пациентов
-            </p>
-          </div>
-
-          {/* Статистика — текст тёмно-бирюзовым, без фоновых блоков */}
-          <div className="grid grid-cols-3 gap-6">
-            {STATS.map((s) => (
-              <div key={s.num} className="pb-3" style={{ borderBottom: "3px solid #60959c" }}>
-                <p className="text-lg font-bold leading-snug" style={{ color: "#60959c" }}>
-                  {s.prefix} {s.num} {s.label}
-                </p>
-              </div>
-            ))}
-          </div>
-
-          {/* Сетка врачей — плотнее, имена тёмно-бирюзовым */}
-          <div className="grid grid-cols-6 gap-3">
-            {DOCTORS.map((doc) => (
-              <div key={doc.name} className="flex flex-col items-center text-center gap-1.5">
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src={doc.photo}
-                  alt={doc.name}
-                  style={{
-                    width: 110,
-                    height: 150,
-                    objectFit: "cover",
-                    objectPosition: "center top",
-                    borderRadius: 4,
-                    display: "block",
-                  }}
-                />
-                <div>
-                  <p
-                    className="text-xs font-medium leading-snug"
-                    style={{ color: "#60959c" }}
-                  >
-                    {doc.name}
-                  </p>
-                  <p
-                    className="text-[11px] mt-0.5 leading-snug"
-                    style={{ color: "#374151" }}
-                  >
-                    {doc.spec}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
         </div>
       </section>
 
-      {/* Стат-блоки */}
+      {/* Стат-блоки — разбор */}
       <section className="space-y-3">
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Блок статистики
@@ -192,12 +122,12 @@ export default function DoctorsBlockPage() {
       </section>
 
       {/* LLM блок */}
-      <LlmBlock path="/blocks/doctors" version="v1.1" specText={LLM_DOCTORS_TEXT}>
+      <LlmBlock path="/blocks/doctors" version="v1.2" specText={LLM_DOCTORS_TEXT}>
         <LlmSection title="Структура блока" />
         <LlmTable
           headers={["Элемент", "Содержимое", "Стиль"]}
           rows={[
-            ["H2", "«Приём ведут опытные ЛОР врачи»", "~30px (text-3xl), font-bold, #111827"],
+            ["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"],
@@ -217,17 +147,17 @@ export default function DoctorsBlockPage() {
         <LlmTable
           headers={["Поле", "Размер / Стиль"]}
           rows={[
-            ["Фото", "88×120px (в блоке) или 110×160px (на странице врачей), object-fit: cover"],
+            ["Фото", "110×150px, object-fit: cover, object-position: center top, border-radius 4px"],
-            ["Имя", "12–14px, font-weight 500, #111827"],
+            ["Имя", "12px, font-weight 500, #60959c"],
-            ["Специализация", "11–12px, #6b7280"],
+            ["Специализация", "11px, #374151"],
           ]}
         />
         <LlmSection title="Правила" />
         <LlmRules
           rules={[
             { ok: true, text: "H2 + описание обязательны" },
-            { ok: true, text: "3 stat-блока в ряд, фон #dff0fa" },
+            { ok: true, text: "3 stat-блока в ряд, без фоновых рамок" },
-            { ok: true, text: "Сетка 6 карточек (3 колонки)" },
+            { ok: true, text: "Сетка 6 карточек в 1 ряд (6 колонок)" },
             { ok: false, text: "Не показывать более 6 врачей в основном блоке" },
             { ok: false, text: "Не убирать статистику" },
           ]}

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

@@ -1,5 +1,8 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+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 = {
   title: "Hero-баннер. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -8,36 +11,36 @@ export const metadata: Metadata = {
 const LLM_HERO_TEXT = `
 БЛОК: Hero-баннер (главный баннер страницы)
 Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
-Версия: v1.1
+Версия: v1.2
 
 ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
-«ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых»
+«ЛОР Клиника ухо, горло, нос - медицинский центр лечения ЛОР заболеваний у детей и взрослых»
-Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m)
+Шрифт: Fira Sans, 36px, weight 700, цвет: #cb9768
 
 СТРУКТУРА БАННЕРА (двухколоночная, единый фон #f9f4e7):
 Левая колонка (~50%):
   — Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
-    Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827
+    Шрифт: Fira Sans, 22px, weight 700, uppercase, цвет #333333
-  — 3 пункта с галочками (✓ зелёный):
+  — 3 пункта с галочками (✓ бежевый #bf9975):
     1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
     2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров»
     3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
     Ключевое слово: uppercase bold; описание: обычный текст, ~13px
-  — Кнопка «Узнать стоимость операции» — стиль: bb-btn-outline (светлая, без заливки)
+  — Кнопка «Узнать стоимость операции» — стиль: bb-btn-pill (кремовый фон #E9E4D4, radius 25px)
 Правая колонка (~50%):
   — Фото врача с пациентом
   — Изображение занимает всю высоту блока
 
 ПОД БАННЕРОМ:
-  — Кнопки соцсетей (Facebook, VK, Twitter/X), цвет #6b7280
+  — Кнопки соцсетей (VK, FB, TW), цвет #9ca3af
   — Счётчик просмотров
 
 ЦВЕТА:
   Фон баннера: #f9f4e7 (светло-кремовый, единый для всего блока)
-  Кнопка CTA: outline-стиль (светлая), не коралловая
+  Кнопка CTA: pill-стиль (кремовый #E9E4D4, border #D5CFBD, radius 25px)
-  Заголовок блока: #111827
+  Заголовок блока: #333333
   Пункты: ключевое слово #111827 bold, описание #374151
-  Галочка: цвет бренда (бежевый/золотой ~#bf9975)
+  Галочка: #bf9975 (бежевый)
 
 ПРАВИЛА:
 ✓ Фон баннера всегда #f9f4e7 (светло-кремовый) — единый, без разделения на зоны
@@ -48,18 +51,24 @@ const LLM_HERO_TEXT = `
 ✕ Не убирать три пункта с галочками
 `.trim();
 
-const HERO_CHECKS = [
+const CHANGELOG: ChangelogEntry[] = [
   {
-    key: "БЕЗОПАСНО",
+    version: "v1.2",
-    desc: "оперируют хирурги с 15-летним опытом работы",
+    date: "24.03.2026",
+    changes: [
+      "H1: цвет исправлен с #53514e на #cb9768, размер с ~20px на 36px",
+      "Заголовок баннера: размер с ~16px на 22px, цвет с #111827 на #333333",
+      "CTA-кнопка: стиль изменён с outline на pill (фон #E9E4D4, radius 25px)",
+      "Дефис в H1: длинное тире «–» заменено на простой дефис «-» (как на сайте)",
+    ],
   },
   {
-    key: "БЕЗ ВНЕШНИХ РАЗРЕЗОВ",
+    version: "v1.1",
-    desc: "хирургия смяткими размерами",
+    date: "23.03.2026",
-  },
+    changes: [
-  {
+      "Единый фон #f9f4e7 (ранее был разбит на две зоны)",
-    key: "БЫСТРО",
+      "Реальное фото врача с пациентом",
-    desc: "под наблюдением врача пациент находится 1 сутки",
+    ],
   },
 ];
 
@@ -77,8 +86,10 @@ export default function HeroPage() {
         <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>.
+          Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон{" "}
+          <strong>#f9f4e7</strong>.
         </p>
       </div>
 
@@ -87,99 +98,7 @@ export default function HeroPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-
+        <HeroBlock />
-        {/* 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>
       </section>
 
       {/* Анатомия */}
@@ -210,7 +129,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 +141,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,18 +156,18 @@ export default function HeroPage() {
           ))}
         </div>
         <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
-          Ключевое слово: uppercase + bold. Описание: обычный текст. Галочка: #22c55e.
+          Ключевое слово: uppercase + bold. Описание: обычный текст. Галочка: #bf9975 (бежевый).
         </p>
       </section>
 
       {/* LLM блок */}
-      <LlmBlock path="/blocks/hero" version="v1.1" specText={LLM_HERO_TEXT}>
+      <LlmBlock path="/blocks/hero" version="v1.2" specText={LLM_HERO_TEXT}>
         <LlmSection title="Структура баннера" />
         <LlmTable
           headers={["Зона", "Ширина", "Фон", "Содержимое"]}
           rows={[
             ["Весь баннер", "100%", "#f9f4e7", "Единый светло-кремовый фон"],
-            ["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка outline"],
+            ["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка pill"],
             ["Правый блок", "~50%", "#f9f4e7 (общий)", "Фото врача с пациентом"],
             ["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
           ]}
@@ -263,16 +182,17 @@ export default function HeroPage() {
           headers={["Элемент", "Цвет", "Токен"]}
           rows={[
             ["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"],
-            ["Кнопка CTA", "outline-стиль", "bb-btn-outline"],
+            ["Кнопка CTA", "pill-стиль (#E9E4D4, 25px)", "bb-btn-pill"],
-            ["Заголовок блока", "#111827", "—"],
+            ["Заголовок блока", "#333333", "—"],
-            ["Галочка ✓", "#bf9975", "Бежевый (--brand-081m approx.)"],
+            ["H1 страницы", "#cb9768", "36px, bold"],
+            ["Галочка ✓", "#bf9975", "Бежевый"],
           ]}
         />
         <LlmSection title="Правила" />
         <LlmRules
           rules={[
             { ok: true, text: "Фон баннера: #f9f4e7 (светло-кремовый) — единый для всего блока" },
-            { ok: true, text: "Кнопка CTA: bb-btn-outline (светлая)" },
+            { ok: true, text: "Кнопка CTA: bb-btn-pill (кремовый #E9E4D4, radius 25px)" },
             { ok: true, text: "Заголовок: uppercase, bold" },
             { ok: true, text: "Три пункта с галочками ✓ (#bf9975)" },
             { ok: false, text: "Не менять фон баннера на другой цвет" },

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

@@ -1,21 +1,12 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { NavigationBlock, NAV_ITEMS } from "@/components/blocks/NavigationBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
 
 export const metadata: Metadata = {
   title: "Шапка и навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
 };
 
-const NAV_ITEMS = [
-  "Клиника",
-  "ЛОР врачи",
-  "Заболевания",
-  "Вопрос-ответ",
-  "ЛОР-операции",
-  "Сурдология",
-  "Цены",
-  "Контакты",
-];
-
 const LLM_NAV_TEXT = `
 БЛОК: Шапка и навигация сайта (Header)
 Источник: perm.oclinica.ru/lor — реальная шапка сайта
@@ -62,11 +53,12 @@ export default function NavigationPage() {
           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>
@@ -77,73 +69,8 @@ export default function NavigationPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-        <div
+        <div className="rounded-xl overflow-hidden">
-          className="rounded-xl overflow-hidden"
+          <NavigationBlock />
-          style={{ border: "1px solid var(--bb-border)", boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}
-        >
-          {/* Топ-бар */}
-          <div
-            className="flex items-center justify-between px-6 py-2 text-xs border-b"
-            style={{ background: "#fff", borderColor: "#e5e7eb", color: "#6b7280" }}
-          >
-            <div className="flex items-center gap-4">
-              <span>📍 Б. Цитная, 3</span>
-              <a href="#" style={{ color: "#0089c3" }}>
-                Клиника ухо горло нос и аллергия
-              </a>
-              <a href="#" style={{ color: "#0089c3" }}>
-                Центр аллергологии и пульмонологии
-              </a>
-            </div>
-            <div className="flex items-center gap-4">
-              <span className="font-bold text-sm" style={{ color: "#111827" }}>
-                /342/ 255-53-84
-              </span>
-              <button className="bb-btn bb-btn-sm 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>
-
-          {/* Навигация */}
-          <nav className="flex border-t bg-white" style={{ borderColor: "#e5e7eb" }}>
-            {NAV_ITEMS.map((item, i) => (
-              <a
-                key={item}
-                href="#"
-                className="px-4 py-3 text-sm bb-nav-link whitespace-nowrap"
-                style={{
-                  color: i === 0 ? "#0089c3" : "#53514e",
-                  borderRight: "1px solid #f3f4f6",
-                  fontWeight: i === 0 ? 500 : 400,
-                  textDecoration: "none",
-                }}
-              >
-                {item}
-              </a>
-            ))}
-          </nav>
         </div>
       </section>
 
@@ -262,7 +189,7 @@ export default function NavigationPage() {
       </section>
 
       {/* LLM блок */}
-      <LlmBlock path="/components/navigation" version="v1.0" specText={LLM_NAV_TEXT}>
+      <LlmBlock path="/blocks/navigation" version="v1.0" specText={LLM_NAV_TEXT}>
         <LlmSection title="Зоны шапки" />
         <LlmTable
           headers={["Зона", "Высота", "Фон", "Содержимое"]}

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

@@ -1,5 +1,8 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
+import { NewsBlock } from "@/components/blocks/NewsBlock";
 
 export const metadata: Metadata = {
   title: "Блок «Новости». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -31,7 +34,7 @@ const MOCK_NEWS = [
 const LLM_NEWS_TEXT = `
 БЛОК: Новости
 Источник: perm.oclinica.ru/lor — блок новостей внизу страницы
-Версия: v1.0
+Версия: v1.1
 
 СТРУКТУРА БЛОКА:
 1. ЗАГОЛОВОК H2: «Новости»
@@ -65,6 +68,17 @@ const LLM_NEWS_TEXT = `
 ✕ Не добавлять описание/анонс в карточку
 `.trim();
 
+const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "v1.1",
+    date: "24.03.2026",
+    changes: [
+      "H2: размер на 36px, цвет на #000000, line-height 38px",
+      "Фон секции: с белого на #f2fee6 (светло-зелёный, как на реальном сайте)",
+    ],
+  },
+];
+
 export default function NewsBlockPage() {
   return (
     <div className="p-8 max-w-5xl mx-auto space-y-10">
@@ -79,6 +93,7 @@ export default function NewsBlockPage() {
         <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 карточки в ряд (дата + заголовок-ссылка),
           кнопка «Все новости».
@@ -90,42 +105,7 @@ export default function NewsBlockPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-        <div
+        <NewsBlock />
-          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>
 
       {/* Анатомия карточки */}
@@ -165,7 +145,7 @@ export default function NewsBlockPage() {
       </section>
 
       {/* LLM блок */}
-      <LlmBlock path="/blocks/news" version="v1.0" specText={LLM_NEWS_TEXT}>
+      <LlmBlock path="/blocks/news" version="v1.1" specText={LLM_NEWS_TEXT}>
         <LlmSection title="Структура карточки новости" />
         <LlmTable
           headers={["Поле", "Стиль", "Значение"]}

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

@@ -1,5 +1,8 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
+import { ReviewsBlock } from "@/components/blocks/ReviewsBlock";
 
 export const metadata: Metadata = {
   title: "Блок «Отзывы». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -21,7 +24,7 @@ const MOCK_REVIEWS = [
 const LLM_REVIEWS_TEXT = `
 БЛОК: Отзывы о нас
 Источник: perm.oclinica.ru/lor — блок отзывов
-Версия: v1.0
+Версия: v1.1
 
 СТРУКТУРА БЛОКА:
 1. ЗАГОЛОВОК H2: «Отзывы о нас»
@@ -50,6 +53,16 @@ const LLM_REVIEWS_TEXT = `
 ✕ Не убирать навигационные стрелки
 `.trim();
 
+const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "v1.1",
+    date: "24.03.2026",
+    changes: [
+      "H2: размер с ~20px на 36px, цвет с #111827 на #000000, line-height 38px",
+    ],
+  },
+];
+
 export default function ReviewsBlockPage() {
   return (
     <div className="p-8 max-w-5xl mx-auto space-y-10">
@@ -64,6 +77,7 @@ export default function ReviewsBlockPage() {
         <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>
@@ -74,76 +88,7 @@ export default function ReviewsBlockPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-        <div
+        <ReviewsBlock />
-          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>
 
       {/* Несколько примеров */}
@@ -224,12 +169,12 @@ export default function ReviewsBlockPage() {
       </section>
 
       {/* LLM блок */}
-      <LlmBlock path="/blocks/reviews" version="v1.0" specText={LLM_REVIEWS_TEXT}>
+      <LlmBlock path="/blocks/reviews" version="v1.1" specText={LLM_REVIEWS_TEXT}>
         <LlmSection title="Структура блока" />
         <LlmTable
           headers={["Элемент", "Содержимое", "Стиль"]}
           rows={[
-            ["H2", "«Отзывы о нас»", "text-xl, font-bold, #111827"],
+            ["H2", "«Отзывы о нас»", "36px, font-bold, #000000, line-height 38px"],
             ["Подзаголовок", "Описание достижений клиники за 12 лет", "14px, #374151"],
             ["Кавычка", "Декоративная «", "80–100px, #b8e6ed, font-serif"],
             ["Текст отзыва", "Полный текст отзыва пациента", "14px, italic, #374151"],

apps/web/app/components/buttons/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Button } from "@/components/ui/Button";
 import { CodeCopy } from "@/components/ui/CodeCopy";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
 
 export const metadata: Metadata = {
   title: "Кнопки. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -227,6 +228,7 @@ a.callback_url {
         <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
           Кнопки
         </h1>
+        <BlockMetaBar path="/components/buttons" defaultVersion="v2.0" defaultIsInPreview={false} />
         <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
           Кнопки скопированы с реального сайта{" "}
           <span className="font-mono text-sm" style={{ color: "var(--bb-text)" }}>

apps/web/app/components/cards/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { CodeCopy } from "@/components/ui/CodeCopy";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
 
 export const metadata: Metadata = {
   title: "Карточки. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -417,6 +418,7 @@ export default function CardsPage() {
         <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
           Карточки
         </h1>
+        <BlockMetaBar path="/components/cards" defaultVersion="v1.0" defaultIsInPreview={false} />
         <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
           Карточки врача, новости, отзыва, цены и услуги — основные блоки контента сайта.
           Бейджи, теги и алерты — вспомогательные элементы.

apps/web/app/components/forms/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Toggle } from "@/components/ui/Toggle";
 import { CodeCopy } from "@/components/ui/CodeCopy";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
 
 export const metadata: Metadata = {
   title: "Форм-контролы. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -264,6 +265,7 @@ input[type=email] {
         <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
           Форм-контролы
         </h1>
+        <BlockMetaBar path="/components/forms" defaultVersion="v2.0" defaultIsInPreview={false} />
         <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
           Элементы ввода данных: текстовые поля, выпадающие списки, флажки, переключатели.
           Применяются в формах записи, фильтрах и настройках.

apps/web/app/foundation/typography/page.tsx

@@ -421,9 +421,9 @@ export default function TypographyPage() {
             </thead>
             <tbody>
               {[
-                ["H1 страницы (над Hero)", "Fira Sans", "~28–30px", "700", "#bf9975", "ЛОР Клиника ухо, горло, нос…"],
+                ["H1 страницы (над Hero)", "Fira Sans", "36px", "700", "#cb9768", "ЛОР Клиника ухо, горло, нос…"],
-                ["H2 секции", "Fira Sans", "~30px", "700", "#111827", "Приём ведут опытные ЛОР врачи"],
+                ["H2 секции", "Fira Sans", "36px", "700", "#000000", "Приём ведут опытные ЛОР врачи"],
-                ["Заголовок Hero-баннера", "Fira Sans", "~18px", "700", "#111827", "ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ…"],
+                ["Заголовок Hero-баннера", "Fira Sans", "22px", "700", "#333333", "ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ…"],
                 ["Статистика (цифра+текст)", "Fira Sans", "~18px", "700", "#60959c", "Ежедневно 27 ЛОР врачей…"],
                 ["Подзаголовок секции", "Fira Sans", "~14px", "400", "#374151", "Фундаментальная теоретическая…"],
                 ["Пункт checklist (ключ)", "Fira Sans", "13px", "700", "#111827", "БЕЗОПАСНО"],

apps/web/app/pages/preview/PreviewClient.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { NavigationBlock } from "@/components/blocks/NavigationBlock";
+import { HeroBlock } from "@/components/blocks/HeroBlock";
+import { DoctorsBlock } from "@/components/blocks/DoctorsBlock";
+import { CeoBlock } from "@/components/blocks/CeoBlock";
+import { ReviewsBlock } from "@/components/blocks/ReviewsBlock";
+import { NewsBlock } from "@/components/blocks/NewsBlock";
+import { ContactFormsBlock } from "@/components/blocks/ContactFormsBlock";
+import { FooterBlock } from "@/components/blocks/FooterBlock";
+
+const STORAGE_KEY = "bb-preview-created";
+const LS_PREFIX = "bb-block-preview:";
+
+function BlockPlaceholder({ name, href }: { name: string; href: string }) {
+  return (
+    <div
+      className="w-full py-14 flex flex-col items-center justify-center rounded-xl gap-2"
+      style={{
+        border: "2px dashed #d1d5db",
+        background: "#f9fafb",
+      }}
+    >
+      <p className="text-sm font-medium" style={{ color: "#6b7280" }}>
+        {name}
+      </p>
+      <a
+        href={href}
+        className="text-xs underline"
+        style={{ color: "var(--brand-053m)" }}
+      >
+        Открыть в брендбуке →
+      </a>
+    </div>
+  );
+}
+
+interface BlockDef {
+  id: string;
+  name: string;
+  href: string;
+  path: string;
+  defaultReady: boolean;
+  component?: React.ReactNode;
+}
+
+const BLOCKS: BlockDef[] = [
+  {
+    id: "navigation",
+    name: "Шапка / Навигация",
+    href: "/blocks/navigation",
+    path: "/blocks/navigation",
+    defaultReady: true,
+    component: <NavigationBlock />,
+  },
+  {
+    id: "hero",
+    name: "Hero-баннер",
+    href: "/blocks/hero",
+    path: "/blocks/hero",
+    defaultReady: true,
+    component: <HeroBlock />,
+  },
+  {
+    id: "ceo",
+    name: "Вводный текст (CEO-блок)",
+    href: "/blocks/ceo",
+    path: "/blocks/ceo",
+    defaultReady: false,
+    component: <CeoBlock />,
+  },
+  {
+    id: "doctors",
+    name: "Наши врачи",
+    href: "/blocks/doctors",
+    path: "/blocks/doctors",
+    defaultReady: true,
+    component: <DoctorsBlock />,
+  },
+  {
+    id: "reviews",
+    name: "Отзывы",
+    href: "/blocks/reviews",
+    path: "/blocks/reviews",
+    defaultReady: false,
+    component: <ReviewsBlock />,
+  },
+  {
+    id: "contact-forms",
+    name: "Формы записи",
+    href: "/blocks/contact-forms",
+    path: "/blocks/contact-forms",
+    defaultReady: false,
+    component: <ContactFormsBlock />,
+  },
+  {
+    id: "news",
+    name: "Новости",
+    href: "/blocks/news",
+    path: "/blocks/news",
+    defaultReady: false,
+    component: <NewsBlock />,
+  },
+  {
+    id: "footer",
+    name: "Подвал / Контакт",
+    href: "/blocks/contact",
+    path: "/blocks/contact",
+    defaultReady: false,
+    component: <FooterBlock />,
+  },
+];
+
+export function PreviewClient() {
+  const [created, setCreated] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  // Map of path → isInPreview from API; null = not loaded yet
+  const [apiMeta, setApiMeta] = useState<Record<string, boolean> | null>(null);
+
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+  // Counter to force re-render when localStorage preview toggles change
+  const [, setRefresh] = useState(0);
+
+  useEffect(() => {
+    setMounted(true);
+    if (localStorage.getItem(STORAGE_KEY) === "true") {
+      setCreated(true);
+    }
+    const handler = () => setRefresh((n) => n + 1);
+    window.addEventListener("bb-preview-change", handler);
+    return () => window.removeEventListener("bb-preview-change", handler);
+  }, []);
+
+  useEffect(() => {
+    if (!apiUrl) return;
+    fetch(`${apiUrl}/blocks`)
+      .then((r) => r.json())
+      .then((data: Array<{ path: string; isInPreview: boolean }>) => {
+        const map: Record<string, boolean> = {};
+        for (const b of data) map[b.path] = b.isInPreview;
+        setApiMeta(map);
+      })
+      .catch(() => {
+        // API offline — fall back to defaultReady
+      });
+  }, [apiUrl]);
+
+  function isReady(block: BlockDef): boolean {
+    // 1. API online → use API data
+    if (apiMeta !== null && block.path in apiMeta) {
+      return apiMeta[block.path] && !!block.component;
+    }
+    // 2. Check localStorage (set by BlockMetaBar toggle)
+    const lsVal = typeof window !== "undefined" ? localStorage.getItem(LS_PREFIX + block.path) : null;
+    if (lsVal !== null) {
+      return lsVal === "true" && !!block.component;
+    }
+    // 3. Fallback to defaultReady
+    return block.defaultReady && !!block.component;
+  }
+
+  function handleCreate() {
+    localStorage.setItem(STORAGE_KEY, "true");
+    setCreated(true);
+  }
+
+  function handleRebuild() {
+    localStorage.removeItem(STORAGE_KEY);
+    setCreated(false);
+  }
+
+  if (!mounted) return null;
+
+  const readyCount = BLOCKS.filter(isReady).length;
+
+  /* ── ПУСТОЕ СОСТОЯНИЕ ── */
+  if (!created) {
+    return (
+      <div
+        className="flex flex-col items-center justify-center min-h-screen"
+        style={{ background: "var(--bb-bg)" }}
+      >
+        <div className="text-center max-w-md space-y-5 p-8">
+          <p
+            className="text-xs font-semibold uppercase tracking-widest"
+            style={{ color: "var(--brand-053m)" }}
+          >
+            Страницы
+          </p>
+          <h1 className="text-2xl font-bold" style={{ color: "var(--bb-text)" }}>
+            Просмотр текущей страницы
+          </h1>
+          <p className="text-sm" style={{ color: "var(--bb-text-muted)", lineHeight: 1.7 }}>
+            Нажмите «Создать», чтобы собрать главную страницу{" "}
+            <span className="font-mono text-xs">perm.oclinica.ru/lor</span> из блоков,
+            задокументированных в брендбуке.
+          </p>
+          <div
+            className="flex items-center justify-center gap-2 text-xs px-4 py-2 rounded-lg"
+            style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+          >
+            <span
+              className="inline-block w-2 h-2 rounded-full"
+              style={{ background: "#22c55e" }}
+            />
+            <span style={{ color: "var(--bb-text-muted)" }}>
+              Готово блоков: {readyCount} из {BLOCKS.length}
+            </span>
+            <span style={{ color: "var(--bb-text-muted)" }}>·</span>
+            <span style={{ color: "var(--bb-text-muted)" }}>
+              {BLOCKS.length - readyCount} плейсхолдеров
+            </span>
+          </div>
+          <div>
+            <button onClick={handleCreate} className="bb-btn bb-btn-md bb-btn-primary">
+              Создать
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  /* ── СОЗДАННОЕ СОСТОЯНИЕ ── */
+  return (
+    <div>
+      {/* Топ-бар */}
+      <div
+        className="sticky top-0 z-10 flex items-center justify-between px-6 py-3 border-b"
+        style={{
+          background: "var(--bb-sidebar-bg)",
+          borderColor: "var(--bb-border)",
+        }}
+      >
+        <div>
+          <p
+            className="text-xs font-semibold uppercase tracking-widest"
+            style={{ color: "var(--brand-053m)" }}
+          >
+            Просмотр текущей страницы
+          </p>
+          <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
+            perm.oclinica.ru/lor · {readyCount}/{BLOCKS.length} блоков готово
+            {apiMeta === null && apiUrl && (
+              <span style={{ color: "#f59e0b" }}> · API загружается...</span>
+            )}
+          </p>
+        </div>
+        <button onClick={handleRebuild} className="bb-btn bb-btn-sm bb-btn-outline">
+          Пересобрать
+        </button>
+      </div>
+
+      {/* Собранная страница */}
+      <div className="max-w-5xl mx-auto px-8 py-8 space-y-12">
+        {BLOCKS.map((block) =>
+          isReady(block) ? (
+            <section key={block.id}>{block.component}</section>
+          ) : (
+            <section key={block.id}>
+              <BlockPlaceholder name={block.name} href={block.href} />
+            </section>
+          )
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/app/pages/preview/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { PreviewClient } from "./PreviewClient";
+
+export const metadata: Metadata = {
+  title:
+    "Просмотр текущей страницы. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+export default function PreviewPage() {
+  return <PreviewClient />;
+}

apps/web/components/blocks/CeoBlock.tsx

@@ -0,0 +1,45 @@
+export const CEO_QUESTIONS = [
+  "У вас болит ухо, заложен нос, першит в горле, и вы не можете понять причину?",
+  "Вам срочно нужен платный ЛОР в Перми или, как ещё говорят, «ухогорлонос»?",
+  "Заболел ребёнок?",
+  "Срочно ищете частные ЛОР-клиники Перми для детей 0+ и взрослых с удобным режимом работы с 9:00 до 21:00 по будням?",
+  "Вам назначили проведение эндоскопической операции на ухе, горле или носе?",
+];
+
+export function CeoBlock() {
+  return (
+    <div
+      style={{
+        background: "#fff",
+        fontFamily: "var(--font-web, 'Fira Sans', sans-serif)",
+        fontSize: 14,
+        lineHeight: 1.75,
+        color: "#374151",
+        padding: "40px 48px",
+      }}
+    >
+      <p>
+        Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей
+        с ЛОР заболеваниями. ЛОР клиника представлена на двух адресах:{" "}
+        <a href="#" style={{ color: "#0089c3" }}>ул. Цитная, 9</a>,{" "}
+        <a href="#" style={{ color: "#0089c3" }}>ул. Г. Звезда, 31а</a>.{" "}
+        Это <a href="#" style={{ color: "#0089c3" }}>Клиника лечения кашля и аллергии</a>.
+      </p>
+
+      <div style={{ marginTop: 16 }}>
+        {CEO_QUESTIONS.map((q) => (
+          <p key={q} style={{ marginBottom: 8 }}>— {q}</p>
+        ))}
+      </div>
+
+      <p style={{ marginTop: 16 }}>
+        Обращайтесь в ЛОР центр ухо, горло, нос в Перми, наши врачи оториноларингологи обязательно Вам помогут!
+      </p>
+      <p style={{ marginTop: 8 }}>
+        Клиника ЛОР болезней ухо, горло, нос – это наиболее современный центр оториноларингологии в Перми,
+        благодаря эндоскопическому оборудованию, высокому профессионализму оториноларингологов.
+      </p>
+      <p style={{ marginTop: 16, fontWeight: 500 }}>Будьте здоровы!</p>
+    </div>
+  );
+}

apps/web/components/blocks/ContactFormsBlock.tsx

@@ -0,0 +1,84 @@
+export function ContactFormsBlock() {
+  return (
+    <div className="space-y-8">
+      {/* Форма 1: Будьте здоровы */}
+      <div
+        className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
+        style={{ background: "#d4f6f8" }}
+      >
+        <div className="text-center">
+          <h2 className="font-bold mb-1" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
+            Будьте здоровы!
+          </h2>
+          <p className="text-sm" style={{ color: "#374151" }}>
+            Запишитесь на приём к врачу!
+          </p>
+        </div>
+        <div className="w-full max-w-sm space-y-3">
+          <input
+            className="bb-input"
+            type="text"
+            placeholder="Введите ваше имя"
+            readOnly
+          />
+          <input
+            className="bb-input"
+            type="tel"
+            placeholder="Введите ваш телефон"
+            readOnly
+          />
+          <select className="bb-select" disabled>
+            <option>Выберите ЛОР врача</option>
+          </select>
+          <label className="flex items-start gap-2 text-xs cursor-pointer" style={{ color: "#374151" }}>
+            <input type="checkbox" className="bb-checkbox mt-0.5" readOnly />
+            <span>
+              Отправляя данные, я даю согласие на обработку персональных данных
+            </span>
+          </label>
+          <button className="bb-btn bb-btn-md bb-btn-primary w-full">
+            Запишите меня!
+          </button>
+        </div>
+      </div>
+
+      {/* Форма 2: Узнайте стоимость */}
+      <div
+        className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
+        style={{ background: "#d4f6f8" }}
+      >
+        <div className="text-center">
+          <h2 className="font-bold mb-1" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
+            Узнайте стоимость операции
+          </h2>
+          <p className="text-sm" style={{ color: "#374151" }}>
+            Проконсультируйтесь с ассистентом хирурга
+          </p>
+        </div>
+        <div className="w-full max-w-sm space-y-3">
+          <input
+            className="bb-input"
+            type="text"
+            placeholder="Введите ваше имя"
+            readOnly
+          />
+          <input
+            className="bb-input"
+            type="tel"
+            placeholder="Введите ваш телефон"
+            readOnly
+          />
+          <label className="flex items-start gap-2 text-xs cursor-pointer" style={{ color: "#374151" }}>
+            <input type="checkbox" className="bb-checkbox mt-0.5" readOnly />
+            <span>
+              Отправляя данные, я даю согласие на обработку персональных данных
+            </span>
+          </label>
+          <button className="bb-btn bb-btn-md bb-btn-primary w-full">
+            Перезвоните мне
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/blocks/DoctorsBlock.tsx

@@ -0,0 +1,95 @@
+export const STATS = [
+  { num: "27", label: "ЛОР врачей работает в клинике", prefix: "Ежедневно" },
+  { num: "6", label: "кандидатов медицинских наук", prefix: "В том числе" },
+  { num: "12 000+", label: "успешно проведённых операций", prefix: "Свыше" },
+];
+
+export const DOCTORS = [
+  {
+    name: "Макарова Людмила Германовна",
+    spec: "ЛОР врач, сурдолог",
+    photo: "/doctors/makarova.jpg",
+  },
+  {
+    name: "Семерикова Наталия Александровна",
+    spec: "ЛОР врач, сурдолог, хирург. К.М.Н. Завед. Центром сурдологии",
+    photo: "/doctors/semerikova.png",
+  },
+  {
+    name: "Ворончихина Наталия Валерьевна",
+    spec: "Отоневролог, хирург. К.М.Н., доцент кафедры ПГМУ",
+    photo: "/doctors/voronchikhina.png",
+  },
+  {
+    name: "Лобанова Ирина Юрьевна",
+    spec: "ЛОР врач, сурдолог",
+    photo: "/doctors/lobanova.jpg",
+  },
+  {
+    name: "Торсунова Наталья Сергеевна",
+    spec: "Специалист по слухопротезированию (сурдоакустик)",
+    photo: "/doctors/torsunova.jpg",
+  },
+  {
+    name: "Суворова Светлана Викторовна",
+    spec: "ЛОР врач, сурдолог",
+    photo: "/doctors/suvorova.jpg",
+  },
+];
+
+export function DoctorsBlock() {
+  return (
+    <div className="space-y-8">
+      {/* Заголовок + описание */}
+      <div>
+        <h2 className="font-bold mb-3" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
+          Приём ведут опытные ЛОР врачи
+        </h2>
+        <p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
+          Фундаментальная теоретическая подготовка и большой практический опыт в сочетании
+          с внимательным индивидуальным подходом являются причиной успеха лечения тысяч наших пациентов
+        </p>
+      </div>
+
+      {/* Статистика — без фона, border-bottom #60959c */}
+      <div className="grid grid-cols-3 gap-6">
+        {STATS.map((s) => (
+          <div key={s.num} className="pb-3" style={{ borderBottom: "3px solid #60959c" }}>
+            <p className="text-lg font-bold leading-snug" style={{ color: "#60959c" }}>
+              {s.prefix} {s.num} {s.label}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      {/* Сетка врачей — 6 колонок */}
+      <div className="grid grid-cols-6 gap-3">
+        {DOCTORS.map((doc) => (
+          <div key={doc.name} className="flex flex-col items-center text-center gap-1.5">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={doc.photo}
+              alt={doc.name}
+              style={{
+                width: 110,
+                height: 150,
+                objectFit: "cover",
+                objectPosition: "center top",
+                borderRadius: 4,
+                display: "block",
+              }}
+            />
+            <div>
+              <p className="text-xs font-medium leading-snug" style={{ color: "#60959c" }}>
+                {doc.name}
+              </p>
+              <p className="text-[11px] mt-0.5 leading-snug" style={{ color: "#374151" }}>
+                {doc.spec}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/components/blocks/FooterBlock.tsx

@@ -0,0 +1,119 @@
+const FOOTER_COLUMNS = [
+  {
+    title: "О клинике",
+    links: ["Лицензия", "Миссия", "Врачи", "Вакансии", "История", "Образовательная деятельность", "При инфо"],
+  },
+  {
+    title: "Заболевания",
+    links: ["Ринит", "Отит", "Гайморит", "Тонзиллит", "Полипы носа", "Искривление перегородки"],
+  },
+  {
+    title: "Вопрос-ответ",
+    links: [
+      "Что нужно знать до операции на ухо",
+      "Что нужно знать до операции на нос",
+      "Отзывы до и после лечения у детей",
+      "Что нужно знать при лечении у детей",
+    ],
+  },
+  {
+    title: "Операции",
+    links: ["Септопластика", "Турбинопластика", "Тонзиллэктомия", "Аденотомия", "Тимпанопластика", "Мирингопластика"],
+  },
+];
+
+export function FooterBlock() {
+  return (
+    <div
+      className="rounded-xl overflow-hidden"
+      style={{ border: "1px solid var(--bb-border)" }}
+    >
+      {/* 4 колонки ссылок */}
+      <div
+        className="grid grid-cols-4 gap-6 p-8"
+        style={{ background: "#f8f9fa", borderBottom: "1px solid #e5e7eb" }}
+      >
+        {FOOTER_COLUMNS.map((col) => (
+          <div key={col.title}>
+            <p className="font-semibold text-sm mb-3" style={{ color: "#111827" }}>
+              {col.title}
+            </p>
+            <ul className="space-y-1.5">
+              {col.links.map((link) => (
+                <li key={link}>
+                  <a
+                    href="#"
+                    className="text-xs bb-nav-link"
+                    style={{ color: "#53514e", textDecoration: "none" }}
+                  >
+                    {link}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+
+      {/* Нижняя полоса */}
+      <div
+        className="flex items-start justify-between gap-6 px-8 py-5"
+        style={{ background: "#fff" }}
+      >
+        {/* Логотип */}
+        <div className="flex items-center gap-2 shrink-0">
+          <div
+            className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold"
+            style={{ background: "#0089c3" }}
+          >
+            ✚
+          </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 className="text-center space-y-2">
+          <p className="text-xs" style={{ color: "#374151" }}>
+            Мы находимся по адресу: Пермь, ул. Г. Звезда, 31а
+          </p>
+          <div className="flex items-center justify-center gap-2">
+            {["VK", "OK", "YT", "TG"].map((s) => (
+              <a
+                key={s}
+                href="#"
+                className="text-[11px] px-2 py-1 rounded"
+                style={{
+                  background: "var(--bb-sidebar-bg)",
+                  border: "1px solid var(--bb-border)",
+                  color: "var(--bb-text-muted)",
+                }}
+              >
+                {s}
+              </a>
+            ))}
+          </div>
+        </div>
+
+        {/* Часы работы */}
+        <div className="text-right text-xs space-y-1" style={{ color: "#374151" }}>
+          <p className="font-semibold text-xs mb-1" style={{ color: "#111827" }}>
+            Часы работы:
+          </p>
+          <p>Пн–пт: 9:00–21:00</p>
+          <p>Сб: 9:00–18:00</p>
+          <p>Вс: выходной</p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/blocks/HeroBlock.tsx

@@ -0,0 +1,101 @@
+export const HERO_CHECKS = [
+  { key: "БЕЗОПАСНО", desc: "оперируют хирурги с 15-летним опытом работы" },
+  { key: "БЕЗ ВНЕШНИХ РАЗРЕЗОВ", desc: "хирургия сверхмалых размеров" },
+  { key: "БЫСТРО", desc: "под наблюдением врача пациент находится 1 сутки" },
+];
+
+export function HeroBlock() {
+  return (
+    <div className="space-y-3">
+      {/* H1 страницы */}
+      <h2
+        className="font-bold"
+        style={{ color: "#cb9768", fontSize: 36, lineHeight: "51px" }}
+      >
+        ЛОР Клиника ухо, горло, нос - медицинский центр лечения ЛОР заболеваний у детей и взрослых
+      </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="font-bold uppercase leading-snug"
+            style={{ color: "#333333", fontSize: 22 }}
+          >
+            Эндоскопическое хирургическое лечение ЛОР органов
+          </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-pill">
+              Узнать стоимость операции
+            </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>
+  );
+}

apps/web/components/blocks/NavigationBlock.tsx

@@ -0,0 +1,83 @@
+export const NAV_ITEMS = [
+  "Клиника",
+  "ЛОР врачи",
+  "Заболевания",
+  "Вопрос-ответ",
+  "ЛОР-операции",
+  "Сурдология",
+  "Цены",
+  "Контакты",
+];
+
+export function NavigationBlock() {
+  return (
+    <div
+      className="overflow-hidden"
+      style={{ border: "1px solid #e5e7eb", boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}
+    >
+      {/* Топ-бар */}
+      <div
+        className="flex items-center justify-between px-6 py-2 text-xs border-b"
+        style={{ background: "#fff", borderColor: "#e5e7eb", color: "#6b7280" }}
+      >
+        <div className="flex items-center gap-4">
+          <span>📍 Б. Цитная, 3</span>
+          <a href="#" style={{ color: "#0089c3" }}>
+            Клиника ухо горло нос и аллергия
+          </a>
+          <a href="#" style={{ color: "#0089c3" }}>
+            Центр аллергологии и пульмонологии
+          </a>
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="font-bold text-sm" style={{ color: "#111827" }}>
+            /342/ 255-53-84
+          </span>
+          <button className="bb-btn bb-btn-sm 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>
+
+      {/* Главное меню */}
+      <nav className="flex border-t bg-white" style={{ borderColor: "#e5e7eb" }}>
+        {NAV_ITEMS.map((item, i) => (
+          <a
+            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>
+    </div>
+  );
+}

apps/web/components/blocks/NewsBlock.tsx

@@ -0,0 +1,63 @@
+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: "#",
+  },
+];
+
+export function NewsBlock() {
+  return (
+    <div
+      className="rounded-xl p-8 space-y-6"
+      style={{ background: "#f2fee6" }}
+    >
+      <h2 className="font-bold" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
+        Новости
+      </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>
+  );
+}

apps/web/components/blocks/ReviewsBlock.tsx

@@ -0,0 +1,86 @@
+const MOCK_REVIEWS = [
+  {
+    text: "Спасибо за приём, мне всё понравилось, спасибо за приём, мне всё понравилось. Врач очень внимательный и профессиональный.",
+    author: "Пациент клиники",
+    doctor: "Тимофеева Наталья Александровна",
+  },
+  {
+    text: "Очень довольна лечением! Прошла курс процедур, нос дышит отлично. Рекомендую клинику всем.",
+    author: "Наталья К.",
+    doctor: "Макарова Людмила Тимофеевна",
+  },
+];
+
+export function ReviewsBlock() {
+  return (
+    <div
+      className="rounded-xl p-8 space-y-6"
+      style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
+    >
+      {/* Заголовок */}
+      <div>
+        <h2 className="font-bold mb-2" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
+          Отзывы о нас
+        </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"
+          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>
+  );
+}

apps/web/components/layout/Sidebar.tsx

@@ -30,12 +30,12 @@ const NAV: NavSection[] = [
       { label: "Кнопки", href: "/components/buttons" },
       { label: "Форм-контролы", href: "/components/forms" },
       { label: "Карточки", href: "/components/cards" },
-      { label: "Шапка / Навигация", href: "/components/navigation" },
     ],
   },
   {
     title: "Блоки",
     items: [
+      { label: "Шапка / Навигация", href: "/blocks/navigation" },
       { label: "Hero-баннер", href: "/blocks/hero" },
       { label: "Вводный текст", href: "/blocks/ceo" },
       { label: "Наши врачи", href: "/blocks/doctors" },
@@ -48,6 +48,7 @@ const NAV: NavSection[] = [
   {
     title: "Страницы",
     items: [
+      { label: "Просмотр страницы", href: "/pages/preview" },
       { label: "Главная", href: "/pages/home", soon: true },
       { label: "Заболевание", href: "/pages/disease", soon: true },
       { label: "Все врачи", href: "/pages/doctors", soon: true },
@@ -166,7 +167,7 @@ export function Sidebar() {
           color: "var(--bb-sidebar-text-muted)",
         }}
       >
-        Sprint 5 · v0.5.1
+        Sprint 5.5 · v0.5.5
       </div>
     </aside>
   );

apps/web/components/ui/BlockChangelog.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+export interface ChangelogEntry {
+  version: string;
+  date: string;
+  changes: string[];
+}
+
+interface BlockChangelogProps {
+  changelog: ChangelogEntry[];
+}
+
+export function BlockChangelog({ changelog }: BlockChangelogProps) {
+  if (!changelog || changelog.length === 0) return null;
+
+  return (
+    <section className="space-y-3">
+      <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+        История версий
+      </h2>
+      <div className="space-y-2 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+        {changelog.map((entry) => (
+          <div
+            key={entry.version}
+            className="p-3 rounded-lg"
+            style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+          >
+            <p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>
+              {entry.version} — {entry.date}
+            </p>
+            <ul className="list-disc list-inside space-y-0.5 text-xs">
+              {entry.changes.map((change, i) => (
+                <li key={i}>{change}</li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

apps/web/components/ui/BlockMetaBar.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { BlockChangelog, type ChangelogEntry } from "./BlockChangelog";
+
+const LS_PREFIX = "bb-block-preview:";
+
+function readLocalPreview(path: string, fallback: boolean): boolean {
+  if (typeof window === "undefined") return fallback;
+  const v = localStorage.getItem(LS_PREFIX + path);
+  if (v === null) return fallback;
+  return v === "true";
+}
+
+function writeLocalPreview(path: string, value: boolean) {
+  localStorage.setItem(LS_PREFIX + path, String(value));
+  window.dispatchEvent(new Event("bb-preview-change"));
+}
+
+interface BlockMeta {
+  path: string;
+  name: string;
+  version: string;
+  isInPreview: boolean;
+  changelog: ChangelogEntry[];
+}
+
+interface BlockMetaBarProps {
+  path: string;
+  defaultVersion: string;
+  defaultIsInPreview: boolean;
+  defaultChangelog?: ChangelogEntry[];
+}
+
+export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview, defaultChangelog = [] }: BlockMetaBarProps) {
+  const [meta, setMeta] = useState<BlockMeta | null>(null);
+  const [editing, setEditing] = useState(false);
+  const [versionInput, setVersionInput] = useState(defaultVersion);
+  const [saving, setSaving] = useState(false);
+  const [togglingPreview, setTogglingPreview] = useState(false);
+  const [apiDown, setApiDown] = useState(false);
+  const [localPreview, setLocalPreview] = useState(defaultIsInPreview);
+
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+  useEffect(() => {
+    setLocalPreview(readLocalPreview(path, defaultIsInPreview));
+  }, [path, defaultIsInPreview]);
+
+  useEffect(() => {
+    if (!apiUrl) { setApiDown(true); return; }
+    fetch(`${apiUrl}/blocks/by-path?path=${encodeURIComponent(path)}`)
+      .then((r) => r.json())
+      .then((data: BlockMeta) => {
+        setMeta(data);
+        setVersionInput(data.version);
+      })
+      .catch(() => setApiDown(true));
+  }, [apiUrl, path]);
+
+  async function patch(data: { version?: string; isInPreview?: boolean; changelog?: ChangelogEntry[] }) {
+    if (!apiUrl) return null;
+    const r = await fetch(`${apiUrl}/blocks/by-path?path=${encodeURIComponent(path)}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    return r.json() as Promise<BlockMeta>;
+  }
+
+  async function saveVersion() {
+    if (!meta) return;
+    setSaving(true);
+    try {
+      const updated = await patch({ version: versionInput });
+      if (updated) { setMeta(updated); setEditing(false); }
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function togglePreview() {
+    if (apiDown) {
+      const newVal = !localPreview;
+      setLocalPreview(newVal);
+      writeLocalPreview(path, newVal);
+      return;
+    }
+    if (!meta) return;
+    setTogglingPreview(true);
+    try {
+      const updated = await patch({ isInPreview: !meta.isInPreview });
+      if (updated) setMeta(updated);
+    } finally {
+      setTogglingPreview(false);
+    }
+  }
+
+  const version = meta?.version ?? defaultVersion;
+  const isInPreview = apiDown ? localPreview : (meta?.isInPreview ?? localPreview);
+  const changelog: ChangelogEntry[] = (meta?.changelog && meta.changelog.length > 0) ? meta.changelog : defaultChangelog;
+
+  return (
+    <>
+      <div
+        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)" }}
+      >
+        {/* Version badge */}
+        <span className="font-semibold" style={{ color: "var(--bb-text-muted)" }}>
+          Версия:
+        </span>
+        {editing ? (
+          <span className="flex items-center gap-1.5">
+            <input
+              className="px-2 py-0.5 rounded border text-xs font-mono w-20"
+              style={{ borderColor: "var(--bb-border)", color: "var(--bb-text)" }}
+              value={versionInput}
+              onChange={(e) => setVersionInput(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') saveVersion(); if (e.key === 'Escape') setEditing(false); }}
+              autoFocus
+            />
+            <button
+              onClick={saveVersion}
+              disabled={saving}
+              className="px-2 py-0.5 rounded text-xs font-medium"
+              style={{ background: "var(--brand-053m)", color: "#fff" }}
+            >
+              {saving ? '...' : 'Сохранить'}
+            </button>
+            <button
+              onClick={() => { setEditing(false); setVersionInput(version); }}
+              className="px-2 py-0.5 rounded text-xs"
+              style={{ color: "var(--bb-text-muted)" }}
+            >
+              Отмена
+            </button>
+          </span>
+        ) : (
+          <button
+            onClick={() => !apiDown && setEditing(true)}
+            title={apiDown ? 'Версия из кода (API недоступен)' : 'Изменить версию'}
+            className="font-mono px-2 py-0.5 rounded"
+            style={{
+              background: "var(--bb-sidebar-active-bg, #dff0fa)",
+              color: "var(--brand-053m)",
+              cursor: apiDown ? 'default' : 'pointer',
+            }}
+          >
+            {version}
+          </button>
+        )}
+
+        <span style={{ color: "var(--bb-border)" }}>·</span>
+
+        {/* Preview toggle */}
+        <button
+          onClick={togglePreview}
+          disabled={togglingPreview || (!apiDown && !meta)}
+          title={isInPreview ? "Убрать из превью страницы" : "Включить в превью страницы"}
+          className="flex items-center gap-1.5 px-2.5 py-1 rounded font-medium transition-colors cursor-pointer"
+          style={isInPreview ? {
+            background: "#dcfce7",
+            color: "#16a34a",
+            border: "1px solid #86efac",
+          } : {
+            background: "var(--bb-sidebar-bg)",
+            color: "var(--bb-text-muted)",
+            border: "1px solid var(--bb-border)",
+          }}
+        >
+          <span
+            className="inline-block w-1.5 h-1.5 rounded-full"
+            style={{ background: isInPreview ? "#22c55e" : "#d1d5db" }}
+          />
+          {togglingPreview
+            ? '...'
+            : isInPreview
+              ? "В превью"
+              : "Не в превью"}
+        </button>
+
+        {/* Subtle offline dot instead of "API офлайн" text */}
+        {apiDown && (
+          <span
+            className="inline-block w-1.5 h-1.5 rounded-full"
+            title="API недоступен — данные из кода"
+            style={{ background: "#d1d5db" }}
+          />
+        )}
+      </div>
+
+      {/* Changelog rendered from API or fallback */}
+      {changelog.length > 0 && <BlockChangelog changelog={changelog} />}
+    </>
+  );
+}

docker-compose.yml

@@ -8,7 +8,7 @@ services:
       POSTGRES_PASSWORD: brandbook
       POSTGRES_DB: brandbook
     ports:
-      - "5433:5432"
+      - "5434:5432"
     volumes:
       - postgres_data:/var/lib/postgresql/data
 

docs/LLM_CONTEXT.md

@@ -2,9 +2,9 @@
 
 ## Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
 
-**Версия контекста:** 4.2
+**Версия контекста:** 4.3
-**Дата обновления:** 2026-03-23
+**Дата обновления:** 2026-03-24
-**Актуальный спринт:** Sprint 5
+**Актуальный спринт:** Sprint 5.5
 **Сайт клиники:** https://oclinica.ru
 **Брендбук (локально):** http://localhost:3001
 **Брендбук (production):** https://web-oclinica.vercel.app
@@ -67,8 +67,9 @@
 | Коралловый            | `#ffa39c` | rgb(255,163,156)  | Акценты  | 2         | CTA-кнопки («Запишите меня!») |
 | Основной текст        | `#464646` | rgb(70,70,70)     | Текст    | 3         | Цвет основного текста на сайте |
 | Второстепенный текст  | `#949290` | rgb(148,146,144)  | Текст    | 4         | Подписи, второстепенный контент |
+| H1 страницы           | `#cb9768` | rgb(203,151,104)  | Текст    | 1         | Цвет H1 на страницах разделов |
 | Светло-кремовый Hero  | `#f9f4e7` | rgb(249,244,231)  | Фоны     | 1         | Фон Hero-баннера страниц разделов |
-| Светло-бирюзовый фон  | `#b8e6ed` | rgb(184,230,237)  | Фоны     | 1         | Фон формы записи («Будьте здоровы!») |
+| Светло-бирюзовый фон  | `#d4f6f8` | rgb(212,246,248)  | Фоны     | 2         | Фон обеих форм записи (ранее #b8e6ed) |
 | Кремовый фон          | `#e9e4d4` | rgb(233,228,212)  | Фоны     | 1         | Тёплые фоны кнопок-пилюль, вторичные секции |
 | Светло-жёлтый фон     | `#eef4d1` | rgb(238,244,209)  | Фоны     | 1         | Фон карточек отзывов |
 | Светло-зелёный фон    | `#f2fee6` | rgb(242,254,230)  | Фоны     | 1         | Фон секции новостей |
@@ -290,8 +291,8 @@ SVG-версия ожидается (не получена от клиники).
 | `/components/forms` | ✅ Готова | Форм-контролы — Input/Textarea/Select/Checkbox/Radio/Toggle |
 | `/components/cards` | ✅ Sprint 4 | Карточки — врач, услуга, новость, отзыв, цена + бейджи/теги/алерты |
 | `/components/*` | 🔜 Sprint 4–5 | Модалки, таблицы, навигация |
-| `/blocks/hero` | ✅ Sprint 5 v1.1 | Hero-баннер: фон #f9f4e7, реальное фото врача, галочки #bf9975, кнопка outline |
+| `/blocks/hero` | ✅ Sprint 5.5 v1.2 | Hero-баннер: H1 36px #cb9768, заголовок 22px #333, кнопка pill, фон #f9f4e7 |
-| `/blocks/doctors` | ✅ Sprint 5 v1.1 | Врачи: H2 30px, статистика #60959c без фона, 6 реальных фото |
+| `/blocks/doctors` | ✅ Sprint 5.5 v1.2 | Врачи: H2 36px #000, статистика #60959c без фона, 6 реальных фото |
 | `/blocks/*` | 🔜 Sprint 5 | Отзывы, формы, новости, footer |
 | `/pages/*` | 🔜 Sprint 9–11 | Главная, заболевание, врачи, цены, контакты |
 
@@ -440,6 +441,8 @@ CSS-классы в `globals.css`. Компонент: `@/components/ui/Button`
 | 3.0 | 2026-03-22 | Sprint 3: кнопки (Button), форм-контролы (Input/Textarea/Select/Checkbox/Radio/Toggle), LLM-блок на логотипе |
 | 4.0 | 2026-03-22 | Sprint 4 start: исправлены цвета Oracal (точные RGB из каталога), кнопки/формы по реальному сайту |
 | 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.3 | 2026-03-24 | Sprint 5.5: исправлены CSS-стили блоков по реальному сайту (H1 #cb9768 36px, H2 #000 36px, фоны форм #d4f6f8, фон новостей #f2fee6, CTA-кнопка pill) |
 
 ---
 

docs/SPRINTS.md

@@ -185,7 +185,7 @@
 
 ### Блоки с реального сайта (сверху вниз, по скриншоту /lor)
 
-**Шапка и навигация** → `/components/navigation`
+**Шапка и навигация** → `/blocks/navigation`
 - [ ] FE: Топ-бар: адрес «Б. Цитная, 3», телефон /342/ 255-53-84, кнопка «Заказать звонок» (pill)
 - [ ] FE: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н. ОЛЕНЕВОЙ»
 - [ ] FE: Главное меню: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты
@@ -194,6 +194,7 @@
 - [x] FE: Баннер — единый фон #f9f4e7 (светло-кремовый, замерян пикселем), галочки #bf9975
 - [x] FE: Правая часть: реальное фото врача с пациентом (спарсено с сайта → public/hero-doctor.jpg)
 - [x] LLM: v1.1 — исправлен цвет фона, кнопка outline, галочки бежевые
+- [x] FE: v1.2 — H1: 36px/#cb9768, заголовок баннера: 22px/#333, CTA: pill-стиль, дефис в H1
 
 **Вводный текст (CEO-блок)** → `/blocks/ceo`
 - [ ] FE: Текст специализации клиники, Q&A вопросы-стимулы
@@ -203,16 +204,20 @@
 - [x] FE: Реальные фото 6 врачей (спарсены с сайта → public/doctors/)
 - [x] FE: Реальные имена и специализации врачей из слайдера /lor
 - [x] LLM: v1.1
+- [x] FE: v1.2 — H2: 36px/#000000, line-height 38px
 
 **Блок отзывов** → `/blocks/reviews`
-- [ ] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки
+- [x] FE: Карусель: кавычка, текст отзыва, «Читать полностью», стрелки
+- [x] FE: v1.1 — H2: 36px/#000000, line-height 38px
 
 **Формы записи** → `/blocks/contact-forms`
-- [ ] FE: Форма «Будьте здоровы!» (фон #b8e6ed, поля: имя/телефон/врач, кнопка «Запишите меня!»)
+- [x] FE: Форма «Будьте здоровы!» (фон #d4f6f8, поля: имя/телефон/врач, кнопка «Запишите меня!»)
-- [ ] FE: Форма «Узнайте стоимость операции» (белый фон, поля: имя/телефон, кнопка «Перезвоните мне»)
+- [x] FE: Форма «Узнайте стоимость операции» (фон #d4f6f8, поля: имя/телефон, кнопка «Перезвоните мне»)
+- [x] FE: v1.1 — H2: 36px/#000000, фон обеих форм: #d4f6f8 (ранее #b8e6ed и #fff)
 
 **Блок новостей** → `/blocks/news`
-- [ ] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock)
+- [x] FE: 4 карточки новостей в ряд (дата + заголовок), кнопка «Все новости» (mock)
+- [x] FE: v1.1 — H2: 36px/#000000, фон секции: #f2fee6 (ранее белый)
 
 **Footer (подвал)** → `/blocks/contact`
 - [ ] FE: 4 колонки ссылок, логотип, адрес, соцсети, часы работы
@@ -222,10 +227,94 @@
 - [x] Docs: Типографика сайта — реальные стили на 23.03.2026 (новый раздел в /foundation/typography)
 - [x] Docs: Цвета — исправлен #f9f4e7 (Hero), #b8e6ed (форма), #e9e4d4 (пилюли)
 - [ ] FE: Убрать `soon` у Hero и Doctors в Sidebar
-- [ ] FE: CEO-блок, отзывы, формы, новости, footer
+- [ ] FE: CEO-блок
-- [ ] Docs: Финальное обновление `docs/LLM_CONTEXT.md` по итогам Sprint 5
+- [x] FE: Блоки отзывов, форм записи, новостей — компоненты + страницы документации
+- [x] Docs: Обновление `docs/LLM_CONTEXT.md` v4.3
+- [x] FE: Исправлены CSS-стили ВСЕХ блоков по реальному сайту (24.03.2026):
+  - H1 страницы: 36px, #cb9768 (ранее ~20px, #53514e)
+  - H2 секций: 36px, #000000 (ранее ~20-30px, #111827)
+  - Hero заголовок: 22px, #333 (ранее 16px, #111827)
+  - CTA-кнопка Hero: pill (ранее outline)
+  - Фон форм: #d4f6f8 (ранее #b8e6ed и #fff)
+  - Фон новостей: #f2fee6 (ранее #fff)
+  - Типографика сайта: обновлена таблица стилей
+- [x] FE: Добавлена «История версий» с changelog на каждую страницу блока
+- [x] BE: Метаданные блоков (version, isInPreview, changelog) перенесены в PostgreSQL
+  - Prisma schema: добавлено поле `changelog Json @default("[]")`
+  - Seed обновлён: 8 блоков с актуальными версиями и историей изменений
+  - API: PATCH /blocks/by-path принимает changelog
+  - CORS: открыт для любого localhost порта
+  - BlockMetaBar: загружает version + changelog из API, fallback на defaultVersion/defaultChangelog
+  - Компонент BlockChangelog: отображает историю версий из API или из кода
+  - Надпись «API офлайн» заменена на серую точку
+- [ ] FE: Footer
+
+**Результат спринта:** Hero v1.2, Doctors v1.2, Reviews v1.1, ContactForms v1.1, News v1.1 — стили синхронизированы с реальным сайтом. Метаданные блоков хранятся в БД.
 
-**Результат спринта (в работе):** Hero + Doctors задокументированы с реальными фото и точными цветами.
+---
+
+## Sprint 5.5 — «Просмотр текущей страницы» (внеочередной)
+
+**Цель:** Добавить интерактивный раздел брендбука, который собирает главную страницу из уже задокументированных блоков.
+Показывает живой превью того, как выглядит сайт на основе данных брендбука.
+
+### Концепция UX
+
+**Маршрут:** `/pages/preview`
+**Сайдбар:** добавить в раздел «Страницы» с пометкой (если ещё нет блоков — показывает заглушку с кнопкой)
+
+**Два состояния страницы:**
+
+1. **Пустое состояние** (первый вход, или если превью не создавалось):
+   - Заголовок «Просмотр текущей страницы»
+   - Описание: «Здесь будет собрана главная страница из задокументированных блоков»
+   - Активная кнопка «Создать» (`.bb-btn bb-btn-primary`)
+   - После нажатия → переход в «созданное» состояние
+
+2. **Созданное состояние** (после нажатия «Создать»):
+   - Превью главной страницы из всех доступных блоков в порядке сверху вниз, как на perm.oclinica.ru/lor
+   - Кнопка «Пересобрать» в шапке (сбрасывает до исходного состояния)
+   - Сборка только из блоков, у которых есть готовый компонент (не mock-заглушки)
+   - Блоки рендерятся как реальные React-компоненты внутри `<section>`
+
+**Порядок блоков в превью** (по perm.oclinica.ru/lor, только готовые):
+1. Hero-баннер (`/blocks/hero` → компонент HeroBlock)
+2. Блок врачей (`/blocks/doctors` → компонент DoctorsBlock)
+3. Блок отзывов (`/blocks/reviews` → когда будет готов)
+4. Форма записи (`/blocks/contact-forms` → когда будет готова)
+5. Блок новостей (`/blocks/news` → когда будет готов)
+6. Footer (`/blocks/contact` → когда будет готов)
+
+**Техническая реализация (FE only, без бэкенда):**
+- Состояние сохраняется в `localStorage` (`preview-created: true/false`)
+- Каждый задокументированный блок выносится в переиспользуемый React-компонент
+- Страница `/pages/preview` импортирует компоненты и рендерит их в нужном порядке
+- Блоки, которых ещё нет → показывается placeholder с текстом «Блок в разработке»
+
+### Задачи
+
+- [x] FE: Страница `/pages/preview` — пустое состояние с кнопкой «Создать»
+- [x] FE: Логика `localStorage` — сохранение/сброс состояния превью
+- [x] FE: Рефактор `/blocks/hero/page.tsx` — вынести баннер в компонент `HeroBlock` (переиспользуемый)
+- [x] FE: Рефактор `/blocks/doctors/page.tsx` — вынести в компонент `DoctorsBlock`
+- [x] FE: Placeholder-компонент для блоков, которые ещё не готовы (серая рамка с названием блока)
+- [x] FE: Сборка превью: рендер всех доступных компонентов в порядке реального сайта
+- [x] FE: Sidebar — добавить «Просмотр страницы» в раздел «Страницы»
+- [x] FE: Кнопка «Пересобрать» в созданном состоянии
+- [x] FE: Toggle «В превью» через localStorage (fallback при API офлайн)
+- [x] BE: BlockMetaBar + PreviewClient подключены к NestJS API `/blocks`
+- [x] BE: Метаданные блоков (version, changelog, isInPreview) в PostgreSQL
+- [ ] Docs: Добавить `/pages/preview` v1.0 в LLM_CONTEXT.md
+
+### Зависимости
+- Зависит от: Sprint 5 (блоки hero и doctors уже готовы — ✅)
+- По мере добавления новых блоков в Sprint 5 — они автоматически подключаются к превью
+
+### Ожидаемый результат
+- Раздел «Просмотр текущей страницы» работает в браузере
+- Кнопка «Создать» собирает главную страницу из задокументированных блоков
+- Отсутствующие блоки отображаются как плейсхолдеры
+- Кнопка «Пересобрать» позволяет сбросить и пересоздать
 
 ---
 
@@ -355,6 +444,7 @@
 | 3      | Кнопки и форм-контролы          | FE            | CSS реального сайта                                    |
 | 4      | Карточки, бейджи, алерты       | FE            | CSS реального сайта                                    |
 | 5      | ВСЕ блоки сайта                 | FE            | Все блоки /lor, mock-данные                            |
+| 5.5    | Просмотр текущей страницы       | FE            | Кнопка «Создать», сборка из блоков, localStorage       |
 | 6      | Все страницы (сборки)           | FE            | Сборки из блоков, mock-данные                          |
 | 7      | Авторизация (viewer / editor)   | BE + FE       | JWT, роли, login-страница, шапка с именем              |
 | 8      | Реальные данные                 | BE + FE       | NestJS прокси → oclinica.ru, кэш 15 мин               |

pnpm-lock.yaml

@@ -19,12 +19,21 @@ importers:
       '@nestjs/platform-express':
         specifier: ^11.0.1
         version: 11.1.17(@nestjs/common@11.1.17(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.17)
+      '@prisma/adapter-pg':
+        specifier: ^7.5.0
+        version: 7.5.0
       '@prisma/client':
         specifier: ^7.5.0
         version: 7.5.0(prisma@7.5.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3))(typescript@5.9.3)
+      '@types/pg':
+        specifier: ^8.20.0
+        version: 8.20.0
       dotenv:
         specifier: ^17.3.1
         version: 17.3.1
+      pg:
+        specifier: ^8.20.0
+        version: 8.20.0
       reflect-metadata:
         specifier: ^0.2.2
         version: 0.2.2
@@ -98,6 +107,9 @@ importers:
       tsconfig-paths:
         specifier: ^4.2.0
         version: 4.2.0
+      tsx:
+        specifier: ^4.21.0
+        version: 4.21.0
       typescript:
         specifier: ^5.7.3
         version: 5.9.3
@@ -390,6 +402,162 @@ packages:
   '@emnapi/wasi-threads@1.2.0':
     resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==}
 
+  '@esbuild/aix-ppc64@0.27.4':
+    resolution: {integrity: sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.4':
+    resolution: {integrity: sha512-gdLscB7v75wRfu7QSm/zg6Rx29VLdy9eTr2t44sfTW7CxwAtQghZ4ZnqHk3/ogz7xao0QAgrkradbBzcqFPasw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.4':
+    resolution: {integrity: sha512-X9bUgvxiC8CHAGKYufLIHGXPJWnr0OCdR0anD2e21vdvgCI8lIfqFbnoeOz7lBjdrAGUhqLZLcQo6MLhTO2DKQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.4':
+    resolution: {integrity: sha512-PzPFnBNVF292sfpfhiyiXCGSn9HZg5BcAz+ivBuSsl6Rk4ga1oEXAamhOXRFyMcjwr2DVtm40G65N3GLeH1Lvw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.4':
+    resolution: {integrity: sha512-b7xaGIwdJlht8ZFCvMkpDN6uiSmnxxK56N2GDTMYPr2/gzvfdQN8rTfBsvVKmIVY/X7EM+/hJKEIbbHs9oA4tQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.4':
+    resolution: {integrity: sha512-sR+OiKLwd15nmCdqpXMnuJ9W2kpy0KigzqScqHI3Hqwr7IXxBp3Yva+yJwoqh7rE8V77tdoheRYataNKL4QrPw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.4':
+    resolution: {integrity: sha512-jnfpKe+p79tCnm4GVav68A7tUFeKQwQyLgESwEAUzyxk/TJr4QdGog9sqWNcUbr/bZt/O/HXouspuQDd9JxFSw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.4':
+    resolution: {integrity: sha512-2kb4ceA/CpfUrIcTUl1wrP/9ad9Atrp5J94Lq69w7UwOMolPIGrfLSvAKJp0RTvkPPyn6CIWrNy13kyLikZRZQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.4':
+    resolution: {integrity: sha512-7nQOttdzVGth1iz57kxg9uCz57dxQLHWxopL6mYuYthohPKEK0vU0C3O21CcBK6KDlkYVcnDXY099HcCDXd9dA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.4':
+    resolution: {integrity: sha512-aBYgcIxX/wd5n2ys0yESGeYMGF+pv6g0DhZr3G1ZG4jMfruU9Tl1i2Z+Wnj9/KjGz1lTLCcorqE2viePZqj4Eg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.4':
+    resolution: {integrity: sha512-oPtixtAIzgvzYcKBQM/qZ3R+9TEUd1aNJQu0HhGyqtx6oS7qTpvjheIWBbes4+qu1bNlo2V4cbkISr8q6gRBFA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.4':
+    resolution: {integrity: sha512-8mL/vh8qeCoRcFH2nM8wm5uJP+ZcVYGGayMavi8GmRJjuI3g1v6Z7Ni0JJKAJW+m0EtUuARb6Lmp4hMjzCBWzA==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.4':
+    resolution: {integrity: sha512-1RdrWFFiiLIW7LQq9Q2NES+HiD4NyT8Itj9AUeCl0IVCA459WnPhREKgwrpaIfTOe+/2rdntisegiPWn/r/aAw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.4':
+    resolution: {integrity: sha512-tLCwNG47l3sd9lpfyx9LAGEGItCUeRCWeAx6x2Jmbav65nAwoPXfewtAdtbtit/pJFLUWOhpv0FpS6GQAmPrHA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.4':
+    resolution: {integrity: sha512-BnASypppbUWyqjd1KIpU4AUBiIhVr6YlHx/cnPgqEkNoVOhHg+YiSVxM1RLfiy4t9cAulbRGTNCKOcqHrEQLIw==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.4':
+    resolution: {integrity: sha512-+eUqgb/Z7vxVLezG8bVB9SfBie89gMueS+I0xYh2tJdw3vqA/0ImZJ2ROeWwVJN59ihBeZ7Tu92dF/5dy5FttA==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.4':
+    resolution: {integrity: sha512-S5qOXrKV8BQEzJPVxAwnryi2+Iq5pB40gTEIT69BQONqR7JH1EPIcQ/Uiv9mCnn05jff9umq/5nqzxlqTOg9NA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.4':
+    resolution: {integrity: sha512-xHT8X4sb0GS8qTqiwzHqpY00C95DPAq7nAwX35Ie/s+LO9830hrMd3oX0ZMKLvy7vsonee73x0lmcdOVXFzd6Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.4':
+    resolution: {integrity: sha512-RugOvOdXfdyi5Tyv40kgQnI0byv66BFgAqjdgtAKqHoZTbTF2QqfQrFwa7cHEORJf6X2ht+l9ABLMP0dnKYsgg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.4':
+    resolution: {integrity: sha512-2MyL3IAaTX+1/qP0O1SwskwcwCoOI4kV2IBX1xYnDDqthmq5ArrW94qSIKCAuRraMgPOmG0RDTA74mzYNQA9ow==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.4':
+    resolution: {integrity: sha512-u8fg/jQ5aQDfsnIV6+KwLOf1CmJnfu1ShpwqdwC0uA7ZPwFws55Ngc12vBdeUdnuWoQYx/SOQLGDcdlfXhYmXQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.4':
+    resolution: {integrity: sha512-JkTZrl6VbyO8lDQO3yv26nNr2RM2yZzNrNHEsj9bm6dOwwu9OYN28CjzZkH57bh4w0I2F7IodpQvUAEd1mbWXg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.4':
+    resolution: {integrity: sha512-/gOzgaewZJfeJTlsWhvUEmUG4tWEY2Spp5M20INYRg2ZKl9QPO3QEEgPeRtLjEWSW8FilRNacPOg8R1uaYkA6g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.4':
+    resolution: {integrity: sha512-Z9SExBg2y32smoDQdf1HRwHRt6vAHLXcxD2uGgO/v2jK7Y718Ix4ndsbNMU/+1Qiem9OiOdaqitioZwxivhXYg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.4':
+    resolution: {integrity: sha512-DAyGLS0Jz5G5iixEbMHi5KdiApqHBWMGzTtMiJ72ZOLhbu/bzxgAe8Ue8CTS3n3HbIUHQz/L51yMdGMeoxXNJw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.4':
+    resolution: {integrity: sha512-+knoa0BDoeXgkNvvV1vvbZX4+hizelrkwmGJBdT17t8FNPwG2lKemmuMZlmaNQ3ws3DKKCxpb4zRZEIp3UxFCg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@eslint-community/eslint-utils@4.9.1':
     resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1015,6 +1183,9 @@ packages:
     resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@prisma/adapter-pg@7.5.0':
+    resolution: {integrity: sha512-EJx7OLULahcC3IjJgdx2qRDNCT+ToY2v66UkeETMCLhNOTgqVzRzYvOEphY7Zp0eHyzfkC33Edd/qqeadf9R4A==}
+
   '@prisma/client-runtime-utils@7.5.0':
     resolution: {integrity: sha512-KnJ2b4Si/pcWEtK68uM+h0h1oh80CZt2suhLTVuLaSKg4n58Q9jBF/A42Kw6Ma+aThy1yAhfDeTC0JvEmeZnFQ==}
 
@@ -1042,6 +1213,9 @@ packages:
   '@prisma/dev@0.20.0':
     resolution: {integrity: sha512-ovlBYwWor0OzG+yH4J3Ot+AneD818BttLA+Ii7wjbcLHUrnC4tbUPVGyNd3c/+71KETPKZfjhkTSpdS15dmXNQ==}
 
+  '@prisma/driver-adapter-utils@7.5.0':
+    resolution: {integrity: sha512-B79N/amgV677mFesFDBAdrW0OIaqawap9E0sjgLBtzIz2R3hIMS1QB8mLZuUEiS4q5Y8Oh3I25Kw4SLxMypk9Q==}
+
   '@prisma/engines-version@7.5.0-15.280c870be64f457428992c43c1f6d557fab6e29e':
     resolution: {integrity: sha512-E+iRV/vbJLl8iGjVr6g/TEWokA+gjkV/doZkaQN1i/ULVdDwGnPJDfLUIFGS3BVwlG/m6L8T4x1x5isl8hGMxA==}
 
@@ -1262,6 +1436,12 @@ packages:
   '@types/node@22.19.15':
     resolution: {integrity: sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==}
 
+  '@types/pg@8.11.11':
+    resolution: {integrity: sha512-kGT1qKM8wJQ5qlawUrEkXgvMSXoV213KfMGXcwfDwUIfUHXqXYXOfS1nE1LINRJVVVx5wCm70XnFlMHaIcQAfw==}
+
+  '@types/pg@8.20.0':
+    resolution: {integrity: sha512-bEPFOaMAHTEP1EzpvHTbmwR8UsFyHSKsRisLIHVMXnpNefSbGA1bD6CVy+qKjGSqmZqNqBDV2azOBo8TgkcVow==}
+
   '@types/qs@6.15.0':
     resolution: {integrity: sha512-JawvT8iBVWpzTrz3EGw9BTQFg3BQNmwERdKE22vlTxawwtbyUSlMppvZYKLZzB5zgACXdXxbD3m1bXaMqP/9ow==}
 
@@ -2141,6 +2321,11 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  esbuild@0.27.4:
+    resolution: {integrity: sha512-Rq4vbHnYkK5fws5NF7MYTU68FPRE1ajX7heQ/8QXXWqNgqqJ/GkmmyxIzUnf2Sr/bakf8l54716CcMGHYhMrrQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -3382,6 +3567,9 @@ packages:
     resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
+  obuf@1.1.2:
+    resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
+
   ohash@2.0.11:
     resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
 
@@ -3479,6 +3667,48 @@ packages:
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
+  pg-cloudflare@1.3.0:
+    resolution: {integrity: sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==}
+
+  pg-connection-string@2.12.0:
+    resolution: {integrity: sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==}
+
+  pg-int8@1.0.1:
+    resolution: {integrity: sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==}
+    engines: {node: '>=4.0.0'}
+
+  pg-numeric@1.0.2:
+    resolution: {integrity: sha512-BM/Thnrw5jm2kKLE5uJkXqqExRUY/toLHda65XgFTBTFYZyopbKjBe29Ii3RbkvlsMoFwD+tHeGaCjjv0gHlyw==}
+    engines: {node: '>=4'}
+
+  pg-pool@3.13.0:
+    resolution: {integrity: sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==}
+    peerDependencies:
+      pg: '>=8.0'
+
+  pg-protocol@1.13.0:
+    resolution: {integrity: sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==}
+
+  pg-types@2.2.0:
+    resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==}
+    engines: {node: '>=4'}
+
+  pg-types@4.1.0:
+    resolution: {integrity: sha512-o2XFanIMy/3+mThw69O8d4n1E5zsLhdO+OPqswezu7Z5ekP4hYDqlDjlmOpYMbzY2Br0ufCwJLdDIXeNVwcWFg==}
+    engines: {node: '>=10'}
+
+  pg@8.20.0:
+    resolution: {integrity: sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==}
+    engines: {node: '>= 16.0.0'}
+    peerDependencies:
+      pg-native: '>=3.0.1'
+    peerDependenciesMeta:
+      pg-native:
+        optional: true
+
+  pgpass@1.0.5:
+    resolution: {integrity: sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -3521,6 +3751,41 @@ packages:
     resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postgres-array@2.0.0:
+    resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
+    engines: {node: '>=4'}
+
+  postgres-array@3.0.4:
+    resolution: {integrity: sha512-nAUSGfSDGOaOAEGwqsRY27GPOea7CNipJPOA7lPbdEpx5Kg3qzdP0AaWC5MlhTWV9s4hFX39nomVZ+C4tnGOJQ==}
+    engines: {node: '>=12'}
+
+  postgres-bytea@1.0.1:
+    resolution: {integrity: sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==}
+    engines: {node: '>=0.10.0'}
+
+  postgres-bytea@3.0.0:
+    resolution: {integrity: sha512-CNd4jim9RFPkObHSjVHlVrxoVQXz7quwNFpz7RY1okNNme49+sVyiTvTRobiLV548Hx/hb1BG+iE7h9493WzFw==}
+    engines: {node: '>= 6'}
+
+  postgres-date@1.0.7:
+    resolution: {integrity: sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==}
+    engines: {node: '>=0.10.0'}
+
+  postgres-date@2.1.0:
+    resolution: {integrity: sha512-K7Juri8gtgXVcDfZttFKVmhglp7epKb1K4pgrkLxehjqkrgPhfG6OO8LHLkfaqkbpjNRnra018XwAr1yQFWGcA==}
+    engines: {node: '>=12'}
+
+  postgres-interval@1.2.0:
+    resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
+    engines: {node: '>=0.10.0'}
+
+  postgres-interval@3.0.0:
+    resolution: {integrity: sha512-BSNDnbyZCXSxgA+1f5UU2GmwhoI0aU5yMxRGO8CdFEcY2BQF9xm/7MqKnYoM1nJDk8nONNWDk9WeSmePFhQdlw==}
+    engines: {node: '>=12'}
+
+  postgres-range@1.1.4:
+    resolution: {integrity: sha512-i/hbxIE9803Alj/6ytL7UHQxRvZkI9O4Sy+J3HGc4F4oo/2eQAjTSNJ0bfxyse3bH0nuVesCk+3IRLaMtG3H6w==}
+
   postgres@3.4.7:
     resolution: {integrity: sha512-Jtc2612XINuBjIl/QTWsV5UvE8UHuNblcO3vVADSrKsrc6RqGX6lOW1cEo3CM2v0XG4Nat8nI+YM7/f26VxXLw==}
     engines: {node: '>=12'}
@@ -3816,6 +4081,10 @@ packages:
     resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
     engines: {node: '>= 12'}
 
+  split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
@@ -4075,6 +4344,11 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tsx@4.21.0:
+    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -4267,6 +4541,10 @@ packages:
     resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -4603,6 +4881,84 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@esbuild/aix-ppc64@0.27.4':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/android-arm@0.27.4':
+    optional: true
+
+  '@esbuild/android-x64@0.27.4':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.4':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.4':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.4':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.4':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.4':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.4':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.4':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.4':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.4':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.4':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.4':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.4':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.4':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.4':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.4':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.4':
+    optional: true
+
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4(jiti@2.6.1))':
     dependencies:
       eslint: 9.39.4(jiti@2.6.1)
@@ -5282,6 +5638,15 @@ snapshots:
 
   '@pkgr/core@0.2.9': {}
 
+  '@prisma/adapter-pg@7.5.0':
+    dependencies:
+      '@prisma/driver-adapter-utils': 7.5.0
+      '@types/pg': 8.11.11
+      pg: 8.20.0
+      postgres-array: 3.0.4
+    transitivePeerDependencies:
+      - pg-native
+
   '@prisma/client-runtime-utils@7.5.0': {}
 
   '@prisma/client@7.5.0(prisma@7.5.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3))(typescript@5.9.3)':
@@ -5326,6 +5691,10 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@prisma/driver-adapter-utils@7.5.0':
+    dependencies:
+      '@prisma/debug': 7.5.0
+
   '@prisma/engines-version@7.5.0-15.280c870be64f457428992c43c1f6d557fab6e29e': {}
 
   '@prisma/engines@7.5.0':
@@ -5554,6 +5923,18 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
+  '@types/pg@8.11.11':
+    dependencies:
+      '@types/node': 22.19.15
+      pg-protocol: 1.13.0
+      pg-types: 4.1.0
+
+  '@types/pg@8.20.0':
+    dependencies:
+      '@types/node': 22.19.15
+      pg-protocol: 1.13.0
+      pg-types: 2.2.0
+
   '@types/qs@6.15.0': {}
 
   '@types/range-parser@1.2.7': {}
@@ -6530,6 +6911,35 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  esbuild@0.27.4:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.4
+      '@esbuild/android-arm': 0.27.4
+      '@esbuild/android-arm64': 0.27.4
+      '@esbuild/android-x64': 0.27.4
+      '@esbuild/darwin-arm64': 0.27.4
+      '@esbuild/darwin-x64': 0.27.4
+      '@esbuild/freebsd-arm64': 0.27.4
+      '@esbuild/freebsd-x64': 0.27.4
+      '@esbuild/linux-arm': 0.27.4
+      '@esbuild/linux-arm64': 0.27.4
+      '@esbuild/linux-ia32': 0.27.4
+      '@esbuild/linux-loong64': 0.27.4
+      '@esbuild/linux-mips64el': 0.27.4
+      '@esbuild/linux-ppc64': 0.27.4
+      '@esbuild/linux-riscv64': 0.27.4
+      '@esbuild/linux-s390x': 0.27.4
+      '@esbuild/linux-x64': 0.27.4
+      '@esbuild/netbsd-arm64': 0.27.4
+      '@esbuild/netbsd-x64': 0.27.4
+      '@esbuild/openbsd-arm64': 0.27.4
+      '@esbuild/openbsd-x64': 0.27.4
+      '@esbuild/openharmony-arm64': 0.27.4
+      '@esbuild/sunos-x64': 0.27.4
+      '@esbuild/win32-arm64': 0.27.4
+      '@esbuild/win32-ia32': 0.27.4
+      '@esbuild/win32-x64': 0.27.4
+
   escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
@@ -8033,6 +8443,8 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  obuf@1.1.2: {}
+
   ohash@2.0.11: {}
 
   on-finished@2.4.1:
@@ -8133,6 +8545,53 @@ snapshots:
 
   perfect-debounce@1.0.0: {}
 
+  pg-cloudflare@1.3.0:
+    optional: true
+
+  pg-connection-string@2.12.0: {}
+
+  pg-int8@1.0.1: {}
+
+  pg-numeric@1.0.2: {}
+
+  pg-pool@3.13.0(pg@8.20.0):
+    dependencies:
+      pg: 8.20.0
+
+  pg-protocol@1.13.0: {}
+
+  pg-types@2.2.0:
+    dependencies:
+      pg-int8: 1.0.1
+      postgres-array: 2.0.0
+      postgres-bytea: 1.0.1
+      postgres-date: 1.0.7
+      postgres-interval: 1.2.0
+
+  pg-types@4.1.0:
+    dependencies:
+      pg-int8: 1.0.1
+      pg-numeric: 1.0.2
+      postgres-array: 3.0.4
+      postgres-bytea: 3.0.0
+      postgres-date: 2.1.0
+      postgres-interval: 3.0.0
+      postgres-range: 1.1.4
+
+  pg@8.20.0:
+    dependencies:
+      pg-connection-string: 2.12.0
+      pg-pool: 3.13.0(pg@8.20.0)
+      pg-protocol: 1.13.0
+      pg-types: 2.2.0
+      pgpass: 1.0.5
+    optionalDependencies:
+      pg-cloudflare: 1.3.0
+
+  pgpass@1.0.5:
+    dependencies:
+      split2: 4.2.0
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -8169,6 +8628,28 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postgres-array@2.0.0: {}
+
+  postgres-array@3.0.4: {}
+
+  postgres-bytea@1.0.1: {}
+
+  postgres-bytea@3.0.0:
+    dependencies:
+      obuf: 1.1.2
+
+  postgres-date@1.0.7: {}
+
+  postgres-date@2.1.0: {}
+
+  postgres-interval@1.2.0:
+    dependencies:
+      xtend: 4.0.2
+
+  postgres-interval@3.0.0: {}
+
+  postgres-range@1.1.4: {}
+
   postgres@3.4.7: {}
 
   prelude-ls@1.2.1: {}
@@ -8532,6 +9013,8 @@ snapshots:
 
   source-map@0.7.6: {}
 
+  split2@4.2.0: {}
+
   sprintf-js@1.0.3: {}
 
   sqlstring@2.3.3: {}
@@ -8809,6 +9292,13 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tsx@4.21.0:
+    dependencies:
+      esbuild: 0.27.4
+      get-tsconfig: 4.13.6
+    optionalDependencies:
+      fsevents: 2.3.3
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -9073,6 +9563,8 @@ snapshots:
       imurmurhash: 0.1.4
       signal-exit: 4.1.0
 
+  xtend@4.0.2: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}

vercel.json

@@ -0,0 +1,5 @@
+{
+  "buildCommand": "pnpm --filter web build",
+  "outputDirectory": "apps/web/.next",
+  "installCommand": "pnpm install"
+}