@extends('front.layout')
@section('page_title', 'Accueil')
@section('content')
<div id="big_slider" class="owl-carouse">
<div class="slider-item bg-dark" data-background-image="/maquette/Background-Image-1.jpg">
    <h1>Votre carte de restaurant<span>sans contact et administrable</span></h1>
    <p class="link-holder"><a href="/" class="btn btn-cta btn-cta-big">En savoir plus</a></p>
</div>

</div> <!-- End #big_slider -->

<section id="section_infos_fonctionnement" class="section py-5">
<div class="container infos-fonctionnement-holder bloc-content-image">
    <div class="image-holder background-qrified">
        <img src="/maquette/Image-Illustration-1.jpg" alt="Fonctionnement d'OpenQR" />
    </div>
    <div class="text-holder">
        <div class="title-item picto-title">
            <div class="picto-item"><img src="/maquette/Picto-QR-Code.svg" alt="QR Code" /></div>
            <p>Votre QR Code pour la carte de votre restaurant</p>
        </div>
        <div class="text-content">
            <p>Permet à vos clients d'accéder à votre carte, votre menu, vos réseaux sociaux, vos
                coordonnées en scannant votre QR code. </p>
        </div>
        <div class="link-holder">
            <a href="#" class="btn btn-cta btn-cta-classic">En savoir plus</a>
        </div>

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

<section id="section_features" class="section position-relative section-light-grey py-5">

<div class="container sticky-right">
    <div class="feature-holder">
        <div class="row feature-item">
            <div class="title-item picto-title">
                <div class="picto-item"><img src="{{asset('maquette/svg/Picto-CarteFlexible.svg')}}" /></div>
                <p>Une carte flexible</p>
            </div>
            <div class="feature-content">
                <p>Administrez, modifiez, supprimer des éléments de votre carte à volonté. Affichez
                    votre
                    menu du jour et indiquez vos indisponibilités.</p>
            </div>
        </div>

        <div class="row feature-item">
            <div class="title-item picto-title">
                <div class="picto-item"><img src="{{asset('maquette/svg/Picto-SansContact.svg')}}" /></div>
                <p>Sans contact</p>
            </div>
            <div class="feature-content">
                <p>Scannez le QR code pour obtenir la carte de votre restaurant.</p>
            </div>
        </div>

        <div class="row feature-item">
            <div class="title-item picto-title">
                <div class="picto-item"><img src="{{asset('maquette/svg/Picto-SuiviScan.svg')}}" /></div>
                <p>Suivi du nombre de scan</p>
            </div>
            <div class="feature-content">
                <p>Ayez une vue précise de l’utilisation de votre QR code.<br />
                    Vous disposez d’un suivi précis du nombre de fois que le QR code a été scanné.</p>
            </div>
        </div>

        <div class="row feature-item">
            <div class="title-item picto-title">
                <div class="picto-item"><img src="{{asset('maquette/svg/Picto-CodeUnique.svg')}}" /></div>
                <p>Un code unique</p>
            </div>
            <div class="feature-content">
                <p>Modifiez à volonté votre carte, vos informations sans avoir besoin de générer un
                    autre QR
                    code, sans avoir besoin de réimprimer votre QR code.</p>
            </div>
        </div>

        <div class="row feature-item mb-0">
            <div class="title-item picto-title">
                <div class="picto-item"><img src="{{asset('maquette/svg/Picto-CarteFlexible.svg')}}" /></div>
                <p>Personnalisé à votre image</p>
            </div>
            <div class="feature-content">
                <p>Le QR code, la carte sont travaillés à votre image. Votre logo, vos couleurs, vos visuels.</p>
            </div>
        </div>

    </div>

    <div class="absolute-item qr-code-item">
        <img src="/maquette/Img-ScanMe-QR.png" alt="Scannez-moi" />
    </div>
</div>
</section>

<section id="section_points_fort" class="section section-blanc py-5">
<div class="container card-holder">
    <div class="card-item">
        <div class="image-holder mb-3">
            <img src="/maquette/Img-Illust-1.jpg" alt="Carte éditable à volonté" />
        </div>
        <div class="text-holder">
            <h4 class="font-weight-bold text-5 mb-3">Carte éditable à volonté</h4>
            <p>Modifiez à volonté votre carte, vos prix, vos indisponibilités...</p>
        </div>
    </div>

    <div class="card-item">
        <div class="image-holder mb-3">
            <img src="/maquette/Img-Illust-2.jpg" alt="Votre carte et plus" />
        </div>
        <div class="text-holder">
            <h4 class="font-weight-bold text-5 mb-3">Votre carte et plus</h4>
            <p>Ajoutez vos réseaux sociaux, votre site internet, le plan d’accès, vos équipes...</p>
        </div>
    </div>

    <div class="card-item">
        <div class="image-holder mb-3">
            <img src="/maquette/Img-Illust-3.jpg" alt="Une carte à votre image" />
        </div>
        <div class="text-holder">
            <h4 class="font-weight-bold text-5 mb-3">Une carte à votre image</h4>
            <p>Une personnisation à vos couleurs, votre identité</p>
        </div>
    </div>
