Next.js Landing Page Development
Budget: €30 – €250 EUR
Вот перевод вашего сообщения на английский
We are considering using Next.js along with possibly Supabase.
The current website is built with WordPress. Supertrust.ae
Here are the pages that need to be developed – the design shown here is still the old version, and it needs to be updated to match the new one:
Old design: https://www.figma.com/design/UuzQKZtJEwTexfwntetCPr/Untitled?node-id=0-1&t=jdYnSZiYis10C68h-1
New design reference:
https://www.figma.com/design/8YsvE5Zpjb1oJGLw1pw7Zg/SuperTrust?node-id=2037-2&t=xp6dVIG1UAN9BEly-1
⸻
We’ve also included a competitor site we referenced when designing these pages — everything should function similarly to:
https://justlife.com/
⸻
Project Goal
Develop new booking and user account pages for supertrust.ae with a focus on:
• Full responsiveness (desktop, tablet, mobile)
• Improved UX for fast and smooth booking
• Multi-language support (EN/RU/AR + RTL)
• SEO and high performance (Google PageSpeed ≥ 90)
⸻
Frontend Architecture
Each service has a multi-step booking page (4–6 steps), including:
1. Service parameters (duration, materials, property type, etc.)
2. Address input (autocomplete + draggable map pin)
3. Date & time selection
4. Contact & payment (cash, card, Apple Pay, coupon)
5. Frequency (one-time or recurring)
6. Additional steps (e.g., select cleaner, custom schedule)
⸻
Components (React)
General:
• BookingStepper – container for steps
• BookingSummarySticky – price calculation block
• MapComponent – Google Maps with draggable pin
• LanguageSwitch – language toggle
• ToastNotification – for status messages
Step-specific:
• HoursCleanerSelector
• MaterialSelector
• FrequencySelector
• CalendarTimePicker
• PhoneInput with validation and flags
• PromoCodeInput
• PaymentMethods
• ClientInstructionsInput
⸻
API Examples
• GET /api/services – service list
• GET /api/combo-packages – combo offers
• POST /api/booking/save – save draft
• POST /api/booking/calculate – calculate total
• POST /api/booking/confirm – finalize booking
• GET /api/translations – fetch i18n JSONs
• GET /api/booking/start?serviceId={id} – start booking
⸻
UX & Behavior
• Auto-save each step to localStorage
• Modal popup: “Resume your unfinished booking?”
• Visual feedback:
• Green/red borders for valid/invalid inputs
• Spinners for loading/validation/payment
• Toasts for success/error messages
⸻
Multilingual Support
• Languages: EN / RU / AR (RTL)
• Translations in JSON, loaded via CDN
• All UI texts, buttons, errors, notifications must support i18n
⸻
SEO & Performance
• Clean URLs: /services/sofa-cleaning
• Meta tags & ALT attributes
• Schema.org structured data (Service, Offer, Review)
• Lazy loading images/icons
• CDN for caching/delivery
• Load time: ≤2 seconds
• PageSpeed: ≥90
⸻
Analytics Integration
• Google Analytics 4 (GTM)
• Events: start_booking, complete_booking, apply_coupon, referral_click
• Hotjar or alternative (heatmaps, session recording)
⸻
Payment Integration
• Stripe integration (card, Apple Pay)
⸻
Admin Panel
Goal: Provide a secure, flexible, responsive dashboard to manage services, pricing, and content without developer involvement.
Core features:
1. Services & Packages
• Add/edit services with images, pricing, discounts, categories, visibility
2. Flexible Pricing
• Set base/sale prices, discounts in %, schedule promos, special conditions
3. Add-ons
• Add/edit optional services (e.g., “Eco materials” +75 AED), link to main services
4. Translations Editor
• Edit EN/RU/AR keys (stored in JSON), organized tabs (Buttons, Errors, Tooltips)
5. Orders Management
• Filter by client, service, status; view payment info; mark complete/cancelled
Tech requirements:
• Responsive UI (React with MUI or Ant Design)
• Secure auth with roles (admin/editor)
• Backend via REST API or GraphQL
• Security: CSRF, JWT, HTTPS, audit log
We are considering using Next.js along with possibly Supabase.
The current website is built with WordPress. Supertrust.ae
Here are the pages that need to be developed – the design shown here is still the old version, and it needs to be updated to match the new one:
Old design: https://www.figma.com/design/UuzQKZtJEwTexfwntetCPr/Untitled?node-id=0-1&t=jdYnSZiYis10C68h-1
New design reference:
https://www.figma.com/design/8YsvE5Zpjb1oJGLw1pw7Zg/SuperTrust?node-id=2037-2&t=xp6dVIG1UAN9BEly-1
⸻
We’ve also included a competitor site we referenced when designing these pages — everything should function similarly to:
https://justlife.com/
⸻
Project Goal
Develop new booking and user account pages for supertrust.ae with a focus on:
• Full responsiveness (desktop, tablet, mobile)
• Improved UX for fast and smooth booking
• Multi-language support (EN/RU/AR + RTL)
• SEO and high performance (Google PageSpeed ≥ 90)
⸻
Frontend Architecture
Each service has a multi-step booking page (4–6 steps), including:
1. Service parameters (duration, materials, property type, etc.)
2. Address input (autocomplete + draggable map pin)
3. Date & time selection
4. Contact & payment (cash, card, Apple Pay, coupon)
5. Frequency (one-time or recurring)
6. Additional steps (e.g., select cleaner, custom schedule)
⸻
Components (React)
General:
• BookingStepper – container for steps
• BookingSummarySticky – price calculation block
• MapComponent – Google Maps with draggable pin
• LanguageSwitch – language toggle
• ToastNotification – for status messages
Step-specific:
• HoursCleanerSelector
• MaterialSelector
• FrequencySelector
• CalendarTimePicker
• PhoneInput with validation and flags
• PromoCodeInput
• PaymentMethods
• ClientInstructionsInput
⸻
API Examples
• GET /api/services – service list
• GET /api/combo-packages – combo offers
• POST /api/booking/save – save draft
• POST /api/booking/calculate – calculate total
• POST /api/booking/confirm – finalize booking
• GET /api/translations – fetch i18n JSONs
• GET /api/booking/start?serviceId={id} – start booking
⸻
UX & Behavior
• Auto-save each step to localStorage
• Modal popup: “Resume your unfinished booking?”
• Visual feedback:
• Green/red borders for valid/invalid inputs
• Spinners for loading/validation/payment
• Toasts for success/error messages
⸻
Multilingual Support
• Languages: EN / RU / AR (RTL)
• Translations in JSON, loaded via CDN
• All UI texts, buttons, errors, notifications must support i18n
⸻
SEO & Performance
• Clean URLs: /services/sofa-cleaning
• Meta tags & ALT attributes
• Schema.org structured data (Service, Offer, Review)
• Lazy loading images/icons
• CDN for caching/delivery
• Load time: ≤2 seconds
• PageSpeed: ≥90
⸻
Analytics Integration
• Google Analytics 4 (GTM)
• Events: start_booking, complete_booking, apply_coupon, referral_click
• Hotjar or alternative (heatmaps, session recording)
⸻
Payment Integration
• Stripe integration (card, Apple Pay)
⸻
Admin Panel
Goal: Provide a secure, flexible, responsive dashboard to manage services, pricing, and content without developer involvement.
Core features:
1. Services & Packages
• Add/edit services with images, pricing, discounts, categories, visibility
2. Flexible Pricing
• Set base/sale prices, discounts in %, schedule promos, special conditions
3. Add-ons
• Add/edit optional services (e.g., “Eco materials” +75 AED), link to main services
4. Translations Editor
• Edit EN/RU/AR keys (stored in JSON), organized tabs (Buttons, Errors, Tooltips)
5. Orders Management
• Filter by client, service, status; view payment info; mark complete/cancelled
Tech requirements:
• Responsive UI (React with MUI or Ant Design)
• Secure auth with roles (admin/editor)
• Backend via REST API or GraphQL
• Security: CSRF, JWT, HTTPS, audit log