Spaces:
Sleeping
Sleeping
File size: 3,296 Bytes
6a059ac b94a1a8 6a059ac b94a1a8 6a059ac b94a1a8 6a059ac b94a1a8 6a059ac b94a1a8 6a059ac | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 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>
);
}
|