@section('title', "ZEINER | Cursos")
<div>
    <div class="min-h-screen flex flex-col">

    <!-- Cabeçalho -->
    <x-home.header />

    <!-- Conteúdo -->
    <main class="flex-1 px-10 py-16">
      <div class="max-w-7xl mx-auto">

        <!-- Grid de cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">

          <!-- Card -->
          <div class="cursor-pointer bg-gray-800 rounded-2xl shadow-md hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-700">
            <img src="{{ asset('imgs/1.avif') }}"
                 alt="Curso Web"
                 class="h-40 w-full object-cover">
            <div class="p-5">
              <h2 class="text-lg font-semibold text-green-400">Programação Web</h2>
              <p class="text-gray-300 text-sm mt-2">Aprende HTML, CSS, JavaScript e PHP com projectos reais.</p>
              <div class="flex justify-between items-center mt-4">
                <span class="text-blue-400  text-2xl">25.000 Kz</span>
                <button class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-1.5 px-4 rounded-lg">inscrever-se</button>
              </div>
            </div>
          </div>

          <!-- Card -->
          <div class="cursor-pointer bg-gray-800 rounded-2xl shadow-md hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-700">
            <img src="{{ asset('imgs/2.avif') }}"
                 alt="Laravel"
                 class="h-40 w-full object-cover">
            <div class="p-5">
              <h2 class="text-lg font-semibold text-green-400">Laravel & Livewire</h2>
              <p class="text-gray-300 text-sm mt-2">Cria aplicações modernas com Laravel, Livewire e Alpine.js.</p>
              <div class="flex justify-between items-center mt-4">
                <span class="text-blue-400  text-2xl">30.000 Kz</span>
                <button class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-1.5 px-4 rounded-lg">inscrever-se</button>
              </div>
            </div>
          </div>

          <!-- Card -->
          <div class="cursor-pointer bg-gray-800 rounded-2xl shadow-md hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-700">
            <img src="{{ asset('imgs/3.avif') }}"
                 alt="Banco de Dados"
                 class="h-40 w-full object-cover">
            <div class="p-5">
              <h2 class="text-lg font-semibold text-green-400">Banco de Dados MySQL</h2>
              <p class="text-gray-300 text-sm mt-2">Aprende modelagem, consultas e integração com backends modernos.</p>
              <div class="flex justify-between items-center mt-4">
                <span class="text-blue-400 text-2xl ">20.000 Kz</span>
                <button class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-1.5 px-4 rounded-lg">inscrever-se</button>
              </div>
            </div>
          </div>

          <!-- Card -->
          <div class="cursor-pointer bg-gray-800 rounded-2xl shadow-md hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-700">
            <img src="{{ asset('imgs/1.avif') }}"
                 alt="Design UI/UX"
                 class="h-40 w-full object-cover">
            <div class="p-5">
              <h2 class="text-lg font-semibold text-green-400">Design UI/UX</h2>
              <p class="text-gray-300 text-sm mt-2">Domina o design de interfaces e UX com Figma e prototipagem.</p>
              <div class="flex justify-between items-center mt-4">
                <span class="text-blue-400  text-2xl">28.000 Kz</span>
                <button class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-1.5 px-4 rounded-lg">inscrever-se</button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </main>

    <!-- Rodapé -->
   <x-home.footer />

  </div>

</div>
