Загрузка...
Секция с анимированными карточками функций для лендингов. Tailwind CSS, отзывчивый дизайн, иконки, графики, CTA. Идеально для SaaS.
<div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
<div class="animate-in text-center max-w-3xl mx-auto px-4">
<span class="inline-flex items-center gap-1 rounded-full bg-lime-400/10 px-2 py-1 text-[11px] text-lime-300 ring-1 ring-lime-300/20 tracking-tight uppercase animate-line-rise">
<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 h-3.5 w-3.5"><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>
Solutions
</span>
<h2 class="mt-4 text-3xl sm:text-4xl lg:text-5xl font-semibold tracking-tight karaoke-container"
data-karaoke-wrapped="true" data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">The</span>
<span class="karaoke-word">complete</span>
<span class="karaoke-word">development</span>
<span class="karaoke-word">platform</span>
<span class="karaoke-word"></span>
</h2>
<p class="mx-auto mt-3 max-w-2xl text-neutral-300 text-sm sm:text-base karaoke-container"
data-karaoke-wrapped="true" data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">Design,</span>
<span class="karaoke-word">build,</span>
<span class="karaoke-word">and</span>
<span class="karaoke-word">scale</span>
<span class="karaoke-word">all</span>
<span class="karaoke-word">in</span>
<span class="karaoke-word">one</span>
<span class="karaoke-word">integrated</span>
<span class="karaoke-word">environment.</span>
<span class="karaoke-word"></span>
</p>
</div>
<div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="space-y-8">
<div class="animate-slide-left">
<div class="flex items-start gap-2">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-lime-400/15 ring-1 ring-lime-300/20 text-lime-300">
<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="command" class="lucide lucide-command h-3.5 w-3.5"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" class=""></path></svg>
</span>
<div class="">
<p class="font-medium">Natural language to code</p>
<p class="text-neutral-300 text-sm karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">Describe</span>
<span class="karaoke-word">features</span>
<span class="karaoke-word">in</span>
<span class="karaoke-word">plain</span>
<span class="karaoke-word">English</span>
<span class="karaoke-word">and</span>
<span class="karaoke-word">watch</span>
<span class="karaoke-word">them</span>
<span class="karaoke-word">come</span>
<span class="karaoke-word">to</span>
<span class="karaoke-word">life.</span>
<span class="karaoke-word"></span>
</p>
</div>
</div>
<div
class="mt-4 rounded-2xl border border-white/10 bg-white/[0.02] ring-1 ring-white/10 p-5 relative overflow-hidden hover:bg-white/[0.04] transition-all duration-300 cursor-pointer hover:scale-[1.02]">
<div class="pointer-events-none absolute inset-0 opacity-[0.18]"
style="background: radial-gradient(800px 300px at 20% 10%, rgba(163,230,53,0.25), transparent 40%), radial-gradient(600px 260px at 80% 120%, rgba(163,230,53,0.12), transparent 40%);">
</div>
<div class="relative">
<p class="text-xl sm:text-2xl font-semibold tracking-tight">
Build with
<span class="text-lime-300">Voice Commands</span>
</p>
<div class="mt-4 flex items-center gap-2 rounded-full bg-black/50 ring-1 ring-white/10 p-1.5">
<div
class="flex-1 rounded-full border border-lime-300/40 bg-neutral-950/40 px-4 py-2 text-sm text-neutral-300">
Create a user dashboard with charts...
</div>
<button class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-lime-400 text-neutral-950 hover:bg-lime-300 transition">
<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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<div class="animate-slide-left stagger-delay-2">
<div class="flex items-start gap-2">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-lime-400/15 ring-1 ring-lime-300/20 text-lime-300">
<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="trending-up" class="lucide lucide-trending-up h-3.5 w-3.5"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
</span>
<div>
<p class="font-medium">Track growth metrics in real-time</p>
<p class="text-neutral-300 text-sm karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">Visualize</span>
<span class="karaoke-word">performance</span>
<span class="karaoke-word">with</span>
<span class="karaoke-word">interactive</span>
<span class="karaoke-word">dashboards.</span>
<span class="karaoke-word"></span>
</p>
</div>
</div>
<div class="mt-4 rounded-2xl border border-white/10 bg-white/[0.02] ring-1 ring-white/10 p-4">
<div class="flex items-center justify-between">
<p class="text-sm text-neutral-300 karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word">Monthly</span>
<span class="karaoke-word">Growth</span>
</p>
<span class="inline-flex items-center gap-1 rounded-full bg-lime-400/15 px-2 py-1 text-xs text-lime-300 ring-1 ring-lime-300/20">
<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="trending-up" class="lucide lucide-trending-up h-3.5 w-3.5"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
+42%
</span>
</div>
<div class="mt-3 h-28 w-full overflow-hidden rounded-lg bg-black/40 ring-1 ring-white/10">
<div class="p-2">
<div class="relative h-20 w-full">
<canvas id="featureYoyChart" width="1084" height="160"
style="display: block; box-sizing: border-box; height: 80px; width: 542px;"></canvas>
</div>
</div>
</div>
<p class="mt-2 text-[11px] text-neutral-400 karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">User</span>
<span class="karaoke-word">acquisition</span>
<span class="karaoke-word">vs.</span>
<span class="karaoke-word">revenue</span>
<span class="karaoke-word">growth</span>
<span class="karaoke-word">trends.</span>
<span class="karaoke-word"></span>
</p>
</div>
</div>
</div>
<div class="space-y-8">
<div class="animate-slide-right">
<div class="flex items-start gap-2">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-lime-400/15 ring-1 ring-lime-300/20 text-lime-300">
<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="file-code" class="lucide lucide-file-code h-3.5 w-3.5"><path d="M10 12.5 8 15l2 2.5" class=""></path><path d="m14 12.5 2 2.5-2 2.5" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" class=""></path></svg>
</span>
<div>
<p class="font-medium">Export production-ready assets</p>
<p class="text-neutral-300 text-sm karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">Download</span>
<span class="karaoke-word">complete</span>
<span class="karaoke-word">codebases</span>
<span class="karaoke-word">and</span>
<span class="karaoke-word">documentation</span>
<span class="karaoke-word">with</span>
<span class="karaoke-word">one</span>
<span class="karaoke-word">click.</span>
<span class="karaoke-word"></span>
</p>
</div>
</div>
<div
class="mt-4 rounded-2xl border border-white/10 bg-white/[0.02] ring-1 ring-white/10 p-5 relative overflow-hidden">
<div class="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-lime-400/20 blur-3xl"></div>
<div class="relative grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
<div class="sm:col-span-1 flex items-center justify-center">
<div class="relative h-24 w-24 rounded-full bg-lime-400/20 ring-1 ring-lime-300/20">
<div class="absolute inset-4 rounded-full bg-lime-400/20"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div
class="h-10 w-10 rounded-full bg-black/50 ring-1 ring-white/10 flex items-center justify-center text-lime-300">
<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="download" class="lucide lucide-download h-5 w-5">
<path d="M12 15V3" class=""></path>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<path d="m7 10 5 5 5-5" class=""></path>
</svg>
</div>
</div>
</div>
</div>
<div class="sm:col-span-2">
<p class="font-medium">Complete project ownership</p>
<p class="mt-1 text-sm text-neutral-300 karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">Your</span>
<span class="karaoke-word">code,</span>
<span class="karaoke-word">your</span>
<span class="karaoke-word">repository,</span>
<span class="karaoke-word">your</span>
<span class="karaoke-word">infrastructure.</span>
<span class="karaoke-word">Export</span>
<span class="karaoke-word">and</span>
<span class="karaoke-word">host</span>
<span class="karaoke-word">anywhere</span>
<span class="karaoke-word">you</span>
<span class="karaoke-word">want.</span>
<span class="karaoke-word"></span>
</p>
<div
class="mt-3 inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-1.5 text-xs hover:bg-white/5 transition cursor-pointer">
<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="package" class="lucide lucide-package h-3.5 w-3.5">
<path
d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"
class="">
</path>
<path d="M12 22V12" class=""></path>
<polyline points="3.29 7 12 12 20.71 7" class=""></polyline>
<path d="m7.5 4.27 9 5.15" class=""></path>
</svg>
Export project
</div>
</div>
</div>
</div>
</div>
<div class="animate-slide-right stagger-delay-2">
<div class="flex items-start gap-2">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-lime-400/15 ring-1 ring-lime-300/20 text-lime-300">
<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 h-3.5 w-3.5"><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>
</span>
<div class="">
<p class="font-medium">Centralized feedback system</p>
<p class="text-neutral-300 text-sm karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">Collect,</span>
<span class="karaoke-word">prioritize,</span>
<span class="karaoke-word">and</span>
<span class="karaoke-word">action</span>
<span class="karaoke-word">user</span>
<span class="karaoke-word">feedback</span>
<span class="karaoke-word">automatically.</span>
<span class="karaoke-word"></span>
</p>
</div>
</div>
<div class="mt-4 rounded-2xl border border-white/10 bg-white/[0.02] ring-1 ring-white/10 p-5">
<div class="space-y-3">
<div class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-lime-400/15 text-lime-300 ring-1 ring-lime-300/20">
<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 h-3.5 w-3.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<div class="flex-1">
<p class="text-sm font-medium karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">AI-powered</span>
<span class="karaoke-word">categorization</span>
<span class="karaoke-word"></span>
</p>
<p class="text-xs text-neutral-300 karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">Automatically</span>
<span class="karaoke-word">tags</span>
<span class="karaoke-word">and</span>
<span class="karaoke-word">groups</span>
<span class="karaoke-word">similar</span>
<span class="karaoke-word">requests</span>
<span class="karaoke-word">for</span>
<span class="karaoke-word">easier</span>
<span class="karaoke-word">prioritization.</span>
<span class="karaoke-word"></span>
</p>
</div>
</div>
<div class="flex items-start gap-3">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white/5 text ring-1 ring-white/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="zap" class="lucide lucide-zap h-3.5 w-3.5"><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>
</span>
<div class="flex-1">
<p class="text-sm font-medium karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word">Priority</span>
<span class="karaoke-word">notifications</span>
</p>
<p class="text-xs text-neutral-300 karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">Get</span>
<span class="karaoke-word">alerted</span>
<span class="karaoke-word">when</span>
<span class="karaoke-word">critical</span>
<span class="karaoke-word">issues</span>
<span class="karaoke-word">need</span>
<span class="karaoke-word">immediate</span>
<span class="karaoke-word">attention.</span>
<span class="karaoke-word"></span>
</p>
</div>
</div>
<div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-white/5 ring-1 ring-white/10">
<div class="h-full w-3/4 bg-lime-400"></div>
</div>
<p class="text-[11px] text-neutral-400 karaoke-container" data-karaoke-wrapped="true"
data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">78%</span>
<span class="karaoke-word">of</span>
<span class="karaoke-word">feedback</span>
<span class="karaoke-word">actioned</span>
<span class="karaoke-word">this</span>
<span class="karaoke-word">quarter.</span>
<span class="karaoke-word"></span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>