All Prompts
All Prompts
herocode-editoranimatedtailwindresponsivelandingshowcasescrollingsection
Animated Code Showcase Section
Адаптивный Hero-раздел с анимированным редактором кода. Идеален для лендингов SaaS и dev-тулов для демонстрации функций.
Prompt
<section class="z-10 sm:px-6 lg:px-8 sm:mt-12 md:mt-16 lg:mt-20 xl:mt-24 text-center max-w-7xl mt-12 mr-auto ml-auto pr-4 pl-4 relative space-y-8">
<div class="text-center mb-12">
<p class="uppercase [animation:fadeSlideIn_1s_ease-out_0.1s_both] animate-on-scroll text-xs text-neutral-400 tracking-[0.18em] font-geist mb-4">See It In Action</p>
<h2 class="sm:text-5xl md:text-6xl [animation:fadeSlideIn_1s_ease-out_0.2s_both] animate-on-scroll text-4xl font-light text-white tracking-tight font-geist mb-4">
Experience the power
</h2>
<p class="sm:text-lg [animation:fadeSlideIn_1s_ease-out_0.3s_both] animate-on-scroll text-base text-neutral-300 font-geist max-w-2xl mr-auto ml-auto">
Watch VibeCLI handle complex workflows with elegant prompts and instant feedback
</p>
</div>
<div class="sm:p-5 [animation:fadeSlideIn_1s_ease-out_0.4s_both] animate-on-scroll pt-4 pr-4 pb-4 pl-4 space-y-4">
<!-- Code Editor Window -->
<div class="relative rounded-xl ring-1 ring-inset ring-white/5 bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 overflow-hidden">
<!-- Header -->
<div class="flex items-center justify-between px-3 py-2 border-b border-white/10 bg-neutral-900/80">
<div class="flex items-center gap-1.5 text-neutral-300">
<button class="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/5">
<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="h-3.5 w-3.5"><path d="m15 18-6-6 6-6" class=""></path></svg>
</button>
<button class="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/5">
<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="h-3.5 w-3.5"><path d="m9 18 6-6-6-6" class=""></path></svg>
</button>
</div>
<div class="flex-1 px-3">
<div class="mx-auto max-w-xs sm:max-w-sm rounded-md bg-neutral-800/60 px-3 py-1 text-center text-[10px] sm:text-xs text-neutral-400 ring-1 ring-white/5 font-geist-mono">
vibecli.ts</div>
</div>
<div class="flex items-center gap-1.5 text-neutral-400">
<button class="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/5">
<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="h-3.5 w-3.5"><path d="M5 12h14" class=""></path></svg>
</button>
<button class="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/5">
<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="h-3.5 w-3.5"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect></svg>
</button>
<button class="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/5">
<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="h-3.5 w-3.5"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
</button>
</div>
</div>
<!-- Body -->
<div class="grid grid-cols-[42px_1fr]">
<!-- Sidebar -->
<aside class="hidden sm:flex flex-col items-center gap-3 py-4 border-r border-white/10">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10 text-neutral-300">
<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="h-4 w-4"><path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="m5 12-3 3 3 3" class=""></path><path d="m9 18 3-3-3-3" class=""></path></svg>
</span>
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10 text-neutral-300">
<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="h-4 w-4"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
</span>
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/5 ring-1 ring-white/10 text-neutral-300">
<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="h-4 w-4"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</span>
</aside>
<!-- Code -->
<div class="p-4 sm:p-5">
<div class="relative ring-inset sm:p-4 overflow-hidden bg-black/40 ring-white/10 ring-1 rounded-lg pt-3 pr-3 pb-3 pl-3" style="height: 320px;">
<div class="absolute inset-x-0 top-0 h-10 bg-gradient-to-b from-white/5 to-transparent pointer-events-none z-10">
</div>
<!-- Scrolling Code Container -->
<div class="overflow-hidden h-full relative">
<div class="font-geist-mono text-[12px] sm:text-[13px] leading-relaxed" style="animation: smoothCodeScroll 20s linear infinite;">
<!-- Original Code Lines -->
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">1</span>
<span class=""><span class="text-purple-400">import</span> <span class="text-white">{ cli }</span>
<span class="text-purple-400">from</span> <span class="text-emerald-400">'vibecli'</span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">2</span>
<span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">3</span>
<span class="whitespace-pre"><span class="text-blue-400">cli</span>.<span class="text-pink-400">command</span>(<span class="text-emerald-400">'init'</span>)</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">4</span>
<span class="whitespace-pre"> .<span class="text-pink-400">description</span>(<span class="text-emerald-400">'Initialize project'</span>)</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">5</span>
<span class="whitespace-pre"> .<span class="text-pink-400">action</span>(<span class="text-purple-400">async</span>
() => {</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">6</span>
<span class="whitespace-pre"> <span class="text-blue-400">console</span>.<span class="text-pink-400">log</span>(<span class="text-emerald-400">'✨ Done!'</span>)</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">7</span>
<span class="whitespace-pre"> })</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">8</span>
<span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">9</span>
<span class=""><span class="text-purple-400">cli</span>.<span class="text-pink-400">parse</span>(<span class="text-blue-400">process</span>.argv)</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">10</span>
<span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">11</span>
<span class="whitespace-pre"><span class="text-neutral-500">// Full TypeScript support</span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">12</span>
<span class="whitespace-pre"><span class="text-neutral-500">// Auto validation with Zod</span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">13</span>
<span class="whitespace-pre"><span class="text-neutral-500">// Beautiful prompts built-in</span></span>
</div>
<!-- Additional code lines for seamless loop -->
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">14</span>
<span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">15</span>
<span class="whitespace-pre"><span class="text-purple-400">const</span>
<span class="text-white">options</span> = <span class="text-purple-400">await</span>
<span class="text-blue-400">cli</span>.<span class="text-pink-400">prompt</span>({</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">16</span>
<span class="whitespace-pre"> name: { <span class="text-blue-400">type</span>:
<span class="text-emerald-400">'text'</span> },</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">17</span>
<span class="whitespace-pre"> features: { <span class="text-blue-400">type</span>:
<span class="text-emerald-400">'multiselect'</span> }</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">18</span>
<span class="whitespace-pre">})</span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">19</span>
<span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">20</span>
<span class="whitespace-pre"><span class="text-neutral-500">// Lightning fast CLI framework</span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">21</span>
<span class="whitespace-pre"><span class="text-neutral-500">// Zero config, just works</span></span>
</div>
<div class="flex gap-4">
<span class="w-6 text-right text-neutral-500 select-none">22</span>
<span></span>
</div>
</div>
</div>
<div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-white/5 to-transparent pointer-events-none z-10">
</div>
<style>
@keyframes smoothCodeScroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
/* Pause animation on hover */
.relative:hover [style*="smoothCodeScroll"] {
animation-play-state: paused;
}
</style>
</div>
</div>
</div>
</div>
</div>
<!-- Feature Highlights Below -->
<div class="grid grid-cols-1 sm:grid-cols-3 [animation:fadeSlideIn_1s_ease-out_0.5s_both] animate-on-scroll max-w-4xl mt-16 mr-auto ml-auto gap-x-6 gap-y-6">
<div class="text-center">
<div class="w-12 h-12 rounded-full bg-indigo-500/10 ring-1 ring-indigo-500/30 flex items-center justify-center mx-auto mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-indigo-400">
<rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
<path d="M8 12h8" class=""></path>
<path d="M12 8v8" class=""></path>
</svg>
</div>
<p class="text-sm font-medium text-white mb-1 font-geist">Interactive Prompts</p>
<p class="text-xs text-neutral-400 font-geist">Beautiful CLI interfaces</p>
</div>
<div class="text-center">
<div class="w-12 h-12 rounded-full bg-emerald-500/10 ring-1 ring-emerald-500/30 flex items-center justify-center mx-auto mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-emerald-400">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" class=""></path>
<polyline points="22 4 12 14.01 9 11.01" class=""></polyline>
</svg>
</div>
<p class="text-sm font-medium text-white mb-1 font-geist">Auto Validation</p>
<p class="text-xs text-neutral-400 font-geist">Built-in error handling</p>
</div>
<div class="text-center">
<div class="w-12 h-12 rounded-full bg-pink-500/10 ring-1 ring-pink-500/30 flex items-center justify-center mx-auto mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-pink-400">
<polyline points="16 18 22 12 16 6" class=""></polyline>
<polyline points="8 6 2 12 8 18" class=""></polyline>
</svg>
</div>
<p class="text-sm font-medium text-white mb-1 font-geist">Full Type Safety</p>
<p class="text-xs text-neutral-400 font-geist">TypeScript first</p>
</div>
</div>
</section>