All Prompts
All Prompts
herolandingsectiontailwindresponsivectaanimationdeveloper
Responsive Hero Section with Code & CTA Buttons
Адаптивный Hero-раздел для лендингов: заголовок, описание, CTA, анимированные карточки кода. Tailwind CSS. Идеально для SaaS и инструментов разработчика.
Prompt
<section class="sm:p-8 max-w-7xl mt-24 mr-auto mb-24 ml-auto pt-8 pr-4 pb-8 pl-4" data-element-locator="html > body:nth-of-type(1) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > section:nth-of-type(1) > section:nth-of-type(1)">
<div class="relative overflow-hidden rounded-3xl bg-neutral-900/60 border border-white/10">
<div class="relative grid grid-cols-1 lg:grid-cols-2 gap-0">
<!-- Left: Text Content -->
<div class="p-6 sm:p-10 lg:p-12 flex flex-col justify-center order-2 lg:order-1">
<h2 class="sm:text-5xl lg:text-6xl leading-[1.05] text-4xl text-white tracking-tight mt-6 font-geist font-light" style="">
Write CLI tools that feel native
</h2>
<p class="sm:mt-6 sm:text-base text-sm text-neutral-300 max-w-[48ch] mt-6 font-geist">
Intuitive API that gets out of your way. Focus on building features, not boilerplate.
</p>
<div class="flex flex-col sm:flex-row sm:gap-4 sm:mt-10 md:mt-12 md:mb-12 mt-10 mb-12 gap-x-3 gap-y-3 items-center justify-center">
<a href="/docs" class="styled-button inline-flex items-center justify-center transition sm:text-base sm:w-auto animate-hero-element animate-cta-1 text-sm font-medium text-white w-full font-geist" style="position: relative; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 500; color: rgb(255, 255, 255); background: linear-gradient(rgb(23, 23, 23), rgb(36, 36, 36)); border-radius: 9999px; cursor: pointer; box-shadow: rgb(0, 0, 0) 0px 2px 4px, rgba(0, 0, 0, 0.4) 0px 10px 20px; border: 1px solid rgb(41, 41, 41);">
<style>
.styled-button::before {
content: "";
position: absolute;
top: -2px;
right: -1px;
bottom: -1px;
left: -1px;
background: linear-gradient(to bottom, #292929, #000000);
z-index: -1;
border-radius: 9999px;
transition: all 0.2s ease;
opacity: 1;
}
.styled-button:hover {
background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
box-shadow: 0 4px 8px rgba(0, 0, 0, 1), 0 15px 30px rgba(0, 0, 0, 0.6);
}
.styled-button:hover::before {
background: linear-gradient(to bottom, #3a3a3a, #1a1a1a);
}
</style>
Read the Docs
<div class="ml-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" class="">
<path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path>
</svg>
</div>
</a>
<a href="/examples" class="inline-flex items-center justify-center gap-2 hover:bg-white/10 hover:text-white transition sm:text-base sm:px-6 sm:py-3 sm:w-auto animate-hero-element animate-cta-2 text-sm font-medium text-white/70 bg-white/5 w-full h-14 ring-white/10 ring-1 rounded-full pt-2 pr-4 pb-2 pl-4 shadow-sm backdrop-blur font-geist">
View Examples
</a>
</div>
</div>
<!-- Right: Hero Visual with Code & Preview -->
<div class="overflow-hidden lg:border-t-0 lg:border-l order-1 lg:order-2 sm:p-10 lg:p-12 flex bg-neutral-950 border-white/10 border-t px-6 py-6 relative items-center justify-center" data-element-locator="html > body:nth-of-type(1) > header:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > section:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2)">
<div class="relative w-full max-w-lg">
<!-- Floating Code Snippet -->
<div class="relative z-10 transform -rotate-2 hover:rotate-0 transition-transform duration-500">
<div class="overflow-hidden bg-neutral-900 ring-white/10 ring-1 rounded-2xl shadow-2xl">
<div class="flex bg-neutral-900/80 border-white/10 border-b pt-2 pr-3 pb-2 pl-3 items-center justify-between">
<div class="flex items-center gap-1.5">
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
<div class="w-3 h-3 rounded-full bg-emerald-500/80"></div>
</div>
<span class="text-[10px] text-neutral-400 font-geist">cli.ts</span>
</div>
<div class="p-4">
<div class="font-geist-mono text-[11px] sm:text-[12px] leading-relaxed text-neutral-300 space-y-1">
<div class="flex gap-3">
<span class="text-neutral-600 select-none w-4 text-right font-geist">1</span>
<span><span class="text-purple-400 font-geist">import</span> <span class="text-white font-geist">{ cli }</span> <span class="text-purple-400 font-geist">from</span> <span class="text-amber-400 font-geist">'vibecli'</span></span>
</div>
<div class="flex gap-3">
<span class="text-neutral-600 select-none w-4 text-right font-geist">2</span>
<span></span>
</div>
<div class="flex gap-3">
<span class="text-neutral-600 select-none w-4 text-right font-geist">3</span>
<span class=""><span class="text-blue-400 font-geist">cli</span><span class="text-white font-geist">.</span><span class="text-pink-400 font-geist">command</span><span class="text-white font-geist">(</span><span class="text-amber-400 font-geist">'init'</span><span class="text-white font-geist">)</span></span>
</div>
<div class="flex gap-3">
<span class="text-neutral-600 select-none w-4 text-right font-geist">4</span>
<span class=""><span class="text-white font-geist"> .</span><span class="text-pink-400 font-geist">description</span><span class="text-white font-geist">(</span><span class="text-amber-400 font-geist">'Initialize project'</span><span class="text-white font-geist">)</span></span>
</div>
<div class="flex gap-3">
<span class="text-neutral-600 select-none w-4 text-right font-geist">5</span>
<span class=""><span class="text-white font-geist"> .</span><span class="text-pink-400 font-geist">action</span><span class="text-white font-geist">(</span><span class="text-purple-400 font-geist">async</span> <span class="text-white font-geist">() => {</span></span>
</div>
<div class="flex gap-3">
<span class="text-neutral-600 select-none w-4 text-right font-geist">6</span>
<span><span class="text-white"> </span><span class="text-blue-400 font-geist">console</span><span class="text-white font-geist">.</span><span class="text-pink-400 font-geist">log</span><span class="text-white font-geist">(</span><span class="text-amber-400 font-geist">'✨ Done!'</span><span class="text-white font-geist">)</span></span>
</div>
<div class="flex gap-3">
<span class="text-neutral-600 select-none w-4 text-right font-geist">7</span>
<span><span class="text-white font-geist"> })</span></span>
</div>
</div>
</div>
</div>
</div>
<!-- Floating Preview Card -->
<div class="absolute -bottom-8 -right-8 z-20 transform rotate-3 hover:rotate-0 transition-transform duration-500">
<div class="ring-inset overflow-hidden bg-neutral-900 border-white/10 border ring-white/5 ring-1 rounded-2xl shadow-2xl" style="width: 280px;">
<div class="h-40 relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fcac6ae1-fb6e-4c48-b5a9-39c16f529be7_800w.jpg" alt="" class="opacity-70 w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0">
<div class="bg-gradient-to-tr from-indigo-600/30 to-pink-500/20 mix-blend-overlay absolute top-0 right-0 bottom-0 left-0"></div>
<!-- Floating HUD -->
<div class="absolute right-3 top-3 w-32 rounded-xl bg-neutral-900/80 border border-white/10 backdrop-blur p-2.5 shadow-lg">
<div class="flex items-center gap-2 text-[10px] font-medium text-neutral-200">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400 flex-shrink-0">
<polyline points="4 17 10 11 4 5" class=""></polyline>
<line x1="12" y1="19" x2="20" y2="19" class=""></line>
</svg>
<span class="truncate font-geist">CLI Running</span>
</div>
<div class="mt-2 space-y-1">
<div class="h-1 w-full max-w-20 rounded bg-emerald-500/40"></div>
<div class="h-1 w-full max-w-16 rounded bg-white/20"></div>
<div class="h-1 w-full max-w-14 rounded bg-white/10"></div>
</div>
</div>
<!-- Dock Controls -->
<div class="absolute left-1/2 -translate-x-1/2 bottom-3 flex items-center gap-1.5">
<div class="rounded-lg bg-neutral-900/80 border border-white/10 backdrop-blur px-2 py-1 flex items-center gap-1">
<span class="text-[9px] text-neutral-300 rounded bg-white/5 border border-white/10 px-1.5 py-0.5 font-geist">⌘</span>
<span class="text-[9px] text-neutral-400 font-geist">K</span>
</div>
<div class="rounded-lg bg-neutral-900/80 border border-white/10 backdrop-blur px-1.5 py-1 flex items-center gap-0.5">
<span class="text-[9px] text-neutral-300 rounded bg-white/5 border border-white/10 px-1.5 py-0.5 font-geist">↑</span>
<span class="text-[9px] text-neutral-300 rounded bg-white/5 border border-white/10 px-1.5 py-0.5 font-geist">↓</span>
</div>
</div>
</div>
<div class="flex gap-2 text-[10px] text-neutral-400 border-white/10 border-t pt-2 pr-3 pb-2 pl-3 items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400">
<polyline points="20 6 9 17 4 12" class=""></polyline>
</svg>
<span class="truncate font-geist">Interactive CLI interface</span>
</div>
</div>
</div>
<!-- Decorative Elements -->
<div class="absolute -top-4 -left-4 w-24 h-24 bg-gradient-to-br from-indigo-500/20 to-purple-600/20 rounded-full blur-2xl"></div>
<div class="absolute -bottom-4 -right-4 w-32 h-32 bg-gradient-to-br from-pink-500/20 to-orange-600/20 rounded-full blur-2xl"></div>
</div>
</div>
</div>
</div>
</section>