Rozważamy next.js + możliwe supabase
Sam serwis jest obecnie na WordPressie.
Projekt stron, które trzeba wykonać, jest jeszcze na starym designie, trzeba go dostosować do nowego:
https://www.figma.com/design/UuzQKZtJEwTexfwntetCPr/Untitled?node-id=0-1&t=jdYnSZiYis10C68h-1
Jak zrobić nowy design:
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
Specyfikacja: https://docs.google.com/document/d/1u4u0tqNsG7K3XA4GyBV44xdqxDt6W5tReMqhc4qC3sU/edit?usp=drivesdk
Krótka specyfikacja:
Dodam też konkurenta, na którego się opieraliśmy przy tworzeniu tych stron. W zasadzie wszystko powinno działać jak u niego - https://justlife.com/
Cel projektu
Opracowanie nowych stron do zamawiania usług i panelu klienta serwisu supertrust.ae z naciskiem na:
• responsywność na wszystkie urządzenia (desktop, tablet, mobile);
• poprawę UX (szybkie składanie zamówienia);
• obsługę wielojęzyczności (EN/RU/AR + RTL);
• SEO i wysoką wydajność (PageSpeed ≥ 90).
Architektura frontendu
Każda usługa ma stronę rezerwacji z formularzem w kilku krokach (od 4 do 6):
Ogólne kroki rezerwacji:
1. Wybór parametrów (godziny, materiały, typ obiektu itp.).
2. Wprowadzenie adresu (autouzupełnianie, mapa z draggable pin).
3. Wybór daty/godziny.
4. Dane kontaktowe + płatność (gotówka, karta, Apple Pay, kupon).
5. Częstotliwość (jednorazowo / regularnie).
6. Dodatkowe kroki — dla poszczególnych usług (wybór sprzątacza, harmonogram itp.).
Komponenty (React)
Ogólne:
• BookingStepper — kontener kroków.
• BookingSummarySticky — blok z kalkulacją kosztów.
• MapComponent — Google Maps z draggable pin.
• LanguageSwitch — przełącznik języków.
• ToastNotification — powiadomienia (sukces, błąd, autosave).
Po krokach:
• HoursCleanerSelector — godziny i liczba sprzątaczy.
• MaterialSelector — wybór materiałów.
• FrequencySelector — częstotliwość (One-time, Weekly itp.).
• CalendarTimePicker — wybór daty/godziny.
• PhoneInput — z flagami i walidacją.
• PromoCodeInput — walidacja kodu promocyjnego.
• PaymentMethods — przyciski i formularze płatności.
• ClientInstructionsInput — textarea z autosave.
API
Przykłady:
• GET /api/services — lista usług.
• GET /api/combo-packages — lista pakietów.
• POST /api/booking/save — tymczasowe zapisanie.
• POST /api/booking/calculate — obliczenie końcowej kwoty.
• POST /api/booking/confirm — potwierdzenie rezerwacji.
• GET /api/translations — ładowanie plików JSON z lokalizacjami.
• GET /api/booking/start?serviceId={id} — przejście do rezerwacji.
Zachowanie i UX
• Autosave każdego kroku w localStorage.
• Po powrocie na stronę — okno modalne „Kontynuować niedokończone zamówienie?”.
• Reakcje interfejsu:
• Pola: zielona/czerwona obwódka przy poprawnej/błędnej walidacji.
• Spinner: podczas ładowania, walidacji i płatności.
• Toast: potwierdzenie zapisania/błędu.
🌍 Wielojęzyczność
• Języki: EN / RU / AR (RTL).
• Tłumaczenia przechowywane w JSON, ładowane przez CDN.
• Wszystkie elementy tekstowe, przyciski, błędy i powiadomienia muszą obsługiwać i18n.
SEO & Wydajność
• Adres URL w formacie /services/sofa-cleaning.
• Meta-tagi i ALT dla wszystkich obrazów.
• Schema.org markup (Service, Offer, Review).
• Lazy loading obrazów i ikon.
• Caching i ładowanie przez CDN.
• Czas ładowania strony: ≤2 sekundy.
• Google PageSpeed: ≥90.
Integracja analityki
• Google Analytics 4 (GTM)
• Wydarzenia: start_booking, complete_booking, apply_coupon, referral_click
• Hotjar lub podobny
• Mapy cieplne, sesje
Podłączenie płatności przez Stripe
Panel administratora (panel zarządzania)
Cel
Stworzyć wygodny, bezpieczny i responsywny panel administratora do zarządzania wszystkimi usługami, pakietami, cenami, rabatami serwisu, bez konieczności angażowania programisty.
Podstawowa funkcjonalność
1. Usługi i pakiety
• Dodawanie nowych usług/pakietów (nazwa, opis, obrazki).
• Edycja:
• Ceny (podstawowa i stara/z przekreśleniem);
• Rabat w procentach lub w AED;
• Opis, zalety, struktura;
• Zarządzanie kategoriami (np.: Czyszczenie parowe, Dezynfekcja, Czyszczenie klimatyzacji).
• Sortowanie (popularne, nowości, po malejącej cenie itp.).
• Aktywacja/dezaktywacja usługi (widoczność na stronie).
2. Elastyczne ustalanie cen
• Możliwość wskazania:
• Ceny podstawowej;
• Ceny promocyjnej;
• Automatycznego obliczania rabatu procentowego (lub odwrotnie);
• Włączania promocji czasowych (data rozpoczęcia/zakończenia);
• Ustawiania specjalnych cen według warunków (np.: dla 2 BHK + steam cleaning — 499 AED).
3. Zarządzanie usługami dodatkowymi
• Dodawanie opcji dodatkowych (np.: „Materiały ekologiczne” +75 AED);
• Powiązanie usług dodatkowych z główną;
• Włączanie/wyłączanie z formularza rezerwacji.
4. Edycja tłumaczeń
• Bezpośredni interfejs do edycji tekstów w EN / RU / AR;
• Tłumaczenia przechowywane jako klucz-wartość (JSON), ładowane przez CDN;
• Oddzielne zakładki: „Usługi”, „Przyciski”, „Komunikaty”, „Podpowiedzi”.
6. Zamówienia
• Podgląd wszystkich zamówień:
• Według daty, klienta, usługi, statusu;
• Szczegóły płatności (Stripe/pieniądze, kwota, kod promocyjny);
• Oznaczenie wykonane/w trakcie/anulowane.
Wymagania techniczne
• Interfejs: responsywny (desktop + tablet), biblioteka UI — React (np.: MUI, Ant Design).
• Uwierzytelnianie: bezpieczne logowanie, role użytkowników (admin/editor).
• Backend: REST API lub GraphQL (zgodny z obecną architekturą serwisu).
• Bezpieczeństwo: CSRF, JWT, HTTPS, logowanie działań (audit log).