</div>
</section>

<!-- # <section id="section_comment_ca_marche"
class="section section-height-5 section-parallax section-angled border-0 overlay overlay-show overlay-op-9 position-relative z-index-0 m-0"
style="background-image: url('/maquette/Background-Texture-Ardoise-2.jpg');" data-plugin-parallax
data-plugin-options="{'speed': 1.5, 'fadeIn': true, 'parallaxHeight': '130%'}"
data-image-src="/maquette/Background-Texture-Ardoise-2.jpg" data-parallax-speed="1.5"
data-parallax-height="130%"> -->
<section id="section_comment_ca_marche" class="section section-height-5 section-parallax section-angled border-0 overlay overlay-show overlay-op-9 position-relative z-index-0 m-0"  data-image-src="/maquette/Background-Texture-Ardoise-2.jpg" data-parallax-speed="1.5" data-parallax-height="130%">
<div class="section-angled-layer-top section-angled-layer-increase-angle bg-light"></div>
<div class="section-angled-content position-relative">
    <div class="container mb-0 container-shadowed">
        <div class="row">
            <div class="col text-center">
                <h2 class="text-color-light font-weight-bold text-10 mb-5 color-whit">Comment ça marche
                    ?</h2>
            </div>
        </div>
        <div class="row counters color-whit">
            <div class="col-item col-sm-12 col-lg-4 mb-4 mb-lg-0">
                <div class="counter">
                    <!-- #  <strong data-to="90" data-append="+"
                        class="text-color-light text-16 line-height-1">0</strong> -->
                    <span class="text-color-grey text-5">Communiquez-nous vos informations</span>
                </div>
            </div>
            <div class="col-item col-sm-12 col-lg-4 mb-4 mb-lg-0">
                <div class="counter">
                    <!-- # <strong data-to="8" data-append="+"
                        class="text-color-primary text-16 line-height-1">0</strong> -->
                    <span class="text-color-grey text-5">Choisissez votre support</span>
                </div>
            </div>
            <div class="col-item col-sm-12 col-lg-4 mb-4 mb-sm-0">
                <div class="counter">
                    <!-- # <strong data-to="352" class="text-color-light text-16 line-height-1">0</strong> -->
                    <span class="text-color-grey text-5">On s'occupe du reste</span>
                </div>
            </div>
            {{--<div class="col-item col-sm-6 col-lg-3">
                <div class="counter">

                    <span class="text-color-grey text-5">Un autre truc ?</span>
                </div>
            </div>--}}
        </div>
    </div>
</div>
</section>

<section id="section_contactez-nous" class="section background-blanc section-angled border-0 py-5 position-relative overflow-visible z-index-2 m-0">
<div class="section-angled-layer-top section-angled-layer-increase-angle bg-light"></div>
<div class="container ">
    <div class="mid-container contactez-nous-holder">
        <div class="image-holder"><img src="/maquette/Background-Image-2.jpg" /></div>
        <div class="texte-holder">
            <p>Ça vous intéresse, vous souhaitez tester ?</p>
            <div class="link-holder justify-center"><a href="/contact" class="btn btn-cta">Contactez-nous</a>
            </div>
        </div>
    </div>
</div>
</section>

