feat: add leech wiki docs with Decap CMS

.gitignore

@@ -1,4 +1,5 @@
 .vercel
+.idea
 
 .angular
 

DESIGN.json

@@ -0,0 +1,94 @@
+{
+  "schemaVersion": 2,
+  "generatedAt": "2026-05-01T00:00:00+03:00",
+  "title": "Design System: Leech.ru Frontend",
+  "extensions": {
+    "colorMeta": {
+      "action-olive": {
+        "role": "primary",
+        "displayName": "Action Olive",
+        "canonical": "#706900",
+        "tonalRamp": ["#f4f1cf", "#918700", "#706900", "#514c00"]
+      },
+      "leech-text-deep": {
+        "role": "neutral",
+        "displayName": "Leech Deep Text",
+        "canonical": "#203124",
+        "tonalRamp": ["#465247", "#344236", "#203124"]
+      }
+    },
+    "typographyMeta": {
+      "headline": {
+        "displayName": "Headline",
+        "purpose": "Main product and leech editorial headings."
+      },
+      "body": {
+        "displayName": "Body",
+        "purpose": "Long-form Russian content and explanatory copy."
+      },
+      "label": {
+        "displayName": "Label",
+        "purpose": "Tabs, metadata, compact controls."
+      }
+    },
+    "shadows": [
+      {
+        "name": "leech-hero-soft",
+        "value": "0 1.5rem 4rem rgba(27, 43, 31, 0.08)",
+        "purpose": "Large leech editorial hero panels only."
+      }
+    ],
+    "motion": [
+      {
+        "name": "state-transition",
+        "value": "150ms-250ms ease-out",
+        "purpose": "Product state feedback, not decorative choreography."
+      }
+    ],
+    "breakpoints": [
+      { "name": "mobile", "value": "Taiga @tui-mobile" },
+      { "name": "tablet", "value": "Taiga @tui-tablet" }
+    ]
+  },
+  "components": [
+    {
+      "name": "Product Tabs",
+      "kind": "nav",
+      "refersTo": "tabs-product",
+      "description": "Horizontal Taiga tabs used for admin and leech section navigation.",
+      "html": "<tui-tabs tuiFade><a tuiTab>О пиявке</a><a tuiTab>Биохимия</a></tui-tabs>",
+      "css": "tui-tabs { box-shadow: none; margin-bottom: -1px; margin-inline: -1.5rem; padding-inline: 1.5rem; } [tuiTab] { scroll-margin-inline: 1.5rem; }"
+    }
+  ],
+  "narrative": {
+    "northStar": "The Calm Clinical Shelf",
+    "overview": "A reliable medical product interface with natural context, consistent Taiga UI patterns, and enough room for serious text.",
+    "keyCharacteristics": [
+      "Taiga UI first",
+      "Restrained olive action color",
+      "Readable long-form content",
+      "No esoteric or marketplace cues"
+    ],
+    "rules": [
+      {
+        "name": "The One Accent Rule",
+        "body": "Olive marks action, current position, and small trust signals.",
+        "section": "colors"
+      },
+      {
+        "name": "The Readability Rule",
+        "body": "Long article text gets the widest practical column before decoration.",
+        "section": "typography"
+      }
+    ],
+    "dos": [
+      "Do use Taiga UI patterns before custom components.",
+      "Do keep leech article pages wide on desktop."
+    ],
+    "donts": [
+      "Don't make the interface look like эзотерика or miracle medicine.",
+      "Don't use marketplace discount and urgency patterns.",
+      "Don't create separate tab patterns when tui-tabs fits."
+    ]
+  }
+}

DESIGN.md

