Now comes the first visible part of the team page: the template with a Tailwind card grid. In this chapter we deliberately build a static version first, without filter interactivity - the Alpine logic is added in chapter 21, so both steps stay easy to follow individually.

The basic structure

<?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">Our Team</h1>
    <p class="mb-8 text-brand-slate">Meet the people behind mironsoft.</p>

    <!-- Category buttons follow in chapter 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">
                    <!-- placeholder for the team photo -->
                </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>

What you already recognize here

• The @var block and accessing the ViewModel via $block->getData(...) - from chapter 7.
• $escaper->escapeHtml(...) for every dynamic output - from chapter 8.
• The responsive grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 - from chapter 13.

Replacing the image placeholder with real photos later

For this tutorial, the photo stays a gray placeholder block, to keep the focus on layout and interactivity. In a real project, you'd have an <img> here with $escaper->escapeUrl($member['photo']) for src and $escaper->escapeHtmlAttr($member['name']) for alt - exactly the pattern from chapter 8.

Build and deploy to test

Since a new template and new classes were added, a cache clean is needed at this point to see the result. If the watcher from chapter 5 is already running (bin/start), that's enough - for a production-realistic test, use the full deploy sequence from chapter 5/27:

bin/cache-clean

Visiting /team in the browser now shows a grid with four cards - Anna, Ben, Carla, and David from the ViewModel, each with a gray placeholder image, name, and role. Still without filter functionality, but already fully responsive.