Components
Both
src/components/journey-folders.tsxJourney Folders
The student-home progress tracker as a playful cyclic DECK of color-striped folders. The front step shows its inset body; the rest cascade up behind, peeking their status-colored headers (yellow = active, green = done, gray = locked). On desktop, hover a back folder to spring it up and tap to rotate it forward; on mobile, swipe the front card to either side to flip to the next, the incoming card previewing as it rises. The deck stays in cyclic order so it never scrambles, and completing a step sinks it to the back. 2D-layered depth, no 3D tilt.
The teen journey
Tap a folder header to rotate it forward (on mobile, swipe the front card to flip through).
Used on
- Console
- /console (every page)
- Portal
- /(student) (every page)/dashboard