All Prompts
All Prompts
landing sectiondashboardanalyticstailwindresponsiveanimatedmarketingsaassection
Deployment Platform Landing Section with Dashboard Mockup
Секция лендинга с дашбордом для SaaS/DevOps платформ. Адаптивный, анимированный дизайн на Tailwind CSS с Bento-сеткой и превью аналитики.
Prompt
<div class="sm:px-6 lg:px-8 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] max-w-7xl mr-auto ml-auto pr-4 pl-4">
<div class="overflow-hidden xl:bg-neutral-950/60 border border-white/20 border-dashed rounded-none mt-6 relative">
<!-- Radial beams / grid overlay -->
<div class="pointer-events-none absolute inset-0">
<div class="absolute inset-0 opacity-70 [mask-image:radial-gradient(65%_65%_at_50%_50%,black,transparent)] bg-[radial-gradient(1200px_400px_at_50%_-10%,rgba(16,185,129,0.25),transparent),radial-gradient(1200px_600px_at_50%_120%,rgba(59,130,246,0.2),transparent)]"></div>
<div class="absolute inset-0 opacity-[0.18] [mask-image:radial-gradient(80%_80%_at_50%_50%,black,transparent)] bg-[linear-gradient(to_right,rgba(255,255,255,.7)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,.7)_1px,transparent_1px)] bg-[size:28px_28px]"></div>
<div class="absolute inset-0 bg-gradient-to-b from-black/50 via-transparent to-black"></div>
</div>
<!-- Floating utility icon -->
<div class="absolute left-5 top-5" style="visibility: hidden;">
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-500/20 ring-1 ring-sky-400/30 backdrop-blur">
<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="refresh-cw" class="lucide lucide-refresh-cw h-5 w-5 text-sky-300"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path><path d="M8 16H3v5" class=""></path></svg>
</div>
</div>
<!-- Content -->
<div class="flex min-h-[68vh] flex-col sm:py-28 md:min-h-[76vh] md:pl-8 md:pr-8 md:pt-16 md:pb-16 text-center mr-auto ml-auto pt-16 pr-8 pb-16 pl-8 relative items-center justify-center">
<!-- Bento Grid -->
<div class="text-left w-full max-w-7xl mr-auto ml-auto">
<!-- Section Header -->
<div class="text-center mb-12">
<div class="inline-flex text-[13px] [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll font-medium text-emerald-300 rounded-none ring-0 mb-6 pt-1.5 pr-3.5 pb-1.5 pl-3.5 gap-x-2 gap-y-2 items-center">
<span class="text-2xl font-light text-emerald-300/80 tabular-nums">
01
</span>
<span class="text-emerald-300/40">/</span>
<span class="uppercase text-[11px] text-emerald-200/90 tracking-widest">
DEPLOYMENT PLATFORM
</span>
</div>
<h2 class="sm:text-4xl lg:text-5xl [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll text-3xl font-light text-white tracking-tight font-geist mb-4">
Everything you need to deploy faster
</h2>
<p class="sm:text-lg [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll text-base text-zinc-400 max-w-2xl mr-auto ml-auto">
Lightning-fast deployment tools that accelerate your workflow
and get your code live in seconds.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6">
<!-- Analytics Dashboard Panel (full width) -->
<div class="overflow-hidden md:col-span-2 lg:col-span-3 lg:bg-black [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll bg-black/40 rounded-2xl ring-white/10 ring-1 relative">
<!-- Glow -->
<div class="-top-10 -right-10 bg-emerald-500/10 w-56 h-56 rounded-full absolute blur-3xl"></div>
<!-- Top bar -->
<div class="flex sm:px-6 bg-black/30 border-white/10 border-b pt-3 pr-4 pb-3 pl-4 items-center justify-between">
<div class="flex items-center gap-3 text-sm text-zinc-300">
<a href="#" class="inline-flex items-center gap-2 text-white hover:text-white">
Pulse Analytics
</a>
<span class="opacity-60">/</span>
<span class="text-white">Performance</span>
<span class="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 text-emerald-300 ring-1 ring-emerald-500/20 px-2 py-0.5 text-[11px]">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
342 active
</span>
</div>
<div class="flex items-center gap-3">
<div class="hidden sm:flex items-center gap-2 bg-white/5 ring-1 ring-white/10 rounded-lg pl-2.5 pr-2.5 h-8">
<input type="text" placeholder="Search metrics…" class="bg-transparent text-sm text-zinc-300 placeholder-zinc-500 focus:outline-none w-48">
</div>
<button class="hidden sm:inline-flex items-center gap-1.5 rounded-lg bg-white/5 text-white text-xs ring-1 ring-white/10 px-3 py-1.5 hover:bg-white/10 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" y1="15" x2="12" y2="3" class=""></line>
</svg>
Export Data
</button>
</div>
</div>
<!-- Desktop layout -->
<div class="grid grid-cols-12">
<!-- Left sidebar -->
<aside class="hidden md:flex md:col-span-3 lg:col-span-2 flex-col bg-black/20 border-r border-white/10 min-h-[520px]">
<div class="px-4 py-4">
<button class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-white/5 ring-1 ring-white/10 text-sm text-zinc-200 hover:bg-white/10 px-3 py-2">
New Report
</button>
</div>
<nav class="px-3 pb-4 space-y-6 overflow-y-auto">
<!-- Analytics -->
<div class="">
<div class="px-2 mb-2 text-[11px] uppercase tracking-widest text-zinc-500">
Analytics
</div>
<ul class="space-y-1">
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-zinc-300 hover:bg-white/5">
Dashboard
</a>
</li>
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-white bg-white/5 ring-1 ring-white/10">
Performance
</a>
</li>
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-zinc-300 hover:bg-white/5">
Users
</a>
</li>
</ul>
</div>
<!-- Metrics -->
<div class="">
<div class="px-2 mb-2 text-[11px] uppercase tracking-widest text-zinc-500">
Metrics
</div>
<ul class="space-y-1">
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-zinc-300 hover:bg-white/5">
Response Time
</a>
</li>
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-zinc-300 hover:bg-white/5">
Traffic
</a>
</li>
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-zinc-300 hover:bg-white/5">
Uptime
</a>
</li>
</ul>
</div>
<!-- Reports -->
<div class="">
<div class="px-2 mb-2 text-[11px] uppercase tracking-widest text-zinc-500">
Reports
</div>
<ul class="space-y-1">
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-zinc-300 hover:bg-white/5">
Weekly Summary
</a>
</li>
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-zinc-300 hover:bg-white/5">
Incidents
</a>
</li>
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-zinc-300 hover:bg-white/5">
Configuration
</a>
</li>
</ul>
</div>
</nav>
</aside>
<!-- Center content -->
<main class="col-span-12 md:col-span-6 lg:col-span-7 min-h-[520px]">
<!-- Tabs -->
<div class="px-4 sm:px-6 py-3 border-b border-white/10 overflow-x-auto">
<div class="flex items-center gap-6 min-w-max">
<button class="text-sm text-white">Overview</button>
<button class="text-sm text-zinc-400 hover:text-white transition">
Real-time
</button>
<button class="text-sm text-zinc-400 hover:text-white transition">
Historical
</button>
<button class="text-sm text-zinc-400 hover:text-white transition">
Alerts
</button>
<button class="text-sm text-zinc-400 hover:text-white transition">
Settings
</button>
</div>
</div>
<!-- Header -->
<div class="px-4 sm:px-6 py-4 border-b border-white/10">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<h3 class="text-white font-geist font-light text-2xl tracking-tight">
System Performance
</h3>
<span class="text-[11px] rounded-md bg-emerald-500/10 text-emerald-300 ring-1 ring-emerald-300/20 px-2 py-0.5">
Excellent
</span>
</div>
<div class="text-xs text-zinc-400">
Updated 15s ago
</div>
</div>
<div class="mt-2 text-sm text-zinc-400">
All systems operational •
<a href="#" class="text-emerald-300">
View status page
</a>
</div>
</div>
<!-- Feed -->
<div class="px-4 sm:px-6 py-4 space-y-3">
<!-- Card: Performance metric -->
<div class="rounded-xl ring-1 ring-white/10 bg-white/5 p-4">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="">
<div class="text-sm text-white">
Response Time Improved
</div>
<div class="text-xs text-zinc-500">
Average latency 127ms • -23% from last week •
99.8% uptime
</div>
</div>
</div>
<span class="text-[11px] rounded-md bg-emerald-500/10 text-emerald-300 ring-1 ring-emerald-300/20 px-2 py-0.5">
OPTIMAL
</span>
</div>
<div class="mt-3 bg-black/40 rounded-lg ring-1 ring-white/10 p-3">
<code class="text-xs font-mono text-zinc-300">
<span class="text-zinc-500">→</span>
API Requests:
<span class="text-emerald-400">1.2M</span>
<span class="text-zinc-500">→</span>
Cache Hit Rate:
<span class="text-emerald-400">94.3%</span>
<span class="text-zinc-500">→</span>
Error Rate:
<span class="text-emerald-400">0.02%</span>
<span class="text-zinc-500">→</span>
Peak Load:
<span class="text-emerald-400">18K req/s</span>
</code>
</div>
</div>
<!-- Card: In progress analysis -->
<div class="rounded-xl ring-1 ring-emerald-300/25 bg-black/40 p-4">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="">
<div class="text-sm text-white">
Processing Analytics Report
</div>
<div class="text-xs text-zinc-500">
Dataset #847 • 2.4TB analyzed • started
00:43:12
</div>
</div>
</div>
<div class="text-[11px] text-zinc-400">43:12</div>
</div>
<div class="mt-3 flex items-center gap-3">
<span class="text-xs text-zinc-400">Progress</span>
<div class="flex-1 h-2 rounded-full bg-white/5 ring-1 ring-white/10 overflow-hidden">
<div class="h-full w-[67%] rounded-full bg-gradient-to-r from-emerald-500 to-emerald-400"></div>
</div>
<span class="text-xs text-zinc-400">67%</span>
<button class="text-xs rounded-md bg-emerald-500/20 text-emerald-300 ring-1 ring-emerald-300/30 px-2 py-1">
CANCEL
</button>
</div>
</div>
<!-- Card: Alert -->
<div class="rounded-xl ring-1 ring-white/10 bg-white/5 p-4">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="">
<div class="text-sm text-white">
Elevated Memory Usage Detected
</div>
<div class="text-xs text-zinc-500">
Server cluster-03 • 87% utilization • 28m ago
</div>
</div>
</div>
<span class="text-[11px] rounded-md bg-yellow-500/10 text-yellow-300 ring-1 ring-yellow-500/30 px-2 py-0.5">
WARNING
</span>
</div>
<div class="mt-3 flex items-center gap-3">
<button class="text-xs rounded-md bg-white/5 text-white ring-1 ring-white/10 px-2 py-1">
VIEW LOGS
</button>
<button class="text-xs rounded-md bg-white/5 text-white ring-1 ring-white/10 px-2 py-1">
SCALE UP
</button>
</div>
</div>
</div>
</main>
<!-- Right sidebar -->
<aside class="hidden md:block md:col-span-3 lg:col-span-3 bg-black/20 border-l border-white/10 min-h-[520px]">
<div class="px-4 sm:px-5 py-4 space-y-4">
<!-- Performance Summary -->
<!-- Quick Stats -->
<div class="rounded-xl ring-1 ring-white/10 bg-white/5 p-4">
<div class="text-xs text-zinc-400 mb-3">
Quick Stats
</div>
<div class="grid grid-cols-2 gap-3">
<div class="bg-black/40 rounded-lg p-3 ring-1 ring-white/10">
<div class="text-xs text-zinc-400 mb-1">
Requests/min
</div>
<div class="text-lg font-light text-white">
8,432
</div>
</div>
<div class="bg-black/40 rounded-lg p-3 ring-1 ring-white/10">
<div class="text-xs text-zinc-400 mb-1">
Avg Response
</div>
<div class="text-lg font-light text-white">
127ms
</div>
</div>
<div class="bg-black/40 rounded-lg p-3 ring-1 ring-white/10">
<div class="text-xs text-zinc-400 mb-1">
CPU Usage
</div>
<div class="text-lg font-light text-white">
34%
</div>
</div>
<div class="bg-black/40 rounded-lg p-3 ring-1 ring-white/10">
<div class="text-xs text-zinc-400 mb-1">
Memory
</div>
<div class="text-lg font-light text-white">
72%
</div>
</div>
</div>
</div>
<!-- System Info -->
<div class="rounded-xl ring-1 ring-white/10 bg-white/5 p-4">
<div class="text-xs text-zinc-400 mb-2">
System Information
</div>
<p class="text-sm text-zinc-300">
Monitoring 847 services across 12 regions. All
critical systems operational.
</p>
<div class="mt-3 text-xs text-zinc-400">
Integrations
</div>
<div class="mt-2 flex items-center gap-2">
<span class="inline-flex h-6 w-6 items-center justify-center rounded bg-white/5 ring-1 ring-white/10 text-[11px] text-white/80">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" class=""></path>
<polyline points="15 3 21 3 21 9" class=""></polyline>
<line x1="10" y1="14" x2="21" y2="3" class=""></line>
</svg>
</span>
<span class="inline-flex h-6 w-6 items-center justify-center rounded bg-white/5 ring-1 ring-white/10 text-[11px] text-white/80">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M4 11a9 9 0 0 1 9 9" class=""></path>
<path d="M4 4a16 16 0 0 1 16 16" class=""></path>
<circle cx="5" cy="19" r="1" class=""></circle>
</svg>
</span>
<span class="inline-flex h-6 w-6 items-center justify-center rounded bg-white/5 ring-1 ring-white/10 text-[11px] text-white/80">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
</svg>
</span>
</div>
</div>
<!-- Settings (custom toggles) -->
<div class="rounded-xl ring-1 ring-white/10 bg-white/5 p-4">
<div class="text-xs text-zinc-400 mb-3">
Monitor Settings
</div>
<div class="space-y-2">
<div class="flex items-center justify-between">
<span class="text-sm text-zinc-300">
Auto-scaling
</span>
<button aria-pressed="true" class="relative inline-flex h-6 w-11 items-center rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30">
<span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-emerald-400 translate-x-5 transition-transform"></span>
<span class="sr-only">toggle</span>
</button>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-zinc-300">
Alert Notifications
</span>
<button aria-pressed="true" class="relative inline-flex h-6 w-11 items-center rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30">
<span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-emerald-400 translate-x-5 transition-transform"></span>
<span class="sr-only">toggle</span>
</button>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-zinc-300">
Data Export
</span>
<button aria-pressed="false" class="relative inline-flex h-6 w-11 items-center rounded-full bg-white/10 ring-1 ring-white/10">
<span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-zinc-400 translate-x-0 transition-transform"></span>
<span class="sr-only">toggle</span>
</button>
</div>
</div>
</div>
<!-- Team Members -->
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Secondary actions for small screens -->
<div class="flex md:hidden mt-4 items-center justify-between" style="display: none;">
<button class="rounded-xl bg-white/5 px-4 py-2 text-sm text-zinc-200 ring-1 ring-white/10">
Contact
</button>
<button class="rounded-xl bg-white px-4 py-2 text-sm text-black ring-1 ring-black/10">
Join waitlist
</button>
</div>
</div>