Загрузка...
Трехколоночный дашборд с боковой панелью, списком входящих и детальным просмотром. Идеально для трекеров задач, почтовых клиентов, управления проектами. TailwindCSS, Glassmorphism.
<section class="relative py-24">
<div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
<!-- Section Header -->
<div class="text-center max-w-3xl mx-auto mb-16">
<div class="inline-flex gap-2 text-xs text-zinc-300 bg-white/5 border-white/10 border rounded-full pt-1 pr-3 pb-1 pl-3 items-center mb-6">
<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="h-3.5 w-3.5">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" class=""></polygon>
</svg>
<span class="font-medium font-sans">Platform Features</span>
</div>
<h2 class="text-4xl sm:text-5xl font-light tracking-tighter font-geist text-white mb-4">Everything you need to ship faster</h2>
<p class="text-lg text-zinc-300 font-sans">Powerful tools that adapt to your workflow, from initial planning to final deployment.</p>
</div>
<!-- Bento Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- Large Feature Card - 2/3 width -->
<article class="lg:col-span-2 group relative overflow-hidden transition-all duration-300 hover:shadow-2xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm">
<div class="p-6 sm:p-8">
<!-- Illustration -->
<div class="relative h-64 sm:h-80 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
<!-- Main Dashboard -->
<div class="absolute inset-4 rounded-lg bg-zinc-950/90 backdrop-blur border border-white/10">
<!-- Header -->
<div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
<div class="flex items-center gap-3">
<span class="h-2 w-2 rounded-full bg-red-500/60"></span>
<span class="h-2 w-2 rounded-full bg-yellow-500/60"></span>
<span class="h-2 w-2 rounded-full bg-green-500/60"></span>
</div>
<span class="text-xs text-zinc-400 font-sans">Insight Engine</span>
</div>
<!-- Content Grid -->
<div class="grid grid-cols-12 gap-3 p-4 h-full">
<!-- Velocity Chart -->
<div class="col-span-8 bg-white/5 rounded-lg p-3 border border-white/5">
<div class="flex items-center justify-between mb-3">
<span class="text-xs text-zinc-300 font-medium">Team Velocity</span>
<span class="text-xs text-emerald-400">↗ +23%</span>
</div>
<svg viewBox="0 0 200 60" class="w-full h-12 text-zinc-700">
<defs class="">
</defs>
<path d="M 0 50 Q 25 45 50 40 T 100 25 T 150 20 T 200 15" stroke="#10B981" stroke-width="2" fill="none" stroke-linecap="round" class=""></path>
<path d="M 0 50 Q 25 45 50 40 T 100 25 T 150 20 T 200 15 L 200 60 L 0 60 Z" fill="url(#velocityGradient)" class=""></path>
</svg>
</div>
<!-- Stats -->
<div class="col-span-4 space-y-2">
<div class="bg-white/5 rounded-lg p-3 border border-white/5">
<div class="text-xs text-zinc-400 mb-1">Active Issues</div>
<div class="text-lg font-semibold text-white">127</div>
</div>
<div class="bg-white/5 rounded-lg p-3 border border-white/5">
<div class="text-xs text-zinc-400 mb-1">Cycle Time</div>
<div class="text-lg font-semibold text-emerald-400">2.4d</div>
</div>
</div>
<!-- Progress Bars -->
<div class="col-span-12 space-y-2">
<div class="flex items-center gap-3">
<span class="text-xs text-zinc-400 w-20">Frontend</span>
<div class="flex-1 bg-zinc-800 rounded-full h-1.5">
<div class="bg-blue-500 h-1.5 rounded-full w-3/4"></div>
</div>
<span class="text-xs text-blue-400">75%</span>
</div>
<div class="flex items-center gap-3">
<span class="text-xs text-zinc-400 w-20">Backend</span>
<div class="flex-1 bg-zinc-800 rounded-full h-1.5">
<div class="bg-emerald-500 h-1.5 rounded-full w-4/5"></div>
</div>
<span class="text-xs text-emerald-400">80%</span>
</div>
<div class="flex items-center gap-3">
<span class="text-xs text-zinc-400 w-20">Design</span>
<div class="flex-1 bg-zinc-800 rounded-full h-1.5">
<div class="bg-purple-500 h-1.5 rounded-full w-1/2"></div>
</div>
<span class="text-xs text-purple-400">50%</span>
</div>
</div>
</div>
</div>
<!-- Floating notifications -->
<div class="absolute top-6 right-6 w-48 space-y-2">
<div class="bg-zinc-900/95 border border-emerald-500/30 rounded-lg p-2 backdrop-blur">
<div class="flex items-center gap-2">
<div class="h-2 w-2 bg-emerald-500 rounded-full"></div>
<span class="text-xs text-emerald-300">Deploy completed</span>
</div>
</div>
<div class="bg-zinc-900/95 border border-blue-500/30 rounded-lg p-2 backdrop-blur">
<div class="flex items-center gap-2">
<div class="h-2 w-2 bg-blue-500 rounded-full"></div>
<span class="text-xs text-blue-300">PR merged</span>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="">
<div class="flex items-center gap-3 mb-4">
<h3 class="sm:text-3xl text-2xl font-normal text-white tracking-tight font-geist">Advanced Analytics</h3>
</div>
<p class="text-zinc-300 text-base leading-relaxed font-sans">Get deep insights into your team's performance with automated metrics, cycle time analysis, and predictive forecasting to optimize your workflow.</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
Explore analytics
<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="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
</div>
</article>
<!-- Small Feature Card - 1/3 width -->
<article class="group relative overflow-hidden transition-all duration-300 hover:shadow-xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm">
<div class="p-6">
<!-- Illustration -->
<div class="relative h-48 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
<!-- Code Editor Mock -->
<div class="absolute inset-3 rounded-lg bg-zinc-950/90 backdrop-blur border border-white/10 overflow-hidden">
<div class="flex items-center justify-between px-3 py-2 border-b border-white/10">
<div class="flex items-center gap-2">
<div class="h-2 w-2 bg-red-500/60 rounded-full"></div>
<div class="h-2 w-2 bg-yellow-500/60 rounded-full"></div>
<div class="h-2 w-2 bg-green-500/60 rounded-full"></div>
</div>
<span class="text-xs text-zinc-400">main.js</span>
</div>
<div class="p-3 space-y-1">
<div class="flex">
<span class="text-xs text-zinc-500 w-4">1</span>
<span class="text-xs text-blue-400">import</span>
<span class="text-xs text-zinc-300 ml-1">{ createIssue }</span>
</div>
<div class="flex">
<span class="text-xs text-zinc-500 w-4">2</span>
<span class="text-xs text-purple-400">const</span>
<span class="text-xs text-zinc-300 ml-1">issue =</span>
<span class="text-xs text-yellow-400 ml-1">'ENG-241'</span>
</div>
<div class="flex">
<span class="text-xs text-zinc-500 w-4">3</span>
<span class="text-xs text-emerald-400">await</span>
<span class="text-xs text-zinc-300 ml-1">deploy()</span>
</div>
<div class="flex">
<span class="text-xs text-zinc-500 w-4">4</span>
<span class="text-xs text-zinc-600"># Auto-linked to PR</span>
</div>
</div>
</div>
<!-- Link indicator -->
</div>
<!-- Content -->
<div class="">
<div class="flex gap-3 mb-4 items-center">
<h3 class="text-xl font-normal text-white tracking-tight font-geist">Smart Linking</h3>
</div>
<p class="text-zinc-300 text-sm leading-relaxed font-sans">Automatically connect commits, PRs, and deployments to issues. Never lose context across your development workflow.</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
View integrations
<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="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
</div>
</article>
</div>
<!-- Second Row - Reversed Layout -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- Small Feature Card - 1/3 width -->
<article class="group relative overflow-hidden transition-all duration-300 hover:shadow-xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm">
<div class="p-6">
<!-- Illustration -->
<div class="relative h-48 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
<!-- Team Avatars -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="relative">
<!-- Center hub -->
<div class="w-16 h-16 flex ring-1 ring-white/20 bg-gradient-to-r from-slate-900 to-slate-700 rounded-full 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" class="w-[24px] h-[24px]" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(255, 255, 255);">
<path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" class=""></path>
<polyline points="3,7 12,13 21,7" class=""></polyline>
</svg>
</div>
<!-- Orbiting avatars -->
<img class="absolute -top-8 -left-4 w-10 h-10 object-cover border-white/30 border rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5fe82ca0-ec91-4df3-b0fb-d97b643f2178_320w.jpg">
<img class="absolute -top-6 -right-6 w-8 h-8 object-cover border-white/30 border rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ec17a2e2-e4f4-4164-b631-f074e640a0c1_320w.jpg">
<img class="absolute -bottom-8 -right-2 w-10 h-10 object-cover border-white/30 border rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e08496f1-bdba-4cb4-83c1-96ac5be57ace_320w.jpg">
<img class="absolute -bottom-6 -left-6 w-8 h-8 object-cover border-white/30 border-1 rounded-full" alt="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c1bfea42-f5c9-4b52-974e-36fe36212b17_320w.jpg">
<!-- Connection lines -->
<div class="absolute inset-0 pointer-events-none">
<svg class="w-full h-full" viewBox="0 0 100 100">
<line x1="50" y1="50" x2="25" y2="25" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2" class=""></line>
<line x1="50" y1="50" x2="75" y2="20" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2" class=""></line>
<line x1="50" y1="50" x2="80" y2="80" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2" class=""></line>
<line x1="50" y1="50" x2="20" y2="75" stroke="rgba(255,255,255,0.1)" stroke-width="1" stroke-dasharray="2,2" class=""></line>
</svg>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="">
<div class="flex items-center gap-3 mb-4">
<h3 class="text-xl font-normal text-white tracking-tight font-geist">Team Collaboration</h3>
</div>
<p class="text-zinc-300 text-sm leading-relaxed font-sans">Real-time updates, smart notifications, and seamless handoffs keep everyone synchronized across time zones.</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
See team features
<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="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
</div>
</article>
<!-- Large Feature Card - 2/3 width -->
<article class="lg:col-span-2 group relative overflow-hidden transition-all duration-300 hover:shadow-2xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm">
<div class="p-6 sm:p-8">
<!-- Illustration -->
<div class="relative h-64 sm:h-80 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
<!-- Automation Flow -->
<div class="absolute inset-4">
<!-- Nodes -->
<div class="absolute top-4 left-8 w-16 h-12 bg-blue-500/20 border border-blue-500/40 rounded-lg 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" class="h-5 w-5 text-blue-400">
<polyline points="16 18 22 12 16 6" class=""></polyline>
<polyline points="8 6 2 12 8 18" class=""></polyline>
</svg>
</div>
<div class="absolute top-4 right-8 w-16 h-12 bg-emerald-500/20 border border-emerald-500/40 rounded-lg 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" class="h-5 w-5 text-emerald-400">
<path d="M21 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.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path>
<polyline points="7.5 4.21 12 6.81 16.5 4.21" class=""></polyline>
<polyline points="7.5 19.79 7.5 14.6 3 12" class=""></polyline>
<polyline points="21 12 16.5 14.6 16.5 19.79" class=""></polyline>
</svg>
</div>
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-16 h-12 bg-purple-500/20 border border-purple-500/40 rounded-lg 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" class="h-5 w-5 text-purple-400">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" class=""></path>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<!-- Connection Lines -->
<svg class="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 300 200">
<defs class="">
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto" class="">
<polygon points="0 0, 10 3.5, 0 7" fill="rgba(255,255,255,0.4)" class=""></polygon>
</marker>
</defs>
<path d="M 80 25 Q 150 15 220 25" stroke="rgba(255,255,255,0.3)" stroke-width="2" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="4,4" class="">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" class=""></animate>
</path>
<path d="M 220 40 Q 200 100 150 150" stroke="rgba(255,255,255,0.3)" stroke-width="2" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="4,4" class="">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" class=""></animate>
</path>
<path d="M 140 150 Q 100 100 80 40" stroke="rgba(255,255,255,0.3)" stroke-width="2" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="4,4" class="">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" class=""></animate>
</path>
</svg>
<!-- Status Indicators -->
<div class="absolute top-20 left-4 space-y-1">
<div class="flex items-center gap-2 text-xs">
<div class="h-2 w-2 bg-emerald-500 rounded-full animate-pulse"></div>
<span class="text-emerald-400">Tests passed</span>
</div>
<div class="flex items-center gap-2 text-xs">
<div class="h-2 w-2 bg-blue-500 rounded-full animate-pulse"></div>
<span class="text-blue-400">Building...</span>
</div>
<div class="flex items-center gap-2 text-xs">
<div class="h-2 w-2 bg-yellow-500 rounded-full"></div>
<span class="text-yellow-400">Deploy queued</span>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="">
<div class="flex items-center gap-3 mb-4">
<h3 class="sm:text-3xl text-2xl font-normal text-white tracking-tight font-geist">Automated Workflows</h3>
</div>
<p class="text-zinc-300 text-base leading-relaxed font-sans">Streamline your pipeline with intelligent automation. From code to deployment, reduce manual work and eliminate bottlenecks with smart triggers and actions.</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
Build workflows
<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="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
</div>
</article>
</div>
<!-- Third Row - Standard Layout -->
</div>
</section>