Jetzt kommt der erste sichtbare Teil der Team-Seite: das Template mit einem Tailwind-Karten-Grid. In diesem Kapitel bauen wir bewusst zunächst eine statische Version ohne Filter-Interaktivität - die Alpine-Logik kommt erst in Kapitel 21 dazu, damit beide Schritte einzeln nachvollziehbar bleiben.

Die Grundstruktur

<?php

declare(strict_types=1);

/** @var \Magento\Framework\Escaper $escaper */
/** @var \Magento\Framework\View\Element\Template $block */
/** @var \Mironsoft\TeamPage\ViewModel\TeamMembers $teamViewModel */
$teamViewModel = $block->getData('team_view_model');
?>
<div class="mx-auto max-w-6xl px-4 py-12 md:px-8">
    <h1 class="mb-2 text-3xl font-bold text-brand-dark">Unser Team</h1>
    <p class="mb-8 text-brand-slate">Lernen Sie die Menschen hinter mironsoft kennen.</p>

    <!-- Kategorie-Buttons folgen in Kapitel 21 -->

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <?php foreach ($teamViewModel->getTeamMembers() as $member): ?>
            <article class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                <div class="mb-4 h-40 w-full rounded-lg bg-slate-100">
                    <!-- Platzhalter für das Team-Foto -->
                </div>
                <h3 class="text-lg font-bold text-brand-dark">
                    <?= $escaper->escapeHtml($member['name']) ?>
                </h3>
                <p class="text-sm text-brand-slate">
                    <?= $escaper->escapeHtml($member['role']) ?>
                </p>
            </article>
        <?php endforeach; ?>
    </div>
</div>

Was hier bereits bekannt ist

• Der @var-Block und der Zugriff auf das ViewModel über $block->getData(...) - aus Kapitel 7.
• $escaper->escapeHtml(...) für jede dynamische Ausgabe - aus Kapitel 8.
• Das responsive Grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 - aus Kapitel 13.

Den Bild-Platzhalter später durch echte Bilder ersetzen

Für dieses Tutorial bleibt das Foto ein grauer Platzhalter-Block, um den Fokus auf Layout und Interaktivität zu halten. In einem echten Projekt würde hier <img> mit $escaper->escapeUrl($member['photo']) für src und $escaper->escapeHtmlAttr($member['name']) für alt stehen - genau das Muster aus Kapitel 8.

Build und Deploy zum Testen

Da ein neues Template und neue Klassen dazugekommen sind, braucht es an dieser Stelle einen Cache-Clean, um das Ergebnis zu sehen. Läuft der Watcher aus Kapitel 5 bereits (bin/start), reicht das - für einen produktionsnahen Test die volle Deploy-Sequenz aus Kapitel 5 bzw. 27:

bin/cache-clean

Ein Aufruf von /team im Browser zeigt jetzt ein Grid mit vier Karten - Anna, Ben, Carla und David aus dem ViewModel, jeweils mit grauem Platzhalter-Bild, Namen und Rolle. Noch ohne Filter-Funktion, aber bereits vollständig responsiv.