From 75f58e4c575393a4240862b069fe0d3b477b3462 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Mon, 17 Nov 2025 15:19:07 +0100
Subject: [PATCH] FEATURE introducing our collections block

---
 resources/css/app.css                         |  1 +
 resources/css/blocks/our-collections.css      | 45 +++++++++++++++++++
 resources/img/carhop-fleche-full-green.svg    | 15 +++++++
 .../img/shapes/background-shape-A_purple.svg  |  3 ++
 4 files changed, 64 insertions(+)
 create mode 100644 resources/css/blocks/our-collections.css
 create mode 100644 resources/img/carhop-fleche-full-green.svg
 create mode 100644 resources/img/shapes/background-shape-A_purple.svg

diff --git a/resources/css/app.css b/resources/css/app.css
index b8782e6..f72134b 100644
--- a/resources/css/app.css
+++ b/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';
diff --git a/resources/css/blocks/our-collections.css b/resources/css/blocks/our-collections.css
new file mode 100644
index 0000000..0b2fd3f
--- /dev/null
+++ b/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;
+}
diff --git a/resources/img/carhop-fleche-full-green.svg b/resources/img/carhop-fleche-full-green.svg
new file mode 100644
index 0000000..5bc5d20
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/img/shapes/background-shape-A_purple.svg b/resources/img/shapes/background-shape-A_purple.svg
new file mode 100644
index 0000000..82f50b3
--- /dev/null
+++ b/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>