Files
lopata/ref/app/protocol/page.tsx
T

128 lines
5.0 KiB
TypeScript

import Image from 'next/image'
import { SiteHeader, SiteFooter } from '@/components/site-chrome'
import { Stamp, SectionTitle, Perforation } from '@/components/doc-elements'
const STEPS = [
{
n: '01',
t: 'Обнаружение',
d: 'Зафиксировать признаки маскировки: немигающий взгляд, любовь к солнцу, неприятие соли, идеальная рассада без труда.',
},
{
n: '02',
t: 'Доклад',
d: 'Сообщить старшему по кооперативу через условный сигнал (три удара по бочке с водой).',
},
{
n: '03',
t: 'Локализация',
d: 'Применить изделие Л.О.П.А.Т.А. (ИНВ-001) для заземления. Соблюдать меры безопасности.',
},
{
n: '04',
t: 'Экранирование',
d: 'Накрыть изделием В.Е.Д.Р.О. (ИНВ-022) для блокировки канала связи с орбитой.',
},
{
n: '05',
t: 'Регистрация',
d: 'Внести запись в журнал формы Б-2. Присвоить делу номер. Хранить вечно.',
},
]
export default function ProtocolPage() {
return (
<div className="min-h-screen">
<SiteHeader />
<div className="banner-classified border-y border-foreground/30">
<div className="mx-auto flex max-w-4xl items-center justify-between gap-4 px-4 py-1.5 text-[0.65rem] font-700 uppercase tracking-[0.2em] sm:px-6">
<span>Для служебного пользования</span>
<span className="hidden sm:inline">Форма Б-2</span>
<span>Изучить под роспись</span>
</div>
</div>
<main className="mx-auto max-w-4xl px-4 py-8 sm:px-6">
<article className="paper relative -rotate-[0.3deg] p-6 sm:p-10">
<span className="tape -top-3 left-1/2 hidden -translate-x-1/2 rotate-1 sm:block" aria-hidden="true" />
<div className="pointer-events-none absolute right-4 top-4 sm:right-8 sm:top-10">
<Image
src="/emblem.png"
alt=""
width={90}
height={90}
className="h-16 w-16 opacity-80 mix-blend-multiply sm:h-20 sm:w-20"
/>
</div>
<header className="pb-5">
<p className="font-mono text-[0.7rem] uppercase tracking-[0.25em] text-muted-foreground">
Единый полевой протокол · ДНТ-7
</p>
<h1 className="mt-3 max-w-xl text-balance font-heading text-3xl font-700 uppercase leading-[0.95] tracking-tight sm:text-5xl">
Протокол противодействия
</h1>
<div className="mt-4 flex flex-wrap gap-3">
<Stamp>Обязательно к исполнению</Stamp>
<Stamp variant="ink" skew={false}>
Ред. 1986
</Stamp>
</div>
<hr className="rule rule-red mt-5" />
</header>
<section className="mt-8">
<SectionTitle index="§">Порядок действий</SectionTitle>
<ol className="space-y-4">
{STEPS.map((s, i) => (
<li
key={s.n}
className="paper flex gap-4 p-4"
style={{ rotate: i % 2 === 0 ? '-0.4deg' : '0.4deg' }}
>
<span className="font-heading text-3xl font-700 leading-none text-primary">
{s.n}
</span>
<div>
<h3 className="font-heading text-base font-600 uppercase tracking-wide">
{s.t}
</h3>
<p className="mt-1 text-sm leading-relaxed text-foreground/90">
{s.d}
</p>
</div>
</li>
))}
</ol>
</section>
<section className="mt-10">
<SectionTitle index="!">Памятка наблюдателю</SectionTitle>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
{[
'Соль — табельное средство демаскировки.',
'Инвентарь держать заточенным и заземлённым.',
'О немигающих соседях докладывать немедленно.',
].map((p) => (
<p
key={p}
className="paper border-l-4 border-l-primary p-3 text-sm leading-relaxed"
>
{p}
</p>
))}
</div>
</section>
</article>
<div className="mt-12">
<Perforation />
</div>
</main>
<SiteFooter />
</div>
)
}