fixed stamp position

apps/web/src/components/FooterSection/FooterSection.module.scss

@@ -64,9 +64,9 @@
     z-index: 1;
 
     @media screen and (max-width: 684px) {
-      font-size: 64px;
-      line-height: 62px;
-      letter-spacing: -3px;
+      font-size: 17.02vw;
+      line-height: 16.49vw;
+      letter-spacing: -0.8723vw;
     }
   }
 
@@ -92,6 +92,11 @@
     transition: 300ms;
     padding: 14px 16px;
     margin-top: 32px;
+
+    @media screen and (max-width: 400px) {
+      font-size: 4.5vw;
+      letter-spacing: 0.27vw;
+    }
   }
 
   .grainyButton {
@@ -197,6 +202,10 @@
 
 .bottomWrapper {
   padding: 0px 32px;
+
+  @media screen and (max-width: 450px) {
+    padding: 0px;
+  }
 }
 
 .questionsWrapper {
@@ -213,7 +222,6 @@
 
 .socialsWrapper {
   display: flex;
-  height: fit-content;
   position: absolute;
   bottom: -38px;
 
@@ -230,15 +238,8 @@
     }
 
     @media screen and (max-width: 650px) {
-      width: 106px;
-      height: 106px;
-      margin-left: -12px;
-      margin-right: -12px;
-    }
-
-    @media screen and (max-width: 361px) {
-      width: 94px;
-      height: 94px;
+      width: 28vw;
+      height: 28vw;
     }
   }
 }
@@ -251,35 +252,35 @@
   margin-top: 52px;
 
   @media screen and (max-width: 650px) {
-    margin-top: 68px;
+    margin-top: 18.09vw;
+    margin-left: -5.374vw;
   }
 }
 
 .facebook {
   margin-top: 28px;
 
   @media screen and (max-width: 650px) {
-    margin-top: 16px;
+    margin-top: 4.255vw;
+    margin-left:2.39vw;
   }
 }
 
 .linkedin {
   margin-top: 60px;
 
   @media screen and (max-width: 650px) {
-    margin-top: 83px;
+    margin-top: 22.07vw;
+    margin-left: -4.02vw;
   }
 }
 
 .instagram {
   height: 162px;
 
   @media screen and (max-width: 650px) {
-    height: 106px;
-  }
-
-  @media screen and (max-width: 361px) {
-    height: 94px;
+    margin-left: -7.69vw;
+    height: 28vw;
   }
 }
 
@@ -309,5 +310,6 @@
   @media screen and (max-width: 1032px) {
     flex-direction: column;
     text-align: center;
+    padding: 0px;
   }
 }

apps/web/src/components/FrequentlyAskedQuestionsSection/FrequentlyAskedQuestionsSection.module.scss

@@ -11,6 +11,10 @@
     padding: 119px 16px 176px 16px;
   }
 
+  @media (max-width: 380px) {
+    padding: 119px 4.255vw 176px 4.255vw;
+  }
+
   &:before {
     content: '';
     background-image: url(../../assets/images/noise.webp);
@@ -39,6 +43,10 @@
     font-weight: 500;
     line-height: 144px;
     letter-spacing: -5.025px;
+
+    @media (max-width: 380px) {
+      font-size: 31.9149vw;
+    }
   }
 }
 
@@ -60,6 +68,15 @@
   &Index {
     @include mixins.themeBadge();
     margin-top: 4px;
+
+    @media (max-width: 380px) {
+      font-size: 8px;
+      line-height: 8vw;
+      padding: 1.064vw 4.255vw;
+      margin-top: 1.064vw;
+      height: 10px;
+      width: 20px;
+    }
   }
 
   &Info {
@@ -68,6 +85,10 @@
     @media (max-width: 1200px) {
       margin-left: 24px;
     }
+
+    @media (max-width: 380px) {
+      margin-left: 6.383vw;
+    }
   }
 
   &Question {
@@ -86,6 +107,11 @@
       letter-spacing: -0.16px;
       font-size: 16px;
     }
