<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Perhitungan SAW</title>

  <!-- favicon-->
  <link rel="shortcut icon" href="{{ asset('user/favicon.svg') }}" type="image/svg+xml">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- custom css link -->
  <link rel="stylesheet" href="{{ asset('user/css/userstyle.css') }}">

  <!-- google font link -->
  <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=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

  <!-- preload images-->
  <link rel="preload" as="image" href="{{ asset('user/images/hero-banner.png') }}">
</head>

<body id="top">

  <!-- #HEADER-->
  <header class="header" data-header>
  <div class="container">
    <a href="#beranda" class="logo">Pintera</a>
    <nav class="navbar" data-navbar>
    <div class="wrapper">
      <a href="#" class="logo">Pintera</a>
      <button class="nav-close-btn" aria-label="close menu" data-nav-toggler><ion-icon name="close-outline" aria-hidden="true"></ion-icon></button>
    </div>
    <ul class="navbar-list">
      <li class="navbar-item">
        <a href="#beranda" class="navbar-link" data-nav-link>Beranda</a>
      </li>
      <li class="navbar-item">
        <a href="#kriteria" class="navbar-link" data-nav-link>Kriteria</a>
      </li>
      <li class="navbar-item">
        <a href="#tentang" class="navbar-link" data-nav-link>Tentang Sistem</a>
      </li>
      <li class="navbar-item">
        <a href="#perhitungan" class="navbar-link" data-nav-link>Perhitungan</a>
      </li>
    </ul>
    </nav>
    <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
      <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
    </button>
    <a href="{{ route('login') }}" class="btn btn-primary has-before has-after">Masuk</a>
    <div class="overlay" data-nav-toggler data-overlay></div>
  </div>
  </header>

  <main>
  <article>

  <!-- #HERO -->
  <section class="section hero" id="beranda" aria-label="hero">
  <div class="container">
  <div class="hero-content">
    <h1 class="h1 hero-title">Temukan <span class="has-before">Peminatan Terbaik</span>Sesuai Potensimu</h1>
    <p class="hero-text">Sistem ini membantumu memilih mata pelajaran berdasarkan minat, hasil psikotes, dan cita-cita karier agar masa depanmu lebih terarah.</p>
    <div class="wrapper">
      <a href="{{ route('login') }}" class="btn btn-primary has-before has-after">Mulai</a>
    </div>          
  </div>
  <figure class="hero-banner">
    <img src="{{ asset('user/images/hero-banner.png') }}" width="794" height="637" alt="hero banner" class="w-100">
  </figure>
  </div>
  </section>

  <!-- #SERVICE -->
  <section class="section service" id="kriteria" aria-label="kriteria">
  <div class="container">
    <p class="section-subtitle has-before text-center">Kriteria Penilaian</p>
    <h2 class="h2 section-title text-center">Penilaian didasarkan pada <span class="has-before">4 Kriteria Utama</span></h2>
    <ul class="grid-list">
      <li>
        <div class="service-card" style="--color: 174, 77%, 50%">
        <div class="card-icon">
          <i class="fa fa-lightbulb-o" style="font-size: 30px; color: hsl(174, 77%, 50%);" aria-hidden="true"></i>
        </div>
        <h3 class="h3"><a href="#" class="card-title">Angket Cita-Cita</a></h3>
        <p class="card-description">Berdasarkan aspirasi karir siswa untuk menentukan jalur akademik yang tepat.</p>
        </div>
      </li>
      <li>
        <div class="service-card" style="--color: 267, 76%, 57%">
        <div class="card-icon">
          <i class="fa fa-pie-chart" style="font-size: 28px; color: hsl(267, 76%, 57%);"></i>
        </div>
        <h3 class="h3"><a href="#" class="card-title">Hasil Psikotes</a></h3>
        <p class="card-description">Diperoleh dari tes psikologis untuk memahami kecenderungan minat dan bakat siswa.</p>
        </div>
      </li>
      <li>
        <div class="service-card" style="--color: 17, 100%, 68%">
        <div class="card-icon">
          <i class="fa fa-commenting" style="font-size: 28px; color: hsl(17, 100%, 68%);"></i>
        </div>
        <h3 class="h3"><a href="#" class="card-title">Bimbingan BK</a></h3>
        <p class="card-description">Hasil bimbingan BK yang memberikan wawasan tentang pengembangan pribadi siswa.</p>
        </div>
      </li>
      <li>
        <div class="service-card" style="--color: 343, 98%, 60%">
        <div class="card-icon">
          <i class="fa fa-book" style="font-size: 28px; color: hsl(343, 98%, 60%);"></i>
        </div>
        <h3 class="h3"><a href="#" class="card-title">Nilai Semester 1</a></h3>
        <p class="card-description">Nilai akademik siswa pada semester pertama sebagai acuan kemampuan dasar.</p>
        </div>
      </li>
    </ul>
  </div>
  </section>

  <!-- #FEATURE -->
  <section class="section feature" id="tentang" aria-label="tentang">
  <div class="container">
  <figure class="feature-banner">
    <img src="{{ asset('user/images/feature-banner.png') }}" width="582" height="585" loading="lazy" alt="feature banner"class="w-100">
  </figure>
  <div class="feature-content">
    <p class="section-subtitle has-before">Tentang Sistem</p>
    <h2 class="h2 section-title">Bantu siswa memilih <span class="has-before">mata pelajaran pilihan</span>yang sesuai</h2>
    <ul class="feature-list">
      <li>
        <div class="feature-card">
        <div class="card-icon" style="--color: 174, 77%, 50%">
          <ion-icon name="funnel-sharp" aria-hidden="true"></ion-icon>
        </div>
        <div>
          <h3 class="h3 card-title">Pemilihan Cepat & Tepat</h3>
          <p class="card-text">Sistem merekomendasi mata pelajaran berdasarkan data siswa.</p>
        </div>
        </div>
      </li>
      <li>
        <div class="feature-card">
        <div class="card-icon" style="--color: 241, 77%, 63%;">
          <ion-icon name="document-text-sharp" aria-hidden="true"></ion-icon>
        </div>
        <div>
          <h3 class="h3 card-title">Berbasis Data</h3>
          <p class="card-text">Gunakan hasil angket, psikotes, nilai, dan bimbingan guru sebagai bahan analisis.</p>
        </div>
        </div>
      </li>
      <li>
        <div class="feature-card">
        <div class="card-icon" style="--color: 343, 98%, 60%;">
          <ion-icon name="school-sharp" aria-hidden="true"></ion-icon>
        </div>
        <div>
          <h3 class="h3 card-title">Sesuai Kurikulum</h3>
          <p class="card-text">Mendukung kebijakan Kurikulum Merdeka yang memberi fleksibilitas siswa.</p>
        </div>
        </div>
      </li>
    </ul>
  </div>
  </div>
  </section>

  <!-- #PERHITUNGAN -->
  <section class="section newsletter has-bg-image" id="perhitungan" aria-label="perhitungan"style="background-image: url('/user/images/newsletter-bg.jpg')">
  <div class="container">
    <figure class="newsletter-banner">
      <img src="{{ asset('user/images/newsletter-banner.png') }}" width="355" height="356" loading="lazy"alt="newsletter banner" class="w-100">
    </figure>
  <div class="newsletter-content">
    <p class="section-subtitle has-before">Perhitungan</p>
    <h2 class="h2 section-title">Klik tombol di bawah untuk memulai perhitungan sesuai dengan kriteria yang telah ditentukan.</h2>
    <a href="{{ route('login') }}" class="btn btn-secondary has-before has-after">
        <span class="span">Mulai Perhitungan</span>
        <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
    </a>
  </div>
  </div>
  </section>

  
    </article>
    </main>


  <!-- #FOOTER -->
  <footer class="footer">
  <div class="container">
  <div class="footer-bottom">
    <p class="copyright">&copy; 2025 Sistem Pemilihan Mata Pelajaran. All Rights Reserved.</p>
  </div>
  </div>
  </footer>

  <!-- #BACK TO TOP -->
  <a href="#top" class="back-top-btn has-after active" aria-label="back to top" data-back-top-btn>
    <ion-icon name="arrow-up" aria-hidden="true"></ion-icon>
  </a>

  <!-- custom js link -->
  <script src="{{ asset('user/js/userscript.js') }}" defer></script>

  <!-- ionicon link-->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>