UX Wireframe Layouts & Portal Mockup Specs

Overview

This specification details page structures and wireframe layout architectures for Learnille’s portals (student, instructor, consultant, admin).

🖼 Page Layout Architectures

1. Student Course Player Page Layout

+-------------------------------------------------------------------------------+
| Top Header: Logo | Course Title | Progress Bar (65%) | Dashboard Link         |
+------------------------------------------------------+------------------------+
|                                                      | Sidebar: Curriculum    |
|                                                      | + Section 1: Intro (v) |
|              Main HLS Video Viewport                 |   - Item 1.1 (Done)    |
|                (16:9 Aspect Ratio)                   |   - Item 1.2 (Active)  |
|                                                      | + Section 2: Advanced  |
|                                                      |                        |
+------------------------------------------------------+------------------------+
| Tabs: Overview | Resources | Real-time Comments (InstantDB) | Q&A             |
| Video Title & Instructor Bio                                                  |
+-------------------------------------------------------------------------------+

2. Consultant Availability & Slot Configurator

+-------------------------------------------------------------------------------+
| Navigation Header: Consultant Portal > Availability Management               |
+-------------------------------------------------------------------------------+
| Global Settings: Timezone (UTC+1 Lagos) | Minimum Notice (2 Hours)             |
+-------------------------------------------------------------------------------+
| Weekly Recurring Schedule:                                                    |
| [x] Monday    : 09:00 - 12:00 [ + Add Window ] [ 13:00 - 17:00 ]              |
| [x] Tuesday   : 10:00 - 16:00 [ + Add Window ]                                |
| [ ] Wednesday : Off                                                           |
|                                                                               |
| Specific Date Override Exceptions:                                            |
| + Add Date Override (e.g., Block 2026-08-15)                                  |
+-------------------------------------------------------------------------------+