FEATURE Handling proposer sujet compositions

resources/css/app.css

@@ -128,6 +128,7 @@
 /* ########### COMPOSITIONS ############ */
 @import './compositions/nos-collections.css';
 @import './compositions/pourquoi-soutenir-carhop.css';
+@import './compositions/proposer-votre-sujet.css';
 
 /* ########### LIBS ############ */
 @import './libs/swiper.css';

resources/css/compositions/proposer-votre-sujet.css

@@ -0,0 +1,21 @@
+.proposer-votre-sujet {
+  --block-rotation: 4deg;
+
+  figure::after {
+    @apply w-12 h-12 bg-carhop-green-700;
+    transform: rotate(var(--block-rotation)) translateX(calc(100% + 2rem));
+    content: '';
+    position: absolute;
+    top: 30px;
+    right: 10px;
+
+    background-image: url('../resources/img/icons/carhop-reproduction-white.svg');
+    background-position: center;
+    background-size: 50%;
+    background-repeat: no-repeat;
+  }
+
+  figure.wp-block-image.is-style-framed-rotated {
+    transform: rotate(calc(-1 * var(--block-rotation))) translateX(-1rem);
+  }
+}

resources/img/icons/carhop-reproduction-white.svg

@@ -0,0 +1,13 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2138_19837)">
+<path d="M18.7752 6.46313H0.734375V9.73158V25.2622H18.7752V6.46313Z" stroke="white" stroke-width="2"/>
+<path d="M18.7747 20.7911H24.2641V0.737793H5.02539V6.46311" stroke="white" stroke-width="2"/>
+<path d="M9.75195 11.7014V20.0238" stroke="white" stroke-width="2"/>
+<path d="M13.904 15.8627H5.60742" stroke="white" stroke-width="2"/>
+</g>
+<defs>
+<clipPath id="clip0_2138_19837">
+<rect width="25" height="26" fill="white"/>
+</clipPath>
+</defs>
+</svg>