<!DOCTYPE html>
<!--
Template name: Nova
Template author: FreeBootstrap.net
Author website: https://freebootstrap.net/
License: https://freebootstrap.net/license
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> PERPUSTAKAAN &mdash; SD TERPADU KRIDA NUSANTARA </title>
     
    <!-- ======= Google Font =======-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;display=swap" rel="stylesheet">
    <!-- End Google Font-->
    
<link href="<?php echo e(asset('assets/main/vendors/bootstrap/bootstrap.min.css')); ?>" rel="stylesheet">
<link href="<?php echo e(asset('assets/main/vendors/bootstrap-icons/font/bootstrap-icons.min.css')); ?>" rel="stylesheet">
<link href="<?php echo e(asset('assets/main/vendors/glightbox/glightbox.min.css')); ?>" rel="stylesheet">
<link href="<?php echo e(asset('assets/main/vendors/swiper/swiper-bundle.min.css')); ?>" rel="stylesheet">
<link href="<?php echo e(asset('assets/main/vendors/aos/aos.css')); ?>" rel="stylesheet">
<link href="<?php echo e(asset('assets/main/css/style.css')); ?>" rel="stylesheet">

    <!-- End Theme Style-->
    
    <!-- ======= Apply theme =======-->
    <script>
      // Apply the theme as early as possible to avoid flicker
      (function() {
      const storedTheme = localStorage.getItem('theme') || 'light';
      document.documentElement.setAttribute('data-bs-theme', storedTheme);
      })();
    </script>
  </head>
  <body>
    
    
    <!-- ======= Site Wrap =======-->
    <div class="site-wrap">
      
      
<!-- ======= Header =======-->
<header class="fbs__net-navbar navbar navbar-expand-lg dark" aria-label="freebootstrap.net navbar">
  <div class="container d-flex align-items-center justify-content-between">

    <!-- Start Logo-->
    <a class="navbar-brand w-auto" href="<?php echo e(url('/')); ?>">
      
      <!-- logo dark -->
      <img class="logo dark img-fluid"
           src="<?php echo e(asset('assets/main/images/logo-dark.svg')); ?>"
           alt="Logo Dark">

      <!-- logo light -->
      <img class="logo light img-fluid"
           src="<?php echo e(asset('assets/main/images/logo-light.svg')); ?>"
           alt="Logo Light">
    </a>
    <!-- End Logo-->

    <!-- Start offcanvas-->
    <div class="offcanvas offcanvas-start w-75"
         id="fbs__net-navbars"
         tabindex="-1"
         aria-labelledby="fbs__net-navbarsLabel">

      <div class="offcanvas-header">
        <div class="offcanvas-header-logo">
          <a class="logo-link" id="fbs__net-navbarsLabel" href="<?php echo e(url('/')); ?>">

            <!-- logo dark -->
            <img class="logo dark img-fluid"
                 src="<?php echo e(asset('assets/main/images/logo-dark.svg')); ?>"
                 alt="Logo Dark">

            <!-- logo light -->
            <img class="logo light img-fluid"
                 src="<?php echo e(asset('assets/main/images/logo-light.svg')); ?>"
                 alt="Logo Light">
          </a>
        </div>

        <button class="btn-close btn-close-black"
                type="button"
                data-bs-dismiss="offcanvas"
                aria-label="Close"></button>
      </div>

      <div class="offcanvas-body align-items-lg-center">

        <ul class="navbar-nav nav me-auto ps-lg-5 mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link scroll-link active" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link scroll-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link scroll-link" href="#contact">Contact</a>
          </li>
        </ul>

      </div>
    </div>
    <!-- End offcanvas-->

    <div class="ms-auto w-auto">
      <div class="header-social d-flex align-items-center gap-1">

       <a class="btn" href="<?php echo e(route('login')); ?>">Login</a>

        <button class="fbs__net-navbar-toggler ms-auto"
                data-bs-toggle="offcanvas"
                data-bs-target="#fbs__net-navbars"
                aria-controls="fbs__net-navbars">

          <svg class="fbs__net-icon-menu" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="21" x2="3" y1="6" y2="6"></line>
            <line x1="15" x2="3" y1="12" y2="12"></line>
            <line x1="17" x2="3" y1="18" y2="18"></line>
          </svg>

          <svg class="fbs__net-icon-close" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>

        </button>
      </div>
    </div>

  </div>
