@ -1,10 +1,10 @@
import type { Metadata } from "next" ;
import Image from "next/image" ;
export const metadata : Metadata = {
title : "Логотип | Брендбук О!Клиника" ,
} ;
/* ─── Компонент: плашка правила ─────────────────────────────── */
function RuleTag ( { children } : { children : React.ReactNode } ) {
return (
< span
@ -16,7 +16,6 @@ function RuleTag({ children }: { children: React.ReactNode }) {
) ;
}
/* ─── Компонент: секция брендбука ────────────────────────────── */
function Section ( {
id ,
title ,
@ -31,10 +30,7 @@ function Section({
return (
< section id = { id } className = "mb-12" >
< div className = "mb-6" >
< h2
className = "text-xl font-semibold"
style = { { color : "var(--bb-text)" } }
>
< h2 className = "text-xl font-semibold" style = { { color : "var(--bb-text)" } } >
{ title }
< / h2 >
{ subtitle && (
@ -48,167 +44,52 @@ function Section({
) ;
}
/* ─── SVG-заглушка логотипа (до получения вектора) ─────────── */
function LogoPlaceholder ( {
variant = "main" ,
size = "md" ,
/* ─── Карточка логотипа с реальным изображением ─────────────── */
function LogoCard ( {
src ,
alt ,
label ,
description ,
tag ,
dark = false ,
} : {
variant ? : "main" | "general" | "inverted" | "brown" | "white" ;
size ? : "sm" | "md" | "lg" ;
src : string ;
alt : string ;
label : string ;
description : string ;
tag : string ;
dark? : boolean ;
} ) {
const sizes = { sm : 160 , md : 280 , lg : 380 } ;
const w = sizes [ size ] ;
const bg =
variant === "inverted"
? "var(--brand-073m)"
: variant === "white"
? "var(--brand-053m)"
: "#f8f9fa" ;
const tealColor =
variant === "inverted" || variant === "white"
? "#ffffff"
: "var(--brand-053m)" ;
const darkColor =
variant === "inverted" || variant === "white"
? "#ffffff"
: "var(--brand-073m)" ;
const brownColor =
variant === "brown" ? "var(--brand-080m)" : tealColor ;
return (
< div
className = "flex items-center justify-center rounded-lg border p-6"
style = { {
background : bg ,
borderColor :
variant === "inverted" || variant === "white"
? "transparent"
: "var(--bb-border)" ,
width : w ,
minHeight : Math.round ( w * 0.55 ) ,
} }
>
{ /* SVG-приближение логотипа */ }
< svg
viewBox = "0 0 240 120"
width = { w - 48 }
xmlns = "http://www.w3.org/2000/svg"
aria - label = "Логотип Клиника УХО ГОРЛО НОС"
>
{ /* Графический элемент — три капли */ }
< ellipse cx = "18" cy = "22" rx = "8" ry = "12" fill = { brownColor } / >
< ellipse cx = "30" cy = "10" rx = "6" ry = "9" fill = { brownColor } / >
< ellipse cx = "10" cy = "38" rx = "10" ry = "7" fill = { brownColor } opacity = "0.85" / >
{ /* Текст КЛИНИКА */ }
< text
x = "46"
y = "26"
fontFamily = "Arial, sans-serif"
fontWeight = "700"
fontSize = "20"
fill = { darkColor }
letterSpacing = "1"
>
К Л И Н И К А
< / text >
{ /* Текст УХО ГОРЛО НОС */ }
< text
x = "46"
y = "54"
fontFamily = "Arial, sans-serif"
fontWeight = "700"
fontSize = "20"
fill = { tealColor }
letterSpacing = "1"
>
У Х О • Г О Р Л О • Н О С
< / text >
{ /* Текст ИМ. ПРОФ. */ }
< text
x = "46"
y = "78"
fontFamily = "Arial, sans-serif"
fontWeight = "400"
fontSize = "14"
fill = { darkColor }
letterSpacing = "0.5"
>
И М . П Р О Ф . Е . Н . О Л Е Н Е В О Й
< / text >
{ /* Метка версии */ }
{ variant === "general" && (
< text
x = "46"
y = "100"
fontFamily = "Arial, sans-serif"
fontWeight = "400"
fontSize = "10"
fill = { darkColor }
opacity = "0.5"
>
О б щ и й ( с е т ь к л и н и к )
< / text >
) }
{ variant === "main" && (
< text
x = "46"
y = "100"
fontFamily = "Arial, sans-serif"
fontWeight = "400"
fontSize = "10"
fill = { darkColor }
opacity = "0.5"
>
О с н о в н о й ( н а п р а в л е н и е )
< / text >
) }
< / svg >
< / div >
) ;
}
/* ─── Компонент: таблица охранной зоны ─────────────────────── */
function ClearspaceDemo() {
return (
< div className = "inline-flex items-center justify-center rounded-lg border p-10 relative"
style = { { borderColor : "var(--bb-border)" , background : "#f8f9fa" } }
>
{ /* Охранная зона — пунктирная рамка */ }
< div >
< div
className = "absolute inset-6 border-2 border-dashed rounded"
style = { { borderColor : "var(--brand-053m)" , opacity : 0.4 } }
/ >
{ /* Стрелки-обозначения */ }
< div className = "absolute top-1.5 left-1/2 -translate-x-1/2 text-[10px]"
style = { { color : "var(--brand-053m)" } } >
x
< / div >
< div className = "absolute bottom-1.5 left-1/2 -translate-x-1/2 text-[10px]"
style = { { color : "var(--brand-053m)" } } >
x
< / div >
< div className = "absolute left-1.5 top-1/2 -translate-y-1/2 text-[10px]"
style = { { color : "var(--brand-053m)" } } >
x
< / div >
< div className = "absolute right-1.5 top-1/2 -translate-y-1/2 text-[10px]"
style = { { color : "var(--brand-053m)" } } >
x
className = "flex items-center justify-center rounded-xl border p-8 mb-4"
style = { {
background : dark ? "var(--brand-073m)" : "#f8f9fa" ,
borderColor : dark ? "transparent" : "var(--bb-border)" ,
minHeight : 200 ,
} }
>
< Image
src = { src }
alt = { alt }
width = { 320 }
height = { 130 }
className = "object-contain"
style = { { filter : dark ? "brightness(0) invert(1)" : undefined } }
/ >
< / div >
< LogoPlaceholder variant = "main" size = "sm" / >
< p className = "font-medium text-sm mb-1" style = { { color : "var(--bb-text)" } } >
{ label }
< / p >
< p className = "text-sm mb-2" style = { { color : "var(--bb-text-muted)" } } >
{ description }
< / p >
< RuleTag > { tag } < / RuleTag >
< / div >
) ;
}
/* ─── Компонент: недопустимое использование ─────────────────── */
function ProhibitedItem ( { label } : { label : string } ) {
return (
< div
@ -216,23 +97,19 @@ function ProhibitedItem({ label }: { label: string }) {
style = { { borderColor : "#fecaca" , background : "#fff5f5" } }
>
< span className = "text-red-400 text-lg leading-none mt-0.5" > ✕ < / span >
< p className = "text-sm" style = { { color : "#7f1d1d" } } >
{ label }
< / p >
< p className = "text-sm" style = { { color : "#7f1d1d" } } > { label } < / p >
< / div >
) ;
}
/* ─── Главная страница «Логотип» ────────────────────────────── */
export default function LogoPage() {
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)" } }
>
< p className = "text-xs font-semibold uppercase tracking-widest mb-2"
style = { { color : "var(--brand-053m)" } } >
Ф у н д а м е н т → 1.2
< / p >
< h1 className = "text-3xl font-semibold mb-3" style = { { color : "var(--bb-text)" } } >
@ -243,53 +120,39 @@ export default function LogoPage() {
О н н е п о д л е ж и т н и к а к и м и з м е н е н и я м и н е д о п у с к а е т с я е г о с о ч е т а н и е н и с к а к и м
д о п о л н и т е л ь н ы м т е к с т о м .
< / p >
< div
className = "mt-4 px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
style = { { borderColor : "#fde68a" , background : "#fffbeb" , color : "#92400e" } }
>
< span > ⚠ ️ < / span >
< span >
В е к т о р н ы й ф а й л л о г о т и п а б у д е т д о б а в л е н п о с л е п е р е д а ч и SVG - ф а й л о в .
Н и ж е — SVG - п р и б л и ж е н и е д л я с п р а в к и .
И з о б р а ж е н и е и з в л е ч е н о и з PDF - б р е н д б у к а . В е к т о р н ы й SVG б у д е т д о б а в л е н
п о с л е п е р е д а ч и и с х о д н ы х ф а й л о в о т д и з а й н е р а .
< / span >
< / div >
< / div >
{ /* 1. Иерархия и версии */ }
{ /* 1. Иерархия */ }
< Section
id = "hierarchy"
title = "Иерархия и версии"
subtitle = "Клиника использует два варианта логотипа в зависимости от контекста применения."
>
< div className = "grid grid-cols-1 gap-8 md:grid-cols-2" >
< div >
< LogoPlaceholder variant = "main" size = "md" / >
< div className = "mt-4" >
< p className = "font-medium text-sm mb-1" style = { { color : "var(--bb-text)" } } >
О с н о в н о й л о г о т и п
< / p >
< p className = "text-sm mb-2" style = { { color : "var(--bb-text-muted)" } } >
Л о к а л ь н ы е в е р с и и п о н а п р а в л е н и я м ( Л О Р , а л л е р г о л о г и я и д р . ) .
П р и м е н я е т с я в т о ч к а х к о н т а к т а с к л и е н т а м и , н а л е н д и н г а х и с а й т а х н а п р а в л е н и й .
< / p >
< RuleTag > Т о ч к и к о н т а к т а с к л и е н т о м < / RuleTag >
< / div >
< / div >
< div >
< LogoPlaceholder variant = "general" size = "md" / >
< div className = "mt-4" >
< p className = "font-medium text-sm mb-1" style = { { color : "var(--bb-text)" } } >
О б щ и й л о г о т и п
< / p >
< p className = "text-sm mb-2" style = { { color : "var(--bb-text-muted)" } } >
В е р с и я с е т и к л и н и к . П р и м е н я е т с я д л я о н л а й н и о ф ф л а й н к о м м у н и к а ц и й
с к л и е н т а м и , в о в н у т р е н н е й д о к у м е н т а ц и и . Д о п у с т и м о н а о б щ е м с а й т е .
< / p >
< RuleTag > С е т ь к л и н и к · Д о к у м е н т а ц и я · С а й т < / RuleTag >
< / div >
< / div >
< LogoCard
src = "/logo/logo-transparent.png"
alt = "Основной логотип Клиника УХО ГОРЛО НОС им. проф. Е.Н. Оленевой"
label = "Основной логотип"
description = "Локальные версии по направлениям (ЛОР, аллергология и др.). Применяется в точках контакта с клиентами, на лендингах и сайтах направлений."
tag = "Точки контакта с клиентом"
/ >
< LogoCard
src = "/logo/logo-transparent.png"
alt = "Общий логотип сети клиник"
label = "Общий логотип"
description = "Версия сети клиник. Применяется для онлайн и оффлайн коммуникаций с клиентами, во внутренней документации. Допустимо на общем сайте."
tag = "Сеть клиник · Документация · Сайт"
/ >
< / div >
< / Section >
@ -299,22 +162,44 @@ export default function LogoPage() {
title = "Цветовые варианты"
subtitle = "Логотип существует в нескольких вариантах в зависимости от фона носителя."
>
< div className = "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols- 3" >
< div className = "grid grid-cols-1 gap-6 sm:grid-cols-3" >
< div >
< LogoPlaceholder variant = "main" size = "sm" / >
< p className = "mt-2 text-sm" style = { { color : "var(--bb-text-muted)" } } >
< div
className = "flex items-center justify-center rounded-xl border p-6 mb-3"
style = { { background : "#f8f9fa" , borderColor : "var(--bb-border)" , minHeight : 160 } }
>
< Image src = "/logo/logo-transparent.png" alt = "Логотип на светлом фоне"
width = { 220 } height = { 87 } className = "object-contain" / >
< / div >
< p className = "text-sm" style = { { color : "var(--bb-text-muted)" } } >
О с н о в н о й — н а с в е т л о м ф о н е
< / p >
< / div >
< div >
< LogoPlaceholder variant = "inverted" size = "sm" / >
< p className = "mt-2 text-sm" style = { { color : "var(--bb-text-muted)" } } >
< div
className = "flex items-center justify-center rounded-xl p-6 mb-3"
style = { { background : "var(--brand-073m)" , minHeight : 160 } }
>
{ /* brightness(0) делает всё чёрным, invert(1) — белым */ }
< Image src = "/logo/logo-transparent.png" alt = "Логотип инвертированный"
width = { 220 } height = { 87 } className = "object-contain"
style = { { filter : "brightness(0) invert(1)" } } / >
< / div >
< p className = "text-sm" style = { { color : "var(--bb-text-muted)" } } >
И н в е р т и р о в а н н ы й — н а т ё м н о м ф о н е
< / p >
< / div >
< div >
< LogoPlaceholder variant = "brown" size = "sm" / >
< p className = "mt-2 text-sm" style = { { color : "var(--bb-text-muted)" } } >
< div
className = "flex items-center justify-center rounded-xl border p-6 mb-3"
style = { { background : "var(--brand-081m)" , borderColor : "transparent" , minHeight : 160 } }
>
{ /* Коричневый: насыщенный sepia + darkening */ }
< Image src = "/logo/logo-transparent.png" alt = "Логотип коричневый на форме"
width = { 220 } height = { 87 } className = "object-contain"
style = { { filter : "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)" } } / >
< / div >
< p className = "text-sm" style = { { color : "var(--bb-text-muted)" } } >
К о р и ч н е в ы й — н а ф о р м е ( б е ж е в ы й к о с т ю м )
< / p >
< / div >
@ -325,21 +210,28 @@ export default function LogoPage() {
< Section
id = "clearspace"
title = "Охранная зона"
subtitle = "Вокруг логотипа всегда должно быть свободное пространство, равное высоте буквы «x» в названии ."
subtitle = "Вокруг логотипа всегда должно быть свободное пространство — не менее высоты буквы «x» в слове «КЛИНИКА» ."
>
< div className = "flex flex-wrap gap-8 items-start" >
< ClearspaceDemo / >
< div className = "flex-1 min-w-48 space-y-3 pt-2" >
< p className = "text-sm" style = { { color : "var(--bb-text)" } } >
О х р а н н а я з о н а — м и н и м а л ь н о е р а с с т о я н и е о т л о г о т и п а д о л ю б о г о д р у г о г о
г р а ф и ч е с к о г о э л е м е н т а и л и к р а я н о с и т е л я .
< / p >
< p className = "text-sm" style = { { color : "var(--bb-text-muted)" } } >
П у н к т и р н а я р а м к а о б о з н а ч а е т о х р а н н у ю з о н у . Н и к а к и е д р у г и е э л е м е н т ы
н е д о л ж н ы п е р е с е к а т ь е ё г р а н и ц ы .
< / p >
< / div >
< div
className = "flex items-center justify-center rounded-xl border p-16 relative"
style = { { background : "#f8f9fa" , borderColor : "var(--bb-border)" } }
>
< div className = "absolute inset-8 border-2 border-dashed rounded-lg"
style = { { borderColor : "var(--brand-053m)" , opacity : 0.5 } } / >
{ [ "top" , "bottom" , "left" , "right" ] . map ( side = > (
< div key = { side } className = { ` absolute text-xs font-medium
$ { side === "top" ? "top-2 left-1/2 -translate-x-1/2" : "" }
$ { side === "bottom" ? "bottom-2 left-1/2 -translate-x-1/2" : "" }
$ { side === "left" ? "left-2 top-1/2 -translate-y-1/2" : "" }
$ { side === "right" ? "right-2 top-1/2 -translate-y-1/2" : "" }
` } style={{ color: "var(--brand-053m)" }}>x</div>
) ) }
< Image src = "/logo/logo-transparent.png" alt = "Логотип с охранной зоной"
width = { 320 } height = { 126 } className = "object-contain relative z-10" / >
< / div >
< p className = "mt-3 text-sm" style = { { color : "var(--bb-text-muted)" } } >
П у н к т и р н а я р а м к а — г р а н и ц а о х р а н н о й з о н ы . Н и к а к и е д р у г и е э л е м е н т ы н е д о л ж н ы е ё п е р е с е к а т ь .
< / p >
< / Section >
{ /* 4. Минимальные размеры */ }
@ -348,68 +240,28 @@ export default function LogoPage() {
title = "Минимальные размеры"
subtitle = "Размеры логотипа для размещения на форме сотрудников."
>
< div
className = "overflow-hidden rounded-lg border"
style = { { borderColor : "var(--bb-border)" } }
>
< 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)" } } >
< th
className = "text-left px-5 py-3 font-medium"
style = { { color : "var(--bb-text-muted)" } }
>
Р а з м е р о д е ж д ы
< / th >
< th
className = "text-left px-5 py-3 font-medium"
style = { { color : "var(--bb-text-muted)" } }
>
Д л и н а л о г о т и п а
< / th >
< th
className = "text-left px-5 py-3 font-medium"
style = { { color : "var(--bb-text-muted)" } }
>
В ы с о т а л о г о т и п а
< / th >
< th
className = "text-left px-5 py-3 font-medium"
style = { { color : "var(--bb-text-muted)" } }
>
Р а с п о л о ж е н и е
< / th >
{ [ "Размер одежды" , "Длина" , "Высота" , "Расположение" ] . 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 >
< tr className = "border-t" style = { { borderColor : "var(--bb-border)" } } >
< td className = "px-5 py-3" style = { { color : "var(--bb-text)" } } >
Д о 46 ( в к л ю ч и т е л ь н о )
< / td >
< td className = "px-5 py-3 font-mono text-xs" style = { { color : "var(--bb-text)" } } >
70 м м
< / td >
< td className = "px-5 py-3 font-mono text-xs" style = { { color : "var(--bb-text)" } } >
25 , 5 м м
< / td >
< td className = "px-5 py-3" style = { { color : "var(--bb-text-muted)" } } >
Л е в а я с т о р о н а г р у д и
< / td >
< / tr >
< tr className = "border-t" style = { { borderColor : "var(--bb-border)" } } >
< td className = "px-5 py-3" style = { { color : "var(--bb-text)" } } >
О т 48
< / td >
< td className = "px-5 py-3 font-mono text-xs" style = { { color : "var(--bb-text)" } } >
90 м м
< / td >
< td className = "px-5 py-3 font-mono text-xs" style = { { color : "var(--bb-text)" } } >
32 , 8 м м
< / td >
< td className = "px-5 py-3" style = { { color : "var(--bb-text-muted)" } } >
Л е в а я с т о р о н а г р у д и
< / td >
< / tr >
{ [
[ "До 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 >
@ -419,48 +271,38 @@ export default function LogoPage() {
< Section
id = "prohibited"
title = "Недопустимые варианты использования"
subtitle = "Следующие варианты применения логотипа запрещены."
>
< div className = "grid grid-cols-1 gap-3 sm:grid-cols-2" >
< ProhibitedItem label = "Изменять пропорции или искажать логотип" / >
< ProhibitedItem label = "Изменять цвета элементов логотипа" / >
< ProhibitedItem label = "Добавлять рядом произвольный текст" / >
< ProhibitedItem label = "Размещать на фоне, с которым логотип не контрастирует " / >
< ProhibitedItem label = "Использовать отдельные элементы логотипа без остальных" / >
< ProhibitedItem label = "Размещать на фоне без достаточного контраста " / >
< ProhibitedItem label = "Использовать отдельные элементы без остальных" / >
< ProhibitedItem label = "Применять тени, обводки, градиенты" / >
< / div >
< / Section >
{ /* 6. Скачать файлы */ }
< Section
id = "download"
title = "Скачать файлы"
subtitle = "Официальные файлы логотипа для использования в коммуникациях."
>
{ /* 6. Скачать */ }
< Section id = "download" title = "Скачать файлы" >
< div
className = "rounded-lg border p-6 flex flex-col sm:flex-row items-start sm:items-center gap-4"
className = "rounded-xl border p-6 flex flex-col sm:flex-row items-start sm:items-center gap-4"
style = { { borderColor : "var(--bb-border)" , background : "var(--bb-sidebar-bg)" } }
>
< div className = "flex-1" >
< p className = "font-medium text-sm mb-1" style = { { color : "var(--bb-text)" } } >
В е к т о р н ы е ф а й л ы л о г о т и п а ( SVG , PNG )
В е к т о р н ы е ф а й л ы л о г о т и п а ( SVG , AI , PNG )
< / p >
< p className = "text-sm" style = { { color : "var(--bb-text-muted)" } } >
Б у д у т д о с т у п н ы п о с л е п е р е д а ч и и с х о д н ы х ф а й л о в о т д и з а й н е р а .
< / p >
< / div >
< button
disabled
className = "px-4 py-2 rounded-lg text-sm font-medium cursor-not-allowed"
style = { {
background : "#e5e7eb" ,
color : "#9ca3af" ,
} }
>
< button disabled className = "px-4 py-2 rounded-lg text-sm font-medium cursor-not-allowed"
style = { { background : "#e5e7eb" , color : "#9ca3af" } } >
С к а ч а т ь ( с к о р о )
< / button >
< / div >
< / Section >
< / div >
) ;
}
AR 15 M4
1 week ago
