<!doctype html>
<html lang="en" data-layout="vertical" data-layout-style="detached" data-sidebar="light" data-topbar="dark"
    data-sidebar-size="lg">

<head>

    <meta charset="utf-8" />
    <title>SPK-TANI | HOME</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="Themesbrand" name="author" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="{{ asset('assets/images/favicon.ico') }}">

    <!--Swiper slider css-->
    <link href="{{ asset('assets/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- Layout config Js -->
    <script src="{{ asset('assets/js/layout.js') }}"></script>
    <!-- Bootstrap Css -->
    <link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="{{ asset('assets/css/app.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- custom Css-->
    <link href="{{ asset('assets/css/custom.min.css') }}" rel="stylesheet" type="text/css" />

    <style>
        .bg-overlay-pattern {
            background-image: url({{ asset('assets/images/landingpage/hero-home.png') }});
        }

        .bg-overlay {
            opacity: 0.6;
        }
    </style>

</head>

<body data-bs-spy="scroll" data-bs-target="#navbar-example">

    <!-- Begin page -->
    <div class="layout-wrapper landing">
        <nav class="navbar navbar-expand-lg navbar-landing fixed-top" id="navbar">
            <div class="container">
                <a class="navbar-brand" href="{{ route('home.index') }}">
                    <img src="{{ asset('assets/images/landingpage/logo-spk-tani.png') }}"
                        class="card-logo card-logo-dark" alt="logo dark" height="60">
                    <img src="{{ asset('assets/images/landingpage/logo-spk-tani.png') }}"
                        class="card-logo card-logo-light" alt="logo light" height="60">
                </a>
                <button class="navbar-toggler py-0 fs-20 text-body" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <i class="mdi mdi-menu"></i>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mx-auto mt-2 mt-lg-0" id="navbar-example">
                        <li class="nav-item">
                            <a class="nav-link fs-15 active" href="#hero">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-15" href="#features">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-15" href="#services">Tutorial</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-15" href="{{ route('user-result-preferensi.index') }}">Result</a>
                        </li>
                        {{-- <li class="nav-item">
                            <a class="nav-link fs-15" href="#team">Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-15" href="#contact">Contact</a>
                        </li> --}}
                    </ul>

                    {{-- <div class="">
                        @if (Auth::user() == null)
                            <a href="{{ route('login.index') }}"
                                class="btn btn-link fw-medium text-decoration-none text-dark">
                                Login
                            </a>
                            <a href="{{ route('registrasi.index') }}" class="btn btn-primary">
                                Registrasi
                            </a>
                        @else
                            <form id="logout-form" action="{{ route('logout') }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-primary">
                                    Logout
                                </button>
                            </form>
                        @endif
                    </div> --}}
                </div>

            </div>
        </nav>
        <!-- end navbar -->

        <!-- start hero section -->
        <section class="section pb-0 hero-section" id="hero">
            <div class="bg-overlay bg-overlay-pattern"></div>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8 col-sm-10">
                        <div class="text-center mt-lg-5 pt-5">
                            <h1 class="display-6 fw-semibold mb-3 lh-base">Rekomendasi tanaman pangan
                                bersama
                                <span class="text-success">SPK-TANI</span>
                            </h1>
                            <p class="lead text-muted lh-base px-2">Sistem pendukung keputusan kesesuaian lahan
                                terhadap
                                jenis tanaman pangan menggunakan metode topsis</p>

                            <div class="d-flex gap-2 justify-content-center mt-4">
                                <a href="{{ route('user-result-preferensi.index') }}" class="btn btn-primary">
                                    Mulai
                                    <i class="ri-arrow-right-line align-middle ms-1"></i>
                                </a>
                                {{-- <a href=""
                                    class="btn btn-danger">View Plans <i class="ri-eye-line align-middle ms-1"></i></a> --}}
                            </div>
                        </div>

                        <div class="mt-4 mt-sm-5 pt-sm-5 mb-sm-n5 demo-carousel">
                            {{-- <div class="demo-img-patten-top d-none d-sm-block">
                                <img src="assets/images/landing/img-pattern.png" class="d-block img-fluid"
                                    alt="...">
                            </div>
                            <div class="demo-img-patten-bottom d-none d-sm-block">
                                <img src="assets/images/landing/img-pattern.png" class="d-block img-fluid"
                                    alt="...">
                            </div> --}}
                            <div class="carousel slide carousel-fade" data-bs-ride="carousel">
                                <div class="carousel-inner shadow-lg p-2 bg-white rounded">
                                    <div class="carousel-item active" data-bs-interval="2000">
                                        <img src="{{ asset('assets/images/landingpage/result-1.png') }}"
                                            class="d-block w-100" alt="...">
                                    </div>
                                    <div class="carousel-item" data-bs-interval="2000">
                                        <img src="{{ asset('assets/images/landingpage/result-2.png') }}"
                                            class="d-block w-100" alt="...">
                                    </div>
                                    <div class="carousel-item" data-bs-interval="2000">
                                        <img src="{{ asset('assets/images/landingpage/result-3.png') }}"
                                            class="d-block w-100" alt="...">
                                    </div>
                                    {{-- <div class="carousel-item" data-bs-interval="2000">
                                        <img src="assets/images/demos/minimal.png" class="d-block w-100"
                                            alt="...">
                                    </div>
                                    <div class="carousel-item" data-bs-interval="2000">
                                        <img src="assets/images/demos/creative.png" class="d-block w-100"
                                            alt="...">
                                    </div>
                                    <div class="carousel-item" data-bs-interval="2000">
                                        <img src="assets/images/demos/modern.png" class="d-block w-100"
                                            alt="...">
                                    </div>
                                    <div class="carousel-item" data-bs-interval="2000">
                                        <img src="assets/images/demos/interactive.png" class="d-block w-100"
                                            alt="...">
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
            {{-- <div class="position-absolute start-0 end-0 bottom-0 hero-shape-svg">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 1440 120">
                    <g mask="url(&quot;#SvgjsMask1003&quot;)" fill="none">
                        <path d="M 0,118 C 288,98.6 1152,40.4 1440,21L1440 140L0 140z">
                        </path>
                    </g>
                </svg>
            </div> --}}
            <!-- end shape -->
        </section>
        <!-- end hero section -->


        <!-- start features -->
        <section class="section py-5" id="features">
            <div class="container">
                <div class="row align-items-center gy-4">
                    <div class="col-lg-6 col-sm-7 mx-auto">
                        <div>
                            <img src="{{ asset('assets/images/landingpage/hero-2.png') }}" alt=""
                                class="img-fluid mx-auto">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="text-muted">
                            <div class="avatar-sm icon-effect mb-4">
                                <div class="avatar-title bg-transparent rounded-circle text-success h1">
                                    <i class="ri-collage-line fs-36"></i>
                                </div>
                            </div>
                            <h3 class="mb-3 fs-20">Sistem pendukung keputusan</h3>
                            <p class="mb-4 ff-secondary fs-16">
                                Sistem Pendukung Keputusan adalah sistem yang memberikan sebuah rekomendasi khususnya
                                tanaman pangan dengan sebuah perhitungan salah satunya menggunakan metode topsis.
                            </p>

                            <h3 class="mb-3 fs-20">Metode TOPSIS</h3>
                            <p class="mb-4 ff-secondary fs-16">
                                TOPSIS (Technique for Order of Preference by Similarity to Ideal Solution) adalah salah
                                satu metode yang digunakan untuk pengambilan keputusan dalam memilih alternatif terbaik
                                berdasarkan kriteria.
                            </p>
                        </div>
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </section>
        <!-- end features -->

        <!-- start services -->
        <section class="section bg-light" id="services">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="text-center mb-5">
                            <h1 class="mb-3 ff-secondary fw-semibold lh-base">
                                Tutorial melihat hasil rekomendasi tanaman pangan
                            </h1>
                            <p class="text-muted">
                                Berikut langkah-langkah yang harus dilakukan ketika ingin melihat hasil rekomendasi
                                tanaman pangan (Tahunan) :
                            </p>
                        </div>
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->

                <div class="row g-3">
                    <!-- end col -->
                    <div class="col-lg-4">
                        <div class="d-flex p-3">
                            <div class="flex-shrink-0 me-3">
                                <div class="avatar-sm icon-effect">
                                    <div class="avatar-title bg-transparent text-success rounded-circle">
                                        <i class="ri-number-1 fs-36"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h5 class="fs-18">Mulai</h5>
                                <p class="text-muted my-3 ff-secondary" style="text-align: justify">
                                    Mulai pada judul halaman akan mengarahkan anda kedalam halaman hasil preferensi
                                    tanaman untuk setiap kecamatan yang ada di kabupaten bondowoso.
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- end col -->
                    <div class="col-lg-4">
                        <div class="d-flex p-3">
                            <div class="flex-shrink-0 me-3">
                                <div class="avatar-sm icon-effect">
                                    <div class="avatar-title bg-transparent text-success rounded-circle">
                                        <i class="ri-number-2 fs-36"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h5 class="fs-18">Halaman rekomendasi tanaman</h5>
                                <p class="text-muted my-3 ff-secondary" style="text-align: justify">
                                    Pada halaman ini user dapat melihat melalui peta dan tabel hasil rekomendasi tanaman
                                    pada setiap kecamatan.
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- end col -->
                    <div class="col-lg-4">
                        <div class="d-flex p-3">
                            <div class="flex-shrink-0 me-3">
                                <div class="avatar-sm icon-effect">
                                    <div class="avatar-title bg-transparent text-success rounded-circle">
                                        <i class="ri-number-3 fs-36"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h5 class="fs-18">Peta dan tabel hasil rekomendasi tanaman</h5>
                                <p class="text-muted my-3 ff-secondary" style="text-align: justify">
                                    Pada peta anda akan disajikan data akumulasi tahunan dari hasil rekomendasi tanaman.
                                    Pada tabel anda akan disajikan data bulanan dari hasil rekomendasi tanaman per
                                    kecamatan.
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </section>
        <!-- end services -->

        <!-- Start footer -->
        <footer class="custom-footer bg-dark py-5 position-relative">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 mt-4">
                        <div>
                            <div>
                                <img src="{{ asset('assets/images/landingpage/logo-spk-tani.png') }}"
                                    alt="logo light" height="60">
                            </div>
                            <div class="mt-4 text-justify">
                                <p>Sistem Pendukung Keputusan Kesesuaian Lahan Terhadap Jenis Tanaman Pangan</p>
                                <p class="ff-secondary">Sistem Pendukung Keputusan yang memberikan sebuah
                                    rekomendasi khususnya tanaman pangan dengan sebuah perhitungan salah satunya
                                    menggunakan metode topsis. TOPSIS (Technique for Order of Preference by Similarity
                                    to Ideal Solution) adalah salah satu metode yang digunakan untuk pengambilan
                                    keputusan dalam memilih alternatif terbaik berdasarkan kriteria.</p>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row text-center text-sm-start align-items-center mt-5">
                    <div class="col-sm-6">

                        <div>
                            <p class="copy-rights mb-0">
                                <script>
                                    document.write(new Date().getFullYear())
                                </script> © Velzon - Themesbrand
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end footer -->
    </div>

    <!-- JAVASCRIPT -->
    <script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}"></script>
    <script src="{{ asset('assets/libs/node-waves/waves.min.js') }}"></script>
    <script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/plugins/lord-icon-2.1.0.js') }}"></script>
    <script src="{{ asset('assets/js/plugins.js') }}"></script>

    <!--Swiper slider js-->
    <script src="{{ asset('assets/libs/swiper/swiper-bundle.min.js') }}"></script>

    <!-- landing init -->
    <script src="{{ asset('assets/js/pages/landing.init.js') }}"></script>
</body>

</html>