</header>
<!-- End Header -->

      
      <!-- ======= Main =======-->
      <main>
        
        
<!-- ======= Hero =======-->
<section class="hero__v6 section" id="home">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 mb-4 mb-lg-0">
        <div class="row">
          <div class="col-lg-11">

            <span class="hero-subtitle text-uppercase"
                  data-aos="fade-up" data-aos-delay="0">
              Perpustakaan Sekolah
            </span>

            <h1 class="hero-title mb-3"
                data-aos="fade-up" data-aos-delay="100">
              Perpustakaan SD Terpadu Krida Nusantara
            </h1>

            <p class="hero-description mb-4 mb-lg-5"
               data-aos="fade-up" data-aos-delay="200">
              Pusat literasi dan pembelajaran untuk mendukung minat baca, kreativitas,
              serta pengembangan karakter peserta didik SD Terpadu Krida Nusantara.
            </p>

            <div class="cta d-flex gap-2 mb-4 mb-lg-5"
                 data-aos="fade-up" data-aos-delay="300">
              <a class="btn" href="#">
                Jelajahi Koleksi Buku
              </a>
              <a class="btn btn-white-outline" href="#about">
                Tentang Perpustakaan
                <svg class="lucide lucide-arrow-up-right"
                     xmlns="http://www.w3.org/2000/svg"
                     width="18" height="18" viewBox="0 0 24 24"
                     fill="none" stroke="currentColor"
                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M7 7h10v10"></path>
                  <path d="M7 17 17 7"></path>
                </svg>
              </a>
            </div>

            <div class="logos mb-4"
                 data-aos="fade-up" data-aos-delay="400">
              <span class="logos-title text-uppercase mb-4 d-block">
                Mendukung Budaya Literasi Sekolah
              </span>

              <div class="logos-images d-flex gap-4 align-items-center">
                <img class="img-fluid js-img-to-inline-svg"
                     src="<?php echo e(asset('assets/main/images/logo/actual-size/logo-air-bnb__black.svg')); ?>"
                     alt="Literasi" style="width: 110px;">

                <img class="img-fluid js-img-to-inline-svg"
                     src="<?php echo e(asset('assets/main/images/logo/actual-size/logo-ibm__black.svg')); ?>"
                     alt="Edukasi" style="width: 80px;">

                <img class="img-fluid js-img-to-inline-svg"
                     src="<?php echo e(asset('assets/main/images/logo/actual-size/logo-google__black.svg')); ?>"
                     alt="Pembelajaran Digital" style="width: 110px;">
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="hero-img">
          <img class="img-card img-fluid"
               src="<?php echo e(asset('assets/main/images/card-expenses.png')); ?>"
               alt="Kartu Perpustakaan"
               data-aos="fade-down" data-aos-delay="600">

          <img class="img-main img-fluid rounded-4"
               src="<?php echo e(asset('assets/main/images/hero-img-1-min.jpg')); ?>"
               alt="Perpustakaan SD Terpadu Krida Nusantara"
               data-aos="fade-in" data-aos-delay="500">
        </div>
      </div>

    </div>
  </div>
</section>
<!-- End Hero -->


