@extends('layouts.mobile')
@include('components.mobile-sidebar')


@section('title', 'Home')


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">


@section('main')
<!-- page wrapper -->
<div class="page-wrapper">

    <div class="section-title title-large">
        {{-- <span class="overline-title">Hi, {{ ($data->nama) }}!</span> --}}
        <br>
        <h3 style="text-align: center; font-family: 'Fredoka One', cursive;">SISTEM INFORMASI DAN TEKNOLOGI DESA</h3>
    </div>

    <!-- intro app -->
    <div class="intro-app">
        <div class="container">
            <div class="intro-content">
                <div class="mask"></div>
                <img src="{{ asset('mobile/images/kantor-desa.jpg') }}" alt="image-demo">
                <div class="caption">
                    <h5 class="text-white">Desa {{ Str::ucfirst(Str::lower($data->kelurahan)) }}</h5>
                    <p class="text-white mb-1">Kecamatan {{ Str::ucfirst(Str::lower($data->kecamatan)) }}</p>
                </div>
            </div>
        </div>
    </div>
    <!-- end intro app -->


    <!-- separator -->
	<div class="separator-large"></div>
	<!-- end separator -->

	<!-- section title -->
	<div class="section-title">
		<h6> &nbsp; Menu Utama</h6>
		{{-- <span class="section-subtitle"><code>.col-6</code></span> --}}
	</div>
	<!-- end section title -->
	<div class="container">
		<div class="row">
			<div class="col-3">
				<a href="{{ url('mview/surat/'.$data->id) }}" class="img">
					<img src="{{ asset('mobile/images/surat.png') }}" alt="image-demo">
				</a>
                <div style="text-align: center; font-size: 13px;">
                <p>Pelayanan Surat</p>
                </div>
			</div>
			<div class="col-3">
				<div class="img">
					<img src="{{ asset('mobile/images/berita.png') }}" alt="image-demo">
				</div>
                <div style="text-align: center; font-size: 13px;">
                    <p>Berita</p>
                    </div>
			</div>
            <div class="col-3">
				<div class="img">
					<img src="{{ asset('mobile/images/info.png') }}" alt="image-demo">
                    <div style="text-align: center; font-size: 13px;">
                        <p>Informasi Desa</p>
                    </div>
				</div>
			</div>
			<div class="col-3">
				<div class="img">
					<img src="{{ asset('mobile/images/bumdes.png') }}" alt="image-demo">
				</div>
                <div style="text-align: center; font-size: 13px;">
                    <p>E-Bumdes</p>
                </div>
			</div>
		</div>
	</div>

	<!-- separator -->
	<div class="separator-large"></div>

    <!-- feature list -->
    <div class="feature-list">
        <div class="swiper-container swiper-style-full">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="content bg-lightblue">
                        <div class="wrap-icon">
                            <i class="icon ion-ios-paper bg-blue"></i>
                        </div>
                        <div class="text">
                            <p>Pelayanan surat secara online sebagai bentuk digitalisasi desa</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="content bg-lightgreen">
                        <div class="wrap-icon">
                            <i class="icon ion-ios-checkbox bg-green"></i>
                        </div>
                        <div class="text">
                            <p>Transparansi kegiatan-kegiatan yang dilaksanakan oleh desa</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="content bg-lightred">
                        <div class="wrap-icon">
                            <i class="icon ion-ios-keypad bg-red"></i>
                        </div>
                        <div class="text">
                            <p>Informasi grafis desa & wilayah desa</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end page wrapper -->
@endsection

@include('components.mobile-navbar')