autre moitiay

src/index.css

@@ -61,6 +61,19 @@ body {
   overflow: hidden;
 }
 
+.glassBorder{
+    border-radius: 20px;
+    padding: 15px;
+    margin-top: 16px;
+    border: none;
+    background: rgb(255, 255, 255, 0.25);
+    box-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
+}
+
 h1 {
   font-size: 3.2em;
   line-height: 1.1;

src/pages/Home/HomePage.jsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useMemo } from "react";
 import styles from "./HomePage.module.css";
 
 function HomePage() {
@@ -70,7 +71,19 @@ function HomePage() {
         setSelectedDay({ date: key, events: events[key] || [] });
     };
 
+    const sortedEvents = useMemo(() => {
+        return Object.entries(events)
+            .map(([dateKey, eventList]) => ({ date: dateKey, events: eventList }))
+            .sort((a, b) => new Date(a.date) - new Date(b.date));
+    }, [events]);
+
+    const formatDate = (dateString) => {
+        const [year, month, day] = dateString.split('-');
+        return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
+    };
+
     return (
+        <div className={styles.allContent}>
             <div className={styles.glassCard}>
                 <div className={styles.calendarContainer}>
                     <div className={styles.calendarHeader}>
@@ -123,7 +136,7 @@ function HomePage() {
 
                     {selectedDay && (
                         <div className={styles.eventBox}>
-                        <h3>Événements du {selectedDay.date}</h3>
+                            <h3>Événements du {formatDate(selectedDay.date)}</h3>
 
                             {selectedDay.events.length > 0 ? (
                                 <ul>
@@ -138,6 +151,30 @@ function HomePage() {
                     )}
                 </div>
             </div>
+            <div className={styles.glassCard}>
+                <div className={styles.eventListContainer}>
+                    <h2>Liste des Événements à Venir</h2>
+                    {sortedEvents.length > 0 ? (
+                        <ul className={styles.eventList}>
+                            {sortedEvents.map((eventGroup) => (
+                                <li key={eventGroup.date} className={styles.eventGroup}>
+                                    <div className={styles.eventDate}>
+                                        <strong>{formatDate(eventGroup.date)}</strong>
+                                    </div>
+                                    <ul className={styles.eventDetails}>
+                                        {eventGroup.events.map((event, i) => (
+                                            <li key={i}>- {event}</li>
+                                        ))}
+                                    </ul>
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        <p>Aucun événement planifié pour l'instant.</p>
+                    )}
+                </div>
+            </div>
+        </div>
     );
 }
 

src/pages/Home/HomePage.module.css

@@ -32,7 +32,9 @@
     background: transparent;
     box-shadow:
             inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
-            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1);
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
     font-size: 15px;
     color: #019AFF;
     cursor: pointer;
@@ -98,7 +100,9 @@
     background: transparent;
     box-shadow:
             inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
-            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1);
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
 }
 
 .eventBox {
@@ -109,13 +113,28 @@
     background: rgb(255, 255, 255, 0.25);
     box-shadow:
             inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
-            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1);
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
 }
 
 .eventBox ul {
     list-style-type: disc;
 }
 
+.eventGroup{
+    border-radius: 20px;
+    padding: 15px;
+    margin-top: 16px;
+    border: none;
+    background: rgb(255, 255, 255, 0.25);
+    box-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
+}
+
 .glassCard {
     width: 45%;
     margin: 16px;
@@ -126,11 +145,23 @@
     -webkit-backdrop-filter: blur(3px);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow:
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
-            0 8px 32px rgba(0, 0, 0, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.5),
     inset 0 -1px 0 rgba(255, 255, 255, 0.1),
     inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
-    position: relative;
     overflow: hidden;
 }
+.allContent{
+    display: flex;
+    flex-direction: row;
+}
+
+@media (max-width: 768px) {
+    .glassCard {
+        width: 100%;
+        margin: 0px;
+        margin-top: 16px;
+        margin-bottom: 16px;
+        display: flex;
+    }
+}