MIF_E31222313/resources/views/welcome.blade.php

218 lines
8.4 KiB
PHP

<!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>