@extends('layout.app', ['title' => 'Curriculum'])

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/curriculum.css'])
@endpush

@section('content')
  <section class="page-wrap col-8 col-md-9 col-xl-10 flex-grow-1 px-0">
    <section class="banner-main position-relative w-100">
      <div>
        <img src="{{ asset('img/promotion/banner_promotion.png') }}" alt="" class="w-100">
      </div>
      <div class="banner-main-wrap position-absolute mt-2">
        <div class="banner-main-content text-white">
          <div class="banner-main-header text-uppercase">
            <h2>Chương trình học</h2>
          </div>
          <div class="banner-main-text fs-17">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis,
              pulvinar dapibus leo.</p>
          </div>
        </div>
      </div>
    </section>
    <section class="curriculum">
      <div class="curriculum-wrap mt-2">
        <div class="courses-list d-flex flex-wrap">
          <div class="col-6">
            <div class="course-item position-relative">
              <div class="course-item-image-wrap">
                <img class="course-item-image w-100" src="{{ asset('img/curriculum/math.png') }}" alt="Course Image">
              </div>
              <div class="course-item-content position-relative">
                <h4 class="course-item-content-header text-uppercase">Chương trình toán học</h4>
                <div class="course-item-feature d-flex flex-column">
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Office Meeting</span>
                  </div>
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Working Time Call</span>
                  </div>
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Come to Place</span>
                  </div>
                </div>
                <button class="btn-15 btn-15-fill text-uppercase">Đăng ký học</button>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="course-item position-relative">
              <div class="course-item-image-wrap">
                <img class="course-item-image w-100" src="{{ asset('img/curriculum/physic.png') }}" alt="Course Image">
              </div>
              <div class="course-item-content position-relative">
                <h4 class="course-item-content-header text-uppercase">Chương trình vật lý</h4>
                <div class="course-item-feature d-flex flex-column">
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Office Meeting</span>
                  </div>
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Working Time Call</span>
                  </div>
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Come to Place</span>
                  </div>
                </div>
                <button class="btn-15 btn-15-fill text-uppercase">Đăng ký học</button>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="course-item position-relative">
              <div class="course-item-image-wrap">
                <img class="course-item-image w-100" src="{{ asset('img/curriculum/bio.png') }}" alt="Course Image">
              </div>
              <div class="course-item-content position-relative">
                <h4 class="course-item-content-header text-uppercase">Chương trình sinh học</h4>
                <div class="course-item-feature d-flex flex-column">
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Office Meeting</span>
                  </div>
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Working Time Call</span>
                  </div>
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Come to Place</span>
                  </div>
                </div>
                <button class="btn-15 btn-15-fill text-uppercase">Đăng ký học</button>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="course-item position-relative">
              <div class="course-item-image-wrap">
                <img class="course-item-image w-100" src="{{ asset('img/curriculum/chemical.png') }}" alt="Course Image">
              </div>
              <div class="course-item-content position-relative">
                <h4 class="course-item-content-header text-uppercase">Chương trình hóa học</h4>
                <div class="course-item-feature d-flex flex-column">
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Office Meeting</span>
                  </div>
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Working Time Call</span>
                  </div>
                  <div class="course-item-feature-item">
                    <i class="fa-solid fa-circle-check text-red-main"></i>
                    <span>Come to Place</span>
                  </div>
                </div>
                <button class="btn-15 btn-15-fill text-uppercase">Đăng ký học</button>
              </div>
            </div>
          </div>
        </div>
    </section>
  </section>
@endsection

@push('script')
  @vite('resources/js/curriculum.js')
@endpush