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

{% block title %}Nos offres{% endblock %}
{% block description %}Découvrez l'ensemble de nos offres de gestion de contenu.{% endblock %}

{% block body %}
    <div class="page-intro row pos-rel pt-lg-1 pt-xl-4" style="background-image: url({{ asset('/assets/image/landing/bandeau.jpg') }})">
        <div class="col-11 col-lg-8 col-xl-7 mx-auto text-center py-4 py-lg-5 d-flex flex-column justify-content-end">
            <div class="bgc-black-tp4 radius-1 pt-2 pt-lg-4 pb-3 pb-lg-5 px-2">

                <h1 class="text-white mb-3">
                    Nos offres
                </h1>

                <div class="text-yellow-l4 text-140">
                    Découvrez l'ensemble de nos offres de gestion de contenu
                </div>

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

    <div class="row justify-content-center my-3">
        <div class="col-12 col-lg-9 text-center mt-45">
            <h2 class="text-green mb-2 text-190">
                Choisissez votre offre
            </h2>
        </div>
    </div>

    <div class="row d-flex justify-content-center mx-1 mx-lg-0 mt-5 mb-45">
        <div class="col-12 col-sm-6 col-lg-4 col-xl-3 px-2">
            <div class="dh-zoom-1">
                <!-- Basic -->
                <div class="d-style active btn bgc-white btn-light btn-h-outline-green btn-a-outline-green w-100 border-t-3 my-2 pb-3 shadow-sm">

                    <div class="d-flex flex-column align-items-center">

                        <h4 class="w-90 pb-3 text-140 my-25">
                            <i>Mini</i>
                        </h4>

                        <div class="mt-2 mb-3">
                            <i class="fas fa-tree fa-3x text-green-m1"></i>
                        </div>

                        <div class="text-secondary text-120">
                            <span class="pos-abs ml-n25 mt-3">€</span>
                            <span class="text-200">5</span> / mois
                        </div>

                        <hr class="w-90 my-4 brc-secondary-l3" />

                        <div class="flex-grow-1 text-dark-l1 text-90 w-90">
                            <ul class="list-unstyled text-left mx-auto mb-1">
                                <li>
                                    <i class="fas fa-magic text-success-m2 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">3 objets</span>
                                </li>

                                <li class="mt-25">
                                    <i class="fa fa-users text-success-m2 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">1 utilisateur</span>
                                </li>

                                <li class="mt-25">
                                    <i class="fas fa-database text-success-m3 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">
                                        10 Mo
                                    </span>
                                </li>

                                <li class="mt-3 text-center">
                                    <hr class="my-4 brc-secondary-l3" />
                                    <a href="#" class="d-n-hover btn btn-outline-pink px-4 text-600">Créer un compte</a>
                                    <a href="#" class="d-hover btn btn-pink px-4 text-600 btn-raised">Créer un compte</a>
                                </li>
                            </ul>
                        </div>


                    </div>

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



        <div class="col-12 col-sm-6 col-lg-4 col-xl-3 px-2 mt-2 mt-sm-0">
            <div class="dh-zoom-1">
                <!-- Professional -->
                <div class="d-style active btn btn-light btn-h-outline-green btn-a-outline-green bgc-white mt-lg-n2 w-100 border-t-3 my-2 pb-3 shadow-sm">

                    <div class="d-flex flex-column align-items-center">
                        <h4 class="w-90 pb-3 text-150 my-25">
                            <i>Medium</i>
                        </h4>

                        <span class="position-tr mt-n25 mr-2px">
                        <span class="badge badge-lg bgc-pink-d2 brc-pink-d2 text-white arrowed-in arrowed-in-right">
                            Best-seller
                        </span>
                        </span>

                        <div class="mt-2 mb-3">
                            <i class="fas fa-tree fa-3x text-green-m1"></i><i class="fas fa-tree fa-3x text-green-m1"></i>
                        </div>

                        <div class="text-secondary text-120">
                            <span class="pos-abs ml-n25 mt-3">€</span>
                            <span class="text-200">12</span> / mois
                        </div>


                        <hr class="w-90 my-4 brc-secondary-l3" />

                        <div class="flex-grow-1 text-dark-l1 text-90 w-90">
                            <ul class="list-unstyled text-left mx-auto mb-1">
                                <li>
                                    <i class="fas fa-magic text-success-m2 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">10 objets</span>
                                </li>

                                <li class="mt-25">
                                    <i class="fa fa-users text-success-m2 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">5 utilisateurs</span>
                                </li>

                                <li class="mt-25">
                                    <i class="fas fa-database text-success-m3 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">
                                        100 Mo
                                    </span>
                                </li>

                                <li class="mt-25">
                                    <i class="fas fa-tools text-success-m3 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">
                                        Support email
                                    </span>
                                </li>

                                <li class="mt-3 text-center">
                                    <hr class="my-4 brc-secondary-l3" />
                                    <a href="#" class="d-n-hover btn btn-outline-pink px-4 text-600">Créer un compte</a>
                                    <a href="#" class="d-hover btn btn-pink px-4 text-600 btn-raised">Créer un compte</a>
                                </li>
                            </ul>
                        </div>

                    </div>

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



        <div class="col-12 col-sm-6 col-lg-4 col-xl-3 px-2 mt-2 mt-lg-0">
            <div class="dh-zoom-1">
                <!-- Premium -->
                <div class="d-style active btn bgc-white btn-light btn-h-outline-green btn-a-outline-green w-100 border-t-3 my-2 pb-3 shadow-sm">

                    <div class="d-flex flex-column align-items-center">

                        <h4 class="w-90 pb-3 text-140 my-25">
                            <i>Maxi</i>
                        </h4>

                        <div class="mt-2 mb-3">
                            <i class="fas fa-tree fa-3x text-green-m1"></i><i class="fas fa-tree fa-3x text-green-m1"></i><i class="fas fa-tree fa-3x text-green-m1"></i>
                        </div>

                        <div class="text-secondary text-120">
                            <span class="pos-abs ml-n25 mt-3">€</span>
                            <span class="text-200">19</span> / mois
                        </div>

                        <hr class="w-90 my-4 brc-secondary-l3" />

                        <div class="flex-grow-1 text-dark-l1 text-90 w-90">
                            <ul class="list-unstyled text-left mx-auto mb-1">
                                <li>
                                    <i class="fas fa-magic text-success-m2 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">25 objets</span>
                                </li>

                                <li class="mt-25">
                                    <i class="fa fa-users text-success-m2 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">10 utilisateurs</span>
                                </li>

                                <li class="mt-25">
                                    <i class="fas fa-database text-success-m3 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">
                                        500 Mo
                                    </span>
                                </li>

                                <li class="mt-25">
                                    <i class="fas fa-tools text-success-m3 text-110 mr-1 mt-1"></i>
                                    <span class="text-110">
                                        Support email et téléphone
                                    </span>
                                </li>

                                <li class="mt-3 text-center">
                                    <hr class="my-4 brc-secondary-l3" />
                                    <a href="#" class="d-n-hover btn btn-outline-pink px-4 text-600">Créer un compte</a>
                                    <a href="#" class="d-hover btn btn-pink px-4 text-600 btn-raised">Créer un compte</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}