All Prompts
All Prompts
featuresdashboardanalyticssecuritydarkmoderngradient
Productivity Features Section
Секция с функциями для повышения продуктивности: календарь, аналитика, автоматизация, безопасность. Темный фон, градиент, интерактивные элементы.
Prompt
<div class="bg-neutral-950/80 rounded-2xl ring-neutral-800 ring-1 pt-4 pr-4 pb-4 pl-4 backdrop-blur">
<style>@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap'); .font-geist { font-family: 'Geist', 'Inter', sans-serif; }</style>
<div class="overflow-hidden sm:p-6 md:p-8 sm:rounded-3xl rounded-2xl relative">
<div class="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-violet-500/10 blur-3xl"></div>
<div class="text-center mb-12">
<div class="mb-6">
<div class="flex text-[13px] sm:text-sm uppercase font-medium
text-blue-400 tracking-tight items-center justify-between">
<span class="font-geist">FEATURES</span>
<span class="font-geist">(01)</span>
</div>
<div class="mt-2 h-px w-full bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
</div>
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between mb-0 gap-x-0 gap-y-0">
<div>
<h2 class="sm:text-4xl md:text-5xl text-3xl text-white text-left mt-0 font-geist font-light tracking-tighter">Powerful Features for Modern Teams</h2>
</div>
<p class="sm:text-base text-sm text-slate-300 text-left max-w-[42ch] font-geist">Discover intelligent tools designed to help your team automate tasks, stay organized, and move faster with clarity and control.</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<article class="lg:col-span-2 group relative overflow-hidden bg-neutral-900
border-neutral-800 border rounded-2xl p-6">
<div class="flex items-start justify-between mb-4">
<h3 class="text-white text-xl sm:text-2xl font-geist font-light tracking-tighter">Real-Time Performance Analytics</h3>
<span class="text-lg font-semibold text-emerald-400 font-geist">99.2%</span>
</div>
<p class="text-sm text-slate-300 mb-6 font-geist">Monitor system performance, task completion, and team productivity with our advanced analytics dashboard powered by AI insights.</p>
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="relative h-[180px] rounded-xl bg-gradient-to-br
from-violet-500/20 to-fuchsia-500/10 ring-1
ring-violet-400/30 overflow-hidden">
<div class="absolute inset-0 grid grid-cols-8 opacity-10">
<div class="border-r border-violet-300"></div>
<div class="border-r border-violet-300"></div>
<div class="border-r border-violet-300"></div>
<div class="border-r border-violet-300"></div>
<div class="border-violet-300 border-r"></div>
<div class="border-r border-violet-300"></div>
<div class="border-r border-violet-300"></div>
<div></div>
</div>
<div class="absolute left-4 top-4 flex -space-x-2">
<img class="h-8 w-8 ring-2 ring-white/20 object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dc0337fb-ed78-4515-a35d-9bf52d6af946_320w.webp" alt="team member 1" />
<img class="h-8 w-8 ring-2 ring-white/20 object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/39e15168-9f77-4837-9a4b-89c74b8bc38b_320w.webp" alt="team member 2" />
<img class="h-8 w-8 ring-2 ring-white/20 object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4a9d0cf0-9561-4da3-870d-41ebc9bf447f_320w.jpg" alt="team member 3" />
</div>
<div class="absolute left-4 bottom-4">
<span class="inline-flex items-center gap-2 text-[11px] text-violet-200
bg-white/20 backdrop-blur rounded-full px-3 py-1.5 ring-1
ring-white/20 font-geist">
<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" class="w-3.5 h-3.5" style="stroke-width:1.5">
<path d="M16 7h6v6"></path>
<path d="m22 7-8.5 8.5-5-5L2 17"></path>
</svg>
</span>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between rounded-xl
bg-gradient-to-r from-emerald-500/20 to-emerald-400/10
ring-1 ring-emerald-400/30 px-4 py-3">
<div class="flex items-center gap-3">
<span class="h-3 w-3 rounded-full bg-emerald-400"></span>
<span class="text-sm text-emerald-200 font-medium font-geist">System Health</span>
</div>
<span class="text-[11px] text-emerald-300 font-geist">Active</span>
</div>
<div class="flex items-center justify-between rounded-xl
bg-gradient-to-r from-orange-500/20 to-orange-400/10 ring-1
ring-orange-400/30 px-4 py-3">
<div class="flex items-center gap-3">
<span class="h-3 w-3 rounded-full bg-orange-400"></span>
<span class="text-sm text-orange-200 font-medium font-geist">Load Balancing</span>
</div>
<span class="text-[11px] text-orange-300 font-geist">Optimizing</span>
</div>
<div class="flex items-center justify-between rounded-xl
bg-gradient-to-r from-purple-500/20 to-purple-400/10 ring-1
ring-purple-400/30 px-4 py-3">
<div class="flex items-center gap-3">
<span class="h-3 w-3 rounded-full bg-purple-400"></span>
<div class="flex flex-col">
<span class="text-sm text-purple-200 font-medium font-geist">AI Processing</span>
<span class="text-[10px] text-purple-300 font-geist">Real-time analysis</span>
</div>
</div>
<span class="text-[11px] text-purple-300 font-geist">Live</span>
</div>
</div>
</div>
<div class="flex items-center gap-3">
<span class="inline-flex items-center gap-2 text-[11px] text-slate-200
bg-white/10 rounded-full px-3 py-1 ring-1 ring-white/10
font-geist">
<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" class="w-3.5 h-3.5" style="stroke-width:1.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"></path>
</svg>
</span>
<span class="inline-flex items-center gap-2 text-[11px] text-slate-200
bg-white/10 rounded-full px-3 py-1 ring-1 ring-white/10
font-geist">
<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" class="w-3.5 h-3.5" style="stroke-width:1.5 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">
<path d="m9 12 2 2 4-4"></path>
</svg>
</span>
</div>
</article>
<article class="group relative rounded-2xl border border-neutral-800 bg-neutral-900 p-6">
<h3 class="text-white text-lg sm:text-xl tracking-tight font-semibold font-geist">Smart Automation</h3>
<p class="mt-2 text-sm text-slate-300 font-geist">Streamline workflows and boost productivity with intelligent task automation.</p>
<div class="mt-6 rounded-xl bg-white/5 ring-1 ring-white/10 p-4">
<div class="relative h-[120px] flex items-end justify-around gap-2">
<div class="w-8 bg-gradient-to-t from-violet-500 to-fuchsia-500 rounded-t" style="height: 45%"></div>
<div class="w-8 bg-gradient-to-t from-violet-500 to-fuchsia-500 rounded-t" style="height: 65%"></div>
<div class="w-8 bg-gradient-to-t from-violet-500 to-fuchsia-500 rounded-t" style="height: 80%"></div>
<div class="w-8 bg-gradient-to-t from-violet-500 to-fuchsia-500 rounded-t" style="height: 55%"></div>
<div class="w-8 bg-gradient-to-t from-violet-500 to-fuchsia-500 rounded-t" style="height: 90%"></div>
</div>
</div>
<div class="mt-4 flex items-center gap-2">
<span class="inline-flex items-center gap-2 text-[11px] text-violet-200
bg-violet-500/20 rounded-full px-2 py-1 ring-1
ring-violet-400/30 font-geist">
<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" class="w-3.5 h-3.5" style="stroke-width:1.5">
<path d="M12 20v2"></path>
<path d="M12 2v2"></path>
<path d="M17 20v2"></path>
<path d="M17 2v2"></path>
<path d="M2 12h2"></path>
<path d="M2 17h2"></path>
<path d="M2 7h2"></path>
<path d="M20 12h2"></path>
<path d="M20 17h2"></path>
<path d="M20 7h2"></path>
<path d="M7 20v2"></path>
<path d="M7 2v2"></path>
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
<rect x="8" y="8" width="8" height="8" rx="1"></rect>
</svg>
</span>
</div>
</article>
<article class="lg:col-span-2 group relative overflow-hidden bg-neutral-900
border-neutral-800 border rounded-2xl p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-white text-xl sm:text-2xl font-geist font-light tracking-tighter">Advanced Security & Compliance</h3>
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-2 text-[11px] text-emerald-200
bg-emerald-500/20 rounded-full px-2 py-1 ring-1
ring-emerald-400/30 font-geist">
<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" class="w-3.5 h-3.5" style="stroke-width:1.5">
<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"></path>
</svg>
</span>
<span class="text-lg font-semibold text-white font-geist">SOC 2</span>
</div>
</div>
<p class="text-sm text-slate-300 mb-6 font-geist">Protect your data and maintain compliance with industry-leading security measures and automated governance tools.</p>
<div class="grid grid-cols-3 gap-4">
<div class="text-center p-4 rounded-xl bg-gradient-to-br from-red-500/20 to-red-400/10 ring-1 ring-red-400/30">
<div class="inline-flex items-center justify-center w-8 h-8 bg-red-500 text-white rounded-full mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<h4 class="font-medium text-red-200 text-sm font-geist">Encryption</h4>
<p class="text-xs text-red-300 font-geist">End-to-end AES-256</p>
</div>
<div class="text-center p-4 rounded-xl bg-gradient-to-br
from-green-500/20 to-green-400/10 ring-1 ring-green-400/30">
<div class="inline-flex items-center justify-center w-8 h-8 bg-green-500 text-white rounded-full mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</div>
<h4 class="font-medium text-green-200 text-sm font-geist">Monitoring</h4>
<p class="text-xs text-green-300 font-geist">24/7 threat detection</p>
</div>
<div class="text-center p-4 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-400/10 ring-1 ring-blue-400/30">
<div class="inline-flex items-center justify-center w-8 h-8 bg-blue-500 text-white rounded-full mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="m9 15 2 2 4-4"></path>
</svg>
</div>
<h4 class="font-medium text-blue-200 text-sm font-geist">Compliance</h4>
<p class="text-xs text-blue-300 font-geist">GDPR, HIPAA ready</p>
</div>
</div>
</article>
</div>
</div>
</div>