VibeCoderzVibeCoderz
Telegram
All Prompts
Featured Hero Gallery Section preview
herogalleryimage-gridtailwindresponsivemarketing

Featured Hero Gallery Section

Секция "Hero Gallery" с полноэкранным баннером, заголовком и сеткой изображений (1-4 колонки). Адаптивный дизайн, идеален для лендингов, showcases.

Prompt

<div class="w-full max-w-7xl mt-6 mr-auto mb-24 ml-auto pt-6 pr-6 pb-6 pl-6">
  <div class="relative">
    <div class="text-sm text-white/40 font-geist">(Featured)</div>

    <div class="text-center">
      <h2 class="text-5xl sm:text-7xl lg:text-8xl leading-none text-white/90 tracking-tight uppercase font-geist font-medium" style="">CAPTURE</h2>
      <h2 class="text-5xl sm:text-7xl lg:text-8xl leading-none text-white/90 tracking-tight uppercase mt-1 font-geist font-medium" style="">THE MOMENT</h2>

      <div class="flex gap-2 text-white/40 mt-6 items-center">
        <span class="text-base font-geist">+</span>
        <div class="h-px flex-1 bg-white/10"></div>
        <span class="text-base font-geist">+</span>
      </div>

      <p class="mt-6 text-xl sm:text-2xl text-white/70 tracking-tight max-w-3xl mx-auto font-geist font-medium" style="">Professional camera equipment designed for creators who demand excellence. Every frame tells a story—make yours unforgettable.</p>
    </div>

    <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <div class="rounded-2xl overflow-hidden border border-white/10 bg-white/5">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c3c39a55-81b6-4f82-8226-b3f5996357fc_800w.jpg" alt="Editorial portrait in cool tones" class="w-full h-72 sm:h-80 lg:h-[360px] object-cover" style="">
      </div>
      <div class="rounded-2xl overflow-hidden border border-white/10 bg-white/5">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/10a964a6-0dd5-433d-81b4-77149d138bdf_800w.jpg" alt="Motion-led dance silhouette" class="w-full h-72 sm:h-80 lg:h-[360px] object-cover" style="">
      </div>
      <div class="rounded-2xl overflow-hidden border border-white/10 bg-white/5">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/53b394ef-9752-457f-aea2-87c90f69e56b_800w.jpg" alt="Purple cinematic lighting study" class="w-full h-72 sm:h-80 lg:h-[360px] object-cover" style="">
      </div>
      <div class="rounded-2xl overflow-hidden border border-white/10 bg-white/5">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a0d7cc76-a8ea-4112-a0e6-f3eb9be4d5d1_800w.jpg" alt="Fashion portrait with sunglasses" class="w-full h-72 sm:h-80 lg:h-[360px] object-cover">
      </div>
    </div>
  </div>
</div>
All Prompts