{% extends 'base.html.twig' %}
{% block meta %}
    <meta name="description" content="Venez découvrir les offres Quali Distrib">
    <meta property="og:title" content="Offres" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://qualidistrib.com/offres"  />
    <meta property="og:image" content="{{ asset('build/images/acterunew.jpg') }}" />
    <meta property="og:description" content="Venez découvrir les offres Quali Distrib" />
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/offres.css') }}">
{% endblock %}
{% block title %}{{ page_title }}{% endblock %}
{% block body %}
    <div class="container-m">

        <h1 class="title-offres">> Les offres Quali Distrib</h1>
        <p class="section-body" class="police">Pour un devis personnalisé, il est indispensable de prendre
            contact avec nos
            équipes.</p>
        <h2 class="title-body">> Deux possibilités :</h2>
        <div class="formules">
            <div class="plus">
                <section class="section exigence border-bottom border-top border-mobile">
                    <img src="/build/images/dual.jpeg" alt="exemple mode dual" class="section-img-exigence">
                    <div class="section-body ">
                        <h4 class="section-title user-select-none">Mode Dual : <br>2 choix 2 prix !</h4>
                        <p class="section-text user-select-none">
                            Une offre simple et essentielle, du pain et de la baguette par exemple.
                        </p>
                    </div>
                </section>
                <section class="section-modeDistrib">
                    <img class="formules-img" src="build/images/distributeur.svg" alt="Distributeur">
                    <p class="ledistributeur"><i>(Distributeur 40 casiers)</i></p>
                </section>

                <section class="section exigence border-bottom border-top border-mobile">
                    <img src="/build/images/varie.jpeg" alt="exemple mode varie" class="section-img-exigence">
                    <div class="section-body ">
                        <h4 class="section-title user-select-none">Mode Varié : <br>Des possibilités de prix illimités !
                        </h4>
                        <p class="section-text">
                            Une offre plus élaborée et diversifiée , des brioches, des viennoiseries et même des galettes
                            des rois.
                        </p>
                    </div>
                </section>
            </div>
        </div>
        <p class="ita">
            <i> (Produits fournis par la boulangerie "Aux délices" Cambrai (59400) participante de l'édition 2020 de
                la meilleure boulangerie de France).
            </i>
        </p>
        <section class="coop border-bottom border-mobile">
            <div class="section-body">
                <h2 class="section-title">Fonctionnalité UNIQUE : <br>Le produit de démonstration !</h2>
                <img src="{{ asset('build/images/question.png') }}" alt="point d'interrogation" class="interro">
                <p class="section-text user-select-none">De nombreux avantages à découvrir...
                </p>
            </div>
        </section>


        <h2 class="title-body">> Gestion / Suivi des ventes</h2>

        <section class="gestion">
            <div class="section-body">
                <p class="section-text user-select-none">
                    Suivez en temps réel et en détail l'activité de votre machine : <br> Chiffre d'affaire Quotidien -
                    Hebdomadaire - Mensuel,
                    Horaires d'affluence, Moyens de paiement Carte bleue ou Espèces, Stocks d'alerte, etc.
                </p>
            </div>
            <div class="gestion-body">
                <div class="gestion-img">
                    <img src="{{ asset('build/images/rendement.jpg') }}" alt="exemple rendement">
                    <p><i>( Capture d'écran du logiciel d'Infogérance : Rentabilité )</i></p>
                </div>
                <div class="gestion-img">
                    <img src="{{ asset('build/images/inventaire.jpg') }}" alt="exemple inventaire">
                    <p><i>( Capture d'écran du logiciel d'Infogérance : Suivi des stocks )</i></p>
                </div>
            </div>
        </section>

        <h2 class="title-body">> Les formules</h2>
        <section class="section-offres">

            <div class="formule-1">
                <div class="section-offre-header">
                    <h4 class="section-offres-title ">Location simple et de courte durée</h4>
                </div>

                <div class="section-offre-body">
                    <p class="section-offres-text">Familiarisez vous avec nos offres lors d'une période de test de
                        quelques mois, l'idée est de s'assurer que le concept plaise à tous</p>
                    <img src="{{ asset('build/images/colombe.jpg') }}" alt="colombe" class="colombe">
                </div>

            </div>

            <div class="formule-1">
                <div class="section-offre-header">
                    <h4 class="section-offres-title ">Achat - Crédit Bail - Financement </h4>
                </div>
                <div class="section-offre-body">
                    <p class="section-offres-text">Pour capitaliser et devenir propriétaires, mais aussi améliorer son
                        rapport au distributeur et optimiser son rendement. Offre sur 36, 48, ou 60 mois</p>
                    <br>
                    <img src="{{ asset('build/images/finance.jpg') }}" alt="finance" class="finance">
                </div>
            </div>
        </section>
        <section class="carouseljs">
            <h2 class="title-body">> Ils sont inclus dans notre prestation :</h2>
            <article class="offrons">
                <div id="tagscloud">
                    <a class="tagc1"
                       style="left: 20px; top: 30.1925px; z-index: 102; opacity: 0.118615; color: rgb(255, 255, 255);display: none; font-size: 1.25rem">Montage
                        du dossier de crédit</a>
                    <a class="tagc1"
                       style="left: 156px; top:100px; z-index: 102; opacity: 0.111076; color: rgb(255, 255, 255); padding: 8px; display: none;font-size: 1.75em">Livraison
                        et installation</a>
                    <a class="tagc1"
                       style="left: 386.9px; top: 195px; z-index: 103; opacity: 0.119797; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.5rem">SAV
                        & Assistance 24/7</a>
                    <a class="tagc1"
                       style="left: 596.16px; top: 28px; z-index: 107; opacity: 0.181538; color: rgb(255, 255, 255); padding: 8px; font-size: 1.5rem">Garantie
                        pièces toujours possible</a>
                    <a class="tagc1"
                       style="left: 85%; top: 175px; z-index: 119; opacity: 0.389813; color: rgb(255, 255, 255); padding: 8px; font-size: 1.75rem">Suivi
                        régulier</a>
                    <a class="tagc1"
                       style="left: 669.18px; top: 205px; z-index: 104; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none;">Personnalisation
                        du distributeur</a>
                    <a class="tagc1"
                       style="left: 310px; top: 222px; z-index: 111; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.25rem">Formation
                        logiciel de gestion</a>
                    <a class="tagc1"
                       style="left: 48.13px; top: 188px; z-index: 115; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none;">Visite
                        des emplacements en amont</a>
                    <a class="tagc1"
                       style="left: 935.24px; top: 30.1925px; z-index: 105; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.25rem">Démarche
                        auprès des mairies</a>
                    <a class="tagc1"
                       style="left: 76%; top: 152px; z-index: 108; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.5rem">Interventions
                        ultra rapide</a>
                    <a class="tagc1"
                       style="left: 750px; top: 250px; z-index: 150; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.75rem">Machines
                        anti-effractions</a>
                    <a class="tagc1"
                       style="left: 400px; top: 112px; z-index: 180; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.25rem">Suggestions
                        d'offres commerciales</a>
                    <a class="tagc1"
                       style="left: 784px; top: 30.0199px; z-index: 102; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none;">Proposition
                        de rachat en fin de contrat</a>
                </div>

            </article>
        </section>
        <article class="liste">
            <h2 class="title-body">> Ils sont inclus dans notre prestation :</h2>

            <section class="liste-inclus">


                <div>
                    <ul>
                        <li class="presta">SAV & assistance 24/7</li>
                        <li class="presta">Livraison et installation</li>
                        <li class="presta">Personnalisation du distributeur</li>
                        <li class="presta">Machines anti effractions</li>
                        <li class="presta">Montage du dossier de crédit</li>
                        <li class="presta">Démarchage auprès des mairies</li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li class="presta">Interventions ultra rapide</li>
                        <li class="presta">Formation logiciel gestion</li>
                        <li class="presta">Garantie pièces toujours possible</li>
                        <li class="presta">Suivi régulier</li>
                        <li class="presta">Proposition de rachat en fin de contrat</li>
                        <li class="presta">Visite des emplacements en amont</li>
                    </ul>
                </div>
            </section>
        </article>

        <section class="section-plus">
            <h2 class="title-body">> Sautez le pas !</h2>
            <div class="section-body">
                <div class="block1">
                    <p>
                        Pour affinez votre projet cliquez sur ce Distributeur.<br>
                    </p>
                </div>
                <div class="block2">
                    <div class="section-distrib">
                        <table>
                            <thead>
                            <tr>
                                <th><a href="{{ path('artisan') }}#form"><img class="img-distrib distrib"
                                                                              src="build/images/distributeur.svg"
                                                                              alt="distributeur"></a>
                                </th>
                                <th><a href="{{ path('artisan') }}#form"><img class="img-distrib distrib"
                                                                              src="build/images/distributeur.svg"
                                                                              alt="distributeur"></a>
                                </th>
                                <th><a href="{{ path('artisan') }}#form"><img class="img-distrib distrib"
                                                                              src="build/images/distributeur.svg"
                                                                              alt="distributeur"></a>
                                </th>
                                <th><a href="{{ path('artisan') }}#form"><img class="img-distrib distrib"
                                                                              src="build/images/distributeur.svg"
                                                                              alt="distributeur"></a>
                                </th>
                                <th><a href="{{ path('artisan') }}#form"><img class="img-distrib"
                                                                              src="build/images/distributeur.svg"
                                                                              alt="distributeur"></a>
                                </th>
                                <th></th>
                            </tr>
                            </thead>
                        </table>
                        <img src="{{ asset('build/images/arrow.png') }}" alt="fleche" class="block2-img">
                    </div>
                </div>
            </div>
        </section>

        <p>(+) Concernant la rentabilité, le seul critère important, c'est la qualité de votre pain, plus celui ci est
            bon,
            plus le distributeur attire de monde, l'emplacement, les modes de ventes etc ne servent qu'à booster
            votre
            CA, mais l'ingrédient fondamental de la réussite de votre projet, c'est la qualité des produits !<br><br> Si
            vous
            avez une excellente réputation, n'attendez plus pour vous lancer !</p>
    </div>

    <script>
        var radius = 90;
        var d = 200;
        var dtr = Math.PI / 180;
        var mcList = [];
        var lasta = 1;
        var lastb = 1;
        var distr = true;
        var tspeed = 11;
        var size = 200;
        var mouseX = 0;
        var mouseY = 10;
        var howElliptical = 22;
        var aA = null;
        var oDiv = null;
        window.onload = function () {
            var i = 0;
            var oTag = null;
            oDiv = document.getElementById('tagscloud');
            aA = oDiv.getElementsByTagName('a');
            for (i = 0; i < aA.length; i++) {
                oTag = {};
                aA[i].onmouseover = (function (obj) {
                    return function () {
                        obj.on = true;
                        this.style.zIndex = 9999;
                        this.style.color = '#fff';
                        this.style.padding = '5px 5px';
                        this.style.filter = "alpha(opacity=100)";
                        this.style.opacity = 1;
                    }
                })(oTag)
                aA[i].onmouseout = (function (obj) {
                    return function () {
                        obj.on = false;
                        this.style.zIndex = obj.zIndex;
                        this.style.color = '#fff';
                        this.style.padding = '5px';
                        this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
                        this.style.opacity = obj.alpha;
                        this.style.zIndex = obj.zIndex;
                    }
                })(oTag)
                oTag.offsetWidth = aA[i].offsetWidth;
                oTag.offsetHeight = aA[i].offsetHeight;
                mcList.push(oTag);
            }
            sineCosine(0, 0, 0);
            positionAll();
            (function () {
                update();
                setTimeout(arguments.callee, 40);
            })();
        };

        function update() {
            var a, b, c = 0;
            a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
            b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
            lasta = a;
            lastb = b;
            if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
                return;
            }
            sineCosine(a, b, c);
            for (var i = 0; i < mcList.length; i++) {
                if (mcList[i].on) {
                    continue;
                }
                var rx1 = mcList[i].cx;
                var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
                var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;

                var rx2 = rx1 * cb + rz1 * sb;
                var ry2 = ry1;
                var rz2 = rx1 * (-sb) + rz1 * cb;

                var rx3 = rx2 * cc + ry2 * (-sc);
                var ry3 = rx2 * sc + ry2 * cc;
                var rz3 = rz2;

                mcList[i].cx = rx3;
                mcList[i].cy = ry3;
                mcList[i].cz = rz3;

                per = d / (d + rz3);

                mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
                mcList[i].y = ry3 * per;
                mcList[i].scale = per;
                var alpha = per;
                alpha = (alpha - 0.6) * (10 / 6);
                mcList[i].alpha = alpha * alpha * alpha - 0.2;
                mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
            }
            doPosition();
        }

        function positionAll() {
            var phi = 0;
            var theta = 0;
            var max = mcList.length;
            for (var i = 0; i < max; i++) {
                if (distr) {
                    phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
                    theta = Math.sqrt(max * Math.PI) * phi;
                } else {
                    phi = Math.random() * (Math.PI);
                    theta = Math.random() * (2 * Math.PI);
                }
                //坐标变换
                mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
                mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
                mcList[i].cz = radius * Math.cos(phi);

                // aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
                aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
            }
        }

        function doPosition() {
            var l = oDiv.offsetWidth / 2;
            var t = oDiv.offsetHeight / 2;
            for (var i = 0; i < mcList.length; i++) {
                if (mcList[i].on) {
                    continue;
                }
                var aAs = aA[i].style;
                if (mcList[i].alpha > 0.1) {
                    if (aAs.display != '')
                        aAs.display = '';
                } else {
                    if (aAs.display != 'none')
                        aAs.display = 'none';
                    continue;
                }
                // aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
                aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
                //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
                //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
                aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
                aAs.zIndex = mcList[i].zIndex;
                aAs.opacity = mcList[i].alpha;
            }
        }

        function sineCosine(a, b, c) {
            sa = Math.sin(a * dtr);
            ca = Math.cos(a * dtr);
            sb = Math.sin(b * dtr);
            cb = Math.cos(b * dtr);
            sc = Math.sin(c * dtr);
            cc = Math.cos(c * dtr);
        }

    </script>
    <script type="application/ld+json">
        {
            "@context": "https://qualidistrib.com",
            "@type": "BreadcrumbList",
            "itemListElement": [{
                "@type": "ListItem",
                "position": 1,
                "name": "Offres",
                "item": "https://qualidistrib.com/offres"
            }]
        }
    </script>
{% endblock %}