list without animation

src/pages/Volunteers/VolunteersPage.jsx

@@ -1,22 +1,52 @@
-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.profilePictureContainer}>
-          <img src={photo} alt={`${name}'s profile`} className={styles.profilePicture} />
-        </div>
-        <div className={styles.description}>
-          <h2>{name}</h2>
-          <div className={styles.topDescription}>
+      <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>
-            <p><strong>Email :</strong> {email}</p>
-            <p><strong>Téléphone :</strong> {phone}</p>
           </div>
-        </div>
+        ) : (
+          <div className={styles.expandedContent}>
+            <div className={styles.profilePictureContainer}>
+              <img src={photo} alt={`${name}'s profile`} className={styles.profilePicture} />
+            </div>
+            <div className={styles.textInfo}>
+              <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.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>
-      <div>{volunteerList}</div>
+      {volunteers.map((volunteer, index) => (
+        <Volunteer
+          key={index}
+          name={volunteer.name}
+          role={volunteer.role}
+          since={volunteer.since}
+          email={volunteer.email}
+          phone={volunteer.phone}
+          photo={volunteer.photo}
+        />
+      ))}
     </div>
   );
 }