Featured Streamers added to homepage

src/main/resources/static/css/home-custom-styles.css

@@ -43,4 +43,30 @@
       margin-left: auto;
       margin-right: auto;
     }
-  }
+  }
+
+  .btn-twitch {
+    color: #fff; /* white text */
+    background-color: #6441a5; /* Twitch brand color */
+    border-color: #6441a5; /* Border color same as background */
+}
+
+.btn-twitch:hover {
+    color: #fff; /* white text on hover */
+    background-color: #472f80; /* slightly darker shade of Twitch color for hover */
+    border-color: #3c2670; /* even darker for border on hover */
+}
+
+.btn-twitch:focus, .btn-twitch.focus {
+    box-shadow: 0 0 0 0.25rem rgba(100, 65, 165, 0.5); /* focus shadow with transparency */
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+    background-image: none;
+}
+
+.fa-arrow-left, .fa-arrow-right {
+    color: black; /* Adjust the color as needed */
+}
+

src/main/resources/static/index.html

@@ -341,8 +341,63 @@ <h2 class="fw-bolder">User testimonials</h2>
                 </div>
             </div>
         </section>
+        <!-- Streamers section-->
+        <section class="bg-light py-5 border-bottom">
+            <div class="container px-5 my-5">
+                <div class="text-center mb-5">
+                    <h2 class="fw-bolder">Featured Streamers</h2>
+                    <p class="lead mb-0">Checkout some awesome streamers that you may see using FlightDash.io!</p>
+                </div>
+                <!-- Card Carousel-->
+                <div id="streamerCarousel" class="carousel slide" data-bs-ride="carousel">
+                    <div class="carousel-inner">
+                        <div class="carousel-item active">
+                            <div class="d-flex justify-content-center">
+                                <div class="card" style="width: 25rem;">
+                                    <div class="card-header text-center"><h4><i class="fa-brands fa-youtube"></i> Midnight Maverick737</h4></div>
+                                    <div class="card-body text-center">
+                                        <img src="./assets/midnight-maverick-737.jpeg" class="card-img-top" alt="Streamer Image" style="width: 150px;">
+                                        <p class="card-text">Hello everyone! Welcome to Midnight maverick737
+                                            Maverick Mike here!
+                                            My channel is all about flight sim and Aviation
+                                            Come along as we journey around the world to new destinations and heights.
+                                            I will be posting videos from Xplane 11 and microsoft flight simulator 2020. 
+                                            Will take request for which planes to fly and where to fly too!
+                                            Appreciate  any and all support to help grow this channel!</p>
+                                        <a href="https://www.youtube.com/@midnightmaverick/streams" target="_blank" class="btn btn-danger"><i class="fa-brands fa-youtube"></i> Channel</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <div class="d-flex justify-content-center">
+                                <div class="card" style="width: 18rem;">
+                                    <div class="card-header text-center"><h4><i class="fa-brands fa-twitch"></i> flighthound</h4></div>
+                                    <div class="card-body text-center">
+                                        <img src="./assets/flight-hound-icon.png" class="card-img-top" alt="Streamer Image" style="width:150px;">
+                                        <p class="card-text">Software Engineer in the Aviation & Aerospace Industry. Flight Sim Hobbyist.</p>
+                                        <a href="https://www.twitch.tv/flighthound" target="_blank" class="btn btn-twitch"><i class="fa-brands fa-twitch"></i> Channel</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="carousel-control-prev" type="button" data-bs-target="#streamerCarousel" data-bs-slide="prev">
+                        <span class="carousel-control-prev-icon" aria-hidden="true">
+                            <i class="fa-solid fa-arrow-left"></i>
+                        </span>
+                    </button>
+                    <button class="carousel-control-next" type="button" data-bs-target="#streamerCarousel" data-bs-slide="next">
+                        <span class="carousel-control-next-icon" aria-hidden="true">
+                            <i class="fa-solid fa-arrow-right"></i>
+                        </span>
+                    </button>
+                </div>
+
+            </div>
+        </section>
         <!-- Support section-->
-        <section class="bg-light py-5">
+        <section class="py-5">
             <div class="container px-5 my-5 px-5">
                 <div class="text-center mb-5">
                     <div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="fa-solid fa-book"></i></div>

src/main/resources/static/script.js

@@ -6,7 +6,7 @@ var app = angular.module('checklistApp', []);
 app.controller('ChecklistController', ['$scope', '$sce', '$timeout', '$http', '$document', '$interval', function($scope, $sce, $timeout, $http, $document, $interval) {
 
 
-    $scope.versionNumber = '1.5.1'; 
+    $scope.versionNumber = '1.5.2'; 
 
     $scope.state = 'Idle';
     $scope.messages = [];