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

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <title>Space Dynamic - SEO HTML5 Template</title>

    <!-- Bootstrap core CSS -->
    <!-- Bootstrap core CSS -->
    <link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

    <!-- Additional CSS Files -->
    <link rel="stylesheet" href="{{ asset('assets/css/fontawesome.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/templatemo-space-dynamic.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/animated.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/owl.css') }}">

    <!--
    
TemplateMo 562 Space Dynamic

https://templatemo.com/tm-562-space-dynamic

-->
</head>

<body>

    <!-- ***** Preloader Start ***** -->
    <div id="js-preloader" class="js-preloader">
        <div class="preloader-inner">
            <span class="dot"></span>
            <div class="dots">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <!-- ***** Preloader End ***** -->

    <!-- ***** Header Area Start ***** -->
    <header class="header-area header-sticky wow slideInDown" data-wow-duration="0.75s" data-wow-delay="0s">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav class="main-nav">
                        <!-- ***** Logo Start ***** -->
                        <a href="index.html" class="logo">
                            <h4>Sistem<span>Pakar</span></h4>
                        </a>
                        <!-- ***** Logo End ***** -->
                        <!-- ***** Menu Start ***** -->
                        <ul class="nav">
                            <li class="scroll-to-section"><a href="#top" class="active">Home</a></li>
                            <li class="scroll-to-section"><a href="#basic">Basic Pengetahuan</a></li>
                            <li class="scroll-to-section"><a href="#PP">Panduan Penggunaan</a></li>
                            <li class="scroll-to-section"><a href="#diagnosa">Diagnosa</a></li>
                            <li class="scroll-to-section">
                                <div class="main-red-button"><a href="#contact">Login</a></div>
                            </li>
                        </ul>
                        <a class='menu-trigger'>
                            <span>Menu</span>
                        </a>
                        <!-- ***** Menu End ***** -->
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <!-- ***** Header Area End ***** -->

    <div class="main-banner wow fadeIn" id="top" data-wow-duration="1s" data-wow-delay="0.5s">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-6 align-self-center">
                            <div class="left-content header-text wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1s">
                                <h6>Selamat Datang di Sistem Diagnosa Penyakit Bawang Merah</h6>
                                <h2>Temukan<em> Gejala</em> &amp; <span>Solusi</span> Yang Tepat </h2>
                                <p>Sistem ini membantu Anda mendiagnosa penyakit bawang merah berdasarkan gejala yang terdeteksi, serta memberikan rekomendasi penanganan yang sesuai.</p>
                                <form id="search" action="#" method="GET">
                                    <fieldset>
                                        <div class="email">Masalah Pada Tanaman</div>
                                    </fieldset>
                                    <fieldset>
                                        <button type="submit" class="main-button">Konsultasi Sekarang</button>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="right-image wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
                                <img src="assets/images/banner-right-Bawang-Merah.jpg" alt="team meeting">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="basic" class="about-us section">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="left-image wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
                        <img src="assets/images/about-left-image.png" alt="person graphic">
                    </div>
                </div>
                <div class="col-lg-8 align-self-center">
                    <div class="services">
                        <div class="row">
                            <div class="penjelasan">
                                <p>Kenali penyakit yang dapat menyerang bawang merah Anda! Berikut adalah daftar penyakit yang sering ditemukan pada tanaman bawang merah</p>
                            </div>
                            <div class="col-lg-6">
                                <div class="item wow fadeIn" data-wow-duration="1s" data-wow-delay="0.7s">
                                    <div class="icon">
                                        <img src="assets/images/virus.png" alt="">
                                    </div>
                                    <div class="right-text">
                                        <div>
                                            <h4>Moler</h4>
                                            <p>Penyakit yang menyebabkan pembusukan akar, pertumbuhan batang semu yang lebih panjang, serta daun menguning dan layu, menghambat perkembangan tanaman bawang merah.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item wow fadeIn" data-wow-duration="1s" data-wow-delay="0.9s">
                                    <div class="icon">
                                        <img src="assets/images/virus.png" alt="">
                                    </div>
                                    <div class="right-text">
                                        <div>
                                            <h4>Busuk Daun</h4>
                                            <p>Penyakit yang menyebabkan daun membusuk, muncul bercak coklat atau hitam, serta dapat menyebar cepat dan melemahkan tanaman bawang merah.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item wow fadeIn" data-wow-duration="1s" data-wow-delay="1.1s">
                                    <div class="icon">
                                        <img src="assets/images/virus.png" alt="">
                                    </div>
                                    <div class="right-text">
                                        <div>
                                            <h4>Mosaik</h4>
                                            <p>Penyakit yang menyebabkan daun bawang belang hijau pucat atau kuning, pertumbuhan tanaman kerdil, dan umbi berukuran kecil.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item wow fadeIn" data-wow-duration="1s" data-wow-delay="1.1s">
                                    <div class="icon">
                                        <img src="assets/images/virus.png" alt="">
                                    </div>
                                    <div class="right-text">
                                        <div>
                                            <h4>Mati Pucuk</h4>
                                            <p>Penyakit yang menyebabkan daun layu, mengering, dan akhirnya mati, sering kali dimulai dari ujung daun.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item wow fadeIn" data-wow-duration="1s" data-wow-delay="1.1s">
                                    <div class="icon">
                                        <img src="assets/images/virus.png" alt="">
                                    </div>
                                    <div class="right-text">
                                        <div>
                                            <h4>Embun Bulu</h4>
                                            <p>Penyakit yang ditandai dengan bercak putih atau kelabu pada daun, menyebabkan daun menguning, layu, dan pertumbuhan tanaman terhambat.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
                                    <div class="icon">
                                        <img src="assets/images/virus.png" alt="reporting">
                                    </div>
                                    <div class="right-text">
                                        <div>
                                            <h4>Bercak Ungu</h4>
                                            <p>Penyakit yang menyebabkan bercak ungu kemerahan pada daun dan dapat menghambat pertumbuhan tanaman.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="PP" class="our-portfolio section">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 offset-lg-3">
                    <div class="section-heading  wow bounceIn" data-wow-duration="1s" data-wow-delay="0.2s">
                        <h2>Panduan <em>Penggunaan</em> &amp; Cara <span>Kerja</span></h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <a href="#">
                        <div class="item wow bounceInUp" data-wow-duration="1s" data-wow-delay="0.3s">
                            <div class="hidden-content">
                                <h4>Register</h4>
                                <p>Daftarkan akun Anda untuk mengakses sistem diagnosa penyakit bawang merah.</p>                            </div>
                            <div class="showed-content">
                                <h3>STEP</h3>
                                <h1>1</h1>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <a href="#">
                        <div class="item wow bounceInUp" data-wow-duration="1s" data-wow-delay="0.4s">
                            <div class="hidden-content">
                                <h4>Login</h4>
                                <p>Masuk ke sistem untuk mulai melakukan diagnosa berdasarkan gejala yang Anda temukan.</p>                            </div>
                            <div class="showed-content">
                            <h3>STEP</h3>
                            <h1>2</h1>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <a href="#">
                        <div class="item wow bounceInUp" data-wow-duration="1s" data-wow-delay="0.5s">
                            <div class="hidden-content">
                                <h4>Memilih Gejala</h4>
                                <p>Pilih gejala yang muncul pada tanaman bawang merah Anda untuk mendapatkan analisis yang akurat.</p>                            </div>
                            <div class="showed-content">
                            <h3>STEP</h3>
                            <h1>3</h1>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <a href="#">
                        <div class="item wow bounceInUp" data-wow-duration="1s" data-wow-delay="0.6s">
                            <div class="hidden-content">
                                <h4>Hasil Diagnosa</h4>
                                <p>Dapatkan hasil diagnosa lengkap beserta solusi untuk mengatasi penyakit bawang merah.</p>                            </div>
                            <div class="showed-content">
                            <h3>STEP</h3>
                            <h1>4</h1>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

  

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.25s">
                    <p>© Copyright 2024 by Ihya Ulumuddin
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <!-- Scripts -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/owl-carousel.js"></script>
    <script src="assets/js/animation.js"></script>
    <script src="assets/js/imagesloaded.js"></script>
    <script src="assets/js/templatemo-custom.js"></script>

</body>

</html>