docs: add reference design

2026-06-11 11:59:15 +05:00
parent 05f0a80c80
commit a5be6d7552
32 changed files with 5395 additions and 0 deletions
@@ -0,0 +1,127 @@
+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>
+  )
+}