Now I'll create the pharmaceutical MR training platform with a professional healthcare SaaS design. Let me update the theme and build the components.
Now let me create the main components for the MR Training Platform:
Now let me create the main page that brings everything together:
Let me add mobile responsiveness for the side panels by creating a mobile-friendly version:
The Sheet component exists and has SheetTitle. Let me also add padding to the sheet content for better appearance:
I've created a complete pharmaceutical MR (Medical Representative) training platform UI mock. The application features:
- Header - Professional branding with "MR Role Play Trainer" title, training history button, and user profile dropdown menu
- Left Panel (Scenario) - Displays the training scenario including the drug name (SGLT2 inhibitor), doctor profile (cardiologist with traits like "busy" and "evidence-focused"), and training goals
- Center Panel (Conversation) - Chat-style interface showing alternating messages between the doctor and MR, with a recording button that simulates voice transcription. Click the mic button to start "recording" - it will simulate transcribing an MR response
- Right Panel (AI Feedback) - Shows AI evaluation with scores for communication, medical accuracy, and objection handling, plus detailed metrics and improvement suggestions
- Bottom Controls - Buttons for restarting the role-play, viewing detailed feedback, and proceeding to the next scenario
- Mobile Responsiveness - On mobile, floating buttons provide access to the scenario and feedback panels via slide-out sheets
The design uses a professional healthcare color palette (blue/white/teal accents) with rounded cards, soft shadows, and a clean enterprise aesthetic similar to Veeva/Salesforce healthcare UIs.