<!-- ======= About =======-->
<section class="about__v4 section" id="about">
  <div class="container">
    <div class="row">

      <!-- TEXT -->
      <div class="col-md-6 order-md-2">
        <div class="row justify-content-end">
          <div class="col-md-11 mb-4 mb-md-0">

            <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">
              Tentang Perpustakaan
            </span>

            <h2 class="mb-4" data-aos="fade-up" data-aos-delay="100">
              Perpustakaan SD Terpadu Krida Nusantara
            </h2>

            <div data-aos="fade-up" data-aos-delay="200">
              <p>
                Perpustakaan <strong>SD Terpadu Krida Nusantara</strong> merupakan
                sarana pendukung kegiatan belajar mengajar yang berperan penting
                dalam menumbuhkan minat baca dan budaya literasi sejak usia dini.
              </p>
              <p>
                Perpustakaan ini menyediakan berbagai koleksi buku pelajaran,
                buku cerita anak, ensiklopedia, serta bahan bacaan edukatif lainnya
                yang disesuaikan dengan kurikulum dan kebutuhan peserta didik.
              </p>
            </div>

            <h4 class="small fw-bold mt-4 mb-3" data-aos="fade-up" data-aos-delay="300">
              Nilai dan Tujuan Perpustakaan
            </h4>

            <ul class="d-flex flex-row flex-wrap list-unstyled gap-3 features" data-aos="fade-up" data-aos-delay="400">
              <li class="d-flex align-items-center gap-2">
                <span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span>
                <span class="text">Menumbuhkan Minat Baca</span>
              </li>
              <li class="d-flex align-items-center gap-2">
                <span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span>
                <span class="text">Mendukung Pembelajaran</span>
              </li>
              <li class="d-flex align-items-center gap-2">
                <span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span>
                <span class="text">Literasi Sejak Dini</span>
              </li>
              <li class="d-flex align-items-center gap-2">
                <span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span>
                <span class="text">Lingkungan Ramah Anak</span>
              </li>
              <li class="d-flex align-items-center gap-2">
                <span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span>
                <span class="text">Sumber Informasi Edukatif</span>
              </li>
            </ul>

          </div>
        </div>
      </div>

      <!-- IMAGE -->
      <div class="col-md-6">
        <div class="img-wrap position-relative">
          <img class="img-fluid rounded-4"
               src="<?php echo e(asset('assets/main/images/about_2-min.jpg')); ?>"
               alt="Perpustakaan SD Terpadu Krida Nusantara"
               data-aos="fade-up"
               data-aos-delay="0">

          <div class="mission-statement p-4 rounded-4 d-flex gap-4"
               data-aos="fade-up"
               data-aos-delay="100">

            <div class="mission-icon text-center rounded-circle">
              <i class="bi bi-book fs-4"></i>
            </div>

            <div>
              <h3 class="text-uppercase fw-bold">Visi Perpustakaan</h3>
              <p class="fs-5 mb-0">
                Menjadi perpustakaan sekolah yang edukatif, inspiratif,
                dan berperan aktif dalam mendukung peningkatan kualitas
                pembelajaran serta budaya literasi di
                SD Terpadu Krida Nusantara.
              </p>
            </div>

          </div>
        </div>
      </div>

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


<!-- ======= Features =======-->
<section class="section features__v2" id="features">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="d-lg-flex p-5 rounded-4 content" data-aos="fade-in" data-aos-delay="0">
          <div class="row">

            <!-- LEFT CONTENT -->
            <div class="col-lg-5 mb-5 mb-lg-0" data-aos="fade-up" data-aos-delay="0">
              <div class="row"> 
                <div class="col-lg-11">
                  <div class="h-100 flex-column justify-content-between d-flex">
                    <div>
                      <h2 class="mb-4">Keunggulan Perpustakaan Kami</h2>
                      <p class="mb-5">
                        Perpustakaan <strong>SD Terpadu Krida Nusantara</strong> hadir
                        sebagai pusat literasi sekolah yang mendukung proses belajar
                        mengajar, menumbuhkan kecintaan membaca, serta menciptakan
                        lingkungan belajar yang nyaman dan menyenangkan bagi siswa.
                      </p>
                    </div>

                    <div class="align-self-start">
                      <a class="glightbox btn btn-play d-inline-flex align-items-center gap-2"
                         href="https://www.youtube.com/watch?v=DQx96G4yHd8"
                         data-gallery="video">
                        <i class="bi bi-play-fill"></i>
                        Profil Perpustakaan
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- RIGHT FEATURES -->
            <div class="col-lg-7">
              <div class="row justify-content-end">
                <div class="col-lg-11">
                  <div class="row">

                    <div class="col-sm-6" data-aos="fade-up" data-aos-delay="0">
                      <div class="icon text-center mb-4">
                        <i class="bi bi-book fs-4"></i>
                      </div>
                      <h3 class="fs-6 fw-bold mb-3">Koleksi Buku Edukatif</h3>
                      <p>
                        Menyediakan buku pelajaran, cerita anak,
                        ensiklopedia, dan bacaan pendukung sesuai usia siswa SD.
                      </p>
                    </div>

                    <div class="col-sm-6" data-aos="fade-up" data-aos-delay="100">
                      <div class="icon text-center mb-4">
                        <i class="bi bi-people fs-4"></i>
                      </div>
                      <h3 class="fs-6 fw-bold mb-3">Ramah Anak & Nyaman</h3>
                      <p>
                        Lingkungan perpustakaan yang tertib, bersih,
                        dan nyaman untuk kegiatan membaca dan belajar.
                      </p>
                    </div>

                    <div class="col-sm-6" data-aos="fade-up" data-aos-delay="200">
                      <div class="icon text-center mb-4">
                        <i class="bi bi-journal-check fs-4"></i>
                      </div>
                      <h3 class="fs-6 fw-bold mb-3">Sistem Peminjaman Teratur</h3>
                      <p>
                        Proses peminjaman dan pengembalian buku
                        tercatat dengan baik sehingga mudah dipantau.
                      </p>
                    </div>

                    <div class="col-sm-6" data-aos="fade-up" data-aos-delay="300">
                      <div class="icon text-center mb-4">
                        <i class="bi bi-bar-chart fs-4"></i>
                      </div>
                      <h3 class="fs-6 fw-bold mb-3">Mendukung Budaya Literasi</h3>
                      <p>
                        Membantu sekolah dalam meningkatkan minat baca,
                        kreativitas, dan wawasan peserta didik.
                      </p>
                    </div>

                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- End Features-->

        
