<!-- 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="#perhitungan" 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>