@extends('landing.layout')

@section('title', 'Beranda')

@section('meta')
  @include('landing.meta')
@endsection

@section('header')
  @include('landing.header-beranda')
@endsection

@push('style')
  @vite(['resources/js/landing/home/import.js'])
@endpush

@section('content')
  @include('landing.home.banner')

  <div class="z-1 container relative -mt-12">
    <div class="flex justify-center">
      <div class="rounded-xl bg-white p-6 shadow-sm shadow-slate-100 md:w-11/12 lg:w-3/4 dark:bg-slate-900 dark:shadow-slate-800">
        <form class="relative mx-auto">
          <input
            class="h-[50px] w-full rounded-full border border-slate-100 bg-white/70 pb-4 pe-40 ps-6 pt-4 text-slate-900 outline-none dark:border-slate-800 dark:bg-slate-900/70 dark:text-white"
            id="searchCourse" name="name" type="text" placeholder="Search...">
          <button class="absolute end-[1px] top-[1px] h-12 items-center justify-center rounded-full bg-violet-600 px-6 font-medium tracking-wide text-white"
            type="submit">Search Now</button>
        </form>
      </div>
    </div>
  </div>

  <section class="relative py-16 md:py-24">
    <div class="container relative">
      <div class="grid grid-cols-1 pb-6 text-center">
        <span class="mb-3 font-semibold uppercase text-violet-600">Kategori</span>
        <h4 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Pelatihan dan
          Pengetahuan</h4>
        <p class="mx-auto max-w-xl text-slate-400">
          Kembangkan keterampilan dan pengetahuan Anda melalui pelatihan berkualitas untuk mendukung karier dan
          masa depan.
        </p>
      </div>

      <div class="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
        <div
          class="group flex items-center rounded-md bg-white p-5 shadow-sm shadow-slate-200 duration-500 hover:bg-gradient-to-tr hover:from-fuchsia-600 hover:to-violet-600 dark:bg-slate-900 dark:shadow-slate-800">
          <div
            class="flex size-12 items-center justify-center rounded-md bg-violet-600/5 align-middle text-violet-600 shadow-sm shadow-slate-200 group-hover:bg-white/20 group-hover:text-white dark:shadow-slate-800"
            style="min-width: 64px; min-height: 64px;">
            <i class="iconoir-laptop-dev-mode text-2xl" style="font-size: 28px;"></i>
          </div>

          <div class="content ms-3 pl-5" style="margin-left: 24px;">
            <a class="title text-lg font-semibold group-hover:text-white" href="#" style="display: block; margin-bottom: 8px;">Pelatihan</a>
            <p class="text-slate-400 group-hover:text-white/50" style="line-height: 1.6;">Ikuti Pelatihan untuk
              tingkatkan kompetensi anda</p>
          </div>
        </div>

        <div
          class="group flex items-center rounded-md bg-white p-5 shadow-sm shadow-slate-200 duration-500 hover:bg-gradient-to-tr hover:from-fuchsia-600 hover:to-violet-600 dark:bg-slate-900 dark:shadow-slate-800">
          <div
            class="flex size-12 items-center justify-center rounded-md bg-violet-600/5 align-middle text-violet-600 shadow-sm shadow-slate-200 group-hover:bg-white/20 group-hover:text-white dark:shadow-slate-800"
            style="min-width: 64px; min-height: 64px;">
            <i class="iconoir-cube-replace-face text-2xl" style="font-size: 28px;"></i>
          </div>

          <div class="content ms-3" style="margin-left: 24px;">
            <a class="title text-lg font-semibold group-hover:text-white" href="#" style="display: block; margin-bottom: 8px;">Klinik Pengetahuan</a>
            <p class="text-slate-400 group-hover:text-white/50" style="line-height: 1.6;">Ikuti materi
              Pengetahuan untuk tingkatkan kualifikasi anda</p>
          </div>
        </div>

        <div
          class="group flex items-center rounded-md bg-white p-5 shadow-sm shadow-slate-200 duration-500 hover:bg-gradient-to-tr hover:from-fuchsia-600 hover:to-violet-600 dark:bg-slate-900 dark:shadow-slate-800">
          <div
            class="flex size-12 items-center justify-center rounded-md bg-violet-600/5 align-middle text-violet-600 shadow-sm shadow-slate-200 group-hover:bg-white/20 group-hover:text-white dark:shadow-slate-800"
            style="min-width: 64px; min-height: 64px;">
            <i class="iconoir-network-reverse text-2xl" style="font-size: 28px;"></i>
          </div>

          <div class="content ms-3" style="margin-left: 24px;">
            <a class="title text-lg font-semibold group-hover:text-white" href="#" style="display: block; margin-bottom: 8px;">Berbagi Pengetahuan</a>
            <p class="text-slate-400 group-hover:text-white/50" style="line-height: 1.6;">Ikuti materi
              Pengetahuan untuk tingkatkan kualifikasi anda</p>
          </div>
        </div>
      </div>
    </div>

    @include('landing.home.overview')
    @include('landing.home.pelatihan')
    @include('landing.home.advantage')

  </section>

  <section class="relative bg-cover bg-fixed bg-center bg-no-repeat py-24" style="background-image: url('{{ asset('landing/images/bg/3.jpg') }}')">
    <div class="absolute inset-0 bg-slate-900/60"></div>
    <div class="container relative">
      <div class="grid grid-cols-1 justify-center text-center md:text-start lg:grid-cols-12">
        <div class="lg:col-span-10 lg:col-start-2">
          <div class="grid grid-cols-2 items-center gap-6 sm:grid-cols-2 md:grid-cols-4">
            <div class="counter-box text-center">
              <h1 class="mb-2 text-4xl font-semibold text-white lg:text-5xl"><span class="counter-value" data-target="326">326</span>+</h1>
              <h5 class="counter-head font-medium uppercase text-white">Pelatihan</h5>
            </div>

            <div class="counter-box text-center">
              <h1 class="mb-2 text-4xl font-semibold text-white lg:text-5xl"><span class="counter-value" data-target="615689">615689</span>+</h1>
              <h5 class="counter-head font-medium uppercase text-white">Peserta</h5>
            </div>

            <div class="counter-box text-center">
              <h1 class="mb-2 text-4xl font-semibold text-white lg:text-5xl"><span class="counter-value" data-target="679">679</span></h1>
              <h5 class="counter-head font-medium uppercase text-white">Modul Belajar</h5>
            </div>

            <div class="counter-box text-center">
              <h1 class="mb-2 text-4xl font-semibold text-white lg:text-5xl"><span class="counter-value" data-target="0">0</span></h1>
              <h5 class="counter-head font-medium uppercase text-white">Pengguna Aktif</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="container relative mt-16 md:mt-24">
    <div class="grid grid-cols-1 items-center gap-6 md:grid-cols-12">
      <div class="md:col-span-7 lg:col-span-6">
        <div class="relative">
          <div class="relative mx-5 md:shrink-0 lg:mx-0">
            <img class="w-84 dark:shadow-gyay-700 h-[500px] rounded-lg object-cover shadow-md md:w-96" src="{{ asset('landing') }}/images/course/4.jpg" alt="">
          </div>

          <div class="absolute bottom-10 end-0 lg:end-6">
            <div class="z-1 relative top-10 text-end lg:text-end xl:text-start">
              <a class="lightbox dark:shadow-gyay-700 inline-flex size-20 items-center justify-center rounded-full bg-violet-600 text-white shadow-md" data-type="youtube"
                data-id="yba7hPeTSjk" href="#!">
                <i class="mdi mdi-play inline-flex items-center justify-center text-2xl"></i>
              </a>
            </div>

            <div class="relative md:shrink-0">
              <img class="dark:shadow-gyay-700 size-48 rounded-lg object-cover shadow-md" src="{{ asset('landing') }}/images/course/2.jpg" alt="">
            </div>
          </div>

          <div class="z-2 mover absolute -start-2 top-12 w-56 rounded-lg bg-white p-4 shadow-md md:-start-10 md:top-16 dark:bg-slate-900 dark:shadow-gray-800">
            <h5 class="mb-3 font-semibold">Our Instrunctors</h5>

            <ul class="relative list-none">
              <li class="relative inline-block"><a href="#"><img
                    class="hover:z-1 relative size-10 rounded-full border-4 border-white shadow-md shadow-slate-100 transition-all duration-500 hover:scale-105 dark:border-slate-900 dark:shadow-slate-800"
                    src="{{ asset('landing') }}/images/team/1.jpg" alt=""></a></li>
              <li class="relative -ms-4 inline-block"><a href="#"><img
                    class="hover:z-1 relative size-10 rounded-full border-4 border-white shadow-md shadow-slate-100 transition-all duration-500 hover:scale-105 dark:border-slate-900 dark:shadow-slate-800"
                    src="{{ asset('landing') }}/images/team/2.jpg" alt=""></a></li>
              <li class="relative -ms-4 inline-block"><a href="#"><img
                    class="hover:z-1 relative size-10 rounded-full border-4 border-white shadow-md shadow-slate-100 transition-all duration-500 hover:scale-105 dark:border-slate-900 dark:shadow-slate-800"
                    src="{{ asset('landing') }}/images/team/3.jpg" alt=""></a></li>
              <li class="relative -ms-4 inline-block"><a href="#"><img
                    class="hover:z-1 relative size-10 rounded-full border-4 border-white shadow-md shadow-slate-100 transition-all duration-500 hover:scale-105 dark:border-slate-900 dark:shadow-slate-800"
                    src="{{ asset('landing') }}/images/team/4.jpg" alt=""></a></li>
              <li class="relative -ms-4 inline-block"><a href="#"><img
                    class="hover:z-1 relative size-10 rounded-full border-4 border-white shadow-md shadow-slate-100 transition-all duration-500 hover:scale-105 dark:border-slate-900 dark:shadow-slate-800"
                    src="{{ asset('landing') }}/images/team/5.jpg" alt=""></a></li>
              <li class="relative -ms-4 inline-block"><a
                  class="hover:z-1 table-cell size-9 rounded-full bg-violet-600 text-center align-middle text-base tracking-wide text-white transition-all duration-500 hover:scale-105"
                  href="#"><i class="mdi mdi-plus"></i></a></li>
            </ul>
          </div>
        </div>
      </div>

      @include('landing.home.faq')
    </div>
  </div>

  @include('landing.home.testimonial')

  <section class="relative py-16 lg:py-24">
    @include('landing.home.blog')

    <div class="container relative mt-16 lg:mt-24">
      <div class="grid grid-cols-1 text-center">
        <h3 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">
          Punya pertanyaan? Hubungi kami!
        </h3>
        <p class="mx-auto max-w-xl text-slate-400">
          Kami siap membantu menjawab pertanyaan Anda dan memberikan informasi lengkap terkait layanan serta
          program kami.
        </p>
        <div class="mt-6">
          <a class="inline-flex h-10 items-center justify-center rounded-md bg-violet-600 px-5 font-medium tracking-wide text-white" href="/kontak">
            <i class="iconoir-phone me-2 align-middle"></i> Kontak Kami
          </a>
        </div>
      </div>
    </div>
  </section>
@endsection