herolandingtailwindgalleryctaresponsivesaas
Pricing Hero Section with CTA & Image Gallery

Hero-секция для лендинга: заголовок, подзаголовок, кнопки CTA, галерея изображений. Адаптивный дизайн, Tailwind CSS. Идеально для SaaS.
Live Preview
Prompt

<section class="w-full max-w-6xl mr-auto ml-auto pt-6 pr-4 pb-6 pl-4">
  <div class="overflow-hidden ring-1 ring-black/5 bg-white/70 rounded-2xl mr-auto ml-auto"
    style="backdrop-filter: blur(8px);">

    <div
      class="md:p-8 ring-white/10 text-white bg-black bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f6fde9e4-e981-4763-98e7-63ee9ff8d84f_1600w.jpg)] bg-cover pt-6 pr-6 pb-6 pl-6"
      style="background-color: rgb(0, 0, 0); color: rgb(230, 238, 248); backdrop-filter: blur(8px);">
      <div class="flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
          <div
            class="flex items-center justify-center w-9 h-9 rounded-lg bg-white text-black tracking-tight text-sm font-semibold">
            OS</div>
          <div class="text-sm text-white/80">OrbitStack • Design Infrastructure</div>
        </div>
        <div class="hidden sm:flex items-center gap-2">
          <button class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 text-white hover:bg-white/10 ring-1 ring-white/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="book-open" class="lucide lucide-book-open w-4 h-4"><path d="M12 7v14" class=""></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" class=""></path></svg>
                <span class="text-sm font-medium">Docs</span>
              </button>
          <button class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="log-in" class="lucide lucide-log-in w-4 h-4"><path d="m10 17 5-5-5-5" class=""></path><path d="M15 12H3" class=""></path><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" class=""></path></svg>
                <span class="text-sm font-medium">Sign in</span>
              </button>
        </div>
      </div>

      <div class="max-w-2xl text-center mt-12 mr-auto mb-12 ml-auto">
        <h1 class="sm:text-4xl md:text-5xl text-3xl font-semibold text-white tracking-tight">Transparent, flexible
          pricing for growing teams</h1>
        <p class="text-white/70 mt-3">Choose a plan that scales from your first concept to your millionth user. Cancel
          anytime.</p>

        <!-- Segmented control -->

      </div>
    </div>
  </div>

  <!-- Mini gallery -->
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-6">
    <div class="relative">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5fb15496-02f2-468a-ad43-14c83684187f_800w.jpg" alt="Team collaboration" class="w-full h-36 object-cover rounded-xl ring-1 ring-black/5">
      <div class="absolute inset-0 bg-black/40 rounded-xl flex items-center justify-center">
        <div class="text-white text-center">
          <div class="text-sm font-medium">Team Sync</div>
          <div class="text-xs opacity-80">Real-time collaboration</div>
        </div>
      </div>
    </div>
    <div class="relative">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c4cad3af-aa22-4b54-a533-ecbea523307a_800w.jpg" alt="3D render" class="w-full h-36 object-cover rounded-xl ring-1 ring-black/5">
      <div class="absolute inset-0 bg-black/40 rounded-xl flex items-center justify-center">
        <div class="text-white text-center">
          <div class="text-sm font-medium">3D Assets</div>
          <div class="text-xs opacity-80">Premium mockups</div>
        </div>
      </div>
    </div>
    <div class="relative">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/35e1d968-74f7-4c60-aa59-4be460bf1b97_800w.jpg" alt="Minimal interface" class="w-full h-36 object-cover rounded-xl ring-1 ring-black/5">
      <div class="absolute inset-0 bg-black/40 rounded-xl flex items-center justify-center">
        <div class="text-white text-center">
          <div class="text-sm font-medium">Clean UI</div>
          <div class="text-xs opacity-80">Minimal design system</div>
        </div>
      </div>
    </div>
    <div class="relative">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/0a0b9575-3354-4375-82b0-d9c58b57c504_800w.jpg" alt="Modern workspace" class="w-full h-36 object-cover rounded-xl ring-1 ring-black/5">
      <div class="absolute inset-0 bg-black/40 rounded-xl flex items-center justify-center">
        <div class="text-white text-center">
          <div class="text-sm font-medium">Workspace</div>
          <div class="text-xs opacity-80">Modern environment</div>
        </div>
      </div>
    </div>
  </div>
</section>
All Prompts