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

Progress When clicked: Redirects to a detailed progress overview page. Page interface: Top Section: A circular chart (or horizontal bar) displaying the total lessons completed compared to the target. Middle Section: A list of courses divided into categories like "In Progress" and "Completed." Each course is displayed with a small progress bar and details about the completed lessons or chapters. Bottom Section: Insights such as streaks, milestones achieved, and upcoming tasks, visually enhanced with icons and tooltips. Profile When clicked: Opens a personalized profile page. Page interface: Top Section: A large avatar with a soft glow effect, name, and role (e.g., "Student") displayed prominently. Editable Fields: Key information such as email, phone number, and bio presented in rounded text fields. These fields become editable with a single click. Action Buttons: Buttons like "Change Password" and "Update Details" with smooth animations and a confirmation popup for critical updates. Teachers When clicked: Opens a directory of teachers or mentors. Page interface: Teacher Cards: Each teacher displayed as a card with a profile picture, name, and contact information (e.g., email, phone). Contact Options: A prominent "Contact" or "Send Message" button on each card, styled with gradient colors and hover effects. Detailed View: Clicking on a teacher’s card opens a popup or new page showing more details, such as office hours, subject specialties, and links to shared resources.