Animated Navigation Bar with CTA Buttons

<div
  class="flex pt-5 pb-5 items-center justify-between [animation:fadeSlideIn_0.5s_ease-out_0.1s_both] animate-on-scroll animate">
  <a href="#"
    class="inline-flex items-center justify-center bg-center w-[140px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/26a2e18f-1e9a-4273-9f82-f86ac5cc7d5b_1600w.png)] bg-cover rounded invert"></a>
  <nav class="hidden md:flex items-center gap-8 text-sm text-slate-600">
    <a href="#" class="hover:text-slate-900 transition">Product</a>
    <a href="#" class="hover:text-slate-900 transition">Solutions</a>
    <a href="#" class="hover:text-slate-900 transition">Pricing</a>
    <a href="#" class="hover:text-slate-900 transition">Docs</a>
  </nav>
  <div class="flex items-center gap-3">
    <button class="hidden sm:inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 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="log-in" class="lucide lucide-log-in h-4 w-4"><path d="m10 17 5-5-5-5" class=""></path><path d="M15 12H3" class=""></path><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" class=""></path></svg>
              Sign in
            </button>
    <button class="inline-flex hover:bg-black transition text-sm font-medium text-white bg-slate-900 rounded-lg pt-2.5 pr-4 pb-2.5 pl-4 gap-x-2 gap-y-2 items-center">
              <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="calendar" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
              Get started
            </button>
  </div>
</div>