Browse Source
Страницы фундамента: - /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>sprint/2
AR 15 M4
1 week ago
9 changed files with 2130 additions and 24 deletions
@ -0,0 +1,349 @@
|
||||
import type { Metadata } from "next"; |
||||
|
||||
export const metadata: Metadata = { |
||||
title: "Типографика | Брендбук О!Клиника", |
||||
}; |
||||
|
||||
/* ─── Шкала типографики ────────────────────────────────────────────── */ |
||||
const DIN_SCALE = [ |
||||
{ token: "h1", size: "40px / 2.5rem", weight: "700", lh: "1.2", sample: "Клиника ухо, горло, нос" }, |
||||
{ token: "h2", size: "32px / 2rem", weight: "700", lh: "1.25", sample: "Наши специалисты" }, |
||||
{ token: "h3", size: "24px / 1.5rem", weight: "700", lh: "1.3", sample: "Запись на приём" }, |
||||
{ token: "h4", size: "20px / 1.25rem",weight: "700", lh: "1.35", sample: "Расписание врачей" }, |
||||
{ token: "h5", size: "16px / 1rem", weight: "700", lh: "1.4", sample: "Услуги и цены" }, |
||||
{ token: "h6", size: "14px / 0.875rem",weight:"700", lh: "1.4", sample: "Контакты клиники" }, |
||||
]; |
||||
|
||||
const FIRA_SCALE = [ |
||||
{ token: "h1", size: "40px / 2.5rem", weight: "600", lh: "1.2", sample: "Клиника ухо, горло, нос" }, |
||||
{ token: "h2", size: "32px / 2rem", weight: "600", lh: "1.25", sample: "Наши специалисты" }, |
||||
{ token: "h3", size: "24px / 1.5rem", weight: "600", lh: "1.3", sample: "Запись на приём" }, |
||||
{ token: "h4", size: "20px / 1.25rem", weight: "500", lh: "1.35", sample: "Расписание врачей" }, |
||||
{ token: "h5", size: "16px / 1rem", weight: "500", lh: "1.4", sample: "Услуги и цены" }, |
||||
{ token: "h6", size: "14px / 0.875rem",weight: "500", lh: "1.4", sample: "Контакты клиники" }, |
||||
{ token: "body", size: "16px / 1rem", weight: "400", lh: "1.6", sample: "ЛОР-клиника предоставляет полный спектр услуг по диагностике и лечению заболеваний уха, горла и носа." }, |
||||
{ token: "body-sm", size: "14px / 0.875rem",weight: "400", lh: "1.6", sample: "Запись по телефону или через форму на сайте. Работаем без выходных." }, |
||||
{ token: "caption", size: "12px / 0.75rem", weight: "400", lh: "1.5", sample: "Лицензия № ЛО-77-01-018234 от 12.01.2022" }, |
||||
{ token: "label", size: "12px / 0.75rem", weight: "500", lh: "1.4", sample: "СПЕЦИАЛИЗАЦИЯ ВРАЧА" }, |
||||
{ token: "overline", size: "10px / 0.625rem",weight: "600", lh: "1.4", sample: "ФУНДАМЕНТ → 1.4" }, |
||||
]; |
||||
|
||||
/* ─── Компоненты ───────────────────────────────────────────────────── */ |
||||
function Section({ |
||||
title, |
||||
subtitle, |
||||
children, |
||||
}: { |
||||
title: string; |
||||
subtitle?: string; |
||||
children: React.ReactNode; |
||||
}) { |
||||
return ( |
||||
<section className="mb-14"> |
||||
<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 UsageBadge({ label, color }: { label: string; color: string }) { |
||||
return ( |
||||
<span |
||||
className="inline-block px-2 py-0.5 rounded text-xs font-medium" |
||||
style={{ background: color === "teal" ? "#e0f5f4" : "#fef3c7", color: color === "teal" ? "var(--brand-073m)" : "#92400e" }} |
||||
> |
||||
{label} |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
function TypeRow({ |
||||
token, |
||||
size, |
||||
weight, |
||||
lh, |
||||
sample, |
||||
fontFamily, |
||||
}: { |
||||
token: string; |
||||
size: string; |
||||
weight: string; |
||||
lh: string; |
||||
sample: string; |
||||
fontFamily: string; |
||||
}) { |
||||
const [sizeVal] = size.split(" / "); |
||||
const pxSize = parseInt(sizeVal); |
||||
|
||||
return ( |
||||
<div |
||||
className="border-t py-4 grid gap-4" |
||||
style={{ |
||||
borderColor: "var(--bb-border)", |
||||
gridTemplateColumns: "80px 1fr 140px", |
||||
alignItems: "start", |
||||
}} |
||||
> |
||||
{/* Токен */} |
||||
<div className="pt-1"> |
||||
<span |
||||
className="font-mono text-xs px-2 py-0.5 rounded" |
||||
style={{ background: "#f3f4f6", color: "#374151" }} |
||||
> |
||||
{token} |
||||
</span> |
||||
</div> |
||||
|
||||
{/* Образец */} |
||||
<div |
||||
style={{ |
||||
fontFamily, |
||||
fontSize: `${Math.min(pxSize, 28)}px`, |
||||
fontWeight: weight, |
||||
lineHeight: lh, |
||||
color: "var(--bb-text)", |
||||
wordBreak: "break-word", |
||||
}} |
||||
> |
||||
{sample} |
||||
</div> |
||||
|
||||
{/* Метаданные */} |
||||
<div className="pt-1 space-y-1 text-right"> |
||||
<p className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}> |
||||
{size} |
||||
</p> |
||||
<p className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}> |
||||
w{weight} · lh{lh} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
/* ─── Страница ─────────────────────────────────────────────────────── */ |
||||
export default function TypographyPage() { |
||||
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)" }} |
||||
> |
||||
Фундамент → 1.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 className="mb-12"> |
||||
<h2 className="text-xl font-semibold mb-6" style={{ color: "var(--bb-text)" }}> |
||||
Шрифты бренда |
||||
</h2> |
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2"> |
||||
{/* DINPro */} |
||||
<div |
||||
className="rounded-xl border p-6" |
||||
style={{ borderColor: "var(--bb-border)" }} |
||||
> |
||||
<div className="flex items-start justify-between mb-3"> |
||||
<div> |
||||
<p className="font-semibold text-base" style={{ color: "var(--bb-text)" }}> |
||||
DINPro |
||||
</p> |
||||
<p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}> |
||||
Бренд-шрифт · не Google Fonts |
||||
</p> |
||||
</div> |
||||
<UsageBadge label="Оффлайн · Бренд" color="yellow" /> |
||||
</div> |
||||
<div |
||||
className="text-4xl mb-4 font-bold" |
||||
style={{ fontFamily: "'DINPro', Arial, sans-serif", color: "var(--bb-text)" }} |
||||
> |
||||
Aa Бб Вв |
||||
</div> |
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}> |
||||
Применяется на: форме сотрудников, бейджах, вывесках, транспорте, |
||||
полиграфии. Лицензионный шрифт — передаётся дизайнером. |
||||
</p> |
||||
<p className="text-xs mt-3 font-mono px-2 py-1 rounded inline-block" |
||||
style={{ background: "#f3f4f6", color: "#374151" }}> |
||||
--font-brand |
||||
</p> |
||||
</div> |
||||
|
||||
{/* Fira Sans */} |
||||
<div |
||||
className="rounded-xl border p-6" |
||||
style={{ borderColor: "var(--bb-border)" }} |
||||
> |
||||
<div className="flex items-start justify-between mb-3"> |
||||
<div> |
||||
<p className="font-semibold text-base" style={{ color: "var(--bb-text)" }}> |
||||
Fira Sans |
||||
</p> |
||||
<p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}> |
||||
Веб-шрифт · Google Fonts |
||||
</p> |
||||
</div> |
||||
<UsageBadge label="Веб · Цифровой" color="teal" /> |
||||
</div> |
||||
<div |
||||
className="text-4xl mb-4 font-semibold" |
||||
style={{ fontFamily: "var(--font-fira-sans)", color: "var(--bb-text)" }} |
||||
> |
||||
Aa Бб Вв |
||||
</div> |
||||
<p className="text-sm" style={{ color: "var(--bb-text-muted)" }}> |
||||
Применяется на: сайте oclinica.ru, в цифровом брендбуке, онлайн-материалах. |
||||
Подключён через next/font/google (кириллица + латиница). |
||||
</p> |
||||
<p className="text-xs mt-3 font-mono px-2 py-1 rounded inline-block" |
||||
style={{ background: "#f3f4f6", color: "#374151" }}> |
||||
--font-web |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
|
||||
{/* Таблица применения */} |
||||
<section className="mb-12"> |
||||
<h2 className="text-xl font-semibold mb-4" style={{ color: "var(--bb-text)" }}> |
||||
Правило применения |
||||
</h2> |
||||
<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> |
||||
{[ |
||||
["Сайт, цифровые материалы, брендбук", "Fira Sans"], |
||||
["Форма сотрудников, бейджи", "DINPro"], |
||||
["Вывески, таблички, навигация", "DINPro"], |
||||
["Брендирование транспорта", "DINPro"], |
||||
["Визитки, листовки, полиграфия", "DINPro"], |
||||
["Telegram-бот, пуш-уведомления", "Fira Sans (системный)"], |
||||
].map(([media, font]) => ( |
||||
<tr |
||||
key={media} |
||||
className="border-t" |
||||
style={{ borderColor: "var(--bb-border)" }} |
||||
> |
||||
<td className="px-5 py-3" style={{ color: "var(--bb-text)" }}>{media}</td> |
||||
<td className="px-5 py-3 font-medium" style={{ color: "var(--brand-073m)" }}> |
||||
{font} |
||||
</td> |
||||
</tr> |
||||
))} |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</section> |
||||
|
||||
{/* DINPro Scale */} |
||||
<Section |
||||
title="DINPro — шкала заголовков" |
||||
subtitle="Бренд-шрифт. Используется в оффлайн-носителях. Отображается с системным фоллбэком Arial, если шрифт не установлен." |
||||
> |
||||
<div> |
||||
{DIN_SCALE.map(row => ( |
||||
<TypeRow |
||||
key={row.token} |
||||
{...row} |
||||
fontFamily="'DINPro', 'DIN Pro', Arial, sans-serif" |
||||
/> |
||||
))} |
||||
</div> |
||||
</Section> |
||||
|
||||
{/* Fira Sans Scale */} |
||||
<Section |
||||
title="Fira Sans — полная шкала" |
||||
subtitle="Веб-шрифт. Используется на сайте и в цифровых материалах. Загружается через Google Fonts." |
||||
> |
||||
<div> |
||||
{FIRA_SCALE.map(row => ( |
||||
<TypeRow |
||||
key={row.token} |
||||
{...row} |
||||
fontFamily="var(--font-fira-sans, 'Fira Sans', sans-serif)" |
||||
/> |
||||
))} |
||||
</div> |
||||
</Section> |
||||
|
||||
{/* Живой пример */} |
||||
<Section |
||||
title="Живой пример — блок контента" |
||||
subtitle="Типичная комбинация заголовка и тела текста на сайте." |
||||
> |
||||
<div |
||||
className="rounded-xl border p-8" |
||||
style={{ |
||||
borderColor: "var(--bb-border)", |
||||
background: "var(--bb-sidebar-bg)", |
||||
fontFamily: "var(--font-fira-sans, 'Fira Sans', sans-serif)", |
||||
}} |
||||
> |
||||
<p |
||||
className="text-xs font-semibold uppercase tracking-widest mb-3" |
||||
style={{ color: "var(--brand-053m)", letterSpacing: "0.1em" }} |
||||
> |
||||
Наши специалисты |
||||
</p> |
||||
<h2 |
||||
className="mb-4" |
||||
style={{ fontSize: 28, fontWeight: 600, lineHeight: 1.3, color: "var(--bb-text)" }} |
||||
> |
||||
Запись к ЛОР-врачу<br />без очереди и ожидания |
||||
</h2> |
||||
<p |
||||
className="mb-4 max-w-xl" |
||||
style={{ fontSize: 16, fontWeight: 400, lineHeight: 1.6, color: "var(--bb-text-muted)" }} |
||||
> |
||||
В нашей клинике работают специалисты высшей категории с опытом от 15 лет. |
||||
Диагностика и лечение заболеваний уха, горла, носа и смежных органов. |
||||
</p> |
||||
<p |
||||
style={{ fontSize: 12, fontWeight: 400, lineHeight: 1.5, color: "#9ca3af" }} |
||||
> |
||||
Лицензия № ЛО-77-01-018234 · Москва, ул. Примерная, д. 1 |
||||
</p> |
||||
</div> |
||||
</Section> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
@ -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,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> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue