feat: added ladel to exaple block

Author: Lisofffa

website/public/themes/dark/icons/home/arrow-example-1-bottom.svg

@@ -1,6 +1,7 @@
 :root {
   --black: #000000;
   --black-1d: #1d1d1d;
+  --black-1b: #1b1b1b;
   --black-30: #303030;
   --black-22: #222;
   --black-48: rgba(48, 48, 48, 0);
@@ -40,6 +41,8 @@
   --fs-18-24: 18px;
   --fs-36-96: 36px;
   --fs-24-36: 24px;
+  --fs-12-14: 12px;
+  --fs-10-12: 10px;
 
   //
 
@@ -57,6 +60,9 @@
     --fs-18-24: calc(18px + 6 * ((100vw - 375px) / 1065));
     --fs-24-36: calc(24px + 12 * ((100vw - 375px) / 1065));
     --fs-36-96: calc(36px + 60 * ((100vw - 375px) / 1065));
+    --fs-12-14: calc(12px + 2 * ((100vw - 375px) / 1065));
+    --fs-10-12: calc(10px + 2 * ((100vw - 375px) / 1065));
+
   }
 
   @media screen and (min-width: 1440px) {
@@ -68,5 +74,7 @@
     --fs-18-24: 24px;
     --fs-36-96: 96px;
     --fs-24-36: 36px;
+    --fs-12-14: 14px;
+    --fs-10-12: 12px;
   }
 }

website/public/themes/dark/icons/home/arrow-example-1.svg

@@ -19,10 +19,61 @@
   flex-direction: column;
   gap: 5rem;
   margin-top: 2.5rem;
+  position: relative;
+}
+
+.label {
+  position: absolute;
+  z-index: 2;
+
+  &--top-1 {
+    right: 20em;
+    top: 19em;
+  }
+
+  &--bottom-1 {
+    right: 15em;
+    top: -1em;
+  }
+
+  &--top-2 {
+    left: 14em;
+    bottom: 17em;
+  }
+
+  &--bottom-2 {
+    left: 20em;
+    bottom: 1em;
+  }
+}
+
+.labelImg {
+  position: absolute;
+
+  &--bottom-1 {
+    left: 10em;
+    bottom: -7em;
+  }
+
+  &--top-1 {
+    bottom: 17em;
+    left: 7em;
+  }
+
+  &--bottom-2 {
+    right: 10em;
+    top: 9em;
+  }
+
+  &--top-2 {
+    top: 1em;
+    right: 10em;
+  }
 }
 
 .exampleBlock {
   display: flex;
+  justify-content: space-between;
   align-items: center;
   gap: 3.75rem;
 
@@ -37,6 +88,7 @@
   will-change: transform, opacity;
   transform: translateY(1.25rem);
   opacity: 0;
+  max-width: 50%;
 }
 
 .exampleImage {
@@ -45,15 +97,17 @@
   border-radius: .625rem;
   transition: none;
 
-  &:hover{
-    transform: none!important;
+  &:hover {
+    transform: none !important;
     cursor: default;
   }
 }
 
 .content {
   flex: 1;
   min-width: 0;
+  max-width: 25rem;
+
 }
 
 .exampleTitle {
@@ -66,12 +120,58 @@
   margin-top: 1.25rem;
   font-size: var(--fs-14-16);
   line-height: 1.49;
+  white-space: pre-line;
+}
+
+
+
+@media (max-width: 1185px) {
+
+  .label {
+    &--top-1 {
+      right: 15em;
+      top: 17em;
+    }
+
+    &--top-2 {
+      left: 14em;
+      bottom: 15em;
+    }
+
+    &--bottom-2 {
+      left: 15em;
+      bottom: 0;
+    }
+  }
+
+  .labelImg {
+    &--bottom-1 {
+      bottom: -8em;
+    }
+
+    &--top-1 {
+      bottom: 15em;
+    }
+
+    &--bottom-2 {
+      top: 7em;
+    }
+  }
+}
+
+@media (max-width: 950px) {
+  .labelImg{
+    display: none;
+  }
+  
+  .label{
+    display: none;
+  }
 }
 
-// Мобильная версия
 @media (max-width: 768px) {
   .wrapper {
-   margin-top: 4rem;
+    margin-top: 4rem;
   }
 
   .examplesContainer {
@@ -84,6 +184,15 @@
 
     &.reverse {
       flex-direction: column;
+      margin-top: 2.5rem;
     }
   }
+
+  .content{
+    max-width: none;
+  }
+
+  .imageContainer{
+    max-width: none;
+  }
 }