From 9b7bb51c25dfbff988868b96a30e9950242e4e48 Mon Sep 17 00:00:00 2001
From: Lucy <12953208+elvece@users.noreply.github.com>
Date: Mon, 22 Jan 2024 12:15:49 -0500
Subject: [PATCH] fix spacing with video (#40)

---
 src/_includes/components/landing/hero.njk | 17 ++++++++---------
 src/assets/js/header.js                   |  4 ++--
 src/assets/styles/landing.scss            | 14 +++++++++++---
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/_includes/components/landing/hero.njk b/src/_includes/components/landing/hero.njk
index 8b654f6..f0571d9 100644
--- a/src/_includes/components/landing/hero.njk
+++ b/src/_includes/components/landing/hero.njk
@@ -3,13 +3,12 @@
     {% include "svgs/start9-brand.svg" %}
     <span>sovereign computing</span>
   </div>
-</section>
-<div class="video-container">
-  <div class="video-wrapper">
-    <iframe src="https://www.youtube.com/embed/52XMf_NabFA?si=aIlLu0puOOY2_r0b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-
+  <div class="video-container">
+    <div class="video-wrapper">
+      <iframe src="https://www.youtube.com/embed/52XMf_NabFA?si=aIlLu0puOOY2_r0b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+    </div>
   </div>
-</div>
-<div class="ratings">
-  <div id= "ap-widget-2" class="ap-widget--mini" data-options='{"prod_code": "startos", "theme":  "dark", "template_id": "mini", "text_color": "#F5F5F5" , "bg_color": "transparent" }'></div>
-</div>
\ No newline at end of file
+  <div class="ratings">
+    <div id= "ap-widget-2" class="ap-widget--mini" data-options='{"prod_code": "startos", "theme":  "dark", "template_id": "mini", "text_color": "#F5F5F5" , "bg_color": "transparent" }'></div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/src/assets/js/header.js b/src/assets/js/header.js
index 5e98474..33cb05f 100644
--- a/src/assets/js/header.js
+++ b/src/assets/js/header.js
@@ -8,7 +8,7 @@ gsap.to("header", {
   scrollTrigger: {
     trigger: "#hero",
     scrub: true,
-    start: "center top", // "triggerElement page"
+    start: "top top", // "triggerElement page"
     end: "bottom top", // "triggerElement page"
   },
 });
@@ -20,7 +20,7 @@ gsap.to(".header__logo", {
   scrollTrigger: {
     trigger: "#hero",
     scrub: true,
-    start: "center top", // "triggerElement page"
+    start: "top top", // "triggerElement page"
     end: "bottom top", // "triggerElement page"
   },
 });
\ No newline at end of file
diff --git a/src/assets/styles/landing.scss b/src/assets/styles/landing.scss
index e6d4629..c76565b 100644
--- a/src/assets/styles/landing.scss
+++ b/src/assets/styles/landing.scss
@@ -115,6 +115,8 @@ nav {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: 4rem;
+
   svg {
     width: 20rem;
     margin-top: 0.6rem;
@@ -182,7 +184,8 @@ nav {
   align-items: center;
   justify-content: center;
   height: 100vh;
-  margin-bottom: calc(-1 * (50vh - 4.5rem - (min(32.385rem, 58.3vw) / 2)));
+  padding-top: 15rem;
+  margin-bottom: 4rem;
 }
 
 h1 {
@@ -408,7 +411,7 @@ section#reviews {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 2rem;
+  padding-top: 4rem;
 
   &-box {
     align-self: end;
@@ -419,6 +422,10 @@ section#reviews {
     width: auto;
   }
 
+  .ap-widget--mini {
+    padding-top: 0;
+  }
+
   .ap-widget__logo--mini {
     display: none;
   }
@@ -457,7 +464,8 @@ section#reviews {
 
 @media screen and (max-width: 500px) {
   #hero {
-    margin-bottom: calc(-1 * (21vh - 4.5rem - (min(32.385rem, 58.3vw) / 2)));
+    margin-bottom: -20rem;
+    padding-top: 0;
   }
 
   .line svg {