MRSHKNMurashkin Studio
Обсудить сайт
← Все работы
Пример студии

Флагшток: продающая страница 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)

Отчет PageSpeed Insights, мобильные: 97, 100, 100, 100

Яндекс Метрика и Google Analytics 4 считают посещения сайта и для этого сохраняют в вашем браузере cookie — маленькие файлы. Включим их, только если вы согласны. Подробнее — в политике обработки персональных данных.