feat(badges): реальные фото бейджей из PDF-брендбука

- Извлечены 2 фото (стр.12 PDF): лицевая (белый бейдж с ФИО) и оборотная (магнитное крепление)
- Убран CSS-макет, добавлены реальные фото с описанием
- Добавлен пример из брендбука (Лебединская Е.А.)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/app/offline/badges/page.tsx

@@ -31,79 +31,6 @@ function Section({
   );
 }
 
-/* Компонент бейджа (масштабированный макет) */
-function BadgeMockup({
-  variant,
-  name,
-  role,
-}: {
-  variant: "light" | "dark";
-  name: string;
-  role: string;
-}) {
-  const isDark = variant === "dark";
-  /* 70×30 мм → пропорция 7:3. Отображаем в 280×120px */
-  return (
-    <div className="flex flex-col items-center gap-3">
-      <div
-        className="rounded-lg flex items-center px-5 gap-4"
-        style={{
-          width: 280,
-          height: 120,
-          background: isDark ? "var(--brand-073m)" : "var(--brand-081m)",
-          border: isDark ? "none" : "1px solid #d1d5db",
-          flexShrink: 0,
-        }}
-      >
-        {/* Логотип */}
-        <Image
-          src="/logo/logo-transparent.png"
-          alt="Логотип"
-          width={72}
-          height={26}
-          className="object-contain shrink-0"
-          style={{
-            filter: isDark
-              ? "brightness(0) invert(1)"
-              : "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
-          }}
-        />
-        {/* Разделитель */}
-        <div
-          className="self-stretch w-px mx-1"
-          style={{ background: isDark ? "rgba(255,255,255,0.25)" : "rgba(92,46,14,0.2)" }}
-        />
-        {/* Текст */}
-        <div>
-          <p
-            className="font-bold leading-tight"
-            style={{
-              fontFamily: "'DINPro', Arial, sans-serif",
-              fontSize: 13,
-              color: isDark ? "#ffffff" : "#5c2e0e",
-            }}
-          >
-            {name}
-          </p>
-          <p
-            className="leading-tight mt-0.5"
-            style={{
-              fontFamily: "'DINPro', Arial, sans-serif",
-              fontSize: 10,
-              color: isDark ? "rgba(255,255,255,0.7)" : "rgba(92,46,14,0.7)",
-            }}
-          >
-            {role}
-          </p>
-        </div>
-      </div>
-      <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
-        {isDark ? "Тёмный вариант (серо-голубой)" : "Светлый вариант (бежевый)"}
-      </p>
-    </div>
-  );
-}
-
 export default function BadgesPage() {
   return (
     <div className="max-w-4xl mx-auto px-8 py-10">
@@ -120,24 +47,76 @@ export default function BadgesPage() {
           Бейджи сотрудников
         </h1>
         <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
-          Именные бейджи для идентификации сотрудников клиники. Размер 70×30 мм.
-          Два цветовых варианта в зависимости от должности.
+          Именные бейджи для идентификации сотрудников клиники. Размер 70×30 мм,
+          магнитное крепление. Белый фон, чёрный текст.
         </p>
       </div>
 
-      {/* Размеры и технические требования */}
+      {/* Фотографии */}
       <Section
-        title="Технические параметры"
-        subtitle="Единый стандарт для всех сотрудников клиники."
+        title="Образцы бейджей"
+        subtitle="Фотографии реальных бейджей из брендбука клиники."
       >
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+          {/* Лицевая сторона */}
+          <div>
             <div
-          className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6"
+              className="rounded-xl overflow-hidden border mb-4"
+              style={{ borderColor: "var(--bb-border)" }}
             >
+              <Image
+                src="/offline/badges/badge-2.jpeg"
+                alt="Лицевая сторона бейджа: Лебединская Елена Александровна, врач оториноларинголог"
+                width={690}
+                height={347}
+                className="w-full object-cover"
+              />
+            </div>
+            <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+              Лицевая сторона
+            </p>
+            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+              Белый фон, скруглённые углы. ФИО — крупный шрифт,
+              должности — мелкий. Металлическая рамка.
+            </p>
+          </div>
+
+          {/* Оборотная сторона */}
+          <div>
+            <div
+              className="rounded-xl overflow-hidden border mb-4"
+              style={{ borderColor: "var(--bb-border)" }}
+            >
+              <Image
+                src="/offline/badges/badge-1.jpeg"
+                alt="Оборотная сторона бейджа с магнитным креплением"
+                width={657}
+                height={369}
+                className="w-full object-cover"
+              />
+            </div>
+            <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+              Оборотная сторона
+            </p>
+            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+              Чёрный пластик, магнитное крепление (CAUTION MAGNETIC).
+              Не требует проколов в одежде.
+            </p>
+          </div>
+        </div>
+      </Section>
+
+      {/* Технические параметры */}
+      <Section
+        title="Технические параметры"
+        subtitle="Единый стандарт для всех сотрудников клиники."
+      >
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
           {[
             { label: "Ширина", value: "70 мм" },
             { label: "Высота", value: "30 мм" },
-            { label: "Материал", value: "ПВХ / металл" },
-            { label: "Крепление", value: "Булавка / клипса" },
+            { label: "Материал", value: "Металл / ПВХ" },
+            { label: "Крепление", value: "Магнитное" },
           ].map(({ label, value }) => (
             <div
               key={label}
@@ -155,29 +134,10 @@ export default function BadgesPage() {
         </div>
       </Section>
 
-      {/* Варианты */}
-      <Section
-        title="Варианты бейджей"
-        subtitle="Макет бейджа (масштаб: 4× от реального размера 70×30 мм)."
-      >
-        <div className="flex flex-wrap gap-8 items-start">
-          <BadgeMockup
-            variant="light"
-            name="Иванова А.В."
-            role="Врач-оториноларинголог"
-          />
-          <BadgeMockup
-            variant="dark"
-            name="Петров К.С."
-            role="Главный врач"
-          />
-        </div>
-      </Section>
-
       {/* Состав текста */}
       <Section
         title="Состав текста на бейдже"
-        subtitle="Строгий порядок элементов. Шрифт — DINPro."
+        subtitle="Строгий порядок элементов."
       >
         <div
           className="overflow-hidden rounded-xl border"
@@ -186,7 +146,7 @@ export default function BadgesPage() {
           <table className="w-full text-sm">
             <thead>
               <tr style={{ background: "var(--bb-sidebar-bg)" }}>
-                {["Элемент", "Содержание", "Шрифт / Размер", "Позиция"].map(h => (
+                {["Элемент", "Содержание", "Оформление"].map(h => (
                   <th
                     key={h}
                     className="text-left px-5 py-3 font-medium"
@@ -199,11 +159,10 @@ export default function BadgesPage() {
             </thead>
             <tbody>
               {[
-                ["Логотип", "Логотип клиники", "PNG / SVG", "Левая часть, по центру по высоте"],
-                ["Разделитель", "Вертикальная линия", "1px, 40% прозрачность", "Между логотипом и текстом"],
-                ["ФИО", "Фамилия И.О.", "DINPro Bold 13px", "Правая часть, верхняя строка"],
-                ["Должность", "Полное название должности", "DINPro Regular 10px", "Правая часть, нижняя строка"],
-              ].map(([el, content, font, pos]) => (
+                ["ФИО", "Фамилия Имя Отчество", "Крупный шрифт, первая строка"],
+                ["Должность", "Основная должность", "Мелкий шрифт, вторая строка"],
+                ["Специализация", "Специализация / учёная степень (если есть)", "Мелкий шрифт, третья строка"],
+              ].map(([el, content, style]) => (
                 <tr
                   key={el}
                   className="border-t"
@@ -211,60 +170,33 @@ export default function BadgesPage() {
                 >
                   <td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>{el}</td>
                   <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
-                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>{font}</td>
-                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{pos}</td>
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{style}</td>
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
-      </Section>
 
-      {/* Цветовые варианты */}
-      <Section
-        title="Применение вариантов"
-        subtitle="Выбор варианта зависит от должности сотрудника."
-      >
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          {[
-            {
-              variant: "Светлый (бежевый)",
-              color: "#c4a882",
-              usage: "Медицинский персонал, санитарки, технический персонал",
-              oracal: "081M",
-            },
-            {
-              variant: "Тёмный (серо-голубой)",
-              color: "#5b7b87",
-              usage: "Административный персонал, менеджеры, главный врач",
-              oracal: "073M",
-            },
-          ].map(item => (
+        {/* Пример из фото */}
         <div
-              key={item.variant}
-              className="flex gap-4 p-4 rounded-xl border"
-              style={{ borderColor: "var(--bb-border)" }}
+          className="mt-4 rounded-xl border p-4 flex items-start gap-3"
+          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
         >
           <div
-                className="w-8 h-8 rounded-lg shrink-0 mt-0.5"
-                style={{ background: item.color }}
+            className="w-1.5 self-stretch rounded-full shrink-0"
+            style={{ background: "var(--brand-053m)" }}
           />
           <div>
-                <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
-                  {item.variant}
+            <p className="text-xs font-medium mb-1" style={{ color: "var(--bb-text-muted)" }}>
+              Пример из брендбука
             </p>
-                <p className="text-xs mb-1.5" style={{ color: "var(--bb-text-muted)" }}>
-                  {item.usage}
+            <p className="text-sm font-semibold" style={{ color: "var(--bb-text)" }}>
+              Лебединская Елена Александровна
+            </p>
+            <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
+              врач оториноларинголог · ведущий хирург · кандидат медицинских наук
             </p>
-                <span
-                  className="text-[10px] font-mono px-1.5 py-0.5 rounded"
-                  style={{ background: "#f3f4f6", color: "#374151" }}
-                >
-                  Oracal {item.oracal}
-                </span>
-              </div>
           </div>
-          ))}
         </div>
       </Section>