Головний hero-екран
Послуги прибирання
Сайт локальної клінінгової компанії з каталогом послуг і повним сценарієм заявки через WhatsApp.
РольProduct Designer & Fullstack Developer
ТипСайт бізнесу у сфері послуг із заявкою
ЛокаціяІспанія
ФокусСтворити простий і зрозумілий шлях заявки без складних форм і без backend.
СтекNext.js, TypeScript, CSS Modules
Тривалість3 тижні (1 тиждень дизайн, 2 тижні розробка)
Коротко про проєкт
- Тип проєкту
- Сайт для бізнесу у сфері послуг
- Ціль
- Чітко показати послуги прибирання та спростити для клієнта підготовку запиту і контакт.
- Ключові функції
- Структура послуг
- Логіка розрахунку
- Шлях заявки у форматі кошика
- Заявка через WhatsApp
- Адаптивний layout
- Моя роль
- Frontend-реалізація, UI-структура, логіка взаємодії та підготовка до запуску.
- Стек
- React
- TypeScript
- CSS Modules
- Результат
- Готовий до запуску сайт із зрозумілою пропозицією, інтерактивним розрахунком і прямим шляхом від вибору послуги до контакту.
Проблема
У клієнта не було сайту та структурованого способу показати послуги й приймати заявки. Запити оброблялися вручну через дзвінки й месенджери.
Рішення
Я створив сайт послуг із простим сценарієм заявки. Користувач переглядає послуги, відкриває деталі в модальному вікні та додає вибране в запит. Система формує готове повідомлення в WhatsApp із переліком послуг і сумою.
Ефект
У результаті вийшов швидкий і зрозумілий сайт, який допомагає отримувати структуровані запити без зайвих кроків.
Що я зробив
- Спроєктував повний UI/UX з нуля
- Зібрав повністю адаптивні екрани (mobile, tablet, desktop)
- Реалізував логіку кошика і розрахунок ціни
- Додав модальні вікна з деталями послуг
- Реалізував генерацію повідомлення для WhatsApp
- Зібрав повний шлях заявки без backend
- Додав багатомовність (EN / ES)
- Реалізував світлу і темну теми
Hero
Головний екран із ключовою цінністю та першим закликом до дії.
Адаптивність
Порівняння десктопного і мобільного вигляду інтерфейсу.
Десктопний вигляд
Мобільний вигляд
Структура лендінгу
Контентні блоки, які пояснюють цінність і ведуть користувача до заявки.
Кроки послуги і блоки довіри
Каталог послуг
Структурована сітка послуг із чіткою подачею та цінами.
Сітка карток послуг
Модальне вікно послуги
Фокус на вибраній послузі перед додаванням у заявку.
Модальне вікно вибраної послуги
Підсумок замовлення
Крок перевірки заявки: вибрані послуги, кількість і підсумок.
Сайдбар із вибраними послугами і сумою
FAQ та додатковий контент
Контентні блоки, що зменшують сумніви та відповідають на часті питання.
FAQ і підтримувальний контент
Контакт і конверсія
Фінальний крок із швидким оформленням заявки.
Фінальна форма заявки
Потрібен сайт, який спрощує контакт із клієнтами?
Підготую зрозумілий сайт із простим шляхом до заявки, бронювання або розмови.