Responsive CTA Banner with Dual Action Buttons

<div class="ring-1 ring-white/10 md:p-10 flex flex-col md:flex-row gap-6 rounded-2xl pt-6 pr-6 pb-6 pl-6 items-center justify-between">
          <div class="">
            <h4 class="text-xl md:text-2xl font-semibold tracking-tight text-white">Ready to replace your auth backlog?</h4>
            <p class="mt-2 text-white/70">Start free. Upgrade when you scale. No lock‑in.</p>
          </div>
          <div class="flex gap-3">
            <a href="#" class="inline-flex items-center justify-center gap-2 rounded-lg bg-white text-[#0b1020] px-5 py-3 text-sm font-medium hover:bg-white/90 transition">
              <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="rocket" class="lucide lucide-rocket h-4 w-4"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg>
              Create project
            </a>
            <a href="#" class="inline-flex items-center justify-center gap-2 rounded-lg bg-white/5 px-5 py-3 text-sm font-medium ring-1 ring-white/10 hover:bg-white/10 transition">
              <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="book-open" class="lucide lucide-book-open h-4 w-4"><path d="M12 7v14"></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"></path></svg>
              Read docs
            </a>
          </div>
        </div>