add apollo ratings and github star link; todo add mini ratings to hero (#29)

* add apollo ratings and github star link; todo add mini ratings to hero

* mobile style fixes

* move reviews to top; move star to startos section; make lines smaller

* dont display ticker on mobile

src/_includes/components/landing/hero.njk

@@ -4,3 +4,4 @@
     <span>sovereign computing</span>
   </div>
 </section>
+<div id="ap-widget-container" class="ap-widget-container" prod_code="startos" show ="top" bg_color="transparent" text_color = "#d1d1d1"></div>

src/_includes/components/landing/powered-by.njk

@@ -1,6 +1,10 @@
 <section id="powered-by">
   <img class="logo" src="/assets/images/logomark.png" alt="Logomark">
   <h1>Powered by StartOS</h1>
+    <div class="ratings">
+    <iframe class="ratings-desktop" src="https://ghbtns.com/github-btn.html?user=Start9Labs&repo=start-os&type=star&count=true&size=large" frameborder="0" scrolling="0" width="135" height="30" title="GitHub"></iframe>
+    <iframe class="ratings-mobile" src="https://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="112" height="20" title="GitHub"></iframe>
+  </div>
   <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>

src/_includes/svgs/lines/be-to-powered.svg

@@ -1,3 +1,3 @@
-<svg class="line-primary" viewBox="0 0 117 380" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="line-primary" viewBox="0 0 117 380" height="200" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M115 0V71.3869H2V380" vector-effect="non-scaling-stroke"/>
 </svg>

src/_includes/svgs/lines/bitcoin-to-be.svg

@@ -1,3 +1,3 @@
-<svg class="line-primary" viewBox="0 0 158 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="line-primary" viewBox="0 0 158 600" height="240" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2 0V302.19H156.737V600" vector-effect="non-scaling-stroke"/>
 </svg>

src/_includes/svgs/lines/dev-to-contact.svg

@@ -1,3 +1,3 @@
-<svg class="line-primary" viewBox="0 0 38 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="line-primary" viewBox="0 0 38 204" height="170" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2 0V100.63H36V204" vector-effect="non-scaling-stroke"/>
 </svg>

src/_includes/svgs/lines/hero-to-pitch.svg

@@ -2,7 +2,7 @@
    class="line-primary"
    viewBox="0 0 420 511"
    width="420"
-   height="511"
+   height="200"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

src/_includes/svgs/lines/powered-to-support.svg

@@ -1,3 +1,3 @@
-<svg class="line-primary" viewBox="0 0 298 380" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="line-primary" viewBox="0 0 298 380" height="180" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M296 0V150H2V380" vector-effect="non-scaling-stroke"/>
 </svg>

src/_includes/svgs/lines/products-to-info.svg

@@ -1,3 +1,3 @@
-<svg class="line-primary" viewBox="0 0 523 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="line-primary" viewBox="0 0 523 600" height="240" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M267 0V442.55H139V600" vector-effect="non-scaling-stroke"/>
 </svg>

src/_includes/svgs/lines/support-to-dev.svg

@@ -1,3 +1,3 @@
-<svg class="line-primary" viewBox="0 0 188 267" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="line-primary" viewBox="0 0 188 267" height="175" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.99999 0V186.197H186V267" vector-effect="non-scaling-stroke"/>
 </svg>

src/assets/styles/be-your-own.scss

@@ -55,6 +55,12 @@
   }
 }
 
+@media screen and (max-width: 500px) {
+  #ticker {
+    display: none;
+  }
+}
+
 #be-your-own {
   display: flex;
   flex-direction: column;

src/assets/styles/landing.scss

@@ -40,7 +40,7 @@ body {
 
 }
 
-main{
+main {
   display:flex;
   flex-direction: column;
   align-items: center;
@@ -311,6 +311,75 @@ a.btn {
   transform: scaleX(-1);
 }
 
+.ap-widget-container {
+  width: 90vw;
+  text-align: center;
+
+  .glider-next,
+  .glider-prev {
+    img {
+      filter: invert(1);
+    }
+  }
+
+  a {
+    color: var(--c-red1);
+    font-size: 0.7rem !important;
+  }
+
+  .ap-avg-rat-c {
+    // font-variant: all-small-caps;
+    text-transform: none;
+    font-size: 0.7rem !important;
+  }
+
+  .glider-slide:hover {
+    background-color: transparent !important;
+    opacity: 50%;
+  }
+
+  .glider-dots {
+    padding: 1rem;
+  }
+
+  .glider-track {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 1rem;
+    text-align: left;
+  }
+
+  .ap-review {
+    height: 100% !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .glider-dot.active {
+    background: var(--c-red1);
+  }
+
+  .glider-contain {
+    padding-left: 80px;
+    padding-right: 80px;
+  }
+
+  .ap-review-author,
+  .ap-read-more {
+    color: var(--c-gray3) !important;
+  }
+
+  .ap-logo-c {
+    display: none!important;
+  }
+
+  .ap-rev-stars {
+    display: flex;
+  }
+}
 
 @media screen and (max-width: 500px) {
   #hero{
@@ -319,4 +388,15 @@ a.btn {
   .line svg{
     max-height: 30vh;
   }
+  .ap-widget-container {
+    .ap-logo-c {
+      width: 65px !important;
+      border-radius: 2.7rem;
+      padding: 6px 8px !important;
+    }
+
+    .glider-contain {
+      padding: 0 40px;
+    }
+  }
 }

src/assets/styles/powered-by.scss

@@ -74,12 +74,38 @@ svg a:visited {
   justify-content: center;
 }
 
+.ratings {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  justify-content: center;
+  margin: 1rem;
+
+  &-mobile {
+    display: none
+  }
+
+  &-desktop {
+    display: block;
+  }
+}
+
 @media only screen and (max-width: 500px) {
   .container {
     width: 100vw;
   }
 
-  section#powered-by .inline img{
+  .ratings {
+    &-mobile {
+      display: block;
+    }
+
+    &-desktop {
+      display: none;
+    }
+  }
+
+  section#powered-by .inline img {
     padding-bottom: 4.7rem;
   }
 }

src/index.njk

@@ -4,6 +4,8 @@ layout: layouts/base.njk
 ---
 
 <link rel="stylesheet" href="/@root/src/assets/styles/landing.scss">{{ __slinkity.head | safe }}
+<link rel="stylesheet" href="https://ap-widget.s3.amazonaws.com/css/glider.min.css" />
+<link rel="stylesheet" href="https://ap-widget.s3.amazonaws.com/css/widget.min.css" />
 
 {% include "components/landing/hero.njk" %}
 
@@ -53,6 +55,8 @@ layout: layouts/base.njk
 
 {% include "components/landing/community.njk" %}
 
+<script type="text/javascript" src="https://ap-widget.s3.amazonaws.com/glider.min.js"></script>
+<script type="text/javascript" src="https://ap-widget.s3.amazonaws.com/widget.min.js" async></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/CustomEase.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>