@extends($landing)

@section('css-library')
    {{-- Tempat Ngoding Meletakkan css library --}}
@endsection

@section('css-custom')
    {{-- Tempat Ngoding Meletakkan css custom --}}
@endsection

@section('content')

<!--====== SLIDER PART START ======-->

<section id="slider-part" class="slider-active">
    <div class="single-slider slider-4 bg_cover pt-150" style="background-image: url(assets/landing/images/slider/s-4.jpg)">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-7 col-lg-9">
                    <div class="slider-cont slider-cont-4 text-center">
                        <h1 data-animation="fadeInUp" data-delay="1s">Sistem Layanan Guru Bimbingan dan Konseling</h1>
                        <p data-animation="fadeInUp" data-delay="1.5s">Selamat Datang di Sistem Layanan Guru Bimbingan dan Konseling </br>  SMA, SMK dan MA / MAK</p>
                        <a data-animation="fadeInUp" data-delay="2s" class="main-btn" href="{{ url('login') }}">Masuk</a>
                    </div>
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- single slider -->
    
    <div class="single-slider slider-4 bg_cover pt-150" style="background-image: url(assets/landing/images/slider/s-4.jpg)">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-7 col-lg-9">
                    <div class="slider-cont slider-cont-4 text-center">
                        <h1 data-animation="fadeInUp" data-delay="1s">Sistem Layanan Guru Bimbingan dan Konseling</h1>
                        <p data-animation="fadeInUp" data-delay="1.5s">Selamat Datang di Sistem Layanan Guru Bimbingan dan Konseling </br>  SMA, SMK dan MA / MAK</p>
                        <a data-animation="fadeInUp" data-delay="2s" class="main-btn" href="{{ url('login') }}">Masuk</a>
                    </div>
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </div> <!-- single slider -->
</section>

<!--====== SLIDER PART ENDS ======-->

<!--====== CATEGORY PART START ======-->

<section id="category-part">
    <div class="container">
        <div class="category category-tow pt-40 pb-80">
            <div class="row">
                <div class="col-lg-4">
                    <div class="category-text pt-80">
                        <h2>Layanan Sistem</h2>
                    </div>
                </div>
                <div class="col-lg-6 offset-lg-1 col-md-8 offset-md-2 col-sm-8 offset-sm-2 col-8 offset-2">
                    <div class="row category-slide mt-40">
                        <div class="col-lg-4">
                            <a href="#">
                                <span class="single-category text-center color-1">
                                    <span class="icon">
                                        <img src="{{ asset('assets/landing/images/all-icon/ctg-3.png') }}" alt="Icon">
                                    </span>
                                    <span class="cont">
                                        <span>Surat Menyurat</span>
                                    </span>
                                </span> <!-- single category -->
                            </a>
                        </div>
                        <div class="col-lg-4">
                            <a href="#">
                                <span class="single-category text-center color-2">
                                    <span class="icon">
                                        <img src="{{ asset('assets/landing/images/all-icon/ctg-3.png') }}" alt="Icon">
                                    </span>
                                    <span class="cont">
                                        <span>Surat Izin</span>
                                    </span>
                                </span> <!-- single category -->
                            </a>
                        </div>
                        <div class="col-lg-4">
                            <a href="#">
                                <span class="single-category text-center color-3">
                                    <span class="icon">
                                        <img src="{{ asset('assets/landing/images/all-icon/ctg-3.png') }}" alt="Icon">
                                    </span>
                                    <span class="cont">
                                        <span>Konseling</span>
                                    </span>
                                </span> <!-- single category -->
                            </a>
                        </div>
                        <div class="col-lg-4">
                            <a href="#">
                                <span class="single-category text-center color-1">
                                    <span class="icon">
                                        <img src="{{ asset('assets/landing/images/all-icon/ctg-3.png') }}" alt="Icon">
                                    </span>
                                    <span class="cont">
                                        <span>Layanan Lainnya</span>
                                    </span>
                                </span> <!-- single category -->
                            </a>
                        </div>
                    </div> <!-- category slide -->
                </div>
            </div> <!-- row -->
        </div> <!-- category -->
    </div> <!-- container -->
</section>

<!--====== CATEGORY PART ENDS ======-->

<!--====== ABOUT PART START ======-->

<section id="about-part" class="about-tow pt-65">
    <div class="about-shape">
        <img src="{{ asset('assets/landing/images/about/shape.png') }}" alt="">
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-5">
                <div class="section-title mt-50">
                    <h5>Tentang Sistem</h5>
                    <h2>Apa itu Sistem Layanan Guru Konseling?</h2>
                </div> <!-- section title -->
                <div class="about-cont">
                    <p>Sistem Layanan Guru BK atau yang sekarang disebut dengan Guru Konseling yaitu sistem yang dibuat untuk mempermudah serta mengembangkan pekerjaan guru Konseling secara Digital. Guru Konseling dapat melakukan pendataan dari siswa yang diampu, melakukan konseling serta pembinaan terhadap siswa secara online</p>
                    <a href="{{ url('tentang') }}" class="main-btn mt-55">Selengkapnya</a>
                </div> <!-- about cont -->
            </div>
            <div class="col-lg-6 offset-lg-1 col-11 offset-1">
                <div class="about-image-tow mt-55">
                    <img src="{{ asset('assets/landing/images/about/about-2.jpg') }}" alt="about">
                    <div class="about-shape-tow">
                        <img src="{{ asset('assets/landing/images/about/shape-2.png') }}" alt="shape">
                    </div>
                    <div class="about-shape-three">
                        <img src="{{ asset('assets/landing/images/about/shape-3.png') }}" alt="shape">
                    </div>
                </div> <!-- about image tow -->
            </div>
        </div> <!-- row -->
    </div> <!-- container -->
