{% 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="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 !">
{% 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 id="fadeIn" class="title-body-1">{{'artisan.titleTitre'|trans}}</h1>


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

					{{'artisan.machinesTexte'|trans|raw}}
				</p>
			</div>
		</section>


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


					{{'artisan.accompagnementTexte'|trans|raw}}</p>
			</div>
		</section>

		<section id="acteur" class="section acteur border-bottom">
			<img src="{{ asset('build/images/acteurnew.jpg') }}" alt="Acteur nouveau" class="section-img-right section-img-acteur">
			<div class="section-body">
				<h4 class="section-title user-select-none">{{'artisan.acteur'|trans}}</h4>
				<p class="section-text user-select-none">


					{{'artisan.acteurTexte'|trans|raw}}</p>
			</div>
		</section>
		<section id="outil" class="section outil border-bottom">
			<img src="{{ asset('build/images/outil.jpeg') }}" alt="outil" class="image-outil">
			<div class="section-body">
				<h4 class="section-title user-select-none">{{'artisan.outils'|trans}}</h4>
				<ul class="liste">


					{{'artisan.outilsListe'|trans|raw}}</ul>
				<p class="section-text user-select-none">{{'artisan.outilsTexte'|trans|raw}}</p>
			</div>
		</section>
		<section class="section-confiance">
			<div class="widget">
				<h2 id="confiance" class="title-body">{{'artisan.confiance'|trans}}</h2>

				<div id="sav" class="form-widget">
					<div class="counter">
						<h4 class='count-title'>{{ 'artisan.sav'|trans }}</h4>
						<div class="countup" id="countup1">
							<span class="timeel days">00</span>
							<span class="timeel timeRefDays">{{'artisan.jour'|trans}}</span>
							<span class="timeel hours">00</span>
							<span class="timeel timeRefHours">{{'artisan.heure'|trans}}</span>
							<span class="timeel minutes">00</span>
							<span class="timeel timeRefMinutes">{{'artisan.minute'|trans}}</span>
							<span class="timeel seconds">00</span>
							<span class="timeel timeRefSeconds">{{'artisan.seconde'|trans}}</span>
						</div>
							<small class="text-center d-block">{{ diffSav }}</small>
					</div>
				</div>
			</div>

			<div class="section-avis-body">

				<div class="carousel1">

					<div class="carousel-cell">
						<div class="card-avis">
							<div class="card-avis-header">
								<div class="card-avatar">
									<img src="{{ asset('build/images/portrait/beatrice.jpeg') }}" alt="portait 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>

					<div class="carousel-cell">
						<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>

					<div class="carousel-cell">
						<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>
					<div class="carousel-cell">
						<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>
					<div class="carousel-cell">
						<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>
					<div class="carousel-cell">
						<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.carouselTexte6'|trans}}</p>
							</div>
						</div>
					</div>
					<div class="carousel-cell">
						<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>
					<div class="carousel-cell">
						<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>
					<div class="carousel-cell">
						<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>
					<div class="carousel-cell">
						<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>
					<div class="carousel-cell">
						<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>
					</div>
					<div class="carousel-cell">
						<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>
				</div>
			</div>

		</section>

<section style="margin-bottom: 50px;margin-top: 50px">
	<h2 class="title-body" style="display: initial">{{ 'artisan.installations' | trans }}</h2>
	<div class="installation-carousel" style="display:flex; justify-content: center">
		<img id="photo1" src="{{ asset('build/images/photo1.2.png') }}" alt="" >
		<img id="photo2" src="{{ asset('build/images/photo2.2.png') }}" alt="" >
		<img id="photo3" src="{{ asset('build/images/photo3.2.png') }}" alt="" >
		<img id="photo4" src="{{ asset('build/images/photo4.2.png') }}" alt="" >
		<img id="photo5" src="{{ asset('build/images/photo5.2.png') }}" alt="" >
	</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>
	{# <script async src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> #}
	<script  src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js" integrity="sha512-cA8gcgtYJ+JYqUe+j2JXl6J3jbamcMQfPe0JOmQGDescd+zqXwwgneDzniOd3k8PcO7EtTW6jA7L4Bhx03SXoA==" crossorigin="anonymous"></script>

	{{ encore_entry_script_tags('artisanjs') }}
	{{ encore_entry_script_tags('counterUp') }}

	<script>
		$('.carousel1').flickity({ // options
			autoPlay: 4000,
			cellAlign: 'center',
			wrapAround: true,
			contain: true,})
	</script>
	{{ encore_entry_script_tags('artisanjs') }}
{% endblock %}