Add some testimonials

inc/home.css

@@ -255,3 +255,27 @@ footer h5 {
   opacity: 0;
   transform: translateX(5em);
 }
+
+/* testimonials */
+#testimonials {
+  padding: 0.5em 0 0.5em 0;
+}
+
+.testimonial {
+  text-align: center;
+  margin-bottom: 1.5em;
+}
+
+.testimonial .review {
+  padding: 0 3.5em 0 3.5em;
+  font-style: italic;
+}
+
+.testimonial .author {
+  margin-top: 1em;
+  font-weight: bold;
+}
+
+.testimonial .rating {
+  margin-top: 0.5em;
+}

inc/home.js

@@ -16,3 +16,16 @@ window.addEventListener('load', function() {
         observer.observe(reveal);
     });
 });
+
+/* carousel */
+window.addEventListener('load', function() {
+    const glider = new Glider(document.querySelector('.glider'), {
+        slidesToShow: 1,
+        dots: '#dots',
+        draggable: true,
+        arrows: {
+            prev: '.glider-prev',
+            next: '.glider-next'
+        }
+    });
+});

index.html

@@ -12,12 +12,14 @@
     <meta property="og:url" content="https://opensurge2d.org/">
     <meta property="og:image" content="https://opensurge2d.org/img/surge.png">
     <script async src="//gc.zgo.at/count.js" data-goatcounter="https://opensurge.goatcounter.com/count"></script>
+    <script src="/inc/glider.min.js"></script>
     <script src="/inc/home.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/grids-responsive-min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="stylesheet" href="/inc/glider.min.css">
     <link rel="stylesheet" href="/inc/home.css">
     <link rel="shortcut icon" href="/favicon.ico">
   </head>
@@ -117,6 +119,40 @@ <h2>Open-source & cross-platform</h2>
           </div>
         </section>
 
+        <section id="testimonials">
+          <div class="h-padding">
+            <h2 class="text-center">What our users are saying</h2>
+          </div>
+          <div class="glider-contain">
+            <div class="glider">
+              <article class="testimonial">
+                <div class="review">
+                  <q>This is a review FOR THE ANDROID PORT ONLY. And it's AMAZING. It was about time, but you REALLY cooked a 5-star meal! Just as I remember it, but on mobile! I just wish you could completely disable the on-screen controls to play with a gamepad and avoid accidental touch screen touches.</q>
+                </div>
+                <div class="author">Samuel the Techno Kid</div>
+                <div class="rating">&#x2B50;&#x2B50;&#x2B50;&#x2B50;&#x2B50;</div>
+              </article>
+              <article class="testimonial">
+                <div class="review">
+                  <q>I just wanted to say bravo to the team for making this project. Finally being able to play this on my Android device felt amazing, and the controls were smooth!</q>
+                </div>
+                <div class="author">Sonic the Fantastic</div>
+                <div class="rating">&#x2B50;&#x2B50;&#x2B50;&#x2B50;&#x2B50;</div>
+              </article>
+              <article class="testimonial">
+                <div class="review">
+                  <q>This game is really great!First... players can design their own levels using sprite sheets,Secondly, the level itself is not very difficult, so it is easy to get started,I’m looking forward to the subsequent finished product and process.</q>
+                </div>
+                <div class="author">nepcap</div>
+                <div class="rating">&#x2B50;&#x2B50;&#x2B50;&#x2B50;&#x2B50;</div>
+              </article>
+            </div> 
+            <button aria-label="Previous" class="glider-prev">«</button>
+            <button aria-label="Next" class="glider-next">»</button>
+            <div role="tablist" class="dots"></div>
+          </div>
+        </section>
+
         <section id="learn">
           <div class="h-padding">
             <h2 class="text-center">Plenty of learning materials</h2>