All Prompts
All Prompts
feature sectionheroprogress barctaanimatedresponsivetailwindlanding pagesection
Animated Feature Section with Deploy Progress Card
Анимированный блок с карточкой прогресса развертывания. Отзывчивый раздел для лендинга SaaS/cloud-сервисов с текстом, CTA и анимацией.
Prompt
<div class="sm:px-6 lg:px-8 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll 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">
<!-- Background (Unicorn Studio) -->
<!-- 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-8 text-center mr-auto ml-auto pt-16 pr-8 pb-8 pl-8 relative items-center justify-center">
<!-- Badge -->
<!-- Heading -->
<div class="grid lg:grid-cols-2 gap-12 gap-x-12 gap-y-12 items-center">
<!-- Left content -->
<div class="">
<!-- Badge -->
<div class="flex [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll justify-start">
<div class="inline-flex text-[13px] 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="tabular-nums text-2xl font-light text-emerald-300/80">
03
</span>
<span class="text-emerald-300/40">/</span>
<span class="uppercase text-[11px] text-emerald-200/90 tracking-widest">
GLOBAL SCALE
</span>
</div>
</div>
<!-- Heading -->
<h2 class="sm:text-4xl lg:text-5xl lg:text-left [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll text-3xl font-light text-white tracking-tight font-geist mb-4">
Lightning-fast deployments at scale
</h2>
<!-- Description -->
<p class="leading-relaxed sm:text-lg sm:text-left [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll text-base text-zinc-400 mb-8">
Experience the next generation of cloud infrastructure. Deploy
your applications globally in seconds with our edge-optimized
platform.
</p>
<!-- Features list -->
<ul class="[animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll mb-8 space-y-4">
<li class="flex items-start gap-3">
<div class="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-emerald-400">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<div class="">
<p class="text-sm font-medium text-white xl:text-left">
Global CDN network
</p>
<p class="text-sm text-zinc-500 xl:text-left">
Serve content from 200+ edge locations worldwide
</p>
</div>
</li>
<li class="flex items-start gap-3">
<div class="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-emerald-400">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<div class="">
<p class="text-sm font-medium text-white xl:text-left">
Automatic SSL certificates
</p>
<p class="text-sm text-zinc-500 xl:text-left">
Secure connections with zero configuration
</p>
</div>
</li>
<li class="flex items-start gap-3">
<div class="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-emerald-400">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<div class="">
<p class="text-sm font-medium text-white xl:text-left">
Instant rollbacks
</p>
<p class="text-sm text-zinc-500 xl:text-left">
Revert to any previous version in one click
</p>
</div>
</li>
</ul>
<!-- CTA -->
<div class="flex flex-col sm:flex-row [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll gap-x-3 gap-y-3">
<a href="#" class="inline-flex items-center justify-center transition overflow-hidden text-sm font-medium rounded-lg" style="padding: 10px 20px; font-size: 14px; font-weight: 500; color: rgb(255, 255, 255); text-shadow: none; background: transparent; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.5); user-select: none; font-family: Inter, ui-sans-serif, system-ui, -apple-system; box-shadow: none; text-transform: none;" onmouseover="this.style.color='#ffffff'; this.style.background='#10b981'; this.style.border='1px solid #10b981'; this.style.textShadow='0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff'; this.style.boxShadow='0 0 5px #10b981, 0 0 20px #10b981, 0 0 50px #10b981, 0 0 100px #10b981'" onmouseout="this.style.color='#ffffff'; this.style.background='transparent'; this.style.border='1px solid rgba(255, 255, 255, 0.5)'; this.style.textShadow='none'; this.style.boxShadow='none'">
Get Started
</a>
<a href="#" class="inline-flex items-center justify-center transition overflow-hidden text-sm font-medium text-black bg-white rounded-lg" style="padding: 10px 20px;">
View Documentation
</a>
</div>
</div>
<!-- Right content - Visual element -->
<div class="relative">
<section class="col-span-12 lg:col-span-5 md:pt-14 flex [animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll pt-14 items-center justify-center" style="animation: gentleFloat 6s ease-in-out infinite;">
<style>
@keyframes gentleFloat {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
}
</style>
<div class="relative w-full max-w-lg">
<!-- ✨ Clean Floating Popover (Top Right) -->
<div class="absolute -top-14 -right-4 sm:w-[280px] bg-[#1C1C1E] border border-white/10 rounded-xl shadow-lg p-4 z-20">
<div class="flex items-start justify-between gap-3">
<div class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 ring-1 ring-white/10 shrink-0">
<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-5 h-5 text-white">
<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="3.29 7 12 12 20.71 7" class=""></polyline>
<line x1="12" y1="22" x2="12" y2="12" class=""></line>
</svg>
</div>
<button aria-label="Dismiss" class="text-white/70 hover:text-white transition-colors p-1 -mr-1 rounded-md">
<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-5 h-5">
<path d="M18 6 6 18" class=""></path>
<path d="m6 6 12 12" class=""></path>
</svg>
</button>
</div>
<div class="mt-3">
<h4 class="text-white text-base font-semibold tracking-tight">
Deploy Status
</h4>
<p class="text-slate-300 text-sm mt-1">
Your application is building and will be live soon.
</p>
</div>
<!-- Pointer triangle -->
<div class="absolute right-6 -bottom-2 w-4 h-4 rotate-45 bg-[#1C1C1E] border-r border-b border-white/10"></div>
</div>
<!-- 🚀 Deploy Card -->
<div class="group overflow-hidden transition-all duration-500 hover:border-emerald-500/40 hover:ring-emerald-500/30 bg-[#0F0F11] border-white/10 border ring-white/5 ring-1 rounded-2xl relative">
<!-- Background accents -->
<div class="absolute -bottom-12 -right-12 h-48 w-48 rounded-full bg-emerald-500/10 blur-3xl transition-all duration-700 group-hover:scale-110"></div>
<div class="p-6">
<div class="flex mb-4 items-start justify-between">
<span class="inline-flex items-center gap-1.5 text-xs font-medium text-white bg-white/5 ring-1 ring-white/10 rounded-lg pt-1 pr-2.5 pb-1 pl-2.5">
<div class="h-1.5 w-1.5 animate-pulse bg-emerald-400 rounded-full"></div>
Building
</span>
<div class="flex items-center gap-2">
<span class="text-xs text-slate-400">2m 14s</span>
</div>
</div>
<h3 class="text-lg font-semibold tracking-tight text-white mb-3">
Global Deployment
</h3>
<p class="leading-relaxed text-sm text-slate-300 mb-4">
Your app is being deployed to 200+ edge locations
worldwide. Lightning-fast performance guaranteed.
</p>
<!-- Deploy Progress -->
<div class="bg-[#1C1C1E] rounded-xl p-4 mb-4 ring-1 ring-white/10">
<div class="space-y-3">
<!-- Step 1 -->
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500 flex items-center justify-center mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-white">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<span class="text-sm text-white">
Build completed
</span>
<span class="text-xs text-slate-400">
1m 20s
</span>
</div>
<p class="text-xs text-slate-500 mt-0.5">
All dependencies installed and optimized
</p>
</div>
</div>
<!-- Step 2 -->
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500/20 ring-2 ring-emerald-500 flex items-center justify-center mt-0.5">
<div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<span class="text-sm text-white">
Deploying to edge
</span>
<span class="text-xs text-emerald-400">
In progress
</span>
</div>
<p class="text-xs text-slate-500 mt-0.5">
Pushing to global CDN network
</p>
</div>
</div>
<!-- Step 3 -->
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-5 h-5 rounded-full bg-white/5 ring-1 ring-white/10 flex items-center justify-center mt-0.5"></div>
<div class="flex-1">
<div class="flex items-center justify-between">
<span class="text-sm text-slate-400">
SSL certificates
</span>
<span class="text-xs text-slate-500">
Pending
</span>
</div>
<p class="text-xs text-slate-500 mt-0.5">
Automatic HTTPS provisioning
</p>
</div>
</div>
</div>
</div>
<!-- Progress bar -->
<div class="mb-4">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-400">
Overall Progress
</span>
<span class="text-xs text-emerald-400 font-medium">
68%
</span>
</div>
<div class="w-full h-2 rounded-full bg-white/5 ring-1 ring-white/10 overflow-hidden">
<div class="h-full w-[68%] rounded-full bg-gradient-to-r from-emerald-500 to-emerald-400"></div>
</div>
</div>
<!-- Action buttons -->
<div class="flex items-center gap-2">
<button class="flex-1 bg-emerald-600 hover:bg-emerald-700 transition-colors text-white text-sm font-medium px-4 py-2 rounded-lg flex items-center justify-center gap-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" 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>
View Live
</button>
<button class="bg-white/5 hover:bg-white/10 transition-colors text-white text-sm font-medium w-10 h-10 rounded-lg flex items-center justify-center ring-1 ring-white/10">
<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" 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>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Subheading -->
<!-- CTAs -->
</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>