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

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/course.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>Ap courses</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="ap-course">
      <div class="ap-course-wrap">
        <div class="d-flex justify-content-center">
          <div class="ap-course-navigate d-flex flex-column">
            <a href="#" class="ap-course-press-here text-uppercase text-decoration-none text-center">Press here</a>
            <p class="ap-course-suggest text-uppercase text-center">if you want a tutor for your class</p>
            <div class="d-flex justify-content-center">
              <button class="btn-fill-secondary btn-find-tutor text-uppercase">
                find a tutor
              </button>
            </div>
          </div>
        </div>
        <div class="courses-list d-flex flex-wrap">
          <div class="col-4">
            <div class="course-item position-relative">
              <div class="course-item-image-wrap">
                <img class="course-item-image w-100" src="{{ asset('img/course/course-item.jpeg') }}" alt="Course Image">
              </div>
              <div class="course-item-content position-relative">
                <h4 class="course-item-content-header text-uppercase">AP Calculus AB </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-4">
            <div class="course-item position-relative">
              <div class="course-item-image-wrap">
                <img class="course-item-image w-100" src="{{ asset('img/course/course-item.jpeg') }}" alt="Course Image">
              </div>
              <div class="course-item-content position-relative">
                <h4 class="course-item-content-header text-uppercase">AP Static</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-4">
            <div class="course-item position-relative">
              <div class="course-item-image-wrap">
                <img class="course-item-image w-100" src="{{ asset('img/course/course-item.jpeg') }}" alt="Course Image">
              </div>
              <div class="course-item-content position-relative">
                <h4 class="course-item-content-header text-uppercase">AP Physics Mechanics</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-4">
            <div class="course-item position-relative">
              <div class="course-item-image-wrap">
                <img class="course-item-image w-100" src="{{ asset('img/course/course-item.jpeg') }}" alt="Course Image">
              </div>
              <div class="course-item-content position-relative">
                <h4 class="course-item-content-header text-uppercase">ap the practice of statistics</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-4">
            <div class="course-item position-relative">
              <div class="course-item-image-wrap">
                <img class="course-item-image w-100" src="{{ asset('img/course/course-item.jpeg') }}" alt="Course Image">
              </div>
              <div class="course-item-content position-relative">
                <h4 class="course-item-content-header text-uppercase">AP biology</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-4">
            <div class="course-item position-relative">
              <div class="course-item-image-wrap">
                <img class="course-item-image w-100" src="{{ asset('img/course/course-item.jpeg') }}"
                  alt="Course Image">
              </div>
              <div class="course-item-content position-relative">
                <h4 class="course-item-content-header text-uppercase">AP Chemistry</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/landing.js')
@endpush