All Prompts
All Prompts

hero-sectionbannertailwindresponsivectalanding-pagemarketinggrid
Responsive Hero Banner with Headline, Image and CTAs
Адаптивный Hero Banner для лендингов: заголовок, текст, 2 CTA, изображение. Tailwind CSS. Идеально для маркетинговых сайтов.
Prompt
<section class="relative overflow-hidden">
<div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pt-16 pr-4 pb-16 pl-4">
<div class="grid items-center gap-10 md:grid-cols-2">
<div class="">
<h2 class="sm:text-4xl md:text-5xl text-3xl font-geist tracking-tighter" style="">Creative that converts, data that guides.</h2>
<p class="mt-4 text-base text-white/70 font-geist">Our experiments compound over time. Transparent reporting, rapid iteration, and creative rigor — all focused on profitable outcomes.</p>
<div class="mt-6 flex items-center gap-3">
<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium backdrop-blur hover:bg-white/10 font-geist">
<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="file-text" class="lucide lucide-file-text h-4 w-4"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="M10 9H8" class=""></path><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path></svg>
See case studies
</a>
<a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-black font-geist bg-emerald-500 rounded-lg pt-2 pr-4 pb-2 pl-4">
Schedule intro
</a>
</div>
</div>
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3a12feac-ae63-41dc-a265-adcc248c890a_800w.jpg" alt="Mountain minimal" class="aspect-[4/3] w-full rounded-2xl border border-white/10 object-cover" style="">
<div class="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-white/10"></div>
</div>
</div>
</div>
</section>