CHORE Renaming app.js in app.ts

resources/css/app.css

@@ -43,6 +43,7 @@
 @import './blocks/heading.css';
 @import './blocks/decorative-shapes.css';
 @import './blocks/narrative-card.css';
+@import './blocks/scroll-story-block.css';
 
 /* ########### LIBS ############ */
 @import './libs/swiper.css';

resources/css/blocks/narrative-card.css

@@ -1,28 +1,53 @@
 .narrative-card {
-  @apply bg-white border border-primary p-12 mx-auto max-w-screen-lg;
+  @apply p-12 py-24 mx-auto max-w-screen-lg;
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+  &:after {
+    content: '';
+    background-image: url('../resources/img/skew-background.svg');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    @apply absolute inset-0;
+    transform: scaleX(-1);
+  }
+
+  .narrative-card__cover {
+    @apply rotate-3;
+  }
+
+  &--even,
+  &:nth-of-type(even) {
+    &:after {
+      transform: scaleX(1);
+    }
+    .narrative-card__cover {
+      @apply rotate-[-3deg];
+    }
+  }
 
   &--has-cover {
-    @apply grid grid-cols-2 gap-32 items-center;
-    grid-template-columns: 4fr 1fr;
+    @apply grid grid-cols-2 gap-24 items-center;
+    grid-template-columns: 3.5fr 1fr;
 
     &--left {
-      grid-template-columns: 1fr 4fr;
+      grid-template-columns: 1fr 3.5fr;
     }
   }
 
   &__cover {
-    @apply w-full h-auto object-cover border border-primary mx-auto;
+    --margin: 1rem;
+    @apply flex justify-center items-center w-full h-auto object-cover border border-primary mx-auto;
     aspect-ratio: 1/1;
-  }
 
-  &:nth-child(odd) {
-    .narrative-card__cover {
-      @apply rotate-3;
-    }
-  }
-  &:nth-child(even) {
-    .narrative-card__cover {
-      @apply rotate-[-3deg];
+    img {
+      @apply w-full h-full object-cover;
+      width: calc(100% - var(--margin));
+      height: calc(100% - var(--margin));
+      object-position: center;
     }
   }
 

resources/css/blocks/scroll-story-block.css

@@ -0,0 +1,3 @@
+.scroll-story-block {
+  @apply py-12 flex flex-col gap-12;
+}

resources/img/skew-background.svg

@@ -0,0 +1,3 @@
+<svg width="1216" height="407" viewBox="0 0 1216 407" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+<path d="M0.5 11.1045V406.5H1205.51L1215.49 0.503906L0.5 11.1045Z" fill="white" stroke="#136F63"/>
+</svg>

resources/js/app.ts

@@ -1,5 +1,6 @@
 import menuInit from './header';
 import initFooterShapes from './footer';
+
 window.addEventListener('load', function () {
   menuInit();
   initFooterShapes();