templates/front/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block meta %}
  3.     <title>{{ blockHeader.title }}</title>
  4.     <meta name="description" content="{{ blockHeader.text|striptags }}">
  5.     <meta property='og:title' content='{{ blockHeader.title }} - Recrutement'/>
  6.     <meta property='og:image' content='{{ app.request.getSchemeAndHttpHost() }}{{ asset('img/tgl_logo.jpg') }}'/>
  7.     <meta property="og:image:type" content="image/jpg">
  8.     <meta property="og:image:width" content="1200">
  9.     <meta property="og:image:height" content="650">
  10.     <meta property='og:description' content='{{ blockJoin.text|striptags }}'/>
  11.     <meta property='og:url' content='{{ app.request.getSchemeAndHttpHost() }}'/>
  12. {% endblock %}
  13. {% block body %}
  14.     {% set locale = app.request.locale %}
  15.     <div class="modal fade bd-condition-lg" id="modal_cgu" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  16.         <div class="modal-dialog modal-lg" style="margin-top:100px;">
  17.             <div class="modal-content p-4">
  18.                 <h3>{{ pageCondition.title }}</h3>
  19.                 {{ pageCondition.text|raw }}
  20.             </div>
  21.         </div>
  22.     </div>
  23.     <div class="modal fade bd-mention-lg" id="modal_mention" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  24.         <div class="modal-dialog modal-lg" style="margin-top:100px;">
  25.             <div class="modal-content p-4">
  26.                 <h3>{{ pageMention.title }}</h3>
  27.                 {{ pageMention.text|raw }}
  28.             </div>
  29.         </div>
  30.     </div>
  31.     <div class="modal fade bd-politique-lg" tabindex="-1" id="modal_politique" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  32.         <div class="modal-dialog modal-lg" style="margin-top:100px;">
  33.             <div class="modal-content p-4">
  34.                 <h3>{{ pagePolitique.title }}</h3>
  35.                 {{ pagePolitique.text|raw }}
  36.             </div>
  37.         </div>
  38.     </div>
  39.     <section class="first-section" id="sectionFirst" style="height:max-content">
  40.         <div class="row p-0 w-100 m-0 column-responsive reverse header-bg-text">
  41.             <div class="col-lg-12 col-xl-5">
  42.                 <div class="row">
  43.                     {#<div class="col-lg-12 col-xl-6 p-0"></div>#}
  44.                     <div class="col-lg-12 col-xl-6 p-0 pb-5  home-first-title">
  45.                         <div class="big-title">
  46.                             <div class="square-title bg-gold d-flex align-items-end p-3 golden-block">
  47.                                 <h1 class="white">{{ (locale == 'fr') ? blockHeader.title : blockHeader.titleEN }}</h1>
  48.                             </div>
  49.                             <div class="responsive col-md-12">
  50.                                 <div class="desc-title pt-5 pr-2 pl-2 p-4">
  51.                                     <p class="white">{{ (locale == 'fr') ? blockHeader.text|raw : blockHeader.textEN|raw }}</p>
  52.                                 </div>
  53.                                 <div class="container-btn text-center">
  54.                                     <a href="#contactEncre" class="btn-inform white font-weight-bold">
  55.                                         <img src="{{ asset('img/icon-left-button.svg') }}">
  56.                                         {{ (locale == 'fr') ? 'Besoin d’informations ?' : 'Need informations?' }}
  57.                                     </a>
  58.                                 </div>
  59.                             </div>
  60.                         </div>
  61.                         <div class="desc-title pt-5 pr-2 pl-2 p-4 no-responsive intro-txt">
  62.                             <p class="dark-grey">{{ (locale == 'fr') ? blockHeader.text|raw : blockHeader.textEN|raw }}</p>
  63.                         </div>
  64.                         <div class="container-btn text-center no-responsive">
  65.                             <a href="#contactEncre" class="btn-inform dark-grey font-weight-bold cta-infos">
  66.                                 <img src="{{ asset('img/icon-left-button.svg') }}">
  67.                                 {{ (locale == 'fr') ? 'Besoin d’informations ?' : 'Need informations?' }}
  68.                             </a>
  69.                         </div>
  70.                     </div>
  71.                 </div>
  72.             </div>
  73.             <div class="col-lg-12 col-xl-7 bg-header" style="background:  linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url({% if blockHeader.hasImage %}{{ asset(image_member_dir) ~ blockHeader.image }}{% else %}'../img/bg-header.jpg'{% endif %})no-repeat center;background-size: cover;
  74.                     background-blend-mode: saturation; background-position: top right;"></div>
  75.         </div>
  76.         <div class="row w-100 column-responsive reseau-responsive" id="reseauList" >
  77.             <div class="col-md-12 col-xl-5 p-0 reseau">
  78.                 <div class="row">
  79.                     <div class="col-md-12 col-xl-7 p-0 no-responsive"></div>
  80.                     <div class="col-md-12 col-xl-5 p-4 bg-grey-light reseau-title p-0-responsive">
  81.                         <span class="grey font-weight-bold float-right reseau-title-txt" style="font-family: N-Bold;">
  82.                             {{ (locale == 'fr') ? 'Notre réseau d’agences de voyages' : 'Our network of travel agencies' }}
  83.                         </span>
  84.                     </div>
  85.                 </div>
  86.             </div>
  87.             {#<div class="col-md-12 col-xl-7 p-0 d-flex justify-content-around align-items-baseline p-3 logos-partner">
  88.                 {% set nbCompaniesPercent = 100 / companies|length %}
  89.                 {% for company in companies %}
  90.                     <div class=" partner" style="width:{{ nbCompaniesPercent }}%;text-align: center">
  91.                         <img src="{{ asset(image_member_dir) ~ company.logo }}">
  92.                         <div class="infos-partner mt-3">
  93.                             <p class="grey">
  94.                                 {{ company.description|slice(0,150) }}
  95.                             </p>
  96.                             <a href="{{ company.link }}" class="gold font-weight-bold">Aller sur le site</a>
  97.                         </div>
  98.                     </div>
  99.                 {% endfor %}
  100.             </div>#}
  101.             <div class="col-md-12 col-xl-7 p-0 p-3 d-flex flex-column logos-partner" id="partnersBlock" style="height:100px">
  102.                 <div class="col-md-12 d-flex justify-content-around align-items-baseline logos-partner-list">
  103.                     {% for company in companies %}
  104.                         <div class="_brand col-md-3 partner {% if loop.first %}actived{% endif %} company-single {% if loop.last %}fensh{% endif %}" data-id="{{ company.id }}" style="text-align: center">
  105.                             {# <img src="{{ asset(image_member_dir) ~ company.logo }}" {% if loop.index == 2 %}style="margin-top:15px"{% endif %}>
  106.                              <img class="_logo-brand" src="{{ asset(image_member_dir) ~ company.logo }}" {% if loop.index == 2 %}style="margin-top:15px"{% endif %}> #}
  107.                             {%  set path =  asset(image_member_dir) ~ company.logo %}
  108.                             <div class="_logo-brand-partner" style="background-image:url('{{ path }}')" {% if loop.index == 2 %}style="margin-top:15px"{% endif %}></div>
  109.                             <div class="col-md-12 responsive mt-3">
  110.                                 <div class="grey">{{ (locale == 'fr') ? company.description|raw : company.descriptionEN|raw }}</div>
  111.                                 <a target="_blank" href="{{ company.link }}" class="gold font-weight-bold">
  112.                                     {{ (locale == 'fr') ? 'Aller sur le site' : 'Go to the site' }}
  113.                                 </a>
  114.                             </div>
  115.                         </div>
  116.                     {% endfor %}
  117.                 </div>
  118.                 <div id="containerPartnerInfo">
  119.                     {% for company in companies %}
  120.                         <div class="_brand-descr col-md-12 infos-partner mt-3 info-{{ company.id }}" data-id="{{ company.id }}" id="infos-{{ company.id }}">
  121.                             <p class="grey">{{ (locale == 'fr') ? company.description|raw : company.descriptionEN|raw }}</p>
  122.                             <a target="_blank" href="{{ company.link }}" class="gold font-weight-bold">
  123.                                 {{ (locale == 'fr') ? 'Aller sur le site' : 'Go to the site' }}
  124.                             </a>
  125.                         </div>
  126.                     {% endfor %}
  127.                 </div>
  128.             </div>
  129.         </div>
  130.     </section>
  131.     <!-- for scroll -->
  132.     <div style='height:70px' id="scrollToMission"></div>
  133.     <section class="block-mission" id="missionBlock">
  134.         <div class="col-md-12 col-xl-10 m-auto mision_block_wrapp">
  135.             <div class="row">
  136.                 <div class="col-md-12 col-xl-2 no-responsive"></div>
  137.                 <div class="nav flex-column nav-pills pills-resp row-responsive responsive" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  138.                     <a class="nav-link active vision " id="v-pills-home-tab-resp" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
  139.                         {{ (locale == 'fr') ? blockVision.title : blockVision.titleEN }}
  140.                     </a>
  141.                     <a class="nav-link mission " id="v-pills-profile-tab-resp" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
  142.                         {{ (locale == 'fr') ? blockMission.title : blockMission.titleEN }}
  143.                     </a>
  144.                 </div>
  145.                 <div class="col-md-12 col-xl-5 pr-0 position-relative" id="bgObjectifs">
  146.                     <div class="rectangle-gold top-left bg-gold position-absolute no-responsive" style="width:200px;height:63px;top:-63px;left:-200px;"></div>
  147.                 </div>
  148.                 <div class="col-md-12 col-xl-5 pl-0 pb-5">
  149.                     <div class="nav flex-column nav-pills no-responsive" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  150.                         <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
  151.                             {{ (locale == 'fr') ? blockVision.title : blockVision.titleEN }}
  152.                         </a>
  153.                         <a class="nav-link title-vision" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
  154.                             {{ (locale == 'fr') ? blockMission.title : blockMission.titleEN }}
  155.                         </a>
  156.                     </div>
  157.                     <div class="desc mt-3">
  158.                         <div class="tab-content text-vision" id="v-pills-tabContent">
  159.                             <div class="tab-pane v-pills fade show active vision" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
  160.                                 <div class="pills-mission ">
  161.                                     {{ (locale == 'fr') ? blockVision.text|raw : blockVision.textEN|raw }}
  162.                                 </div>
  163.                             </div>
  164.                             <div class="tab-pane v-pills  fade mission " id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
  165.                                 <div class="pills-mission ">{{ (locale == 'fr') ? blockMission.text|raw : blockMission.textEN|raw }}</div>
  166.                             </div>
  167.                         </div>
  168.                     </div>
  169.                 </div>
  170.             </div>
  171.         </div>
  172.     </section>
  173.     <section class="mt-5" id="groupBlock">
  174.         <div class="row p-0 pt-5 w-100 m-0">
  175.             <div class="col-md-12 col-xl-4 groupBlock">
  176.                 <div class="row">
  177.                     <div class="col-md-12 col-xl-5 p-0"></div>
  178.                     <div class="col-md-12 col-xl-7 p-0 pb-5 no-padding-responsive group-title">
  179.                         <div class=" white pr-4 pl-4 pb-4 groupe-desc block-group">
  180.                             <h3 class="white">{{ (locale == 'fr') ? blockGroup.title : blockGroup.titleEN }}</h3>
  181.                             <div>{{ (locale == 'fr') ? blockGroup.text|raw : blockGroup.textEN|raw }}</div>
  182.                         </div>
  183.                     </div>
  184.                 </div>
  185.             </div>
  186.             <div class="col-md-12 col-xl-1 no-responsive group-right-block"></div>
  187.             <div class="col-md-12 col-xl-7 pb-5 row image-news row-responsive">
  188.                 <div class="col-6 col-sm-6 col-md-6 col-xl-5 position-relative group overflow-hidden group-block1 bg-selected" id="groupblock1" style="background:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),url({{ asset('img/news1.jpg') }})no-repeat center;background-blend-mode:saturation;background-size:cover">
  189.                     <div class="group-detail active bg-grey-light text-center">
  190.                         <img data-group="1" src="{{ asset('img/emilie-webert.png') }}" class="mt-2 mb-3" style="height:35px">
  191.                         <div class="detail pt-3 grey no-responsive">
  192.                             <div>{{ (locale == 'fr') ? groupBlock1.text|raw : groupBlock1.textEN|raw }}</div>
  193.                             <a href="https://www.emile-weber.lu/fr/societe.html#societe" target="_blank" class="gold font-weight-bold">{{ (locale == 'fr') ? 'En savoir plus' : 'Find out more' }}</a>
  194.                         </div>
  195.                     </div>
  196.                     <div id="triangle-code"></div>
  197.                 </div>
  198.                 <div class="col-md-1 no-responsive group-interblocks"></div>
  199.                 <div class="col-6 col-sm-6 col-md-6 col-xl-5 position-relative group overflow-hidden group-block1" id="groupblock2" style="background:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),url({{ asset('img/news2.jpg') }})no-repeat center;background-blend-mode:saturation;background-size:cover">
  200.                     <div class="group-detail bg-grey-light text-center">
  201.                         <img data-group="2" src="{{ asset('img/slg-logo.png') }}" class="mt-2 mb-3" style="height:57px">
  202.                         <div class="detail pt-3 grey no-responsive">
  203.                             <div>{{ (locale == 'fr') ? groupBlock2.text|raw : groupBlock2.textEN|raw }}</div>
  204.                             <a href="https://www.slg.lu/" target="_blank" class="gold font-weight-bold">{{ (locale == 'fr') ? 'En savoir plus' : 'Find out more' }}</a>
  205.                         </div>
  206.                     </div>
  207.                     <div id="triangle-code-second"></div>
  208.                 </div>
  209.             </div>
  210.             <div class="group-container-resp">
  211.                 <div class="detail-group-responsive">
  212.                     <div id="group1">{{ (locale == 'fr') ? groupBlock1.text|raw : groupBlock1.textEN|raw }}</div>
  213.                     <div id="group2">{{ (locale == 'fr') ? groupBlock2.text|raw : groupBlock2.textEN|raw }}</div>
  214.                 </div>
  215.             </div>
  216.         </div>
  217.     </section>
  218.     <section class="team-list" id="teamBlock">
  219.         <div class="row p-0 pt-5 w-100 m-0">
  220.             <div class="col-md-4">
  221.             </div>
  222.             <div class="col-md-12 col-xl-6 pb-5 row pb-0-responsive">
  223.                 <div class="col-md-12 col-xl-4 p-0">
  224.                     <div class="big-title position-relative">
  225.                         <div class="rectangle-gold bottom-left bg-gold no-responsive"></div>
  226.                         <div class="square-title bg-grey d-flex align-items-end p-3">
  227.                             <h3 class="white">{{ (locale == 'fr') ? blockTeam.title : blockTeam.titleEN }}</h3>
  228.                         </div>
  229.                     </div>
  230.                 </div>
  231.                 <div class="col-md-12 col-lg-12 col-xl-10 p-5 team-text">
  232.                     <div class="text-subtitle">{{ (locale == 'fr') ? blockTeam.text|raw : blockTeam.textEN|raw }}</div>
  233.                 </div>
  234.             </div>
  235.         </div>
  236.     </section>
  237.     <section class="team position-relative">
  238.         <div class="col-md-12 col-lg-10 col-xl-10 m-auto row justify-content-between team-section" id="teamList">
  239.             {% for member in members %}
  240.                 <div class="card col-md-3 border-0 p-3" style="{% if loop.index is even %}margin-top:100px;{% endif %} ;padding:0;">
  241.                     <div class="card-img-top position-relative" style="background:url({% if member.image %}{{ asset(image_member_dir ~ member.image) }}{% else %}{{ asset('img/default-user.png') }}{% endif %})no-repeat center,#EFF3F5;background-size:cover">
  242.                         <a href="mailto:{{ member.email }}" class="envelop-member bg-gold position-absolute d-flex justify-content-center align-items-center" style="width:35px;height:35px;bottom:0;right:0">
  243.                             <img src="{{ asset('img/envelop-member.svg') }}">
  244.                         </a>
  245.                     </div>
  246.                     <div class="card-body bg-grey-light">
  247.                         <h5 class="card-title dark-grey font-weight-bold mb-0 team-name">{{ member.firstname }} {{ member.lastname }}</h5>
  248.                         <span class="gold font-n-bold team-position">{{ member.work }}</span>
  249.                         <div class="card-text grey mt-4">{{ (locale == 'fr') ? member.description|raw : member.descriptionEN|raw }}</div>
  251.                         <p class="card-bottom-line"><a href="tel:+{{ member.prefixPhone }}{{ member.phone }}" class="font-bold dark-grey link-phone">Tel : +{{ member.prefixPhone }} {{ member.phone }}</a></p>
  253.                     </div>
  254.                 </div>
  255.             {% endfor %}
  256.         </div>
  257.     </section>
  258.     <section class="join-us" id="joinBlock">
  259.         <div class="bg-gold w-100 responsive" style="height:60px;"></div>
  260.         <div class="row col-md-12 col-lg-10 col-xl-10 m-auto p-0 pt-5 w-100 m-0 wrapp-bg-join-block no-padding">
  261.             <div class="col-md-12 col-xl-4">
  262.                 <div class="row">
  263.                     <div class="col-md-12 col-xl-12 p-0 pb-5">
  264.                         <div class="position-relative bg-join-block" style="background:url({% if blockJoin.image %}{{ asset(image_member_dir) ~ blockJoin.image }}{% else %}{{ asset('img/join-us.jpg') }}{% endif %})no-repeat center;background-size:cover;height:430px;filter: saturate(70%);">
  265.                             <div class="rectangle-gold top-right vertical bg-gold no-responsive"></div>
  266.                         </div>
  267.                     </div>
  268.                 </div>
  269.             </div>
  270.             <div class="col-md-12 col-xl-9 pb-5 row desc-job-list">
  271.                 <div class="col-md-12 col-xl-4 pt-5 pl-5 pr-0">
  272.                     <h4 class="grey join-title">{{ (locale == 'fr') ? blockJoin.title : blockJoin.titleEN }}</h4>
  273.                     <div class="mt-4 pr-5 join-txt">{{ (locale == 'fr') ? blockJoin.text|raw : blockJoin.textEN|raw }}</div>
  274.                     <p class="grey-light responsive center-mobile">{{ jobs|length }}
  275.                         {% if jobs|length > 1 %}
  276.                             {{ (locale == 'fr') ? 'postes disponibles' : 'positions available' }}
  277.                         {% else %}
  278.                             {{ (locale == 'fr') ? 'poste disponible' : 'position available' }}
  279.                         {% endif %}
  280.                     </p>
  281.                 </div>
  282.                 <p class="grey-light no-responsive dark-grey position-absolute" style="top:0;right:120px;">{{ jobs|length }}
  283.                     {% if jobs|length > 1 %}
  284.                         {{ (locale == 'fr') ? 'postes disponibles' : 'positions available' }}
  285.                     {% else %}
  286.                         {{ (locale == 'fr') ? 'poste disponible' : 'position available' }}
  287.                     {% endif %}
  288.                 </p>
  289.                 <div class="col-md-12 col-xl-8 row" id="jobList">
  290.                     {% for job in jobs %}
  291.                         <div class="col-md-12 col-xl-6 pt-5">
  292.                             <div class="bg-dark-grey p-4 d-flex flex-column justify-content-between position-relative">
  293.                                 <div class="position-absolute share-icon bg-gold p-2 d-flex justify-content-around">
  294.                                     <div class="share-hidden">
  295.                                         <a href="mailto:?subject=Cette offre d’emploi pourrait vous intéresser&body=Cette offre d’emploi située à {{ job.location }} pourrait vous intéresser : {{ job.link }}" style="height:32px!important;width:40px"><img src="{{ asset('img/icon-envelop.svg') }}" style="height:15px;"></a>
  296.                                         <a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url={{ job.link }}" style="height:32px!important;width:40px"><img src="{{ asset('img/icon-linkedin.svg') }}" style="height:15px;"></a>
  297.                                     </div>
  298.                                     <a href="" style="width:40px;height:40px!important;" class="d-flex justify-content-center align-items-center share-link"><img src="{{ asset('img/icon-share.svg') }}"></a>
  299.                                 </div>
  300.                                 <h4 class="white">{{ job.title }}</h4>
  301.                                 <div class="grey-medium">{{ job.location }}</div>
  302.                                 <p class="white">{{ job.description|u.truncate(80, '...')|nl2br }}</p>
  303.                                 <a target="_blank" href="{{ job.link }}" class="gold mt-5 offer-job-link">{{ (locale == 'fr') ? 'Postuler à cette offre' : 'Apply for this offer' }}</a>
  304.                             </div>
  305.                         </div>
  306.                     {% endfor %}
  307.                 </div>
  308.             </div>
  309.         </div>
  310.         <div id="scrollAgencies"></div>
  311.     </section>
  312.     <section class="map-block" id="mapBlock">
  313.         <div class="row col-md-12 col-lg-12 col-xl-10 m-auto no-padding">
  314.             <div class="col-md-12 col-xl-4 top-left big bg-gold d-flex justify-content-center p-3 block-agences">
  315.                 <h3 class="white">{{ (locale == 'fr') ? blockAgency.title : blockAgency.titleEN }}</h3>
  316.             </div>
  317.             <div class="col-md-8 no-responsive"></div>
  318.         </div>
  319.         <div class="row col-md-12 col-lg-10 col-xl-10 m-auto no-responsive no-padding">
  320.             <div class="col-md-4 d-flex justify-content-start align-items-end block-agences">
  321.             </div>
  322.             <div class="col-md-8 bg-dark-grey p-4 white position-relative block-agences">
  323.                 <p class="mb-0">{{ (locale == 'fr') ? blockAgency.text|raw : blockAgency.textEN|raw }}</p>
  324.             </div>
  325.         </div>
  326.         <div class="col-md-12 col-lg-10 col-xl-10 m-auto pb-5 p-0 p-3 contain-form-responsive">
  327.             <form id="filterMapResponsive" class="col-md-12 d-flex justify-content-around align-items-baseline mt-4 responsive">
  328.                 <select name="filter" id="form-companies-resp">
  329.                     <option value selected>{{ (locale == 'fr') ? 'Filtrer par réseau d’agences' : 'Filter by branch network' }}</option>
  330.                     {% for company in companies %}
  331.                         <option value="{{ company.id }}">{{ company.name }}</option>
  332.                     {% endfor %}
  333.                 </select>
  334.             </form>
  335.             <div class="row">
  336.                 <div class="col-md-3 d-flex align-items-center">
  337.                     <span class="grey p-3 font-weight-bold agence-filter">{{ (locale == 'fr') ? 'Filtrer par réseau d’agences' : 'Filter by branch network' }}</span>
  338.                 </div>
  339.                 <div class="col-md-9">
  340.                     <form id="filterMap" class="col-md-12 d-flex justify-content-around align-items-baseline mt-4 no-responsive">
  341.                         {% for company in companies %}
  342.                             <div class="partner{{ loop.index }} col-md-3 text-center _brand">
  343.                                 <input type="radio" id="partner{{ loop.index }}" class="company-check" value="{{ company.id }}" name="filter"/>
  344.                                 <label for="partner{{ loop.index }}" class="checker">
  345.                                     <img class="_logo-brand" src="{{ asset(image_member_dir ~ company.logo) }}" style="cursor:pointer;">
  346.                                 </label>
  347.                             </div>
  348.                         {% endfor %}
  349.                     </form>
  350.                 </div>
  351.             </div>
  352.         </div>
  353.         <div id="map" class="col-md-12 col-lg-10 col-xl-10 m-auto">
  354.         </div>
  355.         <div id="contactEncre"></div>
  356.     </section>
  357.     <section id="contact">
  358.         <div class="col-md-12 col-lg-10 col-xl-10 m-auto row" style="z-index:9">
  359.             <div class="col-md-4 contact-infos">
  360.                 <h3 class="grey">{{ (locale == 'fr') ? blockContact.title : blockContact.titleEN }}</h3>
  361.                 <p class="mt-5 dark-grey">
  362.                     {{ (locale == 'fr') ? blockContact.text|raw : blockContact.textEN|raw }}
  363.                 </p>
  364.             </div>
  365.             <div class="col-md-8">
  366.                 {{ form_start(form, {'attr': {'id': 'contactForm'}}) }}
  367.                 <div class="row">
  368.                     <div class="col-md-7 bg-grey p-4 contact-form">
  369.                         <div class="row mt-4 form-field">
  370.                             <div class="col-md-6">
  371.                                 {{ form_widget(form.lastname) }}
  372.                             </div>
  373.                             <div class="col-md-6">
  374.                                 {{ form_widget(form.firstname) }}
  375.                             </div>
  376.                         </div>
  377.                         <div class="row mt-5 form-field">
  378.                             <div class="col-md-6">
  379.                                 {{ form_widget(form.phone) }}
  380.                             </div>
  381.                             <div class="col-md-6">
  382.                                 {{ form_widget(form.email) }}
  383.                             </div>
  384.                         </div>
  385.                         <div class="row mt-5 form-field">
  386.                             <div class="col-md-12">
  387.                                 {{ form_widget(form.company) }}
  388.                             </div>
  389.                         </div>
  390.                         <div class="col-md-5 bg-grey-light p-3 field-responsive form-field textarea-no-responsive">
  391.                             <textarea id="contact_message" name="contact[message]" placeholder="Votre message"></textarea>
  392.                         </div>
  393.                         <div class="container-btn d-flex justify-content-between mt-4 form-field">
  394.                             <div id="messageForm" style="color:greenyellow"></div>
  395.                             <button type="submit" class="btn-inform grey-light font-weight-bold no-responsive mt-3">
  396.                                 <img src="{{ asset('img/icon-left-button.svg') }}">
  397.                                 {{ (locale == 'fr') ? 'Envoyer' : 'Send' }}
  398.                             </button>
  399.                             <button type="submit" class="btn-inform white bg-gold font-weight-bold responsive">
  400.                                 {{ (locale == 'fr') ? 'Envoyer' : 'Send' }}
  401.                             </button>
  402.                         </div>
  403.                     </div>
  404.                     <div class="col-md-5 bg-grey-light p-3 contact-message field-no-responsive">
  405.                         {{ form_widget(form.message) }}
  406.                     </div>
  407.                 </div>
  408.                 {{ form_end(form) }}
  409.             </div>
  410.         </div>
  411.     </section>
  412. {% endblock %}
  413. {% block javascripts %}
  414.     <script>
  415.         // Entreprises Notre réseau
  416.         let companies = document.getElementsByClassName('company-single');
  417.         let allInfos = document.getElementsByClassName('infos-partner');
  418.     </script>
  419.     <script>
  420.         let vision = document.getElementById('v-pills-home-tab');
  421.         let mission = document.getElementById('v-pills-profile-tab');
  422.         let visionResponsive = document.getElementById('v-pills-home-tab-resp');
  423.         let missionResponsive = document.getElementById('v-pills-profile-tab-resp');
  424.         let bg = document.getElementById('bgObjectifs');
  425.         mission.addEventListener('click', () => {
  426.             bg.style.background = `url({{ asset(image_member_dir) ~ blockMission.image }})no-repeat center right`;
  427.             bg.style.backgroundSize = 'cover';
  428.         });
  429.         vision.addEventListener('click', () => {
  430.             bg.style.background = `url({{ asset(image_member_dir) ~ blockVision.image }})no-repeat center`;
  431.             bg.style.backgroundSize = 'cover';
  432.         });
  433.         missionResponsive.addEventListener('click', () => {
  434.             bg.style.background = `url({{ asset(image_member_dir) ~ blockMission.image }})no-repeat center right`;
  435.             bg.style.backgroundSize = 'cover';
  436.         });
  437.         visionResponsive.addEventListener('click', () => {
  438.             bg.style.background = `url({{ asset(image_member_dir) ~ blockVision.image }})no-repeat center`;
  439.             bg.style.backgroundSize = 'cover';
  440.         });
  441.         document.getElementById('btnMission').addEventListener('click', () => {
  442.             if (!document.getElementById('v-pills-profile-tab').classList.contains('active')) {
  443.                 document.getElementById('v-pills-profile-tab').classList.add('active');
  444.                 document.getElementById('v-pills-profile').classList.remove('fade');
  445.                 document.getElementById('v-pills-profile').classList.add('show');
  446.                 document.getElementById('v-pills-profile').classList.add('active');
  447.             }
  448.             document.getElementById('v-pills-home-tab').classList.remove('active');
  449.             document.getElementById('v-pills-home').classList.remove('active');
  450.         })
  451.         document.getElementById('btnVision').addEventListener('click', () => {
  452.             if (!document.getElementById('v-pills-home-tab').classList.contains('active')) {
  453.                 document.getElementById('v-pills-home-tab').classList.add('active');
  454.                 document.getElementById('v-pills-home').classList.remove('fade');
  455.                 document.getElementById('v-pills-home').classList.add('show');
  456.                 document.getElementById('v-pills-home').classList.add('active');
  457.             }
  458.             document.getElementById('v-pills-profile-tab').classList.remove('active');
  459.             document.getElementById('v-pills-profile').classList.remove('active');
  460.         })
  461.         const uri = location.pathname.substring(1);
  462.         if (uri === 'condition-generales') {
  463.             $('#modal_cgu').modal('show')
  464.         }
  465.         if (uri === 'politique-confidentialite') {
  466.             $('#modal_politique').modal('show')
  467.         }
  468.         if (uri === 'mentions-legales') {
  469.             $('#modal_mention').modal('show')
  470.         }
  471.     </script>
  472. {% endblock %}