templates/home/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% use "home/home_campus.html.twig" with javascript as javascript_campus, content as section_campus %}
  3. {% block page_contents %}
  4.   <section class="section section-home-top position-relative pt-xl-5 pt-4">
  5.     <div class="container position-relative">
  6.       <div class="row">
  7.         <div class="col-lg-6">
  8.           <div class="section-about mb-xl-5 mb-4" data-aos='fade-right'>
  9.             <h1 class="d-none">{% trans %}ÉSTIAM : formation IT & métiers de demain{% endtrans %}</h1>
  10.             <div class="section-title text-white mb-4"><span>/</span> {% trans %}Qui sommes nous ?{% endtrans %}</div>
  11.             <div class="a-video position-relative" style="background: url({{ asset('assets/images/home/poster.webp') }}?v=1) no-repeat center; background-size: cover;">
  12.               <div class="position-absolute l-0 t-0 w-100 h-100 d-flex align-items-center justify-content-center" style="z-index: 1;">
  13.                 <div class="play-btn d-inline-flex align-items-center justify-content-center cursor" data-src='https://www.youtube.com/embed/-ivu5P-tuP4?autoplay=1'><i class="fa-solid fa-play"></i></div>
  14.               </div>
  15.               <div class="embed-responsive embed-responsive-16by9 hvr-glow" style="background: url({{ asset('assets/images/home/poster.webp') }}) no-repeat center; background-size: cover;">
  16.                 <iframe class="play-iframe" class="embed-responsive-item" src="" allow='autoplay' allowfullscreen style="opacity: 0.01;"></iframe>
  17.               </div>
  18.             </div>
  19.             {% if jpos and jpos is not empty %}
  20.             <div class="a-content p-4">
  21.               <p class="text-purple font-weight-bold font-20">Nouvelle rentrée, nouveaux locaux : ÉSTIAM déménage !<br/>
  22.               Découvrez notre nouveau campus parisien ➡️ En savoir plus <a href="/fr/actualites/estiam-demenage-a-paris-decouvrez-notre-nouveau-campus-pour-la-rentree-2025-2026-140" target="_blank" class="font-weight-bold text-dark-purple"><u>ici</u></a>.</p>
  23.               <div class="keepEditorStyle text-justify">
  24.                 <p><strong>ÉSTIAM, une démarche pédagogique structurante avec un réel encadrement</strong></p>
  25.                 <p class="mb-0">Un parcours de formation alliant pragmatisme, modernité et qualité :</p>
  26.                 <ul>
  27.                   <li>Une formation complète qui développe non seulement une expertise technologique, mais aussi un comportement professionnel, managérial, leadership et sens de l’entreprise</li>
  28.                   <li>Des étudiants fortement encadrés par leurs professeurs tous issus du monde de l’entreprise</li>
  29.                   <li>Un programme en parfaite adéquation avec le marché de l’emploi</li>
  30.                   <li>Une immersion professionnelle progressive</li>
  31.                 </ul>
  32.               </div>
  33.             </div>
  34.             <div class="a-link text-center">
  35.               <a href="{{ path('etudier_estiam') }}">{% trans %}En savoir plus{% endtrans %}<i class="far fa-arrow-right ml-2"></i></a>
  36.             </div>
  37.             {% endif %}
  38.           </div>
  39.         </div>
  40.         <div class="col-lg-6">
  41.           <div class="section-prochain mb-xl-5 mb-4" data-aos='fade-left'>
  42.             {% if jpos and jpos is not empty %}
  43.             <div class="section-title text-white mb-4"><span>/</span> {% trans %}Prochains événements{% endtrans %}</div>
  44.             <div class="p-list bg-white py-3 px-lg-4">
  45.               {% for jpo in jpos %}
  46.                 {% set urlJpo = path('open_day.inscription',{ slug:jpo.slug, id:jpo.id }) %}
  47.                 <div class="p-item d-flex">
  48.                   <div class="p-img">
  49.                     <div class="position-relative">
  50.                       <img src="{{ asset('assets/images/no-img/jpo.jpg') }}" />
  51.                       <div class="position-absolute w-100 h-100 l-0 t-0 text-center d-flex flex-column justify-content-center bg-purple text-white radius-10">
  52.                         <div class="p-time py-1 mb-auto">
  53.                           <span class="line-2 font-30 font-weight-bold line-height-normal d-inline-block">{{ jpo.date|formatDateLocale('d') }}</span>
  54.                           <span class="line-3 text-uppercase line-height-normal d-inline-block ml-2">{{ jpo.date|formatDateLocale('MMMM')[:3] }}</span>
  55.                         </div>
  56.                         <span class="font-weight-bold font-20">{{ jpo.hour }}h{{ jpo.minute }}</span>
  57.                         <div class="mt-auto">
  58.                           {% if jpo.campaign %}
  59.                           <div class="p-campaign bg-orange text-white font-14 text-center py-1 px-1 line-height-normal" {{ jpo.campaign.id == 11 ? 'style="font-size: 0.8rem"' : ''}}>
  60.                             {{ jpo.campaign.name }}
  61.                           </div>
  62.                           {% else %}
  63.                           &nbsp;
  64.                           {% endif %}
  65.                         </div>
  66.                       </div>
  67.                     </div>
  68.                   </div>
  69.                   <div class="p-content ml-3 flex-1">
  70.                     <div class="d-flex flex-column h-100">
  71.                       <div class="p-name mb-auto line-height-normal">
  72.                         <a href="{{ path('open_day') }}?scroll=jpo-{{ jpo.id }}">{{ jpo.name }}</a>
  73.                       </div>
  74.                       <div class="d-flex flex-wrap align-items-center text-dark-purple mb-1">
  75.                         <i class="fa-solid fa-location-dot text-orange font-14 mr-2"></i>
  76.                         {% if jpo.campuses|length >= campuses|length %}
  77.                           {% trans %}Tous les campus{% endtrans %}
  78.                         {% else %}
  79.                           {% for campus in jpo.campuses|slice(0, 3) %}
  80.                             <span>{{ campus.name }}{% if not loop.last %},&nbsp{% endif %}</span>
  81.                             {{ jpo.campuses|length > 3 and loop.last   ? '&nbsp...' : '' }}
  82.                           {% endfor %}
  83.                         {% endif %}
  84.                       </div>
  85.                       <div class="p-link mt-auto">
  86.                         <a href="{{ path('open_day') }}?scroll=jpo-{{ jpo.id }}" class="link-gradient py-1 px-2">{% trans %}Je participe{% endtrans %}<i class="far fa-arrow-right"></i></a>
  87.                       </div>
  88.                     </div>
  89.                   </div>
  90.                 </div>
  91.               {% endfor %}
  92.             </div>
  93.             {% else %}
  94.             <div class="no-jpo bg-white">
  95.               <div class="a-content px-lg-4 pt-lg-4 pt-0 pb-4">
  96.                 <p class="text-purple font-weight-bold font-20">Nouvelle rentrée, nouveaux locaux : ÉSTIAM déménage !<br/>
  97.                 Découvrez notre nouveau campus parisien ➡️ En savoir plus <a href="/fr/actualites/estiam-demenage-a-paris-decouvrez-notre-nouveau-campus-pour-la-rentree-2025-2026-140" class="font-weight-bold text-dark-purple"><u>ici</u></a>.</p>
  98.                 <div class="keepEditorStyle text-justify">
  99.                   <p><strong>ÉSTIAM, une démarche pédagogique structurante avec un réel encadrement</strong></p>
  100.                   <p class="mb-0">Un parcours de formation alliant pragmatisme, modernité et qualité :</p>
  101.                   <ul>
  102.                     <li>Une formation complète qui développe non seulement une expertise technologique, mais aussi un comportement professionnel, managérial, leadership et sens de l’entreprise</li>
  103.                     <li>Des étudiants fortement encadrés par leurs professeurs tous issus du monde de l’entreprise</li>
  104.                     <li>Un programme en parfaite adéquation avec le marché de l’emploi</li>
  105.                     <li>Une immersion professionnelle progressive</li>
  106.                   </ul>
  107.                 </div>
  108.               </div>
  109.               <div class="a-link text-center">
  110.                 <a href="{{ path('etudier_estiam') }}">{% trans %}En savoir plus{% endtrans %}<i class="far fa-arrow-right ml-2"></i></a>
  111.               </div>
  112.             </div>
  113.             {% endif %}
  114.           </div>
  115.         </div>
  116.       </div>
  117.     </div>
  118.   </section>
  120.   <section class="section section-program bg-light pt-5 pb-4">
  121.     <div class="container">
  122.       <div class="row">
  123.         <div class="col-xl-9 col-lg-11 mx-auto text-center mb-4" data-aos='fade-down'>
  124.           <div class="section-title mb-4"><span>/</span> {% trans %}Programmes{% endtrans %}</div>
  125.           <p class="mx-4">{% trans %}Le parcours ÉSTIAM est un programme en 5 ans accessible à différents niveaux et qui prépare à des titres 
  126.           enregistrés par l'État au Répertoire national des certifications professionnelles (RNCP) à chaque étape de la formation.{% endtrans %}</p>
  127.         </div>
  128.       </div>
  129.       <div class="row">
  130.         <div class="col-lg-4 col-md-6 mb-lg-5 mb-4">
  131.           <div class="p-item" data-aos='zoom-in'>
  132.             <a href="{{ path('level', { level: 'bts' }) }}" class="position-relative d-block">
  133.               <img class="position-relative w-100" src="{{ asset('assets/images/home/program-1.webp') }}" alt="Formation en 2 ans après le bac"/>
  134.               <div class="p-content position-absolute w-100 h-100 t-0 l-0 text-center py-3 px-3 d-flex flex-column">
  135.                 <div class="show-line">
  136.                   <div class="line-1">BTS</div>
  137.                   <div class="line-2">Formation en 2 ans après le bac</div>
  138.                 </div>
  139.                 <div class="hide-line py-5 px-4">
  140.                   <div class="hl-1 text-center mb-4 font-weight-bold">BTS Services Informatiques aux Organisations SLAM/SISR</div>
  141.                   <div class="hl-2 text-left">
  142.                     <div class="font-weight-bold mb-1">BAC +2 – Titre RNCP de Niveau 5</div>
  143.                     <div class="mb-1">Formation en alternance dès la 1ère année : 3 jours par semaine en entreprise, 2 jours à l'école</div>
  144.                     <div class="font-weight-bold">24 mois</div>
  145.                   </div>
  146.                 </div>
  147.               </div>
  148.               <div class="p-link position-absolute r-0 b-0">
  149.                 <span>
  150.                   <span></span>
  151.                 </span>
  152.               </div>
  153.             </a>
  154.           </div>
  155.         </div>
  156.         <div class="col-lg-4 col-md-6 mb-lg-5 mb-4">
  157.           <div class="p-item" data-aos='zoom-in'>
  158.             <a href="{{ path('level', { level: 'bachelor' }) }}" class="position-relative d-block">
  159.               <img class="position-relative w-100" src="{{ asset('assets/images/home/program-2.webp') }}" alt="Formation en 3 ans après le bac ou en 1 an après un bac+2"/>
  160.               <div class="p-content position-absolute w-100 h-100 t-0 l-0 text-center py-3 px-3 d-flex flex-column">
  161.                 <div class="show-line">
  162.                   <div class="line-1">Bachelor (Bac+3)</div>
  163.                   <div class="line-2">Formation en 3 ans après le bac ou en 1 an après un bac+2</div>
  164.                 </div>
  165.                 <div class="hide-line py-5 px-4">
  166.                   <div class="hl-1 text-center mb-4 font-weight-bold">Deviens <br/>Responsable de la protection des données des organisations</div>
  167.                   <div class="hl-2 text-left">
  168.                     <div class="font-weight-bold mb-1">BAC +3 – Titre RNCP de Niveau 6</div>
  169.                     <div class="mb-1">Cursus en initial et formation possible en alternance la 3ème année : 4 jours par semaine en entreprise, 1 jour à l'école</div>
  170.                     <div class="font-weight-bold">36 mois</div>
  171.                   </div>
  172.                 </div>
  173.               </div>
  174.               <div class="p-link position-absolute r-0 b-0">
  175.                 <span>
  176.                   <span></span>
  177.                 </span>
  178.               </div>
  179.             </a>
  180.           </div>
  181.         </div>
  182.         <div class="col-lg-4 col-md-6 mb-lg-5 mb-4">
  183.           <div class="p-item" data-aos='zoom-in'>
  184.             <a href="{{ path('level', { level: 'mba' }) }}" class="position-relative d-block">
  185.               <img class="position-relative w-100" src="{{ asset('assets/images/home/program-3.webp') }}" alt="Formation en 2 ans après le Bachelor"/>
  186.               <div class="p-content position-absolute w-100 h-100 t-0 l-0 text-center py-3 px-3 d-flex flex-column">
  187.                 <div class="show-line">
  188.                   <div class="line-1">MSc & MBA (Bac+5)</div>
  189.                   <div class="line-2">Formation en 2 ans après le Bachelor</div>
  190.                 </div>
  191.                 <div class="hide-line py-5 px-4">
  192.                   <div class="hl-1 text-center mb-4 font-weight-bold">Deviens manager de projets en informatique</div>
  193.                   <div class="hl-2 text-left">
  194.                     <div class="font-weight-bold mb-1">BAC +5 – Titre RNCP de Niveau 7</div>
  195.                     <div class="mb-1">Formation en alternance dès la 3ème année : 4 jours par semaine en entreprise, 1 jour à l'école</div>
  196.                     <div class="font-weight-bold">60 mois</div>
  197.                   </div>
  198.                 </div>
  199.               </div>
  200.               <div class="p-link position-absolute r-0 b-0">
  201.                 <span>
  202.                   <span></span>
  203.                 </span>
  204.               </div>
  205.             </a>
  206.           </div>
  207.         </div>
  208.       </div>
  209.     </div>
  210.   </section>
  212.   {% if outStudentVideos %}
  213.     <section class="section section-etudiant py-4">
  214.       <div class="container">
  215.         <div class="row">
  216.           <div class="col-12">
  217.             <div class="section-title mb-4" data-aos='fade-down'><span>/</span> {% trans %}Nos étudiants en parlent{% endtrans %}</div>
  218.           </div>
  219.         </div>
  220.         <div class="row">
  221.           <div class="col-xl-11 mx-auto">
  222.             <div class="row">
  223.               {% for video in outStudentVideos %}
  224.                 <div class="col-lg-4 col-md-6 mb-4" data-aos='zoom-in'>
  225.                   <div class="embed-responsive embed-responsive-16by9 hvr-glow">
  226.                     <iframe class="embed-responsive-item" src="{{ video.video | extractYoutubeId }}?rel=0" allowfullscreen></iframe>
  227.                   </div>
  228.                 </div>
  229.               {% endfor %}
  230.             </div>
  231.           </div>
  232.         </div>
  233.       </div>
  234.     </section>
  235.   {% endif %}
  237.   <section class="section section-news bg-light pt-xl-5 pt-4 pb-4">
  238.     <div class="container">
  239.       <div class="row">
  240.         <div class="col-12">
  241.           <div class="section-title mb-4" data-aos='fade-down'><span>/</span> {% trans %}Actualités{% endtrans %}</div>
  242.         </div>
  243.       </div>
  244.       <div class="row">
  245.         {% include 'news/_news_lasted.html.twig' %}
  246.         <div class="col-12 a-link text-center" data-aos="fade-up">
  247.           <a class="common-btn" href="{{ path('news.index') }}">{% trans %}Voir Toutes Les Actualités{% endtrans %}<i class="far fa-arrow-right ml-2"></i></a>
  248.         </div>
  249.       </div>
  250.     </div>  
  251.   </section>
  253.   <section class="section section-partner pt-5 mb-lg-5 mb-4">
  254.     <div class="container">
  255.       <div class="row">
  256.         <div class="col-12">
  257.           <div class="section-title mb-lg-5 mb-4" data-aos='fade-down'><span>/</span> {% trans %}Partenaires académiques - Partenaires entreprises{% endtrans %}</div>
  258.         </div>
  259.         <div class="col-12 mb-4">
  260.           <div class="d-flex flex-lg-row flex-column partner-group" data-aos="fade-up">
  261.             <div class="p-right flex-1 d-flex align-items-center justify-content-center flex-wrap px-lg-4 mx-lg-5">
  262.               {% for partner in partners %}
  263.                 <div class="p-item hvr-border-fade" title="{{ partner.name }}">
  264.                   <img src="{{ partner.photoUrl }}" alt="{{ partner.name }}">
  265.                 </div>
  266.               {% endfor %}
  267.             </div>
  268.           </div>
  269.         </div>
  270.         <div class="col-12 text-center">
  271.           <div class="p-link" data-aos="fade-up">
  272.             <a href="{{path('habilitations')}}" class="text-center link-gradient d-inline-flex align-items-center justify-content-center">{% trans %}En savoir plus{% endtrans %} <i class="fa-light fa-arrow-right"></i></a>
  273.           </div>
  274.         </div>
  275.       </div>
  276.     </div>
  277.   </section>
  279.   {{ block('section_campus') }}
  281.   <section class="section section-study bg-light pt-lg-5 pb-0 pt-4">
  282.     <div class="container">
  283.       <div class="row">
  284.         <div class="col-12">
  285.           <div class="section-title mb-3" data-aos='fade-down'><span>/</span> {% trans %}Un mois en immersion À l'international{% endtrans %}</div>
  286.         </div>
  287.       </div>
  288.       <div class="row position-relative map-box" data-aos="fade-up">
  289.         <div class="col-12 pt-lg-5 mt-lg-5">
  290.           <div class="block-map">
  291.             <div class="wp-map mx-auto" style="background-image: url({{ asset('assets/images/home/map-abstract.png') }});">
  292.               <div class="areas">
  293.                 <!-- area item usa-->
  294.                 <div class="area area-usa">
  295.                   <div class="inner">
  296.                     <a href="javascript:void(0)" class="circle-btn"></a>
  297.                     <span class="area-line"></span>
  298.                     <span class="area-name">USA</span>
  299.                     <div class="w-data">
  300.                       <div class="pos-list-country columns-5">
  301.                         <img src="{{ asset('assets/images/home/map-usa.jpg') }}" alt="USA">
  302.                       </div>
  303.                     </div>
  304.                   </div>
  305.                 </div>
  306.                 <!-- area item brazil
  307.                 <div class="area area-brazil">
  308.                   <div class="inner">
  309.                     <a href="javascript:void(0)" class="circle-btn"></a>
  310.                     <span class="area-line"></span>
  311.                     <span class="area-name">Brésil</span>
  312.                     <div class="w-data">
  313.                       <div class="pos-list-country columns-5">
  314.                         <img src="{{ asset('assets/images/home/map-brazil.jpg') }}" alt="Brésil">
  315.                       </div>
  316.                     </div>
  317.                   </div>
  318.                 </div>-->
  319.                 <!-- area item luxembourg
  320.                 <div class="area area-luxembourg">
  321.                   <div class="inner">
  322.                     <a href="javascript:void(0)" class="circle-btn"></a>
  323.                     <span class="area-line"></span>
  324.                     <span class="area-name">Luxembourg</span>
  325.                     <div class="w-data">
  326.                       <div class="pos-list-country columns-5">
  327.                         <img src="{{ asset('assets/images/home/map-luxembourg.jpg') }}" alt="Luxembourg">
  328.                       </div>
  329.                     </div>
  330.                   </div>
  331.                 </div>-->
  332.                 <!-- area item Geneve-->
  333.                 <div class="area area-geneve">
  334.                   <div class="inner">
  335.                     <a href="javascript:void(0)" class="circle-btn"></a>
  336.                     <span class="area-line"></span>
  337.                     <span class="area-name">Suisse</span>
  338.                     <div class="w-data">
  339.                       <div class="pos-list-country columns-5">
  340.                         <img src="{{ asset('assets/images/home/map-geneve.jpg') }}" alt="Suisse">
  341.                       </div>
  342.                     </div>
  343.                   </div>
  344.                 </div>
  345.                 <!-- area item india-->
  346.                 <div class="area area-india">
  347.                   <div class="inner">
  348.                     <a href="javascript:void(0)" class="circle-btn"></a>
  349.                     <span class="area-line"></span>
  350.                     <span class="area-name">Inde</span>
  351.                     <div class="w-data">
  352.                       <div class="pos-list-country columns-5">
  353.                         <img src="{{ asset('assets/images/home/map-india.jpg') }}" alt="Inde">
  354.                       </div>
  355.                     </div>
  356.                   </div>
  357.                 </div>
  358.                 <!-- area item japan-->
  359.                 <div class="area area-japan">
  360.                   <div class="inner">
  361.                     <a href="javascript:void(0)" class="circle-btn"></a>
  362.                     <span class="area-line"></span>
  363.                     <span class="area-name">Japon</span>
  364.                     <div class="w-data">
  365.                       <div class="pos-list-country columns-5">
  366.                         <img src="{{ asset('assets/images/home/map-japan.jpg') }}" alt="Japon">
  367.                       </div>
  368.                     </div>
  369.                   </div>
  370.                 </div>
  371.                 <!-- area item cambodge
  372.                 <div class="area area-cambodge">
  373.                   <div class="inner">
  374.                     <a href="javascript:void(0)" class="circle-btn"></a>
  375.                     <span class="area-line"></span>
  376.                     <span class="area-name">Cambodge</span>
  377.                     <div class="w-data">
  378.                       <div class="pos-list-country columns-5">
  379.                         <img src="{{ asset('assets/images/home/map-cambodge.jpg') }}" alt="Cambodge">
  380.                       </div>
  381.                     </div>
  382.                   </div>
  383.                 </div>-->
  384.               </div><!-- /.areas -->
  385.             </div><!-- /.wp-map -->
  386.             <div id="accordionMap" class="accordion pb-4">
  387.               <div class="card cart-usa">
  388.                 <div class="card-header active" id="headingMapUsa">
  389.                   <h5 class="mb-0">
  390.                     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseMapUsa" aria-expanded="true" aria-controls="collapseUsa">USA</button>
  391.                   </h5>
  392.                 </div>
  394.                 <div id="collapseMapUsa" class="collapse show" aria-labelledby="headingMapUsa" data-parent="#accordionMap">
  395.                   <div class="card-body">
  396.                     <img src="{{ asset('assets/images/home/map-usa.jpg') }}" alt="USA">
  397.                   </div>
  398.                 </div>
  399.               </div>
  400.               {# <div class="card cart-brazil">
  401.                 <div class="card-header" id="headingMapBrazil">
  402.                   <h5 class="mb-0">
  403.                     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseMapBrazil" aria-expanded="true" aria-controls="collapseBrazil">Brésil</button>
  404.                   </h5>
  405.                 </div>
  407.                 <div id="collapseMapBrazil" class="collapse " aria-labelledby="headingMapBrazil" data-parent="#accordionMap">
  408.                   <div class="card-body">
  409.                     <img src="{{ asset('assets/images/home/map-brazil.jpg') }}" alt="Brésil">
  410.                   </div>
  411.                 </div>
  412.               </div>
  413.               <div class="card cart-luxembourg">
  414.                 <div class="card-header" id="headingMapLuxembourg">
  415.                   <h5 class="mb-0">
  416.                     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseMapLuxembourg" aria-expanded="true" aria-controls="collapseLuxembourg">Luxembourg</button>
  417.                   </h5>
  418.                 </div>
  420.                 <div id="collapseMapLuxembourg" class="collapse " aria-labelledby="headingMapLuxembourg" data-parent="#accordionMap">
  421.                   <div class="card-body">
  422.                     <img src="{{ asset('assets/images/home/map-luxembourg.jpg') }}" alt="">
  423.                   </div>
  424.                 </div>
  425.               </div> #}
  427.               <div class="card cart-geneve">
  428.                 <div class="card-header" id="headingMapGeneve">
  429.                   <h5 class="mb-0">
  430.                     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseMapGeneve" aria-expanded="true" aria-controls="collapseGeneve">Suisse</button>
  431.                   </h5>
  432.                 </div>
  434.                 <div id="collapseMapGeneve" class="collapse " aria-labelledby="headingMapGeneve" data-parent="#accordionMap">
  435.                   <div class="card-body">
  436.                     <img src="{{ asset('assets/images/home/map-geneve.jpg') }}" alt="Suisse">
  437.                   </div>
  438.                 </div>
  439.               </div>
  441.               <div class="card cart-india">
  442.                 <div class="card-header" id="headingMapIndia">
  443.                   <h5 class="mb-0">
  444.                     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseMapIndia" aria-expanded="true" aria-controls="collapseIndia">Inde</button>
  445.                   </h5>
  446.                 </div>
  448.                 <div id="collapseMapIndia" class="collapse " aria-labelledby="headingMapIndia" data-parent="#accordionMap">
  449.                   <div class="card-body">
  450.                     <img src="{{ asset('assets/images/home/map-india.jpg') }}" alt="Inde">
  451.                   </div>
  452.                 </div>
  453.               </div>
  454.               <div class="card cart-japan">
  455.                 <div class="card-header" id="headingMapJapan">
  456.                   <h5 class="mb-0">
  457.                     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseMapJapan" aria-expanded="true" aria-controls="collapseJapan">Japon</button>
  458.                   </h5>
  459.                 </div>
  461.                 <div id="collapseMapJapan" class="collapse " aria-labelledby="headingMapJapan" data-parent="#accordionMap">
  462.                   <div class="card-body">
  463.                     <img src="{{ asset('assets/images/home/map-japan.jpg') }}" alt="Japon">
  464.                   </div>
  465.                 </div>
  466.               </div>
  467.               {# <div class="card cart-cambodge">
  468.                 <div class="card-header" id="headingMapCambodge">
  469.                   <h5 class="mb-0">
  470.                     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseMapCambodge" aria-expanded="true" aria-controls="collapseCambodge">Cambodge</button>
  471.                   </h5>
  472.                 </div>
  474.                 <div id="collapseMapJapan" class="collapse " aria-labelledby="headingMapCambodge" data-parent="#accordionMap">
  475.                   <div class="card-body">
  476.                     <img src="{{ asset('assets/images/home/map-cambodge.jpg') }}" alt="Cambodge">
  477.                   </div>
  478.                 </div>
  479.               </div> #}
  480.             </div>
  481.           </div><!-- /.block-map -->
  482.         </div>
  483.       </div>
  484.       <div class="row position-relative mt-xl-5">
  485.         <div class="col-md-6 mb-xl-5 mb-4" data-aos="fade-right">
  486.           <div class="embed-responsive embed-responsive-16by9 hvr-glow">
  487.             <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/CnWPBZjk2vw?rel=0" allowfullscreen></iframe>
  488.           </div>
  489.         </div>
  490.         <div class="col-md-6 mb-xl-5 mb-4" data-aos="fade-left">
  491.           <div class="embed-responsive embed-responsive-16by9 hvr-glow">
  492.             <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/I4BJraM6ESU?rel=0" allowfullscreen></iframe>
  493.           </div>
  494.         </div>
  495.       </div>
  496.     </div>
  497.   </section>
  499.   {% if jobs %}
  500.   <section class="section section-offer py-4 mb-4">
  501.     <div class="container">
  502.       <div class="row">
  503.         <div class="col-12">
  504.           <div class="section-title mb-4" data-aos='fade-down'><span>/</span> {% trans %}Offres d’emploi Alternances et stages{% endtrans %}</div>
  505.         </div>
  506.       </div>
  507.       <div class="row">
  508.         {% for job in jobs %}
  509.           {% include 'job_board/_item_job.html.twig' %}
  510.         {% endfor %}
  511.       </div>
  512.       <div class="row">
  513.         <div class="col-12 text-center mt-4" data-aos='zoom-in'>
  514.           <a href="{{path('job_board.index')}}" class="text-center link-gradient d-inline-flex align-items-center justify-content-center">{% trans with {'%totaljob%': totalJob} from 'app' %}Voir toutes les offres (%totaljob%){% endtrans %} <i class="fa-light fa-arrow-right"></i></a>
  515.         </div>
  516.       </div>
  517.     </div>
  518.   </section>
  519.   {% endif %}
  521. {% endblock %}
  522. {% block custom_javascripts %}
  524. {{ block('javascript_campus') }}
  526. <script>function loadScript(a){var b=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.src="https://tracker.metricool.com/resources/be.js",c.onreadystatechange=a,c.onload=a,b.appendChild(c)}loadScript(function(){beTracker.t({hash:"aaccfb29a30a3ac456908d7eefef904f"})});</script>
  528. <script type="text/javascript">
  529. $(document).ready(function(){
  530.   $('.play-btn').click(function() {
  531.     var videoSrc = $(this).data("src"); console.log(videoSrc);
  532.     $(this).parent().removeClass('d-flex').hide();
  533.     $('iframe.play-iframe').removeAttr('style').attr('src',videoSrc);
  534.   });
  535. });
  536. </script>
  537. {% endblock %}