@extends('user.template')

@section('content')
    <!-- Page Title -->
    <div class="page-title">
        <div class="container d-lg-flex justify-content-between align-items-center">
            <h1 class="mb-2 mb-lg-0">Detail TPS</h1>
            <nav class="breadcrumbs">
                <ol>
                    <li><a href="index.html">Beranda</a></li>
                    <li class="current">Sebaran TPS</li>
                    <li class="current">Detail TPS</li>
                </ol>
            </nav>
        </div>
    </div><!-- End Page Title -->

    <section id="about" class="about section" style="padding-top: 0;">
        <div class="container" data-aos="fade-up">

            <div class="row g-4 g-lg-5" data-aos="fade-up" data-aos-delay="200">

                <div class="col-lg-5">
                    <div class="about-img">
                        <img src="{{ asset('assets/user/img/about-portrait.jpg') }}" class="img-fluid" alt="">
                    </div>
                </div>

                <div class="col-lg-7">
                    <h3 class="pt-0 pt-lg-5">Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</h3>

                    <!-- Tab Content -->
                    <div class="tab-content">

                        <div class="tab-pane fade show active" id="about-tab1">

                            <p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
                                Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>

                            <div class="d-flex align-items-center mt-4">
                                <i class="bi bi-check2"></i>
                                <h4>Peta Interaktif Lokasi TPS</h4>
                            </div>
                            <p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan
                                yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p>

                            <div class="d-flex align-items-center mt-4">
                                <i class="bi bi-check2"></i>
                                <h4>Informasi TPS Lengkap</h4>
                            </div>
                            <p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis
                                pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p>

                            <div class="d-flex align-items-center mt-4">
                                <i class="bi bi-check2"></i>
                                <h4>Layanan Aduan TPS</h4>
                            </div>
                            <p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan
                                mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p>

                        </div><!-- End Tab 1 Content -->
                    </div>

                </div>

            </div>

        </div>

    </section>
@endsection
