|
| 1 | +import Link from 'next/link'; |
| 2 | + |
| 3 | +export default function MedicalDashboard() { |
| 4 | + return ( |
| 5 | + <div className="min-h-screen bg-[var(--background)]"> |
| 6 | + {/* Header */} |
| 7 | + <nav className="border-b border-[var(--border)] py-4 bg-[var(--background)]"> |
| 8 | + <div className="container flex justify-between items-center"> |
| 9 | + <Link href="/" className="text-xl font-bold text-gradient"> |
| 10 | + Smart AI Memory |
| 11 | + </Link> |
| 12 | + <div className="flex gap-6 items-center"> |
| 13 | + <Link href="/" className="text-sm hover:text-[var(--primary)]">Home</Link> |
| 14 | + <Link href="/framework" className="text-sm hover:text-[var(--primary)]">Framework</Link> |
| 15 | + <Link href="/dev-dashboard" className="text-sm hover:text-[var(--primary)]">Dev Dashboard</Link> |
| 16 | + </div> |
| 17 | + </div> |
| 18 | + </nav> |
| 19 | + |
| 20 | + {/* Hero */} |
| 21 | + <section className="py-12 bg-gradient-to-b from-[var(--border)] to-transparent"> |
| 22 | + <div className="container"> |
| 23 | + <div className="max-w-4xl mx-auto text-center"> |
| 24 | + <div className="text-6xl mb-6">🏥</div> |
| 25 | + <h1 className="text-4xl font-bold mb-4"> |
| 26 | + Medical Workflows <span className="text-gradient">Dashboard</span> |
| 27 | + </h1> |
| 28 | + <p className="text-xl text-[var(--text-secondary)] mb-6"> |
| 29 | + Level 4 Anticipatory Intelligence for Clinical Workflows |
| 30 | + </p> |
| 31 | + <div className="flex flex-wrap gap-2 justify-center"> |
| 32 | + <span className="px-3 py-1 bg-[var(--primary)] bg-opacity-10 text-[var(--primary)] rounded-full text-sm font-semibold"> |
| 33 | + Claude Code |
| 34 | + </span> |
| 35 | + <span className="px-3 py-1 bg-[var(--accent)] bg-opacity-10 text-[var(--accent)] rounded-full text-sm font-semibold"> |
| 36 | + Empathy Framework |
| 37 | + </span> |
| 38 | + <span className="px-3 py-1 bg-[var(--secondary)] bg-opacity-10 text-[var(--secondary)] rounded-full text-sm font-semibold"> |
| 39 | + MemDocs |
| 40 | + </span> |
| 41 | + <span className="px-3 py-1 bg-[var(--border)] text-[var(--muted)] rounded-full text-sm"> |
| 42 | + VS Code |
| 43 | + </span> |
| 44 | + </div> |
| 45 | + </div> |
| 46 | + </div> |
| 47 | + </section> |
| 48 | + |
| 49 | + {/* Stats Overview */} |
| 50 | + <section className="py-12"> |
| 51 | + <div className="container"> |
| 52 | + <div className="grid md:grid-cols-4 gap-6 max-w-5xl mx-auto"> |
| 53 | + <div className="bg-[var(--background)] border-2 border-[var(--border)] p-6 rounded-lg text-center"> |
| 54 | + <div className="text-3xl font-bold text-[var(--primary)] mb-2">14+</div> |
| 55 | + <div className="text-sm text-[var(--text-secondary)]">Clinical Monitors</div> |
| 56 | + </div> |
| 57 | + <div className="bg-[var(--background)] border-2 border-[var(--border)] p-6 rounded-lg text-center"> |
| 58 | + <div className="text-3xl font-bold text-[var(--success)] mb-2">Level 4</div> |
| 59 | + <div className="text-sm text-[var(--text-secondary)]">Anticipatory AI</div> |
| 60 | + </div> |
| 61 | + <div className="bg-[var(--background)] border-2 border-[var(--border)] p-6 rounded-lg text-center"> |
| 62 | + <div className="text-3xl font-bold text-[var(--accent)] mb-2">Real-time</div> |
| 63 | + <div className="text-sm text-[var(--text-secondary)]">Patient Monitoring</div> |
| 64 | + </div> |
| 65 | + <div className="bg-[var(--background)] border-2 border-[var(--border)] p-6 rounded-lg text-center"> |
| 66 | + <div className="text-3xl font-bold text-[var(--secondary)] mb-2">Predictive</div> |
| 67 | + <div className="text-sm text-[var(--text-secondary)]">Risk Assessment</div> |
| 68 | + </div> |
| 69 | + </div> |
| 70 | + </div> |
| 71 | + </section> |
| 72 | + |
| 73 | + {/* Clinical Monitoring Features */} |
| 74 | + <section className="py-12 bg-[var(--border)] bg-opacity-20"> |
| 75 | + <div className="container"> |
| 76 | + <h2 className="text-3xl font-bold text-center mb-12">Clinical Monitoring Capabilities</h2> |
| 77 | + |
| 78 | + <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto"> |
| 79 | + {/* Patient Trajectory Analysis */} |
| 80 | + <div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all"> |
| 81 | + <div className="flex items-center gap-3 mb-4"> |
| 82 | + <div className="text-3xl">📊</div> |
| 83 | + <h3 className="text-lg font-bold">Patient Trajectory Analysis</h3> |
| 84 | + </div> |
| 85 | + <p className="text-sm text-[var(--text-secondary)] mb-4"> |
| 86 | + Predicts patient trajectory based on vital signs, lab results, and historical patterns. |
| 87 | + </p> |
| 88 | + <div className="space-y-2"> |
| 89 | + <div className="flex items-center gap-2 text-xs"> |
| 90 | + <span className="text-[var(--success)]">✓</span> |
| 91 | + <span>Multi-parameter trend analysis</span> |
| 92 | + </div> |
| 93 | + <div className="flex items-center gap-2 text-xs"> |
| 94 | + <span className="text-[var(--success)]">✓</span> |
| 95 | + <span>Early deterioration warnings</span> |
| 96 | + </div> |
| 97 | + <div className="flex items-center gap-2 text-xs"> |
| 98 | + <span className="text-[var(--success)]">✓</span> |
| 99 | + <span>Automated risk scoring</span> |
| 100 | + </div> |
| 101 | + </div> |
| 102 | + </div> |
| 103 | + |
| 104 | + {/* Protocol Compliance Monitor */} |
| 105 | + <div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all"> |
| 106 | + <div className="flex items-center gap-3 mb-4"> |
| 107 | + <div className="text-3xl">📋</div> |
| 108 | + <h3 className="text-lg font-bold">Protocol Compliance Monitor</h3> |
| 109 | + </div> |
| 110 | + <p className="text-sm text-[var(--text-secondary)] mb-4"> |
| 111 | + Ensures adherence to clinical protocols and best practices in real-time. |
| 112 | + </p> |
| 113 | + <div className="space-y-2"> |
| 114 | + <div className="flex items-center gap-2 text-xs"> |
| 115 | + <span className="text-[var(--success)]">✓</span> |
| 116 | + <span>Real-time protocol checking</span> |
| 117 | + </div> |
| 118 | + <div className="flex items-center gap-2 text-xs"> |
| 119 | + <span className="text-[var(--success)]">✓</span> |
| 120 | + <span>Deviation alerts</span> |
| 121 | + </div> |
| 122 | + <div className="flex items-center gap-2 text-xs"> |
| 123 | + <span className="text-[var(--success)]">✓</span> |
| 124 | + <span>Best practice recommendations</span> |
| 125 | + </div> |
| 126 | + </div> |
| 127 | + </div> |
| 128 | + |
| 129 | + {/* Vital Signs Monitoring */} |
| 130 | + <div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all"> |
| 131 | + <div className="flex items-center gap-3 mb-4"> |
| 132 | + <div className="text-3xl">💓</div> |
| 133 | + <h3 className="text-lg font-bold">Vital Signs Monitoring</h3> |
| 134 | + </div> |
| 135 | + <p className="text-sm text-[var(--text-secondary)] mb-4"> |
| 136 | + Continuous monitoring with predictive alerts before critical events occur. |
| 137 | + </p> |
| 138 | + <div className="space-y-2"> |
| 139 | + <div className="flex items-center gap-2 text-xs"> |
| 140 | + <span className="text-[var(--success)]">✓</span> |
| 141 | + <span>Pattern recognition</span> |
| 142 | + </div> |
| 143 | + <div className="flex items-center gap-2 text-xs"> |
| 144 | + <span className="text-[var(--success)]">✓</span> |
| 145 | + <span>Predictive alerting</span> |
| 146 | + </div> |
| 147 | + <div className="flex items-center gap-2 text-xs"> |
| 148 | + <span className="text-[var(--success)]">✓</span> |
| 149 | + <span>Multi-parameter correlation</span> |
| 150 | + </div> |
| 151 | + </div> |
| 152 | + </div> |
| 153 | + |
| 154 | + {/* Medication Safety */} |
| 155 | + <div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all"> |
| 156 | + <div className="flex items-center gap-3 mb-4"> |
| 157 | + <div className="text-3xl">💊</div> |
| 158 | + <h3 className="text-lg font-bold">Medication Safety</h3> |
| 159 | + </div> |
| 160 | + <p className="text-sm text-[var(--text-secondary)] mb-4"> |
| 161 | + Identifies potential drug interactions and contraindications before administration. |
| 162 | + </p> |
| 163 | + <div className="space-y-2"> |
| 164 | + <div className="flex items-center gap-2 text-xs"> |
| 165 | + <span className="text-[var(--success)]">✓</span> |
| 166 | + <span>Drug interaction checking</span> |
| 167 | + </div> |
| 168 | + <div className="flex items-center gap-2 text-xs"> |
| 169 | + <span className="text-[var(--success)]">✓</span> |
| 170 | + <span>Allergy alerts</span> |
| 171 | + </div> |
| 172 | + <div className="flex items-center gap-2 text-xs"> |
| 173 | + <span className="text-[var(--success)]">✓</span> |
| 174 | + <span>Dosage recommendations</span> |
| 175 | + </div> |
| 176 | + </div> |
| 177 | + </div> |
| 178 | + |
| 179 | + {/* Risk Assessment */} |
| 180 | + <div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all"> |
| 181 | + <div className="flex items-center gap-3 mb-4"> |
| 182 | + <div className="text-3xl">⚠️</div> |
| 183 | + <h3 className="text-lg font-bold">Risk Assessment</h3> |
| 184 | + </div> |
| 185 | + <p className="text-sm text-[var(--text-secondary)] mb-4"> |
| 186 | + Predictive risk scoring for complications, readmissions, and adverse events. |
| 187 | + </p> |
| 188 | + <div className="space-y-2"> |
| 189 | + <div className="flex items-center gap-2 text-xs"> |
| 190 | + <span className="text-[var(--success)]">✓</span> |
| 191 | + <span>Multi-factor risk modeling</span> |
| 192 | + </div> |
| 193 | + <div className="flex items-center gap-2 text-xs"> |
| 194 | + <span className="text-[var(--success)]">✓</span> |
| 195 | + <span>Readmission prediction</span> |
| 196 | + </div> |
| 197 | + <div className="flex items-center gap-2 text-xs"> |
| 198 | + <span className="text-[var(--success)]">✓</span> |
| 199 | + <span>Complication forecasting</span> |
| 200 | + </div> |
| 201 | + </div> |
| 202 | + </div> |
| 203 | + |
| 204 | + {/* Lab Results Analyzer */} |
| 205 | + <div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all"> |
| 206 | + <div className="flex items-center gap-3 mb-4"> |
| 207 | + <div className="text-3xl">🔬</div> |
| 208 | + <h3 className="text-lg font-bold">Lab Results Analyzer</h3> |
| 209 | + </div> |
| 210 | + <p className="text-sm text-[var(--text-secondary)] mb-4"> |
| 211 | + Automated interpretation of lab results with trend analysis and clinical insights. |
| 212 | + </p> |
| 213 | + <div className="space-y-2"> |
| 214 | + <div className="flex items-center gap-2 text-xs"> |
| 215 | + <span className="text-[var(--success)]">✓</span> |
| 216 | + <span>Automated interpretation</span> |
| 217 | + </div> |
| 218 | + <div className="flex items-center gap-2 text-xs"> |
| 219 | + <span className="text-[var(--success)]">✓</span> |
| 220 | + <span>Historical trend analysis</span> |
| 221 | + </div> |
| 222 | + <div className="flex items-center gap-2 text-xs"> |
| 223 | + <span className="text-[var(--success)]">✓</span> |
| 224 | + <span>Critical value alerting</span> |
| 225 | + </div> |
| 226 | + </div> |
| 227 | + </div> |
| 228 | + </div> |
| 229 | + </div> |
| 230 | + </section> |
| 231 | + |
| 232 | + {/* How It Works */} |
| 233 | + <section className="py-12"> |
| 234 | + <div className="container"> |
| 235 | + <h2 className="text-3xl font-bold text-center mb-12">How Level 4 Anticipatory Intelligence Works</h2> |
| 236 | + |
| 237 | + <div className="max-w-4xl mx-auto space-y-6"> |
| 238 | + <div className="flex gap-6 items-start"> |
| 239 | + <div className="flex-shrink-0 w-12 h-12 bg-[var(--primary)] bg-opacity-10 rounded-full flex items-center justify-center text-[var(--primary)] font-bold text-xl"> |
| 240 | + 1 |
| 241 | + </div> |
| 242 | + <div> |
| 243 | + <h3 className="text-xl font-bold mb-2">Continuous Monitoring</h3> |
| 244 | + <p className="text-[var(--text-secondary)]"> |
| 245 | + Empathy Framework monitors patient data streams in real-time, tracking vital signs, |
| 246 | + lab results, medications, and clinical notes continuously. |
| 247 | + </p> |
| 248 | + </div> |
| 249 | + </div> |
| 250 | + |
| 251 | + <div className="flex gap-6 items-start"> |
| 252 | + <div className="flex-shrink-0 w-12 h-12 bg-[var(--primary)] bg-opacity-10 rounded-full flex items-center justify-center text-[var(--primary)] font-bold text-xl"> |
| 253 | + 2 |
| 254 | + </div> |
| 255 | + <div> |
| 256 | + <h3 className="text-xl font-bold mb-2">Pattern Recognition</h3> |
| 257 | + <p className="text-[var(--text-secondary)]"> |
| 258 | + AI wizards identify patterns and trajectories that indicate potential issues before |
| 259 | + they become critical, using historical data and clinical protocols. |
| 260 | + </p> |
| 261 | + </div> |
| 262 | + </div> |
| 263 | + |
| 264 | + <div className="flex gap-6 items-start"> |
| 265 | + <div className="flex-shrink-0 w-12 h-12 bg-[var(--primary)] bg-opacity-10 rounded-full flex items-center justify-center text-[var(--primary)] font-bold text-xl"> |
| 266 | + 3 |
| 267 | + </div> |
| 268 | + <div> |
| 269 | + <h3 className="text-xl font-bold mb-2">Predictive Alerts</h3> |
| 270 | + <p className="text-[var(--text-secondary)]"> |
| 271 | + The system generates anticipatory alerts with actionable recommendations, |
| 272 | + enabling clinical teams to intervene before problems escalate. |
| 273 | + </p> |
| 274 | + </div> |
| 275 | + </div> |
| 276 | + |
| 277 | + <div className="flex gap-6 items-start"> |
| 278 | + <div className="flex-shrink-0 w-12 h-12 bg-[var(--primary)] bg-opacity-10 rounded-full flex items-center justify-center text-[var(--primary)] font-bold text-xl"> |
| 279 | + 4 |
| 280 | + </div> |
| 281 | + <div> |
| 282 | + <h3 className="text-xl font-bold mb-2">Continuous Learning</h3> |
| 283 | + <p className="text-[var(--text-secondary)]"> |
| 284 | + MemDocs integration ensures the system learns from each case, improving predictions |
| 285 | + and recommendations over time with project-specific memory. |
| 286 | + </p> |
| 287 | + </div> |
| 288 | + </div> |
| 289 | + </div> |
| 290 | + </div> |
| 291 | + </section> |
| 292 | + |
| 293 | + {/* CTA */} |
| 294 | + <section className="py-20 bg-gradient-to-b from-transparent to-[var(--border)] bg-opacity-30"> |
| 295 | + <div className="container"> |
| 296 | + <div className="max-w-3xl mx-auto text-center"> |
| 297 | + <h2 className="text-3xl font-bold mb-6"> |
| 298 | + Build Your Own Medical Workflows |
| 299 | + </h2> |
| 300 | + <p className="text-xl text-[var(--text-secondary)] mb-8"> |
| 301 | + The Empathy Framework is open source and production-ready. |
| 302 | + Start building anticipatory AI for healthcare today. |
| 303 | + </p> |
| 304 | + <div className="flex flex-col sm:flex-row gap-4 justify-center"> |
| 305 | + <Link href="/framework" className="btn btn-primary"> |
| 306 | + View Framework |
| 307 | + </Link> |
| 308 | + <a |
| 309 | + href="https://github.com/Smart-AI-Memory/empathy" |
| 310 | + className="btn btn-outline" |
| 311 | + target="_blank" |
| 312 | + rel="noopener noreferrer" |
| 313 | + > |
| 314 | + View on GitHub |
| 315 | + </a> |
| 316 | + </div> |
| 317 | + </div> |
| 318 | + </div> |
| 319 | + </section> |
| 320 | + |
| 321 | + {/* Footer */} |
| 322 | + <footer className="py-12 border-t border-[var(--border)]"> |
| 323 | + <div className="container"> |
| 324 | + <div className="flex flex-col md:flex-row justify-between items-center gap-6"> |
| 325 | + <div className="text-sm text-[var(--muted)]"> |
| 326 | + © 2025 Deep Study AI, LLC. All rights reserved. |
| 327 | + </div> |
| 328 | + <div className="flex gap-6"> |
| 329 | + <Link href="/" className="text-sm text-[var(--muted)] hover:text-[var(--primary)]"> |
| 330 | + Home |
| 331 | + </Link> |
| 332 | + <Link href="/framework" className="text-sm text-[var(--muted)] hover:text-[var(--primary)]"> |
| 333 | + Framework |
| 334 | + </Link> |
| 335 | + <Link href="/dev-dashboard" className="text-sm text-[var(--muted)] hover:text-[var(--primary)]"> |
| 336 | + Dev Dashboard |
| 337 | + </Link> |
| 338 | + </div> |
| 339 | + </div> |
| 340 | + </div> |
| 341 | + </footer> |
| 342 | + </div> |
| 343 | + ); |
| 344 | +} |
0 commit comments