<!-- ======= Layanan Perpustakaan =======-->
<section class="section pricing__v2" id="layanan">
  <div class="container">
    <div class="row mb-5">
      <div class="col-md-6 mx-auto text-center">
        <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">
          Layanan
        </span>
        <h2 class="mb-3" data-aos="fade-up" data-aos-delay="100">
          Layanan Perpustakaan
        </h2>
        <p data-aos="fade-up" data-aos-delay="200">
          Perpustakaan SD Terpadu Krida Nusantara menyediakan berbagai layanan
          untuk mendukung minat baca, pembelajaran, dan literasi siswa.
        </p>
      </div>
    </div>

    <div class="row">

      <!-- Layanan Siswa -->
      <div class="col-md-4 mb-4 mb-md-0" data-aos="fade-up" data-aos-delay="300">
        <div class="p-5 rounded-4 price-table h-100 text-center">
          <h3>📘 Layanan Siswa</h3>
          <p>
            Layanan peminjaman buku pelajaran dan bacaan anak
            yang mendukung proses belajar siswa di sekolah.
          </p>

          <ul class="list-unstyled d-flex flex-column gap-3 mt-4 text-start">
            <li class="d-flex gap-2 align-items-start">
              <span class="icon rounded-circle mt-1"><i class="bi bi-check"></i></span>
              <span>Peminjaman buku pelajaran</span>
            </li>
            <li class="d-flex gap-2 align-items-start">
              <span class="icon rounded-circle mt-1"><i class="bi bi-check"></i></span>
              <span>Buku cerita & literasi anak</span>
            </li>
            <li class="d-flex gap-2 align-items-start">
              <span class="icon rounded-circle mt-1"><i class="bi bi-check"></i></span>
              <span>Kartu anggota perpustakaan</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- Layanan Unggulan -->
      <div class="col-md-8" data-aos="fade-up" data-aos-delay="400">
        <div class="p-5 rounded-4 price-table popular h-100">
          <div class="row">

            <div class="col-md-6">
              <h3 class="mb-3">⭐ Program Unggulan</h3>
              <p>
                Program unggulan perpustakaan untuk menumbuhkan
                budaya membaca dan karakter siswa sejak dini.
              </p>

              <div class="mt-4">
                <a class="btn btn-white hover-outline" href="#about">
                  Pelajari Lebih Lanjut
                </a>
              </div>
            </div>

            <div class="col-md-6 pricing-features">
              <h4 class="text-uppercase fw-bold mb-3">Fasilitas & Program</h4>
              <ul class="list-unstyled d-flex flex-column gap-3">
                <li class="d-flex gap-2 align-items-start mb-0">
                  <span class="icon rounded-circle mt-1"><i class="bi bi-check"></i></span>
                  <span>Program literasi membaca harian</span>
                </li>
                <li class="d-flex gap-2 align-items-start mb-0">
                  <span class="icon rounded-circle mt-1"><i class="bi bi-check"></i></span>
                  <span>Pojok baca ramah anak</span>
                </li>
                <li class="d-flex gap-2 align-items-start mb-0">
                  <span class="icon rounded-circle mt-1"><i class="bi bi-check"></i></span>
                  <span>Pencatatan peminjaman berbasis sistem</span>
                </li>
                <li class="d-flex gap-2 align-items-start mb-0">
                  <span class="icon rounded-circle mt-1"><i class="bi bi-check"></i></span>
                  <span>Laporan dan evaluasi literasi siswa</span>
                </li>
              </ul>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</section>
