69 lines
3.3 KiB
Cheetah
69 lines
3.3 KiB
Cheetah
{{define "onboarding-plan"}}
|
||
<div class="container-lg" style="padding:4rem 1rem">
|
||
<p class="label accent mb-3" style="text-align:center">Step 3 of 3</p>
|
||
<h1 class="mb-4" style="text-align:center">Pick your plan</h1>
|
||
<p class="lead mb-8" style="text-align:center">7-day free trial on all plans. Cancel anytime. Annual billing for individuals and small teams; monthly available for 100+. <strong>Price for life:</strong> Your rate never increases as long as you stay subscribed.</p>
|
||
|
||
<div id="plan-error" class="mb-4" style="display:none;color:var(--brand-red);text-align:center"></div>
|
||
|
||
<div class="grid-3">
|
||
<div class="price-card">
|
||
<p class="label mb-4">Personal</p>
|
||
<div class="price-amount mb-2">$12<span class="price-period">/yr</span></div>
|
||
<p class="text-sm text-secondary mb-6">1 person · 1 vault · 5 agents</p>
|
||
<button data-plan="personal" class="btn btn-ghost btn-block plan-pick">Choose Personal</button>
|
||
</div>
|
||
<div class="price-card featured">
|
||
<span class="badge recommended price-badge">Recommended</span>
|
||
<p class="label accent mb-4">Family</p>
|
||
<div class="price-amount mb-2">$24<span class="price-period">/yr</span></div>
|
||
<p class="text-sm text-secondary mb-6">~6 people · 1 vault · 15 agents</p>
|
||
<button data-plan="family" class="btn btn-primary btn-block plan-pick">Choose Family</button>
|
||
</div>
|
||
<div class="price-card">
|
||
<p class="label mb-4">Pro</p>
|
||
<div class="price-amount mb-2">$49<span class="price-period">/yr</span></div>
|
||
<p class="text-sm text-secondary mb-6">1 person · 1 vault · 50 agents</p>
|
||
<button data-plan="pro" class="btn btn-ghost btn-block plan-pick">Choose Pro</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-8 text-center">
|
||
<p class="text-sm text-secondary mb-4">Need more? <a href="/pricing">View team plans</a> (10–500 people)</p>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
|
||
{{define "onboarding-plan-script"}}
|
||
<script>
|
||
document.querySelectorAll('.plan-pick').forEach(btn => {
|
||
btn.addEventListener('click', async function() {
|
||
const errEl = document.getElementById('plan-error');
|
||
const plan = this.dataset.plan;
|
||
errEl.style.display = 'none';
|
||
document.querySelectorAll('.plan-pick').forEach(b => b.disabled = true);
|
||
this.textContent = 'Redirecting...';
|
||
try {
|
||
const r = await fetch('/onboarding/plan', {
|
||
method: 'POST',
|
||
headers: {'Content-Type':'application/json'},
|
||
body: JSON.stringify({plan})
|
||
});
|
||
const d = await r.json();
|
||
if (d.ok && d.checkout_url) {
|
||
window.location = d.checkout_url;
|
||
} else {
|
||
errEl.textContent = d.error || 'Could not start checkout.';
|
||
errEl.style.display = 'block';
|
||
document.querySelectorAll('.plan-pick').forEach(b => b.disabled = false);
|
||
}
|
||
} catch(err) {
|
||
errEl.textContent = 'Connection error. Try again.';
|
||
errEl.style.display = 'block';
|
||
document.querySelectorAll('.plan-pick').forEach(b => b.disabled = false);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
{{end}}
|