@extends('layouts.app')

@section('content')
    
        <!-- HOME START-->
        <section class="bg-home" style="background-image: url('{{ asset('assets/images/bg-kpu.jpg') }}');">
            <div class="bg-overlay"></div>
            <div class="home-center">
                <div class="home-desc-center">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <div class="title-heading text-center">
                                    <h1>{{ config('app.name') }}</h1>
                                    <p style="font-size: 28px !important;" class="text-white-50 mx-auto">LANGSUNG UMUM BEBAS RAHASIA JUJUR DAN ADIL</p>
                                    <div class="row">
                                        <div class="col-4 col-sm-4 col-xl-4">
                                            <a href="{{ route('front.home') }}">
                                                <div class="mainButton">
                                                    <div class="row">
                                                        <div class="col-md-12"><i class="fa fa-3x fa-home"></i></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">Beranda</div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="col-4 col-sm-4 col-xl-4">
                                            <a href="{{ route('front.dptbpilpres') }}#content">
                                                <div class="mainButton">
                                                    <div class="row">
                                                        <div class="col-md-12"><i class="fa fa-3x fa-users"></i></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">PILPRES</div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="col-4 col-sm-4 col-xl-4">
                                            <a href="{{ route('front.dptbpilkada') }}#content">
                                                <div class="mainButton">
                                                    <div class="row">
                                                        <div class="col-md-12"><i class="fa fa-3x fa-users"></i></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">PILKADA</div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="col-4 col-sm-4 col-xl-4">
                                            <a href="{{ route('front.dptbpilgub') }}#content">
                                                <div class="mainButton">
                                                    <div class="row">
                                                        <div class="col-md-12"><i class="fa fa-3x fa-users"></i></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">PILGUB</div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container-fluid" id="content">
                        <div class="row">
                            <div class="business-home-shape">
                                <img src="{{ asset('assets/images/shape-b4.png') }}" alt="" class="img-fluid mx-auto d-block">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- HOME END-->

        <!-- ABOUT START -->
        <section class="section">
            @if(isset($url_data))
            <iframe width="100%" style="height:100vh;" src="{{ $url_data }}" frameborder="0" style="border:0" allowfullscreen=""></iframe>
            @else
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="section-heading mt-sm-30 text-center">
                            <h4 class="text-uppercase font-20">Selamat Datang di Rumah Pintar Pemilu</h4>
                            <img src="{{ asset('assets/images/pemilu_sarana_integrasi.png') }}" class="img-fluid" alt="About_Image">
                            <div class="spacer-15"></div>
                            <p class="text-muted">Portal pintar yang menyajikan publikasi data pemilihan umum langsung umum bebas rahasia jujur dan adil.</p>

                        </div>
                    </div>
                </div>
            </div>
            @endif
        </section>
        <!-- ABOUT END -->


        <!-- CTA START -->
        <section class="section bg-cta-img">
            <div class="bg-overlay"></div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="cta-heading text-center text-white">
                            <h3>KPU KOTA DEPOK MELAYANI</h3>
                            <div class="spacer-15"></div>
                            <p class="mx-auto cta_details text-white-50">Menjadi Penyelenggara Pemilihan Umum yang Mandiri, Professional, dan Berintegritas untuk Terwujudnya Pemilu yang LUBER dan JURDIL.</p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="watch-video text-center">
                            <div class="project-video">
                                <div class="project-video-border">
                                    <div class="project-video-icon">
                                        <a href="{{ asset('assets/video/teaser.mp4') }}" class="video-play-icon text-white text-center" title="Watch Now"><i class="mdi mdi-play play-icon play h2 mb-0 mx-auto"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- CTA END -->

@endsection