Поток — Кейс | Adel Bashiroff

Задача проекта

Идея

Услугу автоматизации сложно объяснить словами: «настрою цепочку» ничего не говорит клиенту. Поэтому вместо описания на странице стоит работающий пример: форма, а рядом четыре шага, которые загораются один за другим. Светлая спокойная тема и зелёный акцент подчёркивают, что рутина уходит.

Реализация

Чистые HTML, CSS и JavaScript без фреймворков и сборки. Демо проверяет поля, не даёт запустить цепочку дважды, выводит данные пользователя через textContent и учитывает prefers-reduced-motion. Кнопка «Взять в работу» в сообщении меняет статус строки в таблице, как в настоящей системе.

Что умеет

Рабочая демо-цепочка из четырёх шагов: заявка, таблица, Telegram, письмо клиенту

Форма с валидацией и выбором услуги, номера заявок растут с каждой отправкой

Интерактивная таблица заявок со статусами «Новая» и «В работе»

Сообщение в стиле Telegram с кнопкой, которая меняет статус в таблице

Калькулятор экономии: время на рутину, стоимость часа и срок окупаемости

Описание услуг, этапов работы и трёх пакетов с ценами

Раздел с вопросами на нативных details без лишнего JavaScript

Адаптив, управление с клавиатуры и поддержка prefers-reduced-motion

Скриншоты проекта

Мобильная версия

На телефоне форма и четыре шага выстраиваются в одну колонку, таблица заявок сжимается по ширине экрана, а карточки тарифов идут одна под другой.

Демо работает так же, как на компьютере, а горизонтального скролла нет.

Результат работы

0

зависимостей: чистые HTML, CSS и JavaScript

4

шага в демо-цепочке заявки

3

пакета услуг с понятной ценой

1

клик до запуска демо

Поток — лендинг услуги автоматизации с рабочей демкой цепочки заявки