templates/site/home.html.twig line 1

Open in your IDE?
  1. {% extends "site/base.html.twig" %}
  3. {% block content %}
  4.     {% include 'site/includes/_swiper_hero.html.twig' %}
  5.     <section id="abcm" class="relative flex-col flex bg-white flex justify-center pb-24 px-8 lg:px-4 xl:px-44">
  6.         <div id="presentation" class="z-10 bg-white sm:-mt-20 w-full pt-12 sm:px-20">
  7.             <h2 class="text-primary mb-4 text-2.5xl font-heading break-all">{{ 'LG_ABCM_ZWEISPRACHIGKEIT'|trans({'fr':'ABCM ZWEISPRACHIGKEIT'}) }}</h2>
  8.             <div id="presentation_txt" class="leading-7 text-justify font-semibold tracking-wide">
  9.                 {{ 'LG_ACCUEIL_TEXTE_ABCM'|trans() |raw }}
  10.             </div>
  11.         </div>
  12.         <a class="mt-8 w-max sm:mx-20 z-20 bg-secondary text-white px-10 py-1 rounded-2xl transitioning hover:bg-transparent hover:text-secondary border-transparent border-2 hover:border-secondary" href="{{ path('actualites') }}">{{ 'LG_ACTUALITES_ABCM'|trans({'fr':'Actualités ABCM'}) }}</a>
  13.     </section>
  15.     <section id="ecole" class="relative z-10 text-black px-8 sm:px-28 lg:px-24 xl:px-64 py-20">
  16.         <h2 class="flex flex-col uppercase text-center text-3xl sm:text-4.5xl font-heading">{{ 'LG_ECOLES_ABCM'|trans({'fr':'Écoles ABCM'}) }}</h2>
  17.         <div class="flex flex-col lg:flex-row justify-between items-center my-12 md:my-24 gap-8">
  18.             <div class="lg:w-45p leading-7 font-semibold tracking-wide">
  19.                 {{ 'LG_ACCUEIL_TEXTE_ECOLES'|trans() |raw }}
  20.                 <a class="mt-8 bg-secondary text-white font-normal px-10 py-1 rounded-2xl transitioning hover:bg-transparent hover:text-secondary border-transparent border-2 hover:border-secondary" href="{{ path('trouver-ecole') }}">{{ 'LG_TROUVER_ECOLE'|trans({'fr':'Trouver une école'}) }}</a>
  21.             </div>
  22.             <div class="w-full lg:w-1/2 h-96">
  23.                 <div id="map" class="w-full h-full font-semibold"></div>
  24.             </div>
  25.         </div>
  26.         <ul class="flex -mb-28 flex-col md:flex-row gap-12 md:gap-0 items-center md:items-stretch justify-center">
  27.             <li class="flex flex-col justify-between items-center text-center md:w-1/3">
  28.                 <p class="font-bold text-xl leading-7 md:mb-12">{{ 'LG_ACCUEIL_VALEUR_1'|trans({'fr':'De la maternelle au CM2'}) }}</p>
  29.                 <img class="w-24 lg:w-28" src="{{ asset('img/icones/cartable.png') }}">
  30.             </li>
  31.             <li class="flex flex-col justify-between items-center text-center md:w-1/3">
  32.                 <p class="font-bold text-xl leading-7 md:mb-12">{{ 'LG_ACCUEIL_VALEUR_2'|trans({'fr':'Plus de 120 salariés'}) }}</p>
  33.                 <img class="w-24 lg:w-28" src="{{ asset('img/icones/salaries.png') }}">
  34.             </li>
  35.             <li class="flex flex-col justify-between items-center text-center md:w-1/3">
  36.                 <p class="font-bold text-xl leading-7 md:mb-12">{{ 'LG_ACCUEIL_VALEUR_3'|trans({'fr':'Depuis 1991'}) }}</p>
  37.                 <img class="w-24 lg:w-28" src="{{ asset('img/icones/grimoire.png') }}">
  38.             </li>
  39.         </ul>
  40.     </section>
  42.     <section id="immersion" class="relative bg-white text-black px-8 sm:px-28 lg:px-24 xl:px-64 pt-36 pb-12">
  43.         <h2 class="uppercase text-tertiary-300 leading-none text-center text-3xl sm:text-4.5xl font-heading h-40 xs:h-28 relative mb-4 xs:mb-12">{{ 'LG_IMMERSION_TITRE'|trans({'fr':'L\'immersion :'}) }}
  44.             <span class="normal-case"> {{ 'LG_IMMERSION_TITRE_2'|trans({'fr':'Wàs esch dès ?', 'de':'Wàs esch dès ?'}) }}</span></h2>
  45.         <div class="relative w-full h-96 lg:h-132 mb-12">
  46.             <div id="load" class="cursor-pointer absolute z-10 rounded-full bg-white hover:bg-secondary transitioning w-32 h-20 flex justify-center items-center abs-center">
  47.                 <div id="arrow"></div>
  48.             </div>
  49.             <iframe id="video" class="hidden w-full h-full" src="{{ 'LG_VIDEO_YOUTUBE_ACCUEIL'|trans({'fr':'https://www.youtube.com/embed/iiJWJbbstNk'}) }}" title="YouTube video player"
  50.                 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  51.                 allowfullscreen></iframe>
  52.             <img class="opacity-75 w-full h-full object-cover " src="{{ asset('img/tmp/AdobeStock_309458557_Preview.jpeg') }}">
  53.         </div>
  54.     </section>
  56.     <section id="actu" class="relative bg-tertiary px-8 sm:px-28 lg:px-24 xl:px-64 xl:pr-40 py-12">
  57.         <h2 class="uppercase text-black text-3xl sm:text-4.5xl font-heading">{{ 'LG_ACTUALITES'|trans() }}</h2>
  58.         <div class="flex flex-col sm:flex-row sm:flex-wrap justify-center sm:justify-start items-center gap-8 mt-16 mb-8">
  59.             {% for actualite in actualites %}
  60.                 {% set hasPhoto = (actualite.photo is not empty) %}
  61.                 <a href="{{ path('actualites_detail', {slug:actualite.titreUrl, actualite:actualite.id}) }}" class="cursor-pointer w-full sm:w-2/5 md:w-1/4 xl:w-1/5 h-48 relative">
  62.                     <img alt="{{ actualite.titre }}" class="w-full h-full object-cover" src="{{ hasPhoto ? ('actualites/'~actualite.photo)|imagine_filter('tm'): asset('/img/tmp/actu-haguenau.jpg') }}">
  63.                     <p class="absolute -right-2 top-2 w-min bg-white text-tertiary-300 rounded-2xl text-center px-4">{{ actualite.date|date('d/m') }}</p>
  64.                     <div class="absolute x-center bottom-2 text-white bg-primary rounded-full text-center text-xs w-9/12 py-3 px-4">
  65.                         <p class="mb-0">{{ actualite.titre }}</p>
  66.                     </div>
  67.                 </a>
  68.             {% endfor %}
  69.             <a class="w-8 h-8 rounded-full flex items-center justify-center text-3xl bg-secondary text-white
  70.                 hover:bg-transparent transitioning hover:text-secondary border-transparent border-2 hover:border-secondary" href="{{ path('actualites') }}">
  71.                 <span class="-mt-1">+</span>
  72.             </a>
  73.         </div>
  74.     </section>
  76.     <section id="partenaire" class="relative bg-white px-8 sm:px-28 lg:px-24 xl:px-64 py-12">
  77.         <h2 class="uppercase text-tertiary text-3xl sm:text-4.5xl font-heading">{{ 'LG_NOS_PARTENAIRES'|trans({'fr':'Nos partenaires'}) }}</h2>
  78.         <div id="slider-partenaire" class="z-20 mt-16 mb-8 z-0 swiper-container relative w-full sm:pr-12 lg:pr-0">
  79.             <div class="swiper-wrapper">
  80.                 {% for partenaire in partenaires %}
  81.                     <div class="swiper-slide h-auto flex items-center justify-center p-4 xl:p-12 bg-white">
  82.                         {% if partenaire.getMedias() is not empty %}
  83.                             {% set fichier = partenaire.getMedias()[0].fichier %}
  84.                             <img class="w-full h-full object-contain" src="{{ asset('/medias/fournisseurs/'~ partenaire.id ~ '/'~ fichier) }}" alt="{{ partenaire.societe }}">
  85.                         {% else %}
  86.                             <p>{{ partenaire.societe }}</p>
  87.                         {% endif %}
  88.                     </div>
  89.                 {% endfor %}
  90.             </div>
  91.         </div>
  92.         <div class="hidden sm:block swiper-part_next absolute y-center mt-8 right-24 lg:right-12 xl:right-52 z-50 cursor-pointer">
  93.             <i class="fas fa-chevron-right text-6xl md:text-4xl text-primary"></i>
  94.         </div>
  95.     </section>
  97. {% endblock %}
  99. {% block javascripts %}
  100.     {{ parent() }}
  101.     <script type="text/javascript">
  103.         function initMap() {
  104.             const center = {lat: 48.39878707042242, lng: 7.309071389609192};
  106.             const places = [
  107.                 {% for ecole in ecoles %}
  108.                 {% set nom = (app.request.locale == "de")?ecole.nomDe:ecole.nom %}
  109.                 {% set hasPhoto = (ecole.photo is not empty) %}
  110.                 ["<span class='title-map'>A.B.C.M. Zweisprachigkeit</span><br>" +
  111.                 "<strong class='ecole-map'>{{ nom }}</strong><br><br>" +
  112.                 {% if hasPhoto %}
  113.                 "<div class='w-full h-32'><img class='w-full object-cover h-full' src='{{ asset(ecole.getPhotoUrl()) | imagine_filter('tl') }}'></div><br>" +
  114.                 {% endif %}
  115.                 "<div class='sub-container-map w-full'><span class='flex items-center leading-5'><img class='w-4 mr-2' src='/img/icones/pin.svg'>{{ ecole.adresse }},<br> {{ ecole.codePostal }} {{ ecole.ville }}</span>" +
  116.                 "<a href='tel:+33{{ ecole.tel1 |slice(8) }}'><img class='w-4 mr-2' src='/img/icones/telephone.svg'>{{ ecole.tel1 }}</a><br>" +
  117.                 {% if ecole.siteUrl is not empty %}"<a href='{{ ecole.siteUrl }}' target='_blank'><img class='w-4 mr-2' src='/img/icones/web.svg'>{{ ecole.siteTitre }}</a><br>" +  {% endif %}
  118.                 "<a href='{{ ecole.facebook }}' target='_blank'><img class='w-4 mr-2' src='/img/icones/facebook.svg'>Facebook</a></div>"
  119.                     , {{ ecole.latitude }}, {{ ecole.longitude }}, '{{ ecole.couleur }}'],
  120.                 {% endfor %}
  121.             ]
  123.             const infowindow = new google.maps.InfoWindow();
  124.             const map = new google.maps.Map(document.getElementById("map"), {
  125.                 zoom: 7,
  126.                 center: center,
  127.             });
  129.             setMarkers(map);
  130.             function setMarkers(map) {
  131.                 var markers = [];
  132.                 for (let i = 0; i < places.length; i++) {
  133.                     const place = places[i];
  135.                     let url = "/img/icones/";
  136.                     url += place[3] + "-pin.png";
  138.                     var icon = {
  139.                         url: url, // url
  140.                         scaledSize: new google.maps.Size(40, 40), // scaled size
  141.                     };
  143.                     let marker = new google.maps.Marker({
  144.                         position: { lat: place[1], lng: place[2] },
  145.                         map,
  146.                         icon: icon,
  147.                         title: place[0],
  148.                     });
  149.                     markers.push(marker);
  151.                     google.maps.event.addListener(marker, 'click', function(){
  152.                         infowindow.close(); // Close previously opened infowindow
  153.                         infowindow.setContent(place[0]);
  154.                         infowindow.open(map, marker);
  155.                         restoreColors()
  156.                         this.setIcon(pinSymbol('red'));
  157.                     });
  159.                     google.maps.event.addListener(infowindow, "closeclick", function() {
  160.                         restoreColors()
  161.                     });
  163.                     function pinSymbol(color) {
  164.                         return {
  165.                             url: '/img/icones/'+ color +'-pin.png',
  166.                             scaledSize: new google.maps.Size(40, 40), // scaled size
  167.                         };
  168.                     }
  169.                     function restoreColors() {
  170.                         for (var i = 0; i < markers.length; i++) {
  171.                             markers[i].setIcon(pinSymbol(place[3]));
  172.                         }
  173.                     }
  174.                 }
  175.             }
  176.         }
  178.     </script>
  181.     <script async defer
  182.             src="https://maps.googleapis.com/maps/api/js?key={{ constant('WWW_PARAM_GAPI_KEY') }}&callback=initMap&libraries=&v=weekly"></script>
  183. {% endblock %}