{% extends 'base.html.twig' %}
{% set page = 'homepage' %}
{% block title %}Accueil{% endblock %}
{% block metaDescription %}
{% set headerContent = content('Home', 'Header') %}
<meta name="description" content="
{% if headerContent.content is defined %}
{{ headerContent.content|striptags }}
{% else %}
Tracol Immobilier propose une large offre en immobilier neuf (logements, bureaux, commerces), qui se caractérise par une architecture résolument contemporaine, des matériaux de qualité, et le soin apporté à chaque détail.
{% endif %}
">
{% endblock %}
{% block body %}
{% set headerContent = content('Home', 'Header') %}
{% if headerContent.picture is defined and headerContent.picture is not empty %}
{% set backgroundImage = headerContent.picture[0].path %}
{% else %}
{% set backgroundImage = 'empty' %}
{% endif %}
<header class="header-home" style="background-image:url({% if backgroundImage is empty %}'/uploads/images/{{ backgroundImage }}'{% else %}{{ asset('tracol_home.jpeg') }}{% endif %})">
<div class="container-fluid">
<div class="px-4 py-5 text-center">
<div id="block-header-home" class="col-lg-12">
{% if headerContent.content is defined %}
<div id="svg-header" class="col-lg-8 div-svg-header ">
<svg id="svg-home" xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
<path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
</svg>
</div>
<div class="col-lg-8 div-svg-header home-p">
<p id="header-text-home" class="header-text">{{ headerContent.content|raw }}</p>
</div>
{% endif %}
{#
<div name="form-search-normal" id="form-search-normal" class="div-svg-header">
<form action="{{ path('results') }}" style="display: flex; align-items: center; width: 100%">
<div style="display: flex;flex-direction: column;justify-content: center; width: 66.666vw;">
<div class="selectors" style="display: flex; align-items: center; width: auto;">
<div id="transaction-drop" class="dropdown">
<div class="undroped">
<p class="undroped-header">Type de transaction</p>
<p name="transaction-type" class="undroped-subheader">Achat ou Location</p>
<input type="hidden" value="" class="input-subheader" name="transaction-type">
</div>
<div class="droped">
<div class="dropdown-header">Type de transaction</div>
<ul id="transaction-li" class="items">
<li class="item" data-value ="Vente">Achat</li>
<li class="item" data-value ="Location">Location</li>
<li class="item" data-value ="Location saisonnière">Location saisonniere</li>
<li class="item" data-value ="Programme">Programme</li>
<li class="item" data-value ="Viager">Viager</li>
<li class="item" data-value ="Enchere">Enchère</li>
</ul>
</div>
</div>
<div id="property-drop" class="dropdown">
<div class="undroped">
<p class="undroped-header">Type de biens</p>
<p name="property-type" class="undroped-subheader">Appartement, Bureau, ...</p>
<input type="hidden" value="" class="input-subheader" name="property-type">
</div>
<div class="droped">
<div class="dropdown-header">Type de biens</div>
<ul id="property-li" class="items">
<li class="item" data-value ="Appartement">Appartements</li>
<li class="item" data-value ="Bureaux">Bureaux</li>
<li class="item" data-value ="Maison">Maisons</li>
<li class="item" data-value ="Commerce">Commerces</li>
<li class="item" data-value ="Garage / Parking">Garages / Parkings</li>
<li class="item" data-value ="Immeuble">Immeubles</li>
</ul>
</div>
</div>
<div id="location-drop" class="dropdown">
<div class="undroped">
<p class="undroped-header">Localisation</p>
<p class="undroped-subheader">Choissisez une ville</p>
<input type="hidden" value="" class="input-subheader" name="location">
</div>
<div class="droped">
<div class="dropdown-header">Localisation</div>
<ul id="location-li" class="items">
<li class="item" data-value ="Appartement">Luxembourg-Ville</li>
<li class="item" data-value ="Bureaux">Leudelange</li>
<li class="item" data-value ="Maison">Esch-Sur-Alzette</li>
</ul>
</div>
</div>
<div class="div-form">
<button id="search-detail" class="btn btn-primary child search">RECHERCHE AVANCEE</button>
</div>
<div>
<button style="background-color: transparent;border-color: transparent;" id="submit-search" type="submit">
<svg class="search-button" xmlns="http://www.w3.org/2000/svg" width="55.982" height="90.97" viewBox="0 0 55.982 90.97">
<g id="Groupe_3817" data-name="Groupe 3817" transform="translate(-1528.861 -105)">
<path id="Tracé_95" data-name="Tracé 95" d="M729.651,232.441H673.669v90.97l55.982-11.894Z" transform="translate(855.192 -127.441)" fill="#f6a400"/>
<g id="Groupe_3794" data-name="Groupe 3794" transform="translate(1545.335 126.696)">
<g id="np_search_1868241_000000">
<path id="Tracé_92" data-name="Tracé 92" d="M8.287,17.368A8.662,8.662,0,1,1,14.4,14.813a8.679,8.679,0,0,1-6.109,2.555Zm0-15.055a6.36,6.36,0,1,0,4.477,1.881A6.377,6.377,0,0,0,8.287,2.313Z" transform="translate(0.441 -0.012)" fill="#fff"/>
<path id="Tracé_93" data-name="Tracé 93" d="M57.82,59.567l1.626-1.633L67.4,65.852l-1.626,1.633Z" transform="translate(-44.591 -44.782)" fill="#fff"/>
</g>
</g>
</g>
</svg></button>
<button class="btn btn-primary" id="send" type="submit" style="display: none">Envoyer</button>
</div>
</div>
<div id="sub-search-div" class="sub-search-div" style="display: none">
<div class="col-lg-3 div-form">
<input class="sub-search-input" name="budget" id="budget" type="text" placeholder="Budget max.">
</div>
<div id="rooms-drop" class="dropdown">
<div class="undroped">
<p class="undroped-header transparent-font">Nombre de chambres</p>
<p class="undroped-subheader good-place"></p>
<input type="hidden" class="input-subheader" name="rooms">
</div>
<div class="droped">
<div class="dropdown-header">Nombre de chambres</div>
<ul id="rooms-li" class="items">
<li class="item" data-value ="1">1</li>
<li class="item" data-value ="2">2</li>
<li class="item" data-value ="3">3</li>
<li class="item" data-value ="4">4</li>
<li class="item" data-value ="5">5</li>
<li class="item" data-value ="6">6</li>
</ul>
</div>
</div>
<div class="col-lg-3 div-form">
<input class="sub-search-input" id="area-minimumm" name="area-minimumm" type="text" placeholder="Surface minimum.">
</div>
</div>
</div>
</form>
</div>
#}
</div>
</div>
</div>
</header>
<div class="container-fluid">
<section class="project">
{% set projectContent = content('Home', 'Projects') %}
<div id="home-section" class="col-lg-8 mx-auto div-svg-header pre-section">
<div class="home-section-title col-lg-5" style="font-size: 2.3em;display: flex;flex-direction: column;">
<svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77" style="margin-bottom: 10px">
<path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
</svg>
<h1 class="project-title">{% if projectContent.name is defined %}{{ projectContent.name }}{% else %}Nos projets{% endif %}</h1>
</div>
{#
<div class="separator"></div>
<div class="pre-section-content col-md-6">
{% if projectContent.content is defined %}
{{ projectContent.content|raw }}
{% else %}
Fort de plusieurs années d’expérience, Tracol Immobilier propose des projets adaptés aux
besoins de chacun. Répondant aux plus hautes exigences et s’inscrivant dans le temps, ils se
caractérisent par une architecture résolument contemporaine, des matériaux de qualité et le
soin apporté à chaque détail.
{% endif %}
</div>
#}
</div>
</section>
<section class="properties" style="margin-bottom: 40px">
{#
<div id="button-property" class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center">
<button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
<button data-id="futur" class="btn btn-primary come border-radius projectButton"><span class="span-projects">A VENIR</span></button>
<button data-id="construction" class="btn btn-primary come border-radius projectButton"><span class="span-projects">EN COURS</span></button>
<div class="col-lg-6 projects-link">
<a href="{{ path('projects') }}" class="property-span-arrow">VOIR TOUS NOS PROJETS
<i class="fas fa-arrow-right property-arrow"></i>
</a>
</div>
</div>
#}
{#
<div id="button-property-mobile" class="col-lg-8 mx-auto div-svg-header" style="display: none; align-items: center">
<div id="flick2" class="flicking-viewport">
<div class="flicking-camera">
<button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
<button data-id="futur" class="btn btn-primary come border-radius projectButton"><span class="span-projects">A VENIR</span></button>
<button data-id="construction" class="btn btn-primary come border-radius projectButton"><span class="span-projects">EN COURS</span></button>
</div>
</div>
<div class="col-lg-8 projects-link">
<a href="{{ path('projects') }}" class="property-span-arrow">VOIR TOUS NOS PROJETS
<i class="fas fa-arrow-right property-arrow"></i>
</a>
</div>
</div>
#}
<div id="projects" class="col-lg-8 mx-auto" style="display: flex; flex-wrap: wrap; justify-content: space-between">
{% for project in projects|slice(0,4) %}
<div onclick="location.href='{{ path('project-detail', {'id': project.id}) }}'" data-id="{{ path('project-detail', {'id': project.id}) }}" id="width-col-6-home" class="col-lg-6 margin-top-30" style="position: relative; cursor: pointer">
{#
<div class="div-hover" id="div-hover" style="">
{% if project.comments[0].comment is not empty %}
<p class="project-content" style="visibility: hidden">
{{ project.comments[0].comment|slice(0, 300) }}
</p>
<p class="project-arrow">
<a style="" href="{{ path('project-detail', {'id': project.id}) }}" class="project-arrow-2">
<span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
</a>
</p>
{% else %}
<p class="project-arrow">
<a style="margin-top: 180px" href="{{ path('project-detail', {'id': project.id}) }}" class="project-arrow-2">
<span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
</a>
</p>
{% endif %}
</div>
#}
<div class="tag-ref-projet-3"><span class="text-tag-ref">{{ typeProject(project.construction.construction_step) }}</span></div>
{% if project.pictures is not empty %}
{% for picture in project.pictures|slice(0,1) %}
<div class="img" style="background-image: url('{{ picture.url }}'); margin: 0px;">
</div>
{% endfor %}
{% else %}
<div class="img" style="background-image: url('{{ asset('build/Maisons_H_R1.jpg') }}'); margin: 0px;"></div>
{% endif %}
<p class="city">{{ project.city.name }}</p>
<p class="project-name">{{ project.name }}</p>
</div>
{% endfor %}
</div>
<div class="col-lg-8 mx-auto projects-link-mobile" style="display: none">
<a href="{{ path('projects') }}" class="property-span-arrow">VOIR TOUS NOS PROJETS
<i class="fas fa-arrow-right property-arrow"></i>
</a>
</div>
<div id="link-none" class="col-lg-8 mx-auto div-svg-header d-flex justify-content-end">
<div>
<a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('projects') }}">Découvrir plus
<svg class="svg-inline--fa fa-arrow-right fa-w-14 property-arrow" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg><!-- <i class="fas fa-arrow-right property-arrow"></i> Font Awesome fontawesome.com -->
</a>
</div>
</div>
</section>
<section class="available-properties">
<div id="home-section" class="col-lg-8 mx-auto div-svg-header pre-section">
<div class="home-section-title col-lg-8" style="font-size: 2.3em;display: flex;flex-direction: column;">
<svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77" style="margin-bottom: 10px">
<path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
</svg>
<h1 class="project-title">Nos biens disponibles</h1>
</div>
{#
<div class="separator"></div>
<div class="pre-section-content col-md-6">
{% if projectContent.content is defined %}
{{ projectContent.content|raw }}
{% else %}
Fort de plusieurs années d’expérience, Tracol Immobilier propose des projets adaptés aux
besoins de chacun. Répondant aux plus hautes exigences et s’inscrivant dans le temps, ils se
caractérisent par une architecture résolument contemporaine, des matériaux de qualité et le
soin apporté à chaque détail.
{% endif %}
</div>
#}
</div>
<div id="projects" class="col-lg-8 mx-auto" style="display: flex; flex-wrap: wrap; justify-content: space-between">
{% for project in salesProperties|slice(0,4) %}
<div onclick="location.href='{{ path('property-detail', {'id': project.id}) }}'" data-id="{{ path('property-detail', {'id': project.id}) }}" id="width-col-6-home" class="col-lg-6 margin-top-30" style="position: relative; cursor: pointer">
{# <div class="tag-ref-projet-3"><span class="text-tag-ref">{{ typeProject(project.construction.construction_step) }}</span></div> #}
<div class="tag-ref-projet-3"><span class="text-tag-ref">{{ typeProject(project.step) }}</span></div>
{% if project.pictures is not empty %}
{% for picture in project.pictures|slice(0,1) %}
<div class="img" style="background-image: url('{{ picture.url }}'); margin: 0px;">
</div>
{% endfor %}
{% else %}
<div class="img" style="background-image: url('{{ asset('build/Maisons_H_R1.jpg') }}'); margin: 0px;"></div>
{% endif %}
<p class="city">{{ project.city.name }}</p>
<p class="project-name">{{ project.reference }}</p>
</div>
{% endfor %}
</div>
<div class="col-lg-8 mx-auto projects-link-mobile" style="display: none">
<a href="/biens/vente" class="property-span-arrow">VOIR TOUS NOS BIENS
<i class="fas fa-arrow-right property-arrow"></i>
</a>
</div>
<div id="link-none" class="col-lg-8 mx-auto div-svg-header d-flex justify-content-end">
<div>
<a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('projects') }}">Découvrir plus
<svg class="svg-inline--fa fa-arrow-right fa-w-14 property-arrow" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg><!-- <i class="fas fa-arrow-right property-arrow"></i> Font Awesome fontawesome.com -->
</a>
</div>
</div>
</section>
<section class="reference">
{% set referenceContent = content('Home', 'References') %}
<div class="col-lg-8 mx-auto div-svg-header" style="display: flex; margin-top: 30px">
<div class="col-lg-5">
<svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
<path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
</svg>
<h1 class="project-title">
{% if referenceContent.name is defined and referenceContent.name %}
{{ referenceContent.name }}
{% else %}
Nos références
{% endif %}
</h1>
</div>
{#
<div class="separator"></div>
<div class="pre-section-content col-md-6">
{% if projectContent.content is defined %}
{{ projectContent.content|raw }}
{% else %}
Tracol Immobilier se distingue par la création d’espaces de vie alliant
qualité, durabilité et esthétisme.
{% endif %}
</div>
#}
</div>
{#
<div id="button-reference" class="offset-lg-2 col-lg-8 div-svg-header" style="display: flex; align-items: center">
<button data-id="all" class="btn btn-primary all border-radius projectButtonref"><span class="span-all">TOUS</span></button>
<button data-id="residences" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">RÉSIDENCES</span></button>
<button data-id="maisons" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">MAISONS</span></button>
<button data-id="commerces" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">COMMERCES</span></button>
<button data-id="bureaux" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">BUREAUX</span></button>
<div id="links-ref-home" class="col-lg-3 projects-link">
<a href="{{ path('reference') }}" class="property-span-arrow">VOIR TOUTES NOS REFERENCES
<i class="fas fa-arrow-right property-arrow"></i>
</a>
</div>
</div>
<div id="button-reference-mobile" class="offset-lg-2 col-lg-8 div-svg-header" style="display: none; align-items: center">
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<button data-id="all" class="btn btn-primary all border-radius projectButtonref"><span class="span-all">TOUS</span></button>
<button data-id="residences" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">RÉSIDENCES</span></button>
<button data-id="maisons" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">MAISONS</span></button>
<button data-id="commerces" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">COMMERCES</span></button>
<button data-id="bureaux" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">BUREAUX</span></button>
</div>
</div>
<div class="col-lg-3 projects-link">
<a href="{{ path('reference') }}" class="property-span-arrow">VOIR TOUTES NOS REFERENCE
<i class="fas fa-arrow-right property-arrow"></i>
</a>
</div>
</div>
#}
<div id="references-home" class="col-lg-8">
<div id="flick100" class="flicking-viewport">
<div class="flicking-camera">
<div class="col-lg-12 ref-container" style="display: flex; flex-wrap: wrap;">
{% for key, reference in references|slice(0,4) %}
<a href="{{ path('property-detail', {'id': reference.id}) }}" class="col-lg-6 col-md-12 {% if loop.index % 2 == 0 %}padd-to-left{% else %}padd-to-right{% endif %}">
<div class="div-img-hover-2 ref-list">
{#
<div class="div-hover-2" id="div-hover-2" style="position: absolute; bottom: 5px; left: 5px; background-color: #242424; color: white; width: 291px; height: 85px">
<p class="city">{{ reference.city.name }}</p>
<p class="project-name">{{ reference.reference }}</p>
<p class="date-ref">{{ reference.updated_at|date("d/m/Y") }}</p>
{% if reference.comments[0].comment is not empty %}
<p class="project-content" style="visibility: hidden">
{{ reference.comments[0].comment|slice(0, 250) }}
</p>
<a href="javascript:void(0);" class="project-arrow-2 lightbox-on" data-id="modul-{{ key }}">
<span class="galerry-ref">GALERIES PHOTOS</span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
</a>
{% else %}
<a style="margin-top: 180px" href="javascript:void(0);" class="project-arrow-2 lightbox-on" data-bs-toggle="modul"
data-bs-target="#exampleModulHomeRef{{ key }}">
<span class="galerry-ref">GALERIES PHOTOS</span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
</a>
{% endif %}
</div>
#}
{#
<div class="tag-ref"><span class="text-tag-ref">{{ specialPropertyCategory(reference.category) }}</span></div>
#}
<div class="tag-ref"><span class="text-tag-ref">{{ getTypeReferences(reference.type) }}</span></div>
{% if reference.pictures is not empty %}
{% for picture in reference.pictures|slice(0,1) %}
<div class="img-tmp" style="background-image: url({{ picture.url }});"></div>
{% endfor %}
{% else %}
<div class="img-tmp" style="background-image: url('build/Hudson_Ontario2.png');"></div>
{% endif %}
<p class="city">{{ reference.city.name }}</p>
<p class="project-name">{{ reference.reference }}</p>
</div>
</a>
<div class="lightbox" id="modul-{{ key }}">
<div class="closer"></div>
<div class="arrows left">←</div>
<div class="arrows right">→</div>
<div class="counter">1/1</div>
<ul class="items">
{% for picture in reference.pictures %}
<li class="item">
<img class="img" src="{{ picture.url }}" alt="{{ reference.reference }}" loading="lazy">
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
<div id="link-none" class="col-lg-12 mx-auto div-svg-header d-flex justify-content-end">
<div>
<a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('reference') }}">Découvrir plus
<svg class="svg-inline--fa fa-arrow-right fa-w-14 property-arrow" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg><!-- <i class="fas fa-arrow-right property-arrow"></i> Font Awesome fontawesome.com -->
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="property-promotion" style="background: #F7F7F7;padding:80px 0;">
{% set propertyContent = content('Home', 'Biens') %}
<div id="home-sale" class="col-lg-8 mx-auto div-svg-header" style="display: flex; justify-content: space-between">
<div id="property-content-p" class="col-lg-5 property-content" style="display: flex;flex-direction: column;justify-content:space-around; padding-right:20px;">
<div class="col-lg-12">
<svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
<path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
</svg>
<h1 class="property-name">{% if propertyContent.name is defined and propertyContent.name %}{{ propertyContent.name }}{% else %}Un bien à vendre ?{% endif %}</h1>
</div>
{% if propertyContent.content is defined and propertyContent.content %}
{{ propertyContent.content|raw }}
{% else %}
<p>Réaliser l’estimation d’une maison, d’un appartement ou d’un terrain, c’est un métier. Grâce à nos
experts immobiliers, vous fixez le juste prix. Ensuite, ils vous accompagnent dans toutes les étapes,
jusqu’à la vente de votre bien.
<br>
<br>
Vous souhaitez connaître la valeur marchande de votre bien immobilier ? Contactez-nous pour
convenir d’un rendez-vous avec l’un de nos conseillers.</p>
{% endif %}
<div class="see-video-bottom" style="display: flex; align-content: center">
<a id="contact-link" class="property-span-arrow" href="{{ path('contact') }}">CONTACTEZ-NOUS
<i class="fas fa-arrow-right property-arrow"></i>
</a>
</div>
{#
<div id="link-palyer" class="div-svg-header">
<div class="see-video" style="display: flex; align-content: center">
<a id="contact-link" class="property-span-arrow" href="{{ path('contact') }}">CONTACTEZ-NOUS
<i class="fas fa-arrow-right property-arrow"></i>
</a>
</div>
<div class="movie-link">
{#
<a id="movie" data-bs-toggle="modal" data-bs-target="#exampleModal" class="property-span-arrow">VOIR LA VIDEO
<i class="fas fa-arrow-right property-arrow"></i>
</a>
<a id="movie-mobile" data-bs-toggle="modal" data-bs-target="#exampleModal" class="property-span-arrow">
<span class="video-span" style="display: none">VOIR LA VIDEO</span>
<i id="svg-video-mobile" style="display: none" class="fas fa-play"></i>
</a>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8zFDrIoLoCQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
#}
</div>
{#
<div class="col-lg-3 see-video-mobile" style="display: none">
<a class="property-span-arrow" href="{{ path('contact') }}">CONTACTEZ-NOUS
<i class="fas fa-arrow-right property-arrow"></i>
</a>
</div>
#}
<div class="home-sale-img col-lg-6" style="margin:0;position: relative; background-image: url({{ asset('img/img_bien_a_vendre.jpg') }})">
</div>
</div>
</section>
{#
<section class="video-presentation">
<div class="col-lg-8 mx-auto pt-5 pb-5">
<iframe src="https://www.youtube.com/embed/g5gHFQUvMWM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="width:100%;"></iframe>
</div>
</section>
#}
<section class="numbers" style="margin-bottom: 50px">
{% set numbersContent1 = content('Home', 'Chiffres-1') %}
{% set numbersContent2 = content('Home', 'Chiffres-2') %}
{% set numbersContent3 = content('Home', 'Chiffres-3') %}
{% set numbersContent4 = content('Home', 'Chiffres-4') %}
<div class="col-lg-8 mx-auto div-svg-header" style="display: flex;">
<div class="col-lg-8">
<svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
<path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
</svg>
{% if numbersContent1.name is defined %}<h1 class="property-name">{{ numbersContent1.name }}</h1>{% else %}<h1 class="property-name">QUELQUES CHIFFRES</h1>{% endif %}
</div>
</div>
<div class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center">
<div id="flick1" class="flicking-viewport" style="display: flex; justify-content: center">
<div class="flicking-camera" style="align-items: flex-start; justify-content: flex-start;">
{% if numbersContent1.content is defined %}
<div class="number-content constr" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
{{ numbersContent1.content|raw }}
</div>
{% else %}
<div class="number-content comm" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
<p>Environ</p>
<h2><strong class="count">0</strong></h2>
<p>logements</p>
<p><strong>commercialisés </strong>(par an)</p>
</div>
{% endif %}
{% if numbersContent1.content is defined %}
<div class="separator"></div>
<div class="number-content comm" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
{{ numbersContent2.content|raw }}
</div>
{% else %}
<div class="separator"></div>
<div class="number-content comm" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
<p>Environ</p>
<h2><strong class="count">0</strong></h2>
<p>logements</p>
<p><strong>commercialisés </strong>(par an)</p>
</div>
{% endif %}
{% if numbersContent1.content is defined %}
<div class="separator"></div>
<div class="number-content porte" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
{{ numbersContent3.content|raw }}
</div>
{% else %}
<div class="separator"></div>
<div class="number-content comm" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
<p>Environ</p>
<h2><strong class="count">0</strong></h2>
<p>logements</p>
<p><strong>commercialisés </strong>(par an)</p>
</div>
{% endif %}
{% if numbersContent1.content is defined %}
<div class="separator"></div>
<div class="number-content coll" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
{{ numbersContent4.content|raw }}
</div>
{% else %}
<div class="separator"></div>
<div class="number-content comm" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
<p>Environ</p>
<h2><strong class="count">0</strong></h2>
<p>logements</p>
<p><strong>commercialisés </strong>(par an)</p>
</div>
{% endif %}
</div>
</div>
</div>
</section>
</div>
<section class="newsletter">
<div class="col-lg-8 row m-auto">
<div class="col-lg-6">
<svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
<path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#fff"/>
</svg>
<h1 class="property-name">Inscrivez-vous à<br> notre newsletter</h1>
</div>
<div class="col-lg-4">
<div id="div-form-newsletter">
<span id="span-newsletter">Recevez nos dernières actualités.</span>
<form action="{{ path('mailchimp') }}" id="form-newsletter">
<div class="input-group mt-2">
<input id="input-email" class="form-control input-email" type="email" name="email" placeholder="Votre adresse mail">
<button class="btn btn-primary button-newsletter" type="submit"><i class="fas fa-arrow-right"></i></button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Modal HTML -->
<div id="video" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="cartoonVideo" class="embed-responsive-item" width="560" height="315" src="https://youtu.be/8zFDrIoLoCQ" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
{# <div class="modal fade" id="popUpChristmas" tabindex="-1" aria-labelledby="popUpChristmas" aria-hidden="true">#}
{# <div class="modal-dialog video-pop-up-dialog">#}
{# <div class="modal-content video-pop-up-content">#}
{# <div class="modal-body" style="position: relative">#}
{# <button class="btn btn-primary" id="closeModal">×</button>#}
{# <button id="buttonVideoFour" class="active">#}
{# <i style="font-size: 65px; background-color: transparent;" class="far fa-play-circle"></i>#}
{# </button>#}
{# <video id="video1" preload="auto" width="100%" height="100%" poster="{{ asset('build/cover-xmas.png') }}" controls>#}
{# <source type="video/mp4" src="{{ asset('build/2021_09_12 Carte de voeux animée - Vidéo R4.mp4') }}" />#}
{# </video>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <script>#}
{# let myVideo = document.getElementById("video1");#}
{# myVideo.controls = false#}
{# </script>#}
{# <script>#}
{# $('.slider-home-ref-detail').slick({#}
{# dots: false,#}
{# infinite: true,#}
{# speed: 3000,#}
{# slidesToShow: 1,#}
{# slidesToScroll: 1,#}
{# autoplay: true,#}
{# responsive: [#}
{# {#}
{# breakpoint: 576,#}
{# settings: {#}
{# slidesToShow: 1,#}
{# slidesToScroll: 1#}
{# }#}
{# }#}
{# ]#}
{# });#}
{# </script>#}
{% endblock %}