docs: add reference design

ref/app/dossier/[slug]/page.tsx

@@ -0,0 +1,187 @@
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import Image from 'next/image'
+import { DOSSIERS, getDossier } from '@/lib/dossiers'
+import { CONTENT } from '@/lib/dossier-content'
+import { SiteHeader, SiteFooter } from '@/components/site-chrome'
+import {
+  Stamp,
+  OverlayStamp,
+  FieldRow,
+  SectionTitle,
+  Perforation,
+} from '@/components/doc-elements'
+
+export function generateStaticParams() {
+  return DOSSIERS.map((d) => ({ slug: d.slug }))
+}
+
+export default async function DossierPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+  const dossier = getDossier(slug)
+  const content = CONTENT[slug]
+  if (!dossier || !content) notFound()
+
+  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>{dossier.classification}</span>
+          <span className="hidden sm:inline">Дело № {dossier.code}</span>
+          <span>Экз. № 1</span>
+        </div>
+      </div>
+
+      <main className="mx-auto max-w-4xl px-4 py-8 sm:px-6">
+        <Link
+          href="/"
+          className="font-heading text-xs font-600 uppercase tracking-wider text-muted-foreground hover:text-primary"
+        >
+          ← Вернуться в картотеку
+        </Link>
+
+        <article className="paper relative mt-4 -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" />
+
+          {/* corner stamp */}
+          <div className="pointer-events-none absolute right-3 top-4 rotate-[9deg] sm:right-8 sm:top-10">
+            <OverlayStamp className="text-xl sm:text-3xl">
+              {dossier.classification}
+            </OverlayStamp>
+          </div>
+
+          <header className="pb-5">
+            <p className="font-mono text-[0.7rem] uppercase tracking-[0.25em] text-muted-foreground">
+              {dossier.category} · Дело № {dossier.code} · Угроза{' '}
+              {dossier.threat}
+            </p>
+            <h1 className="mt-3 max-w-2xl text-balance font-heading text-3xl font-700 uppercase leading-[0.95] tracking-tight sm:text-5xl">
+              {dossier.name}
+            </h1>
+            <p className="mt-3 max-w-2xl text-sm italic leading-relaxed text-muted-foreground">
+              {dossier.fullName}
+            </p>
+            <hr className="rule rule-red mt-5" />
+          </header>
+
+          {/* Spec table */}
+          <section className="mt-2">
+            <dl>
+              {content.fields.map((f) => (
+                <FieldRow key={f.label} label={f.label}>
+                  {f.value}
+                </FieldRow>
+              ))}
+            </dl>
+          </section>
+
+          {/* Blueprint */}
+          {content.hasBlueprint && (
+            <figure className="paper paper-strong mt-8 p-3">
+              <Image
+                src="/blueprint-lopata.png"
+                alt={`Технический чертёж изделия ${dossier.name}`}
+                width={1200}
+                height={800}
+                className="h-auto w-full mix-blend-multiply"
+              />
+              <figcaption className="mt-2 border-t border-dashed border-border pt-2 text-center font-mono text-[0.65rem] uppercase tracking-wider text-muted-foreground">
+                Рис. 1 — Чертёж общего вида · ГОСТ-садовый 12-86
+              </figcaption>
+            </figure>
+          )}
+
+          {/* Photo */}
+          {content.hasPhoto && (
+            <figure className="paper paper-strong mt-8 max-w-sm rotate-1 p-2">
+              <Image
+                src="/classified-photo.png"
+                alt="Рассекреченный фотоматериал"
+                width={600}
+                height={600}
+                className="h-auto w-full grayscale"
+              />
+              <figcaption className="mt-2 border-t border-dashed border-border pt-2 font-mono text-[0.6rem] uppercase tracking-wider text-muted-foreground">
+                Фотоматериал · участок №6 · 03:14
+              </figcaption>
+            </figure>
+          )}
+
+          {/* Sections */}
+          <div className="mt-10 space-y-10">
+            {content.sections.map((s) => (
+              <section key={s.index}>
+                <SectionTitle index={s.index}>{s.title}</SectionTitle>
+                <div className="text-sm leading-relaxed text-foreground/90">
+                  {s.body}
+                </div>
+              </section>
+            ))}
+          </div>
+
+          {/* Signature block */}
+          <footer className="mt-12 grid grid-cols-1 gap-6 border-t border-dashed border-border pt-6 sm:grid-cols-2">
+            <div>
+              <p className="text-[0.7rem] uppercase tracking-wider text-muted-foreground">
+                Утвердил
+              </p>
+              <p className="mt-3 font-heading text-base font-600">
+                Председатель Трибунала
+              </p>
+              <p className="mt-1 border-b border-foreground/50 pb-1 font-mono text-sm text-muted-foreground">
+                подпись: [ИЗЪЯТО]
+              </p>
+            </div>
+            <div className="flex items-start justify-end">
+              <Image
+                src="/emblem.png"
+                alt=""
+                width={90}
+                height={90}
+                className="h-20 w-20 rotate-6 opacity-80 mix-blend-multiply"
+              />
+            </div>
+          </footer>
+        </article>
+
+        {/* Cross-references */}
+        <section className="mt-10">
+          <h2 className="mb-1 font-heading text-lg font-700 uppercase tracking-wide">
+            См. также
+          </h2>
+          <hr className="rule mb-5 w-40" />
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            {DOSSIERS.filter((d) => d.slug !== slug)
+              .slice(0, 4)
+              .map((d) => (
+                <Link
+                  key={d.slug}
+                  href={`/dossier/${d.slug}`}
+                  className="paper flex items-center justify-between px-3 py-2.5 text-sm transition-all hover:-translate-y-0.5 hover:text-primary"
+                >
+                  <span className="font-heading uppercase tracking-wide">
+                    {d.name}
+                  </span>
+                  <span className="font-mono text-[0.65rem] text-muted-foreground">
+                    {d.code}
+                  </span>
+                </Link>
+              ))}
+          </div>
+        </section>
+
+        <div className="mt-12">
+          <Perforation />
+        </div>
+      </main>
+
+      <SiteFooter />
+    </div>
+  )
+}