Learning Dashboard - Copy this React, Tailwind Component to your project

Learning Dashboard Interface Description Main Layout Background and Color Scheme: Use a light background with a gradient from white to a soft pastel shade (e.g., light blue or light gray). Rounded card edges and subtle shadows to give the interface a modern, minimalist look. Left Sidebar Profile Section: User avatar displayed in a circular frame. Name and role (e.g., "Student") displayed below the avatar in bold text. Buttons for profile customization: "Choose a Display Name" "Add to Bio" A prominent "Edit Profile" button with a soft background color. Navigation Options (Menu): Sections: Courses: View all enrolled courses. Progress: Monitor learning progress with metrics or badges. Profile: Update personal information. Teachers: Access to teacher or mentor contact information. Each option styled as a button with a hover effect, emphasizing the active section. Main Content Learning Overview Section: Progress Bar: A horizontal progress bar representing the current level, with a gradient color (e.g., purple to gray). Text below: "Level 2 Progress: 50%" or similar. Badges or Skills: Icons representing earned skills, achievements, or streaks (e.g., flames for effort, stars for achievements). Include a tooltip on hover describing the badge. Courses Section: Course Cards: A list of cards for each enrolled course. Each card includes: Course Title: Bold and prominent at the top (e.g., "Mathematics Grade 1"). Progress Bar: Displays percentage completion for the course in blue. Modules: A bulleted list of completed chapters or skills. Each module clickable and expandable for more details. Start Button: A primary button labeled "Start" or "Continue" for quick access. Add More Courses: A prominent card with a "+" icon and text: "Add a new course." On hover, the card displays a border highlight to encourage interaction. Right Sidebar (Optional) Upcoming Activities: A section titled "Upcoming Activities" with a list of due dates or planned learning tasks. Styled as cards or collapsible sections for each task. Support Section: Include links to: Contact support. FAQs or Help Center. Typography Fonts: Use a clean sans serif font like "Inter" or "Roboto." Headings bold and slightly larger for hierarchy (e.g., "Learning Dashboard" as H1, course titles as H2). Text Colors: Primary text in dark gray for readability. Secondary text (e.g., descriptions) in lighter gray. Spacing and Responsiveness Padding and Margins: Ensure generous spacing between sections and components. Use consistent padding within cards and containers. Mobile Friendly: Sidebar collapses into a menu. Main content adapts to a vertical scrollable layout. Purecode AI 55 mins ago NoPhoto Explain this generation Preview Code Faye 51 mins ago Learning Dashboard Update Interactive Features: Left Sidebar Navigation: Each menu item (e.g., "Courses," "Progress," "Profile," "Teachers") is clickable and serves as a shortcut to the respective sections. On hover: Highlight the selected menu item with a subtle background color change or a left aligned border. On click: Smooth scroll or direct navigation to the chosen section of the dashboard. Main Content Interactive Courses Section: Course Cards: Each card represents an enrolled course. Clicking a module inside the card opens the specific module's details. Example: Clicking "Natural Numbers" in "Mathematics Grade 1" expands to show additional topics or quizzes. The Start/Continue button: Directs the user to the course's detailed page or learning content. Add New Course: The "Add a new course" card opens a modal or new page where users can browse and enroll in available courses. Progress Section: Clicking the progress bar for a course reveals detailed metrics: Percent completion for each module. Time spent per chapter. Quiz scores or grades. A "View Full Progress Report" button provides a comprehensive overview. Profile Section: Clicking "Edit Profile" opens a dedicated profile editor. Users can: Update their display name. Change their profile picture. Add personal achievements or a bio. Teacher Section: Clicking "Teachers" shows a list of assigned mentors or instructors. Each teacher card: Displays the name, contact information, and available times for consultation. Includes a "Message" button to send a direct message or schedule a meeting. Enhanced Navigation Experience Sticky Sidebar: The left sidebar remains fixed during vertical scrolling for quick access. Scroll Spy: Active sections in the main content automatically highlight the corresponding sidebar menu item as users scroll.