MR Role Play Trainer - v0 by Vercel

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.

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.