Add carousel for docs landing page (MonoGame#197)

Author: AristurtleDev

images/learn/2d-tutorial.webp

@@ -10,6 +10,59 @@ description: MonoGame Documentation Hub
         Whether you are just starting out with MonoGame or you have been using it for years, you can find all documentation and
         tutorials here.
     </p>
+    <div id="learnCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
+        <div class="carousel-indicators">
+            <button type="button" data-bs-target="#learnCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="2D Tutorial Slide"></button>
+            <!-- <button type="button" data-bs-target="#learnCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> -->
+            <!-- <button type="button" data-bs-target="#learnCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> -->
+        </div>
+        <div class="carousel-inner">
+            <div class="carousel-item active">
+                <img src="/images/learn/2d-tutorial.webp">
+                <div class="container">
+                    <div class="carousel-caption text-start">
+                        <h1>Build Your First 2D Game</h1>
+                        <p class="opacity-75">
+                            Follow our step-by-step guide to create your first MonoGame 2D project.
+                        </p>
+                        <p>
+                            <a class="btn btn-lg btn-primary" href="/articles/tutorials/building_2d_games/index.html">Start Tutorial</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <!--
+            <div class="carousel-item">
+                <img src="/images/learn/shader-tutrial.png">
+                <div class="container">
+                    <div class="carousel-caption text-start">
+                        <h1>Master Shaders</h1>
+                        <p class="opacity-75">
+                            Learn how to bring your graphics to life with custom effects
+                        </p>
+                        <p>
+                            <a class="btn btn-lg btn-pirmary" href="#">Coming Soon</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="carousel-item">
+                <img src="/images/learn/mobile-tutorial.png">
+                <div class="container">
+                    <div class="carousel-caption text-start">
+                        <h1>Deploy to Mobile</h1>
+                        <p class="opacity-75">
+                            Take your MonoGame project to Android and iOS.
+                        </p>
+                        <p>
+                            <a class="btn btn-lg btn-pirmary" href="#">Coming Soon</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            -->        
+        </div>
+    </div>
 </section>
 <section class="container-xxl mb-5" >
     <div class="row">

index.md

@@ -308,4 +308,117 @@ td > .xref {
 
 .question-answer.revealed * {
   opacity: 1;
-}
+}
+
+/*******************************************************************************
+*** Section: Carousel for docs landing page
+*******************************************************************************/
+.carousel {
+  margin-bottom: 3rem;
+  border: 1px solid;
+  border-color: var(--bs-body-color);
+  border-radius: .5rem;
+  overflow: hidden; 
+}
+
+.carousel-item {
+  height: 400px;
+  position: relative;
+}
+
+.carousel-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.carousel-item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 50%);
+  pointer-events: none;
+}
+
+.carousel-caption {
+  bottom: 0;
+  left: 0;
+  right: auto;
+  text-align: left;
+  padding: 3rem;
+  z-index: 10;
+  max-width: 600px;
+  color: white;
+}
+
+.carousel-caption h1 {
+  margin-top: 0;
+  font-weight: 700;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+.carousel-caption p {
+  color: white;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+  margin-bottom: 1.5rem;
+}
+
+.carousel-caption .btn {
+  background-color: var(--mg-orange-primary);
+  border-color: var(--mg-orange-primary);
+  color: white;
+  font-weight: 600;
+  padding: 0.75rem 2rem;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease-in-out;
+}
+
+.carousel-caption .btn:hover,
+.carousel-caption .btn:focus {
+  background-color: var(--mg-orange-secondary);
+  border-color: var(--mg-orange-secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.4);
+}
+
+.carousel-indicators {
+  margin-bottom: 1rem;
+}
+
+.carousel-indicators [data-bs-target] {
+  background-color: var(--mg-orange-secondary) !important;
+  opacity: 0.6;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: none;
+}
+
+.carousel-indicators .active {
+  opacity: 1;
+  background-color: var(--mg-orange-primary) !important;
+}
+
+@media (max-width: 768px) {
+  .carousel-item {
+    height: 300px;
+  }
+  
+  .carousel-caption {
+    padding: 2rem 1rem;
+    max-width: 100%;
+  }
+  
+  .carousel-caption h1 {
+    font-size: 1.75rem;
+  }
+  
+  .carousel {
+    margin-bottom: 3rem;
+  }
+}