Enhance dashboard header with modern UI and animations

[Alakh-gupta]

Summary

Enhanced the Dashboard Header UI with modern animations, dynamic styling, interactive motion effects, and improved responsiveness for a more engaging developer experience.

Closes #<581>

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

Changes Made

• Added modern gradient dashboard background

• Added glassmorphism-inspired UI styling

• Implemented animated glowing background effects

• Added floating dashboard icon animation using Framer Motion

• Added responsive layout improvements

• Enhanced dashboard typography and visual hierarchy

• Added interactive hover and click animations for:

  • Notification Bell
  • Theme Toggle
  • User Avatar
  • Keyboard Shortcuts
  • Sign Out Button

• Added animated feature chips and status indicators

• Improved button styling with hover transitions and glow effects

• Added smooth motion transitions and entrance animations

How to Test

Steps for the reviewer to verify this works:

1. Clone the repository

2. Install dependencies using npm install

3. Run the development server using npm run dev

4. Open http://localhost:3000

5. Navigate to the Dashboard page

6. Verify:

   • Animated dashboard header
   • Responsive layout
   • Hover animations on controls/buttons
   • Floating and motion effects
   • Improved modern UI styling

Screenshots

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

[vercel]

@Alakh-gupta is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!

[Priyanshu-byte-coder]

Please fix before merging:

1. Hardcoded colors — replace with CSS vars:
   • text-white → text-[var(--foreground)] or appropriate var
   • bg-white/5 → bg-[var(--card-muted)]
   • from-cyan-500 to-blue-600 gradient → use var(--accent)
   • text-slate-300 → text-[var(--muted-foreground)]
   • bg-red-500 → bg-[var(--destructive)]
2. Missing EOF newline — file must end with \n