netrunner-landing/components/README.md

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 — это основной акцентный элемент "хакерской" темы проекта.