add responsive

src/index.css

@@ -21,13 +21,21 @@
 }
 
 
-
+@media screen and (max-width: 768px) {
-.content {
+  .content{
-  padding: 1.5rem;
+    padding: 0.7rem;
-  z-index: 1;
+    z-index:1;
-  
+  }
 }
 
+@media screen and (min-width: 1000px) {
+  .content{
+    padding: 1.1rem;
+    z-index:1;
+  }
+}
+
+
 
 
 

src/pages/Profile/ProfilePage.jsx

@@ -1,10 +1,48 @@
+import React, { useState } from "react";
 import styles from "./ProfilePage.module.css";
 
+function Event({ title,date, tasks }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div className={`${styles.event} glassCard`}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+         <div style={{display:'flex', flexDirection:'column'}}>
+          <h3>{title}</h3>
+          <p style={{ fontSize: '0.8rem', color: '#666', margin: '0 0 0 0' }}>{date}</p>
+        </div>
+        <button
+          onClick={toggleExpand}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            fontSize: '1.2rem',
+          }}
+        >
+          {isExpanded ? '▼' : '▶'}
+        </button>
+      </div>
+      <ul
+        className={`${styles.eventTasks} ${isExpanded ? styles.expanded : ''}`}
+      >
+        {tasks.map((task, index) => (
+          <li key={index}>-- {task}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+
 function ProfilePage() {
   return (
     <div className={styles.container}>
       <div className={`${styles.profileboard} glassCard`}>
-        
         <div className={styles.contentWrapper}>
           <div className={styles.profilePictureContainer}>
             <img
@@ -15,43 +53,52 @@ function ProfilePage() {
           </div>
           <div className={styles.description}>
             <h2>LEBLOND Malo</h2>
-
             <div className={styles.topDescription}>
               <div className={styles.infoBlock}>
                 <p><strong>Role :</strong> Président</p>
                 <p><strong>Membre depuis :</strong> 2019</p>
               </div>
-              <div className={styles.infoBlock} >
+              <div className={styles.infoBlock}>
                 <p><strong>Mail :</strong> mailpro@gmail.com</p>
                 <p><strong>Téléphone :</strong> 08 67 87 32 21</p>
               </div>
             </div>
-            <p>..............................................................................................................................................................................................</p>
+            <h2>Vos Événements :</h2>
-            <h2>Vos Evenements :</h2>
+            <Event
-              <div className={`${styles.event} glassCard`}>
+              title="Titre event 1"
-                <h3>Titre event</h3>
+              date="04/11/2025"
-                <ul>
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-                  <li>-- Votre tâche 1</li>
+            />
-                  <li>-- Votre tâche 2</li>
+            <Event
-                  <li>-- Votre tâche 3</li>
+              title="Titre event 2"
-                </ul>
+              date="04/11/2025"
-              </div>
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-              <div className={`${styles.event} glassCard`}>
+            />
-                <h3>Titre event</h3>
+            <Event
-                <ul>
+              title="Titre event 3"
-                  <li>-- Votre tâche 1</li>
+              date="04/11/2025"
-                  <li>-- Votre tâche 2</li>
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-                  <li>-- Votre tâche 3</li>
+            />
-                </ul>
+            <Event
-              </div>
+              title="Titre event 4"
-              <div className={`${styles.event} glassCard`}>
+              date="04/11/2025"
-                <h3>Titre event</h3>
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-                <ul>
+            />
-                  <li>-- Votre tâche 1</li>
+            <Event
-                  <li>-- Votre tâche 2</li>
+              title="Titre event 5"
-                  <li>-- Votre tâche 3</li>
+              date="04/11/2025"
-                </ul>
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-              </div>
+            />
+            <Event
+              title="Titre event 6"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
+            <Event
+              title="Titre event 7"
+              date="04/11/2025"
+              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
+            />
           </div>
         </div>
       </div>
@@ -59,7 +106,4 @@ function ProfilePage() {
   );
 }
 
-
 export default ProfilePage;
-
-

src/pages/Profile/ProfilePage.module.css

@@ -1,37 +1,153 @@
-.container{
+.container {
-    width:100%;
+  width: 100%;
-    display: flex;
+  padding: 10px;
-    justify-content: center;
+  box-sizing: border-box;
-}
-.profileboard{
-    display: flex;
-    justify-content: center;
-    width:90%;
-    height:500px;
 }
 
-.contentWrapper{
+.profileboard {
-    display:flex;
+  width: 100%;
-    width:90%;
+  padding: 15px;
+  border-radius: 10px;
+  box-sizing: border-box;
 }
-.profilePictureContainer{
+
-    width:30%;
+.contentWrapper {
-    margin:0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
 }
-.profilePicture{
+
-    width:100%;
+.profilePictureContainer {
-    border:1px dotted rgb(77, 68, 68);
+  width: 120px;
-    border-radius:12px;
+  height: 120px;
+  margin-bottom: 15px;
 }
-.description{
+
-    margin-left:12%;
+.profilePicture {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
 }
-.topDescription{
+
-    display:flex;
+.description {
+  width: 100%;
+  text-align: left;
+  margin-left:4%;
+}
+
+.topDescription {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.infoBlock {
+  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{
     font-size:30px;
+    margin-bottom: 2%;
+}
+.profilePicture{
+    width:90%;
+  }
+/* 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;
+  }
+
+  .description {
+    width: calc(100% - 170px);
+    margin-left:4%;
+  }
+
+  .topDescription {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .infoBlock {
+    width: 48%;
+  }
+
+  .event {
+    padding: 15px;
+  }
+  .description h2{
+    font-size:30px;
+    margin-bottom: 2%;
+}
+.profilePicture{
+    width:90%;
+  }
+}
+
+/* Desktop (1024px et plus) */
+@media screen and (min-width: 1024px) {
+  .container {
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .profileboard {
+    padding: 25px;
+  }
+
+  .profilePictureContainer {
+    width: 30%;
+    height:auto;
+  }
+  .profilePicture{
+    width:90%;
+  }
+  .description {
+    width: calc(100% - 200px);
+    margin-left:4%;
+  }
+
+  .event {
+    padding: 18px;
+  }
+  .description h2{
+    font-size:30px;
+    margin-bottom: 2%;
+}
 }
-.infoBlock p {
-    font-size: 22px;;
-}