We are considering next.js + possibly supabase
The current website is on WordPress.
Design of the pages that need to be created, here is the old design, it needs to be adapted to the new one:
https://www.figma.com/design/UuzQKZtJEwTexfwntetCPr/Untitled?node-id=0-1&t=jdYnSZiYis10C68h-1
How to create the new design:
https://www.figma.com/design/8YsvE5Zpjb1oJGLw1pw7Zg/SuperTrust?node-id=2037-2&t=xp6dVIG1UAN9BEly-1
Technical task: https://docs.google.com/document/d/1u4u0tqNsG7K3XA4GyBV44xdqxDt6W5tReMqhc4qC3sU/edit?usp=drivesdk
Brief technical task:
Also, I will add a competitor that we based the creation of these pages on. Basically, everything should work like his - https://justlife.com/
Project goal
Development of new pages for service booking and the personal account of the website supertrust.ae with a focus on:
• Responsiveness for all devices (desktop, tablet, mobile);
• UX improvement (quick order placement);
• Multilingual support (EN/RU/AR + RTL);
• SEO and high performance (PageSpeed ≥ 90).
Frontend architecture
Each service has a booking page with a multi-step form (from 4 to 6 steps):
Common booking steps:
1. Selecting parameters (hours, materials, object type, etc.).
2. Entering address (autocomplete, map with draggable pin).
3. Choosing date/time.
4. Contact details + payment (cash, card, Apple Pay, coupon).
5. Frequency (one-time / regular).
6. Additional steps — for specific services (selecting cleaner, schedule, etc.).
Components (React)
General:
• BookingStepper — step container.
• BookingSummarySticky — cost calculation block.
• MapComponent — Google Maps with draggable pin.
• LanguageSwitch — language toggle.
• ToastNotification — notifications (success, error, auto-save).
By steps:
• HoursCleanerSelector — hours and number of cleaners.
• MaterialSelector — material selection.
• FrequencySelector — frequency (One-time, Weekly, etc.).
• CalendarTimePicker — date/time selection.
• PhoneInput — with flags and validation.
• PromoCodeInput — promo code validation.
• PaymentMethods — payment buttons and forms.
• ClientInstructionsInput — textarea with auto-save.
API
Examples:
• GET /api/services — list of services.
• GET /api/combo-packages — list of packages.
• POST /api/booking/save — intermediate save.
• POST /api/booking/calculate — final amount calculation.
• POST /api/booking/confirm — booking confirmation.
• GET /api/translations — load localization JSON files.
• GET /api/booking/start?serviceId={id} — start booking process.
Behavior and UX
• Auto-save each step in localStorage.
• On returning to the site — modal window “Continue unfinished order?”.
• Interface reactions:
• Fields: green/red border on successful/error validation.
• Spinners: during loading, validation, and payment.
• Toast: confirmation of save/error.
🌍 Multilingual support
• Languages: EN / RU / AR (RTL).
• Translations stored in JSON, loaded via CDN.
• All text elements, buttons, errors, and notifications must support i18n.
SEO & Performance
• URL format /services/sofa-cleaning.
• Meta tags and ALT for all images.
• Schema.org markup (Service, Offer, Review).
• Lazy loading of images and icons.
• Caching and CDN delivery.
• Page load time: ≤2 seconds.
• Google PageSpeed: ≥90.
Analytics integration
• Google Analytics 4 (GTM)
• Events: start_booking, complete_booking, apply_coupon, referral_click
• Hotjar or similar
• Heatmaps, sessions
Stripe payment integration
Admin panel (admin area)
Goal
Create a user-friendly, secure, and responsive admin panel to manage all services, packages, prices, and discounts on the site without developer involvement.
Main functionality
1. Services and packages
• Adding new services/packages (name, description, images).
• Editing:
• Prices (base and old/strikethrough);
• Discounts in percentage or AED;
• Description, benefits, structure;
• Category management (e.g., Steam Cleaning, Disinfection, AC Cleaning).
• Sorting (popular, new, by descending price, etc.).
• Activate/deactivate service (visibility on the site).
2. Flexible pricing
• Ability to specify:
• Base price;
• Promotional price;
• Automatic discount percentage calculation (or vice versa);
• Enabling time-limited promotions (start/end date);
• Setting special prices based on conditions (e.g., for 2 BHK + steam cleaning — 499 AED).
3. Additional services management
• Adding extra options (e.g., “Eco-materials” +75 AED);
• Linking additional services to main services;
• Enabling/disabling from the booking form.
4. Translation editing
• Direct interface for editing texts in EN / RU / AR;
• Translations stored as key-value pairs (JSON), loaded via CDN;
• Separate tabs: “Services”, “Buttons”, “Messages”, “Hints”.
6. Orders
• Viewing all orders:
• By date, client, service, status;
• Payment details (Stripe/cash, amount, promo code);
• Mark as completed/in progress/canceled.
Technical requirements
• Interface: responsive (desktop + tablet), UI library — React (e.g., MUI, Ant Design).
• Authentication: secure login, user roles (admin/editor).
• Backend: REST API or GraphQL (compatible with current site architecture).
• Security: CSRF, JWT, HTTPS, action logging (audit log).