Student Dashboard Portal

Create a modern student dashboard portal for an online learning platform called "BrightPath" where students can track courses, view grades, manage assignments, and interact with instructors. The design should feel organized, motivating, and distraction-free.

1. TOP NAVIGATION BAR
- Logo: "BrightPath" with a graduation cap icon (left)
- Search bar: "Search courses, assignments, people..." (center, max-width 480px)
- Right side: notification bell with red badge (3), message icon with badge (1), profile avatar dropdown
- Profile dropdown options: My Profile, Settings, Help Center, Sign Out
- Background: white, bottom border 1px #E5E7EB

2. SIDEBAR NAVIGATION (left, 260px width)
- Student avatar (64px circle) + name "Alex Thompson" + "Computer Science, Year 2"
- Navigation items with icons:
  - Dashboard (home icon) — active state with #4F46E5 indigo left border
  - My Courses (book icon)
  - Assignments (clipboard icon)
  - Grades (chart icon)
  - Schedule (calendar icon)
  - Messages (chat icon)
  - Study Groups (users icon)
  - Resources (folder icon)
- Bottom section: "Need Help?" card with link to support
- Collapsible on mobile to icon-only mode

3. MAIN DASHBOARD — WELCOME HEADER
- "Good morning, Alex 👋" (time-aware greeting)
- Subtext: "You have 2 assignments due this week and 1 upcoming quiz."
- Current semester badge: "Spring 2026"
- Quick action buttons row:
  - "Join Next Class" (solid indigo) — shows in 45 min countdown
  - "Submit Assignment" (outlined)
  - "View Calendar" (outlined)

4. PROGRESS OVERVIEW CARDS (4 cards in a row, equal width)
- Card 1: "GPA" — 3.72 — small green arrow up (+0.08 from last semester) — mini sparkline chart
- Card 2: "Courses Active" — 5 of 5 — circular progress ring 100%
- Card 3: "Assignments Due" — 2 this week — amber indicator
- Card 4: "Streak" — 14 days — fire icon — "Keep it going!"
- Cards: white background, 12px border-radius, subtle shadow, colored top accent border

5. CURRENT COURSES SECTION (main content area)
- Headline: "My Courses" with "View All" link
- 3-column card grid showing enrolled courses:

- Course 1: "Data Structures & Algorithms"
  - Instructor: Prof. Sarah Chen
  - Progress bar: 68% complete (indigo fill)
  - Next class: "Wed, 10:00 AM — Lecture: Binary Trees"
  - Grade so far: A- (92%)
  - Thumbnail: abstract code illustration

- Course 2: "Introduction to Machine Learning"
  - Instructor: Dr. James Park
  - Progress bar: 45% complete
  - Next class: "Thu, 2:00 PM — Lab: Neural Networks"
  - Grade so far: B+ (87%)
  - Thumbnail: neural network illustration

- Course 3: "Technical Writing"
  - Instructor: Prof. Maria Garcia
  - Progress bar: 72% complete
  - Next class: "Fri, 11:00 AM — Workshop: Peer Review"
  - Grade so far: A (95%)
  - Thumbnail: document illustration

- Each card: hover lifts with shadow, click navigates to course detail
- "Continue Learning" button on each card

6. UPCOMING ASSIGNMENTS PANEL (right sidebar or below courses)
- Headline: "Due Soon"
- Assignment list with color-coded urgency:
  - 🔴 "ML Problem Set 4" — Due tomorrow, 11:59 PM — Machine Learning — "Submit"
  - 🟡 "Binary Tree Implementation" — Due in 3 days — Data Structures — "Start"
  - 🟢 "Essay Draft: Technical Ethics" — Due in 6 days — Technical Writing — "Continue"
  - 🟢 "Database ER Diagram" — Due in 8 days — Database Systems — "Not Started"
- Each row: course color dot, assignment name, due date, course name, action button
- Overdue items shown at top with red background tint

7. WEEKLY SCHEDULE VIEW (calendar strip)
- Horizontal week view showing Mon-Sun
- Today highlighted with indigo background
- Time blocks for each class:
  - Color-coded by course (blue, green, purple, orange)
  - "Data Structures — 10:00-11:30 AM — Room 204 / Zoom"
  - "ML Lab — 2:00-4:00 PM — CS Lab 3"
  - "Study Group — 5:00-6:00 PM — Library"
- Click to expand details or join virtual class
- "Sync to Google Calendar" button

8. RECENT GRADES & FEEDBACK
- Headline: "Recent Grades"
- Table/list view:
  - "ML Quiz 3" — 88/100 — B+ — "Good work on backpropagation." — Oct 5
  - "Data Structures HW 6" — 95/100 — A — "Excellent binary search implementation." — Oct 3
  - "Writing Assignment 3" — 92/100 — A- — "Strong thesis, tighten conclusion." — Oct 1
- Each row: assignment name, score, letter grade, instructor comment preview, date
- Click to see full feedback
- "View All Grades" link

9. STUDY ACTIVITY CHART
- Headline: "Your Study Activity"
- GitHub-style contribution heatmap showing daily study time over last 12 weeks
- Color intensity: light (#E0E7FF) to dark (#4F46E5) based on hours studied
- Hover shows: "Oct 5: 3.2 hours studied"
- Summary stats below: "This week: 14.5 hrs · Last week: 12.8 hrs · Average: 13.1 hrs/week"
- Small bar chart showing hours per course breakdown

10. ANNOUNCEMENTS & UPDATES FEED
- Headline: "Announcements"
- Feed-style list:
  - "📢 Prof. Chen: Data Structures midterm moved to Oct 20" — 2 hours ago — pinned
  - "📝 Dr. Park: Office hours extended to 5 PM this week" — 5 hours ago
  - "🎉 New: Study room booking now available in Resources" — 1 day ago
- Each item: icon, instructor avatar, message, timestamp
- "Mark all as read" link

11. QUICK LINKS / RESOURCES PANEL
- 2x2 grid of shortcut cards:
  - "Library" — Search books and journals — external link icon
  - "Writing Center" — Book a tutoring session — calendar icon
  - "Career Services" — Resume review, job board — briefcase icon
  - "IT Help Desk" — Report tech issues — headset icon
- Each card: icon, title, short description, clickable

12. FOOTER BAR
- "BrightPath Learning Platform — Spring 2026"
- Links: Privacy Policy, Terms, Accessibility, Contact Support
- Version: "v3.2.1"
- "Powered by BrightPath" logo

Design: Clean, academic, distraction-free. Primary: #4F46E5 (indigo), success: #10B981 (green), warning: #F59E0B (amber), danger: #EF4444 (red). Backgrounds: white cards on #F9FAFB gray. Typography: Inter for everything, semibold headings. Cards with 12px border-radius, 1px #E5E7EB borders, soft shadows on hover. Dense but breathable layout with 24px gaps.

Responsive: On mobile, sidebar collapses to bottom tab bar (Dashboard, Courses, Assignments, Schedule, More). Course cards stack to single column. Schedule switches to daily view with swipe navigation. Activity chart becomes horizontally scrollable. Quick action buttons scroll horizontally. Assignment panel moves below courses.