Загрузка...
Адаптивная таблица цен с переключением планов. Идеально для SaaS и подписок. Tailwind CSS. Ежемесячно/ежегодно.
<div id="pricing" class="sm:px-6 md:pt-12 md:pb-14 border-white/10 border-t pt-10 pr-5 pb-10 pl-5">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-5">
<div class="max-w-2xl">
<p class="text-xs uppercase tracking-wide text-gray-400 font-geist" data-animate="" style="opacity: 1; transform: none; filter: blur(0px);">Pricing</p>
<h2 class="mt-1 text-3xl md:text-4xl tracking-tight font-space-grotesk font-medium" data-animate="" style="opacity: 1; transform: none; filter: blur(0px);">Scale from idea to production</h2>
<p class="mt-2 text-sm text-gray-300 font-geist" data-animate="" style="opacity: 1; transform: none; filter: blur(0px);">Simple, predictable plans with enterprise-grade controls when you need them.</p>
</div>
<div class="flex items-center gap-3" data-animate="" style="opacity: 1; transform: none; filter: blur(0px);">
<div class="inline-flex rounded-full border border-white/10 bg-white/5 p-1">
<button id="planMonthly" class="px-3 py-1.5 text-sm rounded-full font-geist font-medium bg-white text-black">Monthly</button>
<button id="planAnnual" class="px-3 py-1.5 text-sm rounded-full font-geist text-gray-200 hover:text-white transition-colors">Annual</button>
</div>
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-[11px] bg-orange-100/10 text-orange-200 ring-1 ring-white/10 font-geist" id="annualBadge" aria-hidden="true" style="opacity: 1;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-3.5 h-3.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
Save 15%
</span>
</div>
</div>
<div class="mt-6 grid md:grid-cols-3 gap-5">
<!-- Starter -->
<div class="rounded-2xl border border-white/10 bg-white/[0.03] hover:bg-white/[0.05] transition-colors p-5" data-animate="" style="opacity: 1; transform: none; filter: blur(0px);">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold tracking-tight font-geist">Starter</h3>
<span class="text-[11px] text-gray-400 font-geist">Best for evaluation</span>
</div>
<div class="mt-3 flex items-baseline gap-1">
<span class="text-3xl tracking-tight font-space-grotesk font-medium" data-price="" data-monthly="0" data-annual="0">$0</span>
<span class="text-sm text-gray-400 font-geist">/mo</span>
</div>
<p class="mt-2 text-sm text-gray-300 font-geist">Get started with shared infrastructure and essential features.</p>
<ul class="mt-4 space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
Shared RPC endpoints (rate limited)
</li>
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
1 IBC relayer channel
</li>
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
Basic alerts & logs (7-day retention)
</li>
<li class="flex items-center gap-2 text-gray-400 line-through font-geist">
<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" data-lucide="x" class="lucide lucide-x w-3.5 h-3.5"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
HSM-backed key isolation
</li>
</ul>
<button class="mt-5 w-full inline-flex items-center justify-center gap-2 rounded-full px-4 py-2.5 bg-white text-black text-sm font-semibold hover:bg-gray-100 transition-colors font-geist">
<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" data-lucide="rocket" class="lucide lucide-rocket w-4 h-4"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" class=""></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" class=""></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path></svg>
Start free
</button>
</div>
<!-- Pro (Most popular) -->
<div class="relative rounded-2xl border border-white/10 bg-gradient-to-br from-white/[0.05] to-white/[0.02] hover:from-white/[0.07] hover:to-white/[0.03] transition-colors p-5 ring-1 ring-white/10" data-animate="" style="opacity: 1; transform: none; filter: blur(0px);">
<div class="absolute -top-2 right-4">
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-[11px] bg-white text-black font-geist ring-1 ring-black/10">
<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" data-lucide="star" class="lucide lucide-star w-3.5 h-3.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
Most popular
</span>
</div>
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold tracking-tight font-geist">Pro</h3>
<span class="text-[11px] text-gray-400 font-geist"><span class="hidden md:inline">Teams </span>building in production</span>
</div>
<div class="mt-3 flex items-baseline gap-1">
<span class="text-3xl tracking-tight font-space-grotesk font-medium" data-price="" data-monthly="299" data-annual="254">$299</span>
<span class="text-sm text-gray-400 font-geist">/mo</span>
</div>
<p class="mt-2 text-sm text-gray-300 font-geist">Dedicated capacity, advanced security, and SLAs.</p>
<ul class="mt-4 space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
Dedicated RPC endpoints + regional stickiness
</li>
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
5 IBC relayer channels w/ failover
</li>
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
HSM-backed signing + sealed channels
</li>
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
SLOs, rate limits, and policy engine
</li>
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
Priority support (business hours)
</li>
</ul>
<button class="mt-5 w-full inline-flex items-center justify-center gap-2 rounded-full px-4 py-2.5 bg-white text-black text-sm font-semibold hover:bg-gray-100 transition-colors font-geist">
<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" data-lucide="zap" class="lucide lucide-zap w-4 h-4"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
Start Pro
</button>
<p class="mt-2 text-[11px] text-gray-400 font-geist" id="billingNote">Billed monthly</p>
</div>
<!-- Enterprise -->
<div class="rounded-2xl border border-white/10 bg-white/[0.03] hover:bg-white/[0.05] transition-colors p-5" data-animate="" style="opacity: 1; transform: none; filter: blur(0px);">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold tracking-tight font-geist">Enterprise</h3>
<span class="text-[11px] text-gray-400 font-geist">Compliance & scale</span>
</div>
<div class="mt-3 flex items-baseline gap-2">
<span class="text-3xl tracking-tight font-space-grotesk font-medium">Custom</span>
</div>
<p class="mt-2 text-sm text-gray-300 font-geist">Private regions, tailored SLAs, and audit-ready deployments.</p>
<ul class="mt-4 space-y-2 text-sm text-gray-200">
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
BYO cloud / on-prem, private peering
</li>
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
Unlimited relayer channels + custom routing
</li>
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
Dedicated HSMs, KMS integrations
</li>
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
SSO/SAML, RBAC, explicit SOC 2/ISO mappings
</li>
<li class="flex items-center gap-2 font-geist">
<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" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-white/90"><path d="M20 6 9 17l-5-5" class=""></path></svg>
24/7 support with runbooks
</li>
</ul>
<button class="mt-5 w-full inline-flex items-center justify-center gap-2 rounded-full px-4 py-2.5 bg-white/10 border border-white/15 text-white text-sm font-medium hover:bg-white/15 transition-colors font-geist">
<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" data-lucide="message-square" class="lucide lucide-message-square w-4 h-4"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" class=""></path></svg>
Contact sales
</button>
</div>
</div>
<div class="mt-4 flex items-center gap-2 text-xs text-gray-400 font-geist" data-animate="" style="opacity: 1; transform: none; filter: blur(0px);">
<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" data-lucide="info" class="lucide lucide-info w-3.5 h-3.5"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 16v-4" class=""></path><path d="M12 8h.01" class=""></path></svg>
No wallet required to try. Cancel or change plans anytime.
</div>
</div>