All Prompts
All Prompts
herosectiontailwindanalyticsdashboardctaresponsiveanimatedluminahealthrecoveryreimaginedmoderneraprecisiontracking
Lumina Health Masonry Analytics CTA Layout
Адаптивный Tailwind макет с анимированными карточками аналитики для здоровья. Включает hero, графики, CTA. Идеален для лендинга или дашборда.
Prompt
<section class="min-h-screen bg-[#0B1121] flex items-start justify-center p-4 md:p-8 font-['Inter',sans-serif] text-[#E2E8F0] antialiased selection:bg-[#3B82F6] selection:text-white">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Inter:wght@300;400&display=swap" rel="stylesheet">
<div class="columns-1 md:columns-2 lg:columns-3 gap-6 max-w-[1200px] w-full mx-auto pt-4">
<!-- Card 1: Hero Intro -->
<div class="break-inside-avoid mb-6 bg-[#131C31] border border-[#E2E8F0]/5 rounded-xl p-6 md:p-8 flex flex-col relative overflow-hidden min-h-[500px] opacity-0 translate-y-4 transition-all duration-1000 ease-out" id="card1">
<div class="flex items-center gap-1 mb-10">
<span class="font-['Playfair_Display',serif] text-xl tracking-tight text-white">Lumina</span>
<iconify-icon icon="solar:moon-stars-linear" class="text-[#3B82F6] text-base" stroke-width="1.5"></iconify-icon>
</div>
<div class="flex items-center gap-2 mb-6 text-xs text-[#94A3B8]">
<iconify-icon icon="solar:shield-check-linear" class="text-[#3B82F6] text-sm" stroke-width="1.5"></iconify-icon>
<span>Over 80k Active Users</span>
</div>
<h1 class="font-['Playfair_Display',serif] text-4xl md:text-5xl tracking-tighter font-normal leading-[1.1] mb-10 text-white">
Recovery<br>Reimagined For<br>The Modern Era.
</h1>
<div class="w-full h-px bg-[#E2E8F0]/10 mb-6"></div>
<p class="text-xs text-[#94A3B8] leading-relaxed mb-8 max-w-[250px]">
Seamless biometric synchronization with actionable insights delivered while you sleep.
</p>
<button class="bg-[#3B82F6] text-white text-xs font-medium py-3 px-6 rounded-full w-fit hover:bg-[#2563EB] transition-colors mt-auto relative z-10">
Begin Optimization
</button>
<div class="absolute -bottom-8 -right-4 w-full flex justify-end pointer-events-none">
<span class="font-['Playfair_Display',serif] text-[8rem] tracking-tighter leading-none text-[#3B82F6] opacity-5">Lumina</span>
</div>
</div>
<!-- Card 2: Bar Chart -->
<div class="break-inside-avoid mb-6 bg-[#1A2642] border border-[#E2E8F0]/5 rounded-xl p-6 md:p-8 flex flex-col relative min-h-[600px] opacity-0 translate-y-4 transition-all duration-1000 delay-150 ease-out" id="card2">
<div class="flex items-center gap-1 mb-10">
<span class="font-['Playfair_Display',serif] text-xl tracking-tight text-white">Lumina</span>
<iconify-icon icon="solar:graph-up-linear" class="text-[#06B6D4] text-base" stroke-width="1.5"></iconify-icon>
</div>
<h2 class="font-['Playfair_Display',serif] text-7xl tracking-tighter font-normal mb-2 text-white">
41.8<span class="text-4xl text-[#94A3B8]">%</span>
</h2>
<p class="text-xs text-[#94A3B8] mb-16">Increase in Deep Sleep Duration</p>
<!-- Chart Area -->
<div class="relative flex-1 mt-auto flex flex-col justify-end pb-8">
<div class="absolute inset-0 flex justify-between pointer-events-none">
<div class="w-px h-full bg-[#E2E8F0]/5"></div>
<div class="w-px h-full bg-[#E2E8F0]/5"></div>
<div class="w-px h-full bg-[#E2E8F0]/5"></div>
<div class="w-px h-full bg-[#E2E8F0]/5"></div>
<div class="w-px h-full bg-[#E2E8F0]/5"></div>
</div>
<div class="relative z-10 flex flex-col gap-6 w-full">
<div>
<p class="text-xs text-[#94A3B8] mb-2">Baseline Average</p>
<div class="h-6 w-[35%]" style="background: repeating-linear-gradient(45deg, transparent, transparent 2px, #475569 2px, #475569 3px); opacity: 0.4;"></div>
</div>
<div>
<p class="text-xs text-[#E2E8F0] mb-2">Phase 1 Protocol</p>
<div class="h-6 w-[60%] bg-[#06B6D4] transition-all duration-1000 ease-out rounded-r-sm" style="width: 0%;" id="bar1"></div>
</div>
<div>
<p class="text-xs text-[#E2E8F0] mb-2">Advanced Integration</p>
<div class="h-6 w-[92%] bg-[#3B82F6] transition-all duration-1000 delay-300 ease-out rounded-r-sm" style="width: 0%;" id="bar2"></div>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full flex justify-between text-[10px] text-[#94A3B8] pt-2">
<span>0</span>
<span>10</span>
<span>20</span>
<span>30</span>
<span>40+</span>
</div>
</div>
</div>
<!-- Card 3: Area Chart -->
<div class="break-inside-avoid mb-6 bg-[#17223B] border border-[#E2E8F0]/5 rounded-xl p-6 md:p-8 flex flex-col relative overflow-hidden min-h-[450px] opacity-0 translate-y-4 transition-all duration-1000 delay-300 ease-out" id="card3">
<h2 class="font-['Playfair_Display',serif] text-3xl tracking-tight font-normal leading-[1.2] mb-8 text-white">
Precision Tracking,<br>Tailored To You
</h2>
<div class="flex items-start gap-4 mb-8 relative z-20">
<img src="https://i.pravatar.cc/100?img=68" alt="Specialist" class="w-10 h-10 rounded-full object-cover border border-[#3B82F6]/30">
<p class="text-xs text-[#94A3B8] leading-relaxed max-w-[180px]">
Receive dynamic adjustments based on your daily metabolic responses.
</p>
</div>
<svg viewBox="0 0 120 30" class="w-32 h-8 mb-auto relative z-20">
<path id="squiggle" d="M0,15 Q20,5 40,20 T80,10 T120,15" fill="none" stroke="#60A5FA" stroke-width="1.5" stroke-dasharray="200" stroke-dashoffset="200" style="transition: stroke-dashoffset 2s ease-in-out;"></path>
</svg>
<div class="absolute bottom-0 left-0 w-full h-[200px] flex flex-col justify-end">
<div class="absolute inset-0 flex justify-between px-6 pointer-events-none z-0">
<div class="w-px h-full bg-[#E2E8F0]/5 relative"><span class="absolute -top-5 -translate-x-1/2 text-[10px] text-[#94A3B8]">Q1</span></div>
<div class="w-px h-full bg-[#E2E8F0]/5 relative"><span class="absolute -top-5 -translate-x-1/2 text-[10px] text-[#94A3B8]">Q2</span></div>
<div class="w-px h-full bg-[#E2E8F0]/5 relative"><span class="absolute -top-5 -translate-x-1/2 text-[10px] text-[#94A3B8]">Q3</span></div>
<div class="w-px h-full bg-[#E2E8F0]/5 relative"><span class="absolute -top-5 -translate-x-1/2 text-[10px] text-[#94A3B8]">Q4</span></div>
</div>
<svg viewBox="0 0 300 150" class="w-full h-full absolute bottom-0 left-0 z-10 preserve-3d" preserveAspectRatio="none">
<path d="M0,150 L0,110 L40,120 L80,60 L150,150 Z" fill="#1E3A8A" opacity="0.6" style="transform: translateY(20px); opacity: 0; transition: all 1s ease-out 0.5s;" id="mountain1"></path>
<path d="M70,150 L150,40 L230,150 Z" fill="#2563EB" opacity="0.8" style="transform: translateY(20px); opacity: 0; transition: all 1s ease-out 0.7s;" id="mountain2"></path>
<path d="M140,150 L200,80 L280,150 Z" fill="#60A5FA" opacity="0.9" style="transform: translateY(20px); opacity: 0; transition: all 1s ease-out 0.9s;" id="mountain3"></path>
</svg>
<div class="absolute bottom-6 w-full flex justify-center gap-12 z-20 text-center pointer-events-none">
<div class="flex flex-col opacity-0 transition-opacity duration-1000 delay-1000" id="stat1">
<span class="text-sm font-medium text-white">31.2M</span>
<span class="text-[10px] text-[#94A3B8]">Data Points</span>
</div>
<div class="flex flex-col opacity-0 transition-opacity duration-1000 delay-1000" id="stat2">
<span class="text-sm font-medium text-white">12.4k</span>
<span class="text-[10px] text-[#94A3B8]">Cohorts</span>
</div>
</div>
</div>
</div>
<!-- Card 4: Activity Feed -->
<div class="break-inside-avoid mb-6 bg-[#111A2E] border border-[#E2E8F0]/5 rounded-xl p-6 md:p-8 flex flex-col relative min-h-[550px] opacity-0 translate-y-4 transition-all duration-1000 delay-400 ease-out" id="card4">
<div class="flex items-center justify-between mb-10">
<span class="font-['Playfair_Display',serif] text-xl tracking-tight text-white">Live Sync</span>
<div class="w-2 h-2 rounded-full bg-[#06B6D4] animate-pulse"></div>
</div>
<p class="text-xs text-[#94A3B8] mb-8">Continuous monitoring streams your vital metrics securely to your dashboard.</p>
<div class="flex flex-col gap-6 mt-auto">
<div class="flex items-center gap-4 p-4 rounded-lg bg-[#E2E8F0]/5 border border-[#E2E8F0]/5">
<div class="w-10 h-10 rounded-full bg-[#3B82F6]/20 flex items-center justify-center text-[#3B82F6]">
<iconify-icon icon="solar:heart-angle-linear" text-lg="" stroke-width="1.5"></iconify-icon>
</div>
<div class="flex flex-col flex-1">
<span class="text-xs text-white">Resting Heart Rate</span>
<span class="text-[10px] text-[#94A3B8]">Updated 2m ago</span>
</div>
<span class="text-sm font-medium text-white">52 bpm</span>
</div>
<div class="flex items-center gap-4 p-4 rounded-lg bg-[#E2E8F0]/5 border border-[#E2E8F0]/5">
<div class="w-10 h-10 rounded-full bg-[#8B5CF6]/20 flex items-center justify-center text-[#8B5CF6]">
<iconify-icon icon="solar:moon-sleep-linear" text-lg="" stroke-width="1.5"></iconify-icon>
</div>
<div class="flex flex-col flex-1">
<span class="text-xs text-white">REM Sleep Phase</span>
<span class="text-[10px] text-[#94A3B8]">Last night</span>
</div>
<span class="text-sm font-medium text-white">2h 14m</span>
</div>
<div class="flex items-center gap-4 p-4 rounded-lg bg-[#E2E8F0]/5 border border-[#E2E8F0]/5">
<div class="w-10 h-10 rounded-full bg-[#06B6D4]/20 flex items-center justify-center text-[#06B6D4]">
<iconify-icon icon="solar:waterdrop-linear" text-lg="" stroke-width="1.5"></iconify-icon>
</div>
<div class="flex flex-col flex-1">
<span class="text-xs text-white">Hydration Index</span>
<span class="text-[10px] text-[#94A3B8]">Daily average</span>
</div>
<span class="text-sm font-medium text-white">Optimal</span>
</div>
</div>
</div>
<!-- Card 5: Large Metric Focus -->
<div class="break-inside-avoid mb-6 bg-[#1C2A4A] border border-[#E2E8F0]/5 rounded-xl p-6 md:p-8 flex flex-col justify-between relative overflow-hidden min-h-[400px] opacity-0 translate-y-4 transition-all duration-1000 delay-500 ease-out" id="card5">
<div class="flex items-center gap-2 text-xs text-[#94A3B8]">
<iconify-icon icon="solar:bolt-linear" class="text-[#8B5CF6] text-sm" stroke-width="1.5"></iconify-icon>
<span>Cognitive Load Capacity</span>
</div>
<div class="flex flex-col items-center text-center my-8 relative z-10">
<h3 class="font-['Playfair_Display',serif] text-6xl tracking-tighter font-normal text-white mb-2">High</h3>
<p class="text-xs text-[#94A3B8] max-w-[200px]">Your neural recovery is peaking. Ideal time for deep, focused work.</p>
</div>
<div class="w-full">
<div class="flex justify-between text-[10px] text-[#94A3B8] mb-2">
<span>Depleted</span>
<span>Optimal</span>
</div>
<div class="h-1.5 w-full bg-[#0B1121] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-[#3B82F6] to-[#8B5CF6] transition-all duration-1500 ease-out rounded-full" style="width: 0%;" id="bar3"></div>
</div>
</div>
<!-- Abstract Background Glow -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-[#8B5CF6] rounded-full blur-[100px] opacity-20 pointer-events-none"></div>
</div>
<!-- Card 6: CTA / Summary -->
<div class="break-inside-avoid mb-6 bg-[#152038] border border-[#E2E8F0]/5 rounded-xl p-6 md:p-8 flex flex-col relative min-h-[480px] opacity-0 translate-y-4 transition-all duration-1000 delay-600 ease-out" id="card6">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-[#3B82F6] to-[#06B6D4] flex items-center justify-center mb-10 shadow-lg shadow-[#3B82F6]/20">
<iconify-icon icon="solar:rocket-linear" class="text-white text-2xl" stroke-width="1.5"></iconify-icon>
</div>
<h2 class="font-['Playfair_Display',serif] text-3xl tracking-tight font-normal leading-[1.2] mb-4 text-white">
Ready to elevate<br>your baseline?
</h2>
<p class="text-xs text-[#94A3B8] leading-relaxed mb-10">
Join the vanguard of health optimization. Get early access to our next-generation sensory array.
</p>
<div class="mt-auto flex flex-col gap-3">
<div class="relative">
<iconify-icon icon="solar:letter-linear" class="absolute left-4 top-1/2 -translate-y-1/2 text-[#94A3B8] text-sm"></iconify-icon>
<input type="email" placeholder="Enter your email" class="w-full bg-[#0B1121] border border-[#E2E8F0]/10 rounded-lg py-3 pl-10 pr-4 text-xs text-white placeholder-[#94A3B8] focus:outline-none focus:border-[#3B82F6] transition-colors">
</div>
<button class="w-full bg-white text-[#0B1121] text-xs font-medium py-3 px-6 rounded-lg hover:bg-[#E2E8F0] transition-colors">
Request Access
</button>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
// Fade in all 6 cards
for (let i = 1; i <= 6; i++) {
const card = document.getElementById(`card${i}`);
if (card) {
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}
}
// Animate bars
document.getElementById('bar1').style.width = '60%';
document.getElementById('bar2').style.width = '92%';
document.getElementById('bar3').style.width = '85%';
// Animate SVG line
document.getElementById('squiggle').style.strokeDashoffset = '0';
// Animate mountains
document.getElementById('mountain1').style.opacity = '0.6';
document.getElementById('mountain1').style.transform = 'translateY(0)';
document.getElementById('mountain2').style.opacity = '0.8';
document.getElementById('mountain2').style.transform = 'translateY(0)';
document.getElementById('mountain3').style.opacity = '0.9';
document.getElementById('mountain3').style.transform = 'translateY(0)';
// Show stats
document.getElementById('stat1').style.opacity = '1';
document.getElementById('stat2').style.opacity = '1';
}, 100);
});
</script>
</section>