From f32bd9a91991216d27174c0756e6e768c87a0e61 Mon Sep 17 00:00:00 2001
From: Manuel Brandstetter <accounts@manuelbrandstetter.dev>
Date: Fri, 8 Dec 2023 12:04:37 +0100
Subject: [PATCH] Fine tuning changes

---
 src/components/Link/Link.scss                 |  6 +++
 src/components/Navbar/Navbar.astro            |  3 +-
 src/components/Navbar/Navbar.scss             |  1 +
 src/layouts/Layout.astro                      |  8 ++-
 src/views/AboutUs/AboutUs.scss                |  2 +-
 src/views/Choices/Choices.scss                | 13 +++--
 src/views/Features/Features.scss              | 50 +++++++++++--------
 src/views/Feedback/Feedback.astro             |  9 ++--
 .../ReachNewHeights/ReachNewHeights.scss      | 10 ++--
 src/views/TargetUser/TargetUser.scss          | 19 ++-----
 src/views/Uniqueness/Uniqueness.scss          | 10 +++-
 11 files changed, 77 insertions(+), 54 deletions(-)

diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss
index 4063117..f019750 100644
--- a/src/components/Link/Link.scss
+++ b/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);
diff --git a/src/components/Navbar/Navbar.astro b/src/components/Navbar/Navbar.astro
index 5ae1217..fc832fc 100644
--- a/src/components/Navbar/Navbar.astro
+++ b/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");
diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
index 650f282..0eecd46 100644
--- a/src/components/Navbar/Navbar.scss
+++ b/src/components/Navbar/Navbar.scss
@@ -76,6 +76,7 @@
 @media (min-width: 1024px) {
   .navbar > ul {
     padding: 16px 64px;
+    gap: 64px;
   }
 
   .navbar__button {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 24fad0c..50ad953 100644
--- a/src/layouts/Layout.astro
+++ b/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;
diff --git a/src/views/AboutUs/AboutUs.scss b/src/views/AboutUs/AboutUs.scss
index cbe51b0..978381c 100644
--- a/src/views/AboutUs/AboutUs.scss
+++ b/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 {
diff --git a/src/views/Choices/Choices.scss b/src/views/Choices/Choices.scss
index f7e6543..029a6de 100644
--- a/src/views/Choices/Choices.scss
+++ b/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;
   }
diff --git a/src/views/Features/Features.scss b/src/views/Features/Features.scss
index ea27a15..cf1704d 100644
--- a/src/views/Features/Features.scss
+++ b/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;
+      }
+
     }
   }
 
diff --git a/src/views/Feedback/Feedback.astro b/src/views/Feedback/Feedback.astro
index 043079c..e267a5c 100644
--- a/src/views/Feedback/Feedback.astro
+++ b/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;
+      }
     }
   }
 
diff --git a/src/views/ReachNewHeights/ReachNewHeights.scss b/src/views/ReachNewHeights/ReachNewHeights.scss
index 0ab5415..836d16d 100644
--- a/src/views/ReachNewHeights/ReachNewHeights.scss
+++ b/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,12 +187,12 @@
     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;
@@ -200,7 +200,7 @@
   }
   .reach-new-heights__buttons {
     justify-content: start;
-    margin-top: 56px;
+    margin-top: 64px;
     gap: 8px;
 
     & > button > span {
diff --git a/src/views/TargetUser/TargetUser.scss b/src/views/TargetUser/TargetUser.scss
index 0da64fe..ecb61d3 100644
--- a/src/views/TargetUser/TargetUser.scss
+++ b/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;
   }
 }
 
diff --git a/src/views/Uniqueness/Uniqueness.scss b/src/views/Uniqueness/Uniqueness.scss
index 56e984c..7c3fbfc 100644
--- a/src/views/Uniqueness/Uniqueness.scss
+++ b/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;
     }