@extends('user.layouts.v_template')
@section('style')
	<style>
		.single_feature {
			background: #fbfbfb;

			padding: 30px;

			border-radius: 20px;

			height: 100%;

			display: flex;
			flex-direction: column;

			transition: 0.3s;
		}

		.single_feature:hover {
			transform: translateY(-5px);
		}
	</style>
@endsection
@section('content')
	<!-- START HOME -->
	<section data-stellar-background-ratio="0.3" id="home" class="home_bg"
		style="background-image: url(assets/img/bg/newbg.jpg);  background-size:cover; background-position: center center;">
		<div class="container">
			<div class="row">
				<div class="col-lg-12 col-sm-12 col-xs-12 text-center">
					<div class="hero-text">
						<h2>Belajar Diagnosis Melalui Simulasi Kasus Interaktif</h2>
						<p>Analisis setiap gejala, pilih langkah diagnosis, dan temukan solusi terbaik berdasarkan alur
							berpikir yang tepat</p>
						<a href="{{ URL::to('/kasus') }}">Uji Kemampuanmu</a>
					</div>
				</div><!--- END COL -->
			</div><!--- END ROW -->
		</div><!--- END CONTAINER -->
	</section>
	<!-- END  HOME -->

	<!-- FEATURES -->
	<section class="feature_area">
		<div class="container">
			<div class="row feature_bg">
				<div class="section-title text-center">
					<h2>What will you get</h2>
					<p>Apa Saja yang Bisa Anda Dapatkan di Platform Ini</p>
				</div>
				<div class="col-lg-4 col-sm-6 col-xs-12 d-flex no-padding wow fadeInUp" data-wow-duration="1s"
					data-wow-delay="0.1s" data-wow-offset="0">
					<div class="single_feature">
						<img src="{{ asset('assets/img/icon/research.png') }}" alt="icon" />
						<h4>Materi Pembelajaran Berbasis Dunia Nyata</h4>
						<p>Pelajari teori dan konsep troubleshooting berdasarkan kasus yang sering terjadi di lapangan
							industri dan pekerjaan teknisi sehari-hari.</p>
					</div>
				</div><!-- END COL -->
				<div class="col-lg-4 col-sm-6 col-xs-12 d-flex no-padding wow fadeInUp" data-wow-duration="1s"
					data-wow-delay="0.1s" data-wow-offset="0">
					<div class="single_feature">
						<img src="{{ asset('assets/img/icon/simulation.png') }}" alt="icon" />
						<h4>Simulasi Studi Kasus Interaktif</h4>
						<p>Latih kemampuan analisis melalui skenario kerusakan yang dirancang menyerupai kondisi nyata
							sehingga proses belajar terasa lebih praktis.</p>
					</div>
				</div><!-- END COL -->
				<div class="col-lg-4 col-sm-6 col-xs-12 d-flex no-padding wow fadeInUp" data-wow-duration="1s"
					data-wow-delay="0.2s" data-wow-offset="0">
					<div class="single_feature">
						<img src="{{ asset('assets/img/icon/web.png') }}" alt="icon" />
						<h4>Evaluasi Diagnosis Bertahap</h4>
						<p>Setiap keputusan yang Anda ambil akan dianalisis untuk melihat ketepatan proses diagnosis dan
							logika troubleshooting Anda.</p>
					</div>
				</div><!-- END COL -->
				<div class="col-lg-4 col-sm-6 col-xs-12 d-flex no-padding wow fadeInUp" data-wow-duration="1s"
					data-wow-delay="0.3s" data-wow-offset="0">
					<div class="single_feature">
						<img src="{{ asset('assets/img/icon/strategy.png') }}" alt="icon" />
						<h4>Sistem Penilaian Otomatis</h4>
						<p>Dapatkan skor hasil belajar secara otomatis berdasarkan Ketepatan diagnosis, Pengambilan
							keputusan, danUrutan tindakan troubleshooting.</p>
					</div>
				</div><!-- END COL -->
				<div class="col-lg-4 col-sm-6 col-xs-12 d-flex no-padding wow fadeInUp" data-wow-duration="1s"
					data-wow-delay="0.4s" data-wow-offset="0">
					<div class="single_feature">
						<img src="{{ asset('assets/img/icon/design.png') }}" alt="icon" />
						<h4>Pembelajaran Berbasis Proses</h4>
						<p>Bukan hanya hasil akhir, sistem juga menilai bagaimana langkah Anda dalam menemukan sumber
							masalah.</p>
					</div>
				</div><!-- END COL -->
				<div class="col-lg-4 col-sm-6 col-xs-12 d-flex no-padding wow fadeInUp" data-wow-duration="1s"
					data-wow-delay="0.5s" data-wow-offset="0">
					<div class="single_feature">
						<img src="{{ asset('assets/img/icon/satisfaction.png') }}" alt="icon" />
						<h4>Feedback dan Refleksi Pembelajaran</h4>
						<p>Setelah menyelesaikan kasus, Anda akan mendapatkan Ringkasan evaluasi, Dampak dari tindakan yang
							dipilih, dan Pertanyaan refleksi untuk meningkatkan pemahaman</p>
					</div>
				</div><!-- END COL -->
			</div><!-- END ROW -->
		</div><!--- END CONTAINER -->
	</section>
	<!-- END FEATURES -->
	<section data-stellar-background-ratio="0.3" class="counter_feature section-padding">
		<div class="container">
			<div class="row text-center">
				<div class="col-lg-3 col-sm-6 col-xs-12 no-padding wow fadeInUp" data-wow-duration="1s"
					data-wow-delay="0.1s" data-wow-offset="0">
					<div class="single-project">
						<img src="{{ asset('assets/img/icon/counter-1.png') }}" alt="icon" />
						<h2 class="counter-num">{{ $user }}</h2>
						<h4>Pengguna Terdaftar</h4>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6 col-xs-12 no-padding wow fadeInUp" data-wow-duration="1s"
					data-wow-delay="0.2s" data-wow-offset="0">
					<div class="single-project">
						<img src="{{ asset('assets/img/icon/course.png') }}" alt="icon" />
						<h2 class="counter-num">{{ $materi }}</h2>
						<h4>Modul Pembelajaran</h4>
					</div>
				</div><!-- END COL -->
				<div class="col-lg-3 col-sm-6 col-xs-12 no-padding wow fadeInUp" data-wow-duration="1s"
					data-wow-delay="0.3s" data-wow-offset="0">
					<div class="single-project">
						<img src="{{ asset('assets/img/icon/simulation.png') }}" alt="icon" />
						<h2 class="counter-num">{{ $case }}</h2>
						<h4>Simulasi Kasus</h4>
					</div>
				</div><!-- END COL -->
				<div class="col-lg-3 col-sm-6 col-xs-12 no-padding wow fadeInUp" data-wow-duration="1s"
					data-wow-delay="0.4s" data-wow-offset="0">
					<div class="single-project single-project-mrnone">
						<img src="{{ asset('assets/img/icon/counter-4.png') }}" alt="icon" />
						<h2 class="counter-num">{{ $final }}</h2>
						<h4>Simulasi Diselesaikan</h4>
					</div>
				</div><!-- END COL -->
			</div><!--- END ROW -->
		</div><!--- END CONTAINER -->
	</section>
	<section class="why_choose_area section-padding">
		<div class="container">
			<div class="row">
				<div class="col-lg-6 col-sm-12 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s"
					data-wow-offset="0">
					<div class="single_why_choose">
						<h2>
							Belajar Troubleshooting <br />
							Secara Interaktif <br />
							dan Sistematis
						</h2>
						<p>
							Platform ini dirancang untuk membantu pengguna memahami proses
							diagnosis dan troubleshooting sistem pendingin melalui materi
							pembelajaran, simulasi kasus nyata, evaluasi keputusan, serta
							latihan penyusunan solusi secara bertahap.
							<br><br>
							Setiap proses pembelajaran dibuat lebih interaktif agar pengguna
							tidak hanya memahami teori, tetapi juga mampu menganalisis
							permasalahan dan menentukan tindakan yang tepat seperti kondisi
							di dunia kerja nyata.
						</p>
						<a class="btn_one" href="{{ URL::to('/materi') }}">
							Mulai Belajar
						</a>
					</div>
				</div><!--- END COL -->
				<div class="col-lg-6 col-sm-12 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s"
					data-wow-offset="0">
					<div class="single_why_choose_img">
						<img src="assets/img/home-office.png" class="img-fluid" alt="about-image" />
					</div>
				</div><!--- END COL -->
			</div><!--- END ROW -->
		</div><!--- END CONTAINER -->
	</section>

	<!-- END PARTNER LOGO -->
@endsection