Флагшток: продающая страница IT-сервиса и инструкция к нему
Стартап или IT-продукт · Стиль сайта: Terminal

Задача
Когда IT-компания выводит на рынок свой сервис, ей нужен лендинг — одна продающая страница, которая быстро объясняет сервис программистам: они и есть его покупатели. На странице должно быть видно, что делает сервис, сколько стоит, что в нем нового и с чего начать. И еще нужен способ собрать электронные почты тех, кто хочет попробовать сервис первым.
Чтобы показать такой лендинг в деле, мы сделали демо — работающий сайт вымышленного сервиса «Флагшток». Такой сервис помогает программистам включать новую функцию сначала для части пользователей и выключать ее одной командой, если что-то пошло не так. Программисты называют это «флагами функций». Сам сервис, его тарифы и история обновлений придуманы для демо.
Решение
Вверху главной страницы, в том, что видно сразу при открытии, стоит команда, которую программист вводит текстом, чтобы включить новую функцию для четверти пользователей. Так сайт с первых секунд показывает, как сервисом пользоваться. Ниже — шесть возможностей сервиса, три тарифа с ценами и список последних обновлений. Инструкция к сервису разбита на три раздела, у каждого своя страница и своя ссылка. Между разделами можно переходить кнопками «назад» и «дальше».
Кнопки у тарифов ведут к форме записи в список ожидания — в него попадают те, кто хочет получить доступ к сервису первым. В форме всего два пункта: рабочая электронная почта и галочка согласия на обработку персональных данных. Если человек оставит ту же почту второй раз, в списке она не повторится. Список хранится в админке — закрытом разделе сайта, куда владелец входит по логину и паролю; в админке список видит только он. Уведомлений о новых адресах нет: список владелец смотрит в админке.
Если на телефоне или компьютере включено темное оформление, сайт тоже становится темным; если светлое — светлым. Внешне сайт похож на окно, в котором программисты вводят команды текстом. Шрифт — JetBrains Mono: в нем все буквы одной ширины, как на печатной машинке.
На чем сделан сайт
- Next.js 16
- React 19
- TypeScript
- Payload CMS 3
- PostgreSQL
- SCSS
Результаты в цифрах
- 97Скорость из 100 — Google PageSpeed, телефон
- 100Доступность из 100 — Google PageSpeed, телефон
- 100Рекомендации из 100 — Google PageSpeed, телефон
- 100SEO из 100 — Google PageSpeed, телефон
Снимок экрана: тест скорости Google (Lighthouse)
