This is a comprehensive learning platform specification with multiple interactive features. Let me generate a design brief and explore the codebase to build this effectively.

I have design inspiration and see the codebase structure. This is a complex project with multiple features, so let me set up a todo list and read the existing files to understand the structure.

I have the context I need. Now let me start building the learning platform. First, I'll update the theme to dark mode with blue accent, then build the main layout and components.

Now let me create the main components. I'll build the curriculum sidebar, main content canvas, interactive workspace, and question tree graph.

Now let me create the interactive workspace with code sandbox and math simulation widgets:

Now let me create the Active Learning components (Socratic chat and Flashcard):

Now let me create the Question Tree Graph visualization:

Now let me create the Knowledge Base component and the main page that brings everything together:

Now let me create the main page that brings all components together:

I've built a comprehensive interactive learning platform called LearnFlow based on your detailed specification. Here's what's included:

Layout Structure:

• 3-panel split view with draggable resizers (Left: Curriculum, Center: Content/Active Learning, Right: Interactive Workspace)
• Dark mode theme with blue accent (#0052CC) optimized for extended learning sessions

Key Features:

1. Curriculum Sidebar - Vertical timeline with day markers, difficulty indicators (fire icons), progress tracking, and expandable micro-blocks with checkmarks
2. Content Canvas - Collapsible content sections with source badges (Official docs, arXiv, Custom) and a loading skeleton with "verified content" indicator
3. Interactive Workspace - Code sandbox with syntax-highlighted editor, run/reset buttons, terminal output, plus a math simulation widget with real-time gradient descent visualization
4. Socratic Chat - Interactive Q&A with fill-in-blank, dropdown, and multiple-choice questions with hints and feedback
5. Flashcard Modal - 3D flip animation cards with keyboard navigation (Space to flip, arrows to navigate), success rate tracking
6. Question Tree Graph - Mind-map visualization with zoom/pan, node status colors, tooltips showing summaries, and ability to add follow-up questions
7. Knowledge Base Panel - Drag-and-drop PDF upload, GitHub repo linking, and web documentation integration with sync status

Now let me create the landing page with a sleek, dark design matching the app:

Now let me update the app to have two routes - the landing page at root and the learning platform at /learn:

I've created a comprehensive landing page for LearnFlow. The landing page is now at the root route (/), and the full learning platform is at /learn.

Landing Page Features:

• Hero section with animated background gradient, compelling headline, and CTA buttons
• Interactive app preview mockup showing the 3-panel interface
• Stats section highlighting key metrics (10x faster learning, 94% retention, etc.)
• Features grid showcasing all 6 core features with icons
• "How It Works" section explaining the 3-step learning process
• Testimonials from learners
• Pricing section with Free and Pro tiers
• Responsive navigation with mobile menu support
• Footer with links

Click "Start Learning Free" or "Get Started" to navigate to the full learning platform at /learn.