New User Onboarding Flow #2775
Description
Overview
This feature guides first-time users through Onlook, using the initial project code generation wait time to introduce key product features and usage tips. It involves two components: (1) an onboarding flow (modals with highlighted feature areas), and (2) rotating Tips & Shortcuts cards on the canvas after onboarding.
Implementation
• Reference the functional prototype: Onlook Project Prototype (Canvas-Flow-2 page). (https://www.onlook.com/project/d955ac4d-ef40-4e9a-8a6a-bcfb76ce60f7)
• Build both the onboarding modal flow and the rotating Tips & Shortcuts as demonstrated.
Design Specifications
Onboarding Flow
• Each modal and its highlighted area must remain “in-focus,” with the rest of the UI dimmed via an overlay.
• The highlighted feature area should display a border effect consistent with the prototype. Review the code for details.
Tips & Shortcuts
• Locate {/* Vertical Cards Carousel /} in Page.tsx to review carousel content and styles.
• See / Vertical Cards Carousel Animation */ in Global.css for animation specifics.
• On hover: pause the carousel on the current card.
• On hover out: resume the carousel.
• On card click: stop the carousel. Clicking again resumes it.
• While paused, allow navigation between cards via scroll or arrow keys.
Note: Tips & Shortcuts should not show until the user has completed the Onboarding-Modal-Flow or skipped it.