[FEATURE] - Implement interactive and functional course page (Learn view)

[Ayush-Patel-56]

Is your feature request related to a problem?

We need a dedicated learning/course dashboard where users can progress through daily modules, track their scores/XP, and view curriculum progress in an interactive layout.

Describe the Solution

Implement a fully interactive course view at src/app/learn/page.tsx (or a similar /learn route). The page must be fully functional and dynamic.

Key Functional Requirements:

1. Interactive Curriculum Navigation:
   • Modules Sidebar (Right): Clicking a module (e.g., Module 1 to 5) must dynamically load its corresponding content in the center panel. Locked modules should be disabled until previous modules are completed.
   • Timeline Progress (Left): Clicking days (e.g., Day 1 to 5) should switch the current day's modules.
   • Pagination (Bottom): "PREVIOUS", "NEXT", and the progress dots must navigate through the active day's modules.
2. Module Completion & XP System:
   • Clicking the "COMPLETE MODULE" button at the bottom of the content panel must:
     • Mark the current module as completed.
     • Unlock the next module in the sidebar.
     • Dynamically increment the user's XP in the top-right progress bar (0 / 500 XP TO L1) and the sidebar scores.
3. Interactive Code Snippets:
   • The code blocks should render with a functional "Copy" button that copies the command to the user's clipboard.
4. State Persistence:
   • Track completion state using React state and persist to LocalStorage or context so user progress isn't lost on refresh.

---

Page Structure & Layout:

1. Header/Navbar:

   • MergeShip brand logo.
   • Navigation links: "Home", "Learn" (active/highlighted), "Code".
   • Badges/Icons: Notifications bell, trophy icon, Level badge (L0 NEWCOMER), and profile picture.
   • Progress text: X / 500 XP TO L1 (dynamic based on module completion).

2. Left Sidebar:

   • Profile Score: Displays profile avatar, current score (e.g., 24), and sub-stats: XP, Level, PRs.
   • Your Progress Timeline: Vertical timeline representing Day 1 to Day 5. Completed days show green checks, active days show green highlights, and future days show lock icons.
   • Rewards Today: Displays active rewards (e.g., Complete Module 1: +20 XP, Pass Quiz: +50 XP, Day 1 Completion: +200 XP).

3. Center Content Panel:

   • Breadcrumbs: COURSE / DAY {X} / MODULE {Y}.
   • Hero Card: General overview of the selected day (e.g., Git & GitHub Fundamentals for Day 1) with an illustrative background element.
   • Module Reader:
     • Card displaying: title, active status badge, estimated read time.
     • Core content text, highlighted "KEY CONCEPT" boxes, and copyable bash code blocks.
     • "COMPLETE MODULE" action button.

4. Right Sidebar:

   • Day Modules List: Tracks modules for the selected day. Shows title, duration (e.g., 15m), and icons indicating status (Active/Play, Locked, Completed).

5. Toast/Notification:

   • A floating toast in the bottom right corner showing: Daily Login Bonus: +20 XP Earned (with a lightning bolt icon).

Design/UI Thoughts

• Styling: Sleek dark mode using a near-black background (#0D0E12), thin border lines (border-zinc-800), glassmorphism overlays, and neon-green (#00FF87) accent colors.
• Micro-interactions: Smooth transitions when unlocking modules, ticking progress counters, and hovering over sidebar navigation elements.

Additional Context

Please reference the attached mockup image for layout, placement, and visual specs.