</section>

<!--====== ABOUT PART ENDS ======-->

{{-- <!--====== ADMISSION PART START ======-->

<section class="admission-row pb-120">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-4 col-md-8">
                <div class="admission-card mt-30">
                    <div class="card-image">
                        <a href="#"><img src="{{ asset('assets/landing/images/admission/admission-1.jpg') }}" alt="Admission"></a>
                    </div>
                    <div class="card-content">
                        <h4 class="card-titles">Our Awards</h4>
                        <p>Gravida nibh vel velit auctor aliquetn auci elit cons solliazcitudirem sem quibibendum sem nibhutis. Duis sed odio sit amet</p>
                    </div>
                </div> <!-- admission card -->
            </div>
            
            <div class="col-lg-4 col-md-8">
                <div class="admission-info mt-30">
                    <h3 class="admission-title">Fall Admission 2019 Going on</h3>
                    <p>Gravida nibh vel velit auctor aliquetn sollicitudirem sem quibibendum auci elit cons equat ipsutis sem nibh id elituis sed odio sit amet nibh.</p>
                    <h4 class="help-line">Help Line</h4>
                    <span>+010 4561 32145</span>
                </div> <!-- admission info -->
            </div>
            
            <div class="col-lg-4 col-md-8">
                <div class="admission-card mt-30">
                    <div class="card-image">
                        <a href="#"><img src="{{ asset('assets/landing/images/admission/admission-2.jpg') }}" alt="Admission"></a>
                    </div>
                    <div class="card-content">
                        <h4 class="card-titles">Our Awards</h4>
                        <p>Gravida nibh vel velit auctor aliquetn auci elit cons solliazcitudirem sem quibibendum sem nibhutis. Duis sed odio sit amet</p>
                    </div>
                </div> <!-- admission card -->
            </div>
        </div> <!-- row -->
    </div> <!-- container -->
</section>

<!--====== ADMISSION PART ENDS ======--> --}}

<!--====== VIDEO FEATURE PART START ======-->

<section id="video-feature" class="bg_cover pt-60 pb-110" style="background-image: url(assets/landing/images/bg.jpeg)">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 order-first order-lg-first">
                <div class="video text-lg-left text-center pt-50">
                    {{-- <a class="Video-popup" href="https://www.youtube.com/watch?v=bRRtdzJH1oE"><i class="fa fa-play"></i></a> --}}
                </div> <!-- row -->
            </div>
            <div class="col-lg-5 offset-lg-1 order-first order-lg-last">
                <div class="feature pt-50">
                    <div class="feature-title">
                        <h3>Manfaat Sistem</h3>
                    </div>
                    <ul>
                        <li>
                            <div class="single-feature">
                                <div class="icon">
                                    <img src="{{ asset('assets/landing/images/all-icon/f-1.png') }}" alt="icon">
                                </div>
                                <div class="cont">
                                    <h4>Prestasi Siswa</h4>
                                    <p>Guru Konseling dapat melakukan pembinaan dan konsultasi terhadap prestasi siswa secara online serta dapat direkap melalui sistem</p>
                                </div>
                            </div> <!-- single feature -->
                        </li>
                        <li>
                            <div class="single-feature">
                                <div class="icon">
                                    <img src="{{ asset('assets/landing/images/all-icon/f-2.png') }}" alt="icon">
                                </div>
                                <div class="cont">
                                    <h4>Masa Depan Siswa</h4>
                                    <p>Guru Konseling dapat melakukan konseling terhadap saran dan masukan kepada siswa secara online dan dapat dilakukan rekap untuk pendataan menggunakan sistem</p>
                                </div>
                            </div> <!-- single feature -->
                        </li>
                        <li>
                            <div class="single-feature">
                                <div class="icon">
                                    <img src="{{ asset('assets/landing/images/all-icon/f-3.png') }}" alt="icon">
                                </div>
                                <div class="cont">
                                    <h4>Pendidikan Moral</h4>
                                    <p>Guru Konseling dapat memberikan pembinaan, konseling serta tindakan kepada siswa secara online dengan menerapkan layanan pada sistem</p>
                                </div>
                            </div> <!-- single feature -->
                        </li>
                    </ul>
                </div> <!-- feature -->
            </div>
        </div> <!-- row -->
    </div> <!-- container -->
    <div class="feature-bg"></div> <!-- feature bg -->
</section>

<!--====== VIDEO FEATURE PART ENDS ======-->

<!--====== PATNAR LOGO PART START ======-->

<!--====== PATNAR LOGO PART ENDS ======-->

@endsection

@section('js-library')
{{-- Tempat Ngoding Meletakkan js library --}}
@endsection

@section('js-custom')
{{-- Tempat Ngoding Meletakkan js custom --}}
@endsection