VibeCoderzVibeCoderz
Telegram
All Prompts
Responsive Hero Banner with Headline, Image and CTAs preview
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>
All Prompts