From 689b4ea233e3cfe9b3a0f0d7d30b3c6ab4fa62d1 Mon Sep 17 00:00:00 2001
From: Lucy <12953208+elvece@users.noreply.github.com>
Date: Mon, 22 Jan 2024 09:50:39 -0500
Subject: [PATCH] add promo video to hero and reorganize reviews (#36)

* add promo video to hero and reorganize reviews

* update video link

* update video link
---
 src/_includes/components/landing/hero.njk     |  12 +-
 .../components/landing/powered-by.njk         |   6 +-
 src/assets/styles/landing.scss                | 208 +++++++++++++-----
 src/assets/styles/main.scss                   |   2 +-
 src/assets/styles/peripheral.scss             |  28 +--
 src/assets/styles/powered-by.scss             |  60 +----
 src/contribute.njk                            |   2 +-
 src/jobs.njk                                  |   6 +-
 8 files changed, 182 insertions(+), 142 deletions(-)

diff --git a/src/_includes/components/landing/hero.njk b/src/_includes/components/landing/hero.njk
index 813f673..8b654f6 100644
--- a/src/_includes/components/landing/hero.njk
+++ b/src/_includes/components/landing/hero.njk
@@ -4,6 +4,12 @@
     <span>sovereign computing</span>
   </div>
 </section>
-<section id="reviews">
-  <div id= "ap-widget-1" class="ap-widget--carousel" data-options='{"prod_code": "startos", "show": "top" , "theme":  "dark", "template_id": "carousel", "text_color": "#F5F5F5" , "bg_color": "transparent" }'></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>
+</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
diff --git a/src/_includes/components/landing/powered-by.njk b/src/_includes/components/landing/powered-by.njk
index 05026d3..b2b78f7 100644
--- a/src/_includes/components/landing/powered-by.njk
+++ b/src/_includes/components/landing/powered-by.njk
@@ -1,9 +1,9 @@
 <section id="powered-by">
   <img class="logo" src="/assets/images/logomark.png" alt="Logomark">
   <h1>Powered by StartOS</h1>
-  <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 id="reviews">
+    <div id= "ap-widget-1" class="ap-widget--carousel" data-options='{"prod_code": "startos", "show": "top" , "theme":  "dark", "template_id": "carousel", "text_color": "#F5F5F5" , "bg_color": "transparent" }'></div>
+  </section>
   <p>Just as Windows and macOS made it possible for anyone to own a personal computer, StartOS makes it possible for anyone to own a personal server.</p>
   <p>StartOS facilitates the entire process of discovering, installing, configuring, and using any variety of open-source software from anywhere in the world without trusting anyone.</p>
   <p>
diff --git a/src/assets/styles/landing.scss b/src/assets/styles/landing.scss
index 3b60c88..e6d4629 100644
--- a/src/assets/styles/landing.scss
+++ b/src/assets/styles/landing.scss
@@ -1,17 +1,17 @@
-@use 'pitch';
-@use 'products';
-@use 'infographics';
-@use 'bitcoin';
-@use 'be-your-own';
-@use 'powered-by';
-@use 'support';
-@use 'dev';
-@use 'community';
-
+@use "pitch";
+@use "products";
+@use "infographics";
+@use "bitcoin";
+@use "be-your-own";
+@use "powered-by";
+@use "support";
+@use "dev";
+@use "community";
 
 body {
   margin: 0;
-  background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)), url("/assets/images/bkg.jpg");
+  background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)),
+    url("/assets/images/bkg.jpg");
   background-blend-mode: color, normal;
   background-size: cover;
   background-attachment: fixed;
@@ -19,29 +19,29 @@ body {
 }
 
 @supports (-webkit-touch-callout: none) {
-  /* CSS specific to iOS devices */ 
-  body{
+  /* CSS specific to iOS devices */
+  body {
     background: none;
     position: relative;
   }
-  body::after{
-    content:'';
+  body::after {
+    content: "";
     position: fixed;
     z-index: -1;
     width: 100vw;
     height: 100vh;
-    top:0;
+    top: 0;
     left: 0;
-    background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)), url("/assets/images/bkg.jpg");
+    background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)),
+      url("/assets/images/bkg.jpg");
     background-blend-mode: color, normal;
     background-size: auto 100vh;
     background-repeat: no-repeat;
   }
