@extends('website.layouts.master')

@section('title')
    {{__('website-trans.home')}}
@endsection

@section('content')

    <!-- Banner Section -->
    <section class="banner-section banner-one">
        <div class="left-based-text">
            <div class="base-inner">
                <div class="hours">
                    <ul class="clearfix">
                        <li><span>Sat - Thu</span></li>
                        <li><span>10am - 8pm</span></li>
                    </ul>
                </div>
                <div class="social-links">
                    <ul class="clearfix">
                        <li><a href="{{config('site.snapchat')}}" target="_blank"><span>Snapchat</span></a></li>
                        <li><a href="{{config('site.twitter')}}" target="_blank"><span>Twitter</span></a></li>
                        <li><a href="{{config('site.instagram')}}" target="_blank"><span>Instagram</span></a></li>
                        <li><a href="{{config('site.facebook')}}" target="_blank"><span>Facebook</span></a></li>
                        <li><a href="https://api.whatsapp.com/send?phone={{config('site.whatsapp')}}"><span>Whatsapp</span></a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="banner-carousel owl-theme owl-carousel">
            <!-- Slide Item -->
            @foreach($sliders as $slider)

                <div class="slide-item">
                    <div class="image-layer"
                        style="background-image: url({{asset('dashboard/assets/img/uploads/sliders/'.$slider->image->filename)}});"></div>
                    <div class="left-top-line"></div>
                    <div class="right-bottom-curve"></div>
                    <div class="right-top-curve"></div>
                    <div class="auto-container">
                        <div class="content-box">
                            <div class="content">
                                <div class="inner">
                                    <div class="sub-title">{{__('website-trans.welcomeSopol')}}</div>
                                    <h1>{!! App::getLocale() == 'ar' ? $slider->text_ar : $slider->text_en !!}</h1>
                                    <div class="link-box">
                                        <a class="theme-btn btn-style-one" href="{{route('contact')}}">
                                            <i class="btn-curve"></i>
                                            <span class="btn-title">{{__('website-trans.contact')}}</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            @endforeach

        </div>
    </section>
    <!--End Banner Section -->

    <!--Services Section-->
    <section class="services-section">
        <div class="auto-container">
            <div class="row clearfix">
                <!--Title Block-->
                <div class="title-block col-xl-12 col-lg-12 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="sec-title">
                            <h2>{!!__('website-trans.perfectSolutions')!!}<span class="dot">.</span></h2>
                            <div class="lower-text">{{__('website-trans.weCommitted')}}</div>
                        </div>
                    </div>
                </div>
                <!--Service Block-->
                <div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12 wow fadeInLeft" data-wow-delay="0ms"
                     data-wow-duration="1500ms">
                    <div class="inner-box">
                        <div class="bottom-curve"></div>
                        <div class="icon-box"><span class="flaticon-app-development"></span></div>
                        <h6><a href="{{route('getService', 1)}}">{!!__('website-trans.informationTechnology')!!}</a></h6>
                    </div>
                </div>
                <!--Service Block-->
                <div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12 wow fadeInLeft" data-wow-delay="0ms"
                     data-wow-duration="1500ms">
                    <div class="inner-box">
                        <div class="bottom-curve"></div>
                        <div class="icon-box"><span class="flaticon-marketing-online"></span></div>
                        <h6><a href="{{route('getService', 7)}}">{!!__('website-trans.advertising')!!}</a></h6>
                    </div>
                </div>
                <!--Service Block-->
                <div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12 wow fadeInLeft"
                     data-wow-delay="300ms" data-wow-duration="1500ms">
                    <div class="inner-box">
                        <div class="bottom-curve"></div>
                        <div class="icon-box"><span class="flaticon-printer"></span></div>
                        <h6><a href="{{route('getService', 11)}}">{!!__('website-trans.printingPackaging')!!}</a></h6>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!--About Section-->
    <section class="about-section about-section__dark" id="about-Us">
        <div class="auto-container">
            <div class="row clearfix">
                <!--Image Column-->
                <div class="image-column col-xl-6 col-lg-12 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="image-block wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms"><img
                                src="{{asset("website/assets/images/resource/aboutSection-1.webp")}}" alt="" loading="lazy"></div>
                        <div class="image-block wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms"><img
                                src="{{asset("website/assets/images/resource/aboutSection-2.webp")}}" alt="" loading="lazy"></div>
                    </div>
                </div>
                <!--Text Column-->
                <div class="text-column col-xl-6 col-lg-12 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="sec-title">
                            <h2>{!!__('website-trans.bestCompany')!!}<span class="dot">.</span></h2>
                        </div>
                        <div class="text">
                            <p>{{App::getLocale() == 'ar' ? config('site.about_ar') : config('site.about_en')}}</p>
                        </div>
                        <div class="text clearfix">
                            <ul>
                                <li>{{__('website-trans.creativityDesign')}}</li>
                                <li>{{__('website-trans.accuracyExecution')}}</li>
                                <li>{{__('website-trans.timeCommitment')}}</li>
                            </ul>
                            <div class="since"><span class="txt">{{__('website-trans.since')}}<br>2020</span></div>
                        </div>
                        <div class="link-box">
                            <a class="theme-btn btn-style-one" href="#about-more">
                                <i class="btn-curve"></i>
                                <span class="btn-title">{{__('website-trans.discoverMore')}}</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--We DO Section-->
    <section class="we-do-section we-do-section__dark">
        <div class="auto-container">
            <div class="row clearfix">
                <!--Left Column-->
                <div class="left-col col-lg-6 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="sec-title">
                            <h2>{!! __('website-trans.workingMore') !!}<span class="dot">.</span></h2>
                        </div>
                        <div class="featured-block clearfix">
                            <div class="image"><img
                                    src="{{asset("website/assets/images/resource/weDo-1.webp")}}" loading="lazy" alt=""></div>
                            <div class="text">{!! __('website-trans.workHard') !!}</div>
                        </div>
                        <div class="progress-box">
                            <div class="bar-title">{!! __('website-trans.customersTrust') !!}</div>
                            <div class="bar">
                                <div class="bar-inner count-bar" data-percent="99.5%">
                                    <div class="count-box">
                                        <span class="count-text" data-stop="99.5" data-speed="1500">0</span>%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Right Column-->
                <div class="right-col col-lg-6 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="faq-box">
                            <ul class="accordion-box accordion-box__dark clearfix">
                                <!--Block-->
                                <li class="accordion block active-block">
                                    <div class="acc-btn active"><span class="count">1.</span>
                                    {!! __('website-trans.newInnovative') !!}
                                    </div>
                                    <div class="acc-content current">
                                        <div class="content">
                                            <div class="text">{!! __('website-trans.uniqueInformationalExperience') !!}</div>
                                        </div>
                                    </div>
                                </li>

                                <!--Block-->
                                <li class="accordion block">
                                    <div class="acc-btn"><span class="count">2.</span>
                                    {!! __('website-trans.designAppropriate') !!}
                                    </div>
                                    <div class="acc-content">
                                        <div class="content">
                                            <div class="text">{!! __('website-trans.WhereOfferIdeas') !!}
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <!--Block-->
                                <li class="accordion block">
                                    <div class="acc-btn"><span class="count">3.</span>{!! __('website-trans.createDynamicEffective') !!}
                                    </div>
                                    <div class="acc-content">
                                        <div class="content">
                                            <div class="text">{!! __('website-trans.throughAttractiveDesigns') !!}
                                            </div>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{--    <!-- Gallery Section -->--}}
    {{--    <section class="gallery-section gallery-section__dark">--}}
    {{--        <div class="auto-container">--}}
    {{--            <!--MixitUp Galery-->--}}
    {{--            <div class="mixitup-gallery">--}}
    {{--                <div class="upper-row clearfix">--}}
    {{--                    <div class="sec-title">--}}
    {{--                        <h2>work showcase<span class="dot">.</span></h2>--}}
    {{--                    </div>--}}
    {{--                    <!--Filter-->--}}
    {{--                    <div class="filters clearfix">--}}
    {{--                        <ul class="filter-tabs filter-btns clearfix">--}}
    {{--                            <li class="active filter" data-role="button" data-filter="all">All<sup>[6]</sup></li>--}}
    {{--                            <li class="filter" data-role="button" data-filter=".branding">Branding<sup>[3]</sup>--}}
    {{--                            </li>--}}
    {{--                            <li class="filter" data-role="button" data-filter=".illustration">--}}
    {{--                                illustration<sup>[3]</sup></li>--}}
    {{--                            <li class="filter" data-role="button" data-filter=".photography">--}}
    {{--                                Photography<sup>[3]</sup></li>--}}
    {{--                            <li class="filter" data-role="button" data-filter=".web-design">Web Design<sup>[4]</sup>--}}
    {{--                            </li>--}}
    {{--                        </ul>--}}
    {{--                    </div>--}}
    {{--                </div>--}}
    {{--                <div class="filter-list row">--}}
    {{--                    <!-- Gallery Item -->--}}
    {{--                    <div class="gallery-item mix all web-design col-lg-4 col-md-6 col-sm-12">--}}
    {{--                        <div class="inner-box">--}}
    {{--                            <figure class="image"><img src="{{asset("website/assets/images/gallery/1.jpg")}}" alt="">--}}
    {{--                            </figure>--}}
    {{--                            <a href="{{asset("website/assets/images/gallery/1.jpg")}}"--}}
    {{--                               class="lightbox-image overlay-box"--}}
    {{--                               data-fancybox="gallery"></a>--}}
    {{--                            <div class="cap-box">--}}
    {{--                                <div class="cap-inner">--}}
    {{--                                    <div class="cat"><span>Graphic</span></div>--}}
    {{--                                    <div class="title">--}}
    {{--                                        <h5><a href="portfolio-single.html">Fimlor Experience</a></h5>--}}
    {{--                                    </div>--}}
    {{--                                </div>--}}
    {{--                            </div>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <!-- Gallery Item -->--}}
    {{--                    <div class="gallery-item mix all photography web-design col-lg-4 col-md-6 col-sm-12">--}}
    {{--                        <div class="inner-box">--}}
    {{--                            <figure class="image"><img src="{{asset("website/assets/images/gallery/2.jpg")}}" alt="">--}}
    {{--                            </figure>--}}
    {{--                            <a href="{{asset("website/assets/images/gallery/2.jpg")}}"--}}
    {{--                               class="lightbox-image overlay-box"--}}
    {{--                               data-fancybox="gallery"></a>--}}
    {{--                            <div class="cap-box">--}}
    {{--                                <div class="cap-inner">--}}
    {{--                                    <div class="cat"><span>Graphic</span></div>--}}
    {{--                                    <div class="title">--}}
    {{--                                        <h5><a href="portfolio-single.html">Fimlor Experience</a></h5>--}}
    {{--                                    </div>--}}
    {{--                                </div>--}}
    {{--                            </div>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <!-- Gallery Item -->--}}
    {{--                    <div class="gallery-item mix all branding web-design col-lg-4 col-md-6 col-sm-12">--}}
    {{--                        <div class="inner-box">--}}
    {{--                            <figure class="image"><img src="{{asset("website/assets/images/gallery/3.jpg")}}" alt="">--}}
    {{--                            </figure>--}}
    {{--                            <a href="{{asset("website/assets/images/gallery/3.jpg")}}"--}}
    {{--                               class="lightbox-image overlay-box"--}}
    {{--                               data-fancybox="gallery"></a>--}}
    {{--                            <div class="cap-box">--}}
    {{--                                <div class="cap-inner">--}}
    {{--                                    <div class="cat"><span>Graphic</span></div>--}}
    {{--                                    <div class="title">--}}
    {{--                                        <h5><a href="portfolio-single.html">Fimlor Experience</a></h5>--}}
    {{--                                    </div>--}}
    {{--                                </div>--}}
    {{--                            </div>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <!-- Gallery Item -->--}}
    {{--                    <div class="gallery-item mix all branding illustration col-lg-4 col-md-6 col-sm-12">--}}
    {{--                        <div class="inner-box">--}}
    {{--                            <figure class="image"><img src="{{asset("website/assets/images/gallery/4.jpg")}}" alt="">--}}
    {{--                            </figure>--}}
    {{--                            <a href="{{asset("website/assets/images/gallery/4.jpg")}}"--}}
    {{--                               class="lightbox-image overlay-box"--}}
    {{--                               data-fancybox="gallery"></a>--}}
    {{--                            <div class="cap-box">--}}
    {{--                                <div class="cap-inner">--}}
    {{--                                    <div class="cat"><span>Graphic</span></div>--}}
    {{--                                    <div class="title">--}}
    {{--                                        <h5><a href="portfolio-single.html">Fimlor Experience</a></h5>--}}
    {{--                                    </div>--}}
    {{--                                </div>--}}
    {{--                            </div>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <!-- Gallery Item -->--}}
    {{--                    <div--}}
    {{--                        class="gallery-item mix all branding illustration photography web-design col-lg-4 col-md-6 col-sm-12">--}}
    {{--                        <div class="inner-box">--}}
    {{--                            <figure class="image"><img src="{{asset("website/assets/images/gallery/5.jpg")}}" alt="">--}}
    {{--                            </figure>--}}
    {{--                            <a href="{{asset("website/assets/images/gallery/5.jpg")}}"--}}
    {{--                               class="lightbox-image overlay-box"--}}
    {{--                               data-fancybox="gallery"></a>--}}
    {{--                            <div class="cap-box">--}}
    {{--                                <div class="cap-inner">--}}
    {{--                                    <div class="cat"><span>Graphic</span></div>--}}
    {{--                                    <div class="title">--}}
    {{--                                        <h5><a href="portfolio-single.html">Fimlor Experience</a></h5>--}}
    {{--                                    </div>--}}
    {{--                                </div>--}}
    {{--                            </div>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <!-- Gallery Item -->--}}
    {{--                    <div class="gallery-item mix all illustration photography col-lg-4 col-md-6 col-sm-12">--}}
    {{--                        <div class="inner-box">--}}
    {{--                            <figure class="image"><img src="{{asset("website/assets/images/gallery/6.jpg")}}" alt="">--}}
    {{--                            </figure>--}}
    {{--                            <a href="{{asset("website/assets/images/gallery/6.jpg")}}"--}}
    {{--                               class="lightbox-image overlay-box"--}}
    {{--                               data-fancybox="gallery"></a>--}}
    {{--                            <div class="cap-box">--}}
    {{--                                <div class="cap-inner">--}}
    {{--                                    <div class="cat"><span>Graphic</span></div>--}}
    {{--                                    <div class="title">--}}
    {{--                                        <h5><a href="portfolio-single.html">Fimlor Experience</a></h5>--}}
    {{--                                    </div>--}}
    {{--                                </div>--}}
    {{--                            </div>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                </div>--}}

    {{--            </div>--}}

    {{--        </div>--}}
    {{--    </section>--}}

    <!-- Funfacts Section -->
    <section class="facts-section jarallax" data-jarallax data-speed="0.3" data-imgPosition="50% 80%">
        <img src="{{asset("website/assets/images/resource/funfacts.webp")}}" loading="lazy" alt="" class="jarallax-img">
        <div class="auto-container">
            <div class="inner-container">

                <!-- Fact Counter -->
                <div class="fact-counter">
                    <div class="row clearfix">

                        <!--Column-->
                        <div class="column counter-column col-lg-4 col-md-6 col-sm-12">
                            <div class="inner">
                                <div class="content">
                                    {{-- <div class="count-outer count-box">
                                        <span class="count-text" data-speed="4000" data-stop="485">0</span>
                                    </div>
                                    <div class="counter-title">{!! __('website-trans.projectsCompleted') !!}</div> --}}
                                </div>
                            </div>
                        </div>

                        <!--Column-->
                        <div class="column counter-column col-lg-4 col-md-6 col-sm-12">
                            <div class="inner">
                                <div class="content">
                                    {{-- <div class="count-outer count-box alternate">
                                        <span class="count-text" data-speed="3000" data-stop="27">0</span>
                                    </div>
                                    <div class="counter-title">{!! __('website-trans.activeClients') !!}</div> --}}
                                </div>
                            </div>
                        </div>

                        <!--Column-->
                        <div class="column counter-column col-lg-4 col-md-6 col-sm-12">
                            <div class="inner">
                                <div class="content">
                                    {{-- <div class="count-outer count-box">
                                        <span class="count-text" data-speed="4000" data-stop="478">0</span>
                                    </div>
                                    <div class="counter-title">{!! __('website-trans.happyClients') !!}</div> --}}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Trusted Section -->
    <section class="trusted-section trusted-section__dark">
        <div class="auto-container">
            <div class="outer-container">
                <div class="row clearfix">
                    <div class="left-col col-xl-5 col-lg-6 col-md-12 col-sm-12">
                        <div class="inner">
                            <div class="col-header">
                                <div class="header-inner">
                                    <span>{!! __('website-trans.committedDeliver') !!}</span>
                                </div>
                            </div>
                            <div class="features">
                                <div class="feature">
                                    <div class="count"><span>01</span></div>
                                    <h5>{!! __('website-trans.provideHighQuality') !!}</h5>
                                </div>
                                <div class="feature">
                                    <div class="count"><span>02</span></div>
                                    <h5>{!! __('website-trans.softwareTechnicalsolutions') !!}</h5>
                                </div>
                                <div class="feature">
                                    <div class="count"><span>03</span></div>
                                    <h5>{!! __('website-trans.advertisingPrintingServices') !!}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-col col-xl-7 col-lg-6 col-md-12 col-sm-12">
                        <div class="inner">
                            <div class="sec-title">
                                <h2>{!! __('website-trans.ManyCustomers') !!}<span class="dot">.</span></h2>
                                <div class="lower-text"> {!! __('website-trans.alwaysUndertake') !!} </div>
                            </div>
                            <div class="featured-block-two clearfix">
                                <div class="image"><img
                                        src="{{asset("website/assets/images/resource/funfacts-2.webp")}}" loading="lazy" alt="">
                                </div>
                                <div class="text">
                                    <ul>
                                        <li>{!! __('website-trans.accuracy') !!}</li>
                                        <li>{!! __('website-trans.speed') !!}</li>
                                        <li>{!! __('website-trans.expertise') !!}</li>
                                        <li>{!! __('website-trans.quality') !!}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <!-- Parallax Section -->
    <section class="parallax-section jarallax" data-jarallax data-speed="0.3" data-imgPosition="50% 80%">
        <!-- <div class="image-layer" style="background-image: url(images/background/image-2.jpg);"></div> -->
        <img src="{{asset("website/assets/images/resource/Parallax.webp")}}" loading="lazy" alt="" class="jarallax-img">
        <div class="auto-container">
            <div class="content-box">
                <div class="icon-box"><span class="flaticon-hand-shake"></span></div>
                <h2>{!! __('website-trans.greatBusiness') !!}<span> {!! __('website-trans.doneTeam') !!}</span></h2>
            </div>
        </div>
    </section>
    <!-- End Funfacts Section -->

    <!--Agency Section-->
    <section class="agency-section agency-section__dark" id="about-more">
        <div class="auto-container">
            <div class="row clearfix">
                <!--Left Column-->
                <div class="left-col col-xl-6 col-lg-12 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="sec-title">
                            <h2>{!! __('website-trans.bestCompany') !!}<span class="dot">.</span></h2>
                        </div>

                        <!--Default Tabs-->
                        <div class="default-tabs tabs-box">

                            <!--Tab Btns-->
                            <ul class="tab-btns tab-buttons clearfix">
                                <li data-tab="#tab-1" class="tab-btn active-btn"><span>{!! __('website-trans.ourMessage') !!}</span></li>
                                <li data-tab="#tab-2" class="tab-btn"><span>{!! __('website-trans.ourVision') !!}</span></li>
                            </ul>

                            <!--Tabs Container-->
                            <div class="tabs-content">

                                <!--Tab-->
                                <div class="tab active-tab" id="tab-1">
                                    <div class="content">
                                        <div class="text">
                                            <div class="featured-block-two clearfix" style="padding-left:0px">
                                                <div class="text">
                                                    <ul>
                                                        @foreach(explode('-', config('site.message_'. App::getLocale() ))  as $message)
                                                            <li>{{$message}}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--Tab-->
                                <div class="tab" id="tab-2">
                                    <div class="content">
                                        <div class="text">
                                            <div class="featured-block-two clearfix" style="padding-left:0px">
                                                <div class="text">
                                                    <ul>
                                                        @foreach(explode('-', config('site.vision_'. App::getLocale() ))  as $vision)
                                                            <li>{{$vision}}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <!--Right Column-->
                <div class="right-col col-xl-6 col-lg-12 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="text">
                            {!! __('website-trans.valueCustomers') !!}
                        </div>
                        <div class="featured-block-two clearfix">
                            <div class="image"><img
                                    src="{{asset("website/assets/images/resource/agency.webp")}}" loading="lazy" alt=""></div>
                            <div class="text">
                                <ul>
                                    <li>{!! __('website-trans.commitment') !!}</li>
                                    <li>{!! __('website-trans.excellence') !!}</li>
                                    <li>{!! __('website-trans.credibility') !!}</li>
                                    <li>{!! __('website-trans.creativity') !!}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--Sponsors Section-->
    <!--<section class="sponsors-section sponsors-section__dark" id="successPartners">-->
    <!--    <div class="sponsors-outer">-->
            <!--Sponsors-->
    <!--        <div class="auto-container">-->
                <!--Sponsors Carousel-->
    <!--            <div class="sponsors-carousel owl-theme owl-carousel">-->
    <!--                @foreach($testimonials as $testimonial)-->
    <!--                    <div class="slide-item">-->
    <!--                        <figure class="image-box"><a href="#"><img-->
    <!--                                    src="{{asset('dashboard/assets/img/uploads/testimonials/'.$testimonial->image->filename)}}" alt=""></a>-->
    <!--                        </figure>-->
    <!--                    </div>-->
    <!--                @endforeach-->

                    <!-- <div class="slide-item">
    <!--                    <figure class="image-box"><a href="#"><img-->
    <!--                                src="{{asset("website/assets/images/clients/dark-1.png")}}" alt=""></a>-->
    <!--                    </figure>-->
    <!--                </div> -->-->

    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->

@endsection

@section('js')

@endsection