FEATURE introducing our collections block

resources/css/app.css

@@ -68,6 +68,7 @@
 @import './blocks/block-chapo.css';
 @import './blocks/wp-block-list.css';
 @import './blocks/audio-player.css';
+@import './blocks/our-collections.css';
 
 /* ########### LIBS ############ */
 @import './libs/swiper.css';

resources/css/blocks/our-collections.css

@@ -0,0 +1,45 @@
+.our-collections {
+  @apply pb-32 relative;
+
+  * {
+    @apply relative;
+    z-index: 3;
+  }
+  &__selected-image {
+    @apply block;
+
+    z-index: 3;
+    aspect-ratio: 16/9;
+    @apply mx-auto block bg-white w-full max-w-2xl h-auto object-cover border border-primary p-4;
+
+    transform: translateY(-200px);
+    margin-bottom: -200px;
+  }
+  .background-shape {
+    @apply block w-full h-full absolute top-0 left-0 bg-no-repeat;
+    background-size: 100% 100%;
+
+    background-image: url('../resources/img/shapes/background-shape-A_purple.svg');
+    z-index: 0;
+  }
+  .redirection-grid {
+    @apply grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto;
+    .redirection-grid__item {
+      @apply bg-white border border-primary p-4 relative flex items-center justify-between;
+      @apply text-primary text-center font-light text-xl fjalla uppercase;
+      @apply relative;
+      &::after {
+        @apply content-[''] block w-16 h-16 bg-no-repeat;
+
+        background-image: url('../resources/img/carhop-fleche-full-green.svg');
+      }
+    }
+  }
+}
+.see-all {
+  @apply w-fit internal-link-with-icon mx-auto block text-center mt-12;
+}
+
+.block-front-header:has(+ .our-collections) {
+  padding-bottom: 240px !important;
+}

resources/img/carhop-fleche-full-green.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="fleche-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77 77">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #146F63;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M50.77,37.45h-23.13"/>
+  <path class="cls-1" d="M36.09,51.64l14.68-14.19-14.68-14.19"/>
+  <circle class="cls-1" cx="38.5" cy="38.5" r="37.5"/>
+</svg>

resources/img/shapes/background-shape-A_purple.svg

@@ -0,0 +1,3 @@
+<svg width="1440" height="1588" viewBox="0 0 1440 1588" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+<path preserveAspectRatio="none" d="M0 0H1440V1588L0 1559.71V0Z" fill="#EFE8FF"/>
+</svg>