TIF_E41201209/Siketas_map_FIX/resources/views/users/kecelakaan.blade.php

@extends('users/layouts.template')

@section('content')

<style>

</style>
<section class="wrapper bg-light">
    <div class="container pt-6 pt-md-14 pb-14 pb-md-16 text-center">
        <div class="row d-flex align-items-center justify-content-center">
            <!-- /column -->
            <div class="col-md-10 offset-md-1 offset-lg-0 text-center">
                <h1 class="display-1 fs-54 mb-5 mx-md-n5 mx-lg-0 mt-7 pb-10 arial">KECELAKAAN LALU LINTAS</h1>
                <p class="lead fs-lg mb-7" style="text-align: justify;">
                Kecelakaan lalu lintas adalah kejadian yang tidak terduga di jalan yang melibatkan kendaraan dan dapat menyebabkan cedera pada manusia atau kerugian materi. Kejadian ini bisa melibatkan satu atau lebih kendaraan, serta pengguna jalan lainnya seperti pejalan kaki atau pengendara sepeda.
                </p>
            </div>
            <!-- /column -->
        </div>
        <!-- /.row -->
        <hr>
        <div class="row d-flex align-items-center justify-content-center pt-8">
            <div class="container pt-12 pt-lg-8 pb-14 pb-md-10">
                <div class="row text-center">
                    <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                        <!-- <h2 class="fs-16 text-uppercase text-primary mb-3">What We Do?</h2> -->
                        <h4 class="display-4 mb-10 px-xxl-10 arial">Penyebab Terjadinya Kecelakaan</h4>
                    </div>
                </div>
                <!-- /.row -->
                <div class="row gx-lg-8 gx-xl-12 gy-11 px-xxl-5 text-center d-flex align-items-end">
                    <div class="col-lg-3 px-2">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row align-items-center">
                                    <div>
                                        <img class="img-fluid" src="assets/dashboard/images/human.jpg" class="card-img-top" alt="Image" alt="Image">
                                    </div>
                                </div>
                                <div>
                                    <h3>Faktor Manusia</h3>
                                    <p class="mb-2" style="font-size: 20px;">Kelalaian pengguna jalan yang mengemudi dalam kondisi tidak fokus,
                                        mengantuk, kelelahan, mabuk atau terpengaruh obat-obatan, bermain ponsel, dan tidak mematuhi aturan lalu lintas yang berlaku.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 px-2">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row align-items-center">
                                    <div>
                                        <img class="img-fluid" src="assets/dashboard/images/kendaraan.jpg" class="card-img-top" alt="Image" alt="Image">
                                    </div>
                                </div>
                                <div>
                                    <h3>Faktor Kendaraan</h3>
                                    <p class="mb-2" style="font-size: 20px;">Kendaraan yang tidak terawat dengan baik, sistem pengereman yang rusak,
                                        ban yang tidak layak, muatan berlebih, serta kendaraan yang tidak dilengkapi dengan perangkat keselamatan yang memadai.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 px-2">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row align-items-center">
                                    <div>
                                        <img class="img-fluid" src="assets/dashboard/images/jalan.png" class="card-img-top" alt="Image" alt="Image">
                                    </div>
                                </div>
                                <div>
                                    <h3>Faktor Jalan</h3>
                                    <p class="mb-2" style="font-size: 20px;">Kondisi jalan kurang memadai seperti berlubang, kurangnya sistem penerangan,
                                        ketiadaan rambu-rambu lalu lintas yang jelas, atau pencahayaan yang tidak memadai, serta desain jalan yang kurang aman.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 px-2">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row align-items-center">
                                    <div>
                                        <img class="img-fluid" src="assets/dashboard/images/lingkungan.jpg" class="card-img-top" alt="Image">
                                    </div>
                                </div>
                                <div>
                                    <h3>Faktor Lingkungan</h3>
                                    <p class="mb-2" style="font-size: 20px;">Kondisi lingkungan seperti cuaca buruk, jalan yang licin akibat hujan atau salju,
                                        atau gangguan lainnya seperti kabut tebal atau angin kencang juga dapat menyebabkan kecelakaan.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/column -->
                </div>
                <!--/.row -->
            </div>
        </div>
        <hr>
        <div class="row d-flex pt-8">
            <div class="container pt-12 pt-lg-8 pb-8 pb-md-17">
                <div class="row text-center">
                    <h4 class="display-4 mb-10 px-xxl-10 arial">Tata Cara Berlalu Lintas yang Baik dan Benar</h4>
                </div>
                <!-- /.row -->
                <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
                    <!--/column -->
                    <div class="col-lg-5">
                        <div class="accordion accordion-wrapper" id="accordionExample">
                            <div class="card plain accordion-item">
                                <div class="card-header" id="headingOne">
                                    <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="font-size: 20px;">
                                        Cek kondisi fisik sebelum berkendara</button>
                                </div>
                                <!--/.card-header -->
                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                    <div class="card-body">
                                        <p>Pastikan berkendara dalam kondisi sehat, menggunakan helm, rompi pemantul cahaya, dan sarung tangan untuk pengendara motor.</p>
                                    </div>
                                    <!--/.card-body -->
                                </div>
                                <!--/.accordion-collapse -->
                            </div>
                            <!--/.accordion-item -->
                            <div class="card plain accordion-item">
                                <div class="card-header" id="headingTwo">
                                    <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        Cek kondisi dan kelengkapan kendaraan
                                    </button>
                                </div>
                                <!--/.card-header -->
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                    <div class="card-body">
                                        <p>Cek kondisi kendaraan dan pastikan semuanya berfungsi dengan baik dan stabil.</p>
                                    </div>
                                    <!--/.card-body -->
                                </div>
                                <!--/.accordion-collapse -->
                            </div>
                            <!--/.accordion-item -->
                            <div class="card plain accordion-item">
                                <div class="card-header" id="headingThree">
                                    <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        Lengkapi surat-surat
                                    </button>
                                </div>
                                <!--/.card-header -->
                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                    <div class="card-body">
                                        <p>Lengkapi SIM A untuk pengendara roda empat, SIM C untuk pengendara roda dua, dan membawa STNK.</p>
                                    </div>
                                    <!--/.card-body -->
                                </div>
                                <!--/.accordion-collapse -->
                            </div>
                            <!--/.accordion-item -->
                            <div class="card plain accordion-item">
                                <div class="card-header" id="headingThree">
                                    <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        Patuhi aturan dan rambu lalu lintas
                                    </button>
                                </div>
                                <!--/.card-header -->
                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                    <div class="card-body">
                                        <p>Menjalankan aturan lalu lintas yang berlaku dan memperhatikan rambu lalu lintas ketika berkendara.</p>
                                    </div>
                                    <!--/.card-body -->
                                </div>
                                <!--/.accordion-collapse -->
                            </div>
                            <div class="card plain accordion-item">
                                <div class="card-header" id="headingThree">
                                    <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        Fokus ketika berkendara
                                    </button>
                                </div>
                                <!--/.card-header -->
                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                    <div class="card-body">
                                        <p>Penting untuk selalu fokus pada jalan dan situasi sekitar, serta menghindari gangguan yang dapat mengalihkan perhatian.</p>
                                    </div>
                                    <!--/.card-body -->
                                </div>
                                <!--/.accordion-collapse -->
                            </div>
                            <!--/.accordion-item -->
                        </div>
                        <!--/.accordion -->
                    </div>
                    <div class="col-lg-6">
                        <figure>
                            <iframe width="660" height="415" src="https://www.youtube.com/embed/TQ0hL1Ibz4M?si=BfQE-sPx7tmZL3z_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                        </figure>
                    </div>
                    <!--/column -->
                </div>
                <!--/.row -->
            </div>
        </div>
    </div>
</section>
<!-- /section -->
@endsection