102 lines
4.9 KiB
HTML
102 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hosted — Test</title>
|
|
<link rel="stylesheet" href="/clavitor.css">
|
|
<style>
|
|
@font-face {
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 400 700;
|
|
font-display: swap;
|
|
src: url('https://fonts.gstatic.com/s/ibmplexsans/v19/zYXzKVElJtQ_m--A1PHz_MlYGHbM.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 100 800;
|
|
font-display: swap;
|
|
src: url('https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flE3B8wJ47L-j6pEsKTZbBr8M.woff2') format('woff2');
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="nav">
|
|
<div class="container nav-inner">
|
|
<a href="/" class="nav-logo"><span class="logo-lockup logo-lockup-nav"><span class="logo-lockup-square"></span><span class="logo-lockup-text"><span class="logo-lockup-wordmark">CLAVITOR</span></span></span></a>
|
|
<div class="nav-links">
|
|
<a href="/hosted" class="nav-link active">Hosted</a>
|
|
<a href="/pricing" class="nav-link">Pricing</a>
|
|
<div class="nav-dropdown nav-dropdown--locale">
|
|
<span class="nav-link nav-dropdown-trigger" id="localeTrigger">🌐 EN / $</span>
|
|
<div class="nav-dropdown-menu nav-dropdown-menu--right">
|
|
<div style="padding:8px 16px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em;">Language</div>
|
|
<a href="/" class="nav-dropdown-item active" data-lang="en">🇺🇸 English</a>
|
|
<a href="/de" class="nav-dropdown-item" data-lang="de">🇩🇪 Deutsch</a>
|
|
<div style="border-top:1px solid var(--border);margin:8px 0;"></div>
|
|
<div style="padding:8px 16px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em;">Currency</div>
|
|
<a href="#" class="nav-dropdown-item active" data-currency="USD">USD $</a>
|
|
<a href="#" class="nav-dropdown-item" data-currency="EUR">EUR €</a>
|
|
</div>
|
|
</div>
|
|
<a href="/hosted" class="btn btn-primary">Get hosted — $12/yr</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="hero container">
|
|
<p class="label accent mb-4">clavitor hosted</p>
|
|
<h1>Zero cache. Every request hits the vault.</h1>
|
|
<p class="lead">Clavitor never caches credentials. To make it fast, we run 4 regions across every continent. $12/yr.</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="map-wrap" style="background:#f5f5f5;border-radius:12px;padding:20px;text-align:center;height:300px;display:flex;align-items:center;justify-content:center">
|
|
<svg id="worldmap" viewBox="0 0 1000 460" width="100%" height="260" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="1000" height="460" fill="#f5f5f5"/>
|
|
<text x="500" y="440" font-family="IBM Plex Sans,sans-serif" font-size="18" font-weight="700" fill="#0A0A0A" text-anchor="middle" opacity="0.35" letter-spacing="0.3em">CLAVITOR GLOBAL PRESENCE</text>
|
|
<!-- Sample dots for regions -->
|
|
<circle cx="150" cy="200" r="8" fill="#DC2626"/>
|
|
<text x="150" y="220" font-family="IBM Plex Sans,sans-serif" font-size="12" fill="#0A0A0A" text-anchor="middle">US-East</text>
|
|
<circle cx="500" cy="180" r="8" fill="#DC2626"/>
|
|
<text x="500" y="200" font-family="IBM Plex Sans,sans-serif" font-size="12" fill="#0A0A0A" text-anchor="middle">EU-West</text>
|
|
<circle cx="800" cy="220" r="8" fill="#DC2626"/>
|
|
<text x="800" y="240" font-family="IBM Plex Sans,sans-serif" font-size="12" fill="#0A0A0A" text-anchor="middle">Asia-East</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section container">
|
|
<div class="grid-3">
|
|
<div class="card">
|
|
<p class="label mb-2">Vault Encryption</p>
|
|
<p>Entire vault encrypted at rest with AES-256-GCM.</p>
|
|
</div>
|
|
<div class="card">
|
|
<p class="label accent mb-2">Credential Encryption</p>
|
|
<p>Per-field encryption. Your AI agent can read the API key it needs.</p>
|
|
</div>
|
|
<div class="card red">
|
|
<p class="label red mb-2">Identity Encryption</p>
|
|
<p>Client-side. WebAuthn PRF. The key is derived from your WebAuthn authenticator.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<div>© 2025 clavitor</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.querySelectorAll('.nav-dropdown-trigger').forEach(t=>t.addEventListener('click',()=>t.parentElement.classList.toggle('open')));
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|