BloomFeed ADD EN TRANSLATION v0.23

lang/de/app.php

@@ -38,6 +38,8 @@ return [
     'badge_open_source' => 'Open Source',
     'badge_mit_license' => 'MIT-Lizenz',
     'badge_four_languages' => '4 Sprachen',
+    'feature_multiuser_title' => 'Gemacht für dein Zuhause',
+    'feature_multiuser_text' => 'Lade vertraute Personen mit einem direkten Konto ein, oder öffne die Registrierung für eine Weile — jeder behält seine eigenen Feeds, Lektüre und Benachrichtigungen.',
 
     // Authentifizierung
     'login_title' => 'Anmelden',

lang/en/app.php

@@ -38,6 +38,8 @@ return [
     'badge_open_source' => 'Open-source',
     'badge_mit_license' => 'MIT license',
     'badge_four_languages' => '4 languages',
+    'feature_multiuser_title' => 'Built for your household',
+    'feature_multiuser_text' => 'Invite the people you trust with a direct account, or open registrations for a while — everyone keeps their own feeds, reads and notifiers.',
 
     // Authentication
     'login_title' => 'Log in',

lang/es/app.php

@@ -38,6 +38,8 @@ return [
     'badge_open_source' => 'Código abierto',
     'badge_mit_license' => 'Licencia MIT',
     'badge_four_languages' => '4 idiomas',
+    'feature_multiuser_title' => 'Pensado para tu hogar',
+    'feature_multiuser_text' => 'Invita a las personas de confianza con una cuenta directa, o abre los registros por un tiempo — cada uno mantiene sus propias fuentes, lecturas y notificadores.',
 
     // Autenticación
     'login_title' => 'Iniciar sesión',

lang/fr/app.php

@@ -38,6 +38,8 @@ return [
     'badge_open_source' => 'Open-source',
     'badge_mit_license' => 'Licence MIT',
     'badge_four_languages' => '4 langues',
+    'feature_multiuser_title' => 'Pensé pour votre foyer',
+    'feature_multiuser_text' => "Invitez les personnes de confiance avec un compte direct, ou ouvrez les inscriptions un moment — chacun garde ses propres flux, lectures et notifieurs.",
 
     // Authentification
     'login_title' => 'Connexion',

public/css/app.css

@@ -503,10 +503,22 @@ h1, h2, h3 {
     margin: 0 auto;
     padding: 0 var(--space-5) var(--space-8);
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     gap: var(--space-5);
 }
 
+@media (max-width: 860px) {
+    .feature-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 560px) {
+    .feature-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
 .feature-card {
     background: var(--surface);
     border: 1px solid var(--border);
@@ -548,7 +560,7 @@ h1, h2, h3 {
     border-radius: var(--radius);
     font-size: 2.1rem;
     margin-bottom: var(--space-4);
-    color: var(--accent-contrast);
+    color: #fff;
     background: var(--gradient-accent);
     box-shadow: var(--shadow-accent);
     transition: transform var(--t-base);
@@ -557,6 +569,8 @@ h1, h2, h3 {
 .feature-icon-2 { background: linear-gradient(135deg, var(--green) 0%, #7fd19e 100%); }
 .feature-icon-3 { background: linear-gradient(135deg, #6ba7e8 0%, #a3c9f7 100%); }
 .feature-icon-4 { background: linear-gradient(135deg, #e88a6b 0%, var(--sun-bright) 100%); }
+.feature-icon-5 { background: linear-gradient(135deg, #8b6bd1 0%, #b79bea 100%); }
+.feature-icon-6 { background: linear-gradient(135deg, #d1568b 0%, #ea9bc1 100%); }
 
 .feature-card:hover .feature-icon {
     transform: scale(1.12) rotate(-4deg);

resources/views/home.blade.php

@@ -1,5 +1,15 @@
 @extends('layouts.marketing', ['title' => 'BloomFeed'])
 
+@php
+    // Screenshots live under images/screenshots/{locale}/ so each language can show its own
+    // captures; falls back to the French set until the other locales are captured too.
+    $screenshotUrl = function (string $file) {
+        $localized = 'images/screenshots/' . app()->getLocale() . '/' . $file;
+        $path = file_exists(public_path($localized)) ? $localized : 'images/screenshots/fr/' . $file;
+        return asset($path);
+    };
+@endphp
+
 @section('content')
 <section class="hero">
     <div class="hero-orbs" aria-hidden="true">
@@ -42,8 +52,8 @@
                     <span class="browser-dot browser-dot-yellow"></span>
                     <span class="browser-dot browser-dot-green"></span>
                 </div>
-                <img src="{{ asset('images/screenshots/dashboard-light.png') }}" alt="BloomFeed dashboard" class="browser-frame-img browser-frame-img-light">
-                <img src="{{ asset('images/screenshots/dashboard-dark.png') }}" alt="BloomFeed dashboard" class="browser-frame-img browser-frame-img-dark">
+                <img src="{{ $screenshotUrl('dashboard-light.png') }}" alt="BloomFeed dashboard" class="browser-frame-img browser-frame-img-light">
+                <img src="{{ $screenshotUrl('dashboard-dark.png') }}" alt="BloomFeed dashboard" class="browser-frame-img browser-frame-img-dark">
             </div>
         </div>
     </div>
@@ -70,6 +80,16 @@
         <h3>{{ __('app.notifiers') }}</h3>
         <p>{{ __('app.notifiers_lede') }}</p>
     </div>
+    <div class="feature-card reveal">
+        <div class="feature-icon feature-icon-5"><i class="fa-solid fa-compass"></i></div>
+        <h3>{{ __('app.catalog_title') }}</h3>
+        <p>{{ __('app.catalog_lede') }}</p>
+    </div>
+    <div class="feature-card reveal">
+        <div class="feature-icon feature-icon-6"><i class="fa-solid fa-users"></i></div>
+        <h3>{{ __('app.feature_multiuser_title') }}</h3>
+        <p>{{ __('app.feature_multiuser_text') }}</p>
+    </div>
 </section>
 
 <section class="screenshots-section">
@@ -95,12 +115,12 @@
                 <span class="browser-dot browser-dot-yellow"></span>
                 <span class="browser-dot browser-dot-green"></span>
             </div>
-            <img id="screenshotMainImg" class="browser-frame-img" src="{{ asset('images/screenshots/' . $screenshots[0]['file']) }}" alt="{{ $screenshots[0]['caption'] }}">
+            <img id="screenshotMainImg" class="browser-frame-img" src="{{ $screenshotUrl($screenshots[0]['file']) }}" alt="{{ $screenshots[0]['caption'] }}">
         </div>
         <div class="screenshot-thumbs">
             @foreach ($screenshots as $index => $shot)
-                <button type="button" class="screenshot-thumb {{ $index === 0 ? 'active' : '' }}" data-img="{{ asset('images/screenshots/' . $shot['file']) }}" data-caption="{{ $shot['caption'] }}">
-                    <img src="{{ asset('images/screenshots/' . $shot['file']) }}" alt="{{ $shot['caption'] }}" loading="lazy">
+                <button type="button" class="screenshot-thumb {{ $index === 0 ? 'active' : '' }}" data-img="{{ $screenshotUrl($shot['file']) }}" data-caption="{{ $shot['caption'] }}">
+                    <img src="{{ $screenshotUrl($shot['file']) }}" alt="{{ $shot['caption'] }}" loading="lazy">
                 </button>
             @endforeach
         </div>