Spaces:
Sleeping
Sleeping
| import { FileText, Cpu, Key, ArrowRight } from 'lucide-react'; | |
| export default function Tutorial({ onComplete }) { | |
| return ( | |
| <div className="welcome-screen"> | |
| <div className="fade-up" style={{ maxWidth: 800, width: '100%' }}> | |
| <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 10, letterSpacing: '-0.03em', color: 'var(--text-primary)' }}> | |
| How CodeBlue Context Works | |
| </h1> | |
| <p style={{ color: 'var(--text-secondary)', fontSize: 16, marginBottom: 40 }}> | |
| 3 simple steps to transform messy clinical records into structured emergency intelligence. | |
| </p> | |
| <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 20, marginBottom: 40, textAlign: 'left' }}> | |
| <div className="card fade-up" style={{ padding: 24, animationDelay: '0.1s' }}> | |
| <div style={{ padding: 12, background: 'rgba(10,132,255,0.1)', borderRadius: 10, color: 'var(--blue-accent)', display: 'inline-block', marginBottom: 16 }}> | |
| <FileText size={24} /> | |
| </div> | |
| <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8, color: 'var(--text-primary)' }}>1. Upload Anything</h3> | |
| <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}> | |
| Doctors don't have structured JSON. Drop a raw clinical PDF, Word Doc, or photo into the dropzone. Our vision extraction system instantly parses it. | |
| </p> | |
| </div> | |
| <div className="card fade-up" style={{ padding: 24, animationDelay: '0.2s' }}> | |
| <div style={{ padding: 12, background: 'rgba(255,45,85,0.1)', borderRadius: 10, color: 'var(--red-critical)', display: 'inline-block', marginBottom: 16 }}> | |
| <Cpu size={24} /> | |
| </div> | |
| <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8, color: 'var(--text-primary)' }}>2. 5-Agent Orchestration</h3> | |
| <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}> | |
| The record is passed sequentially through 5 specialized AI agents (Triage, Contraindication, Labs, Differentials, Action Protocol) to extract hidden insights. | |
| </p> | |
| </div> | |
| <div className="card fade-up" style={{ padding: 24, animationDelay: '0.3s' }}> | |
| <div style={{ padding: 12, background: 'rgba(191,90,242,0.1)', borderRadius: 10, color: 'var(--purple-ai)', display: 'inline-block', marginBottom: 16 }}> | |
| <Key size={24} /> | |
| </div> | |
| <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8, color: 'var(--text-primary)' }}>3. Provide Your Brain</h3> | |
| <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}> | |
| To bypass our hackathon server rate limits, use the "Provide API Key" button in the dashboard navbar to safely inject your own Gemini key directly from your browser. | |
| </p> | |
| </div> | |
| </div> | |
| <button | |
| className="btn-primary fade-up" | |
| style={{ animationDelay: '0.4s', padding: '14px 28px', fontSize: 16, borderRadius: 99 }} | |
| onClick={onComplete} | |
| > | |
| Enter Dashboard <ArrowRight size={18} /> | |
| </button> | |
| </div> | |
| </div> | |
| ); | |
| } | |