Updated team display

src/App.css

@@ -3,8 +3,8 @@
 
     --white: #FFFFFF;
     --light: #F0F1F3;
-    --gray: #B0B0B0;
     --lightGray: #E0E0E0;
+    --gray: #B0B0B0;
     --darkGray: #383838;
     --black: #111111;
 

src/components/team/team.css

@@ -1,33 +1,83 @@
 .team {
     display: flex;
     flex-direction: column;
-    width: 50vh;
+    gap: 3rem;
+}
+
+.team-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.team-group-title {
+    color: var(--darkGray);
+    font-weight: 600;
+    font-size: 1.2em;
+    position: relative;
+    &::before, &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        translate: 0 -50%;
+        width: 20px;
+        height: 2px;
+        background: var(--gray);
+    }
+    &::before {
+        left: -15px;
+        translate: -100% -50%;
+    }
+    &::after {
+        right: -15px;
+        translate: 100% -50%;
+    }
+}
+
+.team-group-list {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    flex-wrap: wrap;
 }
 
 .team-member {
+    width: 150px;
     display: flex;
-    flex-direction: row;
-    gap: 2em;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    gap: 1rem;
+    background: var(--white);
+    padding: 1rem;
+    border-radius: 15px;
+    box-shadow: var(--shadow);
 }
-
-.team-member-image img {
-    width: 10em;
-    height: 10em;
-    object-fit: cover;
-    object-position: center;
-    border-radius: 50%;
-}
-
-.team-member-wrapper {
+.team-member-image-container {
+    width: 100%;
+    aspect-ratio: 1/1;
+    border-radius: 10px;
+    overflow: hidden;
     position: relative;
-}
 
-.offset-left {
-    margin-top: -1em;
-    margin-right: 20em;
 }
-
-.offset-right {
-    margin-top: -2em;
-    margin-left: 20em;
+.team-member-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.team-member-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.team-member-name {
+    font-weight: 600;
+    font-size: 1em;
+}
+.team-member-role {
+    color: var(--darkGray);
+    font-size: 0.8em;
 }

src/components/team/team.tsx

@@ -2,56 +2,50 @@ import React from "react";
 
 import "./team.css";
 
-interface TeamProps {
+interface TeamMemberProps {
     name: string;
     role: string;
     image: string;
 }
 
-interface TeamsProps {
-    team: TeamProps[];
+interface TeamGroupProps {
+    title: string;
+    members: TeamMemberProps[];
 }
 
-const TeamMemberLeft: React.FC<TeamProps> = ({ name, role, image }) => {
-    return (
-        <div className={"team-member"}>
-           <div className={"team-member-text"}>
-               <h3>{role}</h3>
-                <h2>{name}</h2>
-           </div>
-              <div className={"team-member-image"}>
-                <img src={image} alt={name}/>
-              </div>
-        </div>
-    );
+interface TeamProps {
+    groups: TeamGroupProps[];
 }
 
-const TeamMemberRight: React.FC<TeamProps> = ({ name, role, image }) => {
+const TeamMember: React.FC<TeamMemberProps> = ({ name, role, image }) => {
     return (
-        <div className={"team-member"}>
-            <div className={"team-member-image"}>
-                <img src={image} alt={name}/>
+        <div className='team-member'>
+            <div className='team-member-image-container'>
+                <img className='team-member-image' src={image} alt={name} />
             </div>
-            <div className={"team-member-text"}>
-                <h3>{role}</h3>
-                <h2>{name}</h2>
+            <div className='team-member-content'>
+                <h5 className='team-member-name'>{name}</h5>
+                <p className='team-member-role'>{role}</p>
             </div>
         </div>
     );
 }
 
-export const Team: React.FC<TeamsProps> = ({ team }) => {
+const TeamGroup: React.FC<TeamGroupProps> = ({ title, members }) => {
+    return (
+        <div className='team-group'>
+            <h3 className='team-group-title'>{title}</h3>
+            <div className='team-group-list'>
+                {members.map((member, index) => <TeamMember key={index} {...member} />)}
+            </div>
+        </div>
+    );
+}
+
+export const Team: React.FC<TeamProps> = ({ groups }) => {
     return (
         <div className={"team"}>
-            {team.map((member, index) => {
-                const isLeft = index % 2 === 0;
-                const offsetClass = isLeft ? "offset-left" : "offset-right";
-                return (
-                    <div key={index} className={`team-member-wrapper ${offsetClass}`}>
-                        {isLeft ? <TeamMemberLeft name={member.name} role={member.role} image={member.image}/> : <TeamMemberRight name={member.name} role={member.role} image={member.image}/>}
-                    </div>
-                );
-            })}
+            {groups.map((group, index) => <TeamGroup key={index} {...group} />)}
         </div>
     );
 }

src/pages/home/Home.tsx

@@ -7,6 +7,7 @@ import { SocialNetwork } from '../../components/socialnetwork/socialnetwork.tsx'
 import { Carousel } from '../../components/carousel/carousel.tsx';
 
 import './Home.css';
+import { Team } from '../../components/team/team.tsx';
 
 const Home: React.FC = () => {
   return (
@@ -113,43 +114,25 @@ const Home: React.FC = () => {
       </div>
       <div>
         <h2 className="page-title">Notre Équipe</h2>
-        <Carousel
-          carousel={[
+        <Team
+          groups={[
             {
-              image: 'https://r2.modelec.club/maxime.png',
-              title: 'Maxime Chauveau',
-              text: 'Président',
+              title: 'Bureau',
+              members: [
+                { name: 'Maxime Chauveau', role: 'Président', image: 'https://r2.modelec.club/maxime.png' },
+                { name: 'Vincent Rocher', role: 'Vice-Président', image: 'https://r2.modelec.club/maxime.png' },
+                { name: 'Felix Marquet', role: 'Secrétaire', image: 'https://r2.modelec.club/maxime.png' },
+                { name: 'Florent Butery', role: 'Trésorier', image: 'https://r2.modelec.club/maxime.png' },
+              ]
             },
             {
-              image: 'https://r2.modelec.club/maxime.png',
-              title: 'Vincent Rocher',
-              text: 'Vice-Président | Responsable Technique',
-            },
-            {
-              image: 'https://r2.modelec.club/maxime.png',
-              title: 'Felix Marquet',
-              text: 'Secrétaire',
-            },
-            {
-              image: 'https://r2.modelec.club/maxime.png',
-              title: 'Florent Butery',
-              text: 'Trésorier',
-            },
-            {
-              image: 'https://r2.modelec.club/maxime.png',
-              title: 'Cléo Sionville',
-              text: 'Responsable Communication',
-            },
-            {
-              image: 'https://r2.modelec.club/maxime.png',
-              title: 'Arthur Grossmann',
-              text: 'Responsable Evenementiel',
-            },
-            {
-              image: 'https://r2.modelec.club/maxime.png',
-              title: 'Allan Cueff',
-              text: 'Responsable Partenariat',
-            },
+              title: 'Responsables',
+              members: [
+                { name: 'Cléo Sionville', role: 'Communication', image: 'https://r2.modelec.club/maxime.png' },
+                { name: 'Arthur Grossmann', role: 'Evenementiel', image: 'https://r2.modelec.club/maxime.png' },
+                { name: 'Allan Cueff', role: 'Partenariat', image: 'https://r2.modelec.club/maxime.png' },
+              ]
+            }
           ]}
         />
       </div>