@extends('frontend.component.layout')

@section('extended_css')
<style type="text/css">
    :root {
        --theme: #023375 !important;
    }
    @media (max-width: 767px) {
        .container-fluid{
            padding: 0 5px !important;
        }

        .hero-3 .hero-content h1 {
            font-size: 25px !important;
            margin-bottom: 0px !important;
        }
    }

    @media (min-width: 767px) {
        .img-desktop{
            width: auto !important;
            height: 640px !important;
        }

        .about-image{
            width: auto !important;
            height: 640px !important;
            margin-left: -10% !important;
        }

        .about-wrapper-3 .about-image img {
            width: auto !important;
            height: 640px !important;
        }
    }
    
    .about-wrapper-3 .about-image img {
        border-radius: 0px 26px 26px 0px;
    }

    .section-padding {
        padding: 30px 0 !important;
    }

    .offcanvas__wrapper {
        background-color: #023375 !important;
    }

    .back-to-top, .feature-provide-box-items:hover {
        background-color: #023375 !important;
    }

    .preloader p, .preloader .animation-preloader .txt-loading .letters-loading {
        color: #023375 !important;
    }

    .preloader .animation-preloader .spinner {

    }
</style>
@stop

@section('content')
@include('frontend.component.slide')

<!-- About Section S T A R T -->
<section class="about-section-3 fix section-padding">
    <div class="about-shape">
        <img src="{{url('frontend')}}/assets/images/about/shape.png" alt="img">
    </div>
    <div class="container">
        <div class="about-wrapper-3">
            <div class="row g-4 align-items-center">
                <div class="col-lg-6">
                    <div class="about-image d-none d-md-block">
                        <img src="{{url('img/IMG_6185.JPG')}}" alt="img">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-content">
                        <div class="section-title">
                            {{-- <div class="wow fadeInUp">
                                <a href="{{url('/')}}">
                                    <img style="height: 120px; width: auto; margin-bottom: 32px;" src="{{ url('img/logo-full.png') }}" alt="logo-img">
                                </a>
                            </div> --}}
                            <h1 class="wow fadeInUp" data-wow-delay=".3s">
                                Empowering  <span>Collaborations</span>
                            </h1>
                        </div>
                        <ul class="wow fadeInUp" data-wow-delay=".3s">
                            <li>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="20" viewBox="0 0 17 20" fill="none">
                                    <path d="M6.47192 1.19299C7.72371 0.456638 9.27628 0.456638 10.5281 1.19299L15.0281 3.84005C16.2498 4.55873 17 5.87033 17 7.28778V12.7122C17 14.1297 16.2498 15.4413 15.0281 16.16L10.5281 18.807C9.27628 19.5434 7.72372 19.5434 6.47192 18.807L1.97192 16.16C0.750165 15.4413 0 14.1297 0 12.7122V7.28778C0 5.87033 0.750165 4.55873 1.97192 3.84005L6.47192 1.19299Z" fill="#7444FD"/>
                                    <circle cx="8.5" cy="10.5" r="3.5" fill="white"/>
                                  </svg>
                                  <b>Progresif</b>
                            </li>
                            <li>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="20" viewBox="0 0 17 20" fill="none">
                                    <path d="M6.47192 1.19299C7.72371 0.456638 9.27628 0.456638 10.5281 1.19299L15.0281 3.84005C16.2498 4.55873 17 5.87033 17 7.28778V12.7122C17 14.1297 16.2498 15.4413 15.0281 16.16L10.5281 18.807C9.27628 19.5434 7.72372 19.5434 6.47192 18.807L1.97192 16.16C0.750165 15.4413 0 14.1297 0 12.7122V7.28778C0 5.87033 0.750165 4.55873 1.97192 3.84005L6.47192 1.19299Z" fill="#7444FD"/>
                                    <circle cx="8.5" cy="10.5" r="3.5" fill="white"/>
                                  </svg>
                                  <b>Melayani</b>
                            </li>
                            <li>
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="20" viewBox="0 0 17 20" fill="none">
                                    <path d="M6.47192 1.19299C7.72371 0.456638 9.27628 0.456638 10.5281 1.19299L15.0281 3.84005C16.2498 4.55873 17 5.87033 17 7.28778V12.7122C17 14.1297 16.2498 15.4413 15.0281 16.16L10.5281 18.807C9.27628 19.5434 7.72372 19.5434 6.47192 18.807L1.97192 16.16C0.750165 15.4413 0 14.1297 0 12.7122V7.28778C0 5.87033 0.750165 4.55873 1.97192 3.84005L6.47192 1.19299Z" fill="#7444FD"/>
                                    <circle cx="8.5" cy="10.5" r="3.5" fill="white"/>
                                  </svg>
                                  <b>Berprestasi</b>
                            </li>
                        </ul>
                        <div class="wow fadeInUp" data-wow-delay=".2s">
                            <img style="height: 70px; width: auto;" src="{{ url('img/logo-asn-berakhlak.png') }}" alt="logo-img">
                        </div>
                    </div>
                </div>
            </div>
       </div>
    </div>