<!-- End Layanan Perpustakaan -->

        
<!-- ======= How it works =======-->
<section class="section howitworks__v1" id="how-it-works">
  <div class="container">

    <div class="row mb-5">
      <div class="col-md-7 text-center mx-auto">
        <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">
          Alur Layanan Perpustakaan
        </span>
        <h2 data-aos="fade-up" data-aos-delay="100">
          Cara Kerja Perpustakaan
        </h2>
        <p data-aos="fade-up" data-aos-delay="200">
          Perpustakaan SD Terpadu Krida Nusantara dirancang untuk memudahkan siswa
          dalam mencari, meminjam, dan mengembalikan buku secara tertib dan teratur.
          Berikut alur layanan yang diterapkan.
        </p>
      </div>
    </div>

    <div class="row g-md-5">

      <!-- STEP 1 -->
      <div class="col-md-6 col-lg-3">
        <div class="step-card text-center h-100 d-flex flex-column justify-content-start position-relative"
             data-aos="fade-up" data-aos-delay="0">

          <div data-aos="fade-right" data-aos-delay="500">
            <img class="arch-line"
                 src="<?php echo e(asset('assets/main/images/arch-line.svg')); ?>"
                 alt="Arch line">
          </div>

          <span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">1</span>

          <div>
            <h3 class="fs-5 mb-3">Menjadi Anggota</h3>
            <p>
              Siswa yang terdaftar di SD Terpadu Krida Nusantara otomatis menjadi
              anggota perpustakaan dan mendapatkan hak untuk meminjam buku.
            </p>
          </div>

        </div>
      </div>

      <!-- STEP 2 -->
      <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="600">
        <div class="step-card reverse text-center h-100 d-flex flex-column justify-content-start position-relative">

          <div data-aos="fade-right" data-aos-delay="1100">
            <img class="arch-line reverse"
                 src="<?php echo e(asset('assets/main/images/arch-line-reverse.svg')); ?>"
                 alt="Arch line reverse">
          </div>

          <span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">2</span>

          <h3 class="fs-5 mb-3">Mencari Buku</h3>
          <p>
            Siswa dapat mencari buku berdasarkan judul, kategori, atau pengarang
            melalui sistem perpustakaan maupun rak buku yang tersedia.
          </p>

        </div>
      </div>

      <!-- STEP 3 -->
      <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="1200">
        <div class="step-card text-center h-100 d-flex flex-column justify-content-start position-relative">

          <div data-aos="fade-right" data-aos-delay="1700">
            <img class="arch-line"
                 src="<?php echo e(asset('assets/main/images/arch-line.svg')); ?>"
                 alt="Arch line">
          </div>

          <span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">3</span>

          <h3 class="fs-5 mb-3">Peminjaman Buku</h3>
          <p>
            Setelah memilih buku, siswa melakukan peminjaman melalui petugas
            perpustakaan dan data peminjaman dicatat dalam sistem.
          </p>

        </div>
      </div>

      <!-- STEP 4 -->
      <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="1800">
        <div class="step-card last text-center h-100 d-flex flex-column justify-content-start position-relative">

          <span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">4</span>

          <div>
            <h3 class="fs-5 mb-3">Pengembalian Buku</h3>
            <p>
              Buku yang telah selesai dibaca dikembalikan sesuai jadwal.
              Sistem akan mencatat pengembalian dan memperbarui stok buku.
            </p>
          </div>

        </div>
      </div>

    </div>
  </div>
</section>
<!-- End How it works -->



