equipe front page avec responsive

resources/views/membres/index.blade.php

 <x-layout.front>
-    <h1>Membres</h1>
-    
-    @foreach ($membres as $membre)
+    <div class="container mt-4">
+        <h1 class="mb-4 fs-1 text-center">L'équipe</h1>
+        <p class="fs-6 text-center">
+            Chez icube, notre équipe dynamique collabore étroitement pour repousser<br>
+            les frontières de la recherche, en mêlant nos expertises pour innover ensemble.
+        </p>
 
-    <h2>{{ $membre->nom }}</h2>
-    <p>{{ $membre->description }}</p>
-    @if ($membre->image)
-    <img src="{{ asset('storage/' . $membre->image) }}" alt="image de {{ $membre->nom }}" style="max-width: 200px; max-height: 200px;">
-    @else 
-    <img src="{{ asset('images/profile.jpg') }}" alt="Logo de l'entreprise" class="img-fluid" style="max-width: 100px; height: auto;">
-    @endif
+        <div class="row mt-5">
+            @foreach ($membres as $membre)
+                <div class="col-md-6 col-lg-4 mb-4 text-center">
+                    <div class="mb-3">
+                        @if ($membre->image)
+                            <img src="{{ asset('storage/' . $membre->image) }}" 
+                                 alt="image de {{ $membre->nom }}" 
+                                 class="rounded-circle img-fluid" 
+                                 style="width: 150px; height: 150px; object-fit: cover;">
+                        @else
+                            <img src="{{ asset('images/profile.jpg') }}" 
+                                 alt="Logo de l'entreprise" 
+                                 class="rounded-circle img-fluid" 
+                                 style="width: 150px; height: 150px; object-fit: cover;">
+                        @endif
+                    </div>
+                    <h5 class="fw-bold">{{ $membre->nom }}  {{ $membre->prenom }}</h5>
+                    <p class="text-muted">{{ $membre->role ? $membre->role->name : 'Aucun rôle' }}</p>
+                </div>
+            @endforeach
+        </div>
 
-    <p>{{ $membre->role ? $membre->role->name : 'Aucun rôle' }}</p>
-
-    <a href="{{ route('membres.show', $membre) }}">Voir le membre</a>
-    @endforeach
-
-    @if (auth()->check() && auth()->user()->role_id === 1) 
-        <a href="{{ route('membres.create') }}">Créer un nouveau membre</a>
-    @endif
-</x-layout.front>
\ No newline at end of file
+        @if (auth()->check() && auth()->user()->role_id === 1)
+            <div class="text-center mt-4">
+                <a href="{{ route('membres.create') }}" class="btn btn-success">Créer un nouveau membre</a>
+            </div>
+        @endif
+    </div>
+</x-layout.front>