Мне нужно оформление только этой информации для сайта. Может быть просто структура. Дизайн не нужен. ТЗ для Страницы оформления аренды
Step 1 of 4: Заполнение информации
Поля для ввода:
- First Name
- Last Name
- Email
- Phone
- Address:
- Поля Country (.....) и Province (.....) должны быть автоматически заполнены и недоступны для редактирования.
- Эти поля выделяются другим цветом, чтобы показать, что их нельзя изменить.
- Редактируемые поля:
- City
- Street
- Postal Code
Дата и время отбора велосипеда:
- Встроенный календарь для выбора доступных слотов.
- Подпись: "Choose a date and time to pick up your bike."
Интерфейс:
- Кнопка "Next" после заполнения всех обязательных полей.
Подтверждение после заполнения:
1. Сообщение:
"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. Кнопка: "Proceed to Documents."
3. Анимация с индикатором (например, вращающийся круг) для отображения подготовки системы.
Step 2 of 4: Подписание документов
Интерфейс:
- Окно для просмотра документа, где пользователь может:
- Листать документ.
- Ознакомиться с его содержанием.
- Подписать с помощью встроенного инструмента.
Документы:
1. Первый документ: Rental Agreement.
2. Второй документ: Liability Agreement.
Кнопки:
- Для каждого документа после обязательной подписи отображается кнопка "Next".
- После завершения подписания первого документа автоматически появляется второй.
Подтверждение после подписания:
Сообщение:
"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."
Кнопка: "Next"
Step 3 of 4: Оплата депозита
Информация:
- Сумма депозита:
- Выбор способа оплаты:
- Stripe
- PayPal
- Square
- Mollie
Интерфейс:
- Визуальный выбор платёжной системы (логотипы).
- Кнопка: "Pay Deposit".
Additional Note:
- If you encounter any issues, please contact us using the [contact form (ссылка)].
После нажатия:
1. Сообщение:
"Waiting for payment confirmation. Please wait..."
2. Анимация загрузки.
После успешной оплаты:
- Сообщение:
"Thank you! Your deposit has been successfully processed."
Step 4 of 4: Оформление подписки
Monthly Subscription:
1. Информация:
- $. будут списываться ежемесячно.
- Первая дата списания — день получения велосипеда.
- Каждое последующее списание будет происходить на день позже относительно даты получения (например, если выдача велосипеда 5-го числа, следующая оплата будет 6-го числа следующего месяца).
Интерфейс:
- Выбор платёжной системы
- Кнопка: "Activate Subscription".
Additional Note:
- If you encounter any issues, please contact us using the [contact form (ссылка)].
После нажатия:
1. Сообщение:
"Waiting for subscription confirmation. Please wait..."
2. Анимация загрузки.
После успешной подписки:
- Сообщение:
"Thank you! Your subscription has been successfully activated."
Завершение
Сообщение:
"Congratulations! Your rental has been successfully completed."
Отображаемая информация:
1. Client Number: Генерируется автоматически (например, NUMBER).
2. Bike Pickup Date: Используется информация, введённая ранее.
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: .....
Дополнительные элементы:
- Иконка подтверждения (например, зелёная галочка).
- Продублировать интерфейс обратной связи
Особенности интерфейса:
- Возможность вернуться на предыдущий шаг для исправления данных.
Behance
Freelancehunt
