css page nos-packs

user/themes/lecampus/scss/theme/thumbnails/thumbnails.scss

@@ -1,28 +1,145 @@
 #nos-packs{
   .content{
     margin-top: 0;
+    width: 70%;
+    margin: auto;
     .section{
-      margin: 100px 0;
-    }
-    .__intro{
-      text-align: center;
-    }
-    .d-flex{
-      display: inline-flex;
-      width: 100%;
-      .__title{
+      .__intro{
         text-align: center;
+        color: $light-blue;
+        margin: 100px 0;
+        p{
+          font-family: $now_alt_bold;
+          font-size: 1.2rem;
+        }
       }
-      .__btn{
-        text-align: center;
+      .d-flex{
+        display: inline-flex;
+        width: 100%;
+        .__more{
+          display: none
+        }
+        .__thumbnails{
+          margin: 0 1rem;
+          .__title{
+            text-align: center;
+            p{
+              border-bottom: 3px solid #b5cb3a;
+              width: max-content;
+              margin: 0 auto 1rem auto;
+              padding: 0 1.5rem 0.2rem 1.5rem;
+              font-size: 1rem;
+              font-family: $now_alt_medium;
+            }
+          }
+          .__thumb{
+            position: relative;
+            .__images{
+              width: 300px;
+              height: 300px;
+              position: relative;
+              object-fit: cover;
+              img{
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+          }
+
+        }
+
       }
-      .__more{
-        display: none
+      .dl_brochure{
+        width: 100%;
+        margin: 100px 0;
+        a{
+          font-size: 1.5rem;
+          font-family: $now_alt_medium;
+          display: block;
+          text-align: center;
+          text-transform: uppercase;
+          color: $light-blue;
+        }
       }
+      &.nos_pack{
+        .__thumbnails{
+          .__thumb{
+            transition: 0.3s transform ease;
+            &:hover{
+              transform: scale(1.015);
+              transition: 0.3s transform ease, 0.3s box-shadow ease;
+              .__images, .__btn{
+                box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
+                transition: 0.3s box-shadow ease;
+              }
+            }
+          }
+          .__images{
+            transition: 0.5s filter ease;
+            filter: grayscale(0%);
+            .__sub-title{
+              opacity: 0;
+              position: absolute;
+              top: 50%;
+              left: 0;
+              transform: translateY(-0%);
+              text-align: center;
+              color: white;
+              padding: 1rem;
+              transition: 0.5s transform ease, 1s opacity ease;
+              p{
+                font-size: 1.2rem;
+                font-family: $now_alt_medium;
+              }
+            }
 
+          }
+          .__btn{
+            color: white;
+            display: block;
+            padding: 0.7rem 0;
+            margin-top:  1rem;
+            font-size: 1rem;
+            font-family: $now_alt_medium;
+
+            text-align: center;
+
+            &.__blue{
+              background: $light-blue;
+            }
+            &.__green{
+              background: $green;
+            }
+            &.__red{
+              background: $red;
+            }
+            &.__grey{
+              background: $grey;
+            }
+          }
+
+          &:hover{
+          .__images{
+            img{
+              filter: grayscale(100%);
+              transition: 0.5s filter ease;
+            }
+            .__sub-title{
+              opacity: 1;
+              transform: translateY(-50%);
+              transition: 0.5s transform ease, 1s opacity ease;
+            }
+          }
+        }
+        }
 
-      .pack{
       }
+
+      &:last-child{
+        margin-bottom: 100px;
+      }
+
     }
 
   }

user/themes/lecampus/templates/components/buttons/btn.html.twig

@@ -1,6 +1,6 @@
 {% if btn == 'more' %}
-    <div class="__btn __learn-more">
-      <a href="#">En savoir plus</a>
+    <div class="__btn __learn-more {{color}}">
+    En savoir plus
     </div>
   {% elseif btn == 'devis' %}
     <div class="__btn __devis __color">

user/themes/lecampus/templates/components/thumbnails/thumbnails.html.twig

@@ -4,22 +4,45 @@
   {% set image_basename_thumb = image_parts.basename %}
   {% set image_page_thumb = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
 
-  <div class="{{section}} {{color}}">
-
+{% set titleHyp = item.title|lower|hyphenize %}
+{% if titleHyp == "bien-tre" %}
+  {% set color = "__blue" %}
+{% elseif titleHyp == "nature" %}
+  {% set color = "__green" %}
+{% elseif titleHyp == "gastronomie" %}
+  {% set color = "__red" %}
+{% else %}
+  {% set color = "__grey" %}
+{% endif %}
+
+  <div class="{{section}} __thumbnails">
     <div class="__title">
       <p>{{item.title}}</p>
     </div>
+    <div class="__thumb ">
 
-    <div class="__thumb">
-      <div class="__images __hover">
-        {{ image_page_thumb.media[image_basename_thumb].html() }}
-      </div>
-    </div>
+      {% if section == 'pack' %}
+        <a href="#">
+      {% endif %}
 
-    {% if section == 'pack' %}
+        <div class="__images ">
+          {{ image_page_thumb.media[image_basename_thumb].html() }}
+          <div class="__sub-title">
+            <p>{{item.sous_title}}</p>
+          </div>
+        </div>
 
-      {% include 'components/buttons/btn.html.twig' with { btn: 'more'} %}
+      {% if section == 'pack' %}
+        {% include 'components/buttons/btn.html.twig' with { btn: 'more'} %}
+      {% endif %}
 
+      {% if section == 'pack' %}
+        </a>
+      {% endif %}
+
+    </div>
+
+    {% if section == 'pack' %}
       {# dl Brochure #}
       {% set image_parts = pathinfo(item.btn_url) %}
       {% set image_basename_dl = image_parts.basename %}

user/themes/lecampus/templates/modular/section-lieux.html.twig

@@ -1,2 +1 @@
-
-  {{content}}
+{{content}}

user/themes/lecampus/templates/nos-packs.html.twig

@@ -33,6 +33,15 @@
               <div class="lieux d-flex">
               {% include 'components/thumbnails/thumbnails.html.twig' with {section: 'lieux'} %}
               </div>
+
+          {% set image_parts = pathinfo(page.header.btn_url) %}
+          {% set image_basename_url = image_parts.basename %}
+          {% set image_page_url = image_parts.dirname == '.' ? page : page.find(image_parts.dirname) %}
+
+          <div class="dl_brochure">
+            <a target="_blank" href="{{ image_page_url.media[image_basename_url].url() }}" download>{{page.header.btn_txt}}</a>
+          </div>
+
             </div>
           {% endif %}
         {% endfor %}