Dual Gradient CTA Buttons with Hover Animations

<div class="text-center border-white/10 border rounded-2xl px-6 py-6">
          <div class="mx-auto max-w-2xl">
            <h2 class="text-2xl md:text-3xl font-semibold tracking-tight">Design together. Publish instantly.</h2>
            <p class="mt-2 text-sm text-slate-400">Skip handoff. Nebula connects your ideas to production with one click deploys.</p>
            <div class="mt-4 flex items-center justify-center gap-3">
              <a href="#" class="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2.5 text-xs font-medium text-black hover:bg-white/90">
                <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-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                Get started
              </a>
              <a href="#" class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-2.5 text-xs font-medium text-slate-200 hover:bg-white/10">
                <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" 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>
                Read docs
              </a>
            </div>
          </div>
        </div>