+
+    @media (max-width: 380px) {
+      font-size: 12px;
+      line-height: 15px; 
+    }
   }
 
   &Answer {
@@ -100,6 +126,11 @@
     font-style: normal;
     font-weight: 500;
     line-height: 22px;
+
+    @media (max-width: 380px) {
+      font-size: 12px;
+      line-height: 15px; 
+    }
   }
 
   &Button {

apps/web/src/components/LocationSection/LocationSection.module.scss

@@ -44,11 +44,11 @@ div {
   letter-spacing: -11.916px;
 
   @media (max-width: 1390px) {
-    padding-top: 90px;
-
-    font-size: 69.968px;
-    line-height: 87.46px;
-    letter-spacing: -3.28px;
+    padding-top: 5.312vw;
+    
+    font-size: 18.601vw;
+    line-height: 23.26vw;
+    letter-spacing: -0.872vw;
   }
 
   &Container {
@@ -174,8 +174,10 @@ div {
       letter-spacing: -1px;
 
       @media (max-width: 1390px) {
-        font-size: 26px;
-        line-height: 26px;
+        padding-top: 23.94vw;
+
+        font-size: 6.915vw;
+        line-height: 6.915vw;
         letter-spacing: -0.544px;
       }
     }
@@ -296,59 +298,61 @@ div {
 
 .date {
   margin-top: vw-calc(76);
-  padding-left: vw-calc(27);
+  margin-left: vw-calc(37);
   position: relative;
-  width: 100%;
 
-  &Text {
-    display: inline;
+  @mixin sharedTextStyles {
+    display: inline-flex;
     color: #fff;
     text-align: center;
     font-feature-settings: 'ss12' on;
     font-family: 'PP Neue Machina';
-    font-size: vw-calc(250.265);
+    font-size: vw-calc(268.265);
     font-style: normal;
     font-weight: 500;
-    line-height: vw-calc(262.265);
-    letter-spacing: vw-calc(5.245);
+    line-height: vw-calc(266);
     text-transform: uppercase;
     opacity: 0.2;
     mix-blend-mode: overlay;
 
     @media (max-width: 992px) {
       font-size: vw-mid-calc(65.491);
       line-height: vw-mid-calc(64.026);
+    }
+  }
+
+  &Text {
+    @include sharedTextStyles;
+    letter-spacing: vw-calc(5.245);
+
+    @media (max-width: 992px) {
       letter-spacing: vw-mid-calc(1.281);
     }
   }
 
+  &SecondPart {
+    @include sharedTextStyles;
+    letter-spacing: vw-calc(13.987);
+    text-wrap: nowrap;
+
+    @media (max-width: 992px) {
+      letter-spacing: vw-mid-calc(3.415);
+    }
+  }
+
   &Span {
-    display: none;
-    position: relative;
-    display: inline;
-    color: transparent;
-    text-align: center;
-    font-feature-settings: 'ss12' on;
-    font-family: 'PP Neue Machina', sans-serif;
-    font-size: vw-calc(268.265);
-    font-style: normal;
-    font-weight: 500;
-    line-height: vw-calc(262.265);
-    letter-spacing: vw-calc(5.245);
-    text-transform: uppercase;
+    position: absolute;
+    left: vw-calc(556);
+    top: vw-calc(6);
 
     &Image {
       position: absolute;
       z-index: 1;
-      top: vw-calc(12);
-      right: 0;
-      left: 0;
       margin: 0 auto;
       width: vw-calc(254);
       height: vw-calc(182);
 
       @media (max-width: 992px) {
-        top: vw-mid-calc(2);
         width: vw-mid-calc(69.273);
         height: vw-mid-calc(49.637);
       }
@@ -357,13 +361,9 @@ div {
     &::after {
       content: '';
       position: absolute;
-      top: vw-calc(-40);
-      right: 0;
-      left: 0;
+      top: - vw-calc(52);
+      left: vw-calc(22);
       margin: 0 auto;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       width: vw-calc(210.721);
       height: vw-calc(286);
       background-image: url('../../assets/stamp.svg');
@@ -373,18 +373,22 @@ div {
       transform: rotate(-90deg);
 
       @media (max-width: 992px) {
-        top: vw-mid-calc(-12);
+        left: vw-mid-calc(5.9015);
+        top: vw-mid-calc(-14.182);
         width: vw-mid-calc(57.47);
         height: vw-mid-calc(78.001);
       }
     }
 
     @media (max-width: 992px) {
-      font-size: vw-mid-calc(65.491);
-      line-height: vw-mid-calc(64.026);
-      letter-spacing: vw-mid-calc(1.281);
+      left: vw-mid-calc(136.14);
+      top: vw-mid-calc(4.52);
     }
   }
+  @media (max-width: 992px) {
+    margin-left: vw-mid-calc(17.22);
+    margin-top: 0px;
+  }
 }
 
 .imageBreaker {

apps/web/src/components/LocationSection/LocationSection.tsx

@@ -48,17 +48,15 @@ const LocationSection = () => {
         <div className={c.dottedRuler}></div>
       </div>
       <div className={c.date}>
-        <p className={c.dateText}>23. </p>
+        <p className={c.dateText}>23. — 24.</p>
         <span className={c.dateSpan}>
-          {' '}
-          —{' '}
           <img
             src={splitStamp}
             alt='split stamp'
             className={c.dateSpanImage}
           />{' '}
         </span>
-        <p className={c.dateText}>24. 05. 2024.</p>
+        <p className={c.dateSecondPart}>05. 2024</p>
       </div>
       <div className={c.dateBreaker}>
         <SectionBreaker fg='light' />

package.json

@@ -1,7 +1,7 @@
 {
   "devDependencies": {
     "eslint": "^8.55.0",
-    "turbo": "^2.2.3"
+    "turbo": "^2.3.2"
   },
   "private": true,
   "packageManager": "[email protected]",