New block: Testimonial

Author: mbel-nc

blocks/testimonial/testimonial.css

@@ -0,0 +1,106 @@
+.testimonial {
+    .testimonial-item {
+        --page-padding: 50px;
+
+        width: min(var(--page-max-width), 100% - 2* var(--page-padding));
+        margin-inline: auto;
+        max-width: min(1136px, 90%);
+        padding-left: 50px;
+        box-shadow: rgb(0 0 0 / 25%) 0 16px 21.7px;
+        display: flex;
+        flex-wrap: wrap;
+        background: url("../../img/bg-card-box.jpg") 0 0 / 100% 100% no-repeat;
+        border-radius: 10px;
+
+        @media (width <= 1024px) {
+            flex-direction: column-reverse;
+            gap: 24px;
+            padding: 24px 16px 32px;
+        }
+
+        @media (width <= 667px) {
+            --page-padding: 12px;
+            
+            max-width: unset;
+        }
+
+        > div:first-child {
+            width: 53%;
+            padding-right: 5%;
+            padding-top: 30px;
+            padding-bottom: 30px;
+            line-height: 1;
+
+            @media (width <= 1024px) {
+                width: unset;
+                padding: 0;
+                line-height: 1.2;
+            }
+
+            h3 {
+                font-size: var(--font-h3);
+                font-weight: inherit;
+                line-height: 1.2;
+                margin-block: 0.3em;
+            }
+
+            p {
+                font-size: var(--font-rte-small);
+                line-height: 24px;
+                margin-top: 1em;
+            }
+
+            p+p {
+                margin-top: 2rem;
+
+                @media (width <= 1024px) {
+                    text-align: center;
+                }
+            }
+
+            .button {
+                line-height: 1;
+            }
+        }
+
+        > div:last-child {
+            width: 38%;
+            margin-top: -36px;
+            margin-bottom: -24px;
+            position: relative;
+            left: calc(-210px + min(20vw, 288px));
+
+            @media (width <= 1024px) {
+                width: fit-content;
+                margin: 0 auto;
+                left: unset;
+                padding-inline: 32px;
+            }
+
+            picture {
+                display: flex;
+                max-width: 100%;
+                object-fit: cover;
+            }
+
+            img {
+                position: absolute;
+                max-height: min(100%, 474px);
+                max-width: 474px;
+                height: auto;
+                width: auto;
+                aspect-ratio: 1 / 1;
+                box-shadow: rgb(0 0 0 / 15%) 0 8px 12px 6px, rgb(0 0 0 / 30%) 0 4px 4px;
+                border-radius: 100%;
+
+                @media (width <= 1024px) {
+                    position: static;
+                    max-width: min(100%, 300px);
+                    max-height: min(100%, 300px);
+                    margin-inline: auto;
+                    box-shadow: none;
+                }
+            }
+        }
+    }
+}

blocks/testimonial/testimonial.js

@@ -0,0 +1,14 @@
+export default function decorate(block) {
+  [...block.children].forEach((row) => {
+    row.classList.add('testimonial-item');
+
+    row.querySelectorAll('a').forEach((a) => {
+      const link = a.href;
+
+      if (!link.startsWith(window.location.origin)) {
+        a.setAttribute('target', '_blank');
+        a.setAttribute('rel', 'noopener noreferrer');
+      }
+    });
+  });
+}