<!-- ======= Services =======-->
<section class="section services__v3" id="services">
  <div class="container">
    <div class="row mb-5">
      <div class="col-md-8 mx-auto text-center">
        <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">
          Layanan Perpustakaan
        </span>
        <h2 class="mb-3" data-aos="fade-up" data-aos-delay="100">
          Mendukung Budaya Literasi Siswa SD Terpadu Krida Nusantara
        </h2>
        <p data-aos="fade-up" data-aos-delay="200">
          Perpustakaan kami menyediakan berbagai layanan untuk menumbuhkan minat baca,
          meningkatkan pengetahuan, dan mendukung kegiatan belajar siswa.
        </p>
      </div>
    </div>

    <div class="row g-4">

      <!-- Service 1 -->
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
        <div class="service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-4">
          <div>
            <div class="icon text-center mb-4">
              <i class="bi bi-book fs-1"></i>
            </div>
            <h3 class="fs-5 mb-3 text-center">Peminjaman Buku</h3>
            <p class="mb-4 text-center">
              Siswa dapat meminjam berbagai buku pelajaran dan buku cerita
              yang sesuai dengan jenjang sekolah dasar.
            </p>
          </div>
        </div>
      </div>

      <!-- Service 2 -->
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
        <div class="service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-4">
          <div>
            <div class="icon text-center mb-4">
              <i class="bi bi-journal-check fs-1"></i>
            </div>
            <h3 class="fs-5 mb-3 text-center">Pengembalian Buku</h3>
            <p class="mb-4 text-center">
              Sistem pengembalian buku yang tertib dan teratur untuk
              melatih tanggung jawab dan kedisiplinan siswa.
            </p>
          </div>
        </div>
      </div>

      <!-- Service 3 -->
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
        <div class="service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-4">
          <div>
            <div class="icon text-center mb-4">
              <i class="bi bi-search fs-1"></i>
            </div>
            <h3 class="fs-5 mb-3 text-center">Pencarian Koleksi</h3>
            <p class="mb-4 text-center">
              Memudahkan siswa dan guru dalam mencari buku berdasarkan
              judul, pengarang, atau kategori.
            </p>
          </div>
        </div>
      </div>

      <!-- Service 4 -->
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
        <div class="service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-4">
          <div>
            <div class="icon text-center mb-4">
              <i class="bi bi-people fs-1"></i>
            </div>
            <h3 class="fs-5 mb-3 text-center">Keanggotaan Siswa</h3>
            <p class="mb-4 text-center">
              Setiap siswa terdaftar sebagai anggota perpustakaan
              untuk memudahkan pendataan dan aktivitas literasi.
            </p>
          </div>
        </div>
      </div>

      <!-- Service 5 -->
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
        <div class="service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-4">
          <div>
            <div class="icon text-center mb-4">
              <i class="bi bi-calendar-event fs-1"></i>
            </div>
            <h3 class="fs-5 mb-3 text-center">Kegiatan Literasi</h3>
            <p class="mb-4 text-center">
              Mendukung kegiatan membaca bersama, pojok baca,
              dan program literasi sekolah.
            </p>
          </div>
        </div>
      </div>

      <!-- Service 6 -->
      <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
        <div class="service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-4">
          <div>
            <div class="icon text-center mb-4">
              <i class="bi bi-file-earmark-text fs-1"></i>
            </div>
            <h3 class="fs-5 mb-3 text-center">Laporan Perpustakaan</h3>
            <p class="mb-4 text-center">
              Menyediakan laporan peminjaman dan data buku
              untuk mendukung pengelolaan perpustakaan yang baik.
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
<!-- End Services -->


