This image displays two separate modal dialogs or overlay forms, one for “Login” and one for “Register,” indicating user authentication functionalities on a website. Both forms are presented against a blurred background that appears to be part of a property listing page.

I. Top Modal: Login Form

  • Title: “Login”
  • Close Button: An “x” icon in the top right corner, allowing the user to close the modal.
  • Welcome Message: “Welcome back Please log in” positioned on the left side of the modal, next to an illustration.
  • Illustration: A simple line-art illustration of a person sitting on a chair with a book on a shelf, and hanging light bulbs.
  • Input Fields:
    • “Enter username or email” field with a person icon.
    • “Enter Password” field with a padlock icon.
  • “Lost Your Password?” Link: A clickable link for password recovery.
  • “Keep me signed in” Checkbox: A checkbox to maintain the login session.
  • “Login” Button: A prominent red button to submit the login credentials.
  • “Don’t you have an account? Register” Link: A link to navigate to the registration form for new users.

II. Bottom Modal: Register Form

  • Title: “Register”
  • Close Button: An “x” icon in the top right corner, allowing the user to close the modal.
  • Welcome Message: “Create an account” positioned on the left side of the modal, next to an illustration.
  • Illustration: A simple line-art illustration of a person sitting on a chair with a plant, suggesting a cozy or new beginning theme.
  • Input Fields:
    • “User Name” field.
    • “Email” field with an envelope icon.
    • “Mobile#” field with a phone icon.
  • Region-Specific Mobile Number Instruction: A note providing specific instructions for users from Malaysia: “If you are from Malaysia and your mobile number is 0198280131, please choose MY +6 and enter 0198280131. Please ensure that this number has access to WhatsApp so that visitors can contact you through the platform.”
  • Password Fields:
    • “Password” field with a padlock icon.
    • “Re-enter Password” field with a padlock icon.
  • “Select Role” Dropdown: A dropdown menu with an icon, allowing the user to choose their role (e.g., user, agent, agency). It is emphasized that with different roles selected, users will have a different dashboard, side menu, and authority within the platform.
  • Terms and Privacy Policy Checkbox: “I have read and accept the Terms and Privacy Policy” checkbox, likely required for registration.
  • “Sign Up” Button: A prominent red button to complete the registration process.
  • “Already have an account? Login” Link: A link to navigate back to the login form if the user already has an account.

Both modals feature a clean design with a mix of text fields, buttons, and relevant icons, centered over a blurred background.