diff --git a/.env.example b/.env.example index 74ad02d..90c3eee 100644 --- a/.env.example +++ b/.env.example @@ -4,7 +4,7 @@ APP_KEY= APP_DEBUG=false APP_URL=http://localhost:7081 -APP_LOCALE=fr +APP_LOCALE=en APP_FALLBACK_LOCALE=en APP_FAKER_LOCALE=fr_FR diff --git a/lang/de/app.php b/lang/de/app.php index a0bab3a..ad8015e 100644 --- a/lang/de/app.php +++ b/lang/de/app.php @@ -27,6 +27,13 @@ return [ 'feature_reader_text' => 'BloomFeed ruft die Originalseite ab, extrahiert den Hauptinhalt und zeigt ihn sauber an — Schluss mit zehn offenen Tabs.', 'feature_home_title' => 'Bei dir, für dich', 'feature_home_text' => 'Eine BloomFeed-Instanz = ein Besitzer. Keine öffentlichen Registrierungen standardmäßig, kein Tracking, dein Server, deine Daten.', + 'screenshots_title' => 'So sieht’s aus', + 'screenshots_lede' => 'Ein kurzer Blick auf das Dashboard, den integrierten Reader, den Feed-Katalog und den Benachrichtigungsbildschirm.', + 'screenshot_dashboard' => 'Dashboard', + 'screenshot_dark' => 'Dunkelmodus', + 'screenshot_reader' => 'Integrierter Reader', + 'screenshot_catalog' => 'Feed-Katalog mit einem Klick', + 'screenshot_notifiers' => 'Discord- und Webhook-Benachrichtigungen', // Authentifizierung 'login_title' => 'Anmelden', diff --git a/lang/en/app.php b/lang/en/app.php index 0dcf721..b696ff2 100644 --- a/lang/en/app.php +++ b/lang/en/app.php @@ -27,6 +27,13 @@ return [ 'feature_reader_text' => 'BloomFeed fetches the source page, extracts the main content and displays it cleanly — no more juggling ten tabs.', 'feature_home_title' => 'Your home, your rules', 'feature_home_text' => 'One BloomFeed instance = one owner. No public sign-ups by default, no tracking, your server, your data.', + 'screenshots_title' => 'See it in action', + 'screenshots_lede' => 'A quick look at the dashboard, the built-in reader, the feed catalog and the notifiers screen.', + 'screenshot_dashboard' => 'Dashboard', + 'screenshot_dark' => 'Dark mode', + 'screenshot_reader' => 'Built-in reader', + 'screenshot_catalog' => 'One-click feed catalog', + 'screenshot_notifiers' => 'Discord & webhook notifiers', // Authentication 'login_title' => 'Log in', diff --git a/lang/es/app.php b/lang/es/app.php index 7abd201..474aeed 100644 --- a/lang/es/app.php +++ b/lang/es/app.php @@ -27,6 +27,13 @@ return [ 'feature_reader_text' => 'BloomFeed recupera la página original, extrae el contenido principal y lo muestra limpiamente — se acabó abrir diez pestañas.', 'feature_home_title' => 'En tu casa, para ti', 'feature_home_text' => 'Una instancia de BloomFeed = un propietario. Sin registros públicos por defecto, sin rastreo, tu servidor, tus datos.', + 'screenshots_title' => 'En imágenes', + 'screenshots_lede' => 'Un vistazo rápido al panel, al lector integrado, al catálogo de fuentes y a la pantalla de notificadores.', + 'screenshot_dashboard' => 'Panel', + 'screenshot_dark' => 'Modo oscuro', + 'screenshot_reader' => 'Lector integrado', + 'screenshot_catalog' => 'Catálogo de fuentes en un clic', + 'screenshot_notifiers' => 'Notificadores de Discord y webhook', // Autenticación 'login_title' => 'Iniciar sesión', diff --git a/lang/fr/app.php b/lang/fr/app.php index 843e46e..132bb8f 100644 --- a/lang/fr/app.php +++ b/lang/fr/app.php @@ -27,6 +27,13 @@ return [ 'feature_reader_text' => "BloomFeed récupère la page source, en extrait le contenu principal et l'affiche proprement — plus besoin d'ouvrir dix onglets.", 'feature_home_title' => 'Chez vous, pour vous', 'feature_home_text' => "Une instance BloomFeed = un propriétaire. Pas d'inscriptions publiques par défaut, pas de tracking, votre serveur, vos données.", + 'screenshots_title' => 'En images', + 'screenshots_lede' => 'Un aperçu rapide du tableau de bord, du lecteur intégré, du catalogue de flux et de l’écran des notifieurs.', + 'screenshot_dashboard' => 'Tableau de bord', + 'screenshot_dark' => 'Mode sombre', + 'screenshot_reader' => 'Lecteur intégré', + 'screenshot_catalog' => 'Catalogue de flux en un clic', + 'screenshot_notifiers' => 'Notifieurs Discord et webhook', // Authentification 'login_title' => 'Connexion', diff --git a/public/css/app.css b/public/css/app.css index 63d0336..43cba50 100644 --- a/public/css/app.css +++ b/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 { diff --git a/public/images/screenshots/catalog-light.png b/public/images/screenshots/catalog-light.png new file mode 100644 index 0000000..ae1739d Binary files /dev/null and b/public/images/screenshots/catalog-light.png differ diff --git a/public/images/screenshots/dashboard-dark.png b/public/images/screenshots/dashboard-dark.png new file mode 100644 index 0000000..6447fa2 Binary files /dev/null and b/public/images/screenshots/dashboard-dark.png differ diff --git a/public/images/screenshots/dashboard-light.png b/public/images/screenshots/dashboard-light.png new file mode 100644 index 0000000..7a4de1e Binary files /dev/null and b/public/images/screenshots/dashboard-light.png differ diff --git a/public/images/screenshots/notifiers-light.png b/public/images/screenshots/notifiers-light.png new file mode 100644 index 0000000..e2bac6a Binary files /dev/null and b/public/images/screenshots/notifiers-light.png differ diff --git a/public/images/screenshots/reader-light.png b/public/images/screenshots/reader-light.png new file mode 100644 index 0000000..d5c006d Binary files /dev/null and b/public/images/screenshots/reader-light.png differ diff --git a/public/js/screenshot-gallery.js b/public/js/screenshot-gallery.js new file mode 100644 index 0000000..e1525be --- /dev/null +++ b/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(); + }); +})(); diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 66f27fc..5e43865 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -33,5 +33,43 @@
{{ __('app.feature_home_text') }}
+{{ __('app.notifiers_lede') }}
+{{ __('app.screenshots_lede') }}
+{{ $screenshots[0]['caption'] }}
+