Build a modern, visually engaging Learning App with the following features and UI:
Overall Layout & Navigation:
Home/Dashboard Screen:
Explore Screen:
Lesson View:
Progress Screen:
Visual Style:
#7C3AED) with soft gradientsIMPORTANT BUILD INSTRUCTIONS:
Now let me build all the components in parallel:
Now let me write all the files in parallel:
Now wire up the main page:
The LearnFlow app is fully built with 9 course cards powered by mock data across all 5 screens. Here's what was created:
The sidebar collapses to a bottom tab bar on mobile, and all state is handled client-side with no backend required.
I'll build a modern Learning App with all the features you've outlined. Let me create this quickly with mock data and clean components.
I can see there's already some structure. Let me check the existing layout and components:
I can see there's already a Sidebar and Header component. Let me check the globals.css to understand the design tokens:
Now I'll create all the necessary components. Let me build this efficiently in parallel:
I've built a complete, modern Learning App with all the requested features. Here's what I created:
Core Screens:
Navigation:
Design:
#7C3AED through design tokens)Interactive Features:
The app renders immediately at /app/page.tsx with full functionality—no empty routes or setup steps needed!