<!-- ======= FAQ =======-->
<section class="section faq__v2" id="faq">
  <div class="container">
    <div class="row mb-4">
      <div class="col-md-6 col-lg-7 mx-auto text-center">
        <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">
          FAQ
        </span>
        <h2 class="h2 fw-bold mb-3" data-aos="fade-up" data-aos-delay="0">
          Pertanyaan yang Sering Diajukan
        </h2>
        <p data-aos="fade-up" data-aos-delay="100">
          Berikut beberapa pertanyaan yang sering ditanyakan seputar layanan
          Perpustakaan SD Terpadu Krida Nusantara.
        </p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8 mx-auto" data-aos="fade-up" data-aos-delay="200">
        <div class="faq-content">
          <div class="accordion custom-accordion" id="accordionPanelsStayOpenExample">

            <!-- FAQ 1 -->
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button" type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#panelsStayOpen-collapseOne"
                  aria-expanded="true"
                  aria-controls="panelsStayOpen-collapseOne">
                  Apa itu Perpustakaan SD Terpadu Krida Nusantara?
                </button>
              </h2>
              <div class="accordion-collapse collapse show" id="panelsStayOpen-collapseOne">
                <div class="accordion-body">
                  Perpustakaan SD Terpadu Krida Nusantara merupakan sarana penunjang
                  kegiatan belajar siswa yang menyediakan berbagai koleksi buku
                  pelajaran, buku cerita, dan bahan bacaan edukatif untuk
                  meningkatkan minat baca dan literasi siswa.
                </div>
              </div>
            </div>

            <!-- FAQ 2 -->
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#panelsStayOpen-collapseTwo"
                  aria-expanded="false"
                  aria-controls="panelsStayOpen-collapseTwo">
                  Siapa saja yang boleh meminjam buku di perpustakaan?
                </button>
              </h2>
              <div class="accordion-collapse collapse" id="panelsStayOpen-collapseTwo">
                <div class="accordion-body">
                  Seluruh siswa, guru, dan tenaga pendidik SD Terpadu Krida Nusantara
                  yang terdaftar sebagai anggota perpustakaan diperbolehkan
                  meminjam buku sesuai dengan ketentuan yang berlaku.
                </div>
              </div>
            </div>

            <!-- FAQ 3 -->
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#panelsStayOpen-collapseThree"
                  aria-expanded="false"
                  aria-controls="panelsStayOpen-collapseThree">
                  Berapa lama batas waktu peminjaman buku?
                </button>
              </h2>
              <div class="accordion-collapse collapse" id="panelsStayOpen-collapseThree">
                <div class="accordion-body">
                  Buku dapat dipinjam selama 7 hari dan dapat diperpanjang
                  apabila buku tersebut belum dipesan oleh anggota lain,
                  sesuai kebijakan perpustakaan.
                </div>
              </div>
            </div>

            <!-- FAQ 4 -->
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#panelsStayOpen-collapseFour"
                  aria-expanded="false"
                  aria-controls="panelsStayOpen-collapseFour">
                  Apa yang harus dilakukan jika terlambat mengembalikan buku?
                </button>
              </h2>
              <div class="accordion-collapse collapse" id="panelsStayOpen-collapseFour">
                <div class="accordion-body">
                  Apabila terlambat mengembalikan buku, peminjam akan dikenakan
                  sanksi sesuai dengan peraturan perpustakaan, seperti denda
                  atau pembatasan peminjaman sementara.
                </div>
              </div>
            </div>

            <!-- FAQ 5 -->
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#panelsStayOpen-collapseFive"
                  aria-expanded="false"
                  aria-controls="panelsStayOpen-collapseFive">
                  Apakah tersedia sistem peminjaman berbasis online?
                </button>
              </h2>
              <div class="accordion-collapse collapse" id="panelsStayOpen-collapseFive">
                <div class="accordion-body">
                  Ya, perpustakaan telah dilengkapi dengan sistem informasi
                  perpustakaan berbasis web untuk memudahkan pengelolaan data
                  buku, anggota, peminjaman, dan pengembalian secara lebih
                  cepat dan terorganisir.
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- End FAQ -->

        
        <!-- ======= Contact =======-->
        <section class="section contact__v2" id="contact">
          <div class="container">
            <div class="row mb-5">
              <div class="col-md-6 col-lg-7 mx-auto text-center"><span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">Contact</span>
                <h2 class="h2 fw-bold mb-3" data-aos="fade-up" data-aos-delay="0">Contact Us</h2>
                <p data-aos="fade-up" data-aos-delay="100">Utilize our tools to develop your concepts and bring your vision to life. Once complete, effortlessly share your creations.</p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="d-flex gap-5 flex-column">
                  <div class="d-flex align-items-start gap-3" data-aos="fade-up" data-aos-delay="0">
                    <div class="icon d-block"><i class="bi bi-telephone"></i></div><span> <span class="d-block">Phone</span><strong>+(01 234 567 890)</strong></span>
                  </div>
                  <div class="d-flex align-items-start gap-3" data-aos="fade-up" data-aos-delay="100">
                    <div class="icon d-block"><i class="bi bi-send"></i></div><span> <span class="d-block">Email</span><strong>info@mydomain.com</strong></span>
                  </div>
                  <div class="d-flex align-items-start gap-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="icon d-block"><i class="bi bi-geo-alt"></i></div><span> <span class="d-block">Address</span>
                      <address class="fw-bold">123 Main Street Apt 4B Springfield, <br> IL 62701 United States</address></span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-wrapper" data-aos="fade-up" data-aos-delay="300">
                  <form id="contactForm">
                    <div class="row gap-3 mb-3">
                      <div class="col-md-12">
                        <label class="mb-2" for="name">Name</label>
                        <input class="form-control" id="name" type="text" name="name" required="">
                      </div>
                      <div class="col-md-12">
                        <label class="mb-2" for="email">Email</label>
                        <input class="form-control" id="email" type="email" name="email" required="">
                      </div>
                    </div>
                    <div class="row gap-3 mb-3">
                      <div class="col-md-12">
                        <label class="mb-2" for="subject">Subject</label>
                        <input class="form-control" id="subject" type="text" name="subject">
                      </div>
                    </div>
                    <div class="row gap-3 gap-md-0 mb-3">
                      <div class="col-md-12">
                        <label class="mb-2" for="message">Message</label>
                        <textarea class="form-control" id="message" name="message" rows="5" required=""></textarea>
                      </div>
                    </div>
                    <button class="btn btn-primary fw-semibold" type="submit">Send Message</button>
                  </form>
                  <div class="mt-3 d-none alert alert-success" id="successMessage">Message sent successfully!</div>
                  <div class="mt-3 d-none alert alert-danger" id="errorMessage">Message sending failed. Please try again later.</div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- End Contact-->
        
