feat(sprint-2): цвета, типографика, оффлайн элементы
Страницы фундамента: - /foundation/colors — палитра 7 цветов, HEX/RGB/HSL/CSS-var с копированием, WCAG-контраст 7 пар, экспорт JSON-токенов - /foundation/typography — DINPro (оффлайн) + Fira Sans (веб), шкалы, таблица применения, живой пример Оффлайн элементы (5 страниц): - /offline/uniform — схема формы, таблица размеров логотипа - /offline/badges — макеты бейджей 70×30 мм (светлый/тёмный) - /offline/navigation — 4 шаблона табличек, цвета Oracal - /offline/transport — CSS-макет трамвая, трёхполосная схема - /offline/print — макеты визитки и листовки А5, Telegram-бот Sidebar: убраны «скоро» для Цветов, Типографики, всех Оффлайн Версия: Sprint 2 · v0.2.0 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
@@ -0,0 +1,273 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Бейджи | Брендбук О!Клиника",
|
||||
};
|
||||
|
||||
function Section({
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="mb-12">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</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">
|
||||
|
||||
{/* Заголовок */}
|
||||
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-2"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Оффлайн элементы → 6.2
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Бейджи сотрудников
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Именные бейджи для идентификации сотрудников клиники. Размер 70×30 мм.
|
||||
Два цветовых варианта в зависимости от должности.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Размеры и технические требования */}
|
||||
<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: "Булавка / клипса" },
|
||||
].map(({ label, value }) => (
|
||||
<div
|
||||
key={label}
|
||||
className="rounded-xl border p-4 text-center"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
<p className="font-mono text-lg font-semibold" style={{ color: "var(--brand-073m)" }}>
|
||||
{value}
|
||||
</p>
|
||||
<p className="text-xs mt-1" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</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."
|
||||
>
|
||||
<div
|
||||
className="overflow-hidden rounded-xl border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
{["Элемент", "Содержание", "Шрифт / Размер", "Позиция"].map(h => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-5 py-3 font-medium"
|
||||
style={{ color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["Логотип", "Логотип клиники", "PNG / SVG", "Левая часть, по центру по высоте"],
|
||||
["Разделитель", "Вертикальная линия", "1px, 40% прозрачность", "Между логотипом и текстом"],
|
||||
["ФИО", "Фамилия И.О.", "DINPro Bold 13px", "Правая часть, верхняя строка"],
|
||||
["Должность", "Полное название должности", "DINPro Regular 10px", "Правая часть, нижняя строка"],
|
||||
].map(([el, content, font, pos]) => (
|
||||
<tr
|
||||
key={el}
|
||||
className="border-t"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<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>
|
||||
</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)" }}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded-lg shrink-0 mt-0.5"
|
||||
style={{ background: item.color }}
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
{item.variant}
|
||||
</p>
|
||||
<p className="text-xs mb-1.5" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{item.usage}
|
||||
</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>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Внутренняя навигация | Брендбук О!Клиника",
|
||||
};
|
||||
|
||||
function Section({
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="mb-12">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* Макет настенной таблички */
|
||||
function SignMockup({
|
||||
type,
|
||||
text,
|
||||
subtext,
|
||||
bgColor,
|
||||
textColor,
|
||||
accentColor,
|
||||
size,
|
||||
}: {
|
||||
type: string;
|
||||
text: string;
|
||||
subtext?: string;
|
||||
bgColor: string;
|
||||
textColor: string;
|
||||
accentColor: string;
|
||||
size: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col items-start gap-2">
|
||||
<div
|
||||
className="rounded-lg px-6 py-4 flex items-center gap-4"
|
||||
style={{
|
||||
background: bgColor,
|
||||
width: 260,
|
||||
border: bgColor === "#ffffff" ? "1px solid #e5e7eb" : "none",
|
||||
}}
|
||||
>
|
||||
{/* Цветовая полоса */}
|
||||
<div
|
||||
className="w-1.5 self-stretch rounded-full"
|
||||
style={{ background: accentColor, minHeight: 32 }}
|
||||
/>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "'DINPro', Arial, sans-serif",
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
color: textColor,
|
||||
lineHeight: 1.3,
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
{subtext && (
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "'DINPro', Arial, sans-serif",
|
||||
fontSize: 10,
|
||||
color: textColor,
|
||||
opacity: 0.65,
|
||||
marginTop: 3,
|
||||
}}
|
||||
>
|
||||
{subtext}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pl-1">
|
||||
<p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>{type}</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{size}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NavigationPage() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
|
||||
{/* Заголовок */}
|
||||
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-2"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Оффлайн элементы → 6.3
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Внутренняя навигация
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Система навигационных табличек и указателей внутри клиники.
|
||||
Единый стиль с фирменными цветами и шрифтом DINPro.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Шаблоны табличек */}
|
||||
<Section
|
||||
title="Типы табличек"
|
||||
subtitle="Четыре базовых шаблона для разных зон клиники."
|
||||
>
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<SignMockup
|
||||
type="Кабинет врача"
|
||||
text="Кабинет № 101"
|
||||
subtext="Оториноларингология"
|
||||
bgColor="#ffffff"
|
||||
textColor="#1b4c72"
|
||||
accentColor="#7ecfca"
|
||||
size="200 × 80 мм"
|
||||
/>
|
||||
<SignMockup
|
||||
type="Направляющий указатель"
|
||||
text="→ Регистратура"
|
||||
subtext="2-й этаж"
|
||||
bgColor="#5b7b87"
|
||||
textColor="#ffffff"
|
||||
accentColor="#7ecfca"
|
||||
size="300 × 80 мм"
|
||||
/>
|
||||
<SignMockup
|
||||
type="Зона ожидания"
|
||||
text="Зона ожидания"
|
||||
subtext="Пожалуйста, соблюдайте тишину"
|
||||
bgColor="#e0f5f4"
|
||||
textColor="#1b4c72"
|
||||
accentColor="#5bb5ad"
|
||||
size="250 × 80 мм"
|
||||
/>
|
||||
<SignMockup
|
||||
type="Запрещающий"
|
||||
text="Вход только для персонала"
|
||||
bgColor="#1b4c72"
|
||||
textColor="#ffffff"
|
||||
accentColor="#c4a882"
|
||||
size="250 × 60 мм"
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Технические требования */}
|
||||
<Section
|
||||
title="Технические требования"
|
||||
subtitle="Материалы и цвета для производства."
|
||||
>
|
||||
<div
|
||||
className="overflow-hidden rounded-xl border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
{["Параметр", "Значение"].map(h => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-5 py-3 font-medium"
|
||||
style={{ color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["Основной материал", "ПВХ 3мм / ПС зеркальный / акрил"],
|
||||
["Покрытие фона", "Oracal плёнка (053M / 073M / 050M)"],
|
||||
["Шрифт", "DINPro Bold / Regular (DXF для фрезеровки)"],
|
||||
["Крепление", "Двусторонний скотч / шурупы с дистанционным держателем"],
|
||||
["Толщина букв (фрезеровка)", "3 мм от основы"],
|
||||
["Минимальный размер текста", "10 мм по высоте"],
|
||||
].map(([param, value]) => (
|
||||
<tr
|
||||
key={param}
|
||||
className="border-t"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>
|
||||
{param}
|
||||
</td>
|
||||
<td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{value}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Цвета Oracal */}
|
||||
<Section
|
||||
title="Цвета Oracal для навигации"
|
||||
subtitle="Допустимые цвета плёнки по коду Oracal."
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
{[
|
||||
{ code: "053M", hex: "#7ecfca", name: "Акцент / полоса" },
|
||||
{ code: "073M", hex: "#5b7b87", name: "Фон указателей" },
|
||||
{ code: "050M", hex: "#1b4c72", name: "Фон запрещающих" },
|
||||
{ code: "081M", hex: "#c4a882", name: "Акцент на тёмном" },
|
||||
].map(c => (
|
||||
<div
|
||||
key={c.code}
|
||||
className="rounded-xl overflow-hidden border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<div className="h-16" style={{ background: c.hex }} />
|
||||
<div className="p-3">
|
||||
<p className="font-medium text-xs" style={{ color: "var(--bb-text)" }}>
|
||||
Oracal {c.code}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{c.name}
|
||||
</p>
|
||||
<p className="font-mono text-xs mt-1" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{c.hex}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,331 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Печатные материалы | Брендбук О!Клиника",
|
||||
};
|
||||
|
||||
function Section({
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="mb-12">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* Макет визитки */
|
||||
function BusinessCardMockup({ side }: { side: "front" | "back" }) {
|
||||
/* 90×50 мм → пропорция 9:5. Отображаем 288×160px */
|
||||
if (side === "front") {
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl overflow-hidden shadow-md"
|
||||
style={{ width: 288, height: 160, background: "#5b7b87", flexShrink: 0 }}
|
||||
>
|
||||
{/* Верхняя бирюзовая полоса */}
|
||||
<div style={{ height: 6, background: "#7ecfca" }} />
|
||||
|
||||
<div className="flex h-full">
|
||||
{/* Левая колонка с логотипом */}
|
||||
<div
|
||||
className="flex items-center justify-center px-6"
|
||||
style={{ width: 110, borderRight: "1px solid rgba(255,255,255,0.15)" }}
|
||||
>
|
||||
<Image
|
||||
src="/logo/logo-transparent.png"
|
||||
alt="Логотип"
|
||||
width={80}
|
||||
height={28}
|
||||
className="object-contain"
|
||||
style={{ filter: "brightness(0) invert(1)" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Правая колонка с данными */}
|
||||
<div className="flex flex-col justify-center px-5 pb-2 gap-1">
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "'DINPro', Arial, sans-serif",
|
||||
fontSize: 12,
|
||||
fontWeight: 700,
|
||||
color: "#ffffff",
|
||||
}}
|
||||
>
|
||||
Иванова Анна Викторовна
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "'DINPro', Arial, sans-serif",
|
||||
fontSize: 9,
|
||||
color: "rgba(255,255,255,0.7)",
|
||||
}}
|
||||
>
|
||||
Врач-оториноларинголог
|
||||
</p>
|
||||
<div className="mt-2 space-y-0.5">
|
||||
{["+7 (495) 000-00-00", "oclinica.ru"].map(line => (
|
||||
<p
|
||||
key={line}
|
||||
style={{
|
||||
fontFamily: "'DINPro', Arial, sans-serif",
|
||||
fontSize: 8,
|
||||
color: "rgba(255,255,255,0.6)",
|
||||
}}
|
||||
>
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl overflow-hidden shadow-md flex items-center justify-center"
|
||||
style={{ width: 288, height: 160, background: "#c4a882", flexShrink: 0 }}
|
||||
>
|
||||
<Image
|
||||
src="/logo/logo-transparent.png"
|
||||
alt="Логотип на обороте"
|
||||
width={140}
|
||||
height={50}
|
||||
className="object-contain"
|
||||
style={{
|
||||
filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* Макет листовки */
|
||||
function LeafletMockup() {
|
||||
/* А5 = 148×210 мм → пропорция ≈ 1:1.42. Отображаем 180×256px */
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl overflow-hidden shadow-md"
|
||||
style={{ width: 180, height: 256, background: "#ffffff", border: "1px solid #e5e7eb", flexShrink: 0 }}
|
||||
>
|
||||
{/* Шапка */}
|
||||
<div
|
||||
className="px-4 pt-4 pb-3 flex items-end justify-between"
|
||||
style={{ background: "#5b7b87" }}
|
||||
>
|
||||
<Image
|
||||
src="/logo/logo-transparent.png"
|
||||
alt="Логотип"
|
||||
width={90}
|
||||
height={32}
|
||||
className="object-contain"
|
||||
style={{ filter: "brightness(0) invert(1)" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Тело */}
|
||||
<div className="px-4 pt-3">
|
||||
{/* Плейсхолдер фото */}
|
||||
<div
|
||||
className="w-full rounded mb-3"
|
||||
style={{ height: 70, background: "#e0f5f4" }}
|
||||
/>
|
||||
{/* Заголовок */}
|
||||
<div
|
||||
className="h-3 rounded mb-1.5"
|
||||
style={{ background: "#1b4c72", width: "80%" }}
|
||||
/>
|
||||
<div
|
||||
className="h-3 rounded mb-3"
|
||||
style={{ background: "#1b4c72", width: "60%" }}
|
||||
/>
|
||||
{/* Текст-заглушка */}
|
||||
{[100, 90, 95, 80].map((w, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-1.5 rounded mb-1"
|
||||
style={{ background: "#e5e7eb", width: `${w}%` }}
|
||||
/>
|
||||
))}
|
||||
{/* CTA-кнопка */}
|
||||
<div
|
||||
className="mt-4 rounded py-2 text-center"
|
||||
style={{ background: "#7ecfca" }}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "'DINPro', Arial, sans-serif",
|
||||
fontSize: 9,
|
||||
fontWeight: 700,
|
||||
color: "#ffffff",
|
||||
}}
|
||||
>
|
||||
ЗАПИСАТЬСЯ НА ПРИЁМ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PrintPage() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
|
||||
{/* Заголовок */}
|
||||
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-2"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Оффлайн элементы → 6.5
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Печатные материалы
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Листовки, визитки и digital-каналы клиники. Все материалы следуют
|
||||
единому фирменному стилю с использованием шрифта DINPro и цветов Oracal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Визитки */}
|
||||
<Section
|
||||
title="Визитки"
|
||||
subtitle="Стандарт 90×50 мм. Двусторонняя печать. Изображены в масштабе."
|
||||
>
|
||||
<div className="flex flex-wrap gap-6 items-start">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<BusinessCardMockup side="front" />
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Лицевая сторона</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<BusinessCardMockup side="back" />
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Оборотная сторона</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-6 overflow-hidden rounded-xl border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
{["Элемент", "Содержание"].map(h => (
|
||||
<th key={h} className="text-left px-5 py-3 font-medium"
|
||||
style={{ color: "var(--bb-text-muted)" }}>{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["Лицевая — логотип", "Белый инвертированный на тёмно-серо-голубом фоне"],
|
||||
["Лицевая — ФИО", "DINPro Bold, 10pt, белый"],
|
||||
["Лицевая — должность", "DINPro Regular, 8pt, белый 70%"],
|
||||
["Лицевая — контакты", "DINPro Regular, 7pt, белый 60%"],
|
||||
["Оборотная", "Логотип тёмно-коричневый на бежевом фоне (081M)"],
|
||||
["Размер", "90 × 50 мм, 4+4 офсет или цифровая печать"],
|
||||
].map(([el, content]) => (
|
||||
<tr key={el} className="border-t" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<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>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Листовки */}
|
||||
<Section
|
||||
title="Листовки"
|
||||
subtitle="Формат А5 (148×210 мм). Шаблон для акций и информационных материалов."
|
||||
>
|
||||
<div className="flex gap-8 items-start">
|
||||
<LeafletMockup />
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Структура листовки
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ zone: "Шапка", desc: "Логотип белый на тёмно-серо-голубом (073M)" },
|
||||
{ zone: "Фото", desc: "Фото врача или процедуры, 70% ширины" },
|
||||
{ zone: "Заголовок", desc: "DINPro Bold, тёмно-синий (050M), 18–22pt" },
|
||||
{ zone: "Текст", desc: "DINPro Regular, 9–10pt, серый #374151" },
|
||||
{ zone: "CTA-кнопка", desc: "Основной бирюзовый (053M), DINPro Bold белый" },
|
||||
].map(({ zone, desc }) => (
|
||||
<div key={zone} className="flex gap-3">
|
||||
<span
|
||||
className="shrink-0 text-xs font-semibold px-2 py-0.5 rounded mt-0.5"
|
||||
style={{ background: "#e0f5f4", color: "var(--brand-073m)" }}
|
||||
>
|
||||
{zone}
|
||||
</span>
|
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>{desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Telegram-бот */}
|
||||
<Section
|
||||
title="Telegram-бот"
|
||||
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-4 sm:grid-cols-3">
|
||||
{[
|
||||
{ icon: "🤖", title: "Запись на приём", desc: "Выбор врача, даты и времени через бот" },
|
||||
{ icon: "📋", title: "Результаты анализов", desc: "Уведомления и просмотр результатов" },
|
||||
{ icon: "💬", title: "Напоминания", desc: "Напоминание о предстоящем визите" },
|
||||
].map(({ icon, title, desc }) => (
|
||||
<div key={title} className="flex gap-3">
|
||||
<span className="text-2xl shrink-0">{icon}</span>
|
||||
<div>
|
||||
<p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
|
||||
{title}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className="mt-4 pt-4 border-t text-xs"
|
||||
style={{ borderColor: "var(--bb-border)", color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
В Telegram-боте используется системный шрифт Telegram. Логотип и цвета бренда
|
||||
применяются в аватаре, приветственном изображении и кнопках меню.
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Брендирование транспорта | Брендбук О!Клиника",
|
||||
};
|
||||
|
||||
function Section({
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="mb-12">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* Макет трамвая (упрощённый силуэт) */
|
||||
function TramMockup() {
|
||||
return (
|
||||
<div
|
||||
className="relative rounded-2xl overflow-hidden"
|
||||
style={{
|
||||
background: "#f8f9fa",
|
||||
border: "1px solid var(--bb-border)",
|
||||
padding: "32px 24px",
|
||||
}}
|
||||
>
|
||||
{/* Кузов трамвая */}
|
||||
<div
|
||||
className="relative mx-auto rounded-xl overflow-hidden"
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: 560,
|
||||
height: 160,
|
||||
background: "#ffffff",
|
||||
border: "2px solid #e5e7eb",
|
||||
}}
|
||||
>
|
||||
{/* Верхняя полоса — бирюзовая */}
|
||||
<div
|
||||
className="absolute top-0 left-0 right-0"
|
||||
style={{ height: 28, background: "#7ecfca" }}
|
||||
/>
|
||||
|
||||
{/* Основная бежевая полоса */}
|
||||
<div
|
||||
className="absolute left-0 right-0"
|
||||
style={{ top: 28, height: 76, background: "#c4a882" }}
|
||||
/>
|
||||
|
||||
{/* Нижняя полоса — серо-голубая */}
|
||||
<div
|
||||
className="absolute left-0 right-0"
|
||||
style={{ top: 104, height: 56, background: "#5b7b87" }}
|
||||
/>
|
||||
|
||||
{/* Логотип по центру бежевой полосы */}
|
||||
<div
|
||||
className="absolute flex items-center justify-center"
|
||||
style={{ top: 28, left: 0, right: 0, height: 76 }}
|
||||
>
|
||||
<Image
|
||||
src="/logo/logo-transparent.png"
|
||||
alt="Логотип на трамвае"
|
||||
width={180}
|
||||
height={64}
|
||||
className="object-contain"
|
||||
style={{
|
||||
filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Окна (декоративные) */}
|
||||
{[80, 180, 280, 380, 460].map(x => (
|
||||
<div
|
||||
key={x}
|
||||
className="absolute rounded"
|
||||
style={{
|
||||
left: x,
|
||||
top: 40,
|
||||
width: 50,
|
||||
height: 44,
|
||||
background: "rgba(255,255,255,0.6)",
|
||||
border: "1px solid rgba(255,255,255,0.8)",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Колёса (декоративные) */}
|
||||
{[60, 200, 360, 500].map(x => (
|
||||
<div
|
||||
key={x}
|
||||
className="absolute rounded-full"
|
||||
style={{
|
||||
left: x,
|
||||
bottom: -8,
|
||||
width: 24,
|
||||
height: 24,
|
||||
background: "#374151",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-center text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Схема цветового решения (превью, не финальный макет)
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TransportPage() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
|
||||
{/* Заголовок */}
|
||||
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-2"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Оффлайн элементы → 6.4
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Брендирование транспорта
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Схема нанесения фирменной символики на трамвай и другой общественный транспорт.
|
||||
Трёхполосная структура с логотипом клиники по центру.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Макет */}
|
||||
<Section
|
||||
title="Макет трамвая"
|
||||
subtitle="Трёхполосная схема брендирования: верхняя бирюзовая, центральная бежевая с логотипом, нижняя серо-голубая."
|
||||
>
|
||||
<TramMockup />
|
||||
</Section>
|
||||
|
||||
{/* Цветовая схема */}
|
||||
<Section
|
||||
title="Цветовая схема"
|
||||
subtitle="Порядок и размеры полос."
|
||||
>
|
||||
<div
|
||||
className="overflow-hidden rounded-xl border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
{["Зона", "Цвет", "Oracal", "Высота", "Содержимое"].map(h => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-4 py-3 font-medium"
|
||||
style={{ color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["Верхняя полоса", "#7ecfca", "053M", "~17% высоты", "Декоративная"],
|
||||
["Центральная полоса", "#c4a882", "081M", "~48% высоты", "Логотип клиники (по центру)"],
|
||||
["Нижняя полоса", "#5b7b87", "073M", "~35% высоты", "Декоративная / контактная информация"],
|
||||
].map(([zone, hex, oracal, height, content]) => (
|
||||
<tr
|
||||
key={zone}
|
||||
className="border-t"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<td className="px-4 py-3 font-medium" style={{ color: "var(--bb-text)" }}>
|
||||
{zone}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-5 h-5 rounded"
|
||||
style={{ background: hex as string, border: "1px solid #e5e7eb" }}
|
||||
/>
|
||||
<span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{hex}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{oracal}
|
||||
</td>
|
||||
<td className="px-4 py-3" style={{ color: "var(--bb-text-muted)" }}>{height}</td>
|
||||
<td className="px-4 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Логотип на транспорте */}
|
||||
<Section
|
||||
title="Размещение логотипа"
|
||||
subtitle="На центральной полосе, горизонтально по центру борта."
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{[
|
||||
{ label: "Минимальная длина логотипа", value: "600 мм" },
|
||||
{ label: "Отступ от краёв борта", value: "≥ 400 мм" },
|
||||
{ label: "Вертикальное выравнивание", value: "По центру полосы" },
|
||||
{ label: "Цвет логотипа", value: "Тёмно-коричневый (080M)" },
|
||||
].map(({ label, value }) => (
|
||||
<div
|
||||
key={label}
|
||||
className="flex items-center gap-4 p-4 rounded-xl border"
|
||||
style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
|
||||
>
|
||||
<div
|
||||
className="w-2 h-2 rounded-full shrink-0"
|
||||
style={{ background: "var(--brand-053m)" }}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{label}</p>
|
||||
<p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<div
|
||||
className="rounded-xl border p-4 text-sm flex items-start gap-3"
|
||||
style={{ borderColor: "#fde68a", background: "#fffbeb", color: "#92400e" }}
|
||||
>
|
||||
<span className="text-base shrink-0">⚠️</span>
|
||||
<p>
|
||||
Финальные макеты для производства предоставляются дизайнером в форматах AI / PDF с
|
||||
реальными размерами конкретного транспортного средства.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Форма сотрудников | Брендбук О!Клиника",
|
||||
};
|
||||
|
||||
function Section({
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="mb-12">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function UniformPage() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-8 py-10">
|
||||
|
||||
{/* Заголовок */}
|
||||
<div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-widest mb-2"
|
||||
style={{ color: "var(--brand-053m)" }}
|
||||
>
|
||||
Оффлайн элементы → 6.1
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
|
||||
Форма сотрудников
|
||||
</h1>
|
||||
<p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
|
||||
Фирменная медицинская одежда сотрудников клиники. Бежевый костюм
|
||||
с логотипом клиники на левой стороне груди.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Описание костюма */}
|
||||
<Section
|
||||
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>
|
||||
<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>
|
||||
</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">
|
||||
<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)" }}
|
||||
/>
|
||||
<div className="border border-dashed rounded px-1"
|
||||
style={{ borderColor: "#5c2e0e50" }}>
|
||||
<p className="text-xs" style={{ color: "#5c2e0e80" }}>← Левая грудь</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-sm" style={{ color: "rgba(92,46,14,0.7)" }}>
|
||||
Схема размещения логотипа (превью)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Таблица размеров */}
|
||||
<div
|
||||
className="overflow-hidden rounded-xl border"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ background: "var(--bb-sidebar-bg)" }}>
|
||||
{["Размер одежды", "Длина логотипа", "Высота логотипа", "Расположение"].map(h => (
|
||||
<th
|
||||
key={h}
|
||||
className="text-left px-5 py-3 font-medium"
|
||||
style={{ color: "var(--bb-text-muted)" }}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
["До 46 р. включительно", "70 мм", "25,5 мм", "Левая сторона груди"],
|
||||
["От 48 р.", "90 мм", "32,8 мм", "Левая сторона груди"],
|
||||
].map(([size, w, h, pos]) => (
|
||||
<tr
|
||||
key={size}
|
||||
className="border-t"
|
||||
style={{ borderColor: "var(--bb-border)" }}
|
||||
>
|
||||
<td className="px-5 py-3" style={{ color: "var(--bb-text)" }}>{size}</td>
|
||||
<td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text)" }}>{w}</td>
|
||||
<td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text)" }}>{h}</td>
|
||||
<td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{pos}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Правила */}
|
||||
<Section title="Правила использования">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
{[
|
||||
{ ok: true, text: "Носить комплект в полном составе" },
|
||||
{ ok: true, text: "Поддерживать чистоту и опрятность формы" },
|
||||
{ ok: true, text: "Логотип — только тёмно-коричневый на бежевом" },
|
||||
{ ok: false, text: "Носить форму без логотипа" },
|
||||
{ ok: false, text: "Изменять цвет или материал формы" },
|
||||
{ ok: false, text: "Добавлять сторонние нашивки и знаки" },
|
||||
].map(item => (
|
||||
<div
|
||||
key={item.text}
|
||||
className="flex items-start gap-3 p-4 rounded-lg border"
|
||||
style={{
|
||||
borderColor: item.ok ? "#a7f3d0" : "#fecaca",
|
||||
background: item.ok ? "#f0fdf4" : "#fff5f5",
|
||||
}}
|
||||
>
|
||||
<span style={{ color: item.ok ? "#16a34a" : "#ef4444" }}>
|
||||
{item.ok ? "✓" : "✕"}
|
||||
</span>
|
||||
<p className="text-sm" style={{ color: item.ok ? "#14532d" : "#7f1d1d" }}>
|
||||
{item.text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user