Change a-propos staff

src/app/components/a-propos/a-propos.component.html

@@ -2,63 +2,49 @@
     <img class="w-full h-48 object-cover" src="../../assets/pattounes.jpg" alt="pattounes profil">
 </div>
 
-
 <div class="bg-white py-24 sm:py-32">
-    <div class="mx-auto max-w-7xl px-6 lg:px-8">
-      <div class="mx-auto max-w-2xl sm:text-center">
-        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Notre équipe</h2>
-        <p class="mt-6 text-lg leading-8 text-gray-600">Notre équipe est un cœur battant d'amoureux des chats, de technophiles et de défenseurs du bien-être animal. Ensemble, nous fusionnons passion, expertise et innovation pour donner à chaque chat un foyer aimant. Motivés par la compassion et le changement, nous œuvrons chaque jour pour rendre chaque adoption possible.</p>
-      </div>
-      <ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:max-w-4xl lg:gap-x-8 xl:max-w-none">
-        <li class="flex flex-col gap-6 xl:flex-row">
-          <img class="aspect-[4/5] w-52 flex-none rounded-2xl object-cover" src="../../assets/leo_profil.jpg" alt="Léo profil">
-          <div class="flex-auto">
-            <h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-900">Léo Airaudi</h3>
-            <p class="text-base leading-7 text-gray-600">Développeur full-stack / Gestion du SGBD</p>
-            <p class="mt-6 text-base leading-7 text-gray-600">BIP BIP BIP ! Le code n'a aucun secret pour moi 🤖. Passionné de chats et de programmation, touché par la cause de la maltraitance animale, j'ai décidé de combiner mes deux passions. C'est ainsi qu'est née l'idée d'une plateforme dédiée à rassembler les associations, facilitant l'adoption de chats pour leur offrir une seconde chance et réduire le nombre de félins dans nos rues, un véritable fléau. Rejoignez-moi dans cette aventure pour faire la différence ensemble.</p>
-          </div>
-        </li>
-
-        <li class="flex flex-col gap-6 xl:flex-row">
-            <img class="aspect-[4/5] w-52 flex-none rounded-2xl object-cover" src="../../assets/sarah_profil.jpg" alt="Sarah profil">
-            <div class="flex-auto">
-              <h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-900">Sarah Mignon</h3>
-              <p class="text-base leading-7 text-gray-600">Développeur front / gestion de projet</p>
-              <p class="mt-6 text-base leading-7 text-gray-600">D’un naturel souriante et enjouée j’espère égayer tes journées 😌
-                  <br>Regarde parfois trop d’animés pour son bien 😬
-                  <br>Compétence spéciale: peut faire un trajet de métro sans tenir une seule barre</p>
-            </div>
-          </li>
-
-      </ul>
+  <div class="mx-auto max-w-7xl px-6 lg:px-8">
+    <div class="mx-auto max-w-2xl sm:text-center">
+      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Notre équipe</h2>
+      <p class="mt-6 text-lg leading-8 text-gray-600">Notre équipe est un cœur battant d'amoureux des chats, de technophiles et de défenseurs du bien-être animal. Ensemble, nous fusionnons passion, expertise et innovation pour donner à chaque chat un foyer aimant. Motivés par la compassion et le changement, nous œuvrons chaque jour pour rendre chaque adoption possible.</p>
     </div>
+    <ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:max-w-4xl lg:grid-cols-3 lg:gap-x-8 xl:max-w-none">
+      <li class="flex flex-col gap-6 xl:flex-col items-center">
+        <div class="w-full max-w-xs h-80 overflow-hidden rounded-2xl">
+          <img class="w-full h-full object-cover" src="../../assets/leo_profil.jpg" alt="Léo profil">
+        </div>
+        <div class="flex-auto text-center lg:text-left">
+          <h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-900 text-center">Léo Airaudi</h3>
+          <p class="text-base leading-7 text-gray-600 text-center">Développeur full-stack / Gestion du SGBD</p>
+          <p class="mt-6 text-base leading-7 text-gray-600 text-center">Passionné par les chats et la programmation, j'ai créé une plateforme qui rassemble les associations pour faciliter l'adoption d'animaux.</p>
+        </div>
+      </li>
+
+      <li class="flex flex-col gap-6 xl:flex-col items-center">
+        <div class="w-full max-w-xs h-80 overflow-hidden rounded-2xl">
+          <img class="w-full h-full object-cover" src="../../assets/sarah_profil.jpg" alt="Sarah profil">
+        </div>
+        <div class="flex-auto text-center lg:text-left">
+          <h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-900 text-center">Sarah Mignon</h3>
+          <p class="text-base leading-7 text-gray-600 text-center">Développeur front / gestion de projet</p>
+          <p class="mt-6 text-base leading-7 text-gray-600 text-center">D’un naturel souriante et enjouée j’espère égayer tes journées 😌
+              <br>Regarde parfois trop d’animés pour son bien 😬
+              <br>Compétence spéciale: peut faire un trajet de métro sans tenir une seule barre</p>
+        </div>
+      </li>
+
+      <li class="flex flex-col gap-6 xl:flex-col items-center">
+        <div class="w-full max-w-xs h-80 overflow-hidden rounded-2xl">
+          <img class="w-full h-full object-cover" src="../../assets/marion_profil.jpg" alt="Marion profil">
+        </div>
+        <div class="flex-auto text-center lg:text-left">
+          <h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-900 text-center">Marion Segria</h3>
+          <p class="text-base leading-7 text-gray-600 text-center">Développeur front / Scrum / DevOps</p>
+          <p class="mt-6 text-base leading-7 text-gray-600 text-center">Trop souvent devant la télé ou l’ordinateur mais quand faut y aller faut y aller
+            <br>Soft skill : peut faire un cul sec de despe sans roter
+            </p>
+        </div>
+      </li>
+    </ul>
   </div>
-
-
-  <div class="bg-white py-24 sm:py-32">
-    <div class="mx-auto max-w-7xl px-6 lg:px-8">
-      <ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:max-w-4xl lg:gap-x-8 xl:max-w-none">
-        <li class="flex flex-col gap-6 xl:flex-row">
-          <img class="aspect-[4/5] w-52 flex-none rounded-2xl object-cover" src="../../assets/tyffanie_profil.jpg" alt="Tyffanie profil">
-          <div class="flex-auto">
-            <h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-900">Tyffanie Ribeiro</h3>
-            <p class="text-base leading-7 text-gray-600">Développeur front / Design</p>
-            <p class="mt-6 text-base leading-7 text-gray-600">J'enlève mes olives de la pizza pour les passer après, Fun Radio est ma radio préférée, ça m'arrive d'être émotive devant les Disneys. J'ai beau être timide, faut pas me lancer.</p>
-          </div>
-        </li>
-
-        <li class="flex flex-col gap-6 xl:flex-row">
-            <img class="aspect-[4/5] w-52 flex-none rounded-2xl object-cover" src="../../assets/marion_profil.jpg" alt="Marion profil">
-            <div class="flex-auto">
-              <h3 class="text-lg font-semibold leading-8 tracking-tight text-gray-900">Marion Segria</h3>
-              <p class="text-base leading-7 text-gray-600">Développeur front / Scrum / DevOps</p>
-              <p class="mt-6 text-base leading-7 text-gray-600">Trop souvent devant la télé ou l’ordinateur mais quand faut y aller faut y aller
-                <br>Soft skill : peut faire un cul sec de despe sans roter
-                </p>
-            </div>
-          </li>
-      </ul>
-    </div>
-  </div>
-
-
+</div>