Responsive Landing Hero with CTAs & Social Proof

<div class="max-w-3xl mr-auto ml-auto text-center">
  <span class="text-xs uppercase tracking-wider text-blue-300/90">New: Sprint templates</span>
  <h1 class="mt-3 text-4xl sm:text-5xl lg:text-6xl leading-tight tracking-tight" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 600">
    Plan. Prioritize. Ship without friction.
  </h1>
  <p class="mt-6 text-lg text-gray-300 max-w-xl mx-auto">
    ArcTask keeps teams aligned with clean boards, fast capture, and
    clear progress—so work actually ships.
  </p>
  <div class="flex flex-col sm:flex-row gap-3 mt-8 justify-center">
    <a href="#try" class="inline-flex items-center gap-2 px-5 py-3 rounded-full text-sm bg-blue-400 text-black hover:bg-blue-300 transition-all hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-blue-500">
      Start free
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
    </a>
    <a href="#product" class="inline-flex items-center gap-2 hover:bg-white/10 transition-all text-gray-100 bg-white/5 border-white/10 border rounded-full px-5 py-3 backdrop-blur-lg">
      See product
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-4 h-4"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
    </a>
  </div>

  <div class="mt-8 flex items-center gap-6 justify-center">
    <div class="flex -space-x-2">
      <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160&amp;q=80" alt="" class="w-9 h-9 rounded-full border-2 border-black object-cover">
      <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=160&amp;q=80" alt="" class="w-9 h-9 rounded-full border-2 border-black object-cover">
      <img src="https://images.unsplash.com/photo-1500649297466-74794c70acfc?w=160&amp;q=80" alt="" class="w-9 h-9 rounded-full border-2 border-black object-cover">
      <div class="w-9 h-9 rounded-full border-2 border-black bg-blue-400 flex items-center justify-center text-black text-xs">
        2k+
      </div>
    </div>
    <div>
      <p class="text-sm text-gray-100">2,000+ teams onboarded</p>
      <p class="text-sm text-gray-400">From startups to enterprise</p>
    </div>
  </div>
</div>