add of Event module

src/components/Event/Event.jsx

@@ -0,0 +1,50 @@
+import styles from "./Event.module.css";
+import {useState} from "react";
+import {Link} from "react-router";
+import Button from "/src/components/ui/button/button.jsx"
+
+function Event({event}){
+    const [eventMenu, seteventMenu] = useState(false);
+
+
+    return (
+        <div className={`${styles.eventContainer} glassCard`}>
+            <div className={styles.eventContent}>
+                <div className={`${styles.eventImageDiv}`}>
+                    {event.image == null ? (
+                        <img src="/empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                    ) : (
+                        <img src={`/public/` + event.image + `.png`} alt="Photo de l'événement" />
+                    )}
+                </div>
+                <div>
+                    <p className={styles.eventTitle}>{event.name}</p>
+                    <p>{event.description}</p>
+                    <div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
+                        <ul>
+                            {event.tasks
+                                .slice(0,5)
+                                .map((task, index) => (
+                                <li key={index}> - {task.name}</li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div className={styles.eventButtons}>
+                <button
+                    className={`${styles.moreButton} ${eventMenu ? styles.moreButtonClicked : ""}`}
+                    onClick={()=>{seteventMenu(!eventMenu)}}>
+                    >
+                </button>
+                <Link
+                    to={`/event/` + event.id}
+                    className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
+                    <Button>En savoir plus →</Button>
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default Event;

src/components/Event/Event.module.css

@@ -0,0 +1,87 @@
+.eventContainer {
+    display: flex;
+    width: 80%;
+    margin: 1rem 0;
+    justify-content: space-between;
+}
+
+.eventImageDiv {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1rem;
+    width: auto;
+    height: 6rem;
+    flex-shrink: 0;
+}
+
+.eventImage {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+
+.eventContent {
+    display: flex;
+}
+
+.eventTitle {
+    font-size: 2rem;
+}
+
+
+
+
+
+
+.eventButtons {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.eventButtons a {
+    justify-content: flex-end;
+}
+
+
+
+
+.moreButton {
+    background: none;
+    border: none;
+    color: #019AFF;
+    font-size: 1.5rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 55px;
+    height: 55px;
+}
+
+.moreButton:hover {
+    font-size: 2rem;
+    background: rgba(191, 191, 191, 0.5);
+}
+
+.moreButton:focus {
+    outline: none;
+}
+.moreButton:focus-visible {
+    outline: 2px solid black;
+}
+
+.moreButtonClicked {
+    rotate: 90deg;
+}
+
+
+.eventMenuOpen {
+    display: flex;
+}
+
+.eventMenuClose {
+    display: none;
+}

src/components/Header/Header.module.css

@@ -179,7 +179,7 @@ svg {
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.3s ease, transform 0.3s ease;
-    z-index: 1;
+    z-index: 0;
 }
 
 .activeNotificationDiv {