Розглядаємо next.js + можливо supabase
Сам сайт зараз на вордпрес.
Дизайн сторінок, які потрібно зробити, тут ще зі старим дизайном, потрібно зробити під новий:
https://www.figma.com/design/UuzQKZtJEwTexfwntetCPr/Untitled?node-id=0-1&t=jdYnSZiYis10C68h-1
Як зробити новий дизайн:
https://www.figma.com/design/8YsvE5Zpjb1oJGLw1pw7Zg/SuperTrust?node-id=2037-2&t=xp6dVIG1UAN9BEly-1">https://www.figma.com/design/8YsvE5Zpjb1oJGLw1pw7Zg/SuperTrust?node-id=2037-2&t=xp6dVIG1UAN9BEly-1
Тз: https://docs.google.com/document/d/1u4u0tqNsG7K3XA4GyBV44xdqxDt6W5tReMqhc4qC3sU/edit?usp=drivesdk
Коротке тз:
Також додам конкурента, на якого ми орієнтувалися для створення цих сторінок. В принципі все має працювати як у нього - https://justlife.com/
Мета проекту
Розробка нових сторінок для замовлення послуг і особистого кабінету сайту supertrust.ae з акцентом на:
• адаптивність під усі пристрої (desktop, tablet, mobile);
• покращення UX (швидке оформлення замовлення);
• підтримку багатомовності (EN/RU/AR + RTL);
• SEO та високу продуктивність (PageSpeed ≥ 90).
Архітектура фронтенду
Кожна послуга має сторінку бронювання з формою у кілька кроків (від 4 до 6):
Загальні кроки бронювання:
1. Вибір параметрів (години, матеріали, тип об’єкта тощо).
2. Введення адреси (автозаповнення, карта з draggable pin).
3. Вибір дати/часу.
4. Контактні дані + оплата (готівка, карта, Apple Pay, купон).
5. Частота (одноразово / регулярно).
6. Додаткові кроки — для окремих послуг (вибір клінера, розклад тощо).
Компоненти (React)
Загальні:
• BookingStepper — контейнер кроків.
• BookingSummarySticky — блок з розрахунком вартості.
• MapComponent — Google Maps з draggable піном.
• LanguageSwitch — перемикач мови.
• ToastNotification — сповіщення (успіх, помилка, автозбереження).
За кроками:
• HoursCleanerSelector — години та кількість клінерів.
• MaterialSelector — вибір матеріалів.
• FrequencySelector — регулярність (One-time, Weekly тощо).
• CalendarTimePicker — вибір дати/часу.
• PhoneInput — з прапорами та валідацією.
• PromoCodeInput — валідація промокоду.
• PaymentMethods — кнопки та форми оплати.
• ClientInstructionsInput — textarea з автозбереженням.
API
Приклади:
• GET /api/services — список послуг.
• GET /api/combo-packages — список пакетів.
• POST /api/booking/save — проміжне збереження.
• POST /api/booking/calculate — розрахунок кінцевої суми.
• POST /api/booking/confirm — підтвердження бронювання.
• GET /api/translations — завантаження JSON-файлів локалізацій.
• GET /api/booking/start?serviceId={id} — перехід до бронювання.
Поведение и UX
• Автозбереження кожного кроку в localStorage.
• При поверненні на сайт — модальне вікно “Продовжити незавершене замовлення?”.
• Реакції інтерфейсу:
• Поля: зелена/червона обводка при успішній/помилковій валідації.
• Спінери: при завантаженні, валідації та оплаті.
• Toast: підтвердження збереження/помилки.
🌍 Багатомовність
• Мови: EN / RU / AR (RTL).
• Переклади зберігаються у JSON, підвантажуються через CDN.
• Всі текстові елементи, кнопки, помилки та повідомлення повинні підтримувати i18n.
SEO & Performance
• URL виду /services/sofa-cleaning.
• Мета-теги та ALT для всіх зображень.
• Schema.org розмітка (Service, Offer, Review).
• Lazy loading зображень та іконок.
• Кешування та завантаження через CDN.
• Швидкість завантаження сторінки: ≤2 секунди.
• Google PageSpeed: ≥90.
Інтеграція аналітики
• Google Analytics 4 (GTM)
• Події: start_booking, complete_booking, apply_coupon, referral_click
• Hotjar або аналог
• Теплові карти, сесії
Підключення оплати через Stripe
Панель адміністратора (адмінка)
Мета
Створити зручну, безпечну та адаптивну панель адміністратора для управління всіма послугами, пакетами, цінами, знижками сайту, без залучення розробника.
Основний функціонал
1. Послуги та пакети
• Додавання нових послуг/пакетів (назва, опис, зображення).
• Редагування:
• Цін (базова та стара/зачеркнута);
• Знижки у відсотках або в AED;
• Опис, переваги, структура;
• Управління категоріями (наприклад: Steam Cleaning, Disinfection, AC Cleaning).
• Сортування (популярні, новинки, за зменшенням ціни тощо).
• Активація/деактивація послуги (видимість на сайті).
2. Гнучке ціноутворення
• Можливість вказувати:
• Базову ціну;
• Акційну ціну;
• Автоматичний розрахунок відсотка знижки (або навпаки);
• Включення тимчасових акцій (дата початку/завершення);
• Налаштування спеціальних цін за умовами (наприклад, для 2 BHK + steam cleaning — 499 AED).
3. Управління додатковими послугами
• Додавання додаткових опцій (наприклад, “Еко-матеріали” +75 AED);
• Прив’язка дод.
послуг до основної;
• Включення/відключення з форми бронювання.
4. Редагування перекладів
• Прямий інтерфейс для редагування текстів на EN / RU / AR;
• Переклади зберігаються у вигляді ключ-значення (JSON), завантажуються через CDN;
• Окремі вкладки: “Послуги”, “Кнопки”, “Повідомлення”, “Підказки”.
6. Замовлення
• Перегляд усіх замовлень:
• За датою, клієнтом, послугою, статусом;
• Деталі оплати (Stripe/готівка, сума, промокод);
• Позначка виконано/у процесі/скасовано.
Технічні вимоги
• Інтерфейс: адаптивний (десктоп + планшет), UI-бібліотека — React (наприклад, MUI, Ant Design).
• Аутентифікація: захищений вхід, ролі користувачів (admin/editor).
• Бекенд: REST API або GraphQL (сумісний із поточною архітектурою сайту).
• Безпека: CSRF, JWT, HTTPS, логування дій (audit log).