<section id="hero" 
  class="relative bg-gradient-to-r from-blue-600 via-blue-500 to-indigo-600 text-white py-24 text-center overflow-hidden">
  
  <!-- Background pattern -->
  <div class="absolute inset-0 bg-[url('https://www.toptal.com/designers/subtlepatterns/patterns/memphis-mini.png')] opacity-10"></div>

  <!-- Content -->
  <div class="relative z-10 max-w-3xl mx-auto px-6 h-screen flex flex-col justify-center">
    <h2 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight drop-shadow-lg animate-fade-in">
      Selamat Datang di <span class="text-yellow-300">AMPJ Yogyakarta</span>
    </h2>
    <p class="text-lg md:text-xl mb-8 opacity-90 animate-slide-up">
      Kampus unggulan dengan visi membangun generasi masa depan ✨
    </p>
    <a href="#registration" 
       class="inline-block w-fit mx-auto bg-yellow-400 text-blue-900 font-semibold px-8 py-4 rounded-full shadow-lg transform transition hover:scale-105 hover:bg-yellow-300 hover:shadow-2xl">
      🚀 Daftar Sekarang
    </a>
  </div>
</section>
<?php /**PATH D:\ampj\laravel\ampj-web\resources\views/sections/hero.blade.php ENDPATH**/ ?>