All Prompts
All Prompts
hero
Advisors Hero Section
Hero section for advisors. UI-компонент для отображения ключевой информации и привлечения внимания на сайте.
Prompt
<div
class="overflow-hidden rounded-2xl sm:rounded-[2.3rem] bg-gradient-to-b from-white/[0.03] relative py-6 px-4 sm:p-6 lg:p-10 to-white">
<!-- background -->
<div
class="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#80808018_1px,transparent_1px),linear-gradient(to_bottom,#80808018_1px,transparent_1px)] bg-[size:22px_22px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]">
</div>
<div class="pointer-events-none absolute inset-0 -z-10">
<div class="absolute -top-32 left-1/2 -translate-x-1/2 h-96 w-96 rounded-full bg-blue-500/35 blur-[120px]">
</div>
</div>
<div class="overflow-hidden mt-6 relative">
<!-- Background (Unicorn Studio) -->
<!-- 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 backdrop-blur ring-sky-600/30">
<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-700">
<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 flex-col md:pl-8 md:pr-8 md:pb-8 text-center mr-auto ml-auto 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 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 text-emerald-700">
<span class="tabular-nums text-2xl font-light text-emerald-700/80">
03
</span>
<span class="text-emerald-700/40">/</span>
<span class="uppercase text-[11px] tracking-widest text-emerald-800/90">
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 tracking-tight font-geist mb-4 text-black">
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 mb-8 text-zinc-600">
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-600">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<div class="">
<p class="text-sm font-medium xl:text-left text-black">
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-600">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<div class="">
<p class="text-sm font-medium xl:text-left text-black">
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-600">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<div class="">
<p class="text-sm font-medium xl:text-left text-black">
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 rounded-lg text-white bg-black"
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 rounded-xl shadow-lg p-4 z-20 border-black/10">
<div class="flex items-start justify-between gap-3">
<div
class="inline-flex items-center justify-center w-8 h-8 rounded-lg ring-1 shrink-0 bg-black/5 ring-black/10">
<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-black">
<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="transition-colors p-1 -mr-1 rounded-md text-black/70 hover:text-black">
<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-base font-semibold tracking-tight text-black">
Deploy Status
</h4>
<p class="text-sm mt-1 text-slate-700">
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-black/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 ring-1 rounded-2xl relative border-black/10 ring-black/5">
<!-- 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 ring-1 rounded-lg pt-1 pr-2.5 pb-1 pl-2.5 text-black bg-black/5 ring-black/10">
<div class="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-600"></div>
Building
</span>
<div class="flex items-center gap-2">
<span class="text-xs text-slate-600">2m 14s</span>
</div>
</div>
<h3 class="text-lg font-semibold tracking-tight mb-3 text-black">
Global Deployment
</h3>
<p class="leading-relaxed text-sm mb-4 text-slate-700">
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-black/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-black">
<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-black">
Build completed
</span>
<span class="text-xs text-slate-600">
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-black">
Deploying to edge
</span>
<span class="text-xs text-emerald-600">
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 ring-1 flex items-center justify-center mt-0.5 bg-black/5 ring-black/10">
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<span class="text-sm text-slate-600">
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-600">
Overall Progress
</span>
<span class="text-xs font-medium text-emerald-600">
68%
</span>
</div>
<div class="w-full h-2 rounded-full ring-1 overflow-hidden bg-black/5 ring-black/10">
<div class="h-full w-[68%] rounded-full bg-gradient-to-r from-emerald-500 to-emerald-600"></div>
</div>
</div>
<!-- Action buttons -->
<div class="flex items-center gap-2">
<button class="flex-1 transition-colors text-sm font-medium px-4 py-2 rounded-lg flex items-center justify-center gap-2 bg-emerald-400 hover:bg-emerald-300 text-black">
<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="transition-colors text-sm font-medium w-10 h-10 rounded-lg flex items-center justify-center ring-1 bg-black/5 hover:bg-black/10 text-black ring-black/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>
</div>
</div>
<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>
<!-- Secondary actions for small screens -->
<div class="flex md:hidden mt-4 items-center justify-between" style="display: none;">
<button class="rounded-xl px-4 py-2 text-sm ring-1 bg-black/5 text-zinc-800 ring-black/10">
Contact
</button>
<button class="rounded-xl px-4 py-2 text-sm ring-1 bg-black text-white ring-white/10">
Join waitlist
</button>
</div>
</div>