<div class="container"> <div class="row align-items-center g-4"> {# Colonne texte à gauche #} <div class="col-md-3"> <h2 class="fw-bold text-acti-blue mb-3">Découvrez<br>nos produits<br>par métiers</h2> <div class="d-flex align-items-center mb-2"> <img src="{{ asset('img/picto/gilet.png') }}" width="36" class="me-2" alt="Icône gilet"> <span class="fw-medium small">plus de <strong>2000</strong> produits</span> </div> <a href="{{ path('category.produit') }}" class="text-decoration-underline text-dark small">Tous nos produits</a> </div> {# Cartes métiers (3 exemples) #} <div class="col-3"> <a href="{#{ job.link }#}" class="d-block border rounded overflow-hidden shadow-sm hover-scale"> <img src="{{ asset('img/illustration-metier-1.png') }}" class="img-fluid w-100" alt="{#{ job.name }#}"> </a> </div> <div class="col-3"> <a href="{#{ job.link }#}" class="d-block border rounded overflow-hidden shadow-sm hover-scale"> <img src="{{ asset('img/illustration-metier-2.png') }}" class="img-fluid w-100" alt="{#{ job.name }#}"> </a> </div> <div class="col-3"> <a href="{#{ job.link }#}" class="d-block border rounded overflow-hidden shadow-sm hover-scale"> <img src="{{ asset('img/illustration-metier-3.png') }}" class="img-fluid w-100" alt="{#{ job.name }#}"> </a> </div> </div> </div>