templates/templates/homepage.html.twig line 1

Open in your IDE?
  1. {% extends "master.html.twig" %}
  3. {% block meta %}
  4.     {% include "@SuluWebsite/Extension/seo.html.twig" with {
  5.         "seo": extension.seo|default([]),
  6.         "content": content|default([]),
  7.         "urls": urls|default([]),
  8.         "shadowBaseLocale": shadowBaseLocale|default(),
  9.         "defaultLocale": request.defaultLocale|default('de')
  10.     } %}
  11.     <link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css"/>
  12. {% endblock %}
  14. {% block style %}
  15.     <link rel="stylesheet" href="{{ absolute_url(asset("build/website/css/slick.css")) }}">
  16.     <link rel="stylesheet" href="{{ absolute_url(asset("build/website/css/aos.css")) }}">
  17.     <link rel="stylesheet" href="{{ absolute_url(asset("build/website/css/homepage.css")) }}">
  18. {% endblock %}
  20. {% block header_video %}
  21.     <div class="header-bg">
  22.         <div id="player">
  23.             <div style="padding:56.25% 0 0 0; position:relative; height: 52%; width: 100%;">
  24.                 <iframe async src="{{ content.video }}?autoplay=1&loop=1&title=0&byline=0&portrait=0&background=1&mute=1&amp;controls=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
  25.             </div>
  27.         </div>
  28.     </div>
  31. {% endblock %}
  33. {% block typePage %}Homepage
  34. {% endblock %}
  36. {% block ogImages %}/images/logo.png
  37. {% endblock %}
  40. {% block content %}
  42.     {% if content.show_filigrane == "oui" %}
  43.         <div class="filigrane" property="filigrane">{{ content.filigrane }}</div>
  44.     {% endif %}
  45.     <div class="content-campus">
  46.         <h2 data-aos="fade-in" data-aos-delay="250">Campus</h2>
  47.         <p data-aos="fade-in" data-aos-delay="400">Découvrez nos écoles et leurs spécialités</p>
  48.         <div data-aos="fade-in" data-aos-delay="500" property="teaser_campus" class="teaser_campus">
  49.             {% for campus in content.teaser_campus %}
  50.                 <a href="{{ sulu_content_path(campus.url) }}">
  51.                     <div class="btn-campus">
  52.                         <h3>{{ campus.title }}</h3>
  53.                         {% if campus.mediaId %}
  54.                             {% set media = sulu_resolve_media(campus.mediaId, 'fr') %}
  55.                             <div class="bg-campus-contain">
  56.                                 <div class="bg-campus lazy" data-src="{{ media.url }}"></div>
  57.                             </div>
  58.                         {% endif %}
  59.                     </div>
  60.                 </a>
  61.             {% endfor %}
  62.         </div>
  63.     </div>
  64.     <div class="content-formation">
  65.         <h2 data-aos="fade-in" data-aos-delay="250">Les filières</h2>
  66.         <div data-aos="fade-in" data-aos-delay="300" class="controls">
  67.             <div class="left">
  68.                 <i class="far fa-arrow-alt-circle-left"></i>
  69.             </div>
  70.             <div class="right">
  71.                 <i class="far fa-arrow-alt-circle-right"></i>
  72.             </div>
  73.         </div>
  74.         <div data-aos="fade-in" data-aos-delay="400" property="teaser_sectors" id="stacked-cards-block" class="stackedcards stackedcards--animatable init">
  75.             <div class="stackedcards-container" class="card-formation">
  76.                 {% for formation in content.teaser_sectors %}
  78.                     <div>
  79.                         <a class="img-formation" href="{{ sulu_content_path(formation.url) }}">
  80.                             {% if formation.mediaId %}
  81.                                 {% set media = sulu_resolve_media(formation.mediaId, 'fr') %}
  82.                                 <div class="lazy" data-src="{{ media.url }}"></div>
  83.                             {% endif %}
  85.                             <h3>{{ formation.title }}</h3>
  86.                         </a>
  87.                         <div property="article">
  88.                             {{ formation.description|raw }}
  89.                         </div>
  90.                         <button aria-label="more" class="btn">
  91.                             <a href="{{ sulu_content_path(formation.url) }}">En savoir plus</a>
  92.                         </button>
  93.                     </div>
  94.                 {% endfor %}
  95.                 <div class="last-card-formation">
  96.                     <a href="/formations">Voir toutes nos formations</a>
  97.                 </div>
  98.             </div>
  100.         </div>
  101.         <div class="final-state hidden">
  102.             <a href="/formations">Voir toutes nos formations</a>
  103.         </div>
  105.     </div>
  107.     <div class="content-chiffre">
  108.         <h2 data-aos="fade-in" data-aos-delay="200">H3 Campus en chiffres</h2>
  109.         <div class="count-container">
  110.             <div data-aos="fade-in" data-aos-delay="300">
  111.                 <p class="count">{{ content.students }}</p>
  112.                 <p>étudiants</p>
  113.             </div>
  114.             <div data-aos="fade-in" data-aos-delay="350">
  115.                 <p class="count">1970</p>
  116.                 <p>Date de création</p>
  117.             </div>
  118.             <div data-aos="fade-in" data-aos-delay="400">
  119.                 <p class="count">{{ content.campusNumber }}</p>
  120.                 <p>campus</p>
  121.             </div>
  122.             <div data-aos="fade-in" data-aos-delay="450">
  123.                 <p class="count">{{ content.percentStudents }}</p>
  124.                 <p>des jeunes diplomés embauchés</p>
  125.             </div>
  126.         </div>
  127.     </div>
  130.     <div class="content-partenaire">
  131.         <h2 data-aos="fade-in" data-aos-delay="200" class="partenaire">Ils nous font confiance</h2>
  132.         <div data-aos="fade-in" data-aos-delay="400" class="carousel_partenaire">
  133.             {% for logo in content.logo %}
  134.                 <div><img class="logo" src="{{ logo.url }}" alt="Logo Partenaire"/></div>
  135.             {% endfor %}
  136.         </div>
  137.         <div class="nous-rejoindre">
  138.             <h2>Nous rejoindre</h2>
  139.             <a href="https://www.h3campus.fr/depot-candidature/depose-ta-candidature-1" target="_blank">
  140.                 <button aria-label="Candidature " class="btn btn-light-white">Candidater en ligne</a>
  141.             </button>
  142.         </div>
  143.     </div>
  146.     <div class="content-testi">
  147.         <h2 data-aos="fade-in" data-aos-delay="200">Témoignages</h2>
  148.         <div data-aos="fade-in" data-aos-delay="400" class="teaser_testimonials" property="teaser_testimonials">
  149.             {% for testi in content.teaser_testimonials %}
  150.                 <div class="card-testi">
  151.                     <div>
  152.                         <div class="descrip-testi" data-aos="fade-left">
  153.                             <h3 class="title">{{ testi.title }}</h3>
  154.                             {{ testi.description|raw}}
  155.                         </div>
  156.                     </div>
  157.                 </div>
  158.             {% endfor %}
  159.         </div>
  160.         {# <div class="controls-testi">
  161.                             <div class="left">
  162.                                 <i class="far fa-arrow-alt-circle-left"></i>
  163.                             </div>
  164.                             <div class="right">
  165.                                 <i class="far fa-arrow-alt-circle-right"></i>           
  166.                             </div>
  167.                         </div> #}
  168.     </div>
  169.     <div class="content-actu">
  170.         <div class="title" data-aos="fade-right" data-aos-delay="250">
  171.             <h2>Actualités</h2>
  172.         </div>
  173.         <button aria-label="blog" class="btn btn-light" data-aos="fade-left" data-aos-delay="250">
  174.             <a href="/blog" target="_blank">Visiter le blog</a>
  175.         </button>
  176.         <div class="teaser_actus" property="teaser_actus">
  177.             {% for actus in content.teaser_actus %}
  178.                 {% set article = sulu_content_load(actus.id) %}
  179.                 <article data-aos="fade-right" data-aos-delay="400">
  180.                     <a class="img-actu" href="{{ sulu_content_path(actus.url) }}">
  181.                         {% if actus.mediaId %}
  182.                             {% set media = sulu_resolve_media(actus.mediaId, 'fr') %}
  183.                             <div class="image lazy" data-src="{{ media.url }}"></div>
  184.                         {% endif %}
  185.                     </a>
  186.                     <div>
  187.                         <div class="date_actu">{{ article.authored|date("d / m / Y") }}</div>
  188.                         <h3>
  189.                             <a href="{{ sulu_content_path(actus.url) }}">{{ actus.title }}</a>
  190.                         </h3>
  191.                         <button aria-label="more" class="btn btn-light">
  192.                             <a href="{{ sulu_content_path(actus.url) }}">En savoir plus</a>
  193.                         </button>
  194.                     </div>
  195.                 </article>
  196.             {% endfor %}
  197.         </div>
  198.     </div>
  200. {% endblock %}
  202. {% block javascripts %}
  203.     <script type="application/ld+json">
  204.         {
  205.                             "@context": "https://schema.org",
  206.                             "@type": "Organization",
  207.                             "name": "H3 Campus",
  208.                             "url": "https://www.h3campus.fr/",
  209.                             "logo": "https://www.h3campus.fr/assets/images/logo.png",
  210.                             "sameAs": [
  211.                                 "https://www.instagram.com/campus_h3/",
  212.                                 "https://www.facebook.com/h3campus/",
  213.                                 "https://www.youtube.com/channel/UCETZb37ZnJCL4_mN15waigA",
  214.                                 "https://www.linkedin.com/school/h3-campus/"
  215.                             ]
  216.                         }
  217.     </script>
  218.     <script async src="https://www.youtube.com/iframe_api"></script>
  219.     <script src="https://player.vimeo.com/api/player.js"></script>
  220.     <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
  221.     <script src="{{ absolute_url(asset("build/website/js/homepage.js")) }}"></script>
  223.     <!-- Hotjar Tracking Code for Site 4967026 (name missing) -->
  225.     <script>
  227.         (function (h, o, t, j, a, r) {
  229. h.hj = h.hj || function () {
  230. (h.hj.q = h.hj.q || []).push(arguments)
  231. };
  233. h._hjSettings = {
  234. hjid: 4967026,
  235. hjsv: 6
  236. };
  238. a = o.getElementsByTagName('head')[0];
  240. r = o.createElement('script');
  241. r.async = 1;
  243. r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
  245. a.appendChild(r);
  247. })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
  248.     </script>
  249. {% endblock %}