Spaces:
Sleeping
Sleeping
| import { Activity, ShieldCheck, Brain } from 'lucide-react'; | |
| export default function Welcome({ onStart }) { | |
| return ( | |
| <div className="welcome-screen"> | |
| {/* Animated logo */} | |
| <div style={{ marginBottom: 32, position: 'relative' }}> | |
| <div style={{ | |
| width: 80, height: 80, borderRadius: '50%', | |
| background: 'rgba(255,45,85,0.12)', | |
| border: '2px solid rgba(255,45,85,0.4)', | |
| display: 'flex', alignItems: 'center', justifyContent: 'center', | |
| animation: 'heartbeat 1.4s ease-in-out infinite', | |
| margin: '0 auto 20px', | |
| }}> | |
| <Activity size={36} color="var(--red-critical)" /> | |
| </div> | |
| {/* EKG line SVG */} | |
| <svg width="240" height="40" viewBox="0 0 240 40" style={{ margin: '0 auto', display: 'block' }}> | |
| <polyline | |
| points="0,20 30,20 45,5 52,35 60,5 70,20 100,20 115,20 120,2 126,38 132,2 138,20 180,20 240,20" | |
| fill="none" stroke="var(--red-critical)" strokeWidth="1.5" | |
| strokeDasharray="400" strokeDashoffset="400" | |
| style={{ animation: 'ekg 2s ease forwards 0.3s' }} | |
| /> | |
| </svg> | |
| </div> | |
| {/* Title */} | |
| <h1 style={{ | |
| fontSize: 42, fontWeight: 900, letterSpacing: '-0.03em', | |
| background: 'linear-gradient(135deg, #0f172a 30%, #475569)', | |
| WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', | |
| marginBottom: 8, | |
| }}> | |
| CodeBlue Context | |
| </h1> | |
| <p style={{ fontSize: 16, color: 'var(--text-secondary)', marginBottom: 32, maxWidth: 420, lineHeight: 1.6 }}> | |
| Emergency clinical intelligence. Five AI agents. One life-saving brief. | |
| </p> | |
| {/* Feature pills */} | |
| <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center', marginBottom: 40 }}> | |
| {[ | |
| { icon: <Activity size={13}/>, label: '5-Agent Orchestration' }, | |
| { icon: <ShieldCheck size={13}/>, label: 'Contraindication Guardian' }, | |
| { icon: <Brain size={13}/>, label: 'Explainable AI Reasoning' }, | |
| ].map(f => ( | |
| <div key={f.label} style={{ | |
| display: 'flex', alignItems: 'center', gap: 6, | |
| padding: '6px 14px', borderRadius: 99, | |
| background: 'rgba(10,132,255,0.08)', | |
| border: '1px solid rgba(10,132,255,0.2)', | |
| color: 'var(--blue-accent)', fontSize: 12, fontWeight: 600, | |
| }}> | |
| {f.icon}{f.label} | |
| </div> | |
| ))} | |
| </div> | |
| <button className="btn-danger" style={{ maxWidth: 260 }} onClick={onStart}> | |
| <Activity size={16} /> Enter Emergency System | |
| </button> | |
| <p style={{ marginTop: 20, fontSize: 11, color: 'var(--text-tertiary)' }}> | |
| For clinical decision support only — not a substitute for physician judgment | |
| </p> | |
| </div> | |
| ); | |
| } | |