UI/UX: Redesign the tutorial chapter navigation and progress experience

[Baskarayelu]

Description

The tutorial section (app/tutorial/page.tsx, app/tutorial/[tutorialId]/page.tsx, app/tutorial/[tutorialId]/chapter/[chapterId]/page.tsx) lists tutorials with per-item progress values and renders chapters via components/tutorials/ChapterView.tsx, TutorialCard.tsx, and TutorialList.tsx. There is a tutorial-redesign handoff under design/tutorial-redesign/ with desktop/tablet/mobile mocks and annotated handoff notes. We need a UX pass to bring the in-app tutorial chapter navigation, progress indicators, and prev/next controls in line with that redesign so users can track and resume learning. This is distinct from the open UX-021 card-hierarchy issue and focuses on chapter navigation and progress.

Requirements and context

• UI/UX scope only; do not duplicate UX-021.
• Reference app/tutorial/[tutorialId]/chapter/[chapterId]/page.tsx, components/tutorials/ChapterView.tsx, and design/tutorial-redesign/ (README, annotated-handoff.md, mock-*.svg).
• Design chapter list with completed/current/locked progress and prev/next controls.
• Show overall tutorial progress and a resume affordance.
• Align with the existing redesign mocks.

Suggested execution

• Branch: uiux/tutorial-chapter-navigation
• Redline chapter navigation, progress, and prev/next in ChapterView.tsx.
• Map the design/tutorial-redesign/ mocks to the in-app components.
• Provide mobile, tablet, and desktop layouts.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: progress conveyed via text, aria-current chapter, keyboard nav.

Example commit message

feat(uiux): redesign tutorial chapter navigation and progress

Guidelines

• Map deliverables to the existing redesign mocks.
• Avoid overlap with the UX-021 card-hierarchy work.
• Timeframe: 96 hours