LL Studio · full-stack tech case

Лендинг для digital-продукта, который запоминают, а не листают

CRT-эстетика, интерактивный терминал, live-статус. Интерфейс становится частью продукта. Для The LPN Project я построил всё с нуля — лендинг, dashboard, Telegram-бот, бэкенд и мониторинг.

Обсудить проектБесплатная консультация · Отвечу за час
Интерактивный лендинг для digital-продукта — CRT-терминал, живой статус и атмосфера, от которой пользователь не уходит
$ Проблема

Почему большинство SaaS-лендингов не запоминаются

>_

Все SaaS выглядят одинаково

Градиент, три фичи, скучный CTA. Пользователь забудет вас через десять секунд после того, как закроет вкладку.

[L]

Интерактив ломается на мобиле

WOW-эффект на десктопе, белый экран на iPhone SE. Половина аудитории отваливается ещё до первого скролла.

//

Студия возьмёт 150 000 ₽ и три недели

За это время рынок уезжает, а у вас всё ещё макет в Figma.

$ Решение

Что вы получите

>_

Интерактивный терминал в hero

Реальные команды: help, status, pricing, manifest. Пользователь не смотрит — он задерживается и пробует команды.

[L]

CRT-атмосфера без тормозов

Scanlines, phosphor-glow, matrix-rain — всё работает на GPU. Плавно на десктопе и мобиле, тяжёлые ассеты не блокируют первый экран.

//

Hero появляется мгновенно

Секции ниже первого экрана подгружаются по мере скролла — стартовый экран не ждёт тяжёлых ассетов.

{}

Работает на любом устройстве

Учитывает системную настройку «reduce motion». На мобиле — адаптированная версия без рывков.

$ Кейс

Что я построил для The LPN Project

The LPN Project — закрытая VPN-сеть с инвайтами. Полный стек с нуля: лендинг, auth, dashboard, Telegram-бот, API, мониторинг, деплой. CRT-эстетика — сквозной стиль продукта.

Главный экран The LPN Project — интерактивный CRT-терминал с boot-последовательностью
Команда status на сайте The LPN Project — live-статус сети и география нод
Login-экран приложения The LPN Project — авторизация по коду из Telegram или email
Страница /activate — приём инвайт-кода и deep link в Telegram-бота
Страница /connect — редирект в Hiddify/v2raytun через protocol scheme
Финальный CTA The LPN Project — запросить инвайт у резидента

$ Что реализовано

>_Лендинг: интерактивный CRT-терминал с реальными командами (help, status, invite, pricing, manifest, clients), matrix rain, scanlines, phosphor-glow, sound toggle
>_Dashboard — 4 экрана (статус, устройства, тарифы, профиль) со swipe-навигацией, haptics, JWT-сессией и boot-анимацией «ДОСТУП ПОДТВЕРЖДЕН»
>_Auth flow: вход по коду из Telegram-бота или по email, верификация JWT, авто-восстановление сессии
>_Deep links: /activate принимает invite-код и редиректит в бота; /connect открывает конфиг в Hiddify/v2raytun через protocol scheme
>_Telegram-бот на Grammy: FSM, выдача конфигов, оплата через Telegram Stars / СБП / крипту, поддержка тикетов, инвайты
>_REST API на Fastify + TypeBox (v1-versioned), JWT auth, PostgreSQL через Prisma — пользователи, устройства, платежи, тикеты, инвайты
>_Мониторинг: Prometheus + Grafana + Alertmanager + alert-relay bridge → Telegram, blackbox exporter, Sentry
>_Деплой: Docker Compose + Caddy (auto-TLS) на bare metal для API/бота, Vercel для web. CI/CD — GitHub Actions + semantic-release, 80%+ покрытие vitest + Playwright E2E
Открыть живой сайт →
$ tree Архитектура

Монорепо — один репозиторий

Bun workspaces, общие packages, единый линт и typecheck.

