diff --git a/apps/web/app/blocks/ceo/page.tsx b/apps/web/app/blocks/ceo/page.tsx
new file mode 100644
index 0000000..c71bf22
--- /dev/null
+++ b/apps/web/app/blocks/ceo/page.tsx
@@ -0,0 +1,224 @@
+import type { Metadata } from "next";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+
+export const metadata: Metadata = {
+  title: "Вводный текст (CEO-блок). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+const LLM_CEO_TEXT = `
+БЛОК: Вводный текст клиники (CEO-блок)
+Источник: perm.oclinica.ru/lor — секция после баннера
+Версия: v1.0
+
+НАЗНАЧЕНИЕ:
+Информационный блок под hero-баннером. Рассказывает о специализации клиники
+и вовлекает пациента через вопросы-стимулы.
+
+СТРУКТУРА:
+1. Вводный абзац
+   «Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей
+   с ЛОР заболеваниями. ЛОР клиника представлена на двух адресах: ул. Цитная, 9, ул. Г. Звезда, 31а...»
+
+2. Вопросы-стимулы (формат: «— Вопрос?»)
+   Каждый вопрос — отдельный абзац с тире, связанный с симптомами пациентов:
+   — У вас болит ухо, заложен нос, першит в горле, и вы не можете понять причину?
+   — Вам срочно нужен платный ЛОР в Перми или, как ещё говорят, «ухогорлонос»?
+   — Заболел ребёнок?
+   — Срочно ищете частные ЛОР-клиники Перми для детей 0+ и взрослых...
+   — Вам назначили проведение эндоскопической операции на ухе, горле или носе?
+
+3. Заключительный абзац
+   «Обращайтесь в ЛОР центр ухо, горло, нос в Перми...»
+   «Будьте здоровы!»
+
+ТИПОГРАФИКА:
+  Шрифт: Fira Sans, 14px, line-height 1.6–1.8
+  Цвет текста: #374151 (#bb-text)
+  Вопросы: тот же стиль, начинаются с «—»
+  Ключевые слова в тексте — обычно ссылки синего цвета (#0089c3)
+  Фон блока: #ffffff, отступы 40–60px сверху и снизу
+
+ПРАВИЛА:
+✓ Вопросы начинаются с «—» (тире)
+✓ Ключевые медицинские термины — ссылки #0089c3
+✓ Текст без H2 заголовка — просто связный параграф
+✕ Не добавлять маркированные списки (только тире)
+✕ Не менять стиль вопросов на другой формат
+`.trim();
+
+const CEO_QUESTIONS = [
+  "У вас болит ухо, заложен нос, першит в горле, и вы не можете понять причину?",
+  "Вам срочно нужен платный ЛОР в Перми или, как ещё говорят, «ухогорлонос»?",
+  "Заболел ребёнок?",
+  "Срочно ищете частные ЛОР-клиники Перми для детей 0+ и взрослых с удобным режимом работы с 9:00 до 21:00 по будням?",
+  "Вам назначили проведение эндоскопической операции на ухе, горле или носе?",
+];
+
+export default function CeoPage() {
+  return (
+    <div className="p-8 max-w-5xl mx-auto space-y-10">
+      {/* Заголовок страницы */}
+      <div>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-1"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Блоки
+        </p>
+        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
+          Вводный текст (CEO-блок)
+        </h1>
+        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+          Блок после hero-баннера на perm.oclinica.ru/lor. Описание специализации клиники
+          + вопросы-стимулы для пациентов.
+        </p>
+      </div>
+
+      {/* Живой пример */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Живой пример
+        </h2>
+        <div
+          className="rounded-xl p-8"
+          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>
+
+      {/* Анатомия */}
+      <section className="space-y-4">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Структура блока
+        </h2>
+        <div className="space-y-3">
+          {[
+            {
+              num: "1",
+              title: "Вводный абзац",
+              bg: "#f0f9ff",
+              desc: 'Специализация клиники, адреса. Ключевые слова — ссылки синего цвета (#0089c3).',
+            },
+            {
+              num: "2",
+              title: "Вопросы-стимулы",
+              bg: "#fefce8",
+              desc: 'Каждый вопрос — отдельный абзац, начинается с «—». Адресован пациенту с конкретным симптомом.',
+            },
+            {
+              num: "3",
+              title: "Заключительный абзац",
+              bg: "#f0fdf4",
+              desc: 'Призыв обращаться. «Будьте здоровы!» — фирменная подпись клиники.',
+            },
+          ].map((s) => (
+            <div
+              key={s.num}
+              className="flex gap-4 p-4 rounded-xl"
+              style={{ background: s.bg, border: "1px solid var(--bb-border)" }}
+            >
+              <div
+                className="w-7 h-7 rounded-full flex items-center justify-center font-bold text-sm shrink-0"
+                style={{ background: "var(--brand-053m)", color: "#fff" }}
+              >
+                {s.num}
+              </div>
+              <div>
+                <p className="font-semibold text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+                  {s.title}
+                </p>
+                <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+                  {s.desc}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Вопросы-стимулы */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Вопросы-стимулы (5 штук)
+        </h2>
+        <div className="space-y-2">
+          {CEO_QUESTIONS.map((q, i) => (
+            <div
+              key={i}
+              className="flex items-start gap-3 p-3 rounded-lg text-sm"
+              style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+            >
+              <span className="font-bold shrink-0 mt-0.5" style={{ color: "var(--brand-053m)" }}>
+                —
+              </span>
+              <span style={{ color: "var(--bb-text)" }}>{q}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* LLM блок */}
+      <LlmBlock path="/blocks/ceo" version="v1.0" specText={LLM_CEO_TEXT}>
+        <LlmSection title="Структура блока" />
+        <LlmTable
+          headers={["Часть", "Содержимое", "Примечание"]}
+          rows={[
+            ["Вводный абзац", "Специализация клиники, адреса", "Ключевые слова = ссылки #0089c3"],
+            ["Вопросы-стимулы", "5 вопросов от лица пациента, начинаются с «—»", "Без маркированных списков"],
+            ["Заключение", 'Призыв обращаться + «Будьте здоровы!»', "Фирменная подпись клиники"],
+          ]}
+        />
+        <LlmSection title="Типографика" />
+        <LlmTable
+          headers={["Параметр", "Значение"]}
+          rows={[
+            ["Шрифт", "Fira Sans"],
+            ["Размер", "14px"],
+            ["Line-height", "1.6–1.8"],
+            ["Цвет текста", "#374151 (--bb-text)"],
+            ["Цвет ссылок в тексте", "#0089c3 (--brand-053m)"],
+            ["Фон блока", "#ffffff"],
+          ]}
+        />
+        <LlmSection title="Правила" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "Вопросы начинаются с «—» (длинное тире)" },
+            { ok: true, text: "Ключевые медицинские термины — ссылки #0089c3" },
+            { ok: true, text: "Фирменная подпись «Будьте здоровы!» в конце" },
+            { ok: false, text: "Не добавлять маркированные списки (•)" },
+            { ok: false, text: "Не добавлять H2 заголовок внутри блока" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}
diff --git a/apps/web/app/blocks/contact-forms/page.tsx b/apps/web/app/blocks/contact-forms/page.tsx
new file mode 100644
index 0000000..e9f2384
--- /dev/null
+++ b/apps/web/app/blocks/contact-forms/page.tsx
@@ -0,0 +1,236 @@
+import type { Metadata } from "next";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+
+export const metadata: Metadata = {
+  title: "Формы записи. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+const LLM_FORMS_TEXT = `
+БЛОК: Формы записи и обратной связи
+Источник: perm.oclinica.ru/lor — два блока форм на одной странице
+Версия: v1.0
+
+ФОРМА 1: «Будьте здоровы!» (форма записи на приём)
+  Позиция: после блока отзывов
+  Заголовок H2: «Будьте здоровы!»
+  Подзаголовок: «Запишитесь на приём к врачу!»
+  Фон секции: #b8e6ed (светло-бирюзовый)
+  Поля формы:
+    1. Текстовый input: placeholder «Введите ваше имя» (height 50px)
+    2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
+    3. Select: «Выберите ЛОР врача» (height 50px)
+    4. Checkbox: «Отправляя данные, я даю согласие на обработку персональных данных»
+  Кнопка: «Запишите меня!» — стиль bb-btn-primary (#FFA39C)
+  Ширина формы: ~400px центрирована или в колонку
+
+ФОРМА 2: «Узнайте стоимость операции» (консультация)
+  Позиция: после блока новостей
+  Заголовок H2: «Узнайте стоимость операции»
+  Подзаголовок: «Проконсультируйтесь с ассистентом хирурга»
+  Фон секции: #ffffff
+  Поля формы:
+    1. Текстовый input: placeholder «каша» / «Введите ваше имя» (height 50px)
+    2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
+    3. Checkbox: «Отправляя данные, я даю согласие на обработку персональных данных»
+  Кнопка: «Перезвоните мне» — стиль bb-btn-primary (#FFA39C)
+
+ОБЩИЕ ПРАВИЛА:
+  — Оба поля input/select: bb-input / bb-select (height 50px, border 1px solid #ccc)
+  — Чекбокс обязателен в обеих формах
+  — Кнопка отправки: всегда bb-btn-primary (#FFA39C)
+  — Форма 1 на бирюзовом фоне (#b8e6ed), форма 2 на белом
+
+ПРАВИЛА:
+✓ Чекбокс согласия обязателен в каждой форме
+✓ Кнопки отправки: bb-btn-primary (#FFA39C)
+✓ Форма 1 на фоне #b8e6ed
+✕ Не менять порядок полей
+✕ Не убирать чекбокс согласия
+`.trim();
+
+export default function ContactFormsPage() {
+  return (
+    <div className="p-8 max-w-5xl mx-auto space-y-10">
+      {/* Заголовок страницы */}
+      <div>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-1"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Блоки
+        </p>
+        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
+          Формы записи
+        </h1>
+        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+          Два блока форм с perm.oclinica.ru/lor — запись на приём и запрос стоимости операции.
+        </p>
+      </div>
+
+      {/* Форма 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)" }}>
+          Фон секции: #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>
+
+      {/* Сравнение двух форм */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Сравнение двух форм
+        </h2>
+        <div className="overflow-x-auto rounded-xl" style={{ border: "1px solid var(--bb-border)" }}>
+          <table className="w-full text-sm border-collapse">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                <th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Параметр</th>
+                <th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Форма 1 «Будьте здоровы!»</th>
+                <th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Форма 2 «Стоимость операции»</th>
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"],
+                ["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"],
+                ["Фон секции", "#b8e6ed", "#ffffff"],
+                ["Поля", "Имя + Телефон + Select врача + Checkbox", "Имя + Телефон + Checkbox"],
+                ["Кнопка", "«Запишите меня!»", "«Перезвоните мне»"],
+                ["Стиль кнопки", "bb-btn-primary (#FFA39C)", "bb-btn-primary (#FFA39C)"],
+              ].map(([param, f1, f2]) => (
+                <tr key={param} style={{ borderTop: "1px solid var(--bb-border)" }}>
+                  <td className="px-4 py-2 font-medium text-xs" style={{ color: "var(--bb-text)" }}>{param}</td>
+                  <td className="px-4 py-2 text-xs" style={{ color: "var(--bb-text-muted)" }}>{f1}</td>
+                  <td className="px-4 py-2 text-xs" style={{ color: "var(--bb-text-muted)" }}>{f2}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* LLM блок */}
+      <LlmBlock path="/blocks/contact-forms" version="v1.0" specText={LLM_FORMS_TEXT}>
+        <LlmSection title="Форма 1 — Запись на приём" />
+        <LlmTable
+          headers={["Поле", "Тип", "Placeholder"]}
+          rows={[
+            ["Имя", "input[type=text]", "«Введите ваше имя»"],
+            ["Телефон", "input[type=tel]", "«Введите ваш телефон»"],
+            ["Врач", "select", "«Выберите ЛОР врача»"],
+            ["Согласие", "checkbox", "«Отправляя данные, я даю согласие...»"],
+            ["Кнопка", "button bb-btn-primary", "«Запишите меня!»"],
+          ]}
+        />
+        <LlmSection title="Форма 2 — Запрос стоимости" />
+        <LlmTable
+          headers={["Поле", "Тип", "Placeholder"]}
+          rows={[
+            ["Имя", "input[type=text]", "«Введите ваше имя»"],
+            ["Телефон", "input[type=tel]", "«Введите ваш телефон»"],
+            ["Согласие", "checkbox", "«Отправляя данные, я даю согласие...»"],
+            ["Кнопка", "button bb-btn-primary", "«Перезвоните мне»"],
+          ]}
+        />
+        <LlmSection title="Правила" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "Форма 1: фон #b8e6ed, форма 2: фон #fff" },
+            { ok: true, text: "Чекбокс согласия обязателен в каждой форме" },
+            { ok: true, text: "Кнопки: bb-btn-primary (#FFA39C)" },
+            { ok: true, text: "Все input/select: height 50px (bb-input, bb-select)" },
+            { ok: false, text: "Не убирать чекбокс согласия на обработку данных" },
+            { ok: false, text: "Не менять стиль кнопки на outline или teal" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}
diff --git a/apps/web/app/blocks/contact/page.tsx b/apps/web/app/blocks/contact/page.tsx
new file mode 100644
index 0000000..c982f2f
--- /dev/null
+++ b/apps/web/app/blocks/contact/page.tsx
@@ -0,0 +1,257 @@
+import type { Metadata } from "next";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+
+export const metadata: Metadata = {
+  title: "Подвал (Footer). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+const FOOTER_COLUMNS = [
+  {
+    title: "О клинике",
+    links: ["Лицензия", "Миссия", "Врачи", "Вакансии", "История", "Образовательная деятельность", "При инфо"],
+  },
+  {
+    title: "Заболевания",
+    links: ["Ринит", "Отит", "Гайморит", "Тонзиллит", "Полипы носа", "Искривление перегородки"],
+  },
+  {
+    title: "Вопрос-ответ",
+    links: [
+      "Что нужно знать до операции на ухо",
+      "Что нужно знать до операции на нос",
+      "Отзывы до и после лечения у детей",
+      "Что нужно знать при лечении у детей",
+    ],
+  },
+  {
+    title: "Операции",
+    links: ["Септопластика", "Турбинопластика", "Тонзиллэктомия", "Аденотомия", "Тимпанопластика", "Мирингопластика"],
+  },
+];
+
+const LLM_FOOTER_TEXT = `
+БЛОК: Подвал сайта (Footer)
+Источник: perm.oclinica.ru/lor — нижняя часть страницы
+Версия: v1.0
+
+СТРУКТУРА ПОДВАЛА:
+
+1. ОСНОВНАЯ ЧАСТЬ — 4 колонки ссылок:
+   Колонка 1 «О клинике»: Лицензия, Миссия, Врачи, Вакансии, История, Образовательная деятельность
+   Колонка 2 «Заболевания»: Ринит, Отит, Гайморит, Тонзиллит, Полипы носа, Искривление перегородки
+   Колонка 3 «Вопрос-ответ»: 4 вопроса об операциях и лечении
+   Колонка 4 «Операции»: Септопластика, Турбинопластика, Тонзиллэктомия, Аденотомия и др.
+
+2. НИЖНЯЯ ПОЛОСА:
+   Левая: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»
+   Центр:
+   — «Мы находимся по адресу: Пермь, ул. Г. Звезда...»
+   — Иконки соцсетей: VK, OK, YouTube, Telegram и другие
+   Правая: Часы работы:
+   — Пн-пт: 9:00–21:00
+   — Сб: 9:00–18:00
+   — Вс: выходной
+   — Вторая клиника часы отдельно
+
+ЦВЕТА:
+  Фон подвала: #fff или светло-серый (#f8f9fa)
+  Заголовки колонок: #111827, font-weight 600
+  Ссылки: #53514e (--brand-073m), hover: #0089c3
+  Разделитель: border-top 1px solid #e5e7eb
+  Часы работы: #374151
+
+ПРАВИЛА:
+✓ 4 колонки ссылок в основной части
+✓ Логотип в нижней полосе слева
+✓ Адрес + соцсети в центре нижней полосы
+✓ Часы работы справа
+✕ Не менять структуру 4 колонок
+`.trim();
+
+export default function ContactFooterPage() {
+  return (
+    <div className="p-8 max-w-5xl mx-auto space-y-10">
+      {/* Заголовок страницы */}
+      <div>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-1"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Блоки
+        </p>
+        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
+          Подвал (Footer)
+        </h1>
+        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+          Подвал сайта с perm.oclinica.ru — 4 колонки ссылок, логотип, адрес, часы работы, соцсети.
+        </p>
+      </div>
+
+      {/* Живой пример */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Живой пример
+        </h2>
+        <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>
+      </section>
+
+      {/* Колонки */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Четыре колонки ссылок
+        </h2>
+        <div className="grid grid-cols-4 gap-3">
+          {FOOTER_COLUMNS.map((col) => (
+            <div
+              key={col.title}
+              className="rounded-xl p-3 space-y-1"
+              style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+            >
+              <p className="font-semibold text-xs" style={{ color: "var(--bb-text)" }}>
+                {col.title}
+              </p>
+              <p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
+                {col.links.length} ссылок
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* LLM блок */}
+      <LlmBlock path="/blocks/contact" version="v1.0" specText={LLM_FOOTER_TEXT}>
+        <LlmSection title="Структура подвала" />
+        <LlmTable
+          headers={["Зона", "Содержимое", "Фон"]}
+          rows={[
+            ["4 колонки ссылок", "О клинике / Заболевания / Вопрос-ответ / Операции", "#f8f9fa"],
+            ["Нижняя полоса — лево", "Логотип клиники (иконка + текст)", "#fff"],
+            ["Нижняя полоса — центр", "Адрес + иконки соцсетей (VK, OK, YT, TG)", "#fff"],
+            ["Нижняя полоса — право", "Часы работы Пн–пт / Сб / Вс", "#fff"],
+          ]}
+        />
+        <LlmSection title="Часы работы" />
+        <LlmTable
+          headers={["День", "Часы"]}
+          rows={[
+            ["Пн–пт", "9:00–21:00"],
+            ["Сб", "9:00–18:00"],
+            ["Вс", "выходной"],
+          ]}
+        />
+        <LlmSection title="Цвета" />
+        <LlmTable
+          headers={["Элемент", "Цвет", "Токен"]}
+          rows={[
+            ["Заголовки колонок", "#111827, font-weight 600", "—"],
+            ["Ссылки (default)", "#53514e", "--brand-073m"],
+            ["Ссылки (hover)", "#0089c3", "--brand-053m"],
+            ["Фон основной части", "#f8f9fa", "—"],
+            ["Фон нижней полосы", "#ffffff", "—"],
+            ["Разделитель", "1px solid #e5e7eb", "—"],
+          ]}
+        />
+        <LlmSection title="Правила" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "4 колонки: О клинике / Заболевания / Вопрос-ответ / Операции" },
+            { ok: true, text: "Логотип в нижней полосе слева" },
+            { ok: true, text: "Адрес и соцсети в центре" },
+            { ok: true, text: "Часы работы справа" },
+            { ok: false, text: "Не менять структуру и порядок 4 колонок" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}
diff --git a/apps/web/app/blocks/doctors/page.tsx b/apps/web/app/blocks/doctors/page.tsx
new file mode 100644
index 0000000..c6447c0
--- /dev/null
+++ b/apps/web/app/blocks/doctors/page.tsx
@@ -0,0 +1,225 @@
+import type { Metadata } from "next";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+
+export const metadata: Metadata = {
+  title: "Блок «Наши врачи». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+const STATS = [
+  { num: "27", label: "ЛОР врачей работает в клинике", prefix: "Ежедневно" },
+  { num: "6", label: "кандидатов медицинских наук", prefix: "В том числе" },
+  { num: "12 000+", label: "успешно проведённых операций", prefix: "Свыше" },
+];
+
+const MOCK_DOCTORS = [
+  { name: "Макарова Людмила Тимофеевна", spec: "ЛОР врач, сурдолог" },
+  { name: "Тимофеева Наталья Александровна", spec: "ЛОР врач, мед. Завед. центром сурдологии и а..." },
+  { name: "Воронникова Наталья Валентиновна", spec: "Отоларинголог, ЛОР-хирург" },
+  { name: "Лобанова Ирина Юрьевна", spec: "ЛОР врач, сурдолог" },
+  { name: "Тарасова Наталья Сергеевна", spec: "Специалист по сурдопротезированию (Сурдолог)" },
+  { name: "Сильянова Светлана Викторовна", spec: "ЛОР врач, сурдолог" },
+];
+
+const LLM_DOCTORS_TEXT = `
+БЛОК: Наши врачи
+Источник: perm.oclinica.ru/lor — блок под CEO-текстом
+Версия: v1.0
+
+СТРУКТУРА БЛОКА:
+1. ЗАГОЛОВОК H2: «Приём ведут опытные ЛОР врачи»
+   Подзаголовок: описание принципа работы врачей клиники
+
+2. БЛОК СТАТИСТИКИ (3 показателя в ряд):
+   — «Ежедневно 27 ЛОР врачей работает в клинике»
+   — «В том числе 6 кандидатов медицинских наук»
+   — «Свыше 12 000 успешно проведённых операций»
+   Стиль: число крупное (20px+, bold), текст мелкий (#6b7280), фон #dff0fa
+
+3. СЕТКА КАРТОЧЕК ВРАЧЕЙ (6 штук, 3 в ряд):
+   Каждая карточка:
+   — Фото врача (110×160px или больше, object-fit: cover)
+   — Имя (14px, font-weight 500)
+   — Специализация (12px, #6b7280)
+   Карточки без рамки, простой вертикальный стек
+
+ЦВЕТА:
+  Заголовок H2: #111827
+  Блок статистики фон: #dff0fa (светло-синий)
+  Число в статистике: #0089c3 (--brand-053m)
+  Имя врача: #111827
+  Специализация: #6b7280
+
+ПРАВИЛА:
+✓ Заголовок H2 + описание обязательны
+✓ 3 stat-блока в ряд
+✓ Сетка 3 колонки, 2 ряда (6 карточек)
+✕ Не отображать более 6 врачей в основном блоке
+✕ Не убирать статистику
+`.trim();
+
+export default function DoctorsBlockPage() {
+  return (
+    <div className="p-8 max-w-5xl mx-auto space-y-10">
+      {/* Заголовок страницы */}
+      <div>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-1"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Блоки
+        </p>
+        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
+          Блок «Наши врачи»
+        </h1>
+        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+          Блок на странице perm.oclinica.ru/lor — заголовок, 3 стат-блока, сетка из 6 карточек врачей.
+        </p>
+      </div>
+
+      {/* Живой пример */}
+      <section className="space-y-4">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Живой пример
+        </h2>
+        <div
+          className="rounded-xl p-8 space-y-8"
+          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 }}>
+              Фундаментальная теоретическая подготовка и большой практический опыт в сочетании
+              с внимательным индивидуальным подходом является причиной лечения тысяч наших пациентов.
+            </p>
+          </div>
+
+          {/* Статистика */}
+          <div className="grid grid-cols-3 gap-4">
+            {STATS.map((s) => (
+              <div
+                key={s.num}
+                className="rounded-xl p-4 text-center"
+                style={{ background: "#dff0fa" }}
+              >
+                <p className="text-xs mb-1" style={{ color: "#6b7280" }}>
+                  {s.prefix}
+                </p>
+                <p className="text-2xl font-bold mb-1" style={{ color: "#0089c3" }}>
+                  {s.num}
+                </p>
+                <p className="text-xs leading-snug" style={{ color: "#374151" }}>
+                  {s.label}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          {/* Сетка врачей */}
+          <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
+            {MOCK_DOCTORS.map((doc) => (
+              <div key={doc.name} className="flex flex-col items-center text-center gap-2">
+                {/* Фото-заглушка */}
+                <div
+                  className="rounded-lg flex items-center justify-center text-3xl"
+                  style={{
+                    width: 88,
+                    height: 120,
+                    background: "#f3f4f6",
+                    border: "1px solid #e5e7eb",
+                    flexShrink: 0,
+                  }}
+                >
+                  👩‍⚕️
+                </div>
+                <div>
+                  <p
+                    className="text-xs font-medium leading-snug"
+                    style={{ color: "#111827" }}
+                  >
+                    {doc.name}
+                  </p>
+                  <p
+                    className="text-[11px] mt-0.5 leading-snug"
+                    style={{ color: "#6b7280" }}
+                  >
+                    {doc.spec}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Стат-блоки */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Блок статистики
+        </h2>
+        <div className="grid grid-cols-3 gap-4">
+          {STATS.map((s) => (
+            <div
+              key={s.num}
+              className="rounded-xl p-4 space-y-1"
+              style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+            >
+              <p className="text-[11px]" style={{ color: "var(--bb-text-muted)" }}>
+                {s.prefix}
+              </p>
+              <p className="text-2xl font-bold" style={{ color: "var(--brand-053m)" }}>
+                {s.num}
+              </p>
+              <p className="text-xs leading-snug" style={{ color: "var(--bb-text)" }}>
+                {s.label}
+              </p>
+              <p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
+                фон: #dff0fa · число: #0089c3
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* LLM блок */}
+      <LlmBlock path="/blocks/doctors" version="v1.0" specText={LLM_DOCTORS_TEXT}>
+        <LlmSection title="Структура блока" />
+        <LlmTable
+          headers={["Элемент", "Содержимое", "Стиль"]}
+          rows={[
+            ["H2", "«Приём ведут опытные ЛОР врачи»", "text-xl, font-bold, #111827"],
+            ["Подзаголовок", "Описание принципа работы", "14px, #374151, line-height 1.7"],
+            ["Статистика", "3 блока в ряд", "фон #dff0fa, число #0089c3, bold"],
+            ["Сетка врачей", "6 карточек, 3 колонки × 2 ряда", "фото + имя + специализация"],
+          ]}
+        />
+        <LlmSection title="Три показателя" />
+        <LlmTable
+          headers={["Число", "Описание"]}
+          rows={STATS.map((s) => [`${s.prefix} ${s.num}`, s.label])}
+        />
+        <LlmSection title="Карточка врача" />
+        <LlmTable
+          headers={["Поле", "Размер / Стиль"]}
+          rows={[
+            ["Фото", "88×120px (в блоке) или 110×160px (на странице врачей), object-fit: cover"],
+            ["Имя", "12–14px, font-weight 500, #111827"],
+            ["Специализация", "11–12px, #6b7280"],
+          ]}
+        />
+        <LlmSection title="Правила" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "H2 + описание обязательны" },
+            { ok: true, text: "3 stat-блока в ряд, фон #dff0fa" },
+            { ok: true, text: "Сетка 6 карточек (3 колонки)" },
+            { ok: false, text: "Не показывать более 6 врачей в основном блоке" },
+            { ok: false, text: "Не убирать статистику" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}
diff --git a/apps/web/app/blocks/hero/page.tsx b/apps/web/app/blocks/hero/page.tsx
new file mode 100644
index 0000000..4a94074
--- /dev/null
+++ b/apps/web/app/blocks/hero/page.tsx
@@ -0,0 +1,304 @@
+import type { Metadata } from "next";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+
+export const metadata: Metadata = {
+  title: "Hero-баннер. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+const LLM_HERO_TEXT = `
+БЛОК: Hero-баннер (главный баннер страницы)
+Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
+Версия: v1.0
+
+ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
+«ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых»
+Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m)
+
+СТРУКТУРА БАННЕРА (двухколоночная, фон: #b8e6ed):
+Левая колонка (~50%, белый блок):
+  — Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
+    Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827
+  — 3 пункта с галочками (✓ зелёный):
+    1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
+    2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия смяткими размерами»
+    3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
+    Ключевое слово: uppercase bold; описание: обычный текст, ~13px
+  — Кнопка «Узнать стоимость операции» — стиль: bb-btn-primary (#FFA39C)
+Правая колонка (~50%):
+  — Фото врача с пациентом, фон #b8e6ed
+  — Изображение занимает всю высоту блока
+
+ПОД БАННЕРОМ:
+  — Кнопки соцсетей (Facebook, VK, Twitter/X), цвет #6b7280
+  — Счётчик просмотров
+
+ЦВЕТА:
+  Фон баннера: #b8e6ed (светло-бирюзовый)
+  Левый блок: #ffffff
+  Кнопка CTA: #FFA39C (--bb-btn-primary)
+  Заголовок: #111827
+  Пункты: ключ #111827 bold, описание #374151
+
+ПРАВИЛА:
+✓ Фон баннера всегда #b8e6ed
+✓ Кнопка CTA — всегда primary (#FFA39C)
+✓ Заголовок блока uppercase, жирный
+✕ Не менять фон баннера на другой цвет
+✕ Не убирать все 3 пункта с галочками
+`.trim();
+
+const HERO_CHECKS = [
+  {
+    key: "БЕЗОПАСНО",
+    desc: "оперируют хирурги с 15-летним опытом работы",
+  },
+  {
+    key: "БЕЗ ВНЕШНИХ РАЗРЕЗОВ",
+    desc: "хирургия смяткими размерами",
+  },
+  {
+    key: "БЫСТРО",
+    desc: "под наблюдением врача пациент находится 1 сутки",
+  },
+];
+
+export default function HeroPage() {
+  return (
+    <div className="p-8 max-w-5xl mx-auto space-y-10">
+      {/* Заголовок страницы */}
+      <div>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-1"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Блоки
+        </p>
+        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
+          Hero-баннер
+        </h1>
+        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+          Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок с фоном #b8e6ed.
+        </p>
+      </div>
+
+      {/* Живой пример */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Живой пример
+        </h2>
+
+        {/* H1 страницы */}
+        <h2
+          className="text-xl font-bold leading-snug"
+          style={{ color: "#53514e" }}
+        >
+          ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых
+        </h2>
+
+        {/* Баннер */}
+        <div
+          className="rounded-xl overflow-hidden flex"
+          style={{ background: "#b8e6ed", minHeight: 280, border: "1px solid var(--bb-border)" }}
+        >
+          {/* Левая часть — белый блок */}
+          <div
+            className="flex flex-col justify-center gap-5 p-8"
+            style={{ background: "#fff", minWidth: "48%", maxWidth: "52%" }}
+          >
+            <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: "#22c55e", 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-primary">
+                Узнать стоимость операции
+              </button>
+            </div>
+          </div>
+
+          {/* Правая часть — фото-заглушка */}
+          <div
+            className="flex-1 flex items-center justify-center"
+            style={{ background: "#b8e6ed" }}
+          >
+            <div className="text-center space-y-2">
+              <div
+                className="w-20 h-20 rounded-full mx-auto flex items-center justify-center text-3xl"
+                style={{ background: "rgba(255,255,255,0.4)" }}
+              >
+                👨‍⚕️
+              </div>
+              <p className="text-xs font-medium" style={{ color: "#0089c3" }}>
+                Фото врача с пациентом
+              </p>
+              <p className="text-[10px]" style={{ color: "#53514e" }}>
+                Фон: #b8e6ed
+              </p>
+            </div>
+          </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>
+
+      {/* Анатомия */}
+      <section className="space-y-4">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Анатомия баннера
+        </h2>
+        <div className="grid grid-cols-2 gap-4">
+          {[
+            {
+              zone: "Левый блок (белый)",
+              bg: "#f8fafc",
+              items: [
+                "Заголовок uppercase bold",
+                "3 пункта с галочками ✓",
+                "Кнопка bb-btn-primary",
+              ],
+            },
+            {
+              zone: "Правый блок (#b8e6ed)",
+              bg: "#f0fdfa",
+              items: [
+                "Фото врача с пациентом",
+                "Фон: #b8e6ed (светло-бирюзовый)",
+                "Занимает всю высоту блока",
+              ],
+            },
+          ].map((z) => (
+            <div
+              key={z.zone}
+              className="rounded-xl p-4 space-y-2"
+              style={{ background: z.bg, border: "1px solid var(--bb-border)" }}
+            >
+              <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
+                {z.zone}
+              </p>
+              <ul className="space-y-1">
+                {z.items.map((item) => (
+                  <li key={item} className="text-xs flex items-start gap-1.5">
+                    <span style={{ color: "var(--brand-053m)" }}>·</span>
+                    <span style={{ color: "var(--bb-text-muted)" }}>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Пункты с галочками */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Три пункта баннера
+        </h2>
+        <div className="space-y-2">
+          {HERO_CHECKS.map((c) => (
+            <div
+              key={c.key}
+              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>
+              <div>
+                <span className="text-sm font-bold uppercase" style={{ color: "#111827" }}>
+                  {c.key}
+                </span>
+                <span className="text-sm" style={{ color: "#374151" }}>
+                  {" "}– {c.desc}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+        <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+          Ключевое слово: uppercase + bold. Описание: обычный текст. Галочка: #22c55e.
+        </p>
+      </section>
+
+      {/* LLM блок */}
+      <LlmBlock path="/blocks/hero" version="v1.0" specText={LLM_HERO_TEXT}>
+        <LlmSection title="Структура баннера" />
+        <LlmTable
+          headers={["Зона", "Ширина", "Фон", "Содержимое"]}
+          rows={[
+            ["Левый блок", "~50%", "#ffffff", "Заголовок uppercase + 3 галочки + кнопка bb-btn-primary"],
+            ["Правый блок", "~50%", "#b8e6ed", "Фото врача с пациентом"],
+            ["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
+          ]}
+        />
+        <LlmSection title="Три пункта баннера" />
+        <LlmTable
+          headers={["Ключевое слово", "Описание"]}
+          rows={HERO_CHECKS.map((c) => [c.key, c.desc])}
+        />
+        <LlmSection title="Цвета" />
+        <LlmTable
+          headers={["Элемент", "Цвет", "Токен"]}
+          rows={[
+            ["Фон баннера", "#b8e6ed", "—"],
+            ["Левый блок", "#ffffff", "—"],
+            ["Кнопка CTA", "#FFA39C", "bb-btn-primary"],
+            ["Заголовок блока", "#111827", "—"],
+            ["Галочка", "#22c55e", "—"],
+          ]}
+        />
+        <LlmSection title="Правила" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "Фон баннера: #b8e6ed (светло-бирюзовый)" },
+            { ok: true, text: "Кнопка CTA: bb-btn-primary (#FFA39C)" },
+            { ok: true, text: "Заголовок: uppercase, bold" },
+            { ok: true, text: "Три пункта с галочками ✓ (#22c55e)" },
+            { ok: false, text: "Не менять фон баннера на другой цвет" },
+            { ok: false, text: "Не убирать три пункта с галочками" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}
diff --git a/apps/web/app/blocks/news/page.tsx b/apps/web/app/blocks/news/page.tsx
new file mode 100644
index 0000000..52c7efe
--- /dev/null
+++ b/apps/web/app/blocks/news/page.tsx
@@ -0,0 +1,198 @@
+import type { Metadata } from "next";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+
+export const metadata: Metadata = {
+  title: "Блок «Новости». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+const MOCK_NEWS = [
+  {
+    date: "20.12.2025",
+    title: "Наша работа клиники и новогодние праздники",
+    href: "#",
+  },
+  {
+    date: "11.08.2025",
+    title: "СЕРВИС ОБНОВЛЕНИЕ: Обновление графика работы клиники",
+    href: "#",
+  },
+  {
+    date: "12.06.2025",
+    title: "СЕРВИС ОБНОВЛЕНИЕ: Временное изменение работы клиники 22.06.25 г.",
+    href: "#",
+  },
+  {
+    date: "11.06.2025",
+    title: "График работы клиники в ближайшие праздники",
+    href: "#",
+  },
+];
+
+const LLM_NEWS_TEXT = `
+БЛОК: Новости
+Источник: perm.oclinica.ru/lor — блок новостей внизу страницы
+Версия: v1.0
+
+СТРУКТУРА БЛОКА:
+1. ЗАГОЛОВОК H2: «Новости»
+   Выравнивание: по центру или слева
+
+2. СЕТКА КАРТОЧЕК НОВОСТЕЙ (4 штуки в ряд):
+   Каждая карточка:
+   — Дата: малый текст сверху (формат DD.MM.YYYY), цвет #6b7280
+   — Заголовок новости: синяя ссылка (#0089c3), 14px, font-weight 500, hover underline
+   — Без превью-изображения
+   — Без описания (только дата + заголовок-ссылка)
+   Hover на карточке: bg #eef4d1, box-shadow 0 0 16px 0 #9e9e9a (bb-news-card)
+
+3. КНОПКА «Все новости»:
+   Стиль: outline (#BF9975) или teal (#60959c), выровнена по центру под сеткой
+   На сайте: ссылка «Все новости»
+
+ЦВЕТА:
+  Дата: #6b7280
+  Заголовок-ссылка: #0089c3 (--brand-053m)
+  Hover фон карточки: #eef4d1
+  Hover тень: 0 0 16px 0 #9e9e9a
+
+ПРАВИЛА:
+✓ 4 карточки в ряд
+✓ Дата сверху карточки
+✓ Заголовок = ссылка #0089c3
+✓ Hover: bg #eef4d1 (класс bb-news-card)
+✓ Кнопка «Все новости» под сеткой
+✕ Не добавлять изображения в карточки новостей главной страницы
+✕ Не добавлять описание/анонс в карточку
+`.trim();
+
+export default function NewsBlockPage() {
+  return (
+    <div className="p-8 max-w-5xl mx-auto space-y-10">
+      {/* Заголовок страницы */}
+      <div>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-1"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Блоки
+        </p>
+        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
+          Блок «Новости»
+        </h1>
+        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+          Блок новостей с perm.oclinica.ru/lor — 4 карточки в ряд (дата + заголовок-ссылка),
+          кнопка «Все новости».
+        </p>
+      </div>
+
+      {/* Живой пример */}
+      <section className="space-y-4">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Живой пример
+        </h2>
+        <div
+          className="rounded-xl p-8 space-y-6"
+          style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
+        >
+          <h2 className="text-xl font-bold" style={{ color: "#111827" }}>
+            Новости
+          </h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {MOCK_NEWS.map((n) => (
+              <div
+                key={n.date}
+                className="bb-news-card rounded-lg p-3 cursor-pointer"
+                style={{
+                  border: "1px solid var(--bb-border)",
+                  transition: "background 0.15s, box-shadow 0.15s",
+                }}
+              >
+                <p className="text-xs mb-2" style={{ color: "#6b7280" }}>
+                  {n.date}
+                </p>
+                <a
+                  href={n.href}
+                  className="text-sm font-medium leading-snug block"
+                  style={{ color: "#0089c3", textDecoration: "none" }}
+                >
+                  {n.title}
+                </a>
+              </div>
+            ))}
+          </div>
+          <div className="text-center">
+            <button className="bb-btn bb-btn-md bb-btn-outline">
+              Все новости
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Анатомия карточки */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Анатомия карточки новости
+        </h2>
+        <div
+          className="rounded-xl p-6 max-w-xs"
+          style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+        >
+          <div className="space-y-3">
+            <div
+              className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
+              style={{ background: "#f0f9ff", color: "var(--bb-text-muted)" }}
+            >
+              ① Дата: DD.MM.YYYY · цвет #6b7280
+            </div>
+            <div
+              className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
+              style={{ background: "#f0f9ff", color: "var(--bb-text-muted)" }}
+            >
+              ② Заголовок-ссылка · #0089c3 · font-weight 500
+            </div>
+            <div
+              className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
+              style={{ background: "#fefce8", color: "var(--bb-text-muted)" }}
+            >
+              Hover: bg #eef4d1 · shadow 0 0 16px #9e9e9a
+            </div>
+          </div>
+        </div>
+        <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+          Нет изображений, нет описания — только дата и заголовок.
+          CSS-класс <code className="font-mono">.bb-news-card</code> обрабатывает hover.
+        </p>
+      </section>
+
+      {/* LLM блок */}
+      <LlmBlock path="/blocks/news" version="v1.0" specText={LLM_NEWS_TEXT}>
+        <LlmSection title="Структура карточки новости" />
+        <LlmTable
+          headers={["Поле", "Стиль", "Значение"]}
+          rows={[
+            ["Дата", "text-xs, #6b7280", "Формат DD.MM.YYYY"],
+            ["Заголовок", "text-sm, font-weight 500, #0089c3", "Ссылка на новость"],
+            ["Hover фон", ".bb-news-card:hover", "#eef4d1"],
+            ["Hover тень", ".bb-news-card:hover", "0 0 16px 0 #9e9e9a"],
+          ]}
+        />
+        <LlmSection title="Mock-данные (4 реальные новости с сайта)" />
+        <LlmTable
+          headers={["Дата", "Заголовок"]}
+          rows={MOCK_NEWS.map((n) => [n.date, n.title])}
+        />
+        <LlmSection title="Правила" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "4 карточки в ряд (grid-cols-4)" },
+            { ok: true, text: "Дата сверху, заголовок-ссылка ниже" },
+            { ok: true, text: "Hover: класс bb-news-card (bg #eef4d1)" },
+            { ok: true, text: "Кнопка «Все новости» под сеткой (bb-btn-outline)" },
+            { ok: false, text: "Не добавлять изображения в карточки" },
+            { ok: false, text: "Не добавлять текст-анонс в карточку" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}
diff --git a/apps/web/app/blocks/reviews/page.tsx b/apps/web/app/blocks/reviews/page.tsx
new file mode 100644
index 0000000..d415536
--- /dev/null
+++ b/apps/web/app/blocks/reviews/page.tsx
@@ -0,0 +1,264 @@
+import type { Metadata } from "next";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+
+export const metadata: Metadata = {
+  title: "Блок «Отзывы». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+const MOCK_REVIEWS = [
+  {
+    text: "Спасибо за приём, мне всё понравилось, спасибо за приём, мне всё понравилось. Врач очень внимательный и профессиональный.",
+    author: "Пациент клиники",
+    doctor: "Тимофеева Наталья Александровна",
+  },
+  {
+    text: "Очень довольна лечением! Прошла курс процедур, нос дышит отлично. Рекомендую клинику всем.",
+    author: "Наталья К.",
+    doctor: "Макарова Людмила Тимофеевна",
+  },
+];
+
+const LLM_REVIEWS_TEXT = `
+БЛОК: Отзывы о нас
+Источник: perm.oclinica.ru/lor — блок отзывов
+Версия: v1.0
+
+СТРУКТУРА БЛОКА:
+1. ЗАГОЛОВОК H2: «Отзывы о нас»
+   Подзаголовок: «За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа
+   более 50000 пациентов. Но дня сейчас мы высоко ценим каждый положительный отзыв и искренние слова благодарности»
+
+2. КАРУСЕЛЬ ОТЗЫВОВ:
+   — Большая открывающая кавычка (« «) в цвете #b8e6ed, font-size 80–100px
+   — Текст отзыва: курсив, 15–16px, #374151, background #eef4d1
+   — Ссылка «Читать отзыв полностью» в цвете #0089c3
+   — Стрелки навигации < > по бокам (round buttons)
+   — Карусель показывает 1 отзыв за раз
+
+ЦВЕТА:
+  Фон карточки отзыва: #eef4d1 (светло-жёлто-зелёный)
+  Кавычка: #b8e6ed (светло-бирюзовый)
+  Текст отзыва: #374151
+  Ссылка «Читать полностью»: #0089c3
+
+ПРАВИЛА:
+✓ Фон карточки отзыва: #eef4d1 (тот же что у ReviewCard)
+✓ Большая декоративная кавычка
+✓ Ссылка «Читать отзыв полностью» обязательна
+✓ Навигация карусели (стрелки)
+✕ Не показывать более 1 отзыва за раз в карусели
+✕ Не убирать навигационные стрелки
+`.trim();
+
+export default function ReviewsBlockPage() {
+  return (
+    <div className="p-8 max-w-5xl mx-auto space-y-10">
+      {/* Заголовок страницы */}
+      <div>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-1"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Блоки
+        </p>
+        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
+          Блок «Отзывы о нас»
+        </h1>
+        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+          Карусель отзывов с perm.oclinica.ru/lor — большая кавычка, текст, «Читать полностью», стрелки.
+        </p>
+      </div>
+
+      {/* Живой пример */}
+      <section className="space-y-4">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Живой пример
+        </h2>
+        <div
+          className="rounded-xl p-8 space-y-6"
+          style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
+        >
+          {/* Заголовок */}
+          <div>
+            <h2 className="text-xl font-bold mb-2" style={{ color: "#111827" }}>
+              Отзывы о нас
+            </h2>
+            <p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
+              За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа
+              более 50 000 пациентов. Но даже сейчас мы высоко ценим каждый положительный отзыв
+              и искренние слова благодарности.
+            </p>
+          </div>
+
+          {/* Карусель (статичная) */}
+          <div className="relative flex items-center gap-4">
+            {/* Стрелка влево */}
+            <button
+              className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
+              style={{
+                background: "var(--bb-sidebar-bg)",
+                border: "1px solid var(--bb-border)",
+                color: "var(--bb-text-muted)",
+              }}
+            >
+              ‹
+            </button>
+
+            {/* Карточка отзыва */}
+            <div
+              className="flex-1 rounded-xl p-6 relative"
+              style={{ background: "#eef4d1" }}
+            >
+              {/* Декоративная кавычка */}
+              <div
+                className="text-8xl leading-none mb-2 font-serif"
+                style={{ color: "#b8e6ed", lineHeight: 0.8 }}
+              >
+                «
+              </div>
+              <p
+                className="text-sm italic leading-relaxed"
+                style={{ color: "#374151" }}
+              >
+                {MOCK_REVIEWS[0].text}
+              </p>
+              <a
+                href="#"
+                className="inline-block mt-3 text-sm"
+                style={{ color: "#0089c3" }}
+              >
+                Читать отзыв полностью
+              </a>
+            </div>
+
+            {/* Стрелка вправо */}
+            <button
+              className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
+              style={{
+                background: "var(--bb-sidebar-bg)",
+                border: "1px solid var(--bb-border)",
+                color: "var(--bb-text-muted)",
+              }}
+            >
+              ›
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Несколько примеров */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Примеры отзывов (mock)
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {MOCK_REVIEWS.map((r, i) => (
+            <div
+              key={i}
+              className="rounded-xl p-5 space-y-3"
+              style={{ background: "#eef4d1", border: "1px solid #d4e6a0" }}
+            >
+              <div
+                className="text-5xl leading-none font-serif"
+                style={{ color: "#b8e6ed" }}
+              >
+                «
+              </div>
+              <p
+                className="text-sm italic leading-relaxed"
+                style={{ color: "#374151" }}
+              >
+                {r.text}
+              </p>
+              <div className="pt-1">
+                <a href="#" className="text-sm" style={{ color: "#0089c3" }}>
+                  Читать отзыв полностью
+                </a>
+              </div>
+              <div className="border-t pt-2" style={{ borderColor: "#c8d8a0" }}>
+                <p className="text-xs font-medium" style={{ color: "#374151" }}>
+                  {r.author}
+                </p>
+                <p className="text-[11px]" style={{ color: "#6b7280" }}>
+                  о враче: {r.doctor}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Анатомия */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Анатомия карточки отзыва
+        </h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          {[
+            { label: "Фон карточки", value: "#eef4d1", note: "светло-жёлто-зелёный" },
+            { label: "Кавычка декоративная", value: "#b8e6ed", note: "80–100px, font-serif" },
+            { label: "Текст отзыва", value: "#374151", note: "14px, italic" },
+            { label: "Ссылка", value: "#0089c3", note: "--brand-053m" },
+          ].map((t) => (
+            <div
+              key={t.label}
+              className="p-3 rounded-xl space-y-1"
+              style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+            >
+              <div
+                className="w-8 h-8 rounded border"
+                style={{ background: t.value, borderColor: "var(--bb-border)" }}
+              />
+              <p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>
+                {t.label}
+              </p>
+              <p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
+                {t.value}
+              </p>
+              <p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
+                {t.note}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* LLM блок */}
+      <LlmBlock path="/blocks/reviews" version="v1.0" specText={LLM_REVIEWS_TEXT}>
+        <LlmSection title="Структура блока" />
+        <LlmTable
+          headers={["Элемент", "Содержимое", "Стиль"]}
+          rows={[
+            ["H2", "«Отзывы о нас»", "text-xl, font-bold, #111827"],
+            ["Подзаголовок", "Описание достижений клиники за 12 лет", "14px, #374151"],
+            ["Кавычка", "Декоративная «", "80–100px, #b8e6ed, font-serif"],
+            ["Текст отзыва", "Полный текст отзыва пациента", "14px, italic, #374151"],
+            ["Ссылка", "«Читать отзыв полностью»", "#0089c3"],
+            ["Стрелки карусели", "‹ ›", "Round buttons, фон var(--bb-sidebar-bg)"],
+          ]}
+        />
+        <LlmSection title="Цвета" />
+        <LlmTable
+          headers={["Элемент", "Цвет", "Токен"]}
+          rows={[
+            ["Фон карточки отзыва", "#eef4d1", "—"],
+            ["Декоративная кавычка", "#b8e6ed", "—"],
+            ["Текст отзыва", "#374151", "—"],
+            ["Ссылка", "#0089c3", "--brand-053m"],
+          ]}
+        />
+        <LlmSection title="Правила" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "Фон карточки отзыва: #eef4d1" },
+            { ok: true, text: "Декоративная кавычка цвет #b8e6ed" },
+            { ok: true, text: "Ссылка «Читать отзыв полностью» обязательна" },
+            { ok: true, text: "Навигация карусели: стрелки ‹ ›" },
+            { ok: false, text: "Не показывать несколько отзывов одновременно" },
+            { ok: false, text: "Не убирать навигационные стрелки" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}
diff --git a/apps/web/app/components/navigation/page.tsx b/apps/web/app/components/navigation/page.tsx
new file mode 100644
index 0000000..2930857
--- /dev/null
+++ b/apps/web/app/components/navigation/page.tsx
@@ -0,0 +1,300 @@
+import type { Metadata } from "next";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+
+export const metadata: Metadata = {
+  title: "Шапка и навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+const NAV_ITEMS = [
+  "Клиника",
+  "ЛОР врачи",
+  "Заболевания",
+  "Вопрос-ответ",
+  "ЛОР-операции",
+  "Сурдология",
+  "Цены",
+  "Контакты",
+];
+
+const LLM_NAV_TEXT = `
+БЛОК: Шапка и навигация сайта (Header)
+Источник: perm.oclinica.ru/lor — реальная шапка сайта
+Версия: v1.0
+
+СТРУКТУРА ШАПКИ (3 зоны сверху вниз):
+
+1. ТОП-БАР (~40px высота, фон #fff, border-bottom 1px solid #e5e7eb)
+   Левая часть:
+   — Адрес: «Б. Цитная, 3» с иконкой 📍
+   — Ссылка: «Клиника ухо горло нос и аллергия»
+   — Ссылка: «Центр аллергологии и пульмонологии»
+   Правая часть:
+   — Телефон: «/342/ 255-53-84» (font-weight: bold, color: #111827)
+   — Кнопка «Заказать звонок» — стиль bb-btn-pill (#e9e4d4, border #d5cfbd, border-radius 25px)
+
+2. ЛОГОТИП (~64px, фон #fff)
+   — Иконка кружок синий (#0089c3) с крестом
+   — Текст «КЛИНИКА УХО ГОРЛО НОС» жирный uppercase, цвет #53514e
+   — Подпись «им. проф. Е.Н.Оленевой» мелкий, цвет #9ca3af
+
+3. ГЛАВНОЕ МЕНЮ (~46px, фон #fff, border-top 1px solid #e5e7eb)
+   Пункты (8 штук): Клиника | ЛОР врачи | Заболевания | Вопрос-ответ | ЛОР-операции | Сурдология | Цены | Контакты
+   Шрифт: Fira Sans 14px, weight 400
+   Цвет ссылок: #53514e (--brand-073m)
+   Активный / Hover: #0089c3 (--brand-053m)
+   Разделители: border-right 1px solid #f3f4f6 между пунктами
+
+ПРАВИЛА:
+✓ Логотип всегда кликабелен — ведёт на главную страницу раздела
+✓ Кнопка «Заказать звонок» всегда видна, pill-стиль
+✓ Телефон кликабелен (tel: ссылка)
+✓ Активный пункт меню — цвет #0089c3, остальные #53514e
+✕ Не добавлять пункты меню, которых нет на сайте
+✕ Не менять порядок пунктов меню
+`.trim();
+
+export default function NavigationPage() {
+  return (
+    <div className="p-8 max-w-5xl mx-auto space-y-10">
+      {/* Заголовок страницы */}
+      <div>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-1"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Компоненты
+        </p>
+        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
+          Шапка и навигация
+        </h1>
+        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+          Точное воспроизведение шапки с perm.oclinica.ru/lor. Три зоны: топ-бар, логотип, главное меню.
+        </p>
+      </div>
+
+      {/* Живой пример */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Живой пример
+        </h2>
+        <div
+          className="rounded-xl overflow-hidden"
+          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>
+
+      {/* Анатомия */}
+      <section className="space-y-4">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Анатомия шапки
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {[
+            {
+              zone: "1. Топ-бар",
+              bg: "#f0f9ff",
+              height: "~40px",
+              color: "Фон: #fff",
+              desc: "Адрес, ссылки на разделы клиники, телефон, кнопка «Заказать звонок» (pill)",
+            },
+            {
+              zone: "2. Логотип",
+              bg: "#f0fdf4",
+              height: "~64px",
+              color: "Фон: #fff",
+              desc: "Иконка-кружок (#0089c3) + название клиники двумя строками + подпись мелким",
+            },
+            {
+              zone: "3. Навигация",
+              bg: "#fefce8",
+              height: "~46px",
+              color: "Фон: #fff, border-top",
+              desc: "8 горизонтальных пунктов, активный = #0089c3, остальные = #53514e",
+            },
+          ].map((z) => (
+            <div
+              key={z.zone}
+              className="rounded-xl p-4 space-y-2"
+              style={{ background: z.bg, border: "1px solid var(--bb-border)" }}
+            >
+              <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
+                {z.zone}
+              </p>
+              <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+                {z.desc}
+              </p>
+              <p className="text-[11px] font-mono mt-1" style={{ color: "var(--bb-text-muted)" }}>
+                H: {z.height} · {z.color}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Пункты меню */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Пункты главного меню
+        </h2>
+        <div className="flex flex-wrap gap-2">
+          {NAV_ITEMS.map((item, i) => (
+            <span
+              key={item}
+              className="px-3 py-1.5 rounded text-sm"
+              style={{
+                background: i === 0 ? "#dff0fa" : "var(--bb-sidebar-bg)",
+                color: i === 0 ? "var(--brand-053m)" : "var(--bb-text)",
+                border: "1px solid var(--bb-border)",
+                fontWeight: i === 0 ? 500 : 400,
+              }}
+            >
+              {item}
+              {i === 0 && (
+                <span className="ml-1.5 text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
+                  (активный)
+                </span>
+              )}
+            </span>
+          ))}
+        </div>
+        <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+          Порядок пунктов фиксирован. Hover и активный пункт — цвет #0089c3 (--brand-053m).
+        </p>
+      </section>
+
+      {/* Токены */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Цвета и токены
+        </h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          {[
+            { label: "Фон шапки", value: "#ffffff", token: "—" },
+            { label: "Ссылки меню", value: "#53514e", token: "--brand-073m" },
+            { label: "Активный / hover", value: "#0089c3", token: "--brand-053m" },
+            { label: "Кнопка «Заказать»", value: "#e9e4d4", token: "bb-btn-pill" },
+          ].map((t) => (
+            <div
+              key={t.label}
+              className="p-3 rounded-xl space-y-2"
+              style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+            >
+              <div
+                className="w-8 h-8 rounded border"
+                style={{ background: t.value, borderColor: "var(--bb-border)" }}
+              />
+              <p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>
+                {t.label}
+              </p>
+              <p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
+                {t.value}
+              </p>
+              <p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
+                {t.token}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* LLM блок */}
+      <LlmBlock path="/components/navigation" version="v1.0" specText={LLM_NAV_TEXT}>
+        <LlmSection title="Зоны шапки" />
+        <LlmTable
+          headers={["Зона", "Высота", "Фон", "Содержимое"]}
+          rows={[
+            ["Топ-бар", "~40px", "#fff", "Адрес, ссылки разделов, телефон /342/ 255-53-84, кнопка «Заказать звонок»"],
+            ["Логотип", "~64px", "#fff", "Кружок #0089c3 + «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»"],
+            ["Навигация", "~46px", "#fff + border-top", "8 пунктов: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты"],
+          ]}
+        />
+        <LlmSection title="Цвета" />
+        <LlmTable
+          headers={["Элемент", "Цвет", "Токен"]}
+          rows={[
+            ["Фон шапки", "#ffffff", "—"],
+            ["Ссылки меню (default)", "#53514e", "--brand-073m"],
+            ["Активный пункт / hover", "#0089c3", "--brand-053m"],
+            ["Кнопка «Заказать звонок»", "#e9e4d4 / border #d5cfbd", "bb-btn-pill"],
+            ["Телефон", "#111827, font-weight bold", "—"],
+          ]}
+        />
+        <LlmSection title="Правила" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "Логотип ведёт на главную страницу раздела" },
+            { ok: true, text: "Кнопка «Заказать звонок» всегда видна, pill-стиль" },
+            { ok: true, text: "Телефон — кликабельная ссылка tel:" },
+            { ok: true, text: "Активный пункт меню — цвет #0089c3" },
+            { ok: false, text: "Не добавлять пункты меню, которых нет на сайте" },
+            { ok: false, text: "Не менять порядок 8 пунктов меню" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index bc26fe4..da33c22 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -169,6 +169,9 @@ body {
 }
 .bb-service-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
 
+/* ─── Навигация сайта (Sprint 5) ────────────────────────────── */
+.bb-nav-link:hover { color: var(--brand-053m) !important; }
+
 /* ─── Тумблер (Sprint 3) ──────────────────────────────────────── */
 .bb-toggle-track {
   display: inline-flex;
diff --git a/apps/web/components/layout/Sidebar.tsx b/apps/web/components/layout/Sidebar.tsx
index 15b4812..78b60ee 100644
--- a/apps/web/components/layout/Sidebar.tsx
+++ b/apps/web/components/layout/Sidebar.tsx
@@ -30,20 +30,19 @@ const NAV: NavSection[] = [
       { label: "Кнопки", href: "/components/buttons" },
       { label: "Форм-контролы", href: "/components/forms" },
       { label: "Карточки", href: "/components/cards" },
-      { label: "Навигация", href: "/components/navigation", soon: true },
+      { label: "Шапка / Навигация", href: "/components/navigation" },
     ],
   },
   {
     title: "Блоки",
     items: [
-      { label: "Шапка / Навигация", href: "/components/navigation", soon: true },
-      { label: "Hero-баннер", href: "/blocks/hero", soon: true },
-      { label: "Вводный текст", href: "/blocks/ceo", soon: true },
-      { label: "Наши врачи", href: "/blocks/doctors", soon: true },
-      { label: "Отзывы", href: "/blocks/reviews", soon: true },
-      { label: "Формы записи", href: "/blocks/contact-forms", soon: true },
-      { label: "Новости", href: "/blocks/news", soon: true },
-      { label: "Подвал / Контакт", href: "/blocks/contact", soon: true },
+      { label: "Hero-баннер", href: "/blocks/hero" },
+      { label: "Вводный текст", href: "/blocks/ceo" },
+      { label: "Наши врачи", href: "/blocks/doctors" },
+      { label: "Отзывы", href: "/blocks/reviews" },
+      { label: "Формы записи", href: "/blocks/contact-forms" },
+      { label: "Новости", href: "/blocks/news" },
+      { label: "Подвал / Контакт", href: "/blocks/contact" },
     ],
   },
   {
@@ -167,7 +166,7 @@ export function Sidebar() {
           color: "var(--bb-sidebar-text-muted)",
         }}
       >
-        Sprint 5 · v0.5.0
+        Sprint 5 · v0.5.1
       </div>
     </aside>
   );