herosectionanimatedheadingctatailwindlandingresponsive

Hero Headline with Shimmer Effect and CTAs

Анимированный блок Hero с заголовком, подзаголовком и кнопками CTA. Идеален для лендингов, подчеркивает ценность продукта.

Live Preview

Prompt

<!-- STYLE BLOCK - Muss irgendwo auf der Seite sein (im <head> oder vor dem HTML) -->
<style>
  @keyframes shimmer {
    0%, 100% { background-position: 200% 0; }
    50% { background-position: 0% 0; }
  }
  
  .headline-shimmer {
    background: linear-gradient(90deg, #F1F5F9 0%, #F1F5F9 40%, #14B8A6 50%, #F1F5F9 60%, #F1F5F9 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s ease-in-out infinite;
  }
</style>

<!-- HERO CONTENT -->
<div class="lg:col-span-7 flex flex-col z-10 relative items-start">

  <!-- Headline (NUR EINE h1!) -->
  <h1 class="lg:text-[76px] text-5xl font-bold leading-[1.05] tracking-tight font-custom mb-6 headline-shimmer">
    Stop Guessing.<br>
    Start Knowing.
  </h1>

  <!-- Subhead -->
  <p class="text-lg max-w-xl mb-10 leading-relaxed font-custom text-neutral-400">
    Test your video ideas before you invest your time.
  </p>

  <!-- Buttons -->
  <div class="flex flex-wrap gap-4 mb-20 items-center">
    
    <!-- Primary CTA -->
    <button class="group relative flex items-center justify-center gap-2.5 rounded-full bg-gradient-to-t from-yellow-200 via-orange-400 to-orange-500 px-8 py-3 text-lg font-medium text-[#2c1306] shadow-[0_0_40px_-5px_rgba(249,115,22,0.6)] ring-1 ring-inset ring-white/40 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_60px_-5px_rgba(249,115,22,0.8)] font-custom">
      <span class="font-custom">Test Your Idea — Free</span>
    </button>

    <!-- Secondary CTA -->
    <button class="px-8 py-3 rounded-full text-lg transition-colors font-custom bg-transparent text-neutral-300 border border-neutral-700 hover:bg-white/5 hover:text-white">
      How It Works ↓
    </button>
    
  </div>
  
</div>

All Prompts