Copy and paste the following prompt:
Act as an expert frontend engineer and product designer. I want to build a slick, interactive prototype for a B2B SaaS platform called Curriculab.co.
The Concept: EdTech companies and schools use this platform to stress-test their curriculum against thousands of synthetic AI students to find drop-off points and confusion gaps before launching to real humans.
Tech Stack & Design Vibe:
- React, Tailwind CSS, lucide-react (icons), recharts (charts), and motion/react (animations).
- The design should feel premium, trustworthy, and technical (like a clinical trial dashboard). Use a slate and indigo color palette.
- Build this as a single-page app where the App.tsx toggles between a "Landing Page" view and an "App Dashboard" view.
Please build the following components:
1. Landing Page (LandingPage.tsx)
- A dark-themed (bg-slate-950) modern SaaS landing page.
- Hero Section: A bold headline ("Stress-test your curriculum before real students see it"), a subheadline explaining the value prop, and a primary CTA button ("Try the Platform") that transitions the user into the app dashboard.
- Features Grid: 3 columns highlighting the core features: Define Target Cohorts, Pinpoint Friction, and Iterate & Prove ROI.
2. App Dashboard (Dashboard.tsx)
- A light-themed app layout with a left sidebar navigation and a main content area.
- The main content area must have an interactive 3-step flow managed by state (setup -> running -> results):
- Step 1: Setup: A grid layout. On the left, a mock drag-and-drop file upload zone for curriculum (PDF/SCORM). Below that, sliders to define the "Target Cohort" (Age Group, Prior Knowledge Level, Attention Span). On the right, a "Simulation Summary" card with a "Run Simulation" button.
- Step 2: Running: When "Run Simulation" is clicked, show an animated loading state. Include a circular progress indicator counting to 100%, and a dark, terminal-style window showing live, simulated logs of agents taking the course (e.g., "Agent #402 flagged confusion at Section 2.3", "Agent #109 dropped off"). After a few seconds, automatically transition to the results.
- Step 3: Results: Render a detailed "Clinical Readout" of the curriculum.
3. Simulation Results (SimulationResults.tsx)
- KPI Cards: Show "Curriculum Health Score" (e.g., 64/100), "Cohort Completion Rate", and "Critical Friction Points".
- Retention Chart: Use recharts to render an AreaChart showing a cohort retention curve (y-axis: retention %, x-axis: course sections). Show a clear drop-off at specific sections.
- AI Recommendations: A dark-themed panel suggesting specific fixes (e.g., "Simplify vocabulary in Section 2.1").
- Confusion Heatmap Table: A detailed table listing specific course sections, the topic, a visual "Confusion Score" bar, an AI Diagnosis (e.g., "Cognitive overload"), and an action button to fix it.
Ensure all components are fully responsive, use smooth motion animations for state transitions, and have polished UI details like subtle borders, shadows, and hover states. Add a utility file for clsx and tailwind-merge to handle dynamic classes cleanly.