templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ setting.siteName }} : bienvenue !{% endblock %}
  5. {% block body %}
  7. <div id="fb-root"></div>
  8. <script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v14.0"
  9.     nonce="IxquDTXZ"></script>
  11. <script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
  13. {% for home in homes %}
  15. <section class="container mt-5 pt-3 overflow-hidden">
  17.     {# HERO #}
  18.     <div class="row">
  19.         <div class="col text-center">
  20.             <h1 class="color1 fw-700 h2" data-aos="fade-down" data-aos-duration="1500">
  21.                 {{ home.heroText1 }}
  22.                 <br>
  23.                 <span class="color2" data-aos="fade-down" data-aos-duration="2000">{{ home.heroText2 }}</span>
  24.             </h1>
  25.         </div>
  26.     </div>
  27.     <div class="row mt-5">
  28.         <div class="col">
  29.             {#<img src="{{ asset('assets/img/' ~ home.heroImage)|imagine_filter('heroaccueil') }}" alt="{{ setting.siteName }}" class="img-fluid">#}
  30.             <img src="{{ asset('assets/img/' ~ home.heroImage) }}" alt="{{ setting.siteName }}" class="img-fluid">
  31.         </div>
  32.     </div>
  34.     {# NOTRE DIFFERENCE + SLIDER #}
  35.     <div class="row mt-5 pt-5">
  36.         <div class="col-lg-8 col-sm-12">
  37.             <!-- Slider main container -->
  38.             <div class="swiper">
  39.                 <!-- Additional required wrapper -->
  40.                 <div class="swiper-wrapper">
  41.                 <!-- Slides -->
  42.                 <div class="swiper-slide"><img src="{{ asset('assets/img/difference/' ~ home.diffImage1 )|imagine_filter('slideraccueil') }}" alt="{{ setting.siteName }}"
  43.                     class="img-fluid mb-3"></div>
  44.                 <div class="swiper-slide"><img src="{{ asset('assets/img/difference/' ~ home.diffImage2 )|imagine_filter('slideraccueil') }}" alt="{{ setting.siteName }}"
  45.                     class="img-fluid mb-3"></div>
  46.                 <div class="swiper-slide"><img src="{{ asset('assets/img/difference/' ~ home.diffImage3 )|imagine_filter('slideraccueil') }}" alt="{{ setting.siteName }}"
  47.                     class="img-fluid mb-3"></div>
  48.                 </div>
  49.                 <!-- If we need pagination -->
  50.                 <div class="swiper-pagination"></div>
  52.                 <!-- If we need navigation buttons -->
  53.                 {# <div class="swiper-button-prev"></div>
  54.                 <div class="swiper-button-next"></div> #}
  56.                 <!-- If we need scrollbar -->
  57.                 {# <div class="swiper-scrollbar"></div> #}
  58.             </div>
  59.         </div>
  61.         <div class="col-lg-4 col-sm-12">
  62.             <h2 class="color1 text-uppercase fw-700" data-aos="fade-left" data-aos-duration="2000">{{ home.diffTitre1 }}</h2>
  63.             <h2 class="color2 text-uppercase" data-aos="fade-left" data-aos-duration="2500">{{ home.diffTitre2 }}</h2>
  64.             <p class="mt-5">
  65.                 {{ home.diffText|replace({
  66.                     '<div>' : '<span>',
  67.                     '</div>' : '</span>'
  68.                 })|raw  }}
  69.             </p>
  70.             <p>
  71.                 <a href="{{ path('app_difference') }}" class="text-decoration-none">
  72.                     <span class="button-difference text-uppercase">{{ home.diffButtontext }}</span>
  73.                 </a>
  74.             </p>
  75.         </div>
  76.     </div>
  78. </section>
  80. <section class="container-fluid pb-5">
  82.         {# LES OFFICES #}
  83.         <div class="row mt-5 py-5">
  84.             <div class="col text-center">
  85.                 <h2 class="color1 text-uppercase fw-700" data-aos="fade-down" data-aos-duration="2000">{{ home.officesTitre1 }}</h2>
  86.                 <h2 class="color2 text-uppercase" data-aos="fade-down" data-aos-duration="2500">{{ home.officesTitre2 }}</h2>
  87.             </div>
  88.         </div>
  90.     {# PARIS #}
  91.     <div class="hoverimage" style="position: relative;">
  93.         <div class="offices-color img-crop" style="background-image: url('{{ asset('assets/img/offices/' ~ home.officesImage1bleu)|imagine_filter('officesaccueil') }}')">
  94.         </div>
  96.         <div class="offices-color nodisplay img-crop" style="background-image: url('{{ asset('assets/img/offices/' ~ home.officesImage1)|imagine_filter('officesaccueil') }}')">
  97.         </div>
  99.         {# <img src="{{ asset('assets/img/offices/' ~ home.officesImage1 ) }}" alt="{{ setting.siteName }}" class="img-fluid"> #}
  100.         <div class="d-flex flex-column justify-content-end h-100 position-relative">
  101.             <p class="text-uppercase offices-paris-text">
  102.                 {{ home.officesImagetext1 }}
  103.             </p>
  104.             <p>
  105.                 <a href="{{ path('app_office') }}" class="text-decoration-none">
  106.                     <span class="text-uppercase button-offices h5">{{ home.officesButtontext1 }}</span>
  107.                 </a>
  108.             </p>
  109.         </div>
  111.     </div>
  113.     {# MELUN #}
  114.     <div class="hoverimage mt-4" style="position: relative;">
  116.         <div class="offices-color img-crop" style="background-image: url('{{ asset('assets/img/offices/' ~ home.officesImage2bleu)|imagine_filter('officesaccueil') }}')">
  117.         </div>
  119.         <div class="offices-color nodisplay img-crop" style="background-image: url('{{ asset('assets/img/offices/' ~ home.officesImage2)|imagine_filter('officesaccueil') }}')">
  120.         </div>
  122.         {# <img src="{{ asset('assets/img/offices/' ~ home.officesImage1 ) }}" alt="{{ setting.siteName }}" class="img-fluid"> #}
  123.         <div class="d-flex flex-column justify-content-end align-items-end h-100 position-relative">
  124.             <p class="text-uppercase offices-melun-text">
  125.                 {{ home.officesImagetext2 }}
  126.             </p>
  127.         </div>
  129.     </div>
  131.     {# SENART #}
  132.     <div class="hoverimage mt-4" style="position: relative;">
  134.         <div class="offices-color img-crop" style="background-image: url('{{ asset('assets/img/offices/' ~ home.officesImage3bleu)|imagine_filter('officesaccueil') }}')">
  135.         </div>
  137.         <div class="offices-color nodisplay img-crop" style="background-image: url('{{ asset('assets/img/offices/' ~ home.officesImage3)|imagine_filter('officesaccueil') }}')">
  138.         </div>
  140.         <div class="d-flex flex-column justify-content-end h-100 position-relative">
  141.             <p class="text-uppercase offices-senart-text">
  142.                 {{ home.officesImagetext3 }}
  143.             </p>
  144.         </div>
  146.     </div>
  148. </section>
  150. {# NOS DERNIERES ACTUS #}
  151. <section class="container pb-5 mt-5">
  152.     <div class="row mb-5">
  153.         <div class="col text-center">
  154.             <h2 class="color1 text-uppercase fw-700" data-aos="fade-down" data-aos-duration="2000">{{ home.actuTitre1 }}</h2>
  155.             <h2 class="color2 text-uppercase" data-aos="fade-down" data-aos-duration="2500">{{ home.actuTitre2 }}</h2>
  156.         </div>
  157.     </div>
  158.     <div class="row">
  159.         {# <div class="col-lg-2 col-sm-12"></div> #}
  160.         {# <div class="col-lg-4 col-sm-12">
  161.             <!--LinkedIn-->
  162.             <div class="badge-base LI-profile-badge" data-locale="fr_FR" data-size="large" data-theme="light"
  163.                 data-type="HORIZONTAL" data-vanity="{{ home.actuLinkedin }}" data-version="v1">
  164.                 <a class="badge-base__link LI-simple-link" href="{{ home.actuLinkedin }}">{{ setting.siteName }}</a>
  165.             </div>
  166.         </div> #}
  167.         <div class="col text-center">
  168.             {# Facebook #}
  169.             {# <div class="fb-page" data-href="{{ home.actuFacebook }}" data-tabs="timeline" data-width="" data-height=""
  170.                 data-small-header="false" data-adapt-container-width="true" data-hide-cover="false"
  171.                 data-show-facepile="true">
  172.                 <blockquote cite="{{ home.actuFacebook }}" class="fb-xfbml-parse-ignore"><a href="{{ home.actuFacebook }}">Facebook</a></blockquote>
  173.             </div> #}
  174.             {# LinkedIn #}
  175.             <script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
  176.             <div class="" data-version="v1" data-size="large" data-locale="fr_FR" data-type="horizontal" data-theme="light" data-vanity="#">
  177.                 <a class="btn btn-primary" href="https://www.linkedin.com/company/laroche-associ%C3%A9s-notaires?trk=profile-badge">
  178.                     Laroche et Associés
  179.                 </a>
  180.             </div>
  181.         </div>
  182.     </div>
  183. </section>
  185. <div class="img-bg">
  186.     <img src="{{ asset('assets/img/logo-laroche-02.png') }}" alt="{{ setting.siteName }}">
  187. </div>
  189. {# LES AVIS #}
  190. <section class="container pt-5 pb-5">
  191.     <div class="row mb-5">
  192.         <div class="col text-center">
  193.             <h2 class="color1 text-uppercase fw-700" data-aos="fade-down" data-aos-duration="2000">{{ home.avisTitre1 }}</h2>
  194.             <h2 class="color2 text-uppercase" data-aos="fade-down" data-aos-duration="2500">{{ home.avisTitre2 }}</h2>
  195.         </div>
  196.     </div>
  198.     {% set avis5 =
  199.         '<svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  200.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  201.                                     class="iconify iconify--ic" width="17" height="17"
  202.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  203.                                     <path fill="currentColor"
  204.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  205.                                     </path>
  206.                                 </svg>
  207.                                 <svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  208.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  209.                                     class="iconify iconify--ic" width="17" height="17"
  210.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  211.                                     <path fill="currentColor"
  212.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  213.                                     </path>
  214.                                 </svg>
  215.                                 <svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  216.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  217.                                     class="iconify iconify--ic" width="17" height="17"
  218.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  219.                                     <path fill="currentColor"
  220.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  221.                                     </path>
  222.                                 </svg>
  223.                                 <svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  224.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  225.                                     class="iconify iconify--ic" width="17" height="17"
  226.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  227.                                     <path fill="currentColor"
  228.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  229.                                     </path>
  230.                                 </svg>
  231.                                 <svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  232.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  233.                                     class="iconify iconify--ic" width="17" height="17"
  234.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  235.                                     <path fill="currentColor"
  236.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  237.                                     </path>
  238.                                 </svg>'
  239.     %}
  241.     {% set avis4 =
  242.         '<svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  243.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  244.                                     class="iconify iconify--ic" width="17" height="17"
  245.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  246.                                     <path fill="currentColor"
  247.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  248.                                     </path>
  249.                                 </svg>
  250.                                 <svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  251.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  252.                                     class="iconify iconify--ic" width="17" height="17"
  253.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  254.                                     <path fill="currentColor"
  255.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  256.                                     </path>
  257.                                 </svg>
  258.                                 <svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  259.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  260.                                     class="iconify iconify--ic" width="17" height="17"
  261.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  262.                                     <path fill="currentColor"
  263.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  264.                                     </path>
  265.                                 </svg>
  266.                                 <svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  267.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  268.                                     class="iconify iconify--ic" width="17" height="17"
  269.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  270.                                     <path fill="currentColor"
  271.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  272.                                     </path>
  273.                                 </svg>
  274.                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z"/></svg>
  275.                                 '
  276.     %}
  278.     {% set avis3 =
  279.         '<svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  280.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  281.                                     class="iconify iconify--ic" width="17" height="17"
  282.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  283.                                     <path fill="currentColor"
  284.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  285.                                     </path>
  286.                                 </svg>
  287.                                 <svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  288.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  289.                                     class="iconify iconify--ic" width="17" height="17"
  290.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  291.                                     <path fill="currentColor"
  292.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  293.                                     </path>
  294.                                 </svg>
  295.                                 <svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  296.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  297.                                     class="iconify iconify--ic" width="17" height="17"
  298.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  299.                                     <path fill="currentColor"
  300.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  301.                                     </path>
  302.                                 </svg>
  303.                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z"/></svg>
  304.                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z"/></svg>
  305.                                 '
  306.     %}
  308.     {% set avis2 =
  309.         '<svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  310.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  311.                                     class="iconify iconify--ic" width="17" height="17"
  312.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  313.                                     <path fill="currentColor"
  314.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  315.                                     </path>
  316.                                 </svg>
  317.                                 <svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  318.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  319.                                     class="iconify iconify--ic" width="17" height="17"
  320.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  321.                                     <path fill="currentColor"
  322.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  323.                                     </path>
  324.                                 </svg>
  325.                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z"/></svg>
  326.                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z"/></svg>
  327.                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z"/></svg>
  328.                                 '
  329.     %}
  331.     {% set avis1 =
  332.         '<svg style="color: rgb(255, 187, 0);" xmlns="http://www.w3.org/2000/svg"
  333.                                     xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
  334.                                     class="iconify iconify--ic" width="17" height="17"
  335.                                     preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
  336.                                     <path fill="currentColor"
  337.                                         d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27z">
  338.                                     </path>
  339.                                 </svg>
  340.                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z"/></svg>
  341.                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z"/></svg>
  342.                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z"/></svg>
  343.                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28L12 15.4z"/></svg>
  344.                                 '
  345.     %}
  347.     <div class="row row-cols-1 row-cols-md-4 g-4 avis-cards">
  348.         {% for avis in avis %}
  349.             <div class="col">
  350.                 <a class="text-decoration-none text-dark" href="{{ path('app_office_show', {'slug': avis.office.slug}) }}">
  351.                     <div class="card h-100">
  352.                         <div class="card-body">
  353.                             {# <h5 class="color1 text-uppercase text-center card-title" data-aos="fade-down" data-aos-duration="1000">Office de Melun</h5> #}
  354.                                 {# {% dump(avis.office.slug) %} #}
  355.                                 <p class="card-text">
  356.                                     <div class="row mt-4">
  357.                                         <div class="col-3">
  358.                                             <img src="{{ asset('assets/img/avis/' ~ avis.image ) }}"
  359.                                             class="rounded-circle img-fluid" alt="Avis" style="max-width: 100px; width: 100%;">
  360.                                         </div>
  361.                                         <div class="col small">
  362.                                             <span class="fw-bold">{{ avis.firstname }} {{ avis.lastname }}</span>
  363.                                             <br>
  365.                                             {% if avis.eval == 5 %}
  366.                                                 {{ avis5|raw }}
  367.                                             {% elseif avis.eval == 4 %}
  368.                                                 {{ avis4|raw }}
  369.                                             {% elseif avis.eval == 3 %}
  370.                                                 {{ avis3|raw }}
  371.                                             {% elseif avis.eval == 2 %}
  372.                                                 {{ avis2|raw }}
  373.                                             {% elseif avis.eval == 1 %}
  374.                                                 {{ avis1|raw }}
  375.                                             {% endif %}
  377.                                             <span class="text-xxsmall">
  378.                                                 {{ avis.createdAt|ago }}
  379.                                             </span>
  381.                                         </div>
  382.                                     </div>
  383.                                     <div class="row">
  384.                                         <div class="col">
  385.                                             <p class="mt-3 small">
  386.                                                 <span class="small text-muted">Office : {{ avis.office.titre }}</span>
  387.                                                 <br>
  388.                                                 {{ avis.content|replace({'<div>': '', '</div>': '',})|raw }}
  389.                                             </p>
  390.                                         </div>
  391.                                     </div>
  392.                                 </p>
  393.                         </div>
  394.                     </div>
  395.                 </a>
  396.             </div>
  397.         {% endfor %}
  398.     </div>
  400. </section>
  403. <script>
  404. let imageContainer = document.querySelectorAll('.hoverimage');
  406. imageContainer.forEach(container => {
  407.     container.addEventListener('mouseover', function() {
  408.         let bgImage = container.children[1];
  410.         if (bgImage.classList.contains('nodisplay') != false)
  411.         {
  412.             bgImage.classList.remove('nodisplay');
  413.         }
  414.     })
  416.     container.addEventListener('mouseleave', function() {
  417.         let bgImage = container.children[1];
  419.         if (bgImage.classList.contains('nodisplay') == false)
  420.         {
  421.             bgImage.classList.add('nodisplay');
  422.         }
  423.     })
  424. })
  425. </script>
  427. {% endfor %}
  429. {% endblock %}