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