{% extends 'bo/base.html.twig' %}

{% block title %}Nos fonctionnalités{% endblock %}

{% block body %}

    <section class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall "
             data-options='{direction: "fromtop", animation_duration: 25, direction: "reverse"}'>
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 u-bg-overlay g-bg-black-opacity-0_3--after"
             style="height: 140%; background-image: url({{ asset('templates/bo/img/bg6.jpg') }});"></div>
        <!-- End Parallax Image -->

        <!-- Promo Block Content -->
        <div class="container g-color-white text-center g-py-100">
            <h3 class="h1 g-font-weight-600 text-uppercase mb-2">Fonctionnalités</h3>
        </div>
        <!-- Promo Block Content -->
    </section>


    <section class="container g-pt-100 g-pb-50">
        <div class="row justify-content-center g-mb-60">
            <div class="col-lg-7">
                <!-- Heading -->
                <div class="text-center">
                    <h2 class="h3 g-color-black text-uppercase mb-2">izibrick</h2>
                    <div class="d-inline-block g-width-35 g-height-2 g-bg-primary mb-2"></div>
                    <p class="mb-0">Choisissez un thème, une couleur et un logo et partagez votre site internet
                        professionnel.</p>
                </div>
                <!-- End Heading -->
            </div>
        </div>
    </section>

    <section class="container">
        <div class="row">
            <div class="col-lg-6 align-self-center g-mb-60">
                <div class="js-carousel text-center g-pb-30" data-infinite="true"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-35 g-height-40 g-font-size-18 g-color-gray g-bg-white g-mt-minus-10"
                     data-arrow-left-classes="fa fa-angle-left g-left-0"
                     data-arrow-right-classes="fa fa-angle-right g-right-0">
                    <div class="js-slide">
                        <a class="js-fancybox" href="javascript:;" data-fancybox="lightbox-gallery--07-1"
                           data-src="{{ asset('templates/template-4/sticker.png') }}" data-caption="Exemples"
                           data-animate-in="bounceInDown" data-animate-out="bounceOutDown" data-speed="1000"
                           data-overlay-blur-bg="true">
                            <img class="img-fluid" src="{{ asset('templates/template-4/sticker.png') }}"
                                 alt="Exemple">
                        </a>
                    </div>

                    <div class="js-slide">
                        <a class="js-fancybox" href="javascript:;" data-fancybox="lightbox-gallery--07-1"
                           data-src="{{ asset('templates/template-5/sticker.png') }}" data-caption="Exemples"
                           data-animate-in="bounceInDown" data-animate-out="bounceOutDown" data-speed="1000"
                           data-overlay-blur-bg="true">
                            <img class="img-fluid" src="{{ asset('templates/template-5/sticker.png') }}"
                                 alt="Exemple">
                        </a>
                    </div>

                    <div class="js-slide">
                        <a class="js-fancybox" href="javascript:;" data-fancybox="lightbox-gallery--07-1"
                           data-src="{{ asset('templates/template-3/sticker.png') }}" data-caption="Exemples"
                           data-animate-in="bounceInDown" data-animate-out="bounceOutDown" data-speed="1000"
                           data-overlay-blur-bg="true">
                            <img class="img-fluid" src="{{ asset('templates/template-3/sticker.png') }}"
                                 alt="Exemple">
                        </a>
                    </div>

                    <div class="js-slide">
                        <a class="js-fancybox" href="javascript:;" data-fancybox="lightbox-gallery--07-1"
                           data-src="{{ asset('templates/template-2/sticker.png') }}" data-caption="Exemples"
                           data-animate-in="bounceInDown" data-animate-out="bounceOutDown" data-speed="1000"
                           data-overlay-blur-bg="true">
                            <img class="img-fluid" src="{{ asset('templates/template-2/sticker.png') }}"
                                 alt="Exemple">
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 align-self-center g-mb-60">
                <div class="mb-2">
                    <h2 class="h3 g-color-black text-uppercase mb-2">Tout le nécessaire à votre
                        activité</h2>
                    <div class="d-inline-block g-width-35 g-height-2 g-bg-primary mb-2"></div>
                </div>
                <div class="mb-5">
                    <p class="mb-5">L'ensemble des pages sont créées et prêtes à être enrichies selon vos envies</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <ul class="list-unstyled g-font-size-13 mb-0">
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Accueil
                                </li>
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Présentation
                                </li>
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Blog
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-6">
                            <ul class="list-unstyled g-font-size-13 mb-0">
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Tarif
                                </li>
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Devis
                                </li>
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Contact
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <a class="btn btn-md u-btn-outline-black g-font-size-default g-rounded-50 g-py-10 mr-2"
                   href="{{ path('our-contact', {'subject':3}) }}">Plus d'informations ?</a>
                <a class="btn btn-md u-btn-primary g-font-size-default g-rounded-50 g-py-10"
                   href="{{ path('order_index') }}">Je crée mon site</a>
            </div>
        </div>
    </section>
    <hr/>
    <section class="container g-pb-40">
        <div class="row">
            <div class="col-lg-6 align-self-center g-mb-60">
                <div class="mb-2">
                    <h2 class="h3 g-color-black text-uppercase mb-2">Exigences qualité</h2>
                    <div class="d-inline-block g-width-35 g-height-2 g-bg-primary mb-2"></div>
                </div>
                <div class="mb-5">
                    <p class="mb-5">Tous les sites izibrick répondent à des exigences qualités des standards du web</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <ul class="list-unstyled g-font-size-13 mb-0">
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Site responsive
                                </li>
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Assistance à la création
                                </li>
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Accès à votre back-office
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-6">
                            <ul class="list-unstyled g-font-size-13 mb-0">
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Support par mail
                                </li>
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Suivi des visites (offre professionnelle)
                                </li>
                                <li>
                                    <i class="d-inline-block g-color-primary mr-2 mb-3 fa fa-check"></i>
                                    Campagne publicitaire (offre professionnelle)
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <a class="btn btn-md u-btn-outline-black g-font-size-default g-rounded-50 g-py-10 mr-2"
                   href="{{ path('our-contact', {'subject':3}) }}">Plus d'informations ?</a>
                <a class="btn btn-md u-btn-primary g-font-size-default g-rounded-50 g-py-10"
                   href="{{ path('order_index') }}">Je crée mon site</a>
            </div>
            <div class="col-lg-6 align-self-center g-mb-60">
                <div class="js-carousel text-center g-pb-30" data-infinite="true"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-35 g-height-40 g-font-size-18 g-color-gray g-bg-white g-mt-minus-10"
                     data-arrow-left-classes="fa fa-angle-left g-left-0"
                     data-arrow-right-classes="fa fa-angle-right g-right-0">
                    <div class="js-slide">
                        <a class="js-fancybox" href="javascript:;" data-fancybox="lightbox-gallery--07-1"
                           data-src="{{ asset('templates/template-4/sticker.png') }}" data-caption="Exemples"
                           data-animate-in="bounceInDown" data-animate-out="bounceOutDown" data-speed="1000"
                           data-overlay-blur-bg="true">
                            <img class="img-fluid" src="{{ asset('templates/template-4/sticker.png') }}"
                                 alt="Exemple">
                        </a>
                    </div>

                    <div class="js-slide">
                        <a class="js-fancybox" href="javascript:;" data-fancybox="lightbox-gallery--07-1"
                           data-src="{{ asset('templates/template-5/sticker.png') }}" data-caption="Exemples"
                           data-animate-in="bounceInDown" data-animate-out="bounceOutDown" data-speed="1000"
                           data-overlay-blur-bg="true">
                            <img class="img-fluid" src="{{ asset('templates/template-5/sticker.png') }}"
                                 alt="Exemple">
                        </a>
                    </div>

                    <div class="js-slide">
                        <a class="js-fancybox" href="javascript:;" data-fancybox="lightbox-gallery--07-1"
                           data-src="{{ asset('templates/template-3/sticker.png') }}" data-caption="Exemples"
                           data-animate-in="bounceInDown" data-animate-out="bounceOutDown" data-speed="1000"
                           data-overlay-blur-bg="true">
                            <img class="img-fluid" src="{{ asset('templates/template-3/sticker.png') }}"
                                 alt="Exemple">
                        </a>
                    </div>

                    <div class="js-slide">
                        <a class="js-fancybox" href="javascript:;" data-fancybox="lightbox-gallery--07-1"
                           data-src="{{ asset('templates/template-2/sticker.png') }}" data-caption="Exemples"
                           data-animate-in="bounceInDown" data-animate-out="bounceOutDown" data-speed="1000"
                           data-overlay-blur-bg="true">
                            <img class="img-fluid" src="{{ asset('templates/template-2/sticker.png') }}"
                                 alt="Exemple">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>


{% endblock %}

    {% block javascripts %}
        <!-- JS Implementing Plugins -->
        <script src="{{ asset('assets/vendor/fancybox/jquery.fancybox.min.js') }}"></script>
        <script src="{{ asset('assets/vendor/slick-carousel/slick/slick.js') }}"></script>

        <!-- JS Unify -->
        <script src="{{ asset('assets/js/components/hs.popup.js') }}"></script>
        <script src="{{ asset('assets/js/components/hs.carousel.js') }}"></script>

        <!-- JS Plugins Init. -->
        <script>
            $(document).on('ready', function () {
                // initialization of popups
                $.HSCore.components.HSPopup.init('.js-fancybox');

                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');
            });
        </script>
    {% endblock %}