@extends('layouts.pages')

@section('title', 'Welcome')


@push('scripts')
<script src="js/testimonial.min.js"></script>
<script src="js/main.js"></script>
<script src="js/clouds.js"></script>
@endpush

@section('content')
    <header id="header">

        <nav class="navbar menu">
            <a class="navbar-brand" href="#">
                <img src="img/pss_logo_medium.png" class="d-inline-block align-top logo" alt="">
            </a>
            <ul class="nav justify-content-end">
                <li class="nav-item"><a href="" class="nav-link">@lang('mainMenu.home')</a></li>
                <li class="nav-item"><a href="pages/about.html" class="nav-link">@lang('mainMenu.about_us')</a></li>
                <li class="nav-item"><a href="pages/services.html" class="nav-link">@lang('mainMenu.our_services')</a>
                </li>
                <li class="nav-item"><a href="pages/compliance.html" class="nav-link">@lang('mainMenu.compliance')</a>
                </li>
                <li class="nav-item"><a href="pages/partners.html" class="nav-link">@lang('mainMenu.our_partners')</a>
                </li>
                <li class="nav-item"><a href="#testimonials-stars" class="nav-link">@lang('mainMenu.testimonials')</a>
                </li>
                <li class="nav-item"><a href="pages/contact.html" class="nav-link">@lang('mainMenu.contact_us')</a></li>
            </ul>
        </nav>
    </header>
    <section id="welcome">
        <div id="viewport">
            <div id="world"></div>
        </div>

        <div id="mountains">
            <img class="mountain left animated  slideInLeft delayed" src="img/welcome-left.png" alt=""/>
            <img class="mountain right animated  slideInRight delayed" src="img/welcome-right.png" alt=""/>
        </div>
        <div class="overflow">
            <div>
                <h2 class="overflow-test-1">"La sécurité porte un nom"</h2>
            </div>
            <div>
                <img class="overflow-logo animated zoomIn delayed " src="img/pss_logo_medium.png" alt="PSS"/>
                <a href="#section1" class="overflow-down-chevron">
                    <img class="animated infinite pulse" src="img/down-chevron.png" alt="v"/>
                </a>

                <div class="welcom-button-holder">
                    <img class="welcom-button animated fadeIn delayed" src="img/circle-shield.png" alt=""/>
                    <img class="welcom-button animated fadeIn delayed" src="img/circle-camera.png" alt=""/>
                    <img class="welcom-button animated fadeIn delayed" src="img/circle-truck.png" alt=""/>
                </div>
            </div>
            <footer class="bottom">
                <div class="copyright">&copy; Professional Security Service S.A. 2017</div>
                @if(App::isLocale('en'))
                    <div class="langSelector"><a href="/lang/fr" title="Site en français">FR</a> | <a href="/lang/en"
                                                                                                      class="active"
                                                                                                      title="Website in english">EN</a>
                    </div>
                @else
                    <div class="langSelector"><a href="/lang/fr" class="active" title="Site en français">FR</a> | <a
                                href="/lang/en" title="Website in english">EN</a></div>
                @endif
            </footer>
        </div>

    </section>
    <section class="presentation" id="section1">
        <h1>@lang('aboutUs.home_about_us_title')</h1>

        <div class="container">
            <div class="row">
                <div class="col">

                    @lang('aboutUs.home_about_us__p1')

                    <br/>

                    @lang('aboutUs.home_about_us_p2')

                    <br/>


                    <div class="btn-group btn-group-lg center" role="group" aria-label="...">
                        <a href="pages/about.html"
                           class="btn btn-primary btn-lg">
                            @lang('aboutUs.home_about_us_button_link_more')
                        </a>
                        <a href="pages/contact.html"
                           class="btn btn-primary btn-lg">
                            @lang('mainMenu.contact_us')
                        </a>
                    </div>

                </div>
                <div class="col">
                    <div class="row bigNumbers">
                        <div class="bigIcon col-5">
                            <i class="fa fa-users" aria-hidden="true"></i>
                        </div>
                        <div class="col-7">
                            <div class="num">1500</div>
                            <div class="caption">@lang('aboutUs.employees')</div>
                        </div>
                    </div>
                    <div class="row bigNumbers">
                        <div class="bigIcon col-5">
                            <i class="fa fa-building" aria-hidden="true"></i>
                        </div>
                        <div class="col-7">
                            <div class="num">12</div>
                            <div class="caption">@lang('aboutUs.offices')</div>
                        </div>
                    </div>
                    <div class="row bigNumbers">
                        <div class="bigIcon col-5">
                            <i class="fa fa-handshake-o" aria-hidden="true"></i>
                        </div>
                        <div class="col-7">
                            <div class="num">250</div>
                            <div class="caption">@lang('aboutUs.customers')</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <section class="presentation black" id="section2">
        <div id="section2Carousel" class="carousel slide carousel-fade" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#section2Carousel" data-slide-to="0" class="active"></li>
                <li data-target="#section2Carousel" data-slide-to="1"></li>
                <li data-target="#section2Carousel" data-slide-to="2"></li>
                <li data-target="#section2Carousel" data-slide-to="3"></li>
                <li data-target="#section2Carousel" data-slide-to="4"></li>
                <li data-target="#section2Carousel" data-slide-to="5"></li>

            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img class="d-block img-fluid bckImg" src="img/slide_security_guard.jpg" alt="First slide">
                    <div class="carousel-item-custom-content">

                        <div class="jumbotron carousel-caption ">
                            <h2 class="display-1">@lang('ourServices.armed_security_guard')</h2>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block img-fluid bckImg" src="img/slide_security_boduGuard.jpg" alt="Second slide">
                    <div class="carousel-item-custom-content">
                        <div class="jumbotron carousel-caption ">
                            <h2 class="display-1">@lang('ourServices.close_protection_details')</h2>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block img-fluid bckImg" src="img/slide_security_car.jpg" alt="Third slide">
                    <div class="carousel-item-custom-content">
                        <div class="jumbotron carousel-caption ">
                            <h2 class="display-1">@lang('ourServices.commodities_transport')</h2>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block img-fluid bckImg" src="img/slide_security_alarm.jpg" alt="Fourth slide">
                    <div class="carousel-item-custom-content">
                        <div class="jumbotron carousel-caption ">
                            <h2 class="display-1">@lang('ourServices.surveys')s</h2>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block img-fluid bckImg" src="img/slide_security_camera.jpg" alt="Fifth slide">
                    <div class="carousel-item-custom-content">
                        <div class="jumbotron carousel-caption ">
                            <h2 class="display-1">@lang('ourServices.training'),<br/> & @lang('ourServices.maintenance')
                            </h2>
                            <p>@lang('ourServices.access_control') • @lang('ourServices.cctv')
                                • @lang('ourServices.alarm_control_station_monitoring')
                                • @lang('ourServices.car_tracking')</p>

                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block img-fluid bckImg" src="img/slide_training.jpg" alt="Fifth slide">
                    <div class="carousel-item-custom-content">
                        <div class="jumbotron carousel-caption ">
                            <h2 class="display-1">@lang('ourServices.training')</h2>
                            <p class="lead"> @lang('ourServices.firearm_safety_and_weapon')
                                • @lang('ourServices.first_aid')
                                • @lang('ourServices.self_defense') •
                                @lang('ourServices.physical_Security') ...</p>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="send-in-front">
            <h1>@lang('mainMenu.our_services')</h1>

            <div class="container">
                <div class="row">
                    <div class="col-8">

                    </div>
                    <div class="col-4">
                        <br/>
                        <ul class="list-group carousel-s" style="font-size: 80%;">
                            <li class="list-group-item active" data-target="#section2Carousel" data-slide-to="0">
                                <span class="fa fa-circle-o"></span>
                                <span> &nbsp; &nbsp; @lang('ourServices.armed_security_guard')</span>
                            </li>
                            <li class="list-group-item" data-target="#section2Carousel" data-slide-to="1">
                                <span class="fa fa-circle-o"></span>
                                <span> &nbsp; &nbsp; @lang('ourServices.close_protection_details')</span>
                            </li>
                            <li class="list-group-item" data-target="#section2Carousel" data-slide-to="2">
                                <span class="fa fa-circle-o"></span>
                                <span> &nbsp; &nbsp; @lang('ourServices.commodities_transport')</span>
                            </li>
                            <li class="list-group-item" data-target="#section2Carousel" data-slide-to="3">
                                <span class="fa fa-circle-o"></span>
                                <span> &nbsp; &nbsp; @lang('ourServices.surveys')</span>
                            </li>
                            <li class="list-group-item" data-target="#section2Carousel" data-slide-to="4">
                                <span class="fa fa-circle-o"></span>
                                <span> &nbsp; &nbsp; @lang('ourServices.formation') & @lang('ourServices.maintenance')</span>
                            </li>
                            <li class="list-group-item" data-target="#section2Carousel" data-slide-to="5">
                                <span class="fa fa-circle-o"></span>
                                <span> &nbsp; &nbsp; @lang('ourServices.training')</span>
                            </li>
                        </ul>
                        <br/>
                        <a href="pages/services.html" style="margin:auto;   display: block;"
                           class="btn  btn-primary btn-lg">
                            @lang('ourServices.more_on_our_services')
                        </a>
                    </div>

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

    </section>
    <section class="presentation " id="section3">

        <br/>

        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>Our Mission</h1>
                    <p>To always provide the best possible security service solution adapted to the client’s need.
                        We will always strive to exceed the expectation of our clients.
                        We are and will remain the preferred providers of security services in Haiti.</p>
                </div>
                <div class="col-6">
                    <img src="img/testimonials.jpg" class="img-fluid mx-auto d-block" alt="...">
                </div>
            </div>
            <br/>

            <div class="row">
                <div class="col-6">
                    <img src="img/happyToServe.jpg" class="img-fluid mx-auto d-block" alt="...">
                </div>
                <div class="col">
                    <h1>Our Philosophy</h1>

                    <p>
                        A quality-based result which sets us apart from the competition. At the core of our success, a
                        blend
                        of quality people, excellent training and supervision, and dedication to serving our clients.
                    </p>

                </div>
            </div>
            <br/>
            <div class="well" id="testimonials-stars" style="padding-top:70px">
                <span class="rating">
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                    <span class="star"></span>
                </span>
            </div>
            <div id="testimonials" style="margin: auto;"></div>
            <!--<button type="button" id="mmm" style="margin:auto;   display: block;" class="btn btn-outline-secondary  btn-lg">-->
            <!--Testimonials-->
            <!--</button>-->
        </div>
    </section>
    <div class="videoHolder">
        <div id="videoDiv">
            <div id="videoBlock">
                <div><img src="img/preview.jpg" id="videosubstitute" alt="" width="800"></div>
                <video preload="auto" id="video" autoplay="autoplay" loop="loop" pla>
                    <source src="video/preview.webm" type="video/webm"/>
                    <source src="video/preview.mp4" type="video/mp4"/>
                </video>
                <div id="videoMessage">
                    <h2 class="youtubePlay" data-toggle="modal" data-target="#rideVideo"><i class="fa fa-youtube-play"
                                                                                            aria-hidden="true"></i></h2>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="rideVideo">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
                <!--<span aria-hidden="true">&times;</span></button>-->
                <!--<button type="button" >-->
                <div class="embed-responsive embed-responsive-16by9">
                    <div id="ytPlayer" class="embed-responsive-item"></div>
                </div>
            </div>
        </div>
    </div>
@endsection