Загрузка...
Адаптивный раздел с 3 тарифами. Сравнение планов для SaaS и лендингов. Градиентные карточки, списки функций, кнопки CTA. Tailwind CSS.
<section class="sm:p-8 bg-zinc-900/50 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f02f2d97-2f6e-4565-af29-5029e146b6ad_3840w.jpg)] bg-cover border-zinc-800 rounded-[36px] mt-10 mr-8 ml-8 pt-6 pr-6 pb-6 pl-6">
<!-- Header -->
<div class="flex flex-col items-center text-center">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-900/70 border border-zinc-800 text-zinc-300 backdrop-blur-xl">
<svg xmlns="http://www.w3.org/200/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="credit-card" class="lucide lucide-credit-card h-4 w-4"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
<span class="text-xs font-normal font-geist">Pricing</span>
</div>
<h2 class="mt-4 text-[40px] sm:text-6xl lg:text-7xl leading-[0.95] font-geist font-medium tracking-tighter text-white">Scale with confidence</h2>
<p class="mt-2 text-sm sm:text-base text-zinc-400 font-geist">Choose a plan that grows with your team and adapts to your workflow needs.</p>
</div>
<!-- Plans -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 max-w-7xl mt-8 mr-auto ml-auto">
<!-- Starter -->
<article class="relative overflow-hidden sm:p-6 bg-gradient-to-b from-zinc-900/70 to-zinc-950/80 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 backdrop-blur-xl">
<!-- Top meta -->
<div class="flex items-center justify-between text-xs">
<div class="inline-flex items-center gap-2 text-zinc-400">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-zinc-950/80 ring-1 ring-white/10 text-zinc-300 backdrop-blur">01</span>
<div class="flex items-center gap-1">
<span class="h-1.5 w-1.5 rounded-full bg-indigo-500/80"></span>
<span class="h-1.5 w-1.5 rounded-full bg-indigo-500/40"></span>
<span class="h-1.5 w-1.5 rounded-full bg-indigo-500/20"></span>
</div>
</div>
<div class="inline-flex items-center gap-1 text-zinc-400">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock h-3.5 w-3.5"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
<span class="font-geist">Setup in 24 hours</span>
</div>
</div>
<!-- Core -->
<div class="mt-5 flex items-start justify-between">
<div class="">
<h3 class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">Starter</h3>
<p class="mt-1 text-sm text-zinc-400 font-geist">Perfect for individual developers and small projects.</p>
</div>
<div class="text-right">
<p class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">$29</p>
<p class="text-xs text-zinc-500 font-geist">per month</p>
</div>
</div>
<button class="mt-5 inline-flex items-center justify-center gap-2 h-11 w-full rounded-full bg-white/90 text-zinc-900 text-sm font-normal hover:bg-white transition backdrop-blur font-geist">
Get Started
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
<!-- Features -->
<div class="mt-6">
<p class="text-xs text-zinc-400 font-geist">Everything you need to start:</p>
<ul class="mt-3 space-y-3">
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-white/10 flex items-center justify-center backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-zinc-300 font-geist">5 active projects with full version control</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-white/10 flex items-center justify-center backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-zinc-300 font-geist">10GB storage and priority CDN</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-white/10 flex items-center justify-center backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-zinc-300 font-geist">Community support and knowledge base</span>
</li>
</ul>
</div>
</article>
<!-- Pro (Most popular) -->
<article class="relative overflow-hidden sm:p-6 bg-gradient-to-b from-zinc-900/80 to-zinc-950/90 border-white/20 border rounded-2xl pt-5 pr-5 pb-5 pl-5 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] backdrop-blur-xl">
<div class="absolute right-4 top-4">
</div>
<!-- Top meta -->
<div class="flex text-xs items-center justify-between">
<div class="inline-flex items-center gap-2 text-zinc-400">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-zinc-950/80 ring-1 ring-indigo-500/20 text-zinc-300 backdrop-blur">02</span>
<div class="flex items-center gap-1">
<span class="h-1.5 w-1.5 rounded-full bg-indigo-500/80"></span>
<span class="h-1.5 w-1.5 rounded-full bg-indigo-500/80"></span>
<span class="h-1.5 w-1.5 rounded-full bg-indigo-500/40"></span>
</div>
</div>
<div class="inline-flex items-center gap-1 text-zinc-400">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock h-3.5 w-3.5"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
<span class="font-geist">Setup in 12 hours</span>
</div>
</div>
<!-- Core -->
<div class="mt-5 flex items-start justify-between">
<div class="">
<h3 class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">Pro</h3>
<p class="mt-1 text-sm text-zinc-400 font-geist">For growing teams and professional workflows.</p>
</div>
<div class="text-right">
<p class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">$99</p>
<p class="text-xs text-zinc-500 font-geist">per month</p>
</div>
</div>
<button class="mt-5 inline-flex items-center justify-center gap-2 h-11 w-full rounded-full bg-white/90 text-zinc-900 text-sm font-normal hover:bg-white transition backdrop-blur font-geist">
Start Pro
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap h-4 w-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>
</button>
<!-- Features -->
<div class="mt-6">
<p class="text-xs text-zinc-400 font-geist">Everything in Starter, plus:</p>
<ul class="mt-3 space-y-3">
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-indigo-500/20 flex items-center justify-center backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-zinc-300 font-geist">Unlimited projects and team collaboration</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-indigo-500/20 flex items-center justify-center backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-zinc-300 font-geist">100GB storage with global edge deployment</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-indigo-500/20 flex items-center justify-center backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-zinc-300 font-geist">Priority email support and live chat</span>
</li>
</ul>
</div>
</article>
<!-- Enterprise -->
<article class="relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-b from-zinc-900/70 to-zinc-950/80 backdrop-blur-xl p-5 sm:p-6">
<!-- Top meta -->
<div class="flex items-center justify-between text-xs">
<div class="inline-flex items-center gap-2 text-zinc-400">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-zinc-950/80 ring-1 ring-white/10 text-zinc-300 backdrop-blur">03</span>
<div class="flex items-center gap-1">
<span class="h-1.5 w-1.5 rounded-full bg-indigo-500/80"></span>
<span class="h-1.5 w-1.5 rounded-full bg-indigo-500/80"></span>
<span class="h-1.5 w-1.5 rounded-full bg-indigo-500/80"></span>
</div>
</div>
<div class="inline-flex items-center gap-1 text-zinc-400">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock h-3.5 w-3.5"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
<span class="font-geist">Custom onboarding</span>
</div>
</div>
<!-- Core -->
<div class="mt-5 flex items-start justify-between">
<div class="">
<h3 class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">Enterprise</h3>
<p class="mt-1 text-sm text-zinc-400 font-geist">For large organizations with custom requirements.</p>
</div>
<div class="text-right">
<p class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">Custom</p>
<p class="text-xs text-zinc-500 font-geist">contact sales</p>
</div>
</div>
<button class="mt-5 inline-flex items-center justify-center gap-2 h-11 w-full rounded-full bg-white/20 text-white text-sm font-normal hover:bg-white/30 transition backdrop-blur border border-white/20 font-geist">
Contact Sales
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="messages-square" class="lucide lucide-messages-square h-4 w-4"><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" class=""></path><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1" class=""></path></svg>
</button>
<!-- Features -->
<div class="mt-6">
<p class="text-xs text-zinc-400 font-geist">Everything in Pro, plus:</p>
<ul class="mt-3 space-y-3">
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-white/10 flex items-center justify-center backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-zinc-300 font-geist">SSO/SAML authentication and audit logs</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-white/10 flex items-center justify-center backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-zinc-300 font-geist">Dedicated infrastructure and 99.9% SLA</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900/70 border border-white/10 flex items-center justify-center backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-zinc-300 font-geist">24/7 phone support and dedicated CSM</span>
</li>
</ul>
</div>
</article>
</div>
<!-- Footnote -->
<div class="flex flex-col text-center mt-6 items-center">
<p class="text-xs text-zinc-500 font-geist">All plans include a 14-day free trial. <a href="#" class="underline decoration-zinc-700 underline-offset-4 text-zinc-300 hover:text-white font-geist">View detailed comparison</a>.</p>
</div>
</section>