Spaces:
Running
Running
inside each and ALL modals, all email, name, company, etc. entry boxes must be fixed, icons, etc. must be fixed - growth pricing 1,999/mo
2611ab6
verified
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ClinicalAPI - Safe, Structured Clinical Outputs</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔒</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0fdfa', | |
| 100: '#ccfbf1', | |
| 500: '#14b8a6', // Teal | |
| 600: '#0d9488', | |
| 700: '#0f766e', | |
| 900: '#134e4a', | |
| }, | |
| secondary: { | |
| 500: '#6366f1', // Indigo | |
| 600: '#4f46e5', | |
| 900: '#312e81', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="font-sans text-slate-800 bg-slate-50 antialiased"> | |
| <custom-header></custom-header> | |
| <!-- Hero Section --> | |
| <section class="relative pt-20 pb-32 overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center"> | |
| <div class="inline-flex items-center px-3 py-1 rounded-full border border-primary-200 bg-primary-50 text-primary-700 text-sm font-medium mb-8"> | |
| <span class="flex h-2 w-2 rounded-full bg-primary-500 mr-2"></span> | |
| HIPAA Compliant & SOC2 Type II | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-extrabold text-slate-900 tracking-tight mb-6"> | |
| Transform chaotic clinical data into <br class="hidden md:block" /> | |
| <span class="text-primary-600">compliance-ready intelligence</span>. | |
| </h1> | |
| <p class="mt-4 max-w-2xl mx-auto text-xl text-slate-600 mb-10"> | |
| The enterprise-grade clinical NLP platform that de-identifies, extracts, and structures medical documents with unprecedented accuracy and regulatory compliance—deployed in minutes, not months. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4 mb-12"> | |
| <button class="modal-trigger px-8 py-4 bg-primary-600 text-white font-bold rounded-lg hover:bg-primary-700 transition shadow-lg shadow-primary-500/30 flex justify-center items-center" data-modal="get-api-key"> | |
| Get API Key | |
| </button> | |
| <button class="modal-trigger px-8 py-4 bg-white text-slate-700 font-bold rounded-lg border border-slate-300 hover:bg-slate-50 transition flex justify-center items-center" data-modal="book-demo"> | |
| Book a Demo | |
| </button> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-6 text-sm font-medium text-slate-500"> | |
| <button class="modal-trigger hover:text-primary-600 flex items-center" data-modal="view-docs">View Docs <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></button> | |
| <button class="modal-trigger hover:text-primary-600 flex items-center" data-modal="byoc-overview">BYOC Overview <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></button> | |
| <button class="modal-trigger hover:text-primary-600 flex items-center" data-modal="security-overview">Security Overview <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></button> | |
| </div> | |
| </div> | |
| <!-- Visual Mockup 1: Pipeline --> | |
| <div class="mt-16 border-t border-slate-200 bg-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row items-center justify-between gap-8"> | |
| <!-- Stages --> | |
| <div class="flex-1 w-full overflow-x-auto pb-4"> | |
| <div class="flex items-center min-w-max space-x-4"> | |
| <div class="pipeline-step bg-slate-100 border border-slate-200 p-4 rounded-lg w-32 text-center text-sm font-semibold text-slate-600 hover:border-primary-500 transition cursor-default group"> | |
| <div class="w-8 h-8 bg-white rounded-full mx-auto mb-2 flex items-center justify-center text-primary-500 border border-slate-200 group-hover:bg-primary-50"><i data-feather="file-text" class="w-4 h-4"></i></div> | |
| 1. Preprocess | |
| </div> | |
| <i data-feather="chevron-right" class="text-slate-300"></i> | |
| <div class="pipeline-step bg-slate-100 border border-slate-200 p-4 rounded-lg w-32 text-center text-sm font-semibold text-slate-600 hover:border-primary-500 transition cursor-default group"> | |
| <div class="w-8 h-8 bg-white rounded-full mx-auto mb-2 flex items-center justify-center text-red-500 border border-slate-200 group-hover:bg-red-50"><i data-feather="shield" class="w-4 h-4"></i></div> | |
| 2. De-ID | |
| </div> | |
| <i data-feather="chevron-right" class="text-slate-300"></i> | |
| <div class="pipeline-step bg-slate-100 border border-slate-200 p-4 rounded-lg w-32 text-center text-sm font-semibold text-slate-600 hover:border-primary-500 transition cursor-default group"> | |
| <div class="w-8 h-8 bg-white rounded-full mx-auto mb-2 flex items-center justify-center text-blue-500 border border-slate-200 group-hover:bg-blue-50"><i data-feather="cpu" class="w-4 h-4"></i></div> | |
| 3. Extract | |
| </div> | |
| <i data-feather="chevron-right" class="text-slate-300"></i> | |
| <div class="pipeline-step bg-slate-100 border border-slate-200 p-4 rounded-lg w-32 text-center text-sm font-semibold text-slate-600 hover:border-primary-500 transition cursor-default group"> | |
| <div class="w-8 h-8 bg-white rounded-full mx-auto mb-2 flex items-center justify-center text-purple-500 border border-slate-200 group-hover:bg-purple-50"><i data-feather="hash" class="w-4 h-4"></i></div> | |
| 4. Normalize | |
| </div> | |
| <i data-feather="chevron-right" class="text-slate-300"></i> | |
| <div class="pipeline-step bg-slate-100 border border-slate-200 p-4 rounded-lg w-32 text-center text-sm font-semibold text-slate-600 hover:border-primary-500 transition cursor-default group"> | |
| <div class="w-8 h-8 bg-white rounded-full mx-auto mb-2 flex items-center justify-center text-green-500 border border-slate-200 group-hover:bg-green-50"><i data-feather="check-circle" class="w-4 h-4"></i></div> | |
| 5. Evidence | |
| </div> | |
| </div> | |
| </div> | |
| <!-- JSON Response --> | |
| <div class="w-full md:w-1/3 bg-slate-900 rounded-xl p-6 text-left shadow-2xl border border-slate-800"> | |
| <div class="flex items-center gap-2 mb-4 border-b border-slate-700 pb-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| <span class="ml-auto text-xs text-slate-500 font-mono">response.json</span> | |
| </div> | |
| <pre class="text-xs font-mono overflow-hidden"><code class="text-slate-300"> | |
| { | |
| <span class="text-primary-400">"entities"</span>: [ | |
| { <span class="text-blue-400">"type"</span>: <span class="text-green-400">"Medication"</span>, <span class="text-blue-400">"text"</span>: <span class="text-green-400">"Lisinopril"</span> } | |
| ], | |
| <span class="text-primary-400">"pii"</span>: [], | |
| <span class="text-primary-400">"codes"</span>: [<span class="text-green-400">"C09AA03"</span>], | |
| <span class="text-primary-400">"provenance"</span>: { | |
| <span class="text-blue-400">"pipeline_id"</span>: <span class="text-green-400">"v1.4.2"</span>, | |
| <span class="text-blue-400">"timestamp"</span>: <span class="text-green-400">"2023-10-27T10:00:00Z"</span> | |
| } | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Section & Mockup 2 --> | |
| <section class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-3xl mb-16"> | |
| <h2 class="text-3xl font-bold text-slate-900 mb-4">Stop wrestling with unstructured clinical text. <br>Start shipping compliant features.</h2> | |
| <p class="text-lg text-slate-600 mb-6"> | |
| Healthcare teams waste months building fragile NLP pipelines that struggle with PHI compliance. ClinicalAPI delivers a production-ready, clinically-validated infrastructure that integrates with your existing stack in hours—accelerating your roadmap while staying fully compliant. | |
| </p> | |
| </div> | |
| <!-- Visual Mockup 2: Before/After --> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Before --> | |
| <div class="relative bg-slate-50 border border-slate-200 rounded-xl p-8 overflow-hidden"> | |
| <div class="absolute top-4 right-4 bg-red-100 text-red-700 px-3 py-1 rounded text-xs font-bold uppercase">Risk: PHI Visible</div> | |
| <h3 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4">Raw Clinical Note</h3> | |
| <div class="font-mono text-sm leading-relaxed text-slate-800"> | |
| <p class="mb-2">Patient Name: <span class="bg-red-200 text-red-900 px-1 rounded blur-sm hover:blur-none cursor-pointer transition select-none">John Doe</span></p> | |
| <p class="mb-2">DOB: <span class="bg-red-200 text-red-900 px-1 rounded blur-sm hover:blur-none cursor-pointer transition select-none">05/12/1980</span></p> | |
| <p class="mb-2">Subjective: Patient presents with persistent cough. History of <span class="bg-blue-100 text-blue-900 px-1 rounded font-semibold">asthma</span>. Prescribed <span class="bg-purple-100 text-purple-900 px-1 rounded font-semibold">Albuterol</span> inhaler.</p> | |
| <p class="mb-2">Address: <span class="bg-red-200 text-red-900 px-1 rounded blur-sm hover:blur-none cursor-pointer transition select-none">123 Maple Drive, Springfield</span></p> | |
| </div> | |
| </div> | |
| <!-- After --> | |
| <div class="relative bg-slate-900 border border-slate-700 rounded-xl p-8 shadow-xl"> | |
| <div class="absolute top-4 right-4 bg-green-900 text-green-300 px-3 py-1 rounded text-xs font-bold uppercase border border-green-700">Safe & Structured</div> | |
| <h3 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">Sanitized Output</h3> | |
| <div class="font-mono text-sm leading-relaxed"> | |
| <div class="mb-4 p-3 bg-slate-800 rounded text-slate-300 border border-slate-700"> | |
| Patient Name: <span class="text-primary-400">[PHI_REDACTED_TOKEN_1]</span><br> | |
| DOB: <span class="text-primary-400">[PHI_REDACTED_TOKEN_2]</span><br> | |
| Subjective: Patient presents with persistent cough. History of <span class="bg-primary-900 text-primary-200 px-1 rounded">asthma</span>. Prescribed <span class="bg-primary-900 text-primary-200 px-1 rounded">Albuterol</span> inhaler. | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div class="bg-slate-800 p-2 rounded border-l-2 border-blue-500"> | |
| <span class="text-xs text-slate-500 block">Entity</span> | |
| <span class="text-white">Asthma</span> | |
| </div> | |
| <div class="bg-slate-800 p-2 rounded border-l-2 border-purple-500"> | |
| <span class="text-xs text-slate-500 block">Entity</span> | |
| <span class="text-white">Albuterol</span> | |
| </div> | |
| <div class="bg-slate-800 p-2 rounded border-l-2 border-green-500"> | |
| <span class="text-xs text-slate-500 block">SNOMED CT</span> | |
| <span class="text-white">195967001</span> | |
| </div> | |
| <div class="bg-slate-800 p-2 rounded border-l-2 border-yellow-500"> | |
| <span class="text-xs text-slate-500 block">Confidence</span> | |
| <span class="text-white">0.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Capabilities (Grid) --> | |
| <section class="py-24 bg-slate-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-slate-900">Core Capabilities</h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default"> | |
| <div class="w-12 h-12 bg-primary-50 rounded-lg flex items-center justify-center text-primary-600 mb-6 group-hover:bg-primary-600 group-hover:text-white transition"> | |
| <i data-feather="file-text"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-slate-900 mb-2">Intelligent Preprocessing</h3> | |
| <p class="text-slate-600 mb-4 text-sm">Advanced document parsing, OCR enhancement, and semantic sectioning that transforms messy clinical notes into clean, machine-ready data structures.</p> | |
| <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="preprocessing">View endpoint →</button> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default"> | |
| <div class="w-12 h-12 bg-red-50 rounded-lg flex items-center justify-center text-red-600 mb-6 group-hover:bg-red-600 group-hover:text-white transition"> | |
| <i data-feather="shield"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-slate-900 mb-2">Enterprise PHI Protection</h3> | |
| <p class="text-slate-600 mb-4 text-sm">Military-grade de-identification with 99.8% PHI recall. Customizable policy profiles support HIPAA, GDPR, and 42 CFR Part 2 compliance out of the box.</p> | |
| <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="phi-protection">View endpoint →</button> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default"> | |
| <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600 mb-6 group-hover:bg-blue-600 group-hover:text-white transition"> | |
| <i data-feather="cpu"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-slate-900 mb-2">Clinical Entity Extraction</h3> | |
| <p class="text-slate-600 mb-4 text-sm">Extract medications, diagnoses, procedures, labs, and social determinants with clinical-grade accuracy. Includes negation detection, temporality, and assertion modeling.</p> | |
| <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="entity-extraction">View endpoint →</button> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default"> | |
| <div class="w-12 h-12 bg-purple-50 rounded-lg flex items-center justify-center text-purple-600 mb-6 group-hover:bg-purple-600 group-hover:text-white transition"> | |
| <i data-feather="hash"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-slate-900 mb-2">Clinical Code Normalization</h3> | |
| <p class="text-slate-600 mb-4 text-sm">Map extracted entities to standard terminologies including SNOMED CT, ICD-10-CM, RxNorm, LOINC, and CPT with versioned mappings and provenance tracking.</p> | |
| <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="normalization">View endpoint →</button> | |
| </div> | |
| <!-- Card 5 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default"> | |
| <div class="w-12 h-12 bg-green-50 rounded-lg flex items-center justify-center text-green-600 mb-6 group-hover:bg-green-600 group-hover:text-white transition"> | |
| <i data-feather="check-circle"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-slate-900 mb-2">Audit-Ready Evidence Packs</h3> | |
| <p class="text-slate-600 mb-4 text-sm">Generate cryptographically-verifiable audit trails with complete provenance. Perfect for regulatory submissions, internal audits, and AI model governance.</p> | |
| <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="evidence-packs">View endpoint →</button> | |
| </div> | |
| <!-- Card 6 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition group cursor-default"> | |
| <div class="w-12 h-12 bg-indigo-50 rounded-lg flex items-center justify-center text-indigo-600 mb-6 group-hover:bg-indigo-600 group-hover:text-white transition"> | |
| <i data-feather="lock"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-slate-900 mb-2">Flexible Deployment</h3> | |
| <p class="text-slate-600 mb-4 text-sm">Lightning-fast SaaS deployment for rapid prototyping, or BYOC runtimes that deploy directly into your AWS VPC for zero-data-egress security architectures.</p> | |
| <button class="modal-trigger text-xs text-primary-600 font-semibold opacity-0 group-hover:opacity-100 transition" data-modal="deployment">View endpoint →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Product Packs & Mockup 4 --> | |
| <section class="py-24 bg-white border-y border-slate-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> | |
| <div> | |
| <h2 class="text-3xl font-bold text-slate-900 mb-6">Build powerful pipelines with modular processing packs. <br><span class="text-primary-600">Optimize costs by paying only for what you use.</span></h2> | |
| <p class="text-lg text-slate-600 mb-8"> | |
| Mix and match specialized processing packs to create custom pipelines tailored to your specific use case. From simple text extraction to complex clinical reasoning—compose exactly what you need. | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center text-slate-700"><i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> Preprocess Pack (OCR, Sectioning, Cleaning)</li> | |
| <li class="flex items-center text-slate-700"><i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> De-ID Pack (18 PHI categories, Custom Policies)</li> | |
| <li class="flex items-center text-slate-700"><i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> Clinical Context Pack (Negation, Temporality, Certainty)</li> | |
| </ul> | |
| <button class="modal-trigger text-primary-600 font-bold hover:text-primary-700 flex items-center" data-modal="explore-packs">Explore Packs in Docs <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></button> | |
| </div> | |
| <!-- Mockup 4: Pack Picker --> | |
| <div class="bg-slate-50 border border-slate-200 rounded-xl p-6 shadow-sm"> | |
| <h3 class="font-bold text-slate-900 mb-4 flex items-center"><i data-feather="sliders" class="w-4 h-4 mr-2"></i> Configure Pipeline</h3> | |
| <div class="space-y-4 mb-8"> | |
| <label class="flex items-center justify-between cursor-pointer group"> | |
| <span class="text-slate-700 font-medium group-hover:text-primary-600">Preprocess Pack</span> | |
| <input type="checkbox" checked class="w-5 h-5 text-primary-600 rounded focus:ring-primary-500 border-gray-300"> | |
| </label> | |
| <label class="flex items-center justify-between cursor-pointer group"> | |
| <span class="text-slate-700 font-medium group-hover:text-primary-600">De-ID Pack</span> | |
| <input type="checkbox" checked class="w-5 h-5 text-primary-600 rounded focus:ring-primary-500 border-gray-300"> | |
| </label> | |
| <label class="flex items-center justify-between cursor-pointer group"> | |
| <span class="text-slate-700 font-medium group-hover:text-primary-600">Extraction Pack</span> | |
| <input type="checkbox" checked class="w-5 h-5 text-primary-600 rounded focus:ring-primary-500 border-gray-300"> | |
| </label> | |
| <label class="flex items-center justify-between cursor-pointer group"> | |
| <span class="text-slate-700 font-medium group-hover:text-primary-600">Normalization Pack</span> | |
| <input type="checkbox" class="w-5 h-5 text-primary-600 rounded focus:ring-primary-500 border-gray-300"> | |
| </label> | |
| <label class="flex items-center justify-between cursor-pointer group"> | |
| <span class="text-slate-700 font-medium group-hover:text-primary-600">Evidence Pack</span> | |
| <input type="checkbox" checked class="w-5 h-5 text-primary-600 rounded focus:ring-primary-500 border-gray-300"> | |
| </label> | |
| </div> | |
| <div class="border-t border-slate-200 pt-4 flex justify-between items-center"> | |
| <div> | |
| <div class="text-xs text-slate-500 uppercase font-bold">Est. Latency</div> | |
| <div class="text-slate-900 font-mono font-bold">~240ms</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-xs text-slate-500 uppercase font-bold">Est. Cost / 1k docs</div> | |
| <div class="text-primary-600 font-mono font-bold">$0.45</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Deployment (Mockup 5) --> | |
| <section class="py-24 bg-slate-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold text-slate-900 mb-6">Deploy according to your security posture.</h2> | |
| <p class="text-lg text-slate-600 max-w-2xl mx-auto mb-16"> | |
| Whether you need rapid SaaS deployment or zero-trust BYOC architecture, ClinicalAPI adapts to your compliance requirements without compromising performance. | |
| </p> | |
| <!-- Visual Mockup 5: Architecture --> | |
| <div class="relative max-w-4xl mx-auto"> | |
| <!-- Lines --> | |
| <div class="hidden md:block absolute top-1/2 left-0 w-full h-0.5 bg-slate-300 -z-10 transform -translate-y-1/2"></div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Control Plane --> | |
| <div class="bg-white border-2 border-primary-500 p-6 rounded-xl shadow-lg relative z-10"> | |
| <div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-primary-500 text-white px-3 py-1 text-xs font-bold rounded">ClinicalAPI</div> | |
| <div class="w-12 h-12 bg-primary-100 rounded-full mx-auto mb-4 flex items-center justify-center text-primary-600"><i data-feather="settings"></i></div> | |
| <h4 class="font-bold text-slate-900">Control Plane</h4> | |
| <ul class="text-xs text-left mt-4 space-y-2 text-slate-600"> | |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-2 text-green-500"></i> Identity & Auth</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-2 text-green-500"></i> Policy Gating</li> | |
| <li class="flex items-center"><i data-feather="check" class="w-3 h-3 mr-2 text-green-500"></i> Billing & Audit</li> | |
| </ul> | |
| </div> | |
| <!-- Runtime Plane --> | |
| <div class="bg-white border border-slate-200 p-6 rounded-xl relative z-10 group hover:border-blue-400 transition"> | |
| <div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-slate-200 text-slate-700 px-3 py-1 text-xs font-bold rounded">Choice</div> | |
| <div class="w-12 h-12 bg-blue-50 rounded-full mx-auto mb-4 flex items-center justify-center text-blue-500"><i data-feather="server"></i></div> | |
| <h4 class="font-bold text-slate-900">Runtime Plane</h4> | |
| <div class="mt-4 space-y-2"> | |
| <div class="p-2 bg-blue-50 rounded text-xs text-blue-800 font-medium">SaaS (Managed)</div> | |
| <div class="p-2 bg-slate-100 rounded text-xs text-slate-600 font-medium">BYOC (Your AWS)</div> | |
| </div> | |
| </div> | |
| <!-- Data Plane --> | |
| <div class="bg-white border border-slate-200 p-6 rounded-xl relative z-10"> | |
| <div class="w-12 h-12 bg-indigo-50 rounded-full mx-auto mb-4 flex items-center justify-center text-indigo-500"><i data-feather="database"></i></div> | |
| <h4 class="font-bold text-slate-900">Data Plane</h4> | |
| <p class="text-xs text-slate-500 mt-4">Artifacts stored in SaaS or Customer Storage</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 flex justify-center gap-4"> | |
| <button class="modal-trigger px-6 py-3 border border-slate-300 rounded-lg text-slate-700 font-medium hover:bg-slate-50" data-modal="byoc-guide">Read BYOC Guide</button> | |
| <button class="modal-trigger px-6 py-3 bg-slate-900 text-white rounded-lg font-medium hover:bg-slate-800" data-modal="architecture-review">Book Architecture Review</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Developers (Mockup 6) --> | |
| <section class="py-24 bg-slate-900 text-white overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="text-primary-400 font-bold tracking-wider uppercase text-sm mb-2">Developer First</div> | |
| <h2 class="text-4xl font-bold mb-6">Built for developers who ship.</h2> | |
| <p class="text-slate-400 text-lg mb-8"> | |
| Integrate in minutes with our battle-tested REST API and comprehensive SDKs. From real-time streaming to bulk async processing—built for production scale from day one. | |
| </p> | |
| <div class="flex gap-4 mb-8"> | |
| <button class="modal-trigger px-4 py-2 bg-primary-600 rounded text-sm font-bold hover:bg-primary-500" data-modal="read-docs-dev">Read Docs</button> | |
| <button class="modal-trigger px-4 py-2 bg-slate-800 border border-slate-700 rounded text-sm font-bold hover:bg-slate-700" data-modal="npm-install">npm install @clinicalapi/sdk</button> | |
| </div> | |
| <div class="flex items-center space-x-6 text-sm text-slate-400"> | |
| <span class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-400"></i> Webhooks</span> | |
| <span class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-400"></i> Versioning</span> | |
| <span class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-400"></i> Metering</span> | |
| </div> | |
| </div> | |
| <!-- Code Block --> | |
| <div class="bg-[#0d1117] rounded-xl shadow-2xl border border-slate-700 overflow-hidden"> | |
| <div class="flex items-center justify-between px-4 py-3 bg-[#161b22] border-b border-slate-700"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-xs text-slate-500 font-mono">curl</div> | |
| </div> | |
| <div class="p-6 overflow-x-auto"> | |
| <pre class="text-sm font-mono leading-relaxed"> | |
| <span class="text-slate-500"># Install CLI first: npm install -g @clinicalapi/cli</span> | |
| curl -X POST https://api.clinicalapi.com/v1/extract \ | |
| -H <span class="text-green-400">"Authorization: Bearer $CLINICALAPI_KEY"</span> \ | |
| -H <span class="text-green-400">"Content-Type: application/json"</span> \ | |
| -d '{ | |
| <span class="text-blue-400">"task"</span>: <span class="text-green-400">"clinical_ner"</span>, | |
| <span class="text-blue-400">"data_classification"</span>: <span class="text-green-400">"PHI"</span>, | |
| <span class="text-blue-400">"input"</span>: { <span class="text-blue-400">"text"</span>: <span class="text-green-400">"Patient has asthma..."</span> }, | |
| <span class="text-blue-400">"options"</span>: { | |
| <span class="text-blue-400">"pii"</span>: { <span class="text-blue-400">"redact"</span>: <span class="text-purple-400">true</span> }, | |
| <span class="text-blue-400">"evidence"</span>: { <span class="text-blue-400">"enable"</span>: <span class="text-purple-400">true</span> } | |
| } | |
| }'</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Security (Mockup 7) --> | |
| <section class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-16"> | |
| <div> | |
| <h2 class="text-3xl font-bold text-slate-900 mb-6">Security and compliance woven into every layer.</h2> | |
| <p class="text-lg text-slate-600 mb-8"> | |
| We've built ClinicalAPI from the ground up with a security-first mindset. From SOC 2 Type II certification to HIPAA and GDPR compliance, we've handled the heavy lifting so you can focus on innovation. | |
| </p> | |
| <button class="modal-trigger text-primary-600 font-bold hover:text-primary-700" data-modal="security-overview-detail">View Security Overview <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i></button> | |
| </div> | |
| <!-- Checklist Mockup --> | |
| <div class="bg-slate-50 border border-slate-200 rounded-xl p-8"> | |
| <div class="flex items-center mb-6"> | |
| <i data-feather="shield" class="w-6 h-6 text-green-600 mr-3"></i> | |
| <h3 class="font-bold text-slate-900">Security Checklist</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5"> | |
| <i data-feather="check" class="w-4 h-4 text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="font-bold text-slate-900">Access Control</p> | |
| <p class="text-sm text-slate-500">RBAC/ABAC, MFA required for PHI actions</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5"> | |
| <i data-feather="check" class="w-4 h-4 text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="font-bold text-slate-900">Encryption</p> | |
| <p class="text-sm text-slate-500">AES-256 at rest and TLS 1.3 in transit</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5"> | |
| <i data-feather="check" class="w-4 h-4 text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="font-bold text-slate-900">Audit Trail</p> | |
| <p class="text-sm text-slate-500">Immutable logs for every decision and access</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5"> | |
| <i data-feather="check" class="w-4 h-4 text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="font-bold text-slate-900">Data Minimization</p> | |
| <p class="text-sm text-slate-500">Analytics run on sanitized derivatives only</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions & Carousel (Mockup 8) --> | |
| <section class="py-24 bg-slate-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-slate-900">Powering the next generation of healthcare applications.</h2> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden"> | |
| <!-- Tabs --> | |
| <div class="flex border-b border-slate-200 overflow-x-auto" id="solution-tabs"> | |
| <button class="solution-tab px-6 py-4 text-sm font-bold text-primary-600 border-b-2 border-primary-600 focus:outline-none whitespace-nowrap" data-target="sol-1">Clinical Note Structuring</button> | |
| <button class="solution-tab px-6 py-4 text-sm font-medium text-slate-500 hover:text-slate-700 focus:outline-none whitespace-nowrap" data-target="sol-2">Radiology Reports</button> | |
| <button class="solution-tab px-6 py-4 text-sm font-medium text-slate-500 hover:text-slate-700 focus:outline-none whitespace-nowrap" data-target="sol-3">Trial Matching</button> | |
| </div> | |
| <!-- Content --> | |
| <div class="p-8 md:p-12"> | |
| <div id="sol-1" class="solution-content grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-bold text-slate-900 mb-4">Transform unstructured notes into structured data.</h3> | |
| <p class="text-slate-600 mb-6">Input raw physician notes and receive coded, de-identified outputs ready for your EHR or data lake.</p> | |
| <div class="bg-slate-50 p-4 rounded-lg text-sm font-mono text-slate-600"> | |
| <span class="block mb-1 font-bold text-slate-400">Packs:</span> Preprocess + De-ID + Extract + Normalize | |
| </div> | |
| </div> | |
| <div class="bg-slate-900 rounded-lg p-6 font-mono text-sm"> | |
| <span class="text-slate-500">// Output</span><br> | |
| <span class="text-blue-400">{</span><br> | |
| <span class="text-green-400">"problem"</span>: <span class="text-yellow-400">"Type 2 Diabetes"</span>,<br> | |
| <span class="text-green-400">"code"</span>: <span class="text-yellow-400">"E11.9"</span>,<br> | |
| <span class="text-green-400">"system"</span>: <span class="text-yellow-400">"ICD-10-CM"</span>,<br> | |
| <span class="text-green-400">"status"</span>: <span class="text-yellow-400">"Active"</span><br> | |
| <span class="text-blue-400">}</span> | |
| </div> | |
| </div> | |
| <div id="sol-2" class="solution-content hidden grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-bold text-slate-900 mb-4">Extract findings and measurements from radiology.</h3> | |
| <p class="text-slate-600 mb-6">Automatically pull out laterality, specific findings, and measurements from chest X-rays and MRIs.</p> | |
| <div class="bg-slate-50 p-4 rounded-lg text-sm font-mono text-slate-600"> | |
| <span class="block mb-1 font-bold text-slate-400">Packs:</span> Preprocess + Extract + Context | |
| </div> | |
| </div> | |
| <div class="bg-slate-900 rounded-lg p-6 font-mono text-sm"> | |
| <span class="text-slate-500">// Output</span><br> | |
| <span class="text-blue-400">{</span><br> | |
| <span class="text-green-400">"finding"</span>: <span class="text-yellow-400">"Pulmonary Nodule"</span>,<br> | |
| <span class="text-green-400">"size"</span>: <span class="text-yellow-400">"4mm"</span>,<br> | |
| <span class="text-green-400">"location"</span>: <span class="text-yellow-400">"RUL"</span><br> | |
| <span class="text-blue-400">}</span> | |
| </div> | |
| </div> | |
| <div id="sol-3" class="solution-content hidden grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-bold text-slate-900 mb-4">Accelerate clinical trial matching.</h3> | |
| <p class="text-slate-600 mb-6">Screen patient records against inclusion/exclusion criteria without exposing PHI to unapproved third parties.</p> | |
| <div class="bg-slate-50 p-4 rounded-lg text-sm font-mono text-slate-600"> | |
| <span class="block mb-1 font-bold text-slate-400">Packs:</span> De-ID + Extract + Logic | |
| </div> | |
| </div> | |
| <div class="bg-slate-900 rounded-lg p-6 font-mono text-sm"> | |
| <span class="text-slate-500">// Output</span><br> | |
| <span class="text-blue-400">{</span><br> | |
| <span class="text-green-400">"match_score"</span>: <span class="text-purple-400">0.95</span>,<br> | |
| <span class="text-green-400">"criteria_met"</span>: <span class="text-purple-400">14</span>,<br> | |
| <span class="text-green-400">"criteria_missed"</span>: <span class="text-purple-400">1</span><br> | |
| <span class="text-blue-400">}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing (Mockup 9) --> | |
| <section class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-slate-900">Transparent pricing that scales with your success.</h2> | |
| <p class="text-slate-600 mt-4">Start free, upgrade when you're ready. No hidden fees, no surprises. Enterprise-grade features available at every tier.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Starter --> | |
| <div class="border border-slate-200 rounded-xl p-8 flex flex-col"> | |
| <h3 class="font-bold text-lg text-slate-900">Starter</h3> | |
| <div class="my-4"><span class="text-3xl font-bold">$0</span> <span class="text-slate-500">/mo</span></div> | |
| <ul class="space-y-4 mb-8 text-sm text-slate-600 flex-1"> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> 5,000 chars free/mo</li> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> 3 Packs enabled</li> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Community Support</li> | |
| </ul> | |
| <button class="modal-trigger block text-center py-2 px-4 bg-slate-100 text-slate-700 font-bold rounded hover:bg-slate-200 w-full" data-modal="get-started-starter">Get Started</button> | |
| </div> | |
| <!-- Growth --> | |
| <div class="border-2 border-primary-500 rounded-xl p-8 flex flex-col relative shadow-lg transform md:-translate-y-4"> | |
| <div class="absolute top-0 right-0 bg-primary-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div> | |
| <h3 class="font-bold text-lg text-slate-900">Growth</h3> | |
| <div class="my-4"><span class="text-3xl font-bold">$1,999</span> <span class="text-slate-500">/mo</span></div> | |
| <ul class="space-y-4 mb-8 text-sm text-slate-600 flex-1"> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-primary-600 mr-2"></i> 2M chars included</li> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-primary-600 mr-2"></i> All Packs enabled</li> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-primary-600 mr-2"></i> Evidence Packs included</li> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-primary-600 mr-2"></i> Email Support</li> | |
| </ul> | |
| <button class="modal-trigger block text-center py-2 px-4 bg-primary-600 text-white font-bold rounded hover:bg-primary-700 w-full" data-modal="get-api-key-growth">Get API Key</button> | |
| </div> | |
| <!-- Enterprise --> | |
| <div class="border border-slate-200 rounded-xl p-8 flex flex-col"> | |
| <h3 class="font-bold text-lg text-slate-900">Enterprise</h3> | |
| <div class="my-4"><span class="text-3xl font-bold">Custom</span></div> | |
| <ul class="space-y-4 mb-8 text-sm text-slate-600 flex-1"> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> High Volume & BYOC</li> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Dedicated Runtimes</li> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> SSO & SLA</li> | |
| <li class="flex"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Account Manager</li> | |
| </ul> | |
| <button class="modal-trigger block text-center py-2 px-4 bg-slate-100 text-slate-700 font-bold rounded hover:bg-slate-200 w-full" data-modal="contact-sales">Contact Sales</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section class="py-24 bg-slate-50"> | |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-slate-900 text-center mb-12">Everything you need to know</h2> | |
| <div class="space-y-3"> | |
| <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden"> | |
| <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition"> | |
| <h3 class="font-bold text-slate-900 pr-4">Can we keep PHI within our security boundary?</h3> | |
| <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6"> | |
| <p class="text-slate-600 text-sm leading-relaxed">Absolutely. Our BYOC (Bring Your Own Cloud) deployment option allows you to run ClinicalAPI processing runtimes directly within your AWS VPC. Your PHI never leaves your infrastructure—we only manage the control plane for orchestration, billing, and updates.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden"> | |
| <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition"> | |
| <h3 class="font-bold text-slate-900 pr-4">Do you support bulk document processing at scale?</h3> | |
| <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6"> | |
| <p class="text-slate-600 text-sm leading-relaxed">Yes, we offer both synchronous APIs for real-time processing and asynchronous batch processing for high-volume workflows. Our async jobs support millions of documents with automatic retry, progress tracking, and webhook notifications upon completion.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden"> | |
| <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition"> | |
| <h3 class="font-bold text-slate-900 pr-4">How do you ensure processing reproducibility for audits?</h3> | |
| <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6"> | |
| <p class="text-slate-600 text-sm leading-relaxed">Every API response includes our Evidence Pack—a cryptographically-signed bundle containing pipeline version, model versions, configuration hashes, and step-by-step processing logs. This ensures complete reproducibility for regulatory audits and model governance requirements.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden"> | |
| <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition"> | |
| <h3 class="font-bold text-slate-900 pr-4">Can we customize de-identification policies for our use case?</h3> | |
| <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6"> | |
| <p class="text-slate-600 text-sm leading-relaxed">Definitely. We provide pre-built policy profiles for HIPAA, GDPR, and common use cases, but you can create custom policies with granular control over which PHI categories to detect, how to handle them (redact, mask, tokenize, replace), and even override specific detection rules for your domain.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden"> | |
| <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition"> | |
| <h3 class="font-bold text-slate-900 pr-4">What is your PHI de-identification accuracy?</h3> | |
| <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6"> | |
| <p class="text-slate-600 text-sm leading-relaxed">Our clinical NLP models achieve 99.8% recall and 97.5% precision on PHI de-identification across the 18 HIPAA identifiers. We continuously validate against annotated clinical datasets from multiple institutions and can provide benchmark results for your specific document types.</p> | |
| </div> | |
| </div> | |
| <div class="faq-item bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden"> | |
| <button class="faq-trigger w-full p-6 text-left flex justify-between items-center hover:bg-slate-50 transition"> | |
| <h3 class="font-bold text-slate-900 pr-4">How long does integration typically take?</h3> | |
| <svg class="faq-icon w-5 h-5 text-slate-500 transform transition-transform flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6"> | |
| <p class="text-slate-600 text-sm leading-relaxed">Most teams complete their initial integration in under 2 hours. Our REST API is designed for simplicity, and we provide SDKs for Python, JavaScript, Java, and .NET. For BYOC deployments, expect 1-2 days for initial setup, with ongoing support from our engineering team.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="py-24 bg-white border-t border-slate-200"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-4xl font-bold text-slate-900 mb-6">Transform clinical documents into compliance-ready intelligence—starting today.</h2> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="modal-trigger px-8 py-4 bg-primary-600 text-white font-bold rounded-lg hover:bg-primary-700 transition shadow-lg" data-modal="final-get-api-key">Get API Key</button> | |
| <button class="modal-trigger px-8 py-4 bg-white text-slate-700 font-bold rounded-lg border border-slate-300 hover:bg-slate-50 transition" data-modal="final-book-demo">Book a Demo</button> | |
| </div> | |
| <button class="mt-6 modal-trigger text-slate-500 text-sm hover:text-primary-600 underline" data-modal="final-byoc">Explore BYOC options for strict boundary control.</button> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <!-- Modal Component --> | |
| <custom-modal id="main-modal"></custom-modal> | |
| <!-- Component Scripts --> | |
| <script src="components/header.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/modal.js"></script> | |
| <!-- Main Script --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |