templates/front/front_home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layouts_front/base_front.html.twig' %}
  2. {% set cmptBack = 0 %}
  3. {% set cmptRef = 0 %}
  4. {% set cmptAncre = 0 %}
  5. {% set title = accRef.accRefTitle %}
  6. {% set description = accRef.accRefDescription %}
  7. {% set keywords = accRef.accRefKeyword %}
  8. {% set now =  "now"|date("m/d/Y") %}
  9. {% block stylesheets %}
  10.     <link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
  11.     <link rel="stylesheet preload" as="style" media="screen"
  12.           href="{{ asset('css/home.css', twigNameSpace) }}">
  13. {% endblock %}
  14. {% block javascripts %}
  15.     <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
  16.     <script type="text/javascript">
  17.         /* curator-feed-default-feed-layout */
  18.         (function () {
  19.             var i, e, d = document, s = "script";
  20.             i = d.createElement("script");
  21.             i.async = 1;
  22.             i.charset = "UTF-8";
  23.             i.src = "https://cdn.curator.io/published/cb0b86a2-ec0a-44a4-9cd2-7d709d7a2edc.js";
  24.             e = d.getElementsByTagName(s)[0];
  25.             e.parentNode.insertBefore(i, e);
  26.         })();
  27.     </script>
  28.     <script>
  29.         document.addEventListener('DOMContentLoaded', function () {
  30.             var splide = new Splide('.splide', {
  31.                 classes: {
  32.                     customActive: 'boutonActive',
  33.                 },
  34.                 drag: false,
  35.             });
  36.             splide.on('pagination:mounted', function (data) {
  37.                 // `items` contains all dot items
  38.                 data.items.forEach(function (item) {
  39.                     item.button.classList.add('pagination');
  40.                 });
  41.             });
  42.             splide.mount();
  43.         });
  44.         $(document).ready(function () {
  45.             $('.splide__pagination li').addClass("liSlidejs");
  46.             var i = 0;
  47.             if (i < 1) {
  48.                 $('.liSlidejs').each(function () {
  49.                     if ($(this).find("button").hasClass("is-active")) {
  50.                         $(this).addClass('boutonActive');
  51.                         i++;
  52.                     }
  53.                 })
  54.             }
  55.             $(".liSlidejs").on("click", function () {
  56.                 if (!$(this).hasClass("is-active")) {
  57.                     $('.liSlidejs').each(function () {
  58.                         $(this).removeClass('boutonActive')
  59.                     });
  60.                     $(this).addClass('boutonActive');
  61.                     $(this).find("button").click();
  62.                 }
  63.             });
  64.         });
  65.     </script>
  66.     {# DOC DU SLIDER   https://swiperjs.com/demos#autoplay #}
  67.     <script>
  68.         var swiper = new Swiper(".mySwiper", {
  69.             slidesPerView: 1,
  70.             centeredSlides: true,
  71.             centeredSlidesBounds: true,
  72.             cssMode: false,
  73.             cssAnimations: true,
  74.             sliderMove: false,
  75.             loop: true,
  76.             autoplay: {
  77.                 delay: 250000,
  78.                 disableOnInteraction: false,
  79.             },
  80.             spaceBetween: 0,
  81.             navigation: {
  82.                 nextEl: ".swiper-button-next",
  83.                 prevEl: ".swiper-button-prev",
  84.             },
  85.             pagination: {
  86.                 el: ".swiper-pagination",
  87.             },
  88.             mousewheel: false,
  89.             keyboard: true,
  90.             breakpoints: {
  91.                 1: {
  92.                     slidesPerView: 1,
  93.                     spaceBetween: 0,
  94.                 },
  95.                 1500: {
  96.                     slidesPerView: 1,
  97.                     spaceBetween: 0,
  99.                 },
  100.                 1720: {
  101.                     slidesPerView: 3,
  102.                     spaceBetween: 0,
  103.                 },
  104.             },
  105.         });
  106.     </script>
  107. {% endblock %}
  108. {% block content %}
  110.     {# -------------------------
  111.      -- AUTOPROMO 1 -> VIDEO --
  112.      ------------------------ -#}
  113.     {% if tabPromoZone1 | length > 0 %}
  114.         {% include 'front/front_home/autopromo_zone.html.twig' with {'tabPromoZone': tabPromoZone1, 'iDtabPromoZone': 'tabPromoZone1', 'size': 'full'} %}
  115.     {% else %}
  116.         <section data-bs-version="5.1"
  117.                  class="slider1 directm4_slider1 cid-sYsP7EgLKR justify-content-center he-100"
  118.                  id="slider1-1v-tabPromoZone1">
  119.             <div class="container-fluid">
  120.                 <div class="carousel slide carousel-fade" id="sYIUsJIk6l-tabPromoZone1" data-ride="carousel"
  121.                      data-bs-ride="carousel">
  122.                     <div id="bigtitle"
  123.                          class="animate__animated animate__delay-1s animate__fadeInUp">
  124.                         <h2 class="noFadeInUp">UNE QUESTION ?<br><a
  125.                                     href="tel:0562925160"><span>05 62 92 51 60</span></a></h2>
  126.                         <a href="{{ websiteroot }}/page/nous-contacter">
  127.                             <div class="rappeler"></div>
  128.                         </a>
  129.                     </div>
  130.                     <div class="carousel-inner">
  131.                         <div class="carousel-item slider-image item opacity-1">
  132.                             <div id="videoCont">
  133.                                 <div class="item-wrapper" id="flouMontagne">
  134.                                     <video data-autoplay autoplay="autoplay" loop poster="" class="videoAbs Montagne"
  135.                                            muted>
  136.                                         <source src="{{ websiteroot }}{{ asset('/medias_front/video_accueil/LOOP-16-9.webm') }}"
  137.                                                 type="video/webm">
  138.                                         <source src="{{ websiteroot }}{{ asset('/medias_front/video_accueil/LOOP-16-9.mp4') }}"
  139.                                                 type="video/mp4">
  140.                                     </video>
  141.                                     <div class="Montagne"></div>
  142.                                     <div id="centerbig"
  143.                                          class="h-100 carousel-caption justify-content-start align-items-end flex-column mt-10 visible">
  144.                                         <a href="{{ url('front_cures') }}">
  145.                                             <button>je commence ma réservation</button>
  146.                                         </a>
  147.                                     </div>
  148.                                 </div>
  149.                             </div>
  150.                         </div>
  151.                     </div>
  152.                 </div>
  153.             </div>
  154.         </section>
  155.     {% endif %}
  158.     {#- ------------------------
  159.     -- AUTOPROMO 2 & 3 --
  160.     ------------------------ -#}
  161.     {% if tabPromoZone2 | length > 0 %}
  162.         {% include 'front/front_home/autopromo_zone.html.twig' with {'tabPromoZone': tabPromoZone2, 'iDtabPromoZone': 'tabPromoZone2', 'size': '12'} %}
  163.     {% endif %}
  165.     {% if actualites|length >0 %}
  166.         <section id="actus" class="sliderProd">
  167.             <article>
  168.                 <div class="contSlider flexCenter flexMiddle flexNoWrap">
  169.                     <div class="slider flex-row flex-wrap flexTop flexcolmob">
  170.                         {% for actu in actualites %}
  171.                             {% set cmptRef = cmptRef + 1 %}
  172.                             {% set mediaTmp = actu.media_fichier %}
  173.                             {% set mediaDefault = "default.png" %}
  174.                             {% set mediaTmp = webp(webpSupported, mediaTmp) %}
  175.                             {% set mediaDefault = webp(webpSupported, mediaDefault) %}
  176.                             {% set cmptBack = cmptBack+1 %}
  177.                             <a class="petiteActus d-flex align-items-center justify-content-center flex-column"
  178.                                href="{{ path('front_news_card', {id:actu.id}) }}" style="" title="{{ actu.act_titre }}"
  179.                                itemscope itemtype="http://schema.org/BlogPosting" itemref="author_box review_box">
  180.                                 <img id="imgcentre" class="noFadeInUp"
  181.                                      src="{{ asset('/medias_front/actualite/' ~ mediaTmp|default(mediaDefault)) | imagine_filter('front_actu_accueil') }}"
  182.                                      alt="{{ actu.act_titre }}">
  183.                                 <span class="bgActusHome">
  184.                                     <p itemprop="name">{{ actu.act_titre }}</p>
  185.                                     <span class="date"><time itemprop="datePublished"
  186.                                                              datetime="{{ actu.act_date_publication|date("Y-m-d") }}">{{ actu.act_date_publication|date("d-m-Y") }}</time></span>
  187.                                 </span>
  188.                             </a>
  189.                         {% endfor %}
  190.                     </div>
  191.                     <a href="{{ path('front_news') }}">
  192.                         <div class="d-flex justify-content-center align-items-center titreSlider">
  193.                             <h3>Voir toutes les actualités</h3>
  194.                         </div>
  195.                     </a>
  197.                     {#                <div class="etPlus"> #}
  198.                     {#                    <div class="containerNewsletter"> #}
  199.                     {#                        <iframe class="mj-w-res-iframe" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" #}
  200.                     {#                                src="https://app.mailjet.com/widget/iframe/6bd3/KhL" width="100%"></iframe> #}
  201.                     {#                    </div> #}
  202.                     {#                </div> #}
  203.                 </div>
  204.                 <div class="catatitle d-flex flex-column justify-content-center align-items-center ">
  205.                     <h3>NOS <b>CURES THERMALES</b></h3>
  206.                     <img class="noFadeInUp" src="{{ websiteroot }}{{ asset('/medias_front/common/logoSolo.svg') }}"
  207.                          alt="trait de peinture">
  208.                 </div>
  209.             </article>
  211.         </section>
  212.     {% endif %}
  215.     {#- ------------------------
  216.     ------ Bloc Slider ---------
  217.     ------------------------ -#}
  218.     <div class="catalogue pb-5" id="down">
  219.         <div class="articleloc d-flex flex-column justify-content-center align-items-center">
  220.             <div class="swiper mySwiper">
  221.                 <div class="swiper-wrapper">
  222.                     {% for autopromo in tabPromoZone3 %}
  223.                         {% set mediaTmp = autopromo.image %}
  224.                         {% set mediaTmp = webp(webpSupported, autopromo.image) %}
  225.                         <div class="swiper-slide">
  226.                             <div class="art">
  227.                                 <a href="{{ autopromo.url }}"
  228.                                    {% if autopromo.isBlank == true %}target="_blank"{% endif %}>
  229.                                     <div class="imgdesc">
  230.                                         <img id="imgcentre" class="noFadeInUp"
  231.                                              src="{{ asset('/medias_front/autopromo/' ~ mediaTmp) | imagine_filter('front_autopromo3') }}"
  232.                                              alt="{{ autopromo.imageAlt }}">
  233.                                         <div class="d-flex justify-content-center">
  234.                                             <div class="rondSlider"></div>
  235.                                         </div>
  236.                                     </div>
  237.                                 </a>
  238.                                 <div class="priceloc d-flex justify-content-center align-center">
  239.                                     <a class="d-flex justify-content-center"
  240.                                        href="{{ autopromo.url }}">
  241.                                         <h4 class="noFadeInUp text-center">{{ autopromo.title }}</h4>
  242.                                     </a>
  243.                                 </div>
  244.                             </div>
  245.                         </div>
  246.                     {% endfor %}
  247.                 </div>
  248.             </div>
  249.         </div>
  250.         <div class="swiper-button-next"></div>
  251.         <div class="swiper-button-prev"></div>
  252.     </div>
  253.     <a class="boutonSlide" href="{{ path('front_shopping_categorie') }}">
  254.         <div class="offreloc d-flex justify-content-center align-items-center">
  255.             <button type="button">NOS FORMULES ET ATELIERS</button>
  256.         </div>
  257.     </a>
  258.     <div class="vaguePoint"></div>
  259.     <div class="agence d-flex align-items-center justify-content-center flex-wrap">
  260.         <div class="agencedesc">
  261.             <h2>PROFITEZ DE <br><strong>NOMBREUX AVANTAGES</strong></h2>
  262.             <h5>programme de parrainage, carte curiste +, etc.</h5><br>
  263.             <a href="{{ path('front_page' ,{'name': 'partenaires-carte-curiste'}) }}">
  264.                 <div class="ensavoirplus d-flex align-items-center justify-content-center">
  265.                     en savoir plus
  266.                 </div>
  267.             </a>
  268.         </div>
  269.         <div class="vagueBleuTrans">
  270.         </div>
  271.         <div class="vagueBleuTrans" id="vaguedeux">
  272.         </div>
  273.         <div class="blockAvantages">
  274.             <div class="maison">
  275.                 <img src="{{ websiteroot }}{{ asset('/medias_front/cauterets.png') }}">
  276.             </div>
  277.             <a href="{{ websiteroot }}{{ asset('/medias_front/common/BROCHURE-2024-NV.pdf') }}" target="_blank"
  278.                class="lienBrochure">
  279.                 <div class="brochure">
  280.                     <img src="{{ websiteroot }}{{ asset('/medias_front/brochure.png') }}" alt="une brochure">
  281.                 </div>
  282.             </a>
  283.             <a href="{{ websiteroot }}{{ asset('/medias_front/common/BROCHURE-2024-NV.pdf') }}" target="_blank"
  284.                class="lienCercle">
  285.                 <div class="cercleVert">
  286.                     <p>
  287.                         télécharger<br><strong>notre brochure</strong>
  288.                     </p>
  289.                 </div>
  290.             </a>
  291.         </div>
  292.     </div>
  293. {% endblock %}