update apollo widgets

src/_includes/components/landing/hero.njk

@@ -4,4 +4,6 @@
     <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>
+<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>

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

@@ -4,6 +4,7 @@
     <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 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>
   <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>

src/assets/styles/landing.scss

@@ -311,35 +311,24 @@ a.btn {
   transform: scaleX(-1);
 }
 
-.ap-widget-container {
+section#reviews {
+  overflow: visible;
+  width: 100%;
+  z-index: 6;
+  position: relative;
   width: 90vw;
-  text-align: center;
-
-  .glider-next,
-  .glider-prev {
-    img {
-      filter: invert(1);
-    }
+  
+  img {
+    display: unset;
+    width: auto;
   }
 
-  a {
-    color: var(--c-red1);
-    font-size: 0.7rem !important;
+  .ap-widget__logo--carousel {
+    display: none;
   }
 
-  .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;
+  p {
+    font-size: 0.9rem;
   }
 
   .glider-track {
@@ -349,54 +338,47 @@ a.btn {
     text-align: left;
   }
 
-  .ap-review {
+  .glider-dot.active {
+    background: var(--c-red1);
+  }
+
+  .ap-widget__review {
     height: 100% !important;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     margin: 0 !important;
     padding: 0 !important;
+    text-align: center;
+
+    &:hover {
+      font-size: unset;
+      opacity: 50%;
+    }
   }
 
-  .glider-dot.active {
-    background: var(--c-red1);
-  }
-
-  .glider-contain {
-    padding-left: 80px;
-    padding-right: 80px;
-  }
-
-  .ap-review-author,
-  .ap-read-more {
+  .ap-widget__author, .ap-widget__prod-rating-text--carousel  {
+    font-size: 0.7rem;
     color: var(--c-gray3) !important;
-  }
 
-  .ap-logo-c {
-    display: none!important;
-  }
+    a {
+      color: var(--c-red1)!important;
 
-  .ap-rev-stars {
-    display: flex;
+      &:hover {
+        font-size: unset;
+        font-weight: bold;
+      }
+    }
   }
 }
 
 @media screen and (max-width: 500px) {
-  #hero{
-    //margin-top: 25vh;
-  }
   .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;
-    }
+  .glider-dot {
+    height: 9px;
+    width: 9px;
   }
 }

src/assets/styles/powered-by.scss

@@ -76,11 +76,32 @@ svg a:visited {
 
 .ratings {
   display: flex;
-  flex-direction: row;
-  gap: 1rem;
+  flex-direction: column;
+  gap: 0.5rem;
   justify-content: center;
+  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;
+      }
+    }
+  }
+
   &-mobile {
     display: none
   }

src/index.njk

@@ -4,8 +4,6 @@ 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" %}
 
@@ -55,8 +53,7 @@ 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://ap-widget-2.s3.amazonaws.com/widget.min.js" defer=""></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>