I need the design of only this information for the website. It can be just a structure. No design is needed. Technical specifications for the Rental Agreement Page
Step 1 of 4: Filling in Information
Input fields:
- First Name
- Last Name
- Email
- Phone
- Address:
- The Country (.....) and Province (.....) fields should be auto-filled and not editable.
- These fields are highlighted in a different color to indicate that they cannot be changed.
- Editable fields:
- City
- Street
- Postal Code
Date and time for bike pickup:
- Built-in calendar to select available slots.
- Label: "Choose a date and time to pick up your bike."
Interface:
- "Next" button after filling in all mandatory fields.
Confirmation after filling in:
1. Message:
"Your information has been accepted. The next step is signing the documents. You will need to review and sign two documents: the Rental Agreement and the Liability Agreement."
2. Button: "Proceed to Documents."
3. Animation with an indicator (e.g., spinning circle) to show system preparation.
Step 2 of 4: Signing Documents
Interface:
- Document viewing window where the user can:
- Scroll through the document.
- Familiarize themselves with its content.
- Sign using the built-in tool.
Documents:
1. First document: Rental Agreement.
2. Second document: Liability Agreement.
Buttons:
- For each document, a "Next" button appears after mandatory signing.
- After completing the signing of the first document, the second one appears automatically.
Confirmation after signing:
Message:
"All documents have been successfully signed.
The next steps are Steps 3-4:
1. Deposit Payment: You need to pay a deposit of $... CAD. This deposit secures your bike reservation and covers any potential damages. The deposit will be fully refunded if the bike is returned in good condition.
2. Monthly Subscription: After the deposit, you will set up a monthly subscription of $... CAD, which can be canceled at any time. The subscription guarantees continuous access to your rental bike and maintenance services."
Button: "Next"
Step 3 of 4: Deposit Payment
Information:
- Deposit amount:
- Payment method selection:
- Stripe
- PayPal
- Square
- Mollie
Interface:
- Visual selection of payment system (logos).
- Button: "Pay Deposit".
Additional Note:
- If you encounter any issues, please contact us using the [contact form (link)].
After clicking:
1. Message:
"Waiting for payment confirmation. Please wait..."
2. Loading animation.
After successful payment:
- Message:
"Thank you! Your deposit has been successfully processed."
Step 4 of 4: Subscription Setup
Monthly Subscription:
1. Information:
- $. will be charged monthly.
- The first charge date is the day of bike pickup.
- Each subsequent charge will occur one day later relative to the pickup date (for example, if the bike is picked up on the 5th, the next payment will be on the 6th of the following month).
Interface:
- Payment system selection
- Button: "Activate Subscription".
Additional Note:
- If you encounter any issues, please contact us using the [contact form (link)].
After clicking:
1. Message:
"Waiting for subscription confirmation. Please wait..."
2. Loading animation.
After successful subscription:
- Message:
"Thank you! Your subscription has been successfully activated."
Completion
Message:
"Congratulations! Your rental has been successfully completed."
Displayed information:
1. Client Number: Automatically generated (e.g., NUMBER).
2. Bike Pickup Date: Uses information entered earlier.
3. Pickup Address: "......"
4. Important Note: Please bring a valid ID (passport or driver’s license) to pick up your bike. The bike will not be issued without proper identification.
5. Be On Time: Make sure to arrive at the scheduled time to ensure a smooth pickup process.
6. Contact Information:
- Email: .....
- Phone: .....
Additional elements:
- Confirmation icon (e.g., green checkmark).
- Duplicate feedback interface
Interface features:
- Ability to return to the previous step to correct data.
Behance 
Freelancehunt