<section id="section_tarifs" class="section section-light-grey position-relative border-0 m-0 py-5">
<div class="container card-holder">

    <div class="row mt-">
        <div class="col text-center pb-3">
            <h2 class="text-color-dark font-weight-bold text-10 mb-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">Tarifs

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


    <div class="col-sm-6 offset-0">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Une carte sur mesure :</h5>
            <ul class="card-text list-group">
                <li class="list-group-item">QR code unique</li>
               <li class="list-group-item">Produits illimités</li>
                <li class="list-group-item">Nous personnalisons à votre identité votre carte</li>
                <li class="list-group-item">Nous insérons votre carte (catégories, prix, images)</li>
                <li class="list-group-item">Nous personnalisons votre QR code à votre image</li>
                <li class="list-group-item">Nous fournissons les impressions des QR codes</li>
                <li class="list-group-item">Gestion des informations annexes (réseaux sociaux)</li>
                <li class="list-group-item">Possibilité de filtrer sur un ingrédients, sans gluten, végétarien</li>
                <li class="list-group-item">Interface pensée pour la consultation de carte</li>
                <li class="list-group-item">Livraison de vos supports de communication</li>
                <li class="list-group-item">Conseils et aide sur l'utilisation</li>
                <li class="list-group-item">L’accès à l’application permettant de modifier à volonté votre carte</li>
            </ul>
                <h4 class="price-item mt-3 color-bleu mb-0">99,<span class="small-cents">90€</span><span class="per-month">/ par mois</span></h4>
                <h4 class="price-item mt-3 color-bleu mb-0" style="font-size: 19px;" >ou 999<span class="small-cents">€</span><span class="per-month">/ an</span></h4>
            </div>
        </div>
    </div>


    <!--<div class="card-item col-sm-3 offset-3">
        <div class="card">
            <div class="info-item">2 mois offerts</div>
            <div class="card-body">
                <h5 class="card-title">Annuel</h5>
                <ul class="card-text">
                    <li>Tous les avantages précédents</li>
                    <li>Produits illimités</li>
                    <li>Mises à jour régulières</li>
                    <li>Conseils et aide sur l'utilisation</li>
                </ul>
                <h4 class="price-item mt-3 color-bleu mb-0" style="
display: none;
">99.<span class="small-cents">9€</span><span class="per-month">/ par mois</span></h4>
                <h4 class="price-item mt-3 color-bleu mb-0">999,<span class="small-cents">00€</span><span class="per-month">/ 12 mois</span></h4>
            </div>
        </div>
    </div>-->
    <div class="row">
        <div class="link-holder"><a href="/contact" class="btn btn-cta btn-cta-classic">Commander</a>
        </div>
    </div>

</div>
</section>

<section id="section_options_supp" class="section  border-0 position-relative overflow-visible z-index-1 m-0 section-greyish py-5">
<div class="section-angled-layer-top section-angled-layer-increase-angle bg-light"></div>
<div class="section-angled-content position-relative mt-0">
    <div class="container">
        <div class="row mt-3">
            <div class="col text-center pb-3">
                <h2 class="text-color-dark font-weight-bold text-10 mb-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">Les
                    options disponibles</h2>
            </div>
        </div>

        <div class="row feature-holder-2">
            <div class="feature-item feature-box feature-box-style-2 p-3">
                <div class="feature-title mb-3">
                    <div class="feature-box-icon">
                        <img src="{{asset('maquette/svg/Picto-Flyers.svg')}}" />
                    </div>
                    <h4 class="font-weight-bold text-5 mb-0">Flyers</h4>
                </div>


                <div class="feature-box-info">
                    <p class="text-3 mb-0 text-infos">Pratique pour donner de la visibilité à
                        votre commerce</p>
                    <p class="mt-3 mb-0 text-bleu">À partir de 35,50€ HT</p>
                </div>
            </div>

            <div class="feature-item feature-box feature-box-style-2 p-3">
                <div class="feature-title mb-3">
                    <div class="feature-box-icon">
                        <img src="{{asset('maquette/svg/Picto-Affiche.svg')}}" />
                    </div>
                    <h4 class="font-weight-bold text-5 mb-0">Affiche</h4>
                </div>
                <div class="feature-box-info">

                    <p class="text-3 mb-0 text-infos">Idéal pour montrer votre carte
                        directement sur la devanture</p>
                    <p class="mt-3 mb-0 text-bleu">À partir de 35,50€ HT</p>
                </div>
            </div>

            <div class="feature-item feature-box feature-box-style-2 p-3">
                <div class="feature-title mb-3">
                    <div class="feature-box-icon">
                        <img src="{{asset('maquette/svg/Picto-Sticker.svg')}}" />
                    </div>
                    <h4 class="font-weight-bold text-5 mb-0">Autocollants</h4>
                </div>


                <div class="feature-box-info">

                    <p class="text-3 mb-0 text-infos">Utile pour afficher votre QR Code sur
                        tout type de surface</p>

                    <p class="mt-3 mb-0 text-bleu">À partir de 55,50€ HT</p>
                </div>
            </div>

            <div class="feature-item feature-box feature-box-style-2 p-3">
                <div class="feature-title mb-3">
                    <div class="feature-box-icon">
                        <img src="{{asset('maquette/svg/Picto-Kakemono.svg')}}" />
                    </div>
                    <h4 class="font-weight-bold text-5 mb-0">Kakemono</h4>
                </div>
                <div class="feature-box-info">

                    <p class="text-3 mb-0 text-infos">Besoin d'un support PLV pour communiquer en hauteur ? C'est ce qu'il vous faut</p>
                    <p class="mt-3 mb-0 text-bleu">À partir de 65,50€ HT</p>
                </div>
            </div>

            <div class="feature-item feature-box feature-box-style-2 p-3">
                <div class="feature-title mb-3">
                    <div class="feature-box-icon">
                        <img src="{{asset('maquette/svg/Picto-Verre.svg')}}" />
                    </div>
                    <h4 class="font-weight-bold text-5 mb-0">Dessous de verre</h4>
                </div>
                <div class="feature-box-info">

                    <p class="text-3 mb-0 text-infos">Personnalisez un peu plus votre restaurant grâce à des dessous de verre à votre image</p>
                    <p class="mt-3 mb-0 text-bleu">À partir de 125,50€ HT</p>
                </div>
            </div>





        </div>
        <!-- # <div class="row gx-3 gy-5 appear-animation" data-appear-animation="fadeInUpShorterPlus"
            data-appear-animation-delay="400">
            <div class="col-md-6 col-lg-4">
                <div class="feature-box feature-box-style-2">
                    <div class="feature-box-icon pt-5-5">
                        <i
                            class="icons icon-support text-color-primary text-10 position-relative bottom-6"></i>
                    </div>
                    <div class="feature-box-info">
                        <h4 class="font-weight-bold text-5-5 mb-3-5">Autocollants</h4>
                        <p class="text-3-5 mb-0">Utile pour afficher votre QR Code sur
                            tout type de surface</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="feature-box feature-box-style-2">
                    <div class="feature-box-icon pt-5-5">
                        <i
                            class="icons icon-doc text-color-primary text-10 position-relative bottom-6"></i>
                    </div>
                    <div class="feature-box-info">
                        <h4 class="font-weight-bold text-5-5 mb-3-5">Flyers</h4>
                        <p class="text-3-5 mb-0">Pratique pour donner de la visibilité à
                            votre commerce.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="feature-box feature-box-style-2">
                    <div class="feature-box-icon pt-5-5">
                        <i
                            class="icons icon-social-google text-color-primary text-10 position-relative bottom-6"></i>
                    </div>
                    <div class="feature-box-info">
                        <h4 class="font-weight-bold text-5-5 mb-3-5">Affiche</h4>
                        <p class="text-3-5 mb-0">Idéal pour montrer votre carte
                            directement sur la devanture</p>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</div>
