Spaces:
Running
Running
create a modern landing page for following- restriction: no image is permitted - Agreed. For the public landing, you should position the outcomes (safe, structured, auditable clinical processing) and keep the implementation details (OpenMed, Parsr, ClickHouse, Meilisearch, etc.) for the Docs / Developer Portal / Security page. That reduces vendor-dependence perception and avoids anchoring buyers on “components” rather than “guarantees.”
8627915
verified
| class CustomHeader extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| background-color: white; | |
| border-bottom: 1px solid #e2e8f0; /* slate-200 */ | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| .container { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 1rem 1.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| .logo { | |
| font-weight: 800; | |
| font-size: 1.25rem; | |
| color: #0f172a; /* slate-900 */ | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .logo span { | |
| color: #0d9488; /* teal-600 */ | |
| } | |
| .nav-item { | |
| color: #475569; /* slate-600 */ | |
| text-decoration: none; | |
| margin-right: 1.5rem; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| } | |
| .nav-item:hover { | |
| color: #0d9488; | |
| } | |
| .btn { | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.5rem; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| } | |
| .btn-ghost { | |
| color: #475569; | |
| } | |
| .btn-ghost:hover { | |
| background-color: #f1f5f9; | |
| } | |
| .btn-primary { | |
| background-color: #0d9488; | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #0f766e; | |
| } | |
| @media (min-width: 768px) { | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| } | |
| } | |
| @media (max-width: 767px) { | |
| .mobile-menu-btn { | |
| display: block; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| } | |
| </style> | |
| <header> | |
| <div class="container"> | |
| <a href="/" class="logo"> | |
| Clinical<span>API</span> | |
| </a> | |
| <nav class="nav-links"> | |
| <a href="#" class="nav-item">Product</a> | |
| <a href="#" class="nav-item">Solutions</a> | |
| <a href="#" class="nav-item">Deployment</a> | |
| <a href="#" class="nav-item">Security</a> | |
| <a href="#" class="nav-item">Developers</a> | |
| <a href="#" class="nav-item">Pricing</a> | |
| <a href="#" class="nav-item">Company</a> | |
| </nav> | |
| <div class="nav-links"> | |
| <a href="#" class="btn btn-ghost">Sign in</a> | |
| <a href="#" class="btn btn-primary">Get API Key</a> | |
| </div> | |
| <button class="mobile-menu-btn md:hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> | |
| </button> | |
| </div> | |
| </header> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-header', CustomHeader); |