239 lines
17 KiB
HTML
239 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pricing — Vault1984</title>
|
|
<meta name="description" content="Free self-hosted or $12/year hosted. No tiers, no per-seat, no contact sales.">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
navy: { DEFAULT: '#0A1628', light: '#111f38', lighter: '#1a2d4f' },
|
|
accent: '#22C55E',
|
|
'accent-hover': '#16A34A',
|
|
danger: '#EF4444',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'monospace'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body { background-color: #0A1628; }
|
|
.gradient-text { background: linear-gradient(135deg, #22C55E 0%, #4ade80 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
|
</style>
|
|
</head>
|
|
<body class="font-sans text-gray-300 antialiased">
|
|
|
|
<!-- Nav -->
|
|
<nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-white/5">
|
|
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
<a href="/" class="font-mono font-semibold text-xl text-white tracking-tight">vault<span class="text-accent">1984</span></a>
|
|
<div class="hidden md:flex items-center gap-6 text-sm">
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">GitHub</a>
|
|
<a href="/install.html" class="text-gray-400 hover:text-white transition-colors">Self-host</a>
|
|
<a href="#" class="border border-gray-600 text-gray-300 hover:border-gray-400 hover:text-white px-4 py-1.5 rounded-lg transition-colors text-sm">Sign in</a>
|
|
<a href="/pricing.html" class="bg-accent hover:bg-accent-hover text-black font-medium px-4 py-1.5 rounded-lg transition-colors text-sm">Get hosted — $12/yr</a>
|
|
</div>
|
|
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
|
</button>
|
|
</div>
|
|
<div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-navy/95 backdrop-blur-md">
|
|
<div class="px-6 py-4 space-y-3">
|
|
<a href="#" class="block text-gray-400 hover:text-white">GitHub</a>
|
|
<a href="/install.html" class="block text-gray-400 hover:text-white">Self-host</a>
|
|
<a href="#" class="block text-gray-400 hover:text-white">Sign in</a>
|
|
<a href="/pricing.html" class="block bg-accent hover:bg-accent-hover text-black font-medium px-4 py-2 rounded-lg text-center">Get hosted — $12/yr</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<section class="pt-32 pb-12 px-6">
|
|
<div class="max-w-7xl mx-auto text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Pricing</h1>
|
|
<p class="text-lg text-gray-400 max-w-2xl mx-auto">No tiers. No per-seat. No "contact sales." Two options — both get every feature.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing cards -->
|
|
<section class="pb-20 px-6">
|
|
<div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-6">
|
|
<!-- Self-hosted -->
|
|
<div class="bg-navy-light rounded-xl p-8 border border-white/5">
|
|
<h2 class="text-xl font-bold text-white mb-1">Self-hosted</h2>
|
|
<div class="text-4xl font-bold text-white mb-1">Free</div>
|
|
<p class="text-gray-500 text-sm mb-8">Forever. MIT license. No strings.</p>
|
|
|
|
<a href="/install.html" class="block text-center border border-gray-600 text-gray-300 hover:border-accent hover:text-white font-medium px-6 py-3 rounded-lg transition-colors mb-8">Self-host guide →</a>
|
|
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider mb-4 font-medium">What you get</div>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
L1/L2 field-level encryption
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
WebAuthn PRF (L2 biometric encryption)
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
MCP server for AI agents
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Scoped MCP tokens (multi-agent)
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
TOTP generation via MCP
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Browser extension (Chrome, Firefox)
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Import from Bitwarden / 1Password
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
LLM-powered field classification
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Passphrase & password generator
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
REST API
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Unlimited entries
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Full source code (MIT)
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Hosted -->
|
|
<div class="bg-navy-light rounded-xl p-8 border border-accent/30 relative">
|
|
<div class="absolute -top-3 right-6 bg-accent text-black text-xs font-semibold px-3 py-1 rounded-full">Recommended</div>
|
|
<h2 class="text-xl font-bold text-white mb-1">Hosted</h2>
|
|
<div class="text-4xl font-bold text-white mb-1">$12<span class="text-lg font-normal text-gray-400">/year</span></div>
|
|
<p class="text-gray-500 text-sm mb-8">That's $1/month. Less than a coffee.</p>
|
|
|
|
<a href="#" class="block text-center bg-accent hover:bg-accent-hover text-black font-semibold px-6 py-3 rounded-lg transition-colors mb-8">Get started</a>
|
|
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider mb-4 font-medium">Everything in self-hosted, plus</div>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Managed infrastructure
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Daily encrypted backups
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Multi-region: New York, Amsterdam, Frankfurt, Helsinki
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Uptime monitoring & alerting
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Automatic updates & patches
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
TLS included (vault1984.com subdomain)
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Custom domain support
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-gray-300">
|
|
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Email support
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section class="py-20 px-6 border-t border-white/5">
|
|
<div class="max-w-3xl mx-auto">
|
|
<h2 class="text-3xl font-bold text-white text-center mb-14">Common questions</h2>
|
|
<div class="space-y-8">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white mb-2">Why $12/year?</h3>
|
|
<p class="text-gray-400 text-sm leading-relaxed">Because a password manager isn't a luxury product. $12 covers compute, backups, and bandwidth for one user for a year. We're not trying to extract maximum revenue — we're trying to cover costs and keep the lights on.</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white mb-2">Is the self-hosted version missing any features?</h3>
|
|
<p class="text-gray-400 text-sm leading-relaxed">No. Every feature ships in both versions. The hosted version adds managed infrastructure, backups, and multi-region — things that are hard to do yourself but have nothing to do with the vault's functionality.</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white mb-2">Is there an SLA?</h3>
|
|
<p class="text-gray-400 text-sm leading-relaxed">Not at $12/year. We aim for high uptime but don't make contractual guarantees at this price point. If you need an SLA, self-host — then uptime is in your hands.</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white mb-2">Can I switch between hosted and self-hosted?</h3>
|
|
<p class="text-gray-400 text-sm leading-relaxed">Yes. Export your vault at any time as encrypted JSON. Import it into a self-hosted instance, or vice versa. Your data is always portable.</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white mb-2">Can hosted Vault1984 read my L2 data?</h3>
|
|
<p class="text-gray-400 text-sm leading-relaxed">No. L2 fields are encrypted client-side with WebAuthn PRF. The server stores ciphertext it cannot decrypt. This isn't a policy decision — it's a mathematical impossibility. We don't have the key.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-white/5 py-12 px-6">
|
|
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<div class="flex items-center gap-6">
|
|
<a href="/" class="font-mono font-semibold text-lg text-white tracking-tight">vault<span class="text-accent">1984</span></a>
|
|
<div class="flex items-center gap-4 text-sm text-gray-500">
|
|
<a href="#" class="hover:text-gray-300 transition-colors">GitHub</a>
|
|
<a href="#" class="hover:text-gray-300 transition-colors">Discord</a>
|
|
<a href="#" class="hover:text-gray-300 transition-colors">X</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6 text-sm text-gray-500">
|
|
<a href="/privacy.html" class="hover:text-gray-300 transition-colors">Privacy</a>
|
|
<a href="/terms.html" class="hover:text-gray-300 transition-colors">Terms</a>
|
|
<span>MIT License</span>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-7xl mx-auto mt-8 text-center text-xs text-gray-600">
|
|
Built for humans with AI assistants.
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.getElementById('mobile-menu-btn').addEventListener('click', function() {
|
|
document.getElementById('mobile-menu').classList.toggle('hidden');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|