list without animation

src/pages/Volunteers/VolunteersPage.jsx

@@ -1,23 +1,53 @@
-import React from "react";
+
+import React, { useState } from "react";
 import styles from "./VolunteersPage.module.css";
 
 function Volunteer({ name, role, since, email, phone, photo }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
   return (
     <div className={`${styles.profileboard} glassCard`}>
-      <div className={styles.contentWrapper}>
+      <div className={styles.mainContent}>
+        {!isExpanded ? (
+          <div className={styles.basicInfo}>
+            <h2>{name}</h2>
+            <p><strong>Rôle :</strong> {role}</p>
+            <p><strong>Membre depuis :</strong> {since}</p>
+          </div>
+        ) : (
+          <div className={styles.expandedContent}>
             <div className={styles.profilePictureContainer}>
               <img src={photo} alt={`${name}'s profile`} className={styles.profilePicture} />
             </div>
-        <div className={styles.description}>
+            <div className={styles.textInfo}>
+              <div className={styles.basicInfo}>
                 <h2>{name}</h2>
-          <div className={styles.topDescription}>
                 <p><strong>Rôle :</strong> {role}</p>
                 <p><strong>Membre depuis :</strong> {since}</p>
+              </div>
+              <div className={styles.contactInfo}>
                 <p><strong>Email :</strong> {email}</p>
                 <p><strong>Téléphone :</strong> {phone}</p>
               </div>
             </div>
           </div>
+        )}
+        <button
+          className={`${styles.expandButton} glassCard`}
+          onClick={toggleExpand}
+        >
+          {isExpanded ? "▲" : "▼"}
+        </button>
+        {isExpanded && (
+          <div className="voirPlus">
+            <a href="#" className={styles.voirPlus}>VOIR PLUS</a>
+            </div>
+        )}
+      </div>
     </div>
   );
 }
@@ -40,27 +70,37 @@ function VolunteerPage() {
       phone: "06 12 34 56 78",
       photo: "../src/assets/react.svg",
     },
+    {
+      name: "MARTIN Sophie",
+      role: "Bénévole",
+      since: "2021",
+      email: "sophie.martin@example.com",
+      phone: "06 87 65 43 21",
+      photo: "../src/assets/react.svg",
+    },
+    {
+      name: "MARTIN Sophie",
+      role: "Bénévole",
+      since: "2021",
+      email: "sophie.martin@example.com",
+      phone: "06 87 65 43 21",
+      photo: "../src/assets/react.svg",
+    },
   ];
 
-  const volunteerList = [];
-  for (let i = 0; i < volunteers.length; i++) {
-    volunteerList.push(
-      <Volunteer
-        key={i}
-        name={volunteers[i].name}
-        role={volunteers[i].role}
-        since={volunteers[i].since}
-        email={volunteers[i].email}
-        phone={volunteers[i].phone}
-        photo={volunteers[i].photo}
-      />
-    );
-  }
-
   return (
     <div className={styles.container}>
-      <h2>Liste des Bénévoles</h2>
+      {volunteers.map((volunteer, index) => (
-      <div>{volunteerList}</div>
+        <Volunteer
+          key={index}
+          name={volunteer.name}
+          role={volunteer.role}
+          since={volunteer.since}
+          email={volunteer.email}
+          phone={volunteer.phone}
+          photo={volunteer.photo}
+        />
+      ))}
     </div>
   );
 }

src/pages/Volunteers/VolunteersPage.module.css

@@ -1,8 +1,8 @@
-/* Styles de base (mobile) */
 .container {
   width: 100%;
   padding: 10px;
   box-sizing: border-box;
+  margin-top: 50px;
 }
 
 .profileboard {
@@ -10,19 +10,33 @@
   padding: 15px;
   border-radius: 10px;
   box-sizing: border-box;
+  margin-top: 3%;
+  position: relative;
 }
 
-.contentWrapper {
+.mainContent {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
-  align-items: center;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.basicInfo {
+  flex: 1;
+}
+
+.expandedContent {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
   width: 100%;
 }
 
 .profilePictureContainer {
   width: 120px;
   height: 120px;
-  margin-bottom: 15px;
+  margin-right: 20px;
 }
 
 .profilePicture {
@@ -32,97 +46,67 @@
   object-fit: cover;
 }
 
-.description {
+.textInfo {
-  width: 100%;
-  text-align: left;
-  margin-left: 4%;
-}
-
-.topDescription {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  flex: 1;
-  margin-bottom: 15px;
 }
 
-.infoBlock {
+.contactInfo {
-  width: 100%;
-  background: rgba(255, 255, 255, 0.1);
-  padding: 10px;
-  border-radius: 5px;
-}
-
-.event {
-  width: 100%;
-  padding: 12px;
-  margin-bottom: 10px;
-  border-radius: 8px;
-}
-
-.eventTasks {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease-out, opacity 0.2s ease;
-  opacity: 0;
-  padding-left: 20px;
-}
-
-.eventTasks.expanded {
-  max-height: 500px;
-  opacity: 1;
   margin-top: 10px;
 }
 
-.description h2 {
+.contactInfo p {
-  font-size: 30px;
+  margin: 5px 0;
-  margin-bottom: 2%;
 }
 
-.description button {
+.expandButton {
-  width: 50px;
+  width: 30px;
-  height: 50px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font-size: 16px;
+  margin-left: 10px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.voirPlus {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  color: #007bff;
+  text-decoration: none;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.voirPlus:hover {
+  text-decoration: underline;
 }
 
-/* Tablette (768px et plus) */
 @media screen and (min-width: 768px) {
-  .contentWrapper {
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
   .profilePictureContainer {
     width: 150px;
     height: 150px;
-    margin-right: 20px;
-    margin-bottom: 0;
   }
-
+  .voirPlus{
-  .description {
+    text-align: right;
-    width: calc(100% - 170px);
-    margin-left: 4%;
-  }
-
-  .topDescription {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .infoBlock {
-    width: 48%;
-  }
-
-  .event {
-    padding: 15px;
   }
 }
 
-/* Desktop (1024px et plus) */
 @media screen and (min-width: 1024px) {
   .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
+    margin-top:50px;
+    margin-bottom: 50px;
   }
 
   .profileboard {
@@ -133,19 +117,9 @@
     width: 200px;
     height: auto;
   }
-
-  .description {
-    width: calc(100% - 220px);
-    margin-left: 4%;
-    display:flex;
-    flex-direction: column;
-  }
-  .topDescription{
-    display:flex;
-    flex-direction: column;
-  }
-
-  .event {
-    padding: 18px;
-  }
 }
+
+
+
+
+