</section>

<!-- Feature Provide Section S T A R T -->
<section class="feature-provide-section fix section-padding pt-0">
    <div class="container">
        <div class="section-title text-center mxw-685 mx-auto mb-30">
            <h2 class="title">Bagian</h2>
        </div>
        <div class="row">
            <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                <div class="feature-provide-box-items style-2">
                    <div class="icon">
                       <img src="{{url('img/pks.png')}}" alt="img">
                    </div>
                    <div class="item-shape">
                        <img src="{{url('frontend')}}/assets/images/services/item-shape.png" alt="img">
                    </div>
                    <div class="item-shape-2">
                        <img src="{{url('frontend')}}/assets/images/services/item-shape-2.png" alt="img">
                    </div>
                    <div class="content">
                        <h3>Bagian Perencanaan dan Kepegawaian Setda</h3>
                        <p>
                            Fungsi Perencanaan dan Kepegawaian
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
                <div class="feature-provide-box-items">
                    <div class="item-shape">
                        <img src="{{url('frontend')}}/assets/images/services/item-shape.png" alt="img">
                    </div>
                    <div class="item-shape-2">
                        <img src="{{url('frontend')}}/assets/images/services/item-shape-2.png" alt="img">
                    </div>
                    <div class="icon">
                       <img src="{{url('img/mkp.png')}}" alt="img">
                    </div>
                    <div class="content">
                        <h3>Bagian Materi & Komunikasi Pimpinan</h3>
                        <p>
                            Fungsi Komunikasi  Pimpinan (Humas)
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
                <div class="feature-provide-box-items style-2">
                    <div class="item-shape">
                        <img src="{{url('frontend')}}/assets/images/services/item-shape.png" alt="img">
                    </div>
                    <div class="item-shape-2">
                        <img src="{{url('frontend')}}/assets/images/services/item-shape-2.png" alt="img">
                    </div>
                    <div class="icon">
                       <img src="{{url('img/protokol.png')}}" alt="img">
                    </div>
                    <div class="content">
                        <h3>Bagian <br> Protokol</h3>
                        <p>
                            Fungsi  Keprotokolan
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonial Section S T A R T -->
<section class="testimonial-section-3 section-padding fix section-padding bg-cover" style="background-image: url('frontend/assets/images/testimoial/bg.jpg');">
    <div class="container">
        <div class="section-title-area">
            <div class="section-title">
                <div class="subtitle wow fadeInUp">
                    Pelayanan Kami
                </div>
                <h2 class="title mb-0 wow fadeInUp" data-wow-delay=".3s">Sekretariat Daerah Provinsi Jawa Timur</h2>
            </div>
            <div class="array-button">
                <button class="array-prev"><i class="fa-regular fa-arrow-left-long"></i></button>
                <button class="array-next"><i class="fa-regular fa-arrow-right-long"></i></button>
            </div>
        </div>
        <div class="swiper testimonial-slider-3">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="testimonial-wrapper-3" style="background:linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0)), url({{url('img/apel.jpeg')}}); height: 400px; background-repeat: no-repeat; background-size: cover;">
                        <div class="tesimonial-content">
                            <div class="client-info-area" style="margin-top: 220px">
                                <div class="client-content">
                                    <h1 style="color: #023375; font-size: 38px;" class="wow fadeInUp" data-wow-delay=".3s">
                                        Apel Pagi  <br>
                                        {{-- <span style="color: #023375;">Setiap Hari Senin</span> --}}
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="testimonial-wrapper-3" style="background:linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0)), url({{url('img/skj.jpeg')}}); height: 400px; background-repeat: no-repeat; background-size: cover;">
                        <div class="tesimonial-content">
                            <div class="client-info-area" style="margin-top: 220px">
                                <div class="client-content">
                                    <h1 style="color: #023375; font-size: 38px;" class="wow fadeInUp" data-wow-delay=".3s">
                                        Senam Kesegaran Jasmani  <br>
                                        {{-- <span style="color: #023375;">Setiap Hari Jum'at</span> --}}
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="testimonial-wrapper-3" style="background:linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0)), url({{url('img/080950.jpeg')}}); height: 400px; background-repeat: no-repeat; background-size: cover;">
                        <div class="tesimonial-content">
                            <div class="client-info-area" style="margin-top: 220px">
                                <div class="client-content">
                                    <h1 style="color: #023375; font-size: 38px;" class="wow fadeInUp" data-wow-delay=".3s">
                                        Cetak ID Card  <br>
                                        {{-- <span style="color: #023375;">Setiap Hari Jum'at</span> --}}
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="blog-section section-padding fix">
    <div class="container">
        <div class="blog-wrapper style1">
            <div class="section-title text-center mxw-685 mx-auto">
                <h2 class="title wow fadeInUp" data-wow-delay=".4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">Berita Terbaru</h2>
            </div>
            <div class="row gy-5">
                @if (count($recent)>0)
                @foreach ($recent as $p)