fin de homepage (800 essais)

src/components/homePage/calendar.module.css

@@ -1,6 +1,5 @@
 .calendarContainer {
     padding: 20px;
-    font-family: Arial, sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -120,7 +119,7 @@
 }
 
 .eventBox ul {
-    list-style-type: disc;
+    list-style: none;
 }
 
 .eventGroup{
@@ -162,9 +161,14 @@
 @media (max-width: 768px) {
     .glassCard {
         width: 100%;
-        margin: 0px;
         margin-top: 16px;
         margin-bottom: 16px;
+    }
+
+    .calendarContainer {
+        padding: 20px;
         display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 }

src/components/homePage/eventList.jsx

@@ -18,7 +18,6 @@ function eventList() {
 
     return (
         <div className={styles.glassCard}>
-            <div className={styles.eventListContainer}>
                 <h2>Liste des événements à venir</h2>
                 {sortedEvents.length > 0 ? (
                     <ul className={styles.eventList}>
@@ -38,7 +37,6 @@ function eventList() {
                 ) : (
                     <p>Aucun événement planifié pour l'instant.</p>
                 )}
-            </div>
         </div>
 
     );

src/components/homePage/eventList.module.css

@@ -49,8 +49,17 @@ h2{
     justify-content: center;
 }
 
-.eventListContainer{
+.eventGroup{
-    width: 100%;
+    margin: 16px 0px 16px 0px;
+    padding: 10px 20px 10px 20px;
+    border-radius: 20px;
+    border: none;
+    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 -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
 }
 
 @media (max-width: 768px) {
@@ -60,5 +69,6 @@ h2{
         margin-top: 16px;
         margin-bottom: 16px;
         display: flex;
+        flex-direction: column;
     }
 }

src/pages/Home/HomePage.module.css

@@ -1,3 +1,9 @@
+.allContent{
+    display: flex;
+    justify-content: center;
+    gap:80px;
+}
+
 @media (max-width: 768px) {
     .allContent{
         display: flex;