@@ -0,0 +1,167 @@
+---
+name: Leech.ru Frontend
+description: Product UI for medical leech education, ordering, and content editing
+colors:
+  action-olive: "#706900"
+  action-olive-hover: "#807700"
+  action-olive-pressed: "#918700"
+  leech-hero-green: "#f4faef"
+  leech-hero-mint: "#eef8f7"
+  leech-hero-warm: "#fff7e8"
+  leech-text-deep: "#203124"
+  leech-text-muted: "#465247"
+  leech-chip-active: "#f4f1cf"
+typography:
+  headline:
+    fontFamily: "var(--tui-font-heading), var(--tui-font-text), system-ui, sans-serif"
+    fontSize: "var(--tui-typography-heading-h2)"
+    fontWeight: 800
+  body:
+    fontFamily: "var(--tui-font-text), system-ui, sans-serif"
+    fontSize: "var(--tui-typography-text-m)"
+    lineHeight: 1.65
+  label:
+    fontFamily: "var(--tui-font-text), system-ui, sans-serif"
+    fontSize: "var(--tui-typography-ui-s)"
+    fontWeight: 700
+rounded:
+  l: "var(--tui-radius-l)"
+  xl: "var(--tui-radius-xl)"
+  pill: "999rem"
+spacing:
+  xs: "0.5rem"
+  sm: "0.75rem"
+  md: "1rem"
+  lg: "1.5rem"
+  xl: "2rem"
+components:
+  button-primary:
+    backgroundColor: "{colors.action-olive}"
+    textColor: "#fbfbf7"
+    rounded: "{rounded.l}"
+    padding: "0 1rem"
+  tabs-product:
+    backgroundColor: "transparent"
+    textColor: "{colors.leech-text-deep}"
+    rounded: "0"
+---
+
+# Design System: Leech.ru Frontend
+
+## 1. Overview
+
+**Creative North Star: "The Calm Clinical Shelf"**
+
+The product interface should feel like a reliable medical shelf in a real center: ordered, readable, factual, and still connected to living biological material. Taiga UI is the base vocabulary. Custom design should extend it through spacing, layout, text hierarchy, and a restrained olive accent, not through separate decorative widgets.
+
+The system rejects esoteric cues, miracle-treatment language, marketplace urgency, discount noise, and excessive bordered cards. Long medical content should be easier to read than a cramped brochure: wide enough on desktop, structured with tabs and side contents, compact on mobile.
+
+**Key Characteristics:**
+
+- Product-first Taiga UI components with consistent tabs, buttons, forms, cards, and cells.
+- Restrained olive accent for actions, active states, and key trust signals.
+- Soft natural hero backgrounds only where the section needs context.
+- Clear Russian copy, direct labels, no decorative complexity.
+
+## 2. Colors
+
+The palette is restrained: Taiga neutrals carry the interface, olive marks actions and active navigation, and leech-specific pages may use soft green, mint, and warm tints for natural context.
+
+### Primary
+
+- **Action Olive** (#706900): primary action color, active navigation, trusted emphasis.
+- **Action Olive Hover** (#807700): hover state for links and primary controls.
+- **Action Olive Pressed** (#918700): pressed state for primary controls.
+
+### Neutral
+
+- **Leech Deep Text** (#203124): headings on leech editorial surfaces.
+- **Leech Muted Text** (#465247): long-form descriptions and secondary explanations.
+- **Leech Hero Green** (#f4faef), **Mint** (#eef8f7), **Warm** (#fff7e8): soft contextual backgrounds for leech education, not general decoration.
+
+### Named Rules
+
+**The One Accent Rule.** Olive is for action, current position, and small trust signals. Do not scatter it as ornament.
+
+## 3. Typography
+
+**Display Font:** Taiga UI heading stack
+**Body Font:** Taiga UI text stack
+**Label/Mono Font:** Taiga UI text stack
+
+**Character:** Use one product sans system. Hierarchy comes from Taiga type roles, weight, and whitespace rather than display-font personality.
+
+### Hierarchy
+
+- **Headline** (800, `var(--tui-typography-heading-h2)`): main leech section titles and page headings.
+- **Title** (700, Taiga heading h5-h6): card headers, help blocks, subsection anchors.
+- **Body** (regular, `var(--tui-typography-text-m)`, 1.6-1.75): long editorial content, capped by comfortable reading width.
+- **Label** (700, `var(--tui-typography-ui-s)`): tabs, eyebrow labels, meta text, compact controls.
+
+### Named Rules
+
+**The Readability Rule.** Long article text gets the widest practical column before adding decoration. Do not sacrifice reading width to symmetrical sidebars.
+
+## 4. Elevation
+
+The system is mostly flat with Taiga surfaces, borders, and occasional soft shadows. Shadows are reserved for hero-level educational panels or existing Taiga floating cards. Product lists and form steps should use clear spacing and component states before adding new elevation.
+
+### Shadow Vocabulary
+
+- **Leech Hero Soft** (`0 1.5rem 4rem rgba(27, 43, 31, 0.08)`): only for large editorial hero panels.
+- **Taiga Medium** (`var(--tui-shadow-medium)`): auth cards and Taiga floating surfaces.
+
+### Named Rules
+
+**The No Border Pile Rule.** Do not solve hierarchy by putting every block in a bordered box. Prefer tabs, headings, spacing, and Taiga cells.
+
+## 5. Components
+
+### Buttons
+
+- **Shape:** Taiga default radius and sizing.
+- **Primary:** action olive via global Taiga action variables.
+- **Hover / Focus:** rely on Taiga states, preserve visible focus and contrast.
+- **Secondary / Outline:** use Taiga appearances consistently.
+
+### Tabs
+
+- **Style:** use `tui-tabs`, `tuiTab`, and `tuiFade` for horizontal section navigation, matching the admin subheader pattern.
+- **State:** active route is indicated by Taiga tab state, not custom pills unless the screen is mobile-only and tabs cannot fit.
+
+### Cards / Containers
+
+- **Corner Style:** Taiga `var(--tui-radius-l)` or `var(--tui-radius-xl)`.
+- **Background:** Taiga base surfaces.
+- **Shadow Strategy:** flat by default, floating only where Taiga already uses it.
+- **Border:** one structural border per major surface when needed.
+- **Internal Padding:** 1rem-2.5rem depending on density and screen size.
+
+### Inputs / Fields
+
+- **Style:** Taiga textfields and signal-form bindings.
+- **Focus:** global Taiga action outline.
+- **Error / Disabled:** Taiga validation states.
+
+### Navigation
+
+- **Style:** header navigation, admin tabs, and leech section tabs should share the same horizontal tab vocabulary where possible.
+- **Mobile:** horizontal overflow is acceptable for tabs; avoid dense side navigation.
+
+## 6. Do's and Don'ts
+
+### Do:
+
+- **Do** use Taiga UI patterns before custom components.
+- **Do** keep leech article pages wide on desktop, with side metadata only where it helps.
+- **Do** use olive for primary actions and active navigation.
+- **Do** keep CMS-edited markdown readable and safe.
+- **Do** make order steps understandable for private buyers first, while still usable by clinics.
+
+### Don't:
+
+- **Don't** make the interface look like эзотерика, народная магия, or miracle medicine.
+- **Don't** use marketplace patterns: discount badges, urgency noise, crowded product cards.
+- **Don't** create separate tab, pill, or navigation patterns when `tui-tabs` already fits.
+- **Don't** use side-stripe borders as colored accents.
+- **Don't** fill the page with identical bordered cards.

PRODUCT.md

@@ -0,0 +1,39 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Основная аудитория: частные покупатели 35-60 лет, которые хотят заказать медицинских пиявок без лишней сложности и сомнительных обещаний. Вторичная аудитория: клиники, гирудотерапевты и редкие оптовые покупатели, которым важны размер, количество, упаковка, документы и предсказуемая коммуникация.
+
+Пользователь чаще всего не находится в режиме импульсной покупки. Он сравнивает качество, происхождение, условия доставки и понятность заказа. Интерфейс должен помогать быстро понять, что именно заказывается, почему материал контролируемый, как выбрать количество и что будет после отправки формы.
+
+## Product Purpose
+
+Сайт объединяет справочный раздел о медицинской пиявке, форму заказа и CMS-процесс для редакционного контента. Ценность продукта: перевести сложную и чувствительную тему в понятный, спокойный и проверяемый путь от изучения информации до заказа.
+
+Успех интерфейса: человек понимает разницу между медицинской и дикой пиявкой, видит признаки надежности, без труда читает длинные материалы на desktop, выбирает размер и количество в форме заказа и не ощущает давления маркетплейса.
+
+## Brand Personality
+
+Надежный, натуральный, понятный.
+
+Тон: спокойный медицинский сервис с живой биологической основой. Не холодная клиника и не народная эзотерика. Тексты должны быть прямыми, уважительными к читателю 35-60 лет, без игровых формулировок, агрессивных продаж и лишней терминологической стены.
+
+## Anti-references
+
+Не выглядеть как эзотерика, народная магия или сайт с лечебными чудесами. Не выглядеть как маркетплейс со скидками, бейджами срочности и визуальным шумом. Не превращать медицинскую тему в стерильную безликую панель без природного контекста. Не перегружать поверхности бордерами и одинаковыми карточками.
+
+## Design Principles
+
+1. Сначала доверие, потом действие. Заказ должен быть рядом с объяснениями качества, но не давить на человека.
+2. Одна система паттернов. Навигация, табы, карточки, формы и списки должны опираться на Taiga UI и уже существующий словарь проекта.
+3. Длинный текст должен дышать. Справочные материалы на desktop получают достаточную ширину, понятную навигацию и спокойную структуру чтения.
+4. Натуральность без фольклора. Биологический образ допустим через мягкую палитру, фото и факты, но не через декоративную мистику.
+5. Простота для старшей аудитории. Крупные кликабельные зоны, понятные подписи, видимые состояния, минимум скрытых жестов.
+
+## Accessibility & Inclusion
+
+Цель: WCAG AA. Интерфейс должен сохранять контраст, видимые focus-состояния, клавиатурную навигацию, понятные подписи для ссылок и полей. Для аудитории 35-60 лет важны читаемый размер шрифта, отсутствие плотной мелкой навигации, предсказуемые кнопки и отсутствие навязчивой анимации.

angular.json

@@ -28,6 +28,11 @@
                 "input": "public",
                 "output": "/"
               },
+              {
+                "glob": "**/*",
+                "input": "content",
+                "output": "/content"
+              },
               {
                 "glob": "**/*",
                 "input": "node_modules/@taiga-ui/icons/src",
@@ -41,7 +46,9 @@
               "src/app/index.less"
             ],
             "server": "src/app/entry.server.ts",
-            "prerender": true,
+            "prerender": {
+              "routesFile": "src/app/prerender-routes.txt"
+            },
             "ssr": {
               "entry": "src/app/entry.ssr.ts"
             },