Up to Bloom v0.23

public/css/app.css

@@ -382,6 +382,99 @@ h1, h2, h3 {
     margin: 0;
 }
 
+/* ---------- Screenshots (landing page) ---------- */
+
+.screenshots-section {
+    max-width: 980px;
+    margin: 0 auto;
+    padding: 0 var(--space-5) var(--space-8);
+}
+
+.screenshots-header {
+    text-align: center;
+    margin-bottom: var(--space-6);
+}
+
+.screenshots-header h2 {
+    font-size: var(--font-2xl);
+    margin-bottom: var(--space-2);
+}
+
+.screenshots-header p {
+    color: var(--text-muted);
+    font-size: var(--font-md);
+    max-width: 620px;
+    margin: 0 auto;
+}
+
+.screenshot-gallery {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-4);
+    animation: fade-up 600ms var(--ease-out) both;
+}
+
+.screenshot-main {
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-lg);
+    background: var(--surface);
+}
+
+.screenshot-main img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.screenshot-thumbs {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+.screenshot-thumb {
+    width: 84px;
+    height: 56px;
+    padding: 0;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    border: 2px solid var(--border);
+    background: none;
+    cursor: pointer;
+    opacity: 0.55;
+    transition: opacity var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
+}
+
+.screenshot-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.screenshot-thumb:hover {
+    opacity: 0.85;
+    transform: translateY(-2px);
+}
+
+.screenshot-thumb.active {
+    opacity: 1;
+    border-color: var(--accent);
+}
+
+.screenshot-caption {
+    color: var(--text-muted);
+    font-size: var(--font-sm);
+    margin: 0;
+}
+
 /* ---------- Page docs / self-hosting ---------- */
 
 .docs-list {

public/js/screenshot-gallery.js

@@ -0,0 +1,51 @@
+(function () {
+    var AUTOPLAY_DELAY = 4500;
+
+    document.addEventListener('DOMContentLoaded', function () {
+        var thumbs = document.querySelectorAll('.screenshot-thumb');
+        var mainImg = document.getElementById('screenshotMainImg');
+        var caption = document.getElementById('screenshotCaption');
+
+        if (!thumbs.length || !mainImg) {
+            return;
+        }
+
+        var index = 0;
+        var autoplay = null;
+
+        function activate(i) {
+            thumbs.forEach(function (thumb) { thumb.classList.remove('active'); });
+            thumbs[i].classList.add('active');
+            mainImg.src = thumbs[i].getAttribute('data-img');
+            if (caption) {
+                caption.textContent = thumbs[i].getAttribute('data-caption');
+            }
+            index = i;
+        }
+
+        function startAutoplay() {
+            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                return;
+            }
+            autoplay = setInterval(function () {
+                activate((index + 1) % thumbs.length);
+            }, AUTOPLAY_DELAY);
+        }
+
+        function resetAutoplay() {
+            if (autoplay) {
+                clearInterval(autoplay);
+            }
+            startAutoplay();
+        }
+
+        thumbs.forEach(function (thumb, i) {
+            thumb.addEventListener('click', function () {
+                activate(i);
+                resetAutoplay();
+            });
+        });
+
+        startAutoplay();
+    });
+})();