All Prompts
All Prompts
feature-sectionstepsterminalctatailwindanimatedresponsivelanding-pagesection
Three-Step Deployment Section with Terminal Demo
Секция "Как это работает" с 3 шагами, демо терминала и CTA. Идеально для лендингов SaaS и dev-tools.
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-16 text-center mr-auto ml-auto pt-16 pr-8 pb-16 pl-8 relative items-center justify-center">
<!-- Section Header -->
<div class="mb-16 text-center max-w-3xl mx-auto">
<div class="inline-flex text-[13px] [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll 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">
02
</span>
<span class="text-emerald-300/40">/</span>
<span class="uppercase text-[11px] text-emerald-200/90 tracking-widest">
HOW IT WORKS
</span>
</div>
<h2 class="sm:text-4xl lg:text-5xl [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll text-3xl font-light text-white tracking-tight font-geist mb-4">
Deploy in three simple steps
</h2>
<p class="sm:text-lg leading-relaxed [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll text-base text-zinc-400">
From code to production in seconds. Our streamlined workflow
makes deployment effortless.
</p>
</div>
<!-- Steps Grid -->
<div class="grid lg:grid-cols-3 lg:bg-neutral-950 lg:px-4 lg:py-4 border-dashed [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll w-full max-w-6xl border-[#ffffff]/10 border mr-auto ml-auto pt-4 pr-4 pb-4 pl-4 gap-x-8 gap-y-12">
<!-- Step 1 -->
<div class="border-dashed border-0 rounded-none pt-6 pr-6 pb-6 pl-6 relative">
<div class="flex flex-col items-center text-center">
<!-- Number Badge -->
<div class="relative mb-6">
<div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-emerald-500/5 ring-1 ring-emerald-500/20 backdrop-blur-sm flex items-center justify-center">
<span class="text-3xl font-light text-emerald-300 font-geist">
01
</span>
</div>
<!-- Connecting Line -->
<div class="hidden lg:block absolute top-10 left-full w-full h-px bg-gradient-to-r from-emerald-500/30 to-transparent"></div>
</div>
<!-- Icon -->
<!-- Content -->
<h3 class="text-xl font-medium text-white mb-3 font-geist tracking-tight">
Write Your Code
</h3>
<p class="text-sm text-zinc-400 leading-relaxed">
Build your application using your favorite framework and
tools. No special configuration needed.
</p>
</div>
</div>
<!-- Step 2 -->
<div class="border-dashed border-0 rounded-none pt-6 pr-6 pb-6 pl-6 relative">
<div class="flex flex-col text-center items-center">
<!-- Number Badge -->
<div class="relative mb-6">
<div class="flex bg-gradient-to-br from-emerald-500/20 to-emerald-500/5 w-20 h-20 ring-emerald-500/20 ring-1 rounded-2xl backdrop-blur-sm items-center justify-center">
<span class="text-3xl font-light text-emerald-300 font-geist">
02
</span>
</div>
<!-- Connecting Line -->
<div class="hidden lg:block absolute top-10 left-full w-full h-px bg-gradient-to-r from-emerald-500/30 to-transparent"></div>
</div>
<!-- Icon -->
<!-- Content -->
<h3 class="text-xl font-medium text-white mb-3 font-geist tracking-tight">
Push to Deploy
</h3>
<p class="text-sm text-zinc-400 leading-relaxed">
Run a single command or push to Git. Our platform
automatically builds and optimizes your app.
</p>
</div>
</div>
<div class="border-dashed border-0 rounded-none pt-6 pr-6 pb-6 pl-6 relative">
<div class="flex flex-col text-center items-center">
<!-- Number Badge -->
<div class="relative mb-6">
<div class="flex bg-gradient-to-br from-emerald-500/20 to-emerald-500/5 w-20 h-20 ring-emerald-500/20 ring-1 rounded-2xl backdrop-blur-sm items-center justify-center">
<span class="text-3xl font-light text-emerald-300 font-geist">
03
</span>
</div>
<!-- Connecting Line -->
<div class="hidden lg:block absolute top-10 left-full w-full h-px bg-gradient-to-r from-emerald-500/30 to-transparent"></div>
</div>
<!-- Icon -->
<!-- Content -->
<h3 class="text-xl font-medium text-white tracking-tight font-geist mb-3">
Go Live Instantly
</h3>
<p class="leading-relaxed text-sm text-zinc-400">
Your app is deployed globally across 200+ edge locations.
Live in seconds, not minutes.
</p>
</div>
</div>
<!-- Step 3 -->
</div>
<!-- Code Example -->
<div class="mt-16 w-full max-w-3xl mx-auto">
<div class="overflow-hidden [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll bg-black/40 ring-white/10 ring-1 rounded-2xl pt-0 pr-0 pb-0 pl-0 relative">
<div class="absolute -top-10 -right-10 w-48 h-48 rounded-full bg-emerald-500/10 blur-3xl"></div>
<!-- macOS-style window chrome -->
<div class="bg-[#1C1C1E] border-white/10 border-b relative">
<div class="flex pt-3 pr-4 pb-3 pl-4 items-center justify-between">
<!-- Window controls -->
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-red-500/80 hover:bg-red-500 transition cursor-pointer"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/80 hover:bg-yellow-500 transition cursor-pointer"></div>
<div class="w-3 h-3 rounded-full bg-emerald-500/80 hover:bg-emerald-500 transition cursor-pointer"></div>
</div>
<!-- Window title -->
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<span class="text-xs text-zinc-400 font-medium">
bash — pulse deploy
</span>
</div>
<!-- Actions -->
<div class="flex items-center gap-2">
<button class="w-6 h-6 rounded-md bg-white/5 hover:bg-white/10 transition flex items-center justify-center ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-zinc-400">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" class=""></rect>
<line x1="9" y1="3" x2="9" y2="21" class=""></line>
</svg>
</button>
<button class="w-6 h-6 rounded-md bg-white/5 hover:bg-white/10 transition flex items-center justify-center ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-zinc-400">
<polyline points="4 14 10 14 10 20" class=""></polyline>
<polyline points="20 10 14 10 14 4" class=""></polyline>
<line x1="14" y1="10" x2="21" y2="3" class=""></line>
<line x1="3" y1="21" x2="10" y2="14" class=""></line>
</svg>
</button>
</div>
</div>
</div>
<!-- Terminal tabs -->
<div class="relative bg-[#0F0F11] border-b border-white/5">
<div class="flex pt-1 pr-2 pb-1 pl-2 gap-x-1 gap-y-1 items-center">
<div class="flex items-center gap-2 px-3 py-1.5 bg-white/5 rounded-t-lg">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400">
<polyline points="4 17 10 11 4 5" class=""></polyline>
<line x1="12" y1="19" x2="20" y2="19" class=""></line>
</svg>
<span class="text-xs text-zinc-300">bash</span>
<button class="ml-2 text-zinc-500 hover:text-zinc-300 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<line x1="18" y1="6" x2="6" y2="18" class=""></line>
<line x1="6" y1="6" x2="18" y2="18" class=""></line>
</svg>
</button>
</div>
<button class="px-3 py-1.5 text-zinc-500 hover:text-zinc-300 hover:bg-white/5 rounded-t-lg transition">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<line x1="12" y1="5" x2="12" y2="19" class=""></line>
<line x1="5" y1="12" x2="19" y2="12" class=""></line>
</svg>
</button>
</div>
</div>
<!-- Terminal content -->
<div class="bg-[#0F0F11] pt-6 pr-6 pb-6 pl-6 relative">
<div class="font-mono text-sm space-y-2">
<!-- Command line -->
<div class="flex items-center gap-2">
<span class="text-emerald-400">user@macbook</span>
<span class="text-zinc-500">:</span>
<span class="text-blue-400">~/projects</span>
<span class="text-zinc-500">$</span>
<span class="text-white">pulse deploy</span>
</div>
<!-- Empty line -->
<div class="h-2"></div>
<!-- Output lines with icons -->
<div class="space-y-2">
<div class="flex items-start gap-3">
<div class="w-4 h-4 rounded-full bg-blue-500/20 flex items-center justify-center mt-0.5 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400">
<polyline points="20 6 9 17 4 12" class=""></polyline>
</svg>
</div>
<div class="">
<div class="text-zinc-400">
Building your application...
</div>
<div class="text-zinc-600 text-xs mt-1">
Analyzing dependencies and optimizing build
</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-4 h-4 rounded-full bg-emerald-500/20 flex items-center justify-center mt-0.5 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400">
<polyline points="20 6 9 17 4 12" class=""></polyline>
</svg>
</div>
<div class="">
<div class="text-zinc-400">
Build complete in
<span class="text-emerald-400">1.2s</span>
</div>
<div class="text-zinc-600 text-xs mt-1">
Generated 847KB optimized bundle
</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-4 h-4 rounded-full bg-emerald-500/20 flex items-center justify-center mt-0.5 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400">
<polyline points="20 6 9 17 4 12" class=""></polyline>
</svg>
</div>
<div class="">
<div class="text-zinc-400">
Deployed to
<span class="text-emerald-400">200+</span>
locations
</div>
<div class="text-zinc-600 text-xs mt-1">
San Francisco, New York, London, Tokyo...
</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-4 h-4 rounded-full bg-emerald-500 flex items-center justify-center mt-0.5 flex-shrink-0 animate-pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-white">
<polyline points="20 6 9 17 4 12" class=""></polyline>
</svg>
</div>
<div class="">
<div class="text-white font-medium">
Live at
<a href="#" class="text-emerald-400 hover:underline">
https://your-app.pulse.dev
</a>
</div>
<div class="text-zinc-600 text-xs mt-1">
Ready to receive traffic
</div>
</div>
</div>
</div>
<!-- Empty line -->
<div class="h-2"></div>
<!-- New prompt with cursor -->
<div class="flex items-center gap-2">
<span class="text-emerald-400">user@macbook</span>
<span class="text-zinc-500">:</span>
<span class="text-blue-400">~/projects</span>
<span class="text-zinc-500">$</span>
<span class="inline-block w-2 h-4 bg-emerald-400 animate-pulse ml-1"></span>
</div>
</div>
</div>
<!-- Bottom status bar -->
<div class="relative bg-[#1C1C1E] border-t border-white/5 px-4 py-2">
<div class="flex items-center justify-between text-xs">
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
<span class="text-zinc-400">Connected</span>
</div>
<span class="text-zinc-600">|</span>
<span class="text-zinc-500">bash 5.1.8</span>
</div>
<div class="flex items-center gap-4">
<span class="text-zinc-500">Lines: 23</span>
<span class="text-zinc-600">|</span>
<span class="text-zinc-500">UTF-8</span>
</div>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div class="mt-12">
<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'">
Start Deployment Now
</a>
</div>
</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>