Fine tuning changes

src/components/Link/Link.scss

@@ -60,6 +60,12 @@
   }
 }
 
+@media (min-width: 768px) {
+  .link {
+    font-size: 1.125rem;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .link {
     background: var(--darkmode-pink);

src/components/Navbar/Navbar.astro

@@ -34,9 +34,8 @@ const content = await getTranslatedContent("Header", lang!);
 </nav>
 
 <script>
-    const navbar = document.querySelector("#navbar");
-
     function handleScroll() {
+      const navbar = document.querySelector("#navbar");
       const scrollPosition = window.scrollY;
       if (scrollPosition > 0) {
         navbar?.classList.add("navbar--opaque");

src/components/Navbar/Navbar.scss

@@ -76,6 +76,7 @@
 @media (min-width: 1024px) {
   .navbar > ul {
     padding: 16px 64px;
+    gap: 64px;
   }
 
   .navbar__button {

src/layouts/Layout.astro

@@ -126,12 +126,16 @@ const { title } = Astro.props;
   }
 
   @media screen and (min-width: 992px) {
-    h2,
-    h3 {
+    h2 {
       font-size: 40px;
       line-height: 48px;
     }
 
+    h3 {
+      font-size: 32px;
+      line-height: 40px;
+    }
+
     p {
       font-size: 20px;
       line-height: 28px;

src/views/AboutUs/AboutUs.scss

@@ -78,7 +78,7 @@
     font-size: 40px;
     line-height: 48px;
     text-wrap: balance;
-    margin: 40px 0 24px 0;
+    margin: 0 0 24px 0;
   }
 
   > p {

src/views/Choices/Choices.scss

@@ -1,5 +1,6 @@
 .choices {
-  padding: max(5vh, 64px) 0 0 0;
+  padding: 0;
+  padding-top: 96px;
   display: flex;
   flex-direction: column;
   justify-content: start;
@@ -30,11 +31,10 @@
   flex-direction: column;
   justify-content: start;
   align-items: center;
-  padding: 64px 0 128px 0;
-  gap: 32px;
+  padding: 64px 0 164px 0;
+  gap: 40px;
 
   .choices__image-wrapper {
-    height: min(34vw, 750px);
     max-width: min(80%, 1320px);
   }
 
@@ -139,6 +139,11 @@
 }
 
 @media screen and (max-width: 850px) {
+
+  .choices {
+    padding-top: 64px;
+  }
+
   .choices p {
     margin: 0 32px;
   }

src/views/Features/Features.scss

@@ -5,10 +5,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-bottom: 64px;
+  margin-bottom: 96px;
 
   h2 {
-    margin: 24px 0;
+    margin: 44px 0 24px 0;
   }
 
   p {
@@ -27,17 +27,14 @@
   flex-direction: column;
   align-items: center;
   position: relative;
+  gap: 108px;
+  margin-top: 64px;
 }
 
 .features__feature {
   display: flex;
   flex-direction: row;
-  gap: 20px;
-  margin: 96px 0 0 0;
-
-  &:first-of-type {
-    margin-top: 20px;
-  }
+  gap: 56px;
 
   &--reverse {
     h3,
@@ -46,10 +43,6 @@
       margin-right: 0;
     }
   }
-
-  &:last-of-type {
-    margin-bottom: 96px;
-  }
 }
 
 .features__bg-line {
@@ -64,7 +57,6 @@
 }
 
 .features__text {
-  text-align: left;
   width: 25vw;
   display: flex;
   flex-direction: column;
@@ -75,11 +67,16 @@
   p {
     width: 256px;
   }
-}
 
-p {
-  font-size: 20px;
-  line-height: 28px;
+  > h3 {
+    margin-bottom: 20px;
+  }
+
+  > p {
+    font-size: 18px;
+    line-height: 24px;
+    text-align: left;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -89,15 +86,23 @@ p {
 }
 
 @media screen and (max-width: 1140px) {
+  .features {
+    margin-bottom: 64px;
+  }
+
   .features__placeholder {
     width: 100px;
   }
-}
 
-@media screen and (max-width: 965px) {
+  .features_list {
+    gap: 96px;
+  }
+
+
   .features__feature {
     flex-direction: column;
     align-items: center;
+    gap: 20px;
 
     &--reverse {
       flex-direction: column-reverse;
@@ -112,10 +117,11 @@ p {
         margin-top: 0;
         margin-bottom: 16px;
       }
-    }
 
-    &:last-of-type {
-      margin-bottom: 96px;
+      p {
+        text-align: center;
+      }
+
     }
   }
 

src/views/Feedback/Feedback.astro

@@ -28,10 +28,9 @@ export type FeedbackItem = {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 4vh;
 
     h2 {
-      margin: 24px 0;
+      margin: 128px 0 24px 0;
     }
     p {
       margin: 0;
@@ -56,7 +55,11 @@ export type FeedbackItem = {
 
   @media screen and (max-width: 992px) {
     .feedback {
-      margin-bottom: 8vh;
+      margin-bottom: 64px;
+
+      h2 {
+        margin-top: 64px;
+      }
     }
   }
 

src/views/ReachNewHeights/ReachNewHeights.scss

@@ -25,7 +25,7 @@
   gap: 24px;
 
   > h1 {
-    width: 90%;
+    width: 80%;
     font-size: 40px;
     line-height: 44px;
     font-weight: 700;
@@ -187,20 +187,20 @@
     padding-top: 233px;
   }
   .reach-new-heights__content {
-    padding-left: 32px;
+    padding-left: 128px;
     display: grid;
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    align-items: center;
-    justify-items: center;
+    align-items: start;
+    justify-items: start;
   }
   .reach-new-heights__headline {
     align-items: start;
     gap: 36px;
   }
   .reach-new-heights__buttons {
     justify-content: start;
-    margin-top: 56px;
+    margin-top: 64px;
     gap: 8px;
 
     & > button > span {

src/views/TargetUser/TargetUser.scss

@@ -1,16 +1,16 @@
 .target-user {
-  padding-top: 61px;
+  padding-top: 96px;
   padding-bottom: 44px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 10px;
   background-color: rgba(255, 0, 105, 0.02);
   color: var(--black);
 
   > h2 {
     text-align: center;
     margin: 0;
+    margin-bottom: 24px;
   }
   > p {
     text-align: center;
@@ -27,19 +27,10 @@
   display: none;
 }
 
-@media (min-width: 768px) {
-  .target-user {
-    gap: 22px;
 
-    > h2 {
-      font-size: 40px;
-      line-height: 48px; /* 120% */
-    }
-    > p {
-      font-size: 24px;
-      font-weight: 500;
-      line-height: 32px; /* 133.333% */
-    }
+@media screen and (max-width: 1140px) {
+  .target-user {
+    padding-top: 64px;
   }
 }
 

src/views/Uniqueness/Uniqueness.scss

@@ -16,6 +16,10 @@ $uniqueness-image-count: 4; // Number of images
   }
 }
 
+.uniqueness__text > h3 {
+  margin-bottom: 24px;
+}
+
 
 .uniqueness__section {
   display: flex;
@@ -33,18 +37,22 @@ $uniqueness-image-count: 4; // Number of images
 
     &--0 {
       right: -32px;
+      top: 138px;
     }
 
     &--1 {
       left: -16px;
+      top: 200px;
     }
 
     &--2 {
       right: -50px;
+      top: 146px;
     }
 
     &--3 {
       left: -48px;
+      top: 146px;
     }
   }
 
@@ -62,7 +70,7 @@ $uniqueness-image-count: 4; // Number of images
     > h3,
     p {
       width: fit-content;
-      max-width: 360px;
+      max-width: 450px;
       text-wrap: balance;
       margin-left: 64px;
     }