# `components/` — структура компонентов

Разделение на две папки следует общей логике: `sections/` — это "что видит
пользователь", `ui/` — это "из чего это собрано".

## `sections/` — крупные самодостаточные блоки страниц

Каждый компонент здесь обычно закрывает целую секцию страницы или целый экран.
Получают переведённые строки как проп `dict` (кусок словаря `Dictionary` из
`lib/IDict.ts`, соответствующий одной секции — `dict.hero`, `dict.pricing` и т.д.),
а не читают словарь сами — словарь грузится один раз в `page.tsx`/`layout.tsx` и
раздаётся вниз. Часть секций — серверные компоненты, которые сами ходят в PocketBase
(`Faq.tsx`, `BlogPreview.tsx`), часть — клиентские с интерактивностью и анимациями
на `framer-motion` (`Hero.tsx`, `Pricing.tsx`, `TerminalGuestbook.tsx` и т.д.).

Ключевые секции:

- **`Header.tsx`** — фиксированная плавающая навигация + полноэкранное меню-оверлей
  в стиле ретро-Windows-окна.
- **`Hero.tsx`** — первый экран главной страницы с WASM-анимацией матрицы
  (`matrix-engine/`) и переключателем "VPN вкл/выкл", который меняет визуальное
  состояние фона.
- **`Features.tsx`** — bento-грид с описанием ключевых возможностей продукта.
- **`Pricing.tsx`** — тарифные планы из PocketBase с переключением периода оплаты
  (1 месяц / 6 месяцев / 1 год) и автоматическим пересчётом скидки.
- **`Faq.tsx`** — аккордеон вопросов-ответов, серверный компонент с ISR-кэшем на сутки.
- **`TerminalGuestbook.tsx`** — гостевая книга на главной странице: форма с
  honeypot-полем от ботов, клиентский троттлинг + серверный кулдаун, realtime через
  PocketBase-подписку, отправка через Rust-шлюз `proxy-ws` (модерация на бэкенде).
- **`BlogPreview.tsx`** — превью последних постов блога на главной странице.
- **`SpeedtestClient.tsx`** — измеритель скорости соединения (пинг/скачивание/отдача)
  через `proxy-ws`; в dev-режиме работает в моковом режиме без реальных запросов.
- **`Footer.tsx`** — подвал сайта с картой ссылок и "мерцающими" неоновыми иконками
  соцсетей.
- **`lang/language-switcher.tsx`** — переключатель локали en/ru (подменяет префикс
  в текущем пути и делает `router.push`).
- **`theme/theme-provider.tsx`** + **`theme/theme-toggle.tsx`** — обвязка над
  `next-themes` для переключения светлой/тёмной темы.

## `ui/` — низкоуровневые примитивы дизайн-системы

Компоненты без сложной бизнес-логики и без состояния приложения — переиспользуемые
строительные блоки в стиле shadcn/radix: `accordion.tsx`, `badge.tsx`, `button.tsx`,
`card.tsx`, `dropdown-menu.tsx`, `switch.tsx`. Это стандартная генерация shadcn CLI,
почти без кастомизации — при обновлении дизайн-системы их обычно переустанавливают
через `npx shadcn add`, а не правят руками.

Исключение — **`cyber-button.tsx`**: кастомный акцентный элемент темы проекта,
не из shadcn. Кнопка со скобками-маркерами `</ ... />` вокруг текста и бегущим
бликом при ховере, два варианта (`primary` — заливка фиолетовым, `secondary` —
прозрачная с цановой обводкой), может рендериться и как `<Link>`, и как `<button>`.
Используется практически во всех местах с призывом к действию (Header, Hero,
Pricing, TerminalGuestbook, SpeedtestClient и т.д.) вместо стандартного `Button` —
это основной акцентный элемент "хакерской" темы проекта.