<section class="flex flex-col items-center justify-center text-black p-4">
    <div class="max-w-md w-full bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl p-8">
      <div class="text-center">
        <img src="{{ asset('assets/images/gif/404.svg') }}" alt="Not Found" class="w-84 h-84 mx-auto">
        <div class="w-16 h-1 bg-white mx-auto mb-6 rounded-full"></div>
        <h2 class="text-2xl font-semibold mb-4">Halaman tidak ditemukan</h2>
        <p class="mb-8">Halaman yang Anda cari tidak tersedia.</p>

        <a href="#" class="inline-block bg-green-500 text-white font-medium px-6 py-3 rounded-lg hover:bg-opacity-90 transition-all duration-300 transform hover:-translate-y-1">
          Kembali ke Beranda
        </a>
      </div>
    </div>
  </section>
