<div>
    <!-- start hero section -->
    <section class="cover-background full-screen ipad-top-space-margin py-0 md-h-750px sm-h-650px"
        style="
    background-image:
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
      url('https://images.pexels.com/photos/669619/pexels-photo-669619.jpeg');
  ">
        <div class="opacity-very-light bg-black"></div>
        <div class="shape-image-animation bottom-0 p-0 w-100 d-none d-md-block">
            <svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="400" viewBox="0 180 2500 200" fill="#ffffff">
                <path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
                    <animate attributeName="d" dur="5s"
                        values="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250;
                            M 0 250 C 400 50 400 400 3000 250 L 3000 550 L 0 550 L 0 250;
                            M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250"
                        repeatCount="indefinite" />
                </path>
            </svg>
        </div>
        <div class="container h-100">
            <div class="row align-items-center h-100">
                <div class="col-xl-6 col-lg-8 col-md-10 position-relative z-index-1"
                    data-anime='{ "el": "childs", "translateY": [0, 0], "perspective": [1200,1200], "scale": [1.05, 1], "rotateX": [30, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
                    <span
                        class="ps-25px pe-25px pt-5px pb-5px mb-25px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-flex w-70 sm-w-100"><i
                            class="bi bi-megaphone text-white icon-small me-10px"></i>Simedkom</span>
                    <h1 class="text-white fw-600 ls-minus-2px mb-25px">Sistem Media Komunikasi</h1>
                    <div>
                        <p class="fw-300 fs-18 w-85 sm-w-95 text-white opacity-6">Merupakan sebuah aplikasi berbasis
                            digital untuk mempermudah bidang informasi dan komunikasi publik di Diskominfo Purwakarta
                            dalam menjalankan monitoring media di Kabupaten Purwakarta.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end hero section -->

    <!-- start news section -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-12 col-lg-7 text-center"
                    data-anime='{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
                    <span
                        class="ps-25px pe-25px mb-20px text-uppercase text-base-color fs-12 lh-40 fw-700 border-radius-100px bg-gradient-very-light-gray-transparent d-inline-flex"><i
                            class="bi bi-newspaper fs-16 me-5px"></i>Berita Terbaru</span>
                    <h3 class="text-dark-gray fw-700 ls-minus-2px">Berita Terbaru Purwakarta</h3>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center"
                data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 400, "staggervalue": 300, "easing": "easeOutQuad" }'>
                @foreach ($news as $item)
                    <div class="col mb-30px">
                        <div
                            class="card border-0 border-radius-5px box-shadow-quadruple-large box-shadow-quadruple-large-hover h-100 overflow-hidden">
                            <div class="blog-image">
                                <a wire:navigate href="{{ route('news.show', $item->slug) }}">
                                    <img src="{{ $item->thumbnail }}" alt="{{ $item->title }}" class="w-100">
                                </a>
                            </div>
                            <div class="card-body p-30px bg-white">
                                <div class="entry-meta mb-10px fs-14">
                                    <span class="text-medium-gray"><i
                                            class="feather icon-feather-calendar me-5px"></i>{{ $item->formatted_date }}</span>
                                </div>
                                <a wire:navigate href="{{ route('news.show', $item->slug) }}"
                                    class="card-title mb-10px fw-600 fs-18 text-dark-gray text-primary-hover d-block lh-26">{{ $item->title }}</a>
                                <p class="mb-0 text-medium-gray">{{ $item->excerpt }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="row mt-5">
                <div class="col-12 text-center">
                    <a wire:navigate href="{{ route('news.index') }}"
                        class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
                        <span>
                            <span class="btn-text">Lihat Semua Berita</span>
                            <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                            <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- end news section -->

    <!-- start announcement section -->
    <section class="bg-very-light-gray py-5">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-12 col-lg-7 text-center"
                    data-anime='{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
                    <span
                        class="ps-25px pe-25px mb-20px text-uppercase text-base-color fs-12 lh-40 fw-700 border-radius-100px bg-gradient-very-light-gray-transparent d-inline-flex"><i
                            class="bi bi-megaphone fs-16 me-5px"></i>Pengumuman</span>
                    <h3 class="text-dark-gray fw-700 ls-minus-2px">Pengumuman Penting</h3>
                </div>
            </div>
            <div class="row"
                data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 400, "staggervalue": 300, "easing": "easeOutQuad" }'>
                @foreach ($announcements as $announcement)
                    <div class="col-12 mb-20px">
                        <div
                            class="card border-0 border-radius-4px box-shadow-quadruple-large box-shadow-quadruple-large-hover overflow-hidden">
                            <div class="card-body p-30px">
                                <div class="mb-5px">
                                    <span class="text-uppercase text-medium-gray fs-12 fw-600 ls-05px d-inline-block">
                                        <i class="bi bi-calendar-event me-5px"></i>{{ $announcement->formatted_date }}
                                    </span>
                                </div>
                                <h5 class="card-title mb-10px fw-600 fs-19 lh-28 text-dark-gray">
                                    {{ $announcement->title }}</h5>
                                <div class="mb-0 text-medium-gray">
                                    {!! $announcement->excerpt !!}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="row mt-5">
                <div class="col-12 text-center">
                    <a wire:navigate href="{{ route('announcement') }}"
                        class="btn btn-link btn-hover-animation-switch btn-medium fw-700 text-dark-gray text-uppercase">
                        <span>
                            <span class="btn-text">Lihat Semua Pengumuman</span>
                            <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                            <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- end announcement section -->

    <!-- start call to action section -->
    <section class="cover-background one-third-screen sm-h-500px pb-0 position-relative"
        style="background-image:url('{{ asset('assets/img/bg/mayadatar.jpg') }}');">
        <div class="opacity-extra-medium bg-dark-gray"></div>
        <div class="container h-100">
            <div class="row align-items-center justify-content-center h-100">
                <div class="col-xl-8 col-lg-10 position-relative z-index-1 text-center d-flex flex-wrap align-items-center justify-content-center"
                    data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                    <span
                        class="ps-25px pe-25px pt-5px pb-5px mb-25px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-inline-flex align-items-center text-start sm-lh-20"><i
                            class="bi bi-megaphone text-white d-inline-block align-middle icon-small me-10px"></i>
                        Ayo menjadi bagian dari kami.</span>
                    <h1 class="text-white fw-600 ls-minus-2px mb-50px">Sistem Media Komunikasi Diskominfo Purwakarta!
                    </h1>
                </div>
            </div>
        </div>
    </section>
    <!-- end section -->

    <!-- start scroll progress -->
    <div class="scroll-progress d-none d-xxl-block">
        <a href="#" class="scroll-top" aria-label="scroll">
            <span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
        </a>
    </div>
    <!-- end scroll progress -->
</div>