-
 }
 
 main {
-  display:flex;
+  display: flex;
   flex-direction: column;
   align-items: center;
 }
@@ -52,25 +52,25 @@ section {
   // padding: 0 var(--section-padding);
 }
 
-.subsection{
-  
+.subsection {
 }
 
 .line {
-  padding: 1.8rem 0 1.4rem 0;
+  // padding: 1.8rem 0 1.4rem 0;
+  padding: 4rem 0 3.8rem 0;
 }
 
-.line-primary path{
+.line-primary path {
   stroke: var(--c-line-primary);
   stroke-width: 1px;
   vector-effect: non-scaling-stroke;
 }
 
-.svg-primary{
+.svg-primary {
   fill: var(--c-text-primary);
 }
 
-.svg-secondary{
+.svg-secondary {
   fill: var(--c-bkg);
 }
 
@@ -78,26 +78,27 @@ section {
   box-shadow: var(--c-shadow-1) 0 3rem 3rem;
 }
 
-.section--inverse{
+.section--inverse {
   background-color: var(--c-bkg-light-fade2);
   backdrop-filter: blur(1rem);
-  h1, p {
+  h1,
+  p {
     color: var(--c-bkg);
   }
-  .svg-primary{
+  .svg-primary {
     fill: var(--c-bkg);
   }
-  .svg-secondary{
+  .svg-secondary {
     fill: var(--c-text-primary);
   }
 }
 
-.section--subtle{
+.section--subtle {
   background-color: var(--c-bkg-dark-fade2);
   backdrop-filter: blur(1rem);
 }
 
-.line svg{
+.line svg {
   width: calc(100vw - (2 * 6rem));
   max-width: 40vw;
   max-height: 40vh;
@@ -122,7 +123,7 @@ nav {
     padding-top: 1rem;
     text-transform: uppercase;
     font-weight: 400;
-    letter-spacing: .1ch;
+    letter-spacing: 0.1ch;
   }
   @keyframes fadeIn {
     0% {
@@ -134,24 +135,44 @@ nav {
     }
   }
   @keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
   @-moz-keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
   @-webkit-keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
   @-o-keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
   @-ms-keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 }
 
@@ -166,7 +187,7 @@ nav {
 
 h1 {
   font-family: var(--f-hero);
-  font-size: min(3.8rem,171px);
+  font-size: min(3.8rem, 171px);
   //text-transform: uppercase;
   line-height: 1;
   font-weight: 400;
@@ -245,12 +266,12 @@ a.btn {
   box-shadow: 0 1rem 1rem -0.5rem var(--c-shadow-3);
   border-radius: 34px;
 
-  &:hover{
+  &:hover {
     transform: scale(1.03);
     filter: brightness(120%);
   }
 
-  &.btn--subtle{
+  &.btn--subtle {
     color: var(--c-gray3);
     font-size: 1.2rem;
     &::before {
@@ -307,21 +328,26 @@ a.btn {
 }
 
 // flipping some lines horizontally
-#bitcoin-to-be, #be-to-powered, #powered-to-support, #support-to-dev {
+#bitcoin-to-be,
+#be-to-powered,
+#powered-to-support,
+#support-to-dev {
   transform: scaleX(-1);
 }
 
 section#reviews {
+  padding: 2.5rem 0 1rem 0;
   overflow: visible;
   z-index: 6;
   position: relative;
   width: 90vw;
-  
+
   p {
     font-size: 0.9rem;
   }
 
-  .ap-widget__rev-stars, .ap-widget--carousel__first-row img {
+  .ap-widget__rev-stars,
+  .ap-widget--carousel__first-row img {
     display: unset;
     width: auto;
   }
@@ -334,6 +360,7 @@ section#reviews {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: start;
     margin: 0 !important;
     padding: 0 !important;
 
@@ -343,12 +370,13 @@ section#reviews {
     }
   }
 
-  .ap-widget__author, .ap-widget__prod-rating-text--carousel  {
+  .ap-widget__author,
+  .ap-widget__prod-rating-text--carousel {
     font-size: 0.7rem;
     color: var(--c-gray3) !important;
 
     a {
-      color: var(--c-red1)!important;
+      color: var(--c-red1) !important;
 
       &:hover {
         font-size: unset;
@@ -357,7 +385,6 @@ section#reviews {
     }
   }
 
-
   .glider-track {
     display: grid;
     grid-auto-flow: column;
@@ -369,16 +396,71 @@ section#reviews {
   }
 
   .glider-next {
-    right: -30px!important;
+    right: -30px !important;
   }
 
   .glider-prev {
-    left: -30px!important;
+    left: -30px !important;
+  }
+}
+
+.ratings {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 2rem;
+
+  &-box {
+    align-self: end;
+  }
+
+  img {
+    display: unset;
+    width: auto;
+  }
+
+  .ap-widget__logo--mini {
+    display: none;
+  }
+
+  .ap-widget__prod-rating-text--mini {
+    a {
+      color: var(--c-red1) !important;
+
+      &:hover {
+        font-size: unset;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.video-container {
+  width: 70vw;
+}
+
+.video-wrapper {
+  position: relative;
+  padding-bottom: 56.25%;
+  /* 16:9 */
+  height: 0;
+
+  iframe {
+    border: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
   }
 }
 
 @media screen and (max-width: 500px) {
-  .line svg{
+  #hero {
+    margin-bottom: calc(-1 * (21vh - 4.5rem - (min(32.385rem, 58.3vw) / 2)));
+  }
+
+  .line svg {
     max-height: 17vh;
   }
 
@@ -391,10 +473,26 @@ section#reviews {
     .ap-widget__prod-rating-text--carousel {
       font-size: 0.8rem;
     }
-  
+
     .glider-dot {
       height: 9px;
       width: 9px;
     }
   }
+
+  .ratings {
+    &-gh-mobile {
+      display: block;
+    }
+
+    &-gh-desktop {
+      display: none;
+    }
+  }
+}
+
+@media only screen and (max-width: 1100px) {
+  .video-container {
+    width: 90vw;
+  }
 }
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 444df24..62e449a 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -477,7 +477,7 @@ nav {
   line-height: 1.4;
 }
 
-.center {
+.center-content {
   width: fit-content;
   align-self: center;
 }
diff --git a/src/assets/styles/peripheral.scss b/src/assets/styles/peripheral.scss
index f311635..107aab4 100644
--- a/src/assets/styles/peripheral.scss
+++ b/src/assets/styles/peripheral.scss
@@ -533,26 +533,6 @@ section#creators {
   }
 }
 
-.video-container {
-  width: 70vw;
-}
-
-.video-wrapper {
-  position: relative;
-  padding-bottom: 56.25%;
-  /* 16:9 */
-  height: 0;
-
-  iframe {
-    border: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
 a.btn {
   position: relative;
   padding: 0.7rem 1.7rem;
@@ -572,7 +552,7 @@ a.btn {
   }
 }
 
-.center {
+.text-center {
   text-align: center;
 }
 
@@ -673,12 +653,6 @@ section#faq {
   }
 }
 
-@media only screen and (max-width: 1100px) {
-  .video-container {
-    width: 90vw;
-  }
-}
-
 @media only screen and (max-width: 500px) {
   section {
     --width: 40ch;
diff --git a/src/assets/styles/powered-by.scss b/src/assets/styles/powered-by.scss
index b3116e6..771a10d 100644
--- a/src/assets/styles/powered-by.scss
+++ b/src/assets/styles/powered-by.scss
@@ -8,7 +8,7 @@ section#powered-by {
   h1 {
     margin-bottom: 16px;
     display: inline-block;
-    max-width: min(16ch,64vw);
+    max-width: min(16ch, 64vw);
   }
 
   .logo {
@@ -17,10 +17,10 @@ section#powered-by {
     margin: auto;
   }
 
-  .inline+p {
+  .inline + p {
     margin-top: -1.5rem;
   }
-  
+
   svg {
     --width: min(45rem, (100vw - 12rem));
     width: --width;
@@ -30,7 +30,7 @@ section#powered-by {
     height: calc((679 / 843) * var(--width)); // forcing aspect ratio for iOS
   }
 
-  a.source-link{
+  a.source-link {
     margin-top: 5rem;
     display: flex;
     align-items: center;
@@ -40,28 +40,27 @@ section#powered-by {
     line-height: 1;
     gap: 1rem;
     margin-bottom: -2rem;
-    img{
+    img {
       width: 10rem;
     }
-    span{
+    span {
       background-color: var(--c-text-accent);
       border-radius: 999px;
-      padding: .15em .6em;
-    transition: var(--t-simple);
+      padding: 0.15em 0.6em;
+      transition: var(--t-simple);
       white-space: nowrap;
     }
-    &:hover{
+    &:hover {
       transform: scale(1.05);
-      span{
+      span {
         background-color: var(--c-text-primary);
         color: var(--c-text-accent);
       }
     }
-    &.source-link--floated{
+    &.source-link--floated {
       position: absolute;
     }
   }
-
 }
 svg a:link,
 svg a:visited {
@@ -74,48 +73,11 @@ svg a:visited {
   justify-content: center;
 }
 
-.ratings {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 1rem;
-
-  img {
-    display: unset;
-    width: auto;
-  }
-
-  .ap-widget__logo--mini {
-    display: none;
-  }
-
-  .ap-widget__prod-rating-text--mini {
-    a {
-      color: var(--c-red1) !important;
-
-      &:hover {
-        font-size: unset;
-        font-weight: bold;
-      }
-    }
-  }
-}
-
 @media only screen and (max-width: 500px) {
   .container {
     width: 100vw;
   }
 
-  .ratings {
-    &-gh-mobile {
-      display: block;
-    }
-
-    &-gh-desktop {
-      display: none;
-    }
-  }
-
   section#powered-by .inline img {
     padding-bottom: 4.7rem;
   }
diff --git a/src/contribute.njk b/src/contribute.njk
index d4da4af..ed46e20 100644
--- a/src/contribute.njk
+++ b/src/contribute.njk
@@ -49,7 +49,7 @@ layout: layouts/peripheral.njk
 
   <h4>Benefits</h4>
   <p>Do what you love.  Get paid in Bitcoin.  Get early access to the bleeding edge of Sovereign Computing.</p>
-  <a href="{{ site.contribute.techDetails }}" class="btn center" rel="noopener noreferrer" target="_blank">More details</a>
+  <a href="{{ site.contribute.techDetails }}" class="btn center-content" rel="noopener noreferrer" target="_blank">More details</a>
 </section>
 <section id="creators">
   <h2>Creators</h2>
diff --git a/src/jobs.njk b/src/jobs.njk
index 881f919..5f4156a 100644
--- a/src/jobs.njk
+++ b/src/jobs.njk
@@ -9,7 +9,7 @@ layout: layouts/peripheral.njk
     <img class="img-shadow" src="/assets/images/jobs-hero.png" alt=""/>
   </div>
   <div id="logo">
-    <h1 class="center">
+    <h1 class="text-center">
       <span>Jobs</span>
     </h1>
   </div>
@@ -52,11 +52,11 @@ layout: layouts/peripheral.njk
     </ul>
   {% endif %}
   {% if jobs|length == 0 %}
-    <p class="center">
+    <p class="text-center">
       There are no open positions at Start9 at this time.
     </p>
     <br/>
-    <p class="center">
+    <p class="text-center">
       Check back soon!
     </p>
   {% endif %}