Рассматриваем 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.
• Page load: ≤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).