{% trans_default_domain 'artisan' %}
{% set route = app.request.get('_route') %}

{% extends 'base.html.twig' %}
{% block meta %}
    <meta name="description"
          content="Les artisans boulangers sont notre coeur de métier, notre machine grande capacité de produits et nos services ont été spécialement conçu pour la clientèle des boulangeries, notre ambition : Devenir la référence des distributeurs de pains !">
    <meta property="og:title" content="Je suis Artisan" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://qualidistrib.com/artisan"  />
    <meta property="og:image" content="{{ asset('build/images/artisanv2.jpg') }}" />
    <meta property="og:description" content="Vous êtes artisan et vous vous interessez à la distribution automatique ? Quali Distrib est là pour vous éclairer" />
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/artisan.css') }}"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.css" media="screen">

{% endblock %}

{% block title %}Je suis Artisan{% endblock %}

{% block body %}
    <div class="container-m">
        <div>
            <h1 class="title-body-1">{{'artisan.titleTitre'|trans}}</h1>


        </div>
        <br>
        <section class="section machine border-bottom">
            <div class="section-header">
                <h4 class="section-title user-select-none">{{'artisan.machines'|trans}}</h4>
            </div>
            <img src="{{ asset('build/images/dernieregene.jpeg') }}" alt="Régulateur de température"
                 class="section-img-right section-img-machine">

            <div class="section-body">
                <p class="section-text user-select-none">
                    {{'artisan.machinesTexte'|trans|raw}}
                </p>
            </div>
        </section>


        <section class="section accompagnement border-bottom">
            <div class="section-header">
                <h4 class="section-title user-select-none">{{'artisan.accompagnement'|trans}}</h4>
            </div>
            <img src="{{ asset('build/images/accompagnement.jpeg') }}" alt="Accompagnement"
                 class="section-img-left section-img-accompagnement">
            <div class="section-body">
                <p class="section-text user-select-none">
                    {{'artisan.accompagnementTexte'|trans|raw}}
                </p>
            </div>
        </section>

        <section class="section acteur border-bottom">
            <div class="section-header">
                <h4 class="section-title user-select-none">{{'artisan.acteur'|trans}}</h4>
            </div>
            <img src="{{ asset('build/images/acteurnew.jpg') }}" alt="Acteur nouveau"
                 class="section-img-right section-img-acteur">
            <div class="section-body">
                <p class="section-text user-select-none">
                    {{'artisan.acteurTexte'|trans|raw}}
                </p>
            </div>
        </section>
        <section class="section outil border-bottom">
            <div class="section-header">
                <h4 class="section-title user-select-none">{{'artisan.outils'|trans}}</h4>
            </div>
            <img src="{{ asset('build/images/outil.jpeg') }}" alt="outil" class="image-outil">
            <div class="section-body">
                <ul class="liste">
                    {{'artisan.outilsListe'|trans|raw}}
                </ul>
                <p class="section-text user-select-none">{{'artisan.outilsTexte'|trans|raw}}</p>
            </div>
        </section>

        <section class="temoin">
            <h2 class="title-body">{{'artisan.confiance'|trans}}</h2>
            <div class="form-widget-m">
                    <div class="counter">
                            <h4 class='count-title'>{{ 'artisan.sav'|trans }}</h4>
                        <div class="countup-m" id="countup1">
                            <span class="timeel-m days">00</span>
                            <span class="timeel-m timeRefDays">{{'artisan.jour'|trans}}</span>
                            <span class="timeel-m hours" id="timeel-m-center-hours">00</span>
                            <span class="timeel-m timeRefHours">{{'artisan.heure'|trans}}</span> <br>
                            <span class="timeel-m minutes">00</span>
                            <span class="timeel-m timeRefMinutes" id="timeel-m-center-timeRefHours">{{'artisan.minute'|trans}}</span>
                            <span class="timeel-m seconds" id="timeel-m-seconds">00</span>
                            <span class="timeel-m timeRefSeconds" id="timeel-m-timeRefSeconds">{{'artisan.seconde'|trans}}</span>
                        </div>
                        <small class="text-center d-block">{{ diffSav }}</small>
                    </div>
                </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/beatrice.jpeg') }}" alt="portrait béatrice"
                             class="card-avatar-photo" style="margin-top:0; margin-left: -10px;">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">W.Béatrice</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte1'|trans}}</p>
                </div>
            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/alice.jpeg') }}" alt="portrait alice"
                             class="card-avatar-photo"
                             style="width: 150px; margin-left: -39px;">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">D.Alice</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte4'|trans}}</p>
                </div>

            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/albert.jpeg') }}" alt="portrait albert"
                             class="card-avatar-photo" style="width:130px;margin-top: -4px;margin-left: -34px;">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">F.Laurent</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte2'|trans}}</p>
                </div>
            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/francois.jpeg') }}" alt="portrait françois"
                             class="card-avatar-photo" style="margin-top: -22px;
    width: 150px;
    margin-left: -39px;">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">S.Francois</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte3'|trans}}</p>
                </div>

            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/frederique.jpeg') }}" alt="portrait frederique"
                             class="card-avatar-photo" style="margin-top: 1px;
    margin-left: -70px;
    width: 150px;">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">P.Nathalie</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte12'|trans}}</p>
                </div>
            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/thomas.jpg') }}" alt="portrait thomas"
                             class="card-avatar-photo" style="margin-top:0; margin-left: -15px">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">C.Thomas</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte5'|trans}}
                    </p>
                </div>
            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/david.jpg') }}" alt="portrait david"
                             class="card-avatar-photo" style="margin-top:0; margin-left: -10px;">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">T.David</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte2'|trans}}6</p>
                </div>
            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/laurent.jpg') }}" alt="portrait laurent"
                             class="card-avatar-photo" style="margin-top:-8px; margin-left: -13px;">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">H.Laurent</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte7'|trans}}</p>
                </div>
            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/alexandre.jpg') }}" alt="portrait alexandre"
                             class="card-avatar-photo" style="margin-top:-11px;margin-left: -13px">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">N.Alexandre</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte8'|trans}}</p>
                </div>
            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/heloise.jpg') }}" alt="portrait heloise"
                             class="card-avatar-photo" style="margin-top:0; margin-left: -11px">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">S.Héloïse</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte9'|trans}}</p>
                </div>
            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/etienne.jpg') }}" alt="portrait etienne"
                             class="card-avatar-photo" style="margin-top:-13px;margin-left: -11px">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">D.Etienne</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte10'|trans}}</p>
                </div>
            </div>
            <div class="card-avis">
                <div class="card-avis-header">
                    <div class="card-avatar">
                        <img src="{{ asset('build/images/portrait/philippe.jpg') }}" alt="portrait philippe"
                             class="card-avatar-photo" style="margin-top:0; margin-left: -10px">
                    </div>
                    <div class="card-avis-subheader">
                        <h5 class="card-avis-title">C.Philippe</h5>
                        <h6 class="card-avis-subtitle text-muted">{{'artisan.carouselFonction'|trans}}</h6>
                        <span>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </span>
                    </div>
                </div>
                <div class="card-avis-body">
                    <p class="card-avis-text">{{'artisan.carouselTexte11'|trans}}</p>
                </div>
            </div>
        </section>


        <section style="margin-bottom: 50px;margin-top: 50px">
            <h1 class="title-body">Quelques photos de leurs installations</h1>
            <div class="installation-mobile">
                <img src="{{ asset('build/images/Montage_polaroidV1.png') }}" alt="" style="width: 390px; height: 110px">
            </div>
        </section>
        <section class="section-form-mairie" id="form">
            <h3 class="form-title">{{'artisan.formTitre'|trans}}</h3>
                
            <div class="form-mairie">
                <div>
                    <p>
                        {{'artisan.formIntro'|trans}}
                    </p>
                </div>


                <div class="form-form">
                    {{ form_start(formMairie) }}
                    <div class="form-vous">
                        <h4>{{'artisan.vous'|trans}}</h4>
                        <div class="row">
                            <div class="col">{{ form_row(formMairie.nameContact,{'attr':{'placeholder':'placeholderContact'|trans}}) }}</div>
                            <div class="col">{{ form_row(formMairie.namePlace,{'attr':{'placeholder':'placeholderPlace'|trans},}) }}</div>
                            <div class="col">{{ form_row(formMairie.codePostal,{'attr':{'placeholder':'placeholderPostal'|trans,'pattern':"/^-?\d+\.?\d*$/", 'onKeyPress':"if(this.value.length==5) return false;"}}) }}</div>
                        </div>
                        <div class="row">
                            <div class="col">{{ form_row(formMairie.email,{'attr':{'placeholder':'placeholderMail'|trans}}) }}</div>
                            <div class="col">{{ form_row(formMairie.phone,{'attr':{'placeholder':'placeholderPhone'|trans}}) }}</div>
                        </div>

                    </div>
                    <div class="form-mess">
                        <h4>{{'artisan.message'|trans}}</h4>
                        {{ form_row(formMairie.message,{'attr':{'placeholder':'placeholderMessage'|trans}}) }}
                        {{ form_row(formMairie._token) }}
                    </div>
                    <div>
                        <p>{{'artisan.souhait'|trans}}</p>
                        {{ form_row(formMairie.isMeet)}}
                        {{ form_row(formMairie.isMail) }}
                        <p>
                            {{'artisan.formTexte'|trans|raw}}
                        </p>
                        <div class="form-souhait">
                            {{ form_row(formMairie.submitForm,{'attr':{'class':'btn-form'}}) }}
                            {{ form_row(formMairie.Type,{'attr':{'value':'Artisan'}}) }}
                        </div>
                        {{ form_end(formMairie, {'render_rest': false}) }}

                    </div>

                </div>
            </div>
        </section>
    </div>
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    {{ encore_entry_script_tags('artisanjs') }}
    {{ encore_entry_script_tags('counterUp') }}

{% endblock %}