nineap
4b1ef9f951
PocketBase pricing_{lang} остаётся источником переводного маркетингового
контента (название, тэглайн, описание, фичи, порядок) — но сами цифры
price1m/6m/1y теперь подменяются данными с GET /billing/plans нового
бэкенда (см. netrunner-backend::modules::geoip): валюта определяется по
IP посетителя, VPN/датацентр всегда получает базовый USD.
Соответствие тарифа PocketBase к тарифу бэкенда — по полю `name`
(ожидается "GHOST"/"NETRUNNER"/"MAINFRAME"). Бэкенд недоступен или для
конкретного тарифа не нашлось соответствия — тихий фолбэк на цену как
она есть в PocketBase, страница не ломается (тот же принцип, что уже
был у offline-кеша).
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 —
это основной акцентный элемент "хакерской" темы проекта.