@extends('layouts.app')
@section('content')
<section class="bg-white dark:bg-gray-900 pt-20">
  <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
    <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Panduan Masyarakat</h1>
    <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">Di bawah ini terdapat beberapa panduan untuk menggunakan website Tectcrime guna membantu masyarakat dalam memanfaatkan layanan ini secara efektif.</p>
  </div>
</section>

<div class="px-28 pb-20" id="accordion-open" data-accordion="open">
    <h2 id="accordion-open-heading-1">
        <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-1" aria-expanded="true" aria-controls="accordion-open-body-1">
        <span class="flex items-center"><svg class="w-5 h-5 me-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg> Cara masuk dan mendaftar di website Tectcrime sebagai masyarakat</span>
        <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
        </svg>
        </button>
    </h2>
    <div id="accordion-open-body-1" class="hidden" aria-labelledby="accordion-open-heading-1">
        <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
            <div class="max-w-2xl mx-auto">
                <h2 class="mb-4 text-2xl font-bold">Cara Mendaftar di Website Tectcrime</h2>
                <ol class="list-decimal pl-5">
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Akses Halaman Pendaftaran</h3>
                    <p>Buka website Tectcrime di browser Anda. Lalu, cari dan klik pada tautan "Daftar" atau "Buat Akun Baru".</p>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Isi Formulir Pendaftaran</h3>
                    <p>Anda akan diarahkan ke halaman formulir pendaftaran. Kemudian, isi bidang-bidang berikut dengan informasi yang benar:</p>
                    <ul class="list-disc" style="margin-left: 2%;">
                        <li><strong>Nama</strong>: Masukkan nama lengkap Anda.</li>
                        <li><strong>Email</strong>: Masukkan alamat email yang valid dan aktif.</li>
                        <li><strong>Password</strong>: Buat password yang kuat dan mudah diingat.</li>
                        <li><strong>Ulangi Password</strong>: Ketik ulang password yang sama untuk konfirmasi.</li>
                    </ul>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Verifikasi Informasi</h3>
                    <p>Periksa kembali informasi yang Anda masukkan untuk memastikan tidak ada kesalahan.</p>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Setujui Persyaratan dan Ketentuan</h3>
                    <p>Baca dengan seksama Persyaratan dan Ketentuan yang berlaku. Lalu, centang kotak yang menyatakan bahwa Anda menyetujui Persyaratan dan Ketentuan tersebut.</p>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Selesaikan Pendaftaran</h3>
                    <p>Klik tombol "Daftar" untuk menyelesaikan proses pendaftaran.</p>
                    </li>
                </ol>

                <h2 class="mb-4 text-2xl font-bold mt-8">Cara Masuk ke Website Tectcrime</h2>
                <ol class="list-decimal pl-5">
                    <li class="mb-2">
                        <h3 class="text-lg font-semibold">Akses Halaman Masuk</h3>
                        <p>Buka website Tectcrime di browser Anda. Lalu, cari dan klik pada tautan "Masuk".</p>
                    </li>
                    <li class="mb-2">
                        <h3 class="text-lg font-semibold">Masukkan Kredensial</h3>
                        <Masukkan>Anda akan diarahkan ke halaman masuk. Lalu, masukkan informasi berikut:</p>
                        <ul class="list-disc mx-10" style="margin-left: 2%;">
                            <li><strong>Email</strong>: Masukkan alamat email yang Anda gunakan saat mendaftar.</li>
                            <li><strong>Password</strong>: Masukkan password yang sesuai dengan akun Anda.</li>
                        </ul>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Klik Tombol Masuk</h3>
                    <p>Setelah mengisi kredensial dengan benar, klik tombol "Masuk".</p>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Akses Akun Anda</h3>
                    <p>Jika kredensial Anda valid, Anda akan masuk ke akun Anda dan dapat mengakses fitur-fitur dan layanan yang tersedia di website Tectcrime.</p>
                    </li>
                </ol>

                <p class="mt-4">Pastikan untuk selalu menjaga keamanan akun Anda dengan menggunakan password yang kuat dan tidak membagikan informasi akun Anda kepada pihak lain. Jika Anda mengalami masalah saat mendaftar atau masuk, hubungi tim dukungan kami untuk mendapatkan bantuan lebih lanjut.</p>
            </div>
        </div>
    </div>
    <h2 id="accordion-open-heading-2">
        <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-2" aria-expanded="false" aria-controls="accordion-open-body-2">
        <span class="flex items-center"><svg class="w-5 h-5 me-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg> Bagaimana cara mengirim laporan foto pelaku kejahatan?</span>
        <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
        </svg>
        </button>
    </h2>
    <div id="accordion-open-body-2" class="hidden" aria-labelledby="accordion-open-heading-2">
        <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
            <div class="max-w-2xl mx-auto">
                <h2 class="mb-4 text-2xl font-bold">Cara Mengirim Laporan Foto Pelaku Kejahatan</h2>
                <ol class="list-decimal pl-5">
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Masuk ke Menu Dashboard</h3>
                    <p>Setelah berhasil masuk ke akun Anda, Anda akan diarahkan ke halaman Dashboard.</p>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Klik Menu Lapor Pelaku</h3>
                    <p>Di menu Dashboard, cari dan klik pada menu atau tautan yang bertuliskan "Lapor Pelaku".</p>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Lengkapi Bidang/Kolom</h3>
                    <p>Anda akan diarahkan ke halaman formulir untuk melaporkan pelaku kejahatan. Lengkapi bidang/kolom berikut:</p>
                    <ul class="list-disc pl-5 mb-2" style="margin-left: 2%;">
                        <li><strong>Tanggal Pelaku Terduga Terlihat</strong>: Masukkan tanggal ketika Anda melihat pelaku terduga melakukan kejahatan.</li>
                        <li><strong>Deskripsi Detail</strong>: Berikan deskripsi lengkap tentang lokasi dan waktu kejadian, serta detail lain yang relevan.</li>
                        <li><strong>Upload Foto Pelaku</strong>: Klik tombol "Upload" atau "Browse" untuk memilih dan mengunggah foto pelaku terduga yang Anda miliki.</li>
                    </ul>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Klik Kirim Laporan</h3>
                    <p>Setelah mengisi semua bidang/kolom dengan benar, klik tombol "Kirim Laporan" untuk mengirimkan laporan Anda.</p>
                    </li>
                </ol>

                <p class="mt-4">Setelah laporan Anda berhasil dikirim, tim kami akan meninjau dan memproses laporan tersebut. Kami sangat menghargai kontribusi Anda dalam upaya menangani kejahatan di lingkungan kita.</p>
            </div>
        </div>
    </div>
    <h2 id="accordion-open-heading-3">
        <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-3" aria-expanded="false" aria-controls="accordion-open-body-3">
        <span class="flex items-center"><svg class="w-5 h-5 me-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg> Bagaimana cara merubah kata sandi (password) akun?</span>
        <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
        </svg>
        </button>
    </h2>
    <div id="accordion-open-body-3" class="hidden" aria-labelledby="accordion-open-heading-3">
        <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
            <div class="max-w-2xl mx-auto">
                <h2 class="mb-4 text-2xl font-bold">Cara Mengubah Kata Sandi (Password) Akun</h2>
                <ol class="list-decimal pl-5">
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Masuk ke Menu Dashboard</h3>
                    <p>Setelah berhasil masuk ke akun Anda, Anda akan diarahkan ke halaman Dashboard.</p>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Klik Menu Ubah Password</h3>
                    <p>Di menu Dashboard, cari dan klik pada menu atau tautan yang bertuliskan "Ubah Password".</p>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Isi Bidang/Kolom</h3>
                    <p>Anda akan diarahkan ke halaman formulir untuk mengubah kata sandi. Lengkapi bidang/kolom berikut:</p>
                    <ul class="list-disc pl-5 mb-2" style="margin-left: 2%;">
                        <li><strong>Password Lama</strong>: Masukkan kata sandi akun Anda yang saat ini digunakan.</li>
                        <li><strong>Password Baru</strong>: Masukkan kata sandi baru yang kuat dan mudah diingat.</li>
                        <li><strong>Ulangi Password Baru</strong>: Ketikkan kembali kata sandi baru yang sama untuk konfirmasi.</li>
                    </ul>
                    </li>
                    <li class="mb-2">
                    <h3 class="text-lg font-semibold">Klik Simpan Perubahan</h3>
                    <p>Setelah mengisi semua bidang/kolom dengan benar, klik tombol "Simpan Perubahan" untuk mengonfirmasi perubahan kata sandi.</p>
                    </li>
                </ol>

                <p class="mt-4">Kata sandi baru Anda akan segera berlaku, dan Anda harus menggunakan kata sandi baru ini untuk masuk ke akun Anda di kemudian hari. Jangan lupa untuk mengingat atau mencatat kata sandi baru Anda dengan aman.</p>
            </div>
        </div>
    </div>
    <h2 id="accordion-open-heading-4">
        <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-open-body-4" aria-expanded="false" aria-controls="accordion-open-body-4">
        <span class="flex items-center"><svg class="w-5 h-5 me-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg> Syarat dan ketentuan dalam penggunaan website Tectcrime</span>
        <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
        </svg>
        </button>
    </h2>
    <div id="accordion-open-body-4" class="hidden" aria-labelledby="accordion-open-heading-4">
        <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
            <div class="max-w-2xl mx-auto">
                <h2 class="mb-4 text-2xl font-bold">Syarat dan Ketentuan dalam Penggunaan Website Tectcrime</h2>
                <p class="mb-4">Dengan menggunakan website Tectcrime, Anda setuju untuk terikat dengan syarat dan ketentuan berikut:</p>

                <h3 class="text-lg mb-2 font-semibold">1. Penggunaan yang Sah</h3>
                <p class="mb-4">Website Tectcrime hanya dapat digunakan untuk tujuan yang sah dan tidak melanggar hukum. Anda tidak diperbolehkan menggunakan website ini untuk tujuan yang melanggar hukum atau membahayakan orang lain.</p>

                <h3 class="text-lg mb-2 font-semibold">2. Akurasi Informasi</h3>
                <p class="mb-4">Kami berusaha untuk menyediakan informasi yang akurat dan terkini di website Tectcrime. Namun, kami tidak menjamin keakuratan atau kelengkapan informasi yang disediakan. Anda bertanggung jawab untuk memverifikasi informasi tersebut sebelum bertindak berdasarkan informasi tersebut.</p>

                <h3 class="text-lg mb-2 font-semibold">3. Privasi dan Keamanan</h3>
                <p class="mb-4">Kami berkomitmen untuk melindungi privasi dan keamanan informasi pengguna. Kami akan mengumpulkan dan menggunakan informasi pribadi Anda sesuai dengan kebijakan privasi kami.</p>

                <h3 class="text-lg mb-2 font-semibold">4. Batasan Tanggung Jawab</h3>
                <p class="mb-4">Kami tidak bertanggung jawab atas segala kerugian atau kerusakan yang timbul dari penggunaan website Tectcrime. Kami juga tidak menjamin ketersediaan atau kinerja website ini tanpa gangguan.</p>

                <p class="mt-4">Syarat dan ketentuan ini dapat diperbarui dari waktu ke waktu. Kami menyarankan Anda untuk membaca syarat dan ketentuan ini secara teratur untuk mengetahui perubahan yang mungkin terjadi.</p>
            </div>
        </div>
    </div>
</div>
@endsection