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

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

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

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

@@ -47,92 +47,113 @@ export default function UniformPage() {
           Форма сотрудников
         </h1>
         <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
-          Фирменная медицинская одежда сотрудников клиники. Бежевый костюм
-          с логотипом клиники на левой стороне груди.
+          Фирменная медицинская одежда сотрудников клиники. Два цветовых варианта:
+          бежевый с коричневым логотипом и синий с белым логотипом.
+          Логотип размещается на левой стороне груди.
         </p>
       </div>
 
-      {/* Описание костюма */}
+      {/* Фотографии вариантов */}
       <Section
-        title="Описание комплекта"
-        subtitle="Стандартная форма для всех сотрудников клиники."
+        title="Варианты формы"
+        subtitle="Фотографии реальной формы сотрудников с логотипом клиники."
       >
-        <div
-          className="rounded-xl border p-6"
-          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
-        >
-          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
-            <div>
-              <p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
-                Состав формы
-              </p>
-              <ul className="space-y-2">
-                {["Медицинский костюм (куртка + брюки)", "Цвет: бежевый (Oracal 081M)", "Материал: медицинская ткань", "Логотип вышит или нанесён термопечатью"].map(item => (
-                  <li key={item} className="flex items-start gap-2 text-sm" style={{ color: "var(--bb-text-muted)" }}>
-                    <span style={{ color: "var(--brand-053m)" }}>•</span> {item}
-                  </li>
-                ))}
-              </ul>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+          {/* Бежевый вариант */}
+          <div>
+            <div
+              className="rounded-xl overflow-hidden border mb-4"
+              style={{ borderColor: "var(--bb-border)" }}
+            >
+              <Image
+                src="/offline/uniform/uniform-1.jpeg"
+                alt="Бежевая форма сотрудника клиники с коричневым логотипом"
+                width={742}
+                height={990}
+                className="w-full object-cover"
+                style={{ maxHeight: 480, objectPosition: "top" }}
+              />
             </div>
-            <div>
-              <p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
-                Цветовая схема
-              </p>
-              <div className="flex gap-3">
-                <div className="text-center">
-                  <div className="w-12 h-12 rounded-lg border mb-1"
-                    style={{ background: "#c4a882", borderColor: "var(--bb-border)" }} />
-                  <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>081M</p>
-                  <p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>#c4a882</p>
-                </div>
-                <div className="text-center">
-                  <div className="w-12 h-12 rounded-lg border mb-1"
-                    style={{ background: "#5c2e0e", borderColor: "var(--bb-border)" }} />
-                  <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>080M</p>
-                  <p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>#5c2e0e</p>
-                </div>
+            <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+              Бежевый вариант
+            </p>
+            <p className="text-sm mb-3" style={{ color: "var(--bb-text-muted)" }}>
+              Основная форма для медицинского персонала. Логотип — тёмно-коричневый.
+            </p>
+            <div className="flex gap-2">
+              <div className="flex items-center gap-1.5">
+                <div
+                  className="w-4 h-4 rounded"
+                  style={{ background: "#c4a882", border: "1px solid #e5e7eb" }}
+                />
+                <span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
+                  Oracal 081M
+                </span>
+              </div>
+              <span style={{ color: "var(--bb-text-muted)" }}>·</span>
+              <div className="flex items-center gap-1.5">
+                <div
+                  className="w-4 h-4 rounded"
+                  style={{ background: "#5c2e0e", border: "1px solid #e5e7eb" }}
+                />
+                <span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
+                  Логотип 080M
+                </span>
               </div>
             </div>
           </div>
-        </div>
-      </Section>
 
-      {/* Логотип на форме */}
-      <Section
-        title="Размещение логотипа"
-        subtitle="Логотип располагается на левой стороне груди. Размер зависит от размера одежды."
-      >
-        {/* Визуализация размещения */}
-        <div
-          className="rounded-xl border p-8 mb-6 flex flex-col items-center justify-center"
-          style={{ background: "#c4a882", borderColor: "transparent", minHeight: 200 }}
-        >
-          <div className="relative w-64 h-48 flex items-center justify-center">
-            {/* Силуэт куртки (упрощённая схема) */}
-            <div className="absolute inset-0 rounded-xl opacity-20"
-              style={{ border: "2px dashed #5c2e0e" }} />
-            {/* Зона логотипа — левая грудь */}
-            <div className="absolute top-6 left-10 flex flex-col items-center gap-2">
+          {/* Синий вариант */}
+          <div>
+            <div
+              className="rounded-xl overflow-hidden border mb-4"
+              style={{ borderColor: "var(--bb-border)" }}
+            >
               <Image
-                src="/logo/logo-transparent.png"
-                alt="Логотип на форме"
-                width={100}
-                height={36}
-                className="object-contain"
-                style={{ filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)" }}
+                src="/offline/uniform/uniform-2.jpeg"
+                alt="Синяя форма сотрудника клиники с белым логотипом"
+                width={580}
+                height={773}
+                className="w-full object-cover"
+                style={{ maxHeight: 480, objectPosition: "top" }}
               />
-              <div className="border border-dashed rounded px-1"
-                style={{ borderColor: "#5c2e0e50" }}>
-                <p className="text-xs" style={{ color: "#5c2e0e80" }}>← Левая грудь</p>
+            </div>
+            <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+              Синий вариант
+            </p>
+            <p className="text-sm mb-3" style={{ color: "var(--bb-text-muted)" }}>
+              Альтернативный вариант. Логотип — белый инвертированный.
+            </p>
+            <div className="flex gap-2">
+              <div className="flex items-center gap-1.5">
+                <div
+                  className="w-4 h-4 rounded"
+                  style={{ background: "#4a90c4", border: "1px solid #e5e7eb" }}
+                />
+                <span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
+                  Синий медицинский
+                </span>
+              </div>
+              <span style={{ color: "var(--bb-text-muted)" }}>·</span>
+              <div className="flex items-center gap-1.5">
+                <div
+                  className="w-4 h-4 rounded"
+                  style={{ background: "#ffffff", border: "1px solid #e5e7eb" }}
+                />
+                <span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
+                  Логотип белый
+                </span>
               </div>
             </div>
           </div>
-          <p className="mt-4 text-sm" style={{ color: "rgba(92,46,14,0.7)" }}>
-            Схема размещения логотипа (превью)
-          </p>
         </div>
+      </Section>
 
-        {/* Таблица размеров */}
+      {/* Размеры логотипа */}
+      <Section
+        title="Размеры логотипа для размещения на форме сотрудников"
+        subtitle="Логотип располагается на левой стороне груди. Размер зависит от размера одежды."
+      >
         <div
           className="overflow-hidden rounded-xl border"
           style={{ borderColor: "var(--bb-border)" }}
@@ -178,7 +199,7 @@ export default function UniformPage() {
           {[
             { ok: true,  text: "Носить комплект в полном составе" },
             { ok: true,  text: "Поддерживать чистоту и опрятность формы" },
-            { ok: true,  text: "Логотип — только тёмно-коричневый на бежевом" },
+            { ok: true,  text: "Логотип только в утверждённых цветовых вариантах" },
             { ok: false, text: "Носить форму без логотипа" },
             { ok: false, text: "Изменять цвет или материал формы" },
             { ok: false, text: "Добавлять сторонние нашивки и знаки" },