Breaking down the Fluent UI onboarding process into smaller, focused steps
for better user guidance and comprehension:
- Split monolithic Fluent components step into 6 progressive steps
- Add individual step components for each UI section (Overview, Workspace
Selector, Main Navigation, Projects, Other Views, Top Navigation)
- Enhance preview components with interactive selection and focus/dim modes
- Improve visual hierarchy with targeted highlighting for each step
- Add keyboard support and accessibility attributes to preview components
- Fix transition timing to show config check only at appropriate steps
This change provides a more guided and digestible onboarding experience
by presenting UI concepts progressively rather than all at once.
- Add noise texture layer system for visual depth
- Modernize footer with glass morphism and ripple effects
- Improve layout stability during intro animation
- Add mode selection preview images
- Standardize box-shadows to CSS variables across all styles
- Enhance mobile responsiveness and dark theme support