Загрузка...
Секция с 3-уровневыми ценами SaaS на Tailwind. Адаптивный дизайн, переключатель месяцев/лет, анимированный фон. Идеально для SaaS-платформ.
<section class="bg-[#295dfc] text-white font-['Inter'] min-h-screen overflow-x-hidden relative selection:bg-white/20">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&display=swap" rel="stylesheet">
<canvas id="bg-canvas" class="fixed inset-0 w-full h-full z-0 pointer-events-none opacity-40"></canvas>
<main class="relative z-10 max-w-[1280px] mx-auto px-6 py-16 lg:py-24 min-h-screen flex flex-col items-center justify-center gap-12">
<!-- Page Heading & Toggle -->
<div class="text-center w-full max-w-2xl mx-auto flex flex-col items-center z-20">
<h1 class="text-4xl lg:text-5xl font-normal tracking-tight mb-4 leading-tight">Transparent, flexible pricing</h1>
<p class="text-base font-light opacity-80 mb-8">Select the ideal plan to accelerate your team's financial workflows.</p>
<div class="flex items-center justify-center gap-4 text-sm bg-white/5 p-2 rounded-full border border-white/10 backdrop-blur-md shadow-[0_20px_40px_-10px_rgba(0,0,0,0.3)]">
<span class="font-light opacity-70 pl-4">Monthly</span>
<button type="button" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full bg-white/20 transition-colors duration-200 ease-in-out focus:outline-none hover:bg-white/30" role="switch" aria-checked="true" aria-label="Toggle billing period">
<span aria-hidden="true" class="translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out scale-75"></span>
</button>
<span class="font-normal opacity-100 pr-2">Annually <span class="text-[#fbbf24] ml-1 text-xs py-1 px-2 rounded-full bg-[#fbbf24]/10">Save 20%</span></span>
</div>
</div>
<!-- Pricing Cards -->
<div class="flex flex-col lg:flex-row items-stretch justify-center gap-8 lg:gap-6 w-full">
<!-- Tier 1: Starter -->
<div class="w-full max-w-[380px] flex flex-col bg-white/5 border border-white/10 rounded-[2rem] p-8 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.4)] relative z-10 backdrop-blur-md transition-transform hover:-translate-y-1">
<div class="flex justify-between items-center border-b border-white/10 pb-5 mb-8">
<span class="text-xl font-light opacity-50 tracking-tight">01</span>
<span class="text-xs font-normal uppercase tracking-widest opacity-50">Starter</span>
</div>
<div>
<h2 class="text-5xl font-normal tracking-tight mb-4 leading-tight">$0<span class="text-xl font-light opacity-50 tracking-tight">/mo</span></h2>
<p class="text-sm font-light opacity-80 leading-relaxed">Generate single-use virtual cards for online purchases, ensuring your primary accounts remain entirely insulated.</p>
</div>
<!-- Scaled Down Illustration -->
<div class="relative w-full flex items-center justify-center mt-8 mb-8 h-48">
<div class="absolute w-40 h-40 rounded-full bg-[#3b6df8] opacity-40 blur-3xl"></div>
<div class="relative w-48 h-48 flex items-center justify-center">
<div class="absolute bottom-4 w-36 h-16 rounded-[50%] bg-[#5b8af9]" style="box-shadow: 0 20px 0 #1e40af;"></div>
<div class="absolute bottom-12 w-28 h-12 rounded-[50%] bg-[#8baafb]" style="box-shadow: 0 16px 0 #3b6df8;"></div>
<div class="anim-float absolute top-4 w-24 h-36 rounded-2xl bg-gradient-to-tr from-[#f97316] to-[#fbbf24] p-3 shadow-2xl border border-white/20 flex flex-col justify-between" style="transform: rotateX(55deg) rotateZ(-35deg);">
<div class="flex justify-between items-start">
<iconify-icon icon="solar:sim-card-linear" class="text-white/90" width="18" style="stroke-width: 1.5;"></iconify-icon>
<iconify-icon icon="solar:card-linear" class="text-white/50" width="16" style="stroke-width: 1.5;"></iconify-icon>
</div>
<div class="flex gap-1">
<div class="w-1.5 h-1.5 rounded-full bg-white/60"></div>
<div class="w-1.5 h-1.5 rounded-full bg-white/60"></div>
<div class="w-1.5 h-1.5 rounded-full bg-white/60"></div>
</div>
</div>
</div>
</div>
<!-- Features Check -->
<ul class="flex flex-col gap-3 mb-8 w-full mt-auto">
<li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> 5 Virtual Cards</li>
<li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Standard Support</li>
<li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Basic Analytics</li>
</ul>
<button class="w-full bg-white/10 text-white py-4 rounded-full text-sm font-normal hover:bg-white/20 transition-all border border-white/10 mt-auto">Get Started</button>
</div>
<!-- Tier 2: Professional (Highlighted) -->
<div class="w-full max-w-[380px] flex flex-col bg-white/10 border border-white/30 rounded-[2rem] p-8 shadow-[0_50px_100px_-20px_rgba(0,0,0,0.6)] relative z-20 backdrop-blur-xl lg:-translate-y-4">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-[#f97316] to-[#fbbf24] text-white text-xs font-normal px-4 py-1.5 rounded-full shadow-lg tracking-wide">
Most Popular
</div>
<div class="flex justify-between items-center border-b border-white/20 pb-5 mb-8">
<span class="text-xl font-light opacity-70 tracking-tight">02</span>
<span class="text-xs font-normal uppercase tracking-widest opacity-90">Professional</span>
</div>
<div>
<h2 class="text-5xl font-normal tracking-tight mb-4 leading-tight">$12<span class="text-xl font-light opacity-60 tracking-tight">/mo</span></h2>
<p class="text-sm font-light opacity-90 leading-relaxed">Set automated parameters to effortlessly direct surplus funds into varied asset allocations.</p>
</div>
<!-- Scaled Down Illustration -->
<div class="relative w-full flex items-center justify-center mt-8 mb-8 h-48">
<div class="absolute w-40 h-40 rounded-full bg-[#3b6df8] opacity-60 blur-3xl"></div>
<div class="relative w-48 h-48 flex items-center justify-center">
<div class="absolute bottom-6 w-40 h-16 rounded-[50%] bg-[#4f7df9]" style="box-shadow: 0 24px 0 #1e40af;"></div>
<div class="anim-float absolute bottom-20 w-20 h-20 rounded-full bg-gradient-to-br from-gray-100 to-gray-400 border border-white/50 flex items-center justify-center" style="transform: rotateX(65deg); box-shadow: 0 10px 0 #9ca3af;">
<div class="w-14 h-14 rounded-full border border-gray-400/30"></div>
</div>
<div class="anim-float absolute top-2 w-20 h-32 rounded-2xl bg-gradient-to-tr from-[#f97316] to-[#fbbf24] p-2.5 shadow-2xl border border-white/20" style="transform: rotateX(45deg) rotateZ(15deg); animation-delay: 0.5s;">
<div class="w-5 h-3 bg-white/30 rounded-sm mb-2"></div>
<div class="w-full h-1 bg-white/20 rounded-full mb-1.5"></div>
<div class="w-2/3 h-1 bg-white/20 rounded-full"></div>
</div>
</div>
</div>
<!-- Features Check -->
<ul class="flex flex-col gap-3 mb-8 w-full mt-auto">
<li class="flex items-center gap-3 text-sm font-light opacity-90"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Unlimited Virtual Cards</li>
<li class="flex items-center gap-3 text-sm font-light opacity-90"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Priority Support</li>
<li class="flex items-center gap-3 text-sm font-light opacity-90"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Smart Routing Rules</li>
<li class="flex items-center gap-3 text-sm font-light opacity-90"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Custom Portfolios</li>
</ul>
<button class="w-full bg-white text-[#295dfc] py-4 rounded-full text-sm font-normal hover:bg-opacity-90 transition-all shadow-xl shadow-black/10 mt-auto">Upgrade to Pro</button>
</div>
<!-- Tier 3: Enterprise -->
<div class="w-full max-w-[380px] flex flex-col bg-white/5 border border-white/10 rounded-[2rem] p-8 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.4)] relative z-10 backdrop-blur-md transition-transform hover:-translate-y-1">
<div class="flex justify-between items-center border-b border-white/10 pb-5 mb-8">
<span class="text-xl font-light opacity-50 tracking-tight">03</span>
<span class="text-xs font-normal uppercase tracking-widest opacity-50">Enterprise</span>
</div>
<div>
<h2 class="text-5xl font-normal tracking-tight mb-4 leading-tight">$49<span class="text-xl font-light opacity-50 tracking-tight">/mo</span></h2>
<p class="text-sm font-light opacity-80 leading-relaxed">Track company-wide cash flow through real-time analytics, featuring AI-driven expense sorting.</p>
</div>
<!-- Scaled Down Illustration -->
<div class="relative w-full flex items-center justify-center mt-8 mb-8 h-48">
<div class="absolute w-40 h-40 rounded-full bg-[#3b6df8] opacity-40 blur-3xl"></div>
<div class="relative w-48 h-48 flex items-center justify-center">
<div class="absolute bottom-4 right-4 w-24 h-24 bg-[#5b8af9] rounded-sm" style="transform: rotateX(60deg) rotateZ(45deg); box-shadow: -12px 12px 0 #1e40af;"></div>
<div class="absolute bottom-12 left-4 w-20 h-20 bg-[#8baafb] rounded-sm" style="transform: rotateX(60deg) rotateZ(45deg); box-shadow: -8px 8px 0 #3b6df8;"></div>
<div class="anim-float absolute top-8 left-4 w-28 h-16 rounded-2xl bg-gradient-to-tr from-[#f97316] to-[#fbbf24] p-2.5 shadow-2xl border border-white/20 flex flex-col justify-between" style="transform: rotateX(60deg) rotateZ(-45deg); animation-delay: 1s;">
<iconify-icon icon="solar:sim-card-linear" class="text-white/80" width="14" style="stroke-width: 1.5;"></iconify-icon>
<div class="w-full h-1 bg-white/30 rounded-full"></div>
</div>
<div class="anim-float absolute top-12 right-2 w-28 h-20 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 p-3 shadow-xl flex items-end" style="transform: rotateX(10deg) rotateY(-15deg); animation-delay: 0.2s;">
<svg viewBox="0 0 100 50" class="w-full h-full overflow-visible">
<path d="M0,40 Q20,10 40,30 T80,10 T100,20" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" style="filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));"></path>
</svg>
</div>
</div>
</div>
<!-- Features Check -->
<ul class="flex flex-col gap-3 mb-8 w-full mt-auto">
<li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Everything in Pro</li>
<li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Dedicated Account Manager</li>
<li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Machine-learning Insights</li>
<li class="flex items-center gap-3 text-sm font-light opacity-80"><iconify-icon icon="solar:check-circle-linear" width="18"></iconify-icon> Custom API Access</li>
</ul>
<button class="w-full bg-white/10 text-white py-4 rounded-full text-sm font-normal hover:bg-white/20 transition-all border border-white/10 mt-auto">Contact Sales</button>
</div>
</div>
</main>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
let width, height, particles;
function initCanvas() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
particles = [];
const particleCount = window.innerWidth < 768 ? 30 : 70;
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * width,
y: Math.random() * height,
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3,
radius: Math.random() * 1.5 + 0.5
});
}
}
function drawCanvas() {
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
ctx.lineWidth = 1;
particles.forEach((p, i) => {
p.x += p.vx;
p.y += p.vy;
if (p.x < 0 || p.x > width) p.vx *= -1;
if (p.y < 0 || p.y > height) p.vy *= -1;
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fill();
for (let j = i + 1; j < particles.length; j++) {
const p2 = particles[j];
const dist = Math.hypot(p.x - p2.x, p.y - p2.y);
if (dist < 120) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
}
});
}
const floatElements = document.querySelectorAll('.anim-float');
floatElements.forEach(el => {
el.dataset.baseTransform = el.style.transform || '';
const delayStr = el.style.animationDelay;
el.dataset.delay = delayStr ? parseFloat(delayStr) : 0;
el.style.animationDelay = '';
});
function animate() {
drawCanvas();
const time = performance.now() / 1000;
floatElements.forEach((el, index) => {
const delay = parseFloat(el.dataset.delay);
const yOffset = Math.sin(time * 1.5 + index + delay * 5) * 8;
el.style.transform = `${el.dataset.baseTransform} translateY(${yOffset}px)`;
});
requestAnimationFrame(animate);
}
window.addEventListener('resize', initCanvas);
initCanvas();
animate();
</script>
</section>