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

{% block title %}Gestion de contenu{% endblock %}
{% block description %}Terminé les CMS classiques, KIWI Cloud CMS vous propose une géstion de contenus dynamiques associé à une API simple.{% endblock %}

{% block body %}

    <div id="page-intro-dark" class="page-intro pos-rel navbar-green py-2 pt-xl-4 py-xl-5 text-white">

        <div class="row container container-plus mx-auto mt-3 mb-5">
            <div class="col-12 col-md-7 d-flex flex-column justify-content-center text-center" data-aos="fade-right" data-aos-delay="100">
                <h1 class="align-self-center">

                                <span class="text-90">
                                    La nouvelle façon d'utiliser un
                                </span>

                    <span class="text-110 text-yellow-l3">
                                    un CMS
                                </span>
                </h1>

                <h4 class="my-3 text-white text-120">
                    KIWI Cloud CMS vous propose <br/>une gestion de contenus dynamiques associé à une API simple.
                </h4>
                <p class="mt-5">
                    <a href="#" class="btn btn-lg radius-round btn-pink px-4 m-3px">
                        Essayer gratuitement
                    </a>
                </p>
            </div><!-- /.col -->


            <div class="col-12 col-md-5 order-first order-md-last mb-4 mb-md-0" data-aos="fade-left">
                <img alt="Product Image" src="assets/image/landing/preview.png" class="w-90 1mx-auto" />
            </div><!-- /.col -->
        </div><!-- /.row -->

    </div><!-- /#page-intro-dark -->

    <div class="bgc-white">
        <!-- or use a different color -->

        <div class="container container-plus pos-rel mt-n5 text-center py-2">

            <div class="row mt-n4">
                <div class="col-12 col-lg-10 col-xl-8 mx-auto">
                    <div class="row my-4">
                        <!-- features -->
                        <div class="col-12 col-md-4 mb-4 mb-md-0" data-aos="fade-up" data-aos-delay="300">
                            <div class="feature-item radius-2 bgc-white shadow-1 p-4 h-100">
                                <div class="d-inline-block pos-rel text-center py-2 px-3 text-150">
                                    <!-- the lines beneath icon -->
                                    <div class="rotate-n45 brc-purple-m4 border-t-2 w-75 position-tl mt-35 mr-1"></div>
                                    <div class="rotate-n45 brc-purple-m4 border-t-3 w-90 position-br mr-1 mb-425"></div>
                                    <div class="rotate-n45 brc-purple-m4 border-t-2 w-90 position-bl mb-4 ml-35"></div>

                                    <i class="fa fa-rocket fa-2x text-purple-d1 pos-rel"></i>
                                </div>

                                <h3 class="text-secondary-d3 text-160 my-3">
                                    Rapide
                                </h3>

                                <p class="text-dark-m3">
                                    Construisez vos contenus en quelques clics.
                                    Intégrer les sur vos médias (site, application, ...) en quelques minutes.
                                </p>
                            </div>
                        </div>


                        <div class="col-12 col-md-4 mb-4  mb-md-0" data-aos="fade-up" data-aos-delay="450">
                            <div class="feature-item radius-2 bgc-white shadow-1 p-4 h-100">
                                <div class="d-inline-block pos-rel text-center p-2 text-150">
                                    <!-- the lines beneath icon -->
                                    <div class="brc-blue-m4 border-t-2 w-75 position-tl mt-3 ml-n2"></div>
                                    <div class="brc-blue-m4 border-t-3 w-90 position-lc ml-n1 mt-n2"></div>
                                    <div class="brc-blue-m4 border-t-2 w-90 position-bl mb-4 ml-n3"></div>

                                    <i class="fa fa-running fa-2x text-blue-d1 pos-rel"></i>
                                </div>

                                <h3 class="text-secondary-d3 text-160 my-3">
                                    Flexible
                                </h3>

                                <p class="text-dark-m3">
                                    Créez des objets (actualités, galerie photo, contact) et personnalisez les
                                </p>
                            </div>
                        </div>


                        <div class="col-12 col-md-4 mb-4 mb-md-0" data-aos="fade-up" data-aos-delay="600">
                            <div class="feature-item radius-2 bgc-white shadow-1 p-4 h-100">
                                <div class="d-inline-block text-center p-2 text-150 pos-rel">
                                    <!-- the circles beneath icon -->
                                    <div class="brc-orange-m4 border-2 w-3 h-3 radius-round position-tl mt-2 ml-n1"></div>
                                    <div class="brc-orange-m4 border-2 w-2 h-2 radius-round position-tr mt-n1 ml-n1"></div>
                                    <div class="brc-orange-m4 border-2 w-4 h-4 radius-round position-br mb-2"></div>

                                    <i class="fa fa-key fa-2x text-orange pos-rel"></i>
                                </div>

                                <h3 class="text-secondary-d3 text-160 my-3">
                                    Sécurité
                                </h3>

                                <p class="text-dark-m3">
                                    Votre contenu est accessible depuis vos médias (site, application, ...) et de manière sécurisé
                                </p>
                            </div>
                        </div>

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

        </div><!-- /.container -->
    </div>

    <div class="bgc-white">
        <!-- or use a different color -->

        <div class="container container-plus py-3 pos-rel">

            <div class="row mt-1 mt-lg-5">
                <div class="col-12 col-lg-10 col-xl-8 mx-auto">
                    <div class="d-flex flex-column align-items-center flex-md-row align-items-md-start">
                        <div class="radius-2 mt-1 mr-md-5 pos-rel" data-aos="fade">
                            <div class="overflow-hidden radius-1 pos-rel border-1 p-2px brc-secondary-l2 bgc-white">
                                <img alt="Do More" src="assets/image/landing/do-more.jpg" width="220" />
                            </div>
                        </div>


                        <div class="flex-grow-1 text-dark-tp3 mt-4 mt-md-0 ml-md-2">
                            <h3 class="text-success-d2 my-4 text-center text-md-left" data-aos="fade-up">
                                KIWI Cloud CMS permet de centraliser votre contenu sur une seule et même plateforme
                            </h3>

                            <div data-aos="fade-up">
                                <p>
                                    Un jour nous avons voulu développer un jeu, à la fois un site internet mais également une application. Il a donc fallu développer un service qui nous permettrait de centraliser nos données.
                                </p>
                                <p>
                                    L'idée nous est donc venue de faire un outil de gestion de contenu qui nous permettrait d'optimiser nos développements de solutions web et mobiles.
                                </p>
                                <p>
                                    KIWI Cloud CMS est alors arrivé...
                                </p>
                            </div>

                            <p class="mt-md-5" data-aos="fade-left">
                                <a href="#" class="mt-3 mt-md-4 btn btn-outline-pink btn-bold btn-bgc-white">
                                    Essayer gratuitement
                                </a>
                            </p>
                        </div>
                    </div>
                    <hr/>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container -->

    </div>

    <div class="bgc-white mt-4 mt-lg-5">

        <div class="container container-plus py-2 py-lg-4">

            <div class="row">
                <div class="col-12 col-lg-10 col-xl-8 mx-auto">
                    <div class="d-flex flex-column align-items-center flex-md-row align-items-md-start">

                        <div class="flex-grow-1 text-dark-tp3 mt-4 mt-md-0">
                            <h3 data-aos="fade-up" class="text-success-d2 my-4 text-center text-md-left">
                                Solutions utilisées par les Webmasters !
                            </h3>

                            <div data-aos="fade-up">
                                <p>
                                    Quelques références d'utilisation de KIWI Cloud CMS :
                                </p>
                                <ul>
                                    <li><a href="https://www.jeu-tu-preferes.fr" target="_blank">Jeu Tu Préfères</a></li>
                                    <li><a href="https://www.escapegamecity.com" target="_blank">Escape Game City</a></li>
                                    <li><a href="https://www.portrait-de-chiens.fr" target="_blank">Portrait de chiens</a></li>
                                    <li><a href="https://www.alain-arts.com/" target="_blank">Alain Arts</a></li>
                                </ul>
                            </div>

                            <p class="mt-md-5" data-aos="fade-right">
                                <a href="#" class="md-3 mt-md-4 btn btn-outline-pink btn-bold btn-bgc-white">
                                    Essayer gratuitement
                                </a>
                            </p>
                        </div>


                        <div class="radius-2 mt-1 ml-md-5 pos-rel order-first order-md-last" data-aos="fade-left">
                            <!-- the small circles -->
                            <div class="position-tr bgc-primary-l3 mt-n45 mr-n45 radius-100" style="width: 80px; max-width: 80vw; height: 80px; max-height: 80vw;"></div>
                            <div class="position-bl bgc-orange-l3 mb-n5 ml-n45 radius-100" style="width: 100px; max-width: 80vw; height: 100px; max-height: 80vw;"></div>

                            <div class="overflow-hidden radius-1 pos-rel border-1 p-2px brc-secondary-l2 bgc-white">
                                <img alt="Be Flexible" src="assets/image/landing/be-flexible.jpg" width="220" />
                            </div>
                        </div>
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div>

{% endblock %}