Add screenshot carousel to GitHub Pages hero section

Author: CCMurphy-dev

docs/index.html

@@ -43,8 +43,25 @@ <h1>Practice radiology reporting with your own cases</h1>
                 <a href="#how-it-works" class="btn btn-secondary">Learn More</a>
             </div>
             <div class="hero-image">
-                <div class="screenshot-placeholder">
-                    <span>Screenshots coming soon</span>
+                <div class="carousel" id="carousel">
+                    <div class="carousel-track">
+                        <div class="carousel-slide active"><img src="screenshots/1. muninn-admin-home.png" alt="Home"></div>
+                        <div class="carousel-slide"><img src="screenshots/2.1 muninn-admin-organizer.png" alt="DICOM Organizer"></div>
+                        <div class="carousel-slide"><img src="screenshots/2.2 muninn-admin-organizer-2.png" alt="DICOM Organizer"></div>
+                        <div class="carousel-slide"><img src="screenshots/3. muninn-admin database.png" alt="Case Database"></div>
+                        <div class="carousel-slide"><img src="screenshots/3.1 muninn-admin database analytics.png" alt="Database Analytics"></div>
+                        <div class="carousel-slide"><img src="screenshots/4.0 muninn-admin playlist.png" alt="Playlist Builder"></div>
+                        <div class="carousel-slide"><img src="screenshots/5 muninn-admin exam-builder.png" alt="Exam Builder"></div>
+                        <div class="carousel-slide"><img src="screenshots/6.0 muninn-admin exam marker.png" alt="Exam Marker"></div>
+                        <div class="carousel-slide"><img src="screenshots/7.0 muninn-admin dashboard registry.png" alt="Trainee Registry"></div>
+                        <div class="carousel-slide"><img src="screenshots/7.1 muninn-admin dashboard overview.png" alt="Dashboard Overview"></div>
+                        <div class="carousel-slide"><img src="screenshots/7.2 muninn-admin trainee-analytics.png" alt="Trainee Analytics"></div>
+                        <div class="carousel-slide"><img src="screenshots/8.0 muninn-admin SQL database.png" alt="SQL Database"></div>
+                    </div>
+                    <button class="carousel-btn carousel-prev" aria-label="Previous">&#8592;</button>
+                    <button class="carousel-btn carousel-next" aria-label="Next">&#8594;</button>
+                    <div class="carousel-caption"></div>
+                    <div class="carousel-dots"></div>
                 </div>
             </div>
         </div>
@@ -347,6 +364,48 @@ <h2>Licensing</h2>
         </div>
     </footer>
     <script>
+    (function() {
+        var carousel = document.getElementById('carousel');
+        if (!carousel) return;
+        var slides = carousel.querySelectorAll('.carousel-slide');
+        var captionEl = carousel.querySelector('.carousel-caption');
+        var dotsEl = carousel.querySelector('.carousel-dots');
+        var current = 0;
+        var timer;
+
+        // Build dots
+        slides.forEach(function(slide, i) {
+            var dot = document.createElement('button');
+            dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');
+            dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
+            dot.addEventListener('click', function() { goTo(i); resetTimer(); });
+            dotsEl.appendChild(dot);
+        });
+
+        function goTo(n) {
+            slides[current].classList.remove('active');
+            dotsEl.children[current].classList.remove('active');
+            current = (n + slides.length) % slides.length;
+            slides[current].classList.add('active');
+            dotsEl.children[current].classList.add('active');
+            captionEl.textContent = slides[current].querySelector('img').alt;
+        }
+
+        function resetTimer() {
+            clearInterval(timer);
+            timer = setInterval(function() { goTo(current + 1); }, 4000);
+        }
+
+        carousel.querySelector('.carousel-prev').addEventListener('click', function() { goTo(current - 1); resetTimer(); });
+        carousel.querySelector('.carousel-next').addEventListener('click', function() { goTo(current + 1); resetTimer(); });
+        carousel.addEventListener('mouseenter', function() { clearInterval(timer); });
+        carousel.addEventListener('mouseleave', resetTimer);
+
+        goTo(0);
+        resetTimer();
+    })();
+    </script>
+    <script>
     (function() {
         var toggle = document.querySelector('.theme-toggle');
         if (!toggle) return;

docs/style.css

@@ -269,13 +269,97 @@ body.theme-transition *::after {
     margin: 0 auto;
 }
 
-.screenshot-placeholder {
+.carousel {
+    position: relative;
+    border-radius: var(--radius);
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
     background: var(--color-bg-alt);
-    border: 2px dashed var(--color-border);
+    user-select: none;
+}
+
+.carousel-track {
+    position: relative;
+}
+
+.carousel-slide {
+    display: none;
+}
+
+.carousel-slide.active {
+    display: block;
+}
+
+.carousel-slide img {
+    width: 100%;
+    height: auto;
+    display: block;
     border-radius: var(--radius);
-    padding: var(--spacing-xl);
-    color: var(--color-text-light);
+}
+
+.carousel-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.45);
+    color: white;
+    border: none;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
     font-size: 1.1rem;
+    cursor: pointer;
+    z-index: 10;
+    transition: background 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.carousel-btn:hover {
+    background: rgba(0, 0, 0, 0.7);
+}
+
+.carousel-prev { left: 12px; }
+.carousel-next { right: 12px; }
+
+.carousel-caption {
+    position: absolute;
+    bottom: 36px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding: 0.2rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    white-space: nowrap;
+    pointer-events: none;
+}
+
+.carousel-dots {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 6px;
+}
+
+.carousel-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.45);
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    transition: background 0.2s, transform 0.2s;
+}
+
+.carousel-dot.active {
+    background: white;
+    transform: scale(1.3);
 }
 
 /* Problem Section */