All Prompts
All Prompts
featuresectionanalyticsdashboardanimatedinteractiveresponsivetailwind
Analytics Feature Grid with Live Radar & Metrics
Сетка функций аналитики с радаром и метриками. Интерактивный раздел для SaaS и AI платформ с анимацией и графиками.
Prompt
<div class="min-h-screen flex items-center justify-center bg-black"><section class="border-dashed z-10 bg-[#05080A] border-white/10 border-b relative"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > section:nth-of-type(2) > div:nth-of-type(1) > section:nth-of-type(1)">
<!-- Top Row Grid -->
<div class="grid grid-cols-1 md:grid-cols-12 border-dashed border-white/10 border-b">
<!-- Top Left: Radar -->
<div
class="col-span-12 md:col-span-4 md:border-b-0 md:border-r overflow-hidden group border-dashed reveal-on-scroll h-[360px] border-white/10 border-b relative">
<!-- Radar Background -->
<div class="flex -translate-y-16 opacity-80 absolute top-0 right-0 bottom-0 left-0 items-center justify-center">
<!-- Radar Rings -->
<div class="absolute w-[280px] h-[280px] rounded-full border border-white/5"></div>
<div class="absolute w-[200px] h-[200px] rounded-full border border-white/5"></div>
<div class="absolute w-[120px] h-[120px] rounded-full border border-white/5"></div>
<!-- Radar Sweep -->
<div
class="absolute w-[280px] h-[280px] rounded-full bg-[conic-gradient(from_0deg,transparent_0deg_240deg,rgba(198,249,31,0.2)_360deg)] animate-[spin_4s_linear_infinite]">
</div>
<!-- Activity Dot -->
<div class="absolute top-10 left-10 flex items-center gap-2 z-10">
<div class="w-1.5 h-1.5 rounded-full bg-[#c6f91f] shadow-[0_0_10px_#c6f91f]"></div>
<span class="text-[10px] text-[#c6f91f] uppercase tracking-widest font-geist font-medium">
Yuna Active
</span>
</div>
</div>
<!-- Content Bottom -->
<div
class="absolute bottom-0 left-0 w-full p-8 z-10 bg-gradient-to-t from-[#05080A] via-[#05080A]/80 to-transparent pt-20">
<h3 class="text-white font-medium text-lg mb-2 font-geist reveal-on-scroll">
INTELLIGENT ORCHESTRATION
</h3>
<p class="text-xs leading-relaxed font-geist pr-4 text-white/70 reveal-on-scroll" style="">
Yuna organizes and prioritizes every task to ensure
efficient execution.
</p>
</div>
</div>
<!-- Top Middle: Alerts -->
<div
class="col-span-12 md:col-span-4 md:border-b-0 md:border-r border-dashed flex flex-col reveal-on-scroll h-[360px] border-white/10 border-b pt-8 pr-8 pb-8 pl-8"
style="">
<style>
@keyframes progress-loop {
0% {
width: 0%;
opacity: 0.5;
}
20% {
width: 10%;
opacity: 1;
}
100% {
width: 100%;
opacity: 0;
}
}
@keyframes pulse-ring {
0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
<div class="mb-6">
<div class="flex items-center justify-between mb-2">
<h3 class="text-white font-medium text-lg font-geist reveal-on-scroll">
REAL-TIME INSIGHTS
</h3>
<div class="flex items-center gap-1.5">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#c6f91f] opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-[#c6f91f]"></span>
</span>
<span class="text-[10px] text-[#c6f91f] font-mono tracking-wider uppercase">Live</span>
</div>
</div>
<p class="text-xs leading-relaxed font-geist text-white/70 reveal-on-scroll" style="">
Stay updated with Yuna's live notifications across all your
platforms.
</p>
</div>
<div class="flex-1 space-y-4">
<!-- Alert Item 1 -->
<div class="group cursor-pointer reveal-on-scroll">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-3">
<div
class="w-7 h-7 rounded bg-[#c6f91f]/10 border border-[#c6f91f]/20 flex items-center justify-center text-[#c6f91f]">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2l-7 7V9h-5v7l-5-5V5z" class=""></path>
</svg>
</div>
<span class="text-[10px] font-semibold text-[#c6f91f] uppercase tracking-wide font-geist">
Yuna Alert
</span>
</div>
<span class="text-[10px] text-slate-600 font-mono" style="">
PROCESSING
</span>
</div>
<div class="h-[2px] w-full bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-[#c6f91f] shadow-[0_0_10px_#c6f91f]"
style="animation: progress-loop 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;"></div>
</div>
</div>
<!-- Alert Item 2 -->
<div class="group cursor-pointer reveal-on-scroll">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-3">
<div
class="w-7 h-7 rounded bg-white/5 border border-white/10 flex items-center justify-center text-slate-500 group-hover:text-white group-hover:border-white/20 transition-colors"
style="">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" class="">
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" class=""></path>
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" class=""></path>
<path d="M5 19.5A3.5 3.5 0 0 1 8.1-7 0z" class=""></path>
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" class=""></path>
</svg>
</div>
<span class="text-[10px] font-semibold text-slate-500 group-hover:text-white uppercase tracking-wide font-geist transition-colors" style="">
Figma Update
</span>
</div>
<span class="text-[10px] text-slate-600 font-mono" style="">
SYNCING
</span>
</div>
<div class="h-[2px] w-full bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-slate-500 group-hover:bg-white transition-colors"
style="animation: progress-loop 3s ease-in-out infinite; animation-delay: 0.5s;"></div>
</div>
</div>
<!-- Alert Item 3 -->
<div class="group cursor-pointer reveal-on-scroll">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-3">
<div
class="w-7 h-7 rounded bg-white/5 border border-white/10 flex items-center justify-center text-slate-500 group-hover:text-white group-hover:border-white/20 transition-colors"
style="">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" class=""></path>
</svg>
</div>
<span class="text-[10px] font-semibold text-slate-500 group-hover:text-white uppercase tracking-wide font-geist transition-colors" style="">
Facebook Alert
</span>
</div>
<span class="text-[10px] text-slate-600 font-mono" style="">
UPDATING
</span>
</div>
<div class="h-[2px] w-full bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-slate-500 group-hover:bg-white transition-colors"
style="animation: progress-loop 2.5s ease-out infinite; animation-delay: 1.2s;"></div>
</div>
</div>
<!-- Alert Item 4 -->
<div class="group cursor-pointer reveal-on-scroll">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-3">
<div
class="w-7 h-7 rounded bg-white/5 border border-white/10 flex items-center justify-center text-slate-500 group-hover:text-white group-hover:border-white/20 transition-colors"
style="">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" class="">
</path>
<rect width="4" height="12" x="2" y="9" class=""></rect>
<circle cx="4" cy="4" r="2" class=""></circle>
</svg>
</div>
<span class="text-[10px] font-semibold text-slate-500 group-hover:text-white uppercase tracking-wide font-geist transition-colors" style="">
Linkedin Notification
</span>
</div>
<span class="text-[10px] text-slate-600 font-mono" style="">
CHECKING
</span>
</div>
<div class="h-[2px] w-full bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-slate-500 group-hover:bg-white transition-colors"
style="animation: progress-loop 4s linear infinite; animation-delay: 0.8s;"></div>
</div>
</div>
</div>
</div>
<!-- Top Right: Icon Grid -->
<div class="col-span-12 md:col-span-4 reveal-on-scroll bg-[#05080A] h-[360px] relative" style="">
<!-- Grid Pattern -->
<div id="grid-aura-emjszhattn1hypgv"
class="grid grid-cols-4 grid-rows-4 divide-x divide-y divide-white/5 border-white/5 border-b absolute top-0 right-0 bottom-0 left-0">
<!-- Row 1 -->
<div class="reveal-on-scroll transition-all duration-700 ease-in-out border"></div>
<div class="bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
</div>
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-slate-600">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path>
<circle cx="12" cy="7" r="4" class=""></circle>
</svg>
</div>
</div>
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-slate-600">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="M8 14s1.5 2 4 2 4-2 4-2" class=""></path>
<line x1="9" x2="9.01" y1="9" y2="9" class=""></line>
<line x1="15" x2="15.01" y1="9" y2="9" class=""></line>
</svg>
</div>
</div>
<!-- Row 2 -->
<div class="bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
</div>
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-slate-600">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path
d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"
class=""></path>
</svg>
</div>
</div>
<div
class="flex items-center justify-center relative reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<!-- Main Glowing Icon -->
<div class="absolute inset-0 bg-[#c6f91f]/20 blur-[30px]"></div>
<div class="relative z-10 text-[#c6f91f]">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="#c6f91f"
stroke="#05080A" stroke-width="1" class="">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" class=""></path>
</svg>
</div>
</div>
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div
class="w-10 h-10 rounded bg-[#15191E] flex items-center justify-center text-[8px] font-bold text-slate-600 tracking-wider">
YUNA
</div>
</div>
<!-- Row 3 -->
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-slate-600">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="M9 9h.01" class=""></path>
<path d="M15 9h.01" class=""></path>
<path d="M10 16c1.5 1.5 2.5 1.5 4 0" class=""></path>
</svg>
</div>
</div>
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-slate-600">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" class=""></path>
<circle cx="12" cy="7" r="4" class=""></circle>
</svg>
</div>
</div>
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-slate-600">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="M8 14s1.5 2 4 2 4-2 4-2" class=""></path>
<line x1="9" x2="9.01" y1="9" y2="9" class=""></line>
<line x1="15" x2="15.01" y1="9" y2="9" class=""></line>
</svg>
</div>
</div>
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div
class="w-10 h-10 rounded bg-[#15191E] flex items-center justify-center text-[8px] font-bold text-slate-600 tracking-wider">
YUNA
</div>
</div>
<!-- Row 4 -->
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div
class="w-10 h-10 rounded bg-[#15191E] flex items-center justify-center text-[8px] font-bold text-slate-600 tracking-wider">
YUNA
</div>
</div>
<div class="bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
</div>
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div class="w-10 h-10 rounded bg-white/5 flex items-center justify-center text-slate-600 font-serif">
Y
</div>
</div>
<div
class="flex items-center justify-center bg-white/[0.01] reveal-on-scroll transition-all duration-700 ease-in-out border border-transparent">
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-slate-600">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m4.93 4.93 14.14 14.14" class=""></path>
</svg>
</div>
</div>
<!-- Animation Script -->
<script>
(function() {
const initGridAnimation = () => {
const container = document.getElementById('grid-aura-emjszhattn1hypgv');
if (!container) return;
// Select direct div children (cells)
const cells = Array.from(container.children).filter(el => el.tagName === 'DIV' && !el.classList.contains('absolute'));
if (cells.length === 0) return;
let activeIndex = 0;
// Styles for active state
const activeClasses = ['bg-[#c6f91f]/20', 'z-10', 'shadow-[0_0_15px_rgba(198,249,31,0.15)]', 'shadow-[inset_0_0_0_1px_rgba(198,249,31,0.5)]'];
const inactiveClasses = ['border-transparent'];
const runSequence = async () => {
if (!container.isConnected) return;
const cell = cells[activeIndex];
// FADE IN: Remove inactive base styles, add active highlight styles
cell.classList.remove(...inactiveClasses);
cell.classList.add(...activeClasses);
// HOLD: Wait for fade in (700ms) + brief hold (300ms)
await new Promise(r => setTimeout(r, 1000));
// FADE OUT: Remove active styles, revert to inactive
cell.classList.remove(...activeClasses);
cell.classList.add(...inactiveClasses);
// WAIT: Allow fade out to complete before moving to next cell
// strict sequential timing
await new Promise(r => setTimeout(r, 700));
// Move to next cell index
activeIndex = (activeIndex + 1) % cells.length;
// Loop
requestAnimationFrame(runSequence);
};
runSequence();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initGridAnimation);
} else {
initGridAnimation();
}
})();
</script>
</div>
</div>
</div>
<!-- Bottom Row Grid -->
<div class="grid grid-cols-1 md:grid-cols-12">
<!-- Growth Section -->
<div
class="col-span-12 md:col-span-8 md:border-b-0 md:border-r border-dashed overflow-hidden reveal-on-scroll border-white/10 border-b pt-16 pr-8 pb-8 pl-8 relative">
<!-- Background Chart Visual -->
<div
class="flex gap-[1px] pointer-events-none opacity-100 w-full h-full pr-8 absolute right-0 bottom-0 items-end justify-end">
<style>
@keyframes barOutlineAnim {
0% {
height: 0;
opacity: 0;
}
5% {
height: 0;
opacity: 1;
}
20% {
height: var(--h);
opacity: 1;
}
80% {
height: var(--h);
opacity: 1;
}
90% {
height: var(--h);
opacity: 0;
}
100% {
height: 0;
opacity: 0;
}
}
@keyframes barFillAnim {
0%,
20% {
height: 0;
opacity: 1;
}
40% {
height: 100%;
opacity: 1;
}
75% {
height: 100%;
opacity: 1;
}
85% {
height: 100%;
opacity: 0;
}
100% {
height: 0;
opacity: 0;
}
}
</style>
<!-- Bar 1: 20% -->
<div class="w-24 relative border-t border-l border-r border-dashed border-white/10"
style="--h: 20%; animation: barOutlineAnim 6s ease-in-out infinite;">
<div class="absolute bottom-0 left-0 w-full bg-white/[0.02]"
style="animation: barFillAnim 6s ease-in-out infinite;"></div>
</div>
<!-- Bar 2: 40% -->
<div class="w-24 relative border-t border-l border-r border-dashed border-white/10"
style="--h: 40%; animation: barOutlineAnim 6s 0.1s ease-in-out infinite;">
<div class="absolute bottom-0 left-0 w-full bg-white/[0.02]"
style="animation: barFillAnim 6s 0.1s ease-in-out infinite;"></div>
</div>
<!-- Bar 3: 60% -->
<div class="w-24 relative border-t border-l border-r border-dashed border-white/10"
style="--h: 60%; animation: barOutlineAnim 6s 0.2s ease-in-out infinite;">
<div class="absolute bottom-0 left-0 w-full bg-white/[0.02]"
style="animation: barFillAnim 6s 0.2s ease-in-out infinite;"></div>
</div>
<!-- Bar 4: 80% with Icon -->
<div class="w-24 relative border-t border-l border-r border-dashed border-[#c6f91f]/30"
style="--h: 80%; animation: barOutlineAnim 6s 0.3s ease-in-out infinite;">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 text-[#c6f91f]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
stroke="none" class="">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" class=""></path>
</svg>
</div>
<div class="absolute bottom-0 left-0 w-full bg-[#c6f91f]/5"
style="animation: barFillAnim 6s 0.3s ease-in-out infinite;"></div>
</div>
</div>
<div class="relative z-10 mt-12">
<div class="text-[64px] leading-none font-light text-[#c6f91f] tracking-tighter font-geist mb-2">
150%
</div>
<h3 class="text-white font-medium text-lg mb-2 uppercase tracking-wide font-geist reveal-on-scroll">
Growth with Yuna
</h3>
<p class="text-sm leading-relaxed font-geist max-w-md text-white/70 reveal-on-scroll" style="">
Empower teams with Yuna to drive measurable success. Turn
insights into actions that scale your business fast.
</p>
</div>
</div>
<!-- Partners Section -->
<div class="col-span-12 md:col-span-4 p-8 flex flex-col justify-end pt-16 h-full min-h-[300px] reveal-on-scroll">
<div class="mt-auto">
<h3 class="text-white font-medium text-lg mb-2 uppercase tracking-wide font-geist reveal-on-scroll">
Yuna's Global Network
</h3>
<p class="text-sm leading-relaxed font-geist text-white/70 reveal-on-scroll" style="">
Collaborate with brands and teams who share your vision.
Build lasting partnerships based on trust and innovation.
</p>
</div>
</div>
</div>
</section>