</section>

<section class="section bg-transparent border-0 position-relative py-5">
<div class="container">
    <div class="row">
        <div class="col text-center">
            <h2 class=" font-weight-bold text-10 mb-5">Ils utilisent déjà OpenQR</h2>
        </div>
    </div>
    <div class="row clients-holder">

        <div class="clients-item">
            <div class="image-holder mb-3">
                <img src="/maquette/Img-Illus-client-1.png" alt="" />
            </div>
            <div class="text-holder">
                <h4 class="font-weight-bold text-5 mb-3">Burger Fermier</h4>
                <p class="mb-0">Restaurant au Touquet</p>
            </div>
        </div>

        <div class="clients-item">
            <div class="image-holder mb-3">
                <img src="/maquette/Img-Illust-client-2.jpg" alt="" />
            </div>
            <div class="text-holder">
                <h4 class="font-weight-bold text-5 mb-3">Le Nausicaa</h4>
                <p class="mb-0">Brasserie à Arzon</p>
            </div>
        </div>

        <div class="clients-item">
            <div class="image-holder mb-3">
                <img src="/maquette/Img-Illust-3.jpg" alt="" />
            </div>
            <div class="text-holder">
                <h4 class="font-weight-bold text-5 mb-3">Bolsa</h4>
                <p class="mb-0">Commerçant à Paris.</p>
            </div>
        </div>

        <!-- # <div class="col-md-6 col-lg-4  appear-animation" data-appear-animation="fadeInUpShorterPlus"
            data-appear-animation-delay="400">
            <div class="feature-box feature-box-style-4">
                <div class="feature-box-icon pt-5-5">
                    <i
                        class="icons icon-support text-color-primary text-10 position-relative bottom-6"></i>
                    Image
                </div>
                <div class="feature-box-info">
                    <h4 class="font-weight-bold text-5-5 mb-3-5">Client N°1</h4>
                    <p class="text-3-5 mb-0">Commerçant à Petit-Quevilly.</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="feature-box feature-box-style-4">
                <div class="feature-box-icon pt-5-5">
                    <i class="icons icon-doc text-color-primary text-10 position-relative bottom-6"></i>
                    Image
                </div>
                <div class="feature-box-info">
                    <h4 class="font-weight-bold text-5-5 mb-3-5">Client N°2</h4>
                    <p class="text-3-5 mb-0">Commerçant à Rouen.</p>
                </div>
            </div>
        </div> -->
    </div>
</div>
</section>

@endsection