<!-- FEATURE (TENTANG) -->
<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-outline" 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-outline" 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-outline" 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>