Загрузка...
Секция с акцентами функций: адаптивная сетка из больших и малых карточек с иконками и градиентами. Идеально для лендингов SaaS.
<section class="relative z-10 max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pt-8 pr-4 pb-20 pl-4">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
<div class="">
<p class="text-sm font-medium text-white/70">Power to the editor</p>
<h2 class="sm:text-4xl md:text-5xl text-3xl text-white tracking-tighter">
Timeline, color, and audio—tightly integrated
</h2>
<p class="sm:text-lg max-w-[85ch] text-base text-neutral-300 mt-4">
Real‑time playback with GPU acceleration, scene detection, AI transcript editing, pro scopes, and precision audio tools.
</p>
</div>
</div>
<div class="space-y-6">
<!-- Row 1: 2/3 - 1/3 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Large feature (2/) -->
<div class="relative lg:col-span-2 ring-1 ring-white/10 md:p-10 overflow-hidden bg-zinc-950 border-zinc-900 rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-lg">
<div class="absolute -left-10 -top-16 h-64 w-64 bg-gradient-to-tr from-emerald-400/20 to-cyan-300/10 rounded-full blur-2xl"></div>
<div class="flex items-center gap-3 mb-6">
<div class="h-10 w-10 rounded-xl bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
<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="shield" class="lucide lucide-shield h-5 w-5 text-emerald-300"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
</div>
<h3 class="text-2xl md:text-3xl font-semibold tracking-tight text-zinc-100">Secure by Design</h3>
</div>
<p class="text-zinc-300 max-w-2xl">
Defense in depth from day one: passkeys, WebAuthn, scoped tokens, rotating secrets, and audit trails.
Our services follow industry best practices and undergo regular third‑party reviews.
</p>
<!-- Progress-like icons -->
<div class="mt-8 grid grid-cols-5 gap-4 md:gap-6">
<div class="flex flex-col items-center gap-3">
<div class="h-12 w-12 rounded-full bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
<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="eye-off" class="lucide lucide-eye-off h-5 w-5 text-zinc-400"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" class=""></path><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" class=""></path><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" class=""></path><path d="m2 2 20 20" class=""></path></svg>
</div>
<span class="text-xs text-zinc-400">Privacy</span>
</div>
<div class="flex flex-col items-center gap-3">
<div class="h-12 w-12 rounded-full bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
<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="lock" class="lucide lucide-lock h-5 w-5 text-zinc-400"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect><path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path></svg>
</div>
<span class="text-xs text-zinc-400">Encryption</span>
</div>
<div class="flex flex-col items-center gap-3">
<div class="h-12 w-12 rounded-full bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
<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="key-round" class="lucide lucide-key-round h-5 w-5 text-zinc-400"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" class=""></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
</div>
<span class="text-xs text-zinc-400">Passkeys</span>
</div>
<div class="flex flex-col items-center gap-3">
<div class="h-12 w-12 rounded-full bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
<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="fingerprint" class="lucide lucide-fingerprint h-5 w-5 text-zinc-400"><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" class=""></path><path d="M14 13.12c0 2.38 0 6.38-1 8.88" class=""></path><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" class=""></path><path d="M2 12a10 10 0 0 1 18-6" class=""></path><path d="M2 16h.01" class=""></path><path d="M21.8 16c.2-2 .131-5.354 0-6" class=""></path><path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" class=""></path><path d="M8.65 22c.21-.66.45-1.32.57-2" class=""></path><path d="M9 6.8a6 6 0 0 1 9 5.2v2" class=""></path></svg>
</div>
<span class="text-xs text-zinc-400">MFA</span>
</div>
<div class="flex flex-col items-center gap-3">
<div class="h-12 w-12 rounded-full bg-white/5 ring-1 ring-white/10 flex items-center justify-center">
<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="shield-check" class="lucide lucide-shield-check h-5 w-5 text-emerald-300"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
</div>
<span class="text-xs text-zinc-400">Compliance</span>
</div>
</div>
</div>
<!-- Small card (1/3) -->
<div class="lg:col-span-1">
<div class="group relative overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-emerald-500/10 bg-gradient-to-br from-emerald-900/20 via-neutral-900 to-slate-800 border-emerald-500/20 border rounded-3xl shadow-lg backdrop-blur h-full">
<div class="sm:p-8 pt-6 pr-6 pb-6 pl-6">
<div class="relative h-56 sm:h-64 ring-1 ring-inset ring-emerald-500/20 overflow-hidden bg-gradient-to-br from-emerald-950/40 via-neutral-900 to-slate-800 rounded-2xl">
<div class="absolute right-6 top-8 sm:right-10 sm:top-10 w-[78%] rounded-2xl border border-emerald-500/30 bg-neutral-900/95 shadow-xl backdrop-blur">
<div class="flex items-center gap-2 px-4 py-3 border-b border-emerald-500/20 bg-emerald-950/30">
<span class="h-2.5 w-2.5 rounded-full bg-emerald-500/80"></span>
<span class="h-2.5 w-2.5 rounded-full bg-yellow-500/80"></span>
<span class="h-2.5 w-2.5 rounded-full bg-red-500/80"></span>
<div class="ml-3 flex items-center gap-2">
<span class="text-xs text-emerald-400">GPU Rendering</span>
</div>
</div>
<div class="p-4 relative h-32">
<div class="absolute inset-0 opacity-30">
<div class="absolute top-4 left-8 w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
<div class="absolute top-6 left-16 w-2 h-2 rounded-full bg-emerald-400"></div>
<div class="absolute top-8 right-12 w-2 h-2 rounded-full bg-emerald-400 animate-pulse" style="animation-delay: 0.5s"></div>
<div class="absolute bottom-8 left-12 w-2 h-2 rounded-full bg-emerald-400"></div>
<div class="absolute bottom-6 right-8 w-2 h-2 rounded-full bg-emerald-400 animate-pulse" style="animation-delay: 1s"></div>
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100">
<path d="M20 20 L40 25 L70 30 L80 45" stroke="rgb(52 211 153 / 0.3)" stroke-width="0.5" fill="none" stroke-dasharray="2,2" class=""></path>
<path d="M30 60 L50 30 L80 35" stroke="rgb(52 211 153 / 0.3)" stroke-width="0.5" fill="none" stroke-dasharray="2,2" class=""></path>
</svg>
</div>
<div class="absolute bottom-2 left-2 right-2">
<div class="grid grid-cols-3 gap-2 text-center">
<div class="rounded bg-emerald-950/50 border border-emerald-500/20 p-1">
<div class="text-xs font-medium text-emerald-400">4K</div>
<div class="text-[9px] text-neutral-400">60fps</div>
</div>
<div class="rounded bg-emerald-950/50 border border-emerald-500/20 p-1">
<div class="text-xs font-medium text-emerald-400">H.265</div>
<div class="text-[9px] text-neutral-400">Export</div>
</div>
<div class="rounded bg-emerald-950/50 border border-emerald-500/20 p-1">
<div class="text-xs font-medium text-emerald-400">8ms</div>
<div class="text-[9px] text-neutral-400">Latency</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute left-4 bottom-6 w-[35%] h-[45%] rounded-xl bg-neutral-950/95 border border-emerald-500/20 shadow-lg">
<div class="px-2 py-1.5 border-b border-emerald-500/20">
<span class="text-[10px] text-emerald-400 tracking-wide">RENDER ENGINE</span>
</div>
<div class="p-2 space-y-2">
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400">GPU</span>
<div class="flex items-center gap-1">
<div class="h-1 w-6 rounded-full bg-neutral-800">
<div class="h-1 w-5 rounded-full bg-emerald-500"></div>
</div>
<span class="text-[9px] text-emerald-400">85%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400">Memory</span>
<div class="flex items-center gap-1">
<div class="h- w-6 rounded-full bg-neutral-800">
<div class="h-1 w-4 rounded-full bg-emerald-500"></div>
</div>
<span class="text-[9px] text-emerald-400">67%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-[10px] text-neutral-400">Cores</span>
<div class="flex items-center gap-1">
<div class="h-1 w-6 rounded-full bg-neutral-800">
<div class="h-1 w-3 rounded-full bg-emerald-500"></div>
</div>
<span class="text-[9px] text-emerald-400">52%</span>
</div>
</div>
</div>
</div>
<div class="absolute top-4 left-6 w-20 h-4 rounded bg-emerald-500/30 animate-pulse" style="animation-delay: 0.5s"></div>
<div class="absolute top-16 left-2 w-14 h-3 rounded bg-emerald-400/40" style="animation-delay: 1s"></div>
<div class="absolute bottom-16 right-2 w-16 h-2 rounded bg-emerald-300/50"></div>
</div>
<div class="mt-6 sm:mt-8">
<div class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="monitor-check" box="0 0 24 24" class="lucide lucide-monitor-check h-5 w-5 text-emerald-400" style="stroke-width:1.5"><path d="m9 10 2 2 4-4" class=""></path><rect width="20" height="14" x="2" y="3" rx="2" class=""></rect><path d="M12 17v4" class=""></path><path d="M8 21h8" class=""></path></svg>
<h3 class="sm:text-2xl text-2xl font-semibold tracking-tight">Hardware Acceleration</h3>
</div>
<p class="text-sm text-neutral-400 mt-3">Native Apple Silicon optimization with Metal GPU acceleration for real-time 4K editing and instant playback.</p>
<div class="mt-4">
<a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-emerald-400 hover:text-emerald-300">
View performance
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4" style="stroke-width:1.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</a>
</div>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-emerald-900/10 via-transparent to-transparent pointer-events-none rounded-3xl"></div>
</div>
</div>
</div>
<!-- Row 2: 1/3 - 2/3 (reversed) -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Small card (1/3) -->
<div class="lg:col-span-1">
<article class="relative bg-neutral-900 border-white/10 border rounded-2xl p-6 h-full">
<div class="flex items-center justify-between">
<h3 class="text-white text-lg sm:text-xl tracking-tight font-medium">Color Grading Tools</h3>
<span class="text-[11px] text-neutral-300">Pro</span>
</div>
<p class="mt-2 text-sm text-neutral-300">Cinema-grade color correction with real-time GPU processing.</p>
<div class="mt-6 space-y-3">
<div class="flex items-center justify-between rounded-lg ring-1 ring-emerald-400/20 bg-emerald-500/10 px-3 py-2">
<span class="text-sm text-emerald-200">Color Wheels</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400 w-4 h-4">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<div class="flex items-center justify-between rounded-lg ring-1 ring-emerald-400/20 bg-emerald-500/10 px-3 py-2">
<span class="text-sm text-emerald-200">Curves & LUTs</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400 w-4 h-4">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<div class="flex items-center justify-between rounded-lg ring-1 ring-emerald-400/20 bg-emerald-500/10 px-3 py-2">
<span class="text-sm text-emerald-200">HDR Support</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400 w-4 h-4">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<div class="flex items-center justify-between rounded-lg ring-1 ring-indigo-400/20 bg-indigo-500/10 px-3 py-2">
<span class="text-sm text-indigo-200">Real-time Scopes</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-400 w-4 h-4">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
</div>
<div class="mt-4">
<span class="inline-flex items-center gap-2 text-[11px] text-emerald-200 bg-emerald-500/10 rounded-full px-2 py-1 ring-1 ring-emerald-400/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5">
<path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path>
<circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle>
<circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle>
<circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle>
<circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle>
</svg>
Professional grade
</span>
</div>
</article>
</div>
<!-- Large feature (2/3) -->
<div class="lg:col-span-2">
<aside class="relative overflow-hidden sm:rounded-3xl flex flex-col bg-zinc-950 border-zinc-900 border rounded-2xl pt-5 pr-5 pb-5 pl-5 h-full">
<div class="flex items-center justify-between text-xs sm:text-sm text-zinc-400">
<span class="">Audio & AI Tools</span>
<span class="">Pro</span>
</div>
<h4 class="sm:mt-4 sm:text-3xl md:text-4xl text-2xl font-semibold text-zinc-100 tracking-tight mt-3">
Smart audio processing with AI-powered enhancement
</h4>
<p class="md:text-base text-sm text-zinc-300 mt-3">
Advanced dialogue enhancement, noise reduction, and spatial audio mixing—all powered by machine learning algorithms for broadcast-quality results.
</p>
<!-- Audio Visualization -->
<div class="mt-6 md:mt-8">
<div class="grid grid-cols-12 gap-2 h-16 items-end">
<span class="h-4 bg-emerald-500 rounded-2xl"></span>
<span class="h-6 bg-emerald-500/80 rounded-2xl"></span>
<span class="h-8 bg-emerald-500/60 rounded-2xl"></span>
<span class="h-12 bg-emerald-500 rounded-2xl"></span>
<span class="h-10 bg-emerald-400 rounded-2xl"></span>
<span class="h-14 bg-emerald-500 rounded-2xl"></span>
<span class="h-6 bg-emerald-500/80 rounded-2xl"></span>
<span class="h-9 bg-emerald-500/60 rounded-2xl"></span>
<span class="h-5 bg-emerald-500 rounded-2xl"></span>
<span class="h-11 bg-emerald-400 rounded-2xl"></span>
<span class="h-7 bg-emerald-500/80 rounded-2xl"></span>
<span class="h-3 bg-emerald-500/60 rounded-2xl"></span>
</div>
</div>
<div class="mt-6 flex items-center gap-2 text-zinc-300 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-emerald-500">
<path d="M2 10v3" class=""></path>
<path d="M6 6v11" class=""></path>
<path d="M10 3v18" class=""></path>
<path d="M14 8v7" class=""></path>
<path d="M18 5v13" class=""></path>
<path d="M22 10v3" class=""></path>
</svg>
<span class="font-medium">Clean, enhance, and perfect your audio.</span>
</div>
</aside>
</div>
</div>
</div>
</section>