General Information

• The design is prepared for implementation on Bootstrap (responsive layout).

• All styles and visual logic should match the style of the website: https://aquapartners.weblium.site/

• Color scheme, buttons, fonts — in a unified style with this site.

There is a visualization of each screen in the attachment, created in Paint of the sample design, which needs to be recreated in Figma for the developer on Bootstrap.

Screen 1 — Widget Icon

Functionality:

• Simple widget for embedding on any website without disrupting the site's styles.

• The button to open the widget is placed on the right and leads to Screen 2.

Screen 2 — Login / Start Ordering

Goal: Enter login and password to proceed to order placement or select "Order without registration".

Blocks:

• Title: "To place an order, enter your Login and Password"

• Login field

Password field

• "Login" button

• Links: "Forgot login details?", "Register…" leading to Telegram chat

• Inactive button "Order without registration"

• At the bottom: phrase with link — "By continuing, I agree to the processing of personal data"

Screen 3 — Enter Recipient Information

Goal: Enter full name, email, phone, delivery address.

Blocks:

• Your name

• E-mail

• Phone number

• List of active addresses (with radio button selection, e.g., Address 1, Address 2)

• In each address block:

  • City

  • Street + house

  • Entrance, floor, apartment / office, intercom / code

• "Add new address" button at the bottom

Screen 3.1 — Client Personal Cabinet (Order History)

Functionality:

• Display of money and tariff balance (debt/overpayment)

• Statistics: number of orders

• Information about the last order: list of products, quantity, amount, driver, address

• "Repeat last order" button

• "Place new order" button (leads to Screen 4)

Screen 4 — Select Products

Goal: Choose products for a new order

Blocks:

• Dropdown list with product categories

• Selected products from the list: name, quantity +/-, price, "X" button (delete)

• Order total

• Discount (if available)

• Amount to pay

• Balance (overpayment/debt)

• "Next" button

Screen 4.1 — Delivery and Payment Details

Goal: Choose date, time, payment method, leave comment

Blocks:

• Select date (next 2 days available + button to choose another date)

• Select time (default: 08:00–21:00, or choose interval)

• Payment method (only these options are used):

  • Cash

  • Non-cash card

  • Non-cash by agreement

  • Terminal

• Comment field

• "Place order" button

Screen 5 — Order Review

Goal: Review entered data before confirmation

Blocks:

• Delivery address (with option to change)

• Phone, delivery date, time, payment method

• List of products, quantity, price

• Summary: discount, total to pay

• Order comment (displayed)

• "Back" button

• "Confirm" button

Screen 6 — Error During Order Placement

Goal: Show the reason why the order was not placed

Content:

• Title: "Order not placed"

• Text with the reason (e.g., minimum number of "Equipment" products: 3)

• Warning sign illustration

• "Back" button

Screen 7 — Order Confirmed

Goal: Notify the user of successful placement

Content:

• Order number

• Text: "Order has been placed. Expect delivery at the specified time"

• Confirmation illustration

• "Understood" button