<!-- ======= Footer =======-->
<footer class="footer pt-5 pb-5">
  <div class="container">

    <div class="row justify-content-between mb-5">
      <div class="col-md-5">
        <h3 class="mb-3">Perpustakaan Sekolah</h3>
        <p>
          Perpustakaan SD Terpadu Krida Nusantara berkomitmen mendukung
          peningkatan literasi dan pembelajaran siswa melalui layanan
          perpustakaan yang tertib, nyaman, dan modern.
        </p>
      </div>

      <div class="col-md-6">
        <div class="row">
          <div class="col-md-6 mb-4">
            <h3 class="mb-3">Menu</h3>
            <ul class="list-unstyled">
              <li><a href="#about">Tentang Perpustakaan</a></li>
              <li><a href="#features">Layanan</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>

          <div class="col-md-6 quick-contact">
            <h3 class="mb-3">Kontak</h3>
            <p class="d-flex mb-2">
              <i class="bi bi-geo-alt-fill me-3"></i>
              <span>SD Terpadu Krida Nusantara</span>
            </p>
            <p class="d-flex mb-2">
              <i class="bi bi-telephone-fill me-3"></i>
              <span>(021) xxxx xxxx</span>
            </p>
            <p class="d-flex mb-2">
              <i class="bi bi-envelope-fill me-3"></i>
              <span>perpustakaan@kridanusantara.sch.id</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="row credits pt-3">
      <div class="col text-center">
        &copy; <script>document.write(new Date().getFullYear());</script>
        Perpustakaan SD Terpadu Krida Nusantara. All rights reserved.
      </div>
    </div>

  </div>
</footer>
<!-- End Footer -->

        
      </main>
    </div>
    
    <!-- ======= Back to Top =======-->
    <button id="back-to-top"><i class="bi bi-arrow-up-short"></i></button>
    <!-- End Back to top-->
    
    <!-- ======= Javascripts =======-->
<script src="<?php echo e(asset('assets/main/vendors/bootstrap/bootstrap.bundle.min.js')); ?>"></script>
<script src="<?php echo e(asset('assets/main/vendors/gsap/gsap.min.js')); ?>"></script>
<script src="<?php echo e(asset('assets/main/vendors/imagesloaded/imagesloaded.pkgd.min.js')); ?>"></script>
<script src="<?php echo e(asset('assets/main/vendors/isotope/isotope.pkgd.min.js')); ?>"></script>
<script src="<?php echo e(asset('assets/main/vendors/glightbox/glightbox.min.js')); ?>"></script>
<script src="<?php echo e(asset('assets/main/vendors/swiper/swiper-bundle.min.js')); ?>"></script>
<script src="<?php echo e(asset('assets/main/vendors/aos/aos.js')); ?>"></script>
<script src="<?php echo e(asset('assets/main/vendors/purecounter/purecounter.js')); ?>"></script>

<script src="<?php echo e(asset('assets/main/js/custom.js')); ?>"></script>
<script src="<?php echo e(asset('assets/main/js/send_email.js')); ?>"></script>

    <!-- End JavaScripts-->
  </body>
</html><?php /**PATH C:\laragon\www\Perpus\resources\views/welcome.blade.php ENDPATH**/ ?>