FEATURE introducing the component

resources/css/blocks/press-ressources.css

@@ -0,0 +1,172 @@
+.wp-block-carhop-blocks-press-ressources {
+  .contact-persons {
+  }
+}
+
+.press-ressources {
+  .contact-persons {
+    @apply px-16 max-w-screen-lg mx-auto;
+    &__list {
+      @apply grid grid-cols-1 md:grid-cols-2 gap-8;
+    }
+  }
+
+  .press-toolbar {
+    .tablist {
+      @apply my-8;
+    }
+  }
+}
+
+.block-front-header + .press-ressources {
+  margin-top: -300px;
+}
+
+.block-front-header:has(+ .press-ressources) {
+  @apply pb-72;
+}
+
+.communiques-de-presse {
+  &__title {
+    @apply my-12;
+  }
+  &__list {
+    @apply grid grid-cols-1 md:grid-cols-2 gap-8;
+    .communique-card {
+      @apply border border-primary border-solid bg-white p-8;
+    }
+  }
+}
+.communiques-de-presse__title {
+  @apply my-12;
+}
+
+.ressources-graphiques {
+  &__title {
+    @apply my-12;
+  }
+  .contact-datas {
+    @apply grid grid-cols-1 md:grid-cols-3 gap-8;
+    a {
+      @apply block mb-1;
+    }
+    h3 {
+      @apply nunito text-lg font-bold tracking-widest mb-3;
+    }
+  }
+  .download-list {
+    @apply mt-16;
+    .list-heading {
+      @apply grid gap-4 bg-primary text-white p-4 uppercase tracking-wider;
+      grid-template-columns: 4fr 1fr 1fr 1fr;
+
+      column-gap: ;
+      /* span {
+        @apply nunito text-sm font-bold tracking-widest mb-3;
+        } */
+    }
+    &__item {
+      @apply relative;
+      transition: transform 0.3s ease-out;
+      &:after {
+        @apply content-[''] absolute top-0 left-0 w-full h-full opacity-0 z-0;
+        transition: opacity 0.3s ease-out;
+      }
+      a {
+        @apply border-primary border-solid z-10 px-4;
+        grid-template-columns: 4fr 1fr 1fr 1fr;
+        @apply text-primary py-6 items-center;
+        @apply grid  gap-4 border-b relative;
+      }
+      .file-name {
+        transition: transform 0.3s ease-out;
+        transform: translateX(0);
+      }
+
+      &:hover {
+        a {
+          @apply text-white;
+        }
+        .file-name {
+          transform: translateX(10px);
+        }
+        &:after {
+          @apply bg-primary opacity-100;
+        }
+        .download-link:after {
+          filter: brightness(0) invert(1);
+          transform: rotate(-90deg);
+        }
+      }
+      a:last-child {
+        @apply border-b-0;
+      }
+
+      .file-name,
+      .download-link {
+        @apply font-semibold;
+      }
+      /* :nth-child(4) {
+        @apply bg-red-500;
+      } */
+      .download-link {
+        @apply text-right flex items-center justify-end gap-4;
+        &:after {
+          @apply content-[''] inline-block w-10 h-10 bg-contain bg-no-repeat bg-center;
+          background-image: url('../resources/img/icons/button-arrow-down-small.svg');
+          background-size: contain;
+          transition: transform 0.3s ease-out;
+        }
+      }
+
+      span {
+      }
+    }
+  }
+
+  .download-table {
+    @apply w-full;
+    thead {
+      @apply bg-primary text-white;
+    }
+    tr {
+      @apply border-b border-primary border-solid p-2 text-primary !py-6;
+    }
+    th,
+    td {
+    }
+  }
+}
+
+.presse-reviews {
+  @apply mt-12;
+  .wp-block-carhop-blocks-content-box {
+    @apply !w-full !m-0;
+    .content-box__innerblocks {
+      @apply p-0;
+      > * {
+        @apply w-full max-w-none;
+      }
+    }
+  }
+}
+.ressources-grid-content-wrapper {
+  &[data-active-tab='communiques'] {
+    .ressources-graphiques,
+    .presse-reviews {
+      @apply hidden;
+    }
+  }
+  &[data-active-tab='ressources-graphiques'] {
+    .communiques-de-presse,
+    .presse-reviews {
+      @apply hidden;
+    }
+  }
+  &[data-active-tab='presse-reviews'] {
+    .communiques-de-presse,
+    .ressources-graphiques {
+      @apply hidden;
+    }
+  }
+}