Responsive Hero Banner with Announcement & CTA

<div class="max-w-3xl">
          <div class="inline-flex gap-2 text-xs text-zinc-300 bg-white/5 border-white/10 border rounded-full pt-1 pr-3 pb-1 pl-3 items-center">
            
            <span class="font-medium font-sans">New: Insight Engine</span>
            <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="arrow-right" class="lucide lucide-arrow-right h-3.5 w-3.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </div>
          <h1 class="sm:text-6xl md:text-7xl text-4xl font-light tracking-tighter font-geist mt-6">Arcflow is the system for planning and shipping software</h1>
          <p class="max-w-2xl sm:text-lg text-base text-zinc-300 mt-5">
            Streamline issues, projects, and roadmaps in one fast, elegant workspace. Stay focused, automate the busywork, and ship work that matters.
          </p>

          <div class="mt-8 flex flex-col sm:flex-row items-center gap-3">
            <button type="button" role="button" aria-label="Create Account" class="group relative inline-flex shadow-[0_8px_16px_-4px_rgba(255,255,255,0.05)] hover:shadow-[0_12px_20px_-6px_rgba(255,255,255,0.1)] transition duration-300 ease-out select-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/60 transform-gpu hover:-translate-y-0.5 text-white rounded-lg pt-[1px] pr-[1px] pb-[1px] pl-[1px] items-center justify-center" style="background-image: linear-gradient(144deg,rgba(255,255,255,0.3), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2));">
  <span class="flex items-center justify-center gap-2 text-[15px] leading-none min-w-[140px] w-full h-full transition-colors duration-300 group-hover:bg-black/50 font-medium bg-black/80 rounded-lg pt-3 pr-5 pb-3 pl-5">
    <span class="">Create Account</span>
    
  </span>
</button>
            <a href="#" class="inline-flex items-center gap-2 ring-1 ring-white/5 hover:bg-white/5 text-sm font-medium text-zinc-200 rounded-md pt-2.5 pr-4 pb-2.5 pl-4">
              <span class="font-sans">Tour the product</span>
              
            </a>
          </div>
        </div>