Загрузка...
Анимированная сетка цен с заголовком-машинкой. Секция с градиентными карточками, эффектом наведения и кнопками. Идеально для SaaS-страниц.
<div
class="bg-[#e4e4e7] font-['Inter',sans-serif] text-gray-800 flex flex-col items-center justify-center min-h-screen relative overflow-x-hidden antialiased selection:bg-purple-500/30 py-16 px-4 sm:px-8"
style="font-family: 'Inter', sans-serif;">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
<!-- Subtle Lamp Lighting -->
<div
class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-white/80 blur-[120px] rounded-full pointer-events-none z-0">
</div>
<!-- Circuit Board Background (SVG) -->
<div class="absolute inset-0 flex items-center justify-center pointer-events-none z-0 overflow-hidden opacity-50">
<svg class="min-w-[1400px] h-[900px]" viewBox="0 0 1400 900" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<linearGradient id="chipGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#f4f4f5" />
</linearGradient>
<filter id="chipShadow" x="-100%" y="-100%" width="300%" height="300%">
<feDropShadow dx="0" dy="25" stdDeviation="20" flood-color="#000" flood-opacity="0.15" />
</filter>
</defs>
<g stroke="#d4d4d8" stroke-width="1.5">
<line x1="120" y1="210" x2="160" y2="210" />
<line x1="120" y1="220" x2="160" y2="220" />
<line x1="120" y1="230" x2="160" y2="230" />
</g>
<rect x="160" y="195" width="70" height="50" rx="6" fill="url(#chipGrad)" stroke="rgba(0,0,0,0.12)"
stroke-width="1" filter="url(#chipShadow)" />
<circle cx="170" cy="205" r="1.5" fill="#a1a1aa">
<animate attributeName="opacity" values="0.2;1;0.2" dur="1.5s" repeatCount="indefinite" />
</circle>
<circle cx="215" cy="220" r="2.5" fill="#ef4444" filter="url(#glow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite" />
</circle>
<path d="M 215 220 H 350 L 480 350 H 550" stroke="#d4d4d8" stroke-width="1.5" fill="none" />
<path d="M 215 220 H 350 L 480 350 H 550" stroke="#a855f7" stroke-width="1.5" fill="none"
stroke-dasharray="60 600" stroke-dashoffset="600">
<animate attributeName="stroke-dashoffset" values="600;-60" dur="3s" repeatCount="indefinite" />
</path>
<g stroke="#d4d4d8" stroke-width="1.5">
<line x1="120" y1="670" x2="160" y2="670" />
<line x1="120" y1="680" x2="160" y2="680" />
<line x1="120" y1="690" x2="160" y2="690" />
</g>
<rect x="160" y="655" width="70" height="50" rx="6" fill="url(#chipGrad)" stroke="rgba(0,0,0,0.12)"
stroke-width="1" filter="url(#chipShadow)" />
<circle cx="170" cy="665" r="1.5" fill="#a1a1aa">
<animate attributeName="opacity" values="0.2;1;0.2" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="215" cy="680" r="2.5" fill="#3b82f6" filter="url(#glow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="2.5s" repeatCount="indefinite" />
</circle>
<path d="M 215 680 H 350 L 480 550 H 550" stroke="#d4d4d8" stroke-width="1.5" fill="none" />
<path d="M 215 680 H 350 L 480 550 H 550" stroke="#a855f7" stroke-width="1.5" fill="none"
stroke-dasharray="60 600" stroke-dashoffset="600">
<animate attributeName="stroke-dashoffset" values="600;-60" dur="3.5s" repeatCount="indefinite" />
</path>
<g stroke="#d4d4d8" stroke-width="1.5">
<line x1="1280" y1="210" x2="1240" y2="210" />
<line x1="1280" y1="220" x2="1240" y2="220" />
<line x1="1280" y1="230" x2="1240" y2="230" />
</g>
<rect x="1170" y="195" width="70" height="50" rx="6" fill="url(#chipGrad)" stroke="rgba(0,0,0,0.12)"
stroke-width="1" filter="url(#chipShadow)" />
<circle cx="1230" cy="205" r="1.5" fill="#a1a1aa">
<animate attributeName="opacity" values="0.2;1;0.2" dur="1.7s" repeatCount="indefinite" />
</circle>
<circle cx="1185" cy="220" r="2.5" fill="#10b981" filter="url(#glow)">
<animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite" />
</circle>
<path d="M 1185 220 H 1050 L 920 350 H 850" stroke="#d4d4d8" stroke-width="1.5" fill="none" />
<path d="M 1185 220 H 1050 L 920 350 H 850" stroke="#a855f7" stroke-width="1.5" fill="none"
stroke-dasharray="60 600" stroke-dashoffset="600">
<animate attributeName="stroke-dashoffset" values="600;-60" dur="4s" repeatCount="indefinite" />
</path>
</svg>
</div>
<!-- Header Area -->
<div class="relative z-10 w-full max-w-5xl mx-auto mb-16 flex flex-col items-center">
<div class="flex items-center justify-center gap-5 mb-8">
<div class="flex gap-1.5 opacity-60">
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
</div>
<div
class="w-14 h-14 bg-gradient-to-b from-[#ffffff] to-[#f4f4f5] rounded-2xl flex items-center justify-center relative overflow-hidden"
style="box-shadow: inset 0 2px 5px rgba(0,0,0,0.02), inset 0 0 0 1px rgba(0,0,0,0.04), 0 10px 15px -3px rgba(0,0,0,0.05), 0 25px 30px -5px rgba(0,0,0,0.08);">
<div class="absolute inset-0 opacity-10"
style="background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0); background-size: 4px 4px;">
</div>
<iconify-icon icon="solar:layers-linear" class="text-2xl text-[#a855f7] relative z-10"
style="filter: drop-shadow(0 0 6px rgba(168,85,247,0.4));"></iconify-icon>
</div>
<div class="flex gap-1.5 opacity-60">
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
<div class="dot-light w-1 h-1 rounded-full bg-black opacity-20 transition-all duration-300"></div>
</div>
</div>
<div class="text-center h-20">
<h1 class="text-3xl sm:text-4xl font-light text-[#18181b] tracking-tight mb-3"
style="text-shadow: 0 1px 2px rgba(0,0,0,0.05);">
<span id="typewriter"></span><span class="animate-pulse">_</span>
</h1>
<p class="text-base text-[#52525b] font-light max-w-lg mx-auto">Deploy the precise processing power needed for
your applications. Scale effortlessly as your user base grows.</p>
</div>
<script>
(function() {
const phrases = ["Compute Levels", "Expand Processing", "Worldwide Edge"];
let pIdx = 0, cIdx = 0, isDeleting = false;
const tw = document.getElementById('typewriter');
function type() {
const current = phrases[pIdx];
tw.textContent = isDeleting ? current.substring(0, cIdx - 1) : current.substring(0, cIdx + 1);
cIdx = isDeleting ? cIdx - 1 : cIdx + 1;
let speed = isDeleting ? 40 : 80;
if (!isDeleting && cIdx === current.length) { speed = 2500; isDeleting = true; }
else if (isDeleting && cIdx === 0) { isDeleting = false; pIdx = (pIdx + 1) % phrases.length; speed = 500; }
setTimeout(type, speed);
}
type();
const dots = document.querySelectorAll('.dot-light');
let dotIdx = 0;
setInterval(() => {
dots.forEach(d => { d.style.opacity = '0.2'; d.style.boxShadow = 'none'; });
if(dots[dotIdx]) { dots[dotIdx].style.opacity = '0.8'; dots[dotIdx].style.boxShadow = '0 0 6px rgba(168,85,247,0.5)'; }
if(dots[5 - dotIdx]) { dots[5 - dotIdx].style.opacity = '0.8'; dots[5 - dotIdx].style.boxShadow = '0 0 6px rgba(168,85,247,0.5)'; }
dotIdx = (dotIdx + 1) % 3;
}, 300);
})();
</script>
</div>
<!-- Pricing Grid -->
<div class="relative z-10 w-full max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Starter Tier -->
<div
class="relative p-8 rounded-3xl bg-gradient-to-b from-[#ffffff] to-[#f8f8f8] flex flex-col transition-all duration-500 ease-out hover:-translate-y-2 shadow-[inset_0_1px_0_rgba(255,255,255,1),inset_0_0_0_1px_rgba(0,0,0,0.04),0_10px_30px_-10px_rgba(0,0,0,0.1)]">
<div class="flex items-center gap-3 mb-4"><iconify-icon icon="solar:shield-linear"
class="text-2xl text-[#a1a1aa]"></iconify-icon>
<h3 class="text-lg font-normal text-[#18181b]">Starter</h3>
</div>
<div class="text-4xl tracking-tight font-light text-[#18181b] mb-1">$0</div>
<p class="text-sm text-[#52525b] font-light mb-8">Ideal for local development and initial phases.</p>
<button class="w-full bg-gradient-to-b from-[#ffffff] to-[#f4f4f5] rounded-xl py-3 text-sm font-light transition-all active:scale-[0.98] text-[#18181b] mb-8" style="box-shadow: inset 0 1px 1px #fff, 0 5px 15px -5px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06);">Start Free</button>
<div class="h-px w-full mb-8"
style="background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);"></div>
<ul class="space-y-4 flex-1 text-sm font-light text-[#52525b]">
<li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> 1,000 API calls daily</li>
<li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> Shared units</li>
<li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> Forum assistance</li>
</ul>
</div>
<!-- Advanced Tier -->
<div
class="relative p-8 rounded-3xl bg-gradient-to-b from-[#ffffff] to-[#f8f8f8] flex flex-col md:-translate-y-4 transition-all duration-500 ease-out hover:-translate-y-6 shadow-[inset_0_1px_0_rgba(255,255,255,1),inset_0_0_0_1px_rgba(168,85,247,0.4),0_20px_40px_-15px_rgba(147,51,234,0.2)]">
<div class="absolute top-4 left-4 w-1 h-1 rounded-full bg-purple-500/40 animate-pulse"></div>
<div class="absolute top-4 right-4 w-1 h-1 rounded-full bg-purple-500/40 animate-pulse"
style="animation-delay: 0.5s"></div>
<div class="flex items-center gap-3 mb-4"><iconify-icon icon="solar:cpu-linear"
class="text-2xl text-[#a855f7]"></iconify-icon>
<h3 class="text-lg font-normal text-[#18181b]">Advanced</h3>
<span class="ml-auto px-2.5 py-1 rounded-full bg-purple-100/50 text-[#9333ea] text-xs border border-purple-200/50">TRENDING</span>
</div>
<div class="text-4xl tracking-tight font-light text-[#18181b] mb-1">$59
<span class="text-sm text-[#a1a1aa]">/mo</span>
</div>
<p class="text-sm text-[#52525b] font-light mb-8">Tuned for high-traffic live deployments.</p>
<button class="w-full bg-gradient-to-b from-[#9333ea] to-[#7e22ce] text-white rounded-xl py-3 text-sm font-light transition-all active:scale-[0.98] mb-8" style="box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 10px 20px -5px rgba(147,51,234,0.4), 0 0 0 1px #7e22ce;">Go Advanced</button>
<div class="h-px w-full mb-8"
style="background: linear-gradient(90deg, transparent, rgba(168,85,247,0.2), transparent);"></div>
<ul class="space-y-4 flex-1 text-sm font-light text-[#52525b]">
<li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
class="text-lg text-[#a855f7] shrink-0 mt-0.5"></iconify-icon> 500k API calls daily</li>
<li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
class="text-lg text-[#a855f7] shrink-0 mt-0.5"></iconify-icon> Load balancing</li>
<li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
class="text-lg text-[#a855f7] shrink-0 mt-0.5"></iconify-icon> Priority email</li>
<li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
class="text-lg text-[#a855f7] shrink-0 mt-0.5"></iconify-icon> Deep observability</li>
</ul>
</div>
<!-- Enterprise Tier -->
<div
class="relative p-8 rounded-3xl bg-gradient-to-b from-[#ffffff] to-[#f8f8f8] flex flex-col transition-all duration-500 ease-out hover:-translate-y-2 shadow-[inset_0_1px_0_rgba(255,255,255,1),inset_0_0_0_1px_rgba(0,0,0,0.04),0_10px_30px_-10px_rgba(0,0,0,0.1)]">
<div class="flex items-center gap-3 mb-4"><iconify-icon icon="solar:server-square-linear"
class="text-2xl text-[#a1a1aa]"></iconify-icon>
<h3 class="text-lg font-normal text-[#18181b]">Enterprise</h3>
</div>
<div class="text-4xl tracking-tight font-light text-[#18181b] mb-1">Tailored</div>
<p class="text-sm text-[#52525b] font-light mb-8">Dedicated servers for maximum security.</p>
<button class="w-full bg-gradient-to-b from-[#ffffff] to-[#f4f4f5] rounded-xl py-3 text-sm font-light transition-all active:scale-[0.98] text-[#18181b] mb-8" style="box-shadow: inset 0 1px 1px #fff, 0 5px 15px -5px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06);">Contact Sales</button>
<div class="h-px w-full mb-8"
style="background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);"></div>
<ul class="space-y-4 flex-1 text-sm font-light text-[#52525b]">
<li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> Uncapped API</li>
<li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> Dedicated hardware</li>
<li class="flex items-start gap-3"><iconify-icon icon="solar:check-circle-linear"
class="text-lg text-[#a1a1aa] shrink-0 mt-0.5"></iconify-icon> 24/7 Voice support</li>
</ul>
</div>
</div>
</div>