  <section id="hero" class="d-flex justify-content-center align-items-center">
    <div class="container position-relative" data-aos="zoom-in" data-aos-delay="100">
      <h1>Selamat Datang,<br>di SMK 2 GUGUAK</h1>
      <h2>SMKN 2 Guguak Komitment Membentuk Lulusan Terampil yang Mampu Bersaing di Lapangan Kerja</h2>
      <!-- <a href="courses.html" class="btn-get-started">Get Started</a> -->
    </div>
  </section><!-- End Hero -->

  <main id="main">

    <!-- ======= About Section ======= -->
    <section id="about" class="about">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <p>Sambutan Pak Kepala Sekolah</p>
        </div>

        <div class="row">
          <div class="col-lg-6 order-1 order-lg-2" data-aos="fade-left" data-aos-delay="100">
            <img src="assets/img/smk2-ggk.jpeg" class="img-fluid" alt="">
          </div>
          <div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1 content">
            <h3>SMKN 2 Guguak Komitment Membentuk Lulusan Terampil yang Mampu Bersaing di Lapangan Kerja</h3>
            <p class="font-italic">
              Bismillahirohmannirrohim

              Assalamualaikum Warahmatullah Wabarakatuh

              Alhamdulillahi robbil alamin kami panjatkan kehadlirat Allah SWT, bahwasannya dengan rahmat dan karunia-Nya lah akhirnya Website sekolah ini dengan alamat www.smk2padang.sch.id dapat kami perbaharui.
              Kami mengucapkan selamat datang di Website kami Sekolah Menengah Kejuruan Negeri (SMKN) 2 Padang yang saya tujukan untuk seluruh unsur pimpinan, guru, karyawan dan siswa serta khalayak umum guna dapat mengakses seluruh informasi tentang segala profil, aktifitas/kegiatan serta fasilitas sekolah kami.
            </p>
            <p>
              Kita berharap dengan lengkapnya sarana dan prasana yang dimiliki Sekolah akan meningkatkan Kualitas Pendidikan agar
              Proses Pendidikan berjalan secara Efektif dan Efisien.
            </p>
            <a href="index.php?page=pages/profil/profil_perkategori&idkategori=4" class="learn-more-btn">Lanjukan Baca...</a>
          </div>
        </div>

      </div>
    </section>
    <!-- End About Section -->

    <!-- ======= Counts Section ======= -->





    <section id="why-us" class="why-us">
      <div class="container" data-aos="fade-up">

        <div class="row">
          <div class="col-lg-12 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">
            <div class="icon-boxes d-flex flex-column justify-content-center">
              <div class="row">
                <div class="col-xl-4 d-flex align-items-stretch">
                  <a href="?page=pages/berita/view">
                    <div class="icon-box mt-4 mt-xl-0" style="background-color: #5fcf80; color:white;">
                      <i class="bx bx-receipt"></i>
                      <h4>Berita</h4>
                      <p style="color: white;">Kumpulan berita SMKN 2 GUGUAK yang ter update</p>
                    </div>
                  </a>
                </div>
                <div class="col-xl-4 d-flex align-items-stretch">
                  <a href="?page=pages/pengumuman/view">
                    <div class="icon-box mt-4 mt-xl-0" style="background-color: #5fcf80; color:white;">
                      <i class="bx bx-cube-alt"></i>
                      <h4>Pengumuman</h4>
                      <p style="color: white;">Kumpulan Pengumuman SMKN 2 GUGUAK yang ter update</p>
                    </div>
                  </a>
                </div>
                <div class="col-xl-4 d-flex align-items-stretch">
                  <a href="?page=pages/galeri/view">
                    <div class="icon-box mt-4 mt-xl-0" style="background-color: #5fcf80; color:white;">
                      <i class="bx bx-images"></i>
                      <h4>Galeri</h4>
                      <p style="color: white;">Kumpulan Galeri SMKN 2 GUGUAK</p>
                  </a>
                </div>
              </div>
            </div>
          </div><!-- End .content-->
        </div>
      </div>

      </div>
    </section>






    <!-- End Counts Section -->

    <!-- ======= Features Section ======= -->
    <!-- End Features Section -->

    <!-- ======= Popular Courses Section ======= -->
    <section id="popular-courses" class="courses">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>jurusan</h2>
          <p>Jurusan</p>
        </div>

        <div class="row">
          <?php

          $dataguru = $koneksi->query("SELECT * FROM tbl_jurusan");
          foreach ($dataguru as $pecah) :

          ?>
            <div class="col-md-4">

              <div class="card mb-3">
                <img height="200" src="admin/dist/img/imgjurusan/<?= $pecah['jurusan_foto'] ?>" class="card-img-top" alt="...">
                <div class="card-body" style="text-align: center;">
                  <p class="card-title"><b><?= $pecah['jurusan_nama'] ?></b></p>
                  <p class="card-text"><?= substr($pecah['jurusan_ket'], 0, 100) ?></p>
                  <p style="background: #5fcf80;"><a href="?page=pages/jurusan/detail_jurusan&iddetail=<?= $pecah['jurusan_id'] ?>">Read More..</a></p>
                </div>

              </div>
            </div>


          <?php
          endforeach;
          ?>

        </div>

      </div>
    </section><!-- End Popular Courses Section -->

    <!-- ======= Why Us Section ======= -->





    <section id="counts" class="counts section-bg">
      <div class="container">

        <div class="text-center title">
          <h3>Jumlah Berita</h3>
          <p>Jumlah Seluruh Data Berita Per Kategori</p>
        </div>

        <div class="row counters" style="text-align: center;">

          <?php
          $jumlahberita = $koneksi->query("SELECT *, COUNT(*) AS jumlah FROM tbl_berita a JOIN tbl_kategori b ON a.kategori_id = b.kategori_id GROUP BY a.kategori_id");
          foreach ($jumlahberita as $pecah) :

          ?>


            <div class="col-lg-4 col-6 text-center">
              <span data-toggle="counter-up"><?= $pecah['jumlah'] ?></span>
              <p><?= $pecah['kategori_nama']; ?></p>
            </div>

          <?php endforeach; ?>

        </div>


      </div>
    </section>





    <!-- End Why Us Section -->

    <!-- ======= Trainers Section ======= -->
    <section id="trainers" class="trainers">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Guru</h2>
          <p>GURU SMKN 2 GUGUAK</p>
        </div>

        <div class="row" data-aos="zoom-in" data-aos-delay="100">
          <?php
          $dataguru = $koneksi->query("SELECT * FROM tbl_guru");
          foreach ($dataguru as $pecah) :
          ?>

            <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
              <div class="member">
                <div class="show" style="display: none;">
                  <img src="admin/dist/img/imgguru/<?= $pecah['guru_foto'] ?>" class="img-fluid" alt="">

                  <div class="member-content">
                    <h4><?= $pecah['guru_nama'] ?></h4>
                    <p>NIP : <?= $pecah['guru_nip'] ?></p>
                    <div class="social">
                      <p>
                        <a href=""><i class=""></i><b>lihat Profil</b></a>
                      </p>
                      <a href=""><i class="icofont-twitter"></i></a>
                      <a href=""><i class="icofont-facebook"></i></a>
                      <a href=""><i class="icofont-instagram"></i></a>
                      <a href=""><i class="icofont-linkedin"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          <?php
          endforeach;
          ?>
        </div>

        <a href="#" class="btn mb-5" id="load" style="background-color: #5fcf80; color:white;">Lihat Lagi</a>
        <a href="" class="btn mb-5" style="background-color: #5fcf80; color:white;">Back to top</a>

      </div>
    </section>
    <script>
      $(function() {
        $('.show').slice(0, 3).show();
        $('#load').on('click', function(e) {
          e.preventDefault();
          $('.show:hidden').slice(0, 3).slideDown();
          if ($('.show:hidden').length == 0) {
            $('#load').fadeOut('slow');
          }

          $('html,body').animate({
            scrolltop: $(this).offset().top
          }, 3200)

        })


      })
    </script>
    <!-- End Trainers Section -->

  </main>