@extends('layouts.master')

@push('additional-css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
@endpush

@push('additional-js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>

    <script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>
@endpush

@section('page-content')

<!--header-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="ion-grid icon-sm"></span>
    </button>
    <a class="navbar-brand hero-heading" href="#">{{ env('APP_NAME') }}</a>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item mr-3">
                <a class="nav-link page-scroll" href="#intro">{{__('app.home.sections.intro')}} <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item mr-3">
                <a class="nav-link page-scroll" href="#about">{{__('app.home.sections.about')}} </a>
            </li>
            <li class="nav-item mr-3">
                <a class="nav-link page-scroll" href="#features">{{__('app.home.sections.features')}} </a>
            </li>
            <li class="nav-item mr-3">
                <a class="nav-link page-scroll" href="#pricing">{{__('app.home.sections.pricing')}} </a>
            </li>
            <li class="nav-item mr-3">
                <a class="nav-link page-scroll" href="#contact">{{__('app.home.sections.contact')}} </a>
            </li>
        </ul>
    </div>
</nav>

<!--intro-->
<section class="bg-texture hero" id="main">
    <div class="container">
        <div class="row d-md-flex brand">
            <div class="col-md-6 hidden-sm-down wow fadeIn">
                <img class="img-fluid mx-auto d-block img-intro" src="{{asset('resources/img/OIG1 (1).jpeg')}}"/>
            </div>
            <div class="col-md-6 col-sm-12 text-white wow fadeIn">
                <h2 class="pt-4">{!!__('app.home.intro.title')!!}</h2>
                <p class="mt-5">
                    {!!__('app.home.intro.description')!!}
                </p>
                <p class="mt-5">
                    @guest
                        <a href='{{route("login")}}' class="btn btn-primary mr-2 mb-2 page-scroll">{{__('app.home.intro.log-in')}}</a>
                        <a href='{{route("register")}}' class="btn btn-white mb-2 page-scroll">{{__('app.home.intro.register')}}</a>
                    @endguest
                    @auth
                        <a href="{{route('bars')}}" class="btn btn-primary mr-2 mb-2 page-scroll">{{__('app.home.intro.goto-my-bars')}}</a>
                    @endauth
                </p>
            </div>
        </div>
    </div>
</section>

<!--about-->
<section class="bg-white p-0">
    <div class="container-fluid">
        <div class="row d-md-flex mt-5">
            <div class="col-sm-6 p-0 wow fadeInLeft">
                <img class="img-fluid" src="img/product2.jpg" alt="Gallery">
            </div>
            <div class="col-sm-6 pl-5 pr-5 pt-5 pb-4 wow fadeInRight">
                <h3><a href="#">About BUVETTE.be</a></h3>
                <p class="lead pt-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                <ul class="pt-4 pb-3 list-default">
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                    <li>Aenean commodo ligula eget dolor.</li>
                    <li>Aenean massa.</li>
                    <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                    <li>Aenean commodo ligula eget dolor.</li>
                    <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
                </ul>
                <a href="#purchase" class="btn btn-primary mr-2 page-scroll">Get Started with Comply</a>
            </div>
        </div>
    </div>
</section>

<!--features-->
<section class="bg-light" id="features">
    <div class="container">
        <div class="row mb-3">
            <div class="col-md-6 col-sm-8 mx-auto text-center wow fadeIn">
                <h2 class="text-primary">Amazing Features</h2>
                <p class="lead mt-4">
                    Comply with plenty of awesome features to <br/>wow the viewers.
                </p>
            </div>
        </div>
        <div class="row mt-5 text-center">
            <div class="col-md-4 wow fadeIn">
                <div class="card">
                    <div class="card-body">
                        <div class="icon-box">
                            <em class="ion-ios-game-controller-b-outline icon-md"></em>
                        </div>
                        <h6>Unlimited Gaming</h6>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 wow fadeIn">
                <div class="card">
                    <div class="card-body">
                        <div class="icon-box">
                            <em class="ion-android-wifi icon-md"></em>
                        </div>
                        <h6>Built-in Wifi</h6>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 wow fadeIn">
                <div class="card">
                    <div class="card-body">
                        <div class="icon-box">
                            <em class="ion-ios-settings icon-md"></em>
                        </div>
                        <h6>Advanced Rate Control</h6>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 wow fadeIn">
                <div class="card">
                    <div class="card-body">
                        <div class="icon-box">
                            <em class="ion-ios-cloud-upload-outline icon-md"></em>
                        </div>
                        <h6>Unlimited Cloud Storage</h6>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 wow fadeIn">
                <div class="card">
                    <div class="card-body">
                        <div class="icon-box">
                            <em class="ion-ios-locked-outline icon-md"></em>
                        </div>
                        <h6>Highly Secure</h6>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 wow fadeIn">
                <div class="card">
                    <div class="card-body">
                        <div class="icon-box">
                            <em class="ion-android-color-palette icon-md"></em>
                        </div>
                        <h6>Unlimited Colors</h6>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!--pricing-->
<section class="bg-light" id="pricing">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                <h2 class="text-primary">Pricing</h2>
                <p class="lead pt-3">
                    Our no-nonsense pricing.
                </p>
            </div>
        </div>
        <div class="row d-md-flex mt-4 text-center">
            <div class="col-sm-4 mt-4 wow fadeIn">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title pt-4 text-orange">Basic</h5>
                        <h3 class="card-title text-primary pt-4">FREE</h3>
                        <p class="card-text text-muted pb-3 border-bottom">per month</p>
                        <ul class="list-unstyled pricing-list">
                            <li>Maximum 1 bar</li>
                            <li>Maximum 20 articles</li>
                            <li>Maximum 1000 visiteurs / jour</li>
                            <li>Pas de support</li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-radius">Order Now</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-0 wow fadeIn">
                <div class="card pt-4 pb-4">
                    <div class="card-body">
                        <h5 class="card-title pt-4 text-orange">Standard <small class="badge bg-primary small-xs">Popular</small></h5>
                        <h3 class="card-title text-primary pt-4"><sup>€</sup> 9.99</h3>
                        <p class="card-text text-muted pb-3 border-bottom">par année</p>
                        <ul class="list-unstyled pricing-list">
                            <li>Nombre de bar : 5</li>
                            <li>Maximum 50 articles (par bar)</li>
                            <li>Maximum 2000  visiteurs / jour</li>
                            <li>Support basic</li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-radius">Order Now</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4 wow fadeIn">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title pt-4 text-orange">Advanced</h5>
                        <h3 class="card-title text-primary pt-4"><sup>€</sup> 19.99</h3>
                        <p class="card-text text-muted pb-3 border-bottom">per month</p>
                        <ul class="list-unstyled pricing-list">
                            <li>Nombre de bar illimité</li>
                            <li>Nombre d'article illimité</li>
                            <li>Nombre visiteurs illimité</li>
                            <li>Support prioritaire</li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-radius">Order Now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!--contact-->
<section class="bg-texture-collage p-0" id="contact">
    <div class="container">
        <div class="row d-md-flex text-white text-center wow fadeIn">
            <div class="col-sm-4 p-5">
                <p><em class="ion-ios-telephone-outline icon-md"></em></p>
                <p class="lead">+1 5456 87595</p>
            </div>
            <div class="col-sm-4 p-5">
                <p><em class="ion-ios-email-outline icon-md"></em></p>
                <p class="lead">info@comply.com</p>
            </div>
            <div class="col-sm-4 p-5">
                <p><em class="ion-ios-location-outline icon-md"></em></p>
                <p class="lead">Austin, Texas</p>
            </div>
        </div>
    </div>
</section>

<!--footer-->
<section class="bg-footer" id="connect">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center wow fadeIn">
                <h1>COMPLY</h1>
                <p class="mt-4">
                    <a href="https://twitter.com/" target="_blank"><em class="ion-social-twitter text-twitter-alt icon-sm mr-3"></em></a>
                    <a href="https://facebook.com/" target="_blank"><em class="ion-social-github text-facebook-alt icon-sm mr-3"></em></a>
                    <a href="https://www.linkedin.com/" target="_blank"><em class="ion-social-linkedin text-linkedin-alt icon-sm mr-3"></em></a>
                    <a href="https://plus.google.com/" target="_blank"><em class="ion-social-googleplus text-google-alt icon-sm mr-3"></em></a>
                </p>
                <p class="pt-2 text-muted">
                    &copy; 2017 Comply Theme. A Free Bootstrap 4 product landing page theme by 
                    <a href="https://wireddots.com">Wired Dots</a>. Developed by <a href="https://twitter.com/attacomsian">@attacomsian</a>
                </p>
            </div>
        </div>
    </div>
</section>


@endsection