Загрузка...
Секция с анимированными карточками SaaS-возможностей, логотипами, графиками и данными о расходах. Идеально для демонстрации преимуществ продукта.
<section class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll lg:px-6 lg:pb-12 lg:pt-12 max-w-6xl mr-auto ml-auto pt-24 pr-4 pb-24 pl-4">
<div class="md:p-8 bg-gradient-to-br from-blue-500/10 via-blue-500/0 to-blue-500/10 rounded-[28px] pt-6 pr-6 pb-6 pl-6 shadow-[0_40px_120px_rgba(0,0,0,0.95)]" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0), rgba(59, 130, 246, 0.2)); --border-radius-before: 28px">
<section class="animate-on-scroll lg:pb-0 lg:pl-0 lg:pr-0 max-w-6xl mr-auto ml-auto pr-0 pb-0 pl-0" id="pricing">
<div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between gap-x-6 gap-y-6 items-start">
<div class="">
<p class="text-[10px] uppercase text-slate-500 font-geist" style="">
Product capabilities
</p>
<h2 class="sm:text-3xl text-2xl text-slate-50 mt-2 font-geist font-light tracking-tighter" style="">
One workspace, three ways to accelerate work
</h2>
<p class="mt-3 text-sm sm:text-base text-slate-400 max-w-xl font-geist" style="">
NeuroDesk plugs into your existing tools, learns from your
documents and turns every workflow into a reusable,
searchable playbook.
</p>
</div>
<button type="submit" class="inline-flex text-[12px] transition-all hover:brightness-110 hover:shadow-[0_0_40px_rgba(248,181,129,0.9),0_0_0_1px_rgba(251,191,36,0.7)] text-white font-geist bg-gradient-to-bl from-[#fff370] via-orange-500 to-[#fff370] h-9 rounded-full pr-6 pl-6 items-center" style="border-radius: 9999px; position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px;">
Get Started Free
</button>
</div>
<div class="grid gap-4 md:grid-cols-3 mt-8 gap-x-4 gap-y-4">
<div class="flex flex-col overflow-hidden sm:p-4 font-geist bg-gradient-to-b from-slate-900/90 to-slate-950/95 h-[360px] border-white/10 border rounded-2xl pt-3 pr-3 pb-3 pl-3 relative shadow-[inset_0_1px_0_rgba(148,163,184,0.08)]">
<style>
@keyframes orbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes orbit-reverse {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
</style>
<div class="flex flex-col h-full relative gap-4">
<div class="relative flex items-center justify-center rounded-2xl h-48 overflow-hidden bg-[#05030F] w-full shrink-0">
<div class="opacity-60 absolute top-0 right-0 bottom-0 left-0" style="
background-image: radial-gradient(rgba(30,41,59,0.6) 1px, transparent 0);
background-size: 18px 18px;
"></div>
<div class="relative z-10 w-56 h-56 scale-90">
<div class="absolute inset-2 rounded-full border border-slate-900/60"></div>
<div class="absolute inset-2 rounded-full border-t-2 border-t-orange-400/80 border-l-0 border-r-0 border-b-0" style="transform: rotate(40deg);"></div>
<div class="absolute inset-10 rounded-full border border-slate-900/60"></div>
<div class="absolute inset-10 rounded-full border-t-2 border-t-orange-300/80 border-l-0 border-r-0 border-b-0" style="transform: rotate(-20deg);"></div>
<div class="absolute inset-[86px] rounded-full bg-gradient-to-b from-orange-400 via-orange-500 to-amber-400 shadow-[0_0_80px_rgba(248,181,129,0.65)] flex items-center justify-center z-20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="w-6 h-6 text-slate-50" stroke-width="2">
<path fill="currentColor" d="M7.205 7.562a.75.75 0 0 0-.993-1.124A8.73 8.73 0 0 0 3.25 13a.75.75 0 0 0 1.5 0a7.23 7.23 0 0 1 2.455-5.438m10.583-1.124a.75.75 0 0 0-.993 1.124A7.23 7.23 0 0 1 19.25 13a.75.75 0 0 0 1.5 0a8.73 8.73 0 0 0-2.962-6.562m-7.601 13.584a.75.75 0 1 0-.374 1.452a8.8 8.8 0 0 0 4.374 0a.75.75 0 1 0-.374-1.452A7.3 7.3 0 0 1 12 20.25a7.3 7.3 0 0 1-1.813-.228" opacity=".5" class=""></path>
<path fill="currentColor" d="M9 6a3 3 0 1 0 6 0a3 3 0 0 0-6 0M2.5 18a3 3 0 1 0 6 0a3 3 0 0 0-6 0m16 3a3 3 0 1 1 0-6a3 3 0 0 1 0 6" class=""></path>
</svg>
</div>
<div class="absolute inset-0 z-10 pointer-events-none" style="animation: orbit 40s linear infinite;">
<div class="absolute -left-1 top-16 h-9 w-9 rounded-full border border-white/70 overflow-hidden bg-[#05030F] pointer-events-auto" style="animation: orbit-reverse 40s linear infinite;">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b8deab20-79f0-4568-be6e-c4baeded4050_320w.webp" alt="" class="w-full h-full object-cover">
</div>
<div class="absolute right-2 top-6 h-9 w-9 rounded-full border border-white/70 overflow-hidden bg-[#05030F] pointer-events-auto" style="animation: orbit-reverse 40s linear infinite;">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/80b61cd8-8abc-4da0-bb0d-3e4d2d961c4f_320w.webp" alt="" class="w-full h-full object-cover">
</div>
<div class="absolute -right-1 bottom-10 h-9 w-9 rounded-full border border-white/70 overflow-hidden bg-[#05030F] pointer-events-auto" style="animation: orbit-reverse 40s linear infinite;">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/8ae8587a-051a-4cf8-b727-f61e05474f40_320w.webp" alt="" class="w-full h-full object-cover">
</div>
<div class="absolute left-5 bottom-3 h-9 w-9 rounded-full border border-white/70 overflow-hidden bg-[#05030F] pointer-events-auto" style="animation: orbit-reverse 40s linear infinite;">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e49c05ca-9dac-4be2-81e9-3f55b5165162_320w.webp" alt="" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
<div class="relative mt-auto pb-1">
<h2 class="md:text-lg text-lg text-slate-50" style="">
Align your team on every license
</h2>
<p class="text-sm text-slate-400 max-w-sm mt-2" style="">
Share context, owners, and usage for each product so
every seat is easy to audit.
</p>
</div>
</div>
</div>
<div class="flex flex-col overflow-hidden sm:p-4 font-geist bg-gradient-to-b from-slate-900/90 to-slate-950/95 h-[360px] border-white/10 border rounded-2xl pt-3 pr-3 pb-3 pl-3 relative shadow-[inset_0_1px_0_rgba(148,163,184,0.08)]">
<div class="flex flex-col h-full relative gap-4">
<div class="flex overflow-hidden h-48 bg-[#05030F] rounded-2xl relative items-center justify-center w-full shrink-0">
<div class="absolute inset-0 h-full w-full pointer-events-none select-none" style="
background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
background-size: 20px 20px;
mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
"></div>
<div class="grid grid-cols-4 content-center overflow-hidden w-full h-full z-10 pt-4 pr-4 pb-4 pl-4 relative gap-x-3 gap-y-3" style="mask-image: linear-gradient(180deg, transparent, black 40%, black 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 40%, black 70%, transparent);">
<style>
@keyframes aura-scroll-down {
0% { transform: translateY(-50%); }
100% { transform: translateY(0); }
}
@keyframes aura-scroll-up {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
.animate-col-down { animation: aura-scroll-down 20s linear infinite; }
.animate-col-up { animation: aura-scroll-up 20s linear infinite; }
</style>
<div class="relative h-full overflow-hidden">
<div class="flex flex-col gap-3 animate-col-down w-full">
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-slate-100/10 via-slate-100/0 to-transparent"></div>
<div class="flex h-full relative items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 227" class="w-5 h-5" fill="none">
<path fill="#FA0F00" d="m128.024 83.527l60.288 143.042h-39.513l-18.038-45.554H86.642zM256 0v226.54L161.353 0zM94.684 0L0 226.54V0z" class=""></path>
</svg>
</div>
</div>
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-sky-200/15 via-transparent to-transparent"></div>
<div class="flex h-full relative items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 384" class="w-5 h-5">
<path fill="#0ACF83" d="M64 384c35.328 0 64-28.672 64-64v-64H64c-35.328 0-64 28.672-64 64s28.672 64 64 64" class=""></path>
<path fill="#A259FF" d="M0 192c0-35.328 28.672-64 64-64h64v128H64c-35.328 0-64-28.672-64-64" class=""></path>
<path fill="#F24E1E" d="M0 64C0 28.672 28.672 0 64 0h64v128H64C28.672 128 0 99.328 0 64" class=""></path>
<path fill="#FF7262" d="M128 0h64c35.328 0 64 28.672 64 64s-28.672 64-64 64h-64z" class=""></path>
<path fill="#1ABCFE" d="M256 192c0 35.328-28.672 64-64 64s-64-28.672-64-64s28.672-64 64-64s64 28.672 64 64" class=""></path>
</svg>
</div>
</div>
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-blue-200/15 via-transparent to-transparent"></div>
<div class="relative flex h-full items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 268" class="w-5 h-5">
<path fill="#FFF" d="M16.092 11.538L164.09.608c18.179-1.56 22.85-.508 34.28 7.801l47.243 33.282C253.406 47.414 256 48.975 256 55.207v182.527c0 11.439-4.155 18.205-18.696 19.24L65.44 267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826 213.814C2.586 205.487 0 199.254 0 191.97V29.726c0-9.352 4.155-17.153 16.092-18.188" class=""></path>
<path d="M164.09.608L16.092 11.538C4.155 12.573 0 20.374 0 29.726v162.245c0 7.284 2.585 13.516 8.826 21.843l34.789 45.237c5.715 7.284 10.912 8.844 21.825 8.327l171.864-10.404c14.532-1.035 18.696-7.801 18.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37 8.409C186.94.1 182.27-.952 164.09.608M69.327 52.22c-14.033.945-17.216 1.159-25.186-5.323L23.876 30.778c-2.06-2.086-1.026-4.69 4.163-5.207l142.274-10.395c11.947-1.043 18.17 3.12 22.842 6.758l24.401 17.68c1.043.525 3.638 3.637.517 3.637L71.146 52.095zm-16.36 183.954V81.222c0-6.767 2.077-9.887 8.3-10.413L230.02 60.93c5.724-.517 8.31 3.12 8.31 9.879v153.917c0 6.767-1.044 12.49-10.387 13.008l-161.487 9.361c-9.343.517-13.489-2.594-13.489-10.921M212.377 89.53c1.034 4.681 0 9.362-4.681 9.897l-7.783 1.542v114.404c-6.758 3.637-12.981 5.715-18.18 5.715c-8.308 0-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1 3.646s0 9.362-12.989 9.362l-35.814 2.077c-1.043-2.086 0-7.284 3.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68 1.55-11.439 8.826-11.965l38.426-2.585l52.958 81.113v-71.76l-13.498-1.552c-1.043-5.733 3.111-9.896 8.3-10.404z" class=""></path>
</svg>
</div>
</div>
</div>
</div>
<div class="relative h-full overflow-hidden">
<div class="flex flex-col gap-3 animate-col-up w-full">
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-rose-200/15 via-transparent to-transparent"></div>
<div class="relative flex h-full items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5">
<path fill="#E01E5A" d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z" class=""></path>
<path fill="#36C5F0" d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z" class=""></path>
<path fill="#2EB67D" d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z" class=""></path>
<path fill="#ECB22E" d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z" class=""></path>
</svg>
</div>
</div>
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-emerald-200/15 via-transparent to-transparent"></div>
<div class="flex h-full relative items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5">
<path fill="#E74D89" d="M128 8.5c66 0 119.4 53.4 119.4 119.3S194 247.2 128 247.2S8.6 193.8 8.6 127.9S62 8.5 128 8.5" class=""></path>
<path fill="#B2215A" d="M128 255.7c-70.6 0-128-57.3-128-127.8C0 57.3 57.4 0 128 0s128 57.3 128 127.8s-57.4 127.9-128 127.9m107.9-110.4c-3.7-1.2-33.8-10.1-68.1-4.7c14.3 39.2 20.1 71.2 21.2 77.8c24.6-16.5 42.1-42.7 46.9-73.1m-65.2 83.2c-1.6-9.6-8-43-23.3-82.8c-.2.1-.5.2-.7.2c-61.7 21.5-83.8 64.2-85.8 68.2c18.5 14.4 41.8 23 67.1 23c15.1.1 29.6-3 42.7-8.6M46.8 201c2.5-4.2 32.5-53.8 88.9-72.1c1.4-.5 2.9-.9 4.3-1.3c-2.7-6.2-5.7-12.4-8.9-18.5c-54.6 16.3-107.6 15.6-112.4 15.5c0 1.1-.1 2.2-.1 3.3c.1 28.1 10.7 53.7 28.2 73.1M21 105.6c4.9.1 49.9.3 101.1-13.3C104 60.1 84.4 33.1 81.6 29.2C50.9 43.6 28.1 71.8 21 105.6m81.4-83.8c3 4 22.9 31 40.8 63.9c38.9-14.6 55.3-36.6 57.3-39.4c-19.3-17.1-44.7-27.5-72.5-27.5c-8.8 0-17.4 1.1-25.6 3m110.2 37.1c-2.3 3.1-20.6 26.6-61 43.1c2.5 5.2 5 10.5 7.3 15.8c.8 1.9 1.6 3.8 2.4 5.6c36.4-4.6 72.5 2.8 76.1 3.5c-.3-25.7-9.5-49.4-24.8-68" class=""></path>
</svg>
</div>
</div>
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-lime-200/15 via-transparent to-transparent"></div>
<div class="flex h-full relative items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 384" class="w-5 h-5">
<path fill="#0ACF83" d="M64 384c35.328 0 64-28.672 64-64v-64H64c-35.328 0-64 28.672-64 64s28.672 64 64 64" class=""></path>
<path fill="#A259FF" d="M0 192c0-35.328 28.672-64 64-64h64v128H64c-35.328 0-64-28.672-64-64" class=""></path>
<path fill="#F24E1E" d="M0 64C0 28.672 28.672 0 64 0h64v128H64C28.672 128 0 99.328 0 64" class=""></path>
<path fill="#FF7262" d="M128 0h64c35.328 0 64 28.672 64 64s-28.672 64-64 64h-64z" class=""></path>
<path fill="#1ABCFE" d="M256 192c0 35.328-28.672 64-64 64s-64-28.672-64-64s28.672-64 64-64s64 28.672 64 64" class=""></path>
</svg>
</div>
</div>
</div>
</div>
<div class="overflow-hidden h-full relative">
<div class="flex flex-col gap-3 animate-col-down w-full">
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-indigo-200/15 via-transparent to-transparent"></div>
<div class="relative flex h-full items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 268" class="w-5 h-5">
<path fill="#FFF" d="M16.092 11.538L164.09.608c18.179-1.56 22.85-.508 34.28 7.801l47.243 33.282C253.406 47.414 256 48.975 256 55.207v182.527c0 11.439-4.155 18.205-18.696 19.24L65.44 267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826 213.814C2.586 205.487 0 199.254 0 191.97V29.726c0-9.352 4.155-17.153 16.092-18.188" class=""></path>
<path d="M164.09.608L16.092 11.538C4.155 12.573 0 20.374 0 29.726v162.245c0 7.284 2.585 13.516 8.826 21.843l34.789 45.237c5.715 7.284 10.912 8.844 21.825 8.327l171.864-10.404c14.532-1.035 18.696-7.801 18.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37 8.409C186.94.1 182.27-.952 164.09.608M69.327 52.22c-14.033.945-17.216 1.159-25.186-5.323L23.876 30.778c-2.06-2.086-1.026-4.69 4.163-5.207l142.274-10.395c11.947-1.043 18.17 3.12 22.842 6.758l24.401 17.68c1.043.525 3.638 3.637.517 3.637L71.146 52.095zm-16.36 183.954V81.222c0-6.767 2.077-9.887 8.3-10.413L230.02 60.93c5.724-.517 8.31 3.12 8.31 9.879v153.917c0 6.767-1.044 12.49-10.387 13.008l-161.487 9.361c-9.343.517-13.489-2.594-13.489-10.921M212.377 89.53c1.034 4.681 0 9.362-4.681 9.897l-7.783 1.542v114.404c-6.758 3.637-12.981 5.715-18.18 5.715c-8.308 0-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1 3.646s0 9.362-12.989 9.362l-35.814 2.077c-1.043-2.086 0-7.284 3.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68 1.55-11.439 8.826-11.965l38.426-2.585l52.958 81.113v-71.76l-13.498-1.552c-1.043-5.733 3.111-9.896 8.3-10.404z" class=""></path>
</svg>
</div>
</div>
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-violet-200/15 via-transparent to-transparent"></div>
<div class="relative flex h-full items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5">
<path fill="#E01E5A" d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z" class=""></path>
<path fill="#36C5F0" d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z" class=""></path>
<path fill="#2EB67D" d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z" class=""></path>
<path fill="#ECB22E" d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z" class=""></path>
</svg>
</div>
</div>
</div>
</div>
<div class="relative h-full overflow-hidden">
<div class="flex flex-col gap-3 animate-col-up w-full">
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-lime-200/15 via-transparent to-transparent"></div>
<div class="flex h-full relative items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 384" class="w-5 h-5">
<path fill="#0ACF83" d="M64 384c35.328 0 64-28.672 64-64v-64H64c-35.328 0-64 28.672-64 64s28.672 64 64 64" class=""></path>
<path fill="#A259FF" d="M0 192c0-35.328 28.672-64 64-64h64v128H64c-35.328 0-64-28.672-64-64" class=""></path>
<path fill="#F24E1E" d="M0 64C0 28.672 28.672 0 64 0h64v128H64C28.672 128 0 99.328 0 64" class=""></path>
<path fill="#FF7262" d="M128 0h64c35.328 0 64 28.672 64 64s-28.672 64-64 64h-64z" class=""></path>
<path fill="#1ABCFE" d="M256 192c0 35.328-28.672 64-64 64s-64-28.672-64-64s28.672-64 64-64s64 28.672 64 64" class=""></path>
</svg>
</div>
</div>
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-teal-200/15 via-transparent to-transparent"></div>
<div class="flex h-full relative items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 227" class="w-5 h-5" fill="none">
<path fill="#FA0F00" d="m128.024 83.527l60.288 143.042h-39.513l-18.038-45.554H86.642zM256 0v226.54L161.353 0zM94.684 0L0 226.54V0z" class=""></path>
</svg>
</div>
</div>
<div class="aspect-square rounded-2xl border border-slate-700/70 bg-gradient-to-b from-slate-900/90 via-slate-900/70 to-slate-950/95 shadow-[0_1px_0_rgba(148,163,184,0.2)] relative overflow-hidden flex-shrink-0">
<div class="absolute inset-x-1 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-orange-200/15 via-transparent to-transparent"></div>
<div class="flex h-full relative items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5">
<path fill="#E74D89" d="M128 8.5c66 0 119.4 53.4 119.4 119.3S194 247.2 128 247.2S8.6 193.8 8.6 127.9S62 8.5 128 8.5" class=""></path>
<path fill="#B2215A" d="M128 255.7c-70.6 0-128-57.3-128-127.8C0 57.3 57.4 0 128 0s128 57.3 128 127.8s-57.4 127.9-128 127.9m107.9-110.4c-3.7-1.2-33.8-10.1-68.1-4.7c14.3 39.2 20.1 71.2 21.2 77.8c24.6-16.5 42.1-42.7 46.9-73.1m-65.2 83.2c-1.6-9.6-8-43-23.3-82.8c-.2.1-.5.2-.7.2c-61.7 21.5-83.8 64.2-85.8 68.2c18.5 14.4 41.8 23 67.1 23c15.1.1 29.6-3 42.7-8.6M46.8 201c2.5-4.2 32.5-53.8 88.9-72.1c1.4-.5 2.9-.9 4.3-1.3c-2.7-6.2-5.7-12.4-8.9-18.5c-54.6 16.3-107.6 15.6-112.4 15.5c0 1.1-.1 2.2-.1 3.3c.1 28.1 10.7 53.7 28.2 73.1M21 105.6c4.9.1 49.9.3 101.1-13.3C104 60.1 84.4 33.1 81.6 29.2C50.9 43.6 28.1 71.8 21 105.6m81.4-83.8c3 4 22.9 31 40.8 63.9c38.9-14.6 55.3-36.6 57.3-39.4c-19.3-17.1-44.7-27.5-72.5-27.5c-8.8 0-17.4 1.1-25.6 3m110.2 37.1c-2.3 3.1-20.6 26.6-61 43.1c2.5 5.2 5 10.5 7.3 15.8c.8 1.9 1.6 3.8 2.4 5.6c36.4-4.6 72.5 2.8 76.1 3.5c-.3-25.7-9.5-49.4-24.8-68" class=""></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative mt-auto pb-1">
<h2 class="md:text-lg text-lg text-slate-50 font-geist" style="">
Connect every product in a single view
</h2>
<p class="text-sm text-slate-400 max-w-sm mt-2" style="">
Bring billing, ownership, and access into one panel,
with each tool living in a clear, dedicated tile.
</p>
</div>
</div>
</div>
<div class="flex flex-col overflow-hidden sm:p-4 font-geist bg-gradient-to-b from-slate-900/90 to-slate-950/95 h-[360px] border-white/10 border rounded-2xl pt-3 pr-3 pb-3 pl-3 relative shadow-[inset_0_1px_0_rgba(148,163,184,0.08)]">
<style>
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }
@keyframes pulse-glow { 0%, 100% { transform: scale(1); box-shadow: 0 0 80px rgba(248,181,129,0.6); } 50% { transform: scale(1.05); box-shadow: 0 0 120px rgba(248,181,129,0.8); } }
.animate-float-1 { animation: float 4s ease-in-out infinite; }
.animate-float-2 { animation: float 5s ease-in-out infinite; animation-delay: 1s; }
.animate-float-3 { animation: float 4.5s ease-in-out infinite; animation-delay: 2s; }
.animate-pulse-logo { animation: pulse-glow 3s ease-in-out infinite; }
</style>
<div class="flex flex-col h-full relative gap-4">
<div class="relative flex items-center justify-center rounded-2xl h-48 overflow-hidden bg-[#05030F] w-full shrink-0">
<div class="opacity-60 absolute top-0 right-0 bottom-0 left-0 pointer-events-none" style="background-image: radial-gradient(rgba(30,41,59,0.6) 1px, transparent 0); background-size: 18px 18px;"></div>
<div class="flex w-[200px] h-[200px] relative items-center justify-center scale-90">
<svg viewBox="0 0 260 220" class="relative w-[260px] h-[220px] z-10 pointer-events-none select-none">
<circle cx="130" cy="110" r="88" fill="rgba(8,9,20,0.95)" class=""></circle>
<circle cx="130" cy="110" r="86" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1" class=""></circle>
<circle cx="130" cy="110" r="56" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1" class=""></circle>
<g stroke-linecap="round" stroke-width="2" fill="none" class="">
<path d="M130 110 C 105 90 85 70 76 58" stroke="rgba(252,211,77,0.4)" class=""></path>
<path d="M130 110 C 160 90 188 70 198 58" stroke="rgba(251,146,60,0.4)" class=""></path>
<path d="M130 110 C 132 135 132 155 130 176" stroke="rgba(249,115,22,0.4)" class=""></path>
</g>
<g transform="translate(50,30)" class="">
<g class="animate-float-1">
<rect width="52" height="30" rx="10" fill="rgba(15,23,42,0.95)" stroke="rgba(248,250,252,0.15)" class=""></rect>
<rect x="10" y="9" width="16" height="12" rx="4" fill="#f97316" class=""></rect>
<rect x="30" y="9" width="10" height="12" rx="3" fill="rgba(248,250,252,0.2)" class=""></rect>
</g>
</g>
<g transform="translate(172,32)" class="">
<g class="animate-float-2">
<rect width="52" height="30" rx="10" fill="rgba(15,23,42,0.95)" stroke="rgba(248,250,252,0.15)" class=""></rect>
<rect x="10" y="9" width="24" height="12" rx="4" fill="#fb923c" class=""></rect>
<rect x="36" y="9" width="6" height="12" rx="3" fill="rgba(248,250,252,0.25)" class=""></rect>
</g>
</g>
<g transform="translate(104,172)" class="">
<g class="animate-float-3">
<rect width="52" height="30" rx="10" fill="rgba(15,23,42,0.95)" stroke="rgba(248,250,252,0.15)" class=""></rect>
<rect x="10" y="9" width="32" height="12" rx="4" fill="#facc15" class=""></rect>
</g>
</g>
</svg>
<div class="absolute w-[70px] h-[70px] rounded-full bg-gradient-to-b from-orange-400 via-orange-500 to-amber-400 flex items-center justify-center z-20 animate-pulse-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="opacity-90 w-8 h-8 text-white" fill="currentColor">
<path d="M12 14a2 2 0 1 0 0-4a2 2 0 0 0 0 4" class=""></path>
<path d="M5.467 4.392a.75.75 0 0 1-.001 1.06A9.22 9.22 0 0 0 2.75 12a9.22 9.22 0 0 0 2.775 6.606a.75.75 0 1 1-1.05 1.071A10.72 10.72 0 0 1 1.25 12c0-2.972 1.207-5.664 3.156-7.609a.75.75 0 0 1 1.06.001m13.15.072a.75.75 0 0 1 1.061.011A10.72 10.72 0 0 1 22.75 12c0 2.964-1.2 5.65-3.141 7.594a.75.75 0 1 1-1.062-1.06A9.22 9.22 0 0 0 21.25 12a9.22 9.22 0 0 0-2.644-6.475a.75.75 0 0 1 .01-1.06" opacity=".4" class=""></path>
<path d="M8.31 7.488a.75.75 0 0 1-.036 1.06c-.949.888-1.524 2.102-1.524 3.434c0 1.348.589 2.575 1.558 3.466a.75.75 0 0 1-1.016 1.104c-1.252-1.151-2.042-2.77-2.042-4.57c0-1.779.771-3.38 2-4.53a.75.75 0 0 1 1.06.036m7.433.038a.75.75 0 0 1 1.06-.024c1.197 1.145 1.947 2.727 1.947 4.48c0 1.775-.767 3.373-1.99 4.521a.75.75 0 0 1-1.027-1.093c.945-.887 1.517-2.1 1.517-3.428c0-1.313-.559-2.512-1.484-3.396a.75.75 0 0 1-.023-1.06" opacity=".8" class=""></path>
</svg>
</div>
</div>
</div>
<div class="relative mt-auto pb-1">
<h2 class="md:text-lg text-lg text-slate-50" style="">
Route spend to the right budget
</h2>
<p class="text-sm text-slate-400 max-w-sm mt-2" style="">
Automatically allocate charges to teams, tags, and cost
centers the moment they hit your card.
</p>
</div>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 mt-4 gap-x-4 gap-y-4">
<style>
@keyframes aura-spin-chart { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes aura-float-card { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }
@keyframes aura-pulse-slow { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.05); } }
</style>
<!-- Feature 1 -->
<div class="overflow-hidden sm:p-4 font-geist bg-gradient-to-b from-slate-900/90 to-slate-950/95 border-white/10 border rounded-2xl pt-3 pr-3 pb-3 pl-3 relative shadow-[inset_0_1px_0_rgba(148,163,184,0.08)]">
<!-- Soft outer glow / frame -->
<div class="flex-1 flex flex-col gap-5 relative gap-x-5 gap-y-5 justify-between">
<div class="overflow-hidden sm:p-4 font-geist bg-gradient-to-b from-slate-900/90 to-slate-950/95 border-white/10 border rounded-2xl pt-3 pr-3 pb-3 pl-3 relative shadow-[inset_0_1px_0_rgba(148,163,184,0.08)]">
<style>
@keyframes aura-chart-fill {
0% { stroke-dasharray: 0 95; opacity: 0; }
15% { opacity: 1; }
100% { stroke-dasharray: 18 77; opacity: 1; }
}
.aura-slice {
animation: aura-chart-fill 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
opacity: 0;
}
</style>
<div class="flex flex-col md:flex-row items-center justify-center md:justify-between gap-8">
<div class="relative w-[180px] h-[180px]">
<svg viewBox="0 0 36 36" class="w-[180px] h-[180px]" stroke-width="3.4" style="animation: aura-spin-chart 60s linear infinite; transform: rotate(-90deg);">
<circle cx="18" cy="18" r="15" fill="none" stroke="#020617" stroke-width="5.5" opacity="0.9" class=""></circle>
<circle cx="18" cy="18" r="15" fill="none" stroke="#facc15" stroke-width="5.5" stroke-linecap="round" stroke-dasharray="18 77" stroke-dashoffset="2" class="aura-slice" style="animation-delay: 0.1s"></circle>
<circle cx="18" cy="18" r="15" fill="none" stroke="#fb923c" stroke-width="5.5" stroke-linecap="round" stroke-dasharray="18 77" stroke-dashoffset="22" class="aura-slice" style="animation-delay: 0.2s"></circle>
<circle cx="18" cy="18" r="15" fill="none" stroke="#f97373" stroke-width="5.5" stroke-linecap="round" stroke-dasharray="18 77" stroke-dashoffset="42" class="aura-slice" style="animation-delay: 0.3s"></circle>
<circle cx="18" cy="18" r="15" fill="none" stroke="#ec4899" stroke-width="5.5" stroke-linecap="round" stroke-dasharray="18 77" stroke-dashoffset="62" class="aura-slice" style="animation-delay: 0.4s"></circle>
<circle cx="18" cy="18" r="15" fill="none" stroke="#8b5cf6" stroke-width="5.5" stroke-linecap="round" stroke-dasharray="18 77" stroke-dashoffset="82" class="aura-slice" style="animation-delay: 0.5s"></circle>
<circle cx="18" cy="18" r="15" fill="none" stroke="#3b82f6" stroke-width="5.5" stroke-linecap="round" stroke-dasharray="18 77" stroke-dashoffset="102" class="aura-slice" style="animation-delay: 0.6s"></circle>
</svg>
<div class="absolute inset-[32px] rounded-full bg-[#05030F] shadow-[0_0_40px_rgba(0,0,0,0.85)] flex flex-col items-center justify-center text-center">
<span class="text-[11px] text-slate-300" style="">
Neural Networks
</span>
<span class="mt-1 text-3xl font-medium text-slate-50">
27
</span>
</div>
</div>
<div class="w-full max-w-[220px] rounded-2xl bg-black/40 border border-slate-800/70 shadow-[0_18px_45px_rgba(0,0,0,0.85)] px-4 py-4">
<div class="flex items-center justify-between text-xs mb-3">
<span class="text-slate-200" style="">
AI
<span class="text-slate-50" style="">
Processing
</span>
</span>
</div>
<div class="space-y-2.5 text-[11px]">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-emerald-400"></span>
<span class="text-slate-200" style="">Learning</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-sky-400"></span>
<span class="text-slate-200" style="">Analysis</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="">
<span class="h-2.5 w-2.5 rounded-full bg-indigo-400"></span>
<span class="text-slate-200" style="">Automation</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-rose-500"></span>
<span class="text-slate-200" style="">Integration</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative">
<h2 class="md:text-xl text-lg text-slate-50 font-geist" style="">
Visualize spend by team and purpose
</h2>
<p class="mt-2 text-sm text-slate-400 font-geist" style="">
Slice your subscriptions across departments to uncover
duplication and highlight hidden growth costs.
</p>
</div>
</div>
</div>
<div class="overflow-hidden sm:p-4 font-geist bg-gradient-to-b from-slate-900/90 to-slate-950/95 border-white/10 border rounded-2xl pt-3 pr-3 pb-3 pl-3 relative shadow-[inset_0_1px_0_rgba(148,163,184,0.08)]">
<!-- Soft outer glow / frame -->
<div class="overflow-hidden sm:p-5 font-geist h-full border-0 rounded-none pt-4 pr-4 pb-4 pl-4 relative">
<div class="absolute inset-0 pointer-events-none">
<div class="absolute inset-y-8 right-[-40%] w-[80%] bg-gradient-to-l from-emerald-500/30 via-indigo-500/10 to-transparent blur-3xl" style="animation: aura-pulse-slow 8s ease-in-out infinite;"></div>
</div>
<div class="flex-1 flex flex-col gap-5 relative gap-x-5 gap-y-5 justify-between">
<div class="space-y-3">
<style>
@keyframes aura-typing {
0%, 5% { width: 0; }
40%, 80% { width: 100%; }
90%, 100% { width: 0; }
}
@keyframes aura-blink {
0%, 100% { border-color: transparent; }
50% { border-color: #fb923c; }
}
</style>
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-emerald-500/20 via-transparent to-transparent rounded-2xl blur-md" style=""></div>
</div>
<div class="flex flex-col gap-3">
<div class="flex items-center gap-2 rounded-2xl bg-white/5 border border-white/10 px-3 py-2.5">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500">
<circle cx="11" cy="11" r="8" class=""></circle>
<path d="m21 21-4.3-4.3" class=""></path>
</svg>
<div class="h-4 flex items-center">
<span class="text-[11px] text-slate-300 font-geist whitespace-nowrap overflow-hidden border-r-2 border-orange-400 pr-1" style="animation: 4s steps(25) 0s infinite normal none running aura-typing, 0.75s step-end 0s infinite normal none running aura-blink; display: inline-block; vertical-align: middle;">
Filter: expiring soon...
</span>
</div>
</div>
<div class="flex items-center justify-between rounded-2xl bg-white/5 border border-white/10 px-3 py-3" style="animation: aura-float-card 5s ease-in-out infinite;">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-xl bg-sky-500/10 border border-sky-400/60 flex items-center justify-center" style="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-[16px] h-[16px]" stroke-width="2" data-icon-replaced="true" style="color: rgb(241, 245, 249); width: 16px; height: 16px;">
<path fill="#bfdbfe" d="M5 7.5A1.5 1.5 0 0 1 6.5 6h6A1.5 1.5 0 0 1 14 7.5v9A1.5 1.5 0 0 1 12.5 18h-6A1.5 1.5 0 0 1 5 16.5Z" class=""></path>
<path fill="#3b82f6" d="M14 10.5 18.5 8A1 1 0 0 1 20 8.87v7.26a1 1 0 0 1-1.5.87L14 15Z" opacity="0.9" class=""></path>
</svg>
</div>
<div class="">
<p class="text-sm text-slate-100 font-geist" style="">
Streamframe Studio
</p>
<p class="text-[11px] text-slate-400 font-geist" style="">
Trial ends tomorrow
</p>
</div>
</div>
<button class="text-[11px] text-emerald-300 hover:text-emerald-200 font-geist" style="">
Keep plan
</button>
</div>
<div class="flex items-center justify-between rounded-2xl bg-white/5 border border-white/10 px-3 py-3" style="animation: aura-float-card 5s ease-in-out infinite; animation-delay: 1.5s;">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-xl bg-purple-500/15 border border-purple-400/70 flex items-center justify-center" style="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4">
<path fill="#e9d5ff" d="M9.5 7.5A4 4 0 0 1 17 9a3 3 0 0 1 0 6H7A3 3 0 0 1 7 9a4 4 0 0 1 2.5-1.5Z" class=""></path>
<path d="M9 18.5h7" stroke="#a855f7" stroke-width="1.5" stroke-linecap="round" class=""></path>
</svg>
</div>
<div class="">
<p class="text-sm text-slate-100 font-geist" style="">
Nimbus Cloud Pro
</p>
<p class="text-[11px] text-slate-400 font-geist" style="">
Usage at 72% of limit
</p>
</div>
</div>
<span class="text-[11px] text-amber-300 font-geist" style="">
Review quota
</span>
</div>
</div>
</div>
<div class="relative">
<h2 class="md:text-xl text-lg text-slate-50 font-geist" style="">
Never miss a renewal or trial again
</h2>
<p class="mt-2 text-sm text-slate-400 max-w-sm font-geist" style="">
Configure rules once and let Orbitflow schedule
nudges, approvals, and automatic cancellations in the
background.
</p>
</div>
</div>
</div>
</div>
<!-- Feature 2 -->
<!-- Feature 3 -->
</div>
</section>
<!-- ⭐ DIVIDER -->
<!-- ⭐ THIRD ROW BELOW BOTH COLUMNS -->
</div>
</section>