@section('title', 'Kurikulum')

@extends('Frontend.Layouts.app2')
@section('content')

<p><!-- style card kerja sama-->
<style type="text/css">.card {
        display: block;
        background-color: #f0f0f0;
        border-radius: 10px;
        padding: 15px;
        text-align: left;
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s ease;
        background-image: url("your-pattern-image-url.png"); /* Ganti dengan URL pattern background */
        background-size: cover; /* Sesuaikan pattern */
        border-bottom: 5px solid #13213c; /* Border bottom warna merah */
        text-decoration: none;
        width:250px;
      }

      .card:hover {
        background-color: #13213c; /* Warna ketika di-hover */
        cursor: pointer;
      }

      .card img {
        width: 50px;
      }

      .card .content {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        justify-items: center;
      }

      .card .content h3 {
        font-size: 18px;
        color: #13213C;
      }

      .card:hover .content h3 {
        color: #ffffff; /* Ubah warna teks saat hover */
      }

      .card .arrow {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 24px;
        color: #ffa500;
      }

      .card:hover .arrow {
        color: #ffffff; /* Warna panah saat hover */
      }

      /* Tampilan pada HP */
      @media (max-width: 768px) {
        .card-container {
          width: 100%;
          margin: 0 auto;
        }

        .card {
          padding: 10px;
          width:450px;
          max-width:100%;
        }

        .card .content h3 {
          font-size: 16px;
        }
      }
</style>
</p>
    <x-header-section-page title="Kurikulum {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}" breadcrumb-home="Home" breadcrumb-current="Kurikulum" />

    <div data-aos="fade-up" class=" flex flex-col my-6 md:my-10 px-4 md:px-20 lg:px-32 xl:px-60">
        <!-- Gambar -->
        {{-- <img src="{{ asset('./images/sambutan/petinggi.png') }}" data-aos="fade-up" class=" mb-5 w-full" alt=""> --}}

        <!-- Konten Teks -->
        <div data-aos="fade-up" class="grid grid-cols-1 md:grid-cols-3 gap-6 text-justify font-dmsans text-[14px] md:text-[16px]">
@foreach ($kurikulums as $item)
  <div>
    <a class="card" href="{{ asset('storage/kurikulumFiles/' . $item->file) }}" target="_blank">
      <img alt="kurikulum" src="{{ asset('./images/logo/logo1.png') }}" />
      <strong>{{ $item->jurusan }}</strong>
    </a>
  </div>
@endforeach


</div>

        <!-- Bagian Ajakan -->
        <div data-aos="fade-up" class="flex items-center flex-col pt-10">
            <div data-aos="fade-up" class="w-full h-[1px] bg-blue-900 my-4"></div>
            <h1 data-aos="fade-up" class="text-center font-poppins text-[20px] md:text-[30px] font-bold text-primary">DAFTAR
                SEKARANG</h1>
            <p data-aos="fade-up" class="text-center mb-5 text-[12px] md:text-[14px] lg:text-[16px]">
            {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}: Jalan Menuju Sukses dan Karier Gemilang.
Raih masa depan yang cerah dengan program studi yang relevan, jaringan profesional, dan fasilitas modern
            </p>
            <x-button url="/pendaftaran">DAFTAR SEKARANG</x-button>
        </div>
    </div>
@endsection