Мені потрібно оформлення тільки цієї інформації для сайту. Може бути просто структура. Дизайн не потрібен. ТЗ для Сторінки оформлення оренди
Крок 1 з 4: Заповнення інформації
Поля для введення:
- Ім'я
- Прізвище
- Електронна пошта
- Телефон
- Адреса:
- Поля Країна (.....) та Провінція (.....) повинні бути автоматично заповнені та недоступні для редагування.
- Ці поля виділяються іншим кольором, щоб показати, що їх не можна змінити.
- Редаговані поля:
- Місто
- Вулиця
- Поштовий індекс
Дата та час отримання велосипеда:
- Вбудований календар для вибору доступних слотів.
- Підпис: "Choose a date and time to pick up your bike."
Інтерфейс:
- Кнопка "Далі" після заповнення всіх обов'язкових полів.
Підтвердження після заповнення:
1. Повідомлення:
"Ваша інформація була прийнята. Наступний крок - підписання документів. Вам потрібно буде ознайомитися та підписати два документи: Договір оренди та Договір відповідальності."
2. Кнопка: "Перейти до документів."
3. Анімація з індикатором (наприклад, обертове коло) для відображення підготовки системи.
Крок 2 з 4: Підписання документів
Інтерфейс:
- Вікно для перегляду документа, де користувач може:
- Листати документ.
- Ознайомитися з його змістом.
- Підписати за допомогою вбудованого інструмента.
Документи:
1. Перший документ: Договір оренди.
2. Другий документ: Договір відповідальності.
Кнопки:
- Для кожного документа після обов'язкової підпису відображається кнопка "Далі".
- Після завершення підписання першого документа автоматично з'являється другий.
Підтвердження після підписання:
Повідомлення:
"Усі документи були успішно підписані.
Наступні кроки - Кроки 3-4:
1. Оплата депозиту: Вам потрібно сплатити депозит у $... CAD. Цей депозит забезпечує вашу бронь велосипеда та покриває будь-які потенційні пошкодження. Депозит буде повністю повернуто, якщо велосипед буде повернуто в хорошому стані.
2. Щомісячна підписка: Після депозиту ви налаштуєте щомісячну підписку у $... CAD, яку можна скасувати в будь-який час. Підписка гарантує безперервний доступ до вашого орендованого велосипеда та послуг з обслуговування."
Кнопка: "Далі"
Крок 3 з 4: Оплата депозиту
Інформація:
- Сума депозиту:
- Вибір способу оплати:
- Stripe
- PayPal
- Square
- Mollie
Інтерфейс:
- Візуальний вибір платіжної системи (логотипи).
- Кнопка: "Оплатити депозит".
Додаткова примітка:
- Якщо у вас виникли будь-які проблеми, будь ласка, зв'яжіться з нами, використовуючи [контактну форму (посилання)].
Після натискання:
1. Повідомлення:
"Очікування підтвердження платежу. Будь ласка, зачекайте..."
2. Анімація завантаження.
Після успішної оплати:
- Повідомлення:
"Дякуємо! Ваш депозит був успішно оброблений."
Крок 4 з 4: Оформлення підписки
Щомісячна підписка:
1. Інформація:
- $. будуть списуватися щомісячно.
- Перша дата списання — день отримання велосипеда.
- Кожне наступне списання буде відбуватися на день пізніше відносно дати отримання (наприклад, якщо видача велосипеда 5-го числа, наступна оплата буде 6-го числа наступного місяця).
Інтерфейс:
- Вибір платіжної системи
- Кнопка: "Активувати підписку".
Додаткова примітка:
- Якщо у вас виникли будь-які проблеми, будь ласка, зв'яжіться з нами, використовуючи [контактну форму (посилання)].
Після натискання:
1. Повідомлення:
"Очікування підтвердження підписки. Будь ласка, зачекайте..."
2. Анімація завантаження.
Після успішної підписки:
- Повідомлення:
"Дякуємо! Ваша підписка була успішно активована."
Завершення
Повідомлення:
"Вітаємо! Ваша оренда була успішно завершена."
Відображувана інформація:
1. Номер клієнта: Генерується автоматично (наприклад, NUMBER).
2. Дата отримання велосипеда: Використовується інформація, введена раніше.
3. Адреса отримання: "......"
4. Важлива примітка: Будь ласка, принесіть дійсне посвідчення особи (паспорт або водійське посвідчення) для отримання вашого велосипеда. Велосипед не буде видано без належної ідентифікації.
5. Будьте вчасно: Переконайтеся, що ви прибули в запланований час, щоб забезпечити плавний процес отримання.
6. Контактна інформація:
- Електронна пошта: .....
- Телефон: .....
Додаткові елементи:
- Іконка підтвердження (наприклад, зелена галочка).
- Продублювати інтерфейс зворотного зв'язку
Особливості інтерфейсу:
- Можливість повернутися на попередній крок для виправлення даних.
Behance
Freelancehunt