projectlpn/
├── api/              # Fastify REST API, TypeBox, JWT
├── bot/              # Grammy Telegram-бот, FSM
├── web/              # Next.js 16 — landing + dashboard
├── alert-relay/      # Alertmanager → Telegram (SQLite queue)
├── packages/
│   ├── db/           # Prisma 5 + PostgreSQL
│   ├── types/        # Shared DTOs, API response types
│   ├── shared/       # Cross-package utilities
│   └── logger/       # Pino + PII redaction
├── deploy/           # Docker Compose + Caddy auto-TLS
├── monitoring/       # Prometheus, Grafana, Alertmanager
├── ops/              # Backup, validation, rollout gate
├── docs/             # Runbooks, security, ops
└── e2e/              # Playwright

$ Стек

Frontend
Next.js 16, React 19, Tailwind 4, TanStack Query, Framer Motion
Backend
Bun, Fastify 5, TypeBox, jose (JWT), Grammy, GramJS
Data
PostgreSQL 16, Prisma 5, SQLite (alert queue)
Ops
Docker Compose, Caddy, Prometheus, Grafana, Alertmanager, Sentry, Vercel
Quality
vitest 80% coverage, Playwright E2E, semantic-release, GitHub Actions
root@llstudio:~$cat why.md

Зачем это сделано

Это мой pet-продукт: закрытая VPN-сеть для своих. Хотелось, чтобы лендинг резонировал с аудиторией, которая понимает, что такое neofetch на пятничный вечер. Получился интерфейс, где каждая команда — часть продукта. Тот же подход — живой терминал, live-статус, интерактивные блоки — кладётся на любой SaaS, dev-tool или digital-сервис с техничной аудиторией. Думаете о похожем для своего продукта — давайте обсудим, как это ляжет на вашу задачу.

$ Стоимость

В студиях — от 150 000 ₽

У меня — от 25 000 ₽

Уникальный интерактивный лендинг под ваш digital-продукт — дизайн, вёрстка, адаптив, SEO, публикация. Dashboard, backend и бот — отдельным scope'ом, под задачу.

  • >Срок — от 7 рабочих дней
  • >Макет до оплаты
  • >Согласование на каждом этапе
  • >Помощь с копирайтом и скриншотами
  • >Хостинг и домен — помогу настроить
Обсудить проектНаписать в Max

Бесплатная консультация · Отвечу в течение часа

$ cat Вопросы.md

Частые вопросы

Q:Как ведёт себя такой лендинг на мобиле?+

A:Все тяжёлые эффекты работают только на десктопе и отключаются через системную настройку «reduce motion». На мобиле — адаптированная версия с теми же секциями, но без matrix-rain и scanline-бега. 60 fps на iPhone SE и старых Android.

Q:Можно сделать не CRT, а другой стиль — glass, bento, 3D?+

A:Да. Terminal / CRT — только один из направлений. Подхожу под продукт: если у вас B2B-dashboard — сделаю editorial. Если dev-tool — bento. Если API — brutalism. Подбираем под аудиторию на первом созвоне.

Q:Сколько стоит и что входит?+

A:От 25 000 ₽. Входит: дизайн, вёрстка, адаптив, базовая SEO, подключение домена и хостинга, публикация, помощь с копирайтом и скриншотами. Никаких скрытых платежей.

Q:У меня SaaS / dev-tool / API — подойдёт ли такой стиль?+

A:Обычно да. CRT-эстетика хорошо работает для продуктов с технической аудиторией: разработчики, DevOps, кибербез, crypto, indie-hackers. Если аудитория другая (маркетологи, HR, SMB) — возьмём другое направление, логика кейса останется.

Q:Реально ли успеть за 7 дней?+

A:Да, если контент готов. Если нужна помощь с копирайтом и скриншотами — +2-3 дня. Всё обсуждаем до старта, сроки фиксируем в брифе.