templates/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% set page = 'homepage' %}
  3. {% block title %}Accueil{% endblock %}
  4. {% block metaDescription %}
  5.     {% set headerContent = content('Home', 'Header') %}
  6.     <meta name="description" content="
  7.     {% if headerContent.content is defined %}
  8.         {{ headerContent.content|striptags }}
  9.     {% else %}
  10.          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.
  11.     {% endif %}
  12.     ">
  13. {% endblock %}
  14. {% block body %}
  15.     {% set headerContent = content('Home', 'Header') %}
  16.     {% if headerContent.picture is defined and headerContent.picture is not empty %}
  17.         {% set backgroundImage = '/uploads/images/'~headerContent.picture[0].path %}
  18.     {% else %}
  19.         {% set backgroundImage = 'tracol_home.jpeg' %}
  20.     {% endif %}
  21.     
  22.     <header class="header-home" style="background-image:url({{ backgroundImage }})">
  23.         <div class="container-fluid">
  24.             <div class="px-4 py-5 text-center">
  25.                 <div id="block-header-home" class="col-lg-12">
  26.                     {% if headerContent.content is defined and headerContent.content %}
  27.                         <div id="svg-header" class="col-lg-8 div-svg-header ">
  28.                             <svg id="svg-home" xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  29.                                 <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"/>
  30.                             </svg>
  31.                         </div>
  32.                         <div class="col-lg-8 div-svg-header home-p">
  33.                             <p id="header-text-home" class="header-text">{{ headerContent.content|raw }}</p>
  34.                         </div>
  35.                     {% endif %}
  36.                     {#
  37.                     <div name="form-search-normal" id="form-search-normal" class="div-svg-header">
  38.                         <form action="{{ path('results') }}"  style="display: flex; align-items: center; width: 100%">
  39.                             <div style="display: flex;flex-direction: column;justify-content: center; width: 66.666vw;">
  40.                                 <div class="selectors" style="display: flex; align-items: center; width: auto;">
  41.                                     <div id="transaction-drop" class="dropdown">
  42.                                         <div class="undroped">
  43.                                             <p class="undroped-header">Type de transaction</p>
  44.                                             <p name="transaction-type" class="undroped-subheader">Achat ou Location</p>
  45.                                             <input type="hidden" value="" class="input-subheader" name="transaction-type">
  46.                                         </div>
  47.                                         <div class="droped">
  48.                                             <div class="dropdown-header">Type de transaction</div>
  49.                                             <ul id="transaction-li" class="items">
  50.                                                 <li class="item" data-value ="Vente">Achat</li>
  51.                                                 <li class="item" data-value ="Location">Location</li>
  52.                                                 <li class="item" data-value ="Location saisonnière">Location saisonniere</li>
  53.                                                 <li class="item" data-value ="Programme">Programme</li>
  54.                                                <li class="item" data-value ="Viager">Viager</li>
  55.                                                                   <li class="item" data-value ="Enchere">Enchère</li>
  56.                     </ul>
  57.                 </div>
  58.             </div>
  59.             <div id="property-drop" class="dropdown">
  60.                 <div class="undroped">
  61.                     <p class="undroped-header">Type de biens</p>
  62.                     <p name="property-type" class="undroped-subheader">Appartement, Bureau, ...</p>
  63.                     <input type="hidden" value="" class="input-subheader" name="property-type">
  64.                 </div>
  65.                 <div class="droped">
  66.                     <div class="dropdown-header">Type de biens</div>
  67.                     <ul id="property-li" class="items">
  68.                         <li class="item" data-value ="Appartement">Appartements</li>
  69.                         <li class="item" data-value ="Bureaux">Bureaux</li>
  70.                         <li class="item" data-value ="Maison">Maisons</li>
  71.                         <li class="item" data-value ="Commerce">Commerces</li>
  72.                         <li class="item" data-value ="Garage / Parking">Garages / Parkings</li>
  73.                         <li class="item" data-value ="Immeuble">Immeubles</li>
  74.                     </ul>
  75.                 </div>
  76.             </div>
  77.             <div id="location-drop" class="dropdown">
  78.                 <div class="undroped">
  79.                     <p class="undroped-header">Localisation</p>
  80.                     <p class="undroped-subheader">Choissisez une ville</p>
  81.                     <input type="hidden" value="" class="input-subheader" name="location">
  82.                 </div>
  83.                 <div class="droped">
  84.                     <div  class="dropdown-header">Localisation</div>
  85.                     <ul id="location-li" class="items">
  86.                                                                         <li class="item" data-value ="Appartement">Luxembourg-Ville</li>
  87.                                                                        <li class="item" data-value ="Bureaux">Leudelange</li>
  88.                                                                        <li class="item" data-value ="Maison">Esch-Sur-Alzette</li>
  89.                     </ul>
  90.                 </div>
  91.             </div>
  92.             <div class="div-form">
  93.                 <button  id="search-detail" class="btn btn-primary child search">RECHERCHE AVANCEE</button>
  94.             </div>
  95.             <div>
  96.                 <button style="background-color: transparent;border-color: transparent;" id="submit-search" type="submit">
  97.                     <svg class="search-button" xmlns="http://www.w3.org/2000/svg" width="55.982" height="90.97" viewBox="0 0 55.982 90.97">
  98.                         <g id="Groupe_3817" data-name="Groupe 3817" transform="translate(-1528.861 -105)">
  99.                             <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"/>
  100.                             <g id="Groupe_3794" data-name="Groupe 3794" transform="translate(1545.335 126.696)">
  101.                                 <g id="np_search_1868241_000000">
  102.                                     <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"/>
  103.                                     <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"/>
  104.                                 </g>
  105.                             </g>
  106.                         </g>
  107.                     </svg></button>
  108.                 <button class="btn btn-primary" id="send" type="submit" style="display: none">Envoyer</button>
  109.             </div>
  110.         </div>
  111.         <div id="sub-search-div" class="sub-search-div" style="display: none">
  112.             <div class="col-lg-3 div-form">
  113.                 <input class="sub-search-input" name="budget"  id="budget" type="text" placeholder="Budget max.">
  114.             </div>
  115.             <div id="rooms-drop" class="dropdown">
  116.                 <div class="undroped">
  117.                     <p class="undroped-header transparent-font">Nombre de chambres</p>
  118.                     <p class="undroped-subheader good-place"></p>
  119.                     <input type="hidden" class="input-subheader" name="rooms">
  120.                 </div>
  121.                 <div class="droped">
  122.                     <div class="dropdown-header">Nombre de chambres</div>
  123.                     <ul id="rooms-li" class="items">
  124.                         <li class="item" data-value ="1">1</li>
  125.                         <li class="item" data-value ="2">2</li>
  126.                         <li class="item" data-value ="3">3</li>
  127.                         <li class="item" data-value ="4">4</li>
  128.                         <li class="item" data-value ="5">5</li>
  129.                         <li class="item" data-value ="6">6</li>
  130.                     </ul>
  131.                 </div>
  132.             </div>
  133.             <div class="col-lg-3 div-form">
  134.                 <input class="sub-search-input" id="area-minimumm" name="area-minimumm" type="text" placeholder="Surface minimum.">
  135.             </div>
  136.         </div>
  137.         </div>
  138.         </form>
  139.         </div>
  140.                     #}
  141.                 </div>
  142.             </div>
  143.         </div>
  144.     </header>
  145.     <div class="container-fluid g-0 px-0">
  146.         <section class="project">
  147.             {% set projectContent = content('Home', 'Projects')  %}
  148.             <div id="home-section" class="col-lg-8 mx-auto div-svg-header pre-section">
  149.                 <div class="home-section-title col-lg-5" style="font-size: 2.3em;display: flex;flex-direction: column;">
  150.                     <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">
  151.                         <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"/>
  152.                     </svg>
  153.                     <h1 class="project-title">{% if projectContent.name is defined %}{{ projectContent.name }}{% else %}Nos projets{% endif %}</h1>
  154.                 </div>
  155.                 {#
  156.                 <div class="separator"></div>
  157.                 <div class="pre-section-content col-md-6">
  158.                     {% if projectContent.content is defined %}
  159.                         {{ projectContent.content|raw }}
  160.                     {% else %}
  161.                         Fort de plusieurs années d’expérience, Tracol Immobilier propose des projets adaptés aux
  162.                         besoins de chacun. Répondant aux plus hautes exigences et s’inscrivant dans le temps, ils se
  163.                         caractérisent par une architecture résolument contemporaine, des matériaux de qualité et le
  164.                         soin apporté à chaque détail.
  165.                     {% endif %}
  166.                 </div>
  167.                 #}
  168.             </div>
  169.         </section>
  170.         <section class="properties" style="margin-bottom: 40px">
  171.             {#
  172.             <div id="button-property" class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center">
  173.                 <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  174.                 <button data-id="futur" class="btn btn-primary come border-radius projectButton"><span class="span-projects">A VENIR</span></button>
  175.                 <button data-id="construction" class="btn btn-primary come border-radius projectButton"><span class="span-projects">EN COURS</span></button>
  176.                 <div class="col-lg-6 projects-link">
  177.                     <a href="{{ path('projects') }}" class="property-span-arrow">VOIR TOUS NOS PROJETS
  178.                         <i class="fas fa-arrow-right property-arrow"></i>
  179.                     </a>
  180.                 </div>
  181.             </div>
  182.             #}
  183.             {#
  184.             <div id="button-property-mobile" class="col-lg-8 mx-auto div-svg-header" style="display: none; align-items: center">
  185.                 <div id="flick2" class="flicking-viewport">
  186.                     <div class="flicking-camera">
  187.                         <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  188.                         <button data-id="futur" class="btn btn-primary come border-radius projectButton"><span class="span-projects">A VENIR</span></button>
  189.                         <button data-id="construction" class="btn btn-primary come border-radius projectButton"><span class="span-projects">EN COURS</span></button>
  190.                     </div>
  191.                 </div>
  192.                 <div class="col-lg-8 projects-link">
  193.                     <a href="{{ path('projects') }}" class="property-span-arrow">VOIR TOUS NOS PROJETS
  194.                         <i class="fas fa-arrow-right property-arrow"></i>
  195.                     </a>
  196.                 </div>
  197.             </div>
  198.             #}
  199.             <div id="projects" class="col-lg-8 mx-auto" style="display: flex;  flex-wrap: wrap; justify-content: space-between">
  200.                 {% for project in projects|slice(0,4) %}
  201.                     <div onclick="location.href='{{ path('project-detail', {'id': project.id}) }}'" data-id="{{ path('project-detail', {'id': project.id}) }}" id="width-col-6-home" class="item col-lg-6 margin-top-30" style="position: relative; cursor: pointer">
  202.                         {#
  203.                         <div class="div-hover" id="div-hover" style="">
  204.                             {% if project.comments[0].comment is not empty %}
  205.                                 <p class="project-content" style="visibility: hidden">
  206.                                     {{ project.comments[0].comment|slice(0, 300) }}
  207.                                 </p>
  208.                                 <p class="project-arrow">
  209.                                     <a style="" href="{{ path('project-detail', {'id': project.id}) }}" class="project-arrow-2">
  210.                                         <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  211.                                     </a>
  212.                                 </p>
  213.                             {% else %}
  214.                                 <p class="project-arrow">
  215.                                     <a style="margin-top: 180px" href="{{ path('project-detail', {'id': project.id}) }}" class="project-arrow-2">
  216.                                         <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  217.                                     </a>
  218.                                 </p>
  219.                             {% endif %}
  220.                         </div>
  221.                         #}
  222.                         <div class="tag-ref-projet-3"><span class="text-tag-ref">{{ typeProject(project.construction.construction_step) }}</span></div>
  223.                         {% if project.pictures is not empty %}
  224.                             {% for picture in project.pictures|slice(0,1) %}
  225.                             <div class="img-wrapper">
  226.                                 {% set url = 'http' in picture.url ? picture.url : asset('uploads/images/properties/'~project.id~'/'~picture.url) %}
  227.                                 <div class="img" style="background-image: url('{{ url }}'); margin: 0px;">
  228.                                 </div>
  229.                             </div>
  230.                             {% endfor %}
  231.                         {% else %}
  232.                         <div class="img-wrapper">
  233.                             <div class="img" style="background-image: url('{{ asset('build/Maisons_H_R1.jpg') }}'); margin: 0px;"></div>
  234.                         </div>
  235.                         {% endif %}
  236.                         <p class="city">{{ project.city.name }}</p>
  237.                         <p class="project-name">{{ project.name }}</p>
  238.                     </div>
  239.                 {% endfor %}
  240.             </div>
  241.             <div class="col-lg-8 mx-auto projects-link-mobile" style="display: none">
  242.                 <a href="{{ path('projects') }}" class="property-span-arrow">Découvrir plus
  243.                     <i class="fas fa-arrow-right property-arrow"></i>
  244.                 </a>
  245.             </div>
  246.             <div id="link-none" class="col-lg-8 mx-auto div-svg-header d-flex justify-content-end">
  247.                 <div>
  248.                     <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('projects') }}">Découvrir plus
  249.                         <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 -->
  250.                     </a>
  251.                 </div>
  252.             </div>
  253.         </section>
  254.         <section class="available-properties">
  255.             <div id="home-section" class="col-lg-8 mx-auto div-svg-header pre-section">
  256.                 <div class="home-section-title col-lg-8" style="font-size: 2.3em;display: flex;flex-direction: column;">
  257.                     <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">
  258.                         <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"/>
  259.                     </svg>
  260.                     <h1 class="project-title">Nos biens disponibles</h1>
  261.                 </div>
  262.                 {#
  263.                 <div class="separator"></div>
  264.                 <div class="pre-section-content col-md-6">
  265.                     {% if projectContent.content is defined %}
  266.                         {{ projectContent.content|raw }}
  267.                     {% else %}
  268.                         Fort de plusieurs années d’expérience, Tracol Immobilier propose des projets adaptés aux
  269.                         besoins de chacun. Répondant aux plus hautes exigences et s’inscrivant dans le temps, ils se
  270.                         caractérisent par une architecture résolument contemporaine, des matériaux de qualité et le
  271.                         soin apporté à chaque détail.
  272.                     {% endif %}
  273.                 </div>
  274.                 #}
  275.             </div>
  276.             <div id="projects" class="col-lg-8 mx-auto" style="display: flex;  flex-wrap: wrap; justify-content: space-between">
  277.                 {% for project in salesProperties|slice(0,4) %}
  278.                     <div onclick="location.href='{{ path('property-detail', {'id': project.id}) }}'" data-id="{{ path('property-detail', {'id': project.id}) }}" id="width-col-6-home" class="item col-lg-6 margin-top-30" style="position: relative; cursor: pointer">
  279.                         {# <div class="tag-ref-projet-3"><span class="text-tag-ref">{{ typeProject(project.construction.construction_step) }}</span></div> #}
  280.                         <div class="tag-ref-projet-3"><span class="text-tag-ref">{{ propertyCategory(project.category) }}</span></div>
  281.                         {% if project.pictures is not empty %}
  282.                             {% for picture in project.pictures|slice(0,1) %}
  283.                             <div class="img-wrapper">
  284.                                 {% set url = 'http' in picture.url ? picture.url : asset('uploads/images/properties/'~project.id~'/'~picture.url) %}
  285.                                 <div class="img" style="background-image: url('{{ url }}'); margin: 0px;">
  286.                                 </div>
  287.                                 </div>
  288.                             {% endfor %}
  289.                         {% else %}
  290.                         <div class="img-wrapper">
  291.                             <div class="img" style="background-image: url('{{ asset('build/Maisons_H_R1.jpg') }}'); margin: 0px;"></div>
  292.                             </div>
  293.                         {% endif %}
  294.                         <div class="infos">
  295.                             <div class="detail">
  296.                                 <p class="city">{{ project.city.name }}</p>
  297.                                 <p class="project-name">{{ getTypeProperty(project.type) }}</p>
  298.                             </div>
  299.                         </div>
  300.                     </div>
  301.                 {% endfor %}
  302.             </div>
  303.             <div class="col-lg-8 mx-auto projects-link-mobile" style="display: none">
  304.                 <a href="/biens/vente" class="property-span-arrow">VOIR TOUS NOS BIENS
  305.                     <i class="fas fa-arrow-right property-arrow"></i>
  306.                 </a>
  307.             </div>
  308.             <div id="link-none" class="col-lg-8 mx-auto div-svg-header d-flex justify-content-end">
  309.                 <div>
  310.                     <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('properties') }}">Découvrir plus
  311.                         <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 -->
  312.                     </a>
  313.                 </div>
  314.             </div>
  315.         </section>
  316.         <section class="reference">
  317.             {% set referenceContent = content('Home', 'References') %}
  318.             <div class="col-lg-8 mx-auto div-svg-header" style="display: flex; margin-top: 30px">
  319.                 <div class="col-lg-5">
  320.                     <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  321.                         <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"/>
  322.                     </svg>
  323.                     <h1 class="project-title">
  324.                         {% if referenceContent.name is defined and referenceContent.name %}
  325.                             {{ referenceContent.name }}
  326.                         {% else %}
  327.                             Nos références
  328.                         {% endif %}
  329.                     </h1>
  330.                 </div>
  331.                 {#
  332.                 <div class="separator"></div>
  333.                 <div class="pre-section-content col-md-6">
  334.                     {% if projectContent.content is defined %}
  335.                         {{ projectContent.content|raw }}
  336.                     {% else %}
  337.                         Tracol Immobilier se distingue par la création d’espaces de vie alliant
  338.                         qualité, durabilité et esthétisme.
  339.                     {% endif %}
  340.                 </div>
  341.                 #}
  342.             </div>
  343.             {#
  344.             <div id="button-reference" class="offset-lg-2 col-lg-8 div-svg-header" style="display: flex; align-items: center">
  345.                 <button data-id="all" class="btn btn-primary all border-radius projectButtonref"><span class="span-all">TOUS</span></button>
  346.                 <button data-id="residences" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">RÉSIDENCES</span></button>
  347.                 <button data-id="maisons" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">MAISONS</span></button>
  348.                 <button data-id="commerces" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">COMMERCES</span></button>
  349.                 <button data-id="bureaux" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">BUREAUX</span></button>
  350.                 <div id="links-ref-home" class="col-lg-3 projects-link">
  351.                     <a href="{{ path('reference') }}" class="property-span-arrow">VOIR TOUTES NOS REFERENCES
  352.                         <i class="fas fa-arrow-right property-arrow"></i>
  353.                     </a>
  354.                 </div>
  355.             </div>
  356.             <div id="button-reference-mobile" class="offset-lg-2 col-lg-8 div-svg-header" style="display: none; align-items: center">
  357.                 <div id="flick" class="flicking-viewport">
  358.                     <div class="flicking-camera">
  359.                         <button data-id="all" class="btn btn-primary all border-radius projectButtonref"><span class="span-all">TOUS</span></button>
  360.                         <button data-id="residences" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">RÉSIDENCES</span></button>
  361.                         <button data-id="maisons" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">MAISONS</span></button>
  362.                         <button data-id="commerces" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">COMMERCES</span></button>
  363.                         <button data-id="bureaux" class="btn btn-primary come border-radius projectButtonref"><span class="span-projects">BUREAUX</span></button>
  364.                     </div>
  365.                 </div>
  366.                 <div class="col-lg-3 projects-link">
  367.                     <a href="{{ path('reference') }}" class="property-span-arrow">VOIR TOUTES NOS REFERENCE
  368.                         <i class="fas fa-arrow-right property-arrow"></i>
  369.                     </a>
  370.                 </div>
  371.             </div>
  372.             #}
  373.             <div id="references-home" class="col-lg-8">
  374.                 <div id="flick100" class="flicking-viewport">
  375.                     <div  class="flicking-camera">
  376.                         <div class="col-lg-12 ref-container" style="display: flex; flex-wrap: wrap;">
  377.                             {% for key, reference in references|slice(0,4) %}
  378.                                 <a href="{{ path('property-detail', {'id': reference.id}) }}" class="item col-lg-6 col-md-12 {% if loop.index % 2 == 0 %}padd-to-left{% else %}padd-to-right{% endif %}">
  379.                                     <div class="div-img-hover-2 ref-list">
  380.                                         {#
  381.                                         <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">
  382.                                             <p class="city">{{ reference.city.name }}</p>
  383.                                             <p class="project-name">{{ reference.reference }}</p>
  384.                                             <p class="date-ref">{{ reference.updated_at|date("d/m/Y") }}</p>
  385.                                             {% if reference.comments[0].comment is not empty %}
  386.                                                 <p class="project-content" style="visibility: hidden">
  387.                                                     {{ reference.comments[0].comment|slice(0, 250) }}
  388.                                                 </p>
  389.                                                 <a href="javascript:void(0);" class="project-arrow-2 lightbox-on"  data-id="modul-{{ key }}">
  390.                                                     <span class="galerry-ref">GALERIES PHOTOS</span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  391.                                                 </a>
  392.                                             {% else %}
  393.                                                 <a style="margin-top: 180px" href="javascript:void(0);" class="project-arrow-2 lightbox-on"  data-bs-toggle="modul"
  394.                                                    data-bs-target="#exampleModulHomeRef{{ key }}">
  395.                                                     <span class="galerry-ref">GALERIES PHOTOS</span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  396.                                                 </a>
  397.                                             {% endif %}
  398.                                         </div>
  399.                                         #}
  400.                                         {#
  401.                                         <div class="tag-ref"><span class="text-tag-ref">{{ specialPropertyCategory(reference.category) }}</span></div>
  402.                                         #}
  403.                                         <div class="tag-ref"><span class="text-tag-ref">{{ getTypeReferences(reference.type) }}</span></div>
  404.                                         {% if reference.pictures is not empty %}
  405.                                             {% for picture in reference.pictures|slice(0,1) %}
  406.                                             <div class="img-wrapper2">
  407.                                                 {% set url = 'http' in picture.url ? picture.url : asset('uploads/images/properties/'~reference.id~'/'~picture.url) %}
  408.                                                 <div class="img-tmp" style="background-image: url({{ url }});"></div>
  409.                                             </div>
  410.                                             {% endfor %}
  411.                                         {% else %}
  412.                                         <div class="img-wrapper2">
  413.                                             <div class="img-tmp" style="background-image: url('build/Hudson_Ontario2.png');"></div>
  414.                                         </div>
  415.                                         {% endif %}
  416.                                         <p class="city">{{ reference.city.name }}</p>
  417.                                         <p class="project-name">{{ reference.reference }}</p>
  418.                                     </div>
  419.                                 </a>
  420.                                 <div class="lightbox" id="modul-{{ key }}">
  421.                                     <div class="closer"></div>
  422.                                     <div class="arrows left">&#8592;</div>
  423.                                     <div class="arrows right">&#8594;</div>
  424.                                     <div class="counter">1/1</div>
  425.                                     <ul class="items">
  426.                                         {% for picture in reference.pictures %}
  427.                                             <li class="item">
  428.                                                 {% set url = 'http' in picture.url ? picture.url : asset('uploads/images/properties/'~reference.id~'/'~picture.url) %}
  429.                                                 <img class="img" src="{{ url }}" alt="{{ reference.reference }}" loading="lazy">
  430.                                             </li>
  431.                                         {% endfor %}
  432.                                     </ul>
  433.                                 </div>
  434.                             {% endfor %}
  435.                         </div>
  436.                         <div class="col-lg-12 references-link-mobile" style="display: none">
  437.                             <a href="{{ path('reference') }}" class="property-span-arrow">Découvrir plus
  438.                                 <i class="fas fa-arrow-right property-arrow"></i>
  439.                             </a>
  440.                         </div>
  441.                         <div id="link-none" class="col-lg-12 mx-auto div-svg-header d-flex justify-content-end">
  442.                             <div>
  443.                                 <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('reference') }}">Découvrir plus
  444.                                     <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 -->
  445.                                 </a>
  446.                             </div>
  447.                         </div>
  448.                     </div>
  449.                 </div>
  450.             </div>
  451.         </section>
  452.         <section class="property-promotion" style="background: #F7F7F7;padding:40px 0;">
  453.             {% set propertyContent = content('Home', 'Biens') %}
  454.             <div id="home-sale" class="col-lg-8 mx-auto div-svg-header" style="display: flex; justify-content: space-between">
  455.                 <div id="property-content-p" class="col-lg-5 property-content" style="display: flex;flex-direction: column;justify-content:space-around; padding-right:20px;">
  456.                     <div class="col-lg-12">
  457.                         <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  458.                             <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"/>
  459.                         </svg>
  460.                         <h1 class="property-name">{% if propertyContent.name is defined and propertyContent.name %}{{ propertyContent.name }}{% else  %}Un bien à vendre ?{% endif %}</h1>
  461.                     </div>
  462.                     {% if propertyContent.content is defined and propertyContent.content %}
  463.                         {{ propertyContent.content|raw }}
  464.                     {% else %}
  465.                         <p>Réaliser l’estimation d’une maison, d’un appartement ou d’un terrain, c’est un métier. Grâce à nos
  466.                             experts immobiliers, vous fixez le juste prix. Ensuite, ils vous accompagnent dans toutes les étapes,
  467.                             jusqu’à la vente de votre bien.
  468.                             <br>
  469.                             <br>
  470.                             Vous souhaitez connaître la valeur marchande de votre bien immobilier ? Contactez-nous pour
  471.                             convenir d’un rendez-vous avec l’un de nos conseillers.</p>
  472.                     {% endif %}
  473.                     <div class="see-video-bottom" style="display: flex; align-content: center">
  474.                         <a id="contact-link" class="property-span-arrow" href="{{ path('vendre') }}">CONTACTEZ-NOUS
  475.                             <i class="fas fa-arrow-right property-arrow"></i>
  476.                         </a>
  477.                     </div>
  478.                     {#
  479.                             <div id="link-palyer" class="div-svg-header">
  480.                                 <div class="see-video" style="display: flex; align-content: center">
  481.                                     <a id="contact-link" class="property-span-arrow" href="{{ path('contact') }}">CONTACTEZ-NOUS
  482.                                         <i class="fas fa-arrow-right property-arrow"></i>
  483.                                     </a>
  484.                                 </div>
  485.                                 <div class="movie-link">
  486.                                     {#
  487.                                     <a id="movie" data-bs-toggle="modal" data-bs-target="#exampleModal" class="property-span-arrow">VOIR LA VIDEO
  488.                                         <i class="fas fa-arrow-right property-arrow"></i>
  489.                                     </a>
  490.                             <a id="movie-mobile" data-bs-toggle="modal" data-bs-target="#exampleModal" class="property-span-arrow">
  491.                                 <span class="video-span" style="display: none">VOIR LA VIDEO</span>
  492.                                 <i id="svg-video-mobile" style="display: none" class="fas fa-play"></i>
  493.                             </a>
  494.                             <!-- Modal -->
  495.                             <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  496.                                 <div class="modal-dialog">
  497.                                     <div class="modal-content">
  498.                                         <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>
  499.                                     </div>
  500.                                 </div>
  501.                             </div>
  502.                         </div>
  503.                     </div>
  504.                     #}
  505.                 </div>
  506.                 {#
  507.                 <div class="col-lg-3 see-video-mobile" style="display: none">
  508.                     <a  class="property-span-arrow" href="{{ path('contact') }}">CONTACTEZ-NOUS
  509.                         <i class="fas fa-arrow-right property-arrow"></i>
  510.                     </a>
  511.                 </div>
  512.                 #}
  513.                 <div class="home-sale-img col-lg-6" style="margin:0;position: relative; background: url({{ asset('img/vendre.jpg') }}) no-repeat center center; background-size:cover;">
  514.                 </div>
  515.             </div>
  516.         </section>
  517.         {#
  518.         <section class="video-presentation">
  519.            <div class="col-lg-8 mx-auto pt-5 pb-5">
  520.                <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>
  521.            </div>
  522.        </section>
  523.         #}
  524.     </div>
  525.     <section class="newsletter">
  526.         <div class="col-lg-8 row m-auto">
  527.             <div class="col-lg-6">
  528.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  529.                     <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="rgb(246, 164, 0)"/>
  530.                 </svg>
  531.                 <h1 class="property-name">Inscrivez-vous à<br> notre newsletter</h1>
  532.             </div>
  533.             <div class="col-lg-4">
  534.                 <div id="div-form-newsletter">
  535.                     <span id="span-newsletter">Recevez nos dernières actualités.</span>
  536.                     <form action="{{ path('mailchimp') }}" id="form-newsletter">
  537.                         <div class="input-group mt-2">
  538.                             <input id="input-email" class="form-control input-email" type="email" name="email" placeholder="Votre adresse mail">
  539.                             <button class="btn btn-primary button-newsletter" type="submit"><i class="fas fa-arrow-right"></i></button>
  540.                         </div>
  541.                     </form>
  542.                 </div>
  543.             </div>
  544.         </div>
  545.     </section>
  546.     <!-- Modal HTML -->
  547.     <div id="video" class="modal fade">
  548.         <div class="modal-dialog">
  549.             <div class="modal-content">
  550.                 <div class="modal-header">
  551.                     <button type="button" class="close" data-dismiss="modal">&times;</button>
  552.                 </div>
  553.                 <div class="modal-body">
  554.                     <div class="embed-responsive embed-responsive-16by9">
  555.                         <iframe id="cartoonVideo" class="embed-responsive-item" width="560" height="315" src="https://youtu.be/8zFDrIoLoCQ" allowfullscreen></iframe>
  556.                     </div>
  557.                 </div>
  558.             </div>
  559.         </div>
  560.     </div>
  561.     <!-- Modal -->
  562. {#    <div  class="modal fade" id="popUpChristmas" tabindex="-1" aria-labelledby="popUpChristmas" aria-hidden="true">#}
  563. {#        <div class="modal-dialog video-pop-up-dialog">#}
  564. {#            <div class="modal-content  video-pop-up-content">#}
  565. {#                <div class="modal-body" style="position: relative">#}
  566. {#                    <button class="btn btn-primary" id="closeModal">&times;</button>#}
  567. {#                    <button id="buttonVideoFour" class="active">#}
  568. {#                        <i style="font-size: 65px; background-color: transparent;" class="far fa-play-circle"></i>#}
  569. {#                    </button>#}
  570. {#                    <video id="video1" preload="auto" width="100%" height="100%" poster="{{ asset('build/cover-xmas.png') }}" controls>#}
  571. {#                        <source type="video/mp4" src="{{ asset('build/2021_09_12 Carte de voeux animée - Vidéo R4.mp4') }}" />#}
  572. {#                    </video>#}
  573. {#                </div>#}
  574. {#            </div>#}
  575. {#        </div>#}
  576. {#    </div>#}
  577. {#    <script>#}
  578. {#        let myVideo = document.getElementById("video1");#}
  579. {#        myVideo.controls = false#}
  580. {#    </script>#}
  581.     
  582. {#    <script>#}
  583. {#        $('.slider-home-ref-detail').slick({#}
  584. {#            dots: false,#}
  585. {#            infinite: true,#}
  586. {#            speed: 3000,#}
  587. {#            slidesToShow: 1,#}
  588. {#            slidesToScroll: 1,#}
  589. {#            autoplay: true,#}
  590. {#            responsive: [#}
  591. {#                {#}
  592. {#                    breakpoint: 576,#}
  593. {#                    settings: {#}
  594. {#                        slidesToShow: 1,#}
  595. {#                        slidesToScroll: 1#}
  596. {#                    }#}
  597. {#                }#}
  598. {#            ]#}
  599. {#        });#}
  600. {#    </script>#}
  601. {% endblock %}