Загрузка...
Секция с адаптивными карточками функций. Tailwind CSS. Иконки, заголовки, описания, эффекты при наведении. Для лендингов SaaS.
<section id="features" class="pt-16 pb-16 w-full">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header adapted to reference layout -->
<div class="text-center">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs bg-white/5 border border-white/10 text-gray-300">Features</span>
<h2 class="mt-4 text-4xl sm:text-5xl tracking-tight" style="font-weight: 600">
OS‑level control, without the <span class="italic" style="font-weight: 500">friction</span>
</h2>
<p class="mt-3 text-gray-300 max-w-3xl mx-auto">
From quick system toggles to app workflows and secure on‑device handling.
</p>
</div>
<!-- Large gradient tiles -->
<div class="mt-10 grid md:grid-cols-2 gap-6">
<!-- Tile 1 -->
<div class="group relative overflow-hidden rounded-[28px] border border-white/10 p-8 text-center bg-black/40 hover:border-white/15 transition-all">
<div class="absolute inset-0 pointer-events-none -z-10" style="background:
radial-gradient(180px 140px at 4% 0%, rgba(59,130,246,0.45), transparent 60%),
radial-gradient(220px 160px at 100% 100%, rgba(147,197,253,0.10), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
<div class="mx-auto inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings-2" class="lucide lucide-settings-2 w-[18px] h-[18px] text-gray-300"><path d="M14 17H5" class=""></path><path d="M19 7h-9" class=""></path><circle cx="17" cy="17" r="3" class=""></circle><circle cx="7" cy="7" r="3" class=""></circle></svg>
</div>
<h3 class="mt-4 text-2xl sm:text-3xl tracking-tight" style="font-weight: 600">System controls</h3>
<p class="mt-3 text-sm text-gray-300 max-w-md mx-auto">
Toggle Wi‑Fi, Bluetooth, Focus, audio, and more—hands‑free.
</p>
</div>
<!-- Tile 2 -->
<div class="group relative overflow-hidden rounded-[28px] border border-white/10 p-8 text-center bg-black/40 hover:border-white/15 transition-all">
<div class="absolute inset-0 pointer-events-none -z-10" style="background:
radial-gradient(220px 160px at 100% 0%, rgba(251,146,60,0.45), transparent 60%),
radial-gradient(220px 160px at 0% 100%, rgba(244,63,94,0.10), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
<div class="mx-auto inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="app-window" class="lucide lucide-app-window w-[18px] h-[18px] text-gray-300"><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect><path d="M10 4v4" class=""></path><path d="M2 8h20" class=""></path><path d="M6 4v4" class=""></path></svg>
</div>
<h3 class="mt-4 text-2xl sm:text-3xl tracking-tight" style="font-weight: 600">App automation</h3>
<p class="mt-3 text-sm text-gray-300 max-w-md mx-auto">
Launch, arrange, and script your favorite apps.
</p>
</div>
<!-- Tile 3 -->
<div class="group relative overflow-hidden rounded-[28px] border border-white/10 p-8 text-center bg-black/40 hover:border-white/15 transition-all">
<div class="absolute inset-0 pointer-events-none -z-10" style="background:
radial-gradient(200px 160px at 0% 100%, rgba(139,92,246,0.40), transparent 60%),
radial-gradient(220px 160px at 100% 0%, rgba(99,102,241,0.10), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
<div class="mx-auto inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="file-search" class="lucide lucide-file-search w-[18px] h-[18px] text-gray-300"><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="M4.268 21a2 2 0 0 0 1.727 1H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3" class=""></path><path d="m9 18-1.5-1.5" class=""></path><circle cx="5" cy="14" r="3" class=""></circle></svg>
</div>
<h3 class="mt-4 text-2xl sm:text-3xl tracking-tight" style="font-weight: 600">Find anything</h3>
<p class="mt-3 text-sm text-gray-300 max-w-md mx-auto">
Search local files and the web with context awareness.
</p>
</div>
<!-- Tile 4 -->
<div class="group relative overflow-hidden rounded-[28px] border border-white/10 p-8 text-center bg-black/40 hover:border-white/15 transition-all">
<div class="absolute inset-0 pointer-events-none -z-10" style="background:
radial-gradient(200px 160px at 100% 100%, rgba(45,212,191,0.40), transparent 60%),
radial-gradient(220px 160px at 0% 0%, rgba(34,197,94,0.10), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
<div class="mx-auto inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="lock" class="lucide lucide-lock w-[18px] h-[18px] text-gray-300"><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>
<h3 class="mt-4 text-2xl sm:text-3xl tracking-tight" style="font-weight: 600">Privacy‑first</h3>
<p class="mt-3 text-sm text-gray-300 max-w-md mx-auto">
On‑device processing for sensitive requests.
</p>
</div>
</div>
</div>
</section>