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

{% block title %}Nos tarifs{% 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">Tarifs</h3>
        </div>
        <!-- Promo Block Content -->
    </section>
    <section class="g-bg-izibrick-light-v5">
        <div class="container g-pb-100">
            <!-- Pricing Plans -->
            <div class="row g-mt-minus-100 g-mb-70">
                <div class="col-md-4 g-mb-30">
                    <!-- Article -->
                    <article
                            class="u-shadow-v21 u-shadow-v21--hover g-bg-white text-center g-overflow-hidden g-rounded-4 g-pos-rel g-z-index-2 g-cursor-pointer g-transition-0_3">
                        <!-- Article Header -->
                        <header class="g-bg-izibrick g-pos-rel g-px-20 g-py-70">
                            <svg class="g-pos-abs g-bottom-0 g-left-0 g-right-0" version="1.1"
                                 preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"
                                 xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="70px"
                                 viewBox="0 0 300 70">
                                <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
                c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.6" fill="#ffffff"/>
                                <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
                c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6" fill="#ffffff"/>
                                <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
                H42.401L43.415,98.342z" opacity="0.7" fill="#ffffff"/>
                                <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
                c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#ffffff"/>
                            </svg>
                            <strong class="d-block g-color-white g-font-size-50 g-line-height-0_7 g-mb-20">
                                <span class="g-valign-top g-font-size-default">€ </span>79<span
                                        class="g-font-size-default">/ mois</span>
                            </strong>
                            <h3 class="h6 text-uppercase g-color-white-opacity-0_7 g-letter-spacing-3 g-mb-20">
                                Premium</h3>
                        </header>
                        <!-- End Article Header -->

                        <!-- Article Content -->
                        <div class="g-px-20 g-py-40">
                            <ul class="list-unstyled g-mb-40">
                                <li class="g-mb-20">Site <strong>responsive</strong></li>
                                <li class="g-mb-20">Assistance à la création</li>
                                <li class="g-mb-20">Accès à votre back-office</li>
                                <li class="g-mb-20">Support par mail</li>
                                <li class="g-mb-20">&nbsp;</li>
                                <li class="g-mb-20">&nbsp;</li>
                                <li class="g-mb-20">&nbsp;</li>
                                <li class="g-mb-20">&nbsp;</li>
                            </ul>
                            <a class="btn text-uppercase u-btn-izibrick g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10"
                               href="{{ path('order_product', {'product':1}) }}">Je crée mon site</a>
                        </div>
                        <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                    <!-- Article -->
                    <article
                            class="u-shadow-v21 u-shadow-v21--hover g-bg-white text-center g-overflow-hidden g-rounded-4 g-pos-rel g-z-index-2 g-cursor-pointer g-transition-0_3">
                        <!-- Article Header -->
                        <header class="g-bg-izibrick g-pos-rel g-px-20 g-py-70">
                            <svg class="g-pos-abs g-bottom-0 g-left-0 g-right-0" version="1.1"
                                 preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"
                                 xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="70px"
                                 viewBox="0 0 300 70">
                                <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
                c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.6" fill="#ffffff"/>
                                <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
                c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6" fill="#ffffff"/>
                                <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
                H42.401L43.415,98.342z" opacity="0.7" fill="#ffffff"/>
                                <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
                c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#ffffff"/>
                            </svg>
                            <strong class="d-block g-color-white g-font-size-50 g-line-height-0_7 g-mb-20">
                                <span class="g-valign-top g-font-size-default">€</span>149<span
                                        class="g-font-size-default">/ mois</span>
                            </strong>
                            <h3 class="h6 text-uppercase g-color-white-opacity-0_7 g-letter-spacing-3 g-mb-20">
                                Professionnel</h3>
                        </header>
                        <!-- End Article Header -->

                        <!-- Article Content -->
                        <div class="g-px-20 g-py-40">
                            <ul class="list-unstyled g-mb-40">
                                <li class="g-mb-20">Site <strong>responsive</strong></li>
                                <li class="g-mb-20">Assistance à la création</li>
                                <li class="g-mb-20">Accès à votre back-office</li>
                                <li class="g-mb-20">Support par mail</li>
                                <li class="g-mb-20">Suivi des visites</li>
                                <li class="g-mb-20">Campagne publicitaire</li>
                                <li class="g-mb-20">&nbsp;</li>
                                <li class="g-mb-20">&nbsp;</li>
                            </ul>
                            <a class="btn text-uppercase u-btn-izibrick g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10" href="{{ path('order_product', {'product':2}) }}">Je crée mon site</a>
                        </div>
                        <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                </div>

                <div class="col-md-4 g-mb-30">
                    <!-- Article -->
                    <article
                            class="u-shadow-v21 u-shadow-v21--hover g-bg-white text-center g-overflow-hidden g-rounded-4 g-pos-rel g-z-index-2 g-cursor-pointer g-transition-0_3">
                        <!-- Article Header -->
                        <header class="g-bg-izibrick g-pos-rel g-px-20 g-py-70">
                            <svg class="g-pos-abs g-bottom-0 g-left-0 g-right-0" version="1.1"
                                 preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"
                                 xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="70px"
                                 viewBox="0 0 300 70">
                                <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
                c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.6" fill="#ffffff"/>
                                <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
                c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6" fill="#ffffff"/>
                                <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
                H42.401L43.415,98.342z" opacity="0.7" fill="#ffffff"/>
                                <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
                c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#ffffff"/>
                            </svg>
                            <strong class="d-block g-color-white g-font-size-50 g-line-height-0_7 g-mb-20">
                                sur devis
                            </strong>
                            <h3 class="h6 text-uppercase g-color-white-opacity-0_7 g-letter-spacing-3 g-mb-20">
                                Personnalisé</h3>
                        </header>
                        <!-- End Article Header -->

                        <!-- Article Content -->
                        <div class="g-px-20 g-py-40">
                            <ul class="list-unstyled g-mb-40">
                                <li class="g-mb-20">Site <strong>responsive</strong></li>
                                <li class="g-mb-20">Assistance à la création</li>
                                <li class="g-mb-20">Accès à votre back-office</li>
                                <li class="g-mb-20">Support par mail</li>
                                <li class="g-mb-20">Suivi des visites</li>
                                <li class="g-mb-20">Campagne publicitaire</li>
                                <li class="g-mb-20">Design personnalisé</li>
                                <li class="g-mb-20">Ajout de pages spécifiques</li>
                            </ul>
                            <a class="btn text-uppercase u-btn-izibrick g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10" href="{{ path('our-contact', {'subject':2}) }}">Je crée mon site</a>
                        </div>
                        <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                </div>
            </div>
        </div>
    </section>
{% endblock %}