Trusted by section

src/App/assets/scss/components/_custom.scss

@@ -801,6 +801,75 @@ h1.error-code {
   }
 }
 
+/* ============================================================
+   Adopters
+   ============================================================ */
+
+.trusted-by {
+  padding: 28px 0;
+  background: var(--rose);
+  border-top: 1px solid rgba(255, 255, 255, .15);
+  border-bottom: 1px solid rgba(255, 255, 255, .15);
+}
+
+html[data-theme="dark"] .trusted-by {
+  background: var(--bg);
+  border-top-color: var(--border-soft);
+  border-bottom-color: var(--border-soft);
+}
+
+.trusted-by-label {
+  margin: 0 0 16px;
+  text-align: center;
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, .8);
+}
+
+.trusted-by-viewport {
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+}
+
+.trusted-by-track {
+  display: flex;
+  align-items: center;
+  width: max-content;
+  animation: trusted-by-scroll linear infinite;
+}
+
+.trusted-by-viewport:hover .trusted-by-track {
+  animation-play-state: paused;
+}
+
+.trusted-by-group {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  padding-right: 40px;
+  flex: 0 0 auto;
+}
+
+.trusted-by-logo {
+  height: 32px;
+  width: auto;
+  flex: 0 0 auto;
+}
+
+@keyframes trusted-by-scroll {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .trusted-by-track {
+    animation: none;
+  }
+}
+
 /* ============================================================
    Split / traits
    ============================================================ */

src/App/src/Handler/GetIndexViewHandler.php

@@ -13,9 +13,19 @@
 use Psr\Http\Message\ServerRequestInterface;
 use Psr\Http\Server\RequestHandlerInterface;
 
+use function array_map;
+use function basename;
 use function file_get_contents;
+use function glob;
 use function is_file;
+use function pathinfo;
+use function sort;
 use function str_contains;
+use function str_replace;
+use function ucwords;
+
+use const GLOB_BRACE;
+use const PATHINFO_FILENAME;
 
 class GetIndexViewHandler implements RequestHandlerInterface
 {
@@ -41,7 +51,32 @@ public function handle(ServerRequestInterface $request): ResponseInterface
 
         $posts = $this->postRepository->getRecentPosts(3);
         return new HtmlResponse(
-            $this->template->render('app::index', ['posts' => $posts])
+            $this->template->render('app::index', [
+                'posts'        => $posts,
+                'adopterLogos' => $this->getAdopterLogos(),
+            ])
+        );
+    }
+
+    /**
+     * @return list<array{file: string, alt: string}>
+     */
+    private function getAdopterLogos(): array
+    {
+        $files = glob($this->mdPagesPath . '/images/app/content/adopters/*.{png,jpg,jpeg,svg,webp}', GLOB_BRACE);
+        if ($files === false) {
+            return [];
+        }
+
+        $names = array_map(basename(...), $files);
+        sort($names);
+
+        return array_map(
+            static fn (string $name): array => [
+                'file' => $name,
+                'alt'  => ucwords(str_replace(['-', '_'], ' ', pathinfo($name, PATHINFO_FILENAME))),
+            ],
+            $names
         );
     }
 }

src/App/templates/app/index.html.twig

@@ -43,6 +43,23 @@
         </div>
     </section>
 
+    {% if adopterLogos is defined and adopterLogos is not empty %}
+        <section class="trusted-by">
+            <div class="wrap trusted-by-viewport">
+                <p class="trusted-by-label">Trusted by teams running Dotkernel in production</p>
+                <div class="trusted-by-track" style="animation-duration: {{ (adopterLogos|length * 5)|round(0, 'ceil') }}s;">
+                    {% for i in 0..1 %}
+                        <div class="trusted-by-group" aria-hidden="{{ i == 1 ? 'true' : 'false' }}">
+                            {% for logo in adopterLogos %}
+                                <img class="trusted-by-logo" src="{{ asset('images/app/content/adopters/' ~ logo.file) }}" alt="{{ logo.alt }}" loading="lazy">
+                            {% endfor %}
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </section>
+    {% endif %}
+
     <section class="what-is-platform">
         <div class="wrap split">
             <div>