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

{% block title %}Fonctionnalité{% endblock %}
{% block description %}Créez votre contenu, alimentez les données, gérez les utilisateurs et utilisez l'API !{% 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">
                    Fonctionnalités
                </h1>

                <div class="text-yellow-l4 text-140">
                    Précisions sur les caractéristiques de la solution
                </div>

            </div>
        </div>
    </div>
    <div class="py-3 mt-3 bgc-white">
        <div class="container container-plus py-2 py-lg-4 text-center">

            <h2 class="text-green mb-2 text-190">
                KIWI Cloud CMS en 6 étapes
            </h2>

            <div class="text-dark-l1 text-110">
                Retrouvez les différents étapes qui vous permettront d'optimiser votre utilisation de KIWI Cloud CMS
            </div>

            <div class="row mt-4">
                <div class="col-12 col-lg-11 col-xl-9 mx-auto">

                    <div class="row my-4">
                        <div class="col-12 col-md-4 mb-4 mb-md-0 pb-2 pb-md-0">
                            <div class="d-inline-block text-center bgc-pink-l4 p-4 radius-round text-120 border-2 brc-pink-m4 d-style">
                                <i class="fas fa-magic fa-2x w-5 h-5 text-pink-d1 d-zoom-2"></i>
                            </div>

                            <h3 class="text-grey-d3 text-140 my-2 my-md-3">
                                Créez vos objets
                            </h3>

                            <p class="text-dark-m3">
                                Ajoutez les champs dont vous avez besoin sur chaque objet.
                            </p>
                        </div>


                        <div class="col-12 col-md-4 mb-4 mb-md-0 pb-2 pb-md-0">
                            <div class="d-inline-block text-center bgc-pink-l4 p-4 radius-round text-120 border-2 brc-pink-l1 d-style">
                                <i class="fas fa-puzzle-piece text-180 w-5 h-5 text-pink-d1 d-zoom-2"></i>
                            </div>

                            <h3 class="text-grey-d3 text-140 my-2 my-md-3">
                                Ajoutez du contenu
                            </h3>

                            <p class="text-dark-m3">
                                Remplissez votre CMS de toutes les informations que vous souhaitez communiquer.
                            </p>
                        </div>


                        <div class="col-12 col-md-4">
                            <div class="d-inline-block text-center bgc-pink-l4 p-4 radius-round text-120 border-2 brc-pink-m4 d-style">
                                <i class="fas fa-users-cog text-180 w-5 h-5 text-pink-d2 d-zoom-2"></i>
                            </div>

                            <h3 class="text-grey-d3 text-140 my-2 my-md-3">
                                Gérer vos utilisateurs
                            </h3>

                            <p class="text-dark-m3">
                                Ajoutez et definissez les utilisateurs qui auront accès à la gestion de chaque objet.
                            </p>
                        </div>
                    </div><!-- /.row -->

                </div><!-- /.col -->
            </div><!-- /.row -->

            <div class="row mt-4">
                <div class="col-12 col-lg-11 col-xl-9 mx-auto">

                    <div class="row my-4">
                        <div class="col-12 col-md-4 mb-4 mb-md-0 pb-2 pb-md-0">
                            <div class="d-inline-block text-center bgc-pink-l4 p-4 radius-round text-120 border-2 brc-pink-m4 d-style">
                                <i class="fas fa-paper-plane fa-2x w-5 h-5 text-pink-d2 d-zoom-2"></i>
                            </div>

                            <h3 class="text-grey-d3 text-140 my-2 my-md-3">
                                Utilisez l'API
                            </h3>

                            <p class="text-dark-m3">
                                Récupérez les URL qui vous permettront d'accèder à votre contenu.
                            </p>
                        </div>


                        <div class="col-12 col-md-4 mb-4 mb-md-0 pb-2 pb-md-0">
                            <div class="d-inline-block text-center bgc-pink-l4 p-4 radius-round text-120 border-2 brc-pink-l1 d-style">
                                <i class="fas fa-globe text-180 w-5 h-5 text-pink-d2 d-zoom-2"></i>
                            </div>

                            <h3 class="text-grey-d3 text-140 my-2 my-md-3">
                                Développez votre site/application
                            </h3>

                            <p class="text-dark-m3">
                                Choisissez votre langage et développez votre interface. Vos données ? C'est déjà fait !
                            </p>
                        </div>


                        <div class="col-12 col-md-4">
                            <div class="d-inline-block text-center bgc-pink-l4 p-4 radius-round text-120 border-2 brc-pink-m4 d-style">
                                <i class="fas fa-chart-line text-180 w-5 h-5 text-pink-d2 d-zoom-2"></i>
                            </div>

                            <h3 class="text-grey-d3 text-140 my-2 my-md-3">
                                Suivez votre trafic
                            </h3>

                            <p class="text-dark-m3">
                                Visualisez le trafic journalier de votre site. Pour le reste, c'est à vous de jouer !
                            </p>
                        </div>
                    </div><!-- /.row -->

                </div><!-- /.col -->
            </div><!-- /.row -->

        </div><!-- /.container -->
    </div>
    <div class="bgc-blue-l4">
        <div class="container container-plus py-45">
            <div class="row">
                <div class="col-12 col-lg-8 mx-auto">
                    <div class="d-flex flex-column align-items-center flex-md-row align-items-md-center">
                        <div class="radius-2 mt-1 mr-md-4 shadow-sm border-1 p-2px brc-brown-l1 bgc-white">
                            <div class="overflow-hidden radius-1">
                                <img alt="Travel image" src="{{ asset('/assets/image/landing/step1.jpg') }}" class="dh-zoom-2" />
                            </div>
                        </div>

                        <div class="flex-grow-1 text-dark-m3 mt-4 mt-md-0">
                            <h3 class="text-dark-m3 text-center text-md-left mb-4">
                                Créer votre compte KIWI Cloud CMS
                            </h3>

                            <p>
                                Configurer vos objets
                            </p>
                            <p>
                                Alimenter votre contenu
                            </p>
                            <p>
                                Récupérer les liens vers votre contenu
                            </p>
                            <p>
                                <a href="#" class="btn btn-outline-pink btn-bold btn-bgc-white">Créer un compte</a>
                            </p>
                        </div>
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div>

    <div>
        <div class="container container-plus py-45">
            <div class="row">
                <div class="col-12 col-lg-8 mx-auto">
                    <div class="d-flex flex-column align-items-center flex-md-row align-items-md-center">

                        <div class="flex-grow-1 text-dark-m3 mt-4 mt-md-0">
                            <h3 class="text-dark-m3 text-center text-md-left mb-4">
                                Alimenter votre site / application
                            </h3>

                            <p>
                                Créer vos pages de contenus
                            </p>
                            <p>
                                Appeler les services KIWI Cloud CMS
                            </p>
                            <p>
                                Le contenu est disponible sur votre site
                            </p>
                            <p>
                                <a href="#" class="btn btn-outline-pink btn-bold btn-bgc-white">Créer un compte</a>
                            </p>
                        </div>

                        <div class="radius-2 mt-1 ml-md-4 shadow-sm border-1 p-2px brc-default-l1 bgc-white order-first order-md-last">
                            <div class="overflow-hidden radius-1">
                                <img alt="Travel image" src="{{ asset('/assets/image/landing/step2.jpg') }}" class="dh-zoom-2" />
                            </div>
                        </div>
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div>

{% endblock %}