Merge branch 'features/footer' into 'dev'

Features/footer

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!64

src/components/Footer/Footer.jsx

@@ -1,16 +1,64 @@
 import styles from "./Footer.module.css"
 import {Link} from "react-router";
+import {useState} from "react";
+import Modal from "../ui/modal/modal.jsx";
+import Button from "../ui/button/button.jsx";
+import scrollToTop from "../../utils/scrollToTop.js";
 
-function Footer(){
-    return (
-        <footer className={`${styles.footer} ${"glassCard"}`} >
+export default function Footer(){
+    const currentYear = new Date().getFullYear();
+    const [isCopyrightModal, setIsCopyrightModal] = useState(false);
+
+
+    return <>
+        <footer className={`${styles.footer} glassCard`}>
             <div className={styles.footerContent}>
-                <Link to="" className={styles.link}>Contact</Link>
-                <Link to="" className={styles.link}>RGPD</Link>
-                <Link to="" className={styles.link}>Mentions légales</Link>
+                <Button
+                    variant={"transparent"}
+                    className={styles.link}
+                    onClick={() => setIsCopyrightModal(true)}
+                >
+                    Copyright © {currentYear}. Tous droits réservés.
+                </Button>
+
+                <div className={styles.copyright}>
+
+                </div>
+
+                <nav className={styles.footerNav}>
+                    <Link to="/RGPD" className={styles.link} onClick={scrollToTop}>
+                        Fiche RGPD
+                    </Link>
+                    <span className={styles.separator}></span>
+                    <Link to="/legalNotices" className={styles.link} onClick={scrollToTop}>
+                        Mentions légales
+                    </Link>
+                    <span className={styles.separator}></span>
+                    <Link to={"https://comite.beaupont.fr/contactez-nous"} className={styles.link}>
+                        Contact
+                    </Link>
+                    <span className={styles.separator}></span>
+                    <Link to="/" className={styles.link} onClick={scrollToTop}>
+                        Accueil
+                    </Link>
+                </nav>
             </div>
         </footer>
-    )
-}
 
-export default Footer;
+        {/* TODO : mettre nos noms dans un fichier de configuration */}
+        <Modal title={"Réalisé par"} open={isCopyrightModal} onClose={() => setIsCopyrightModal(false)}>
+            <section className={styles.section}>
+                <div className={styles.inputContainer}>
+                    <p>Quentin T'jampens</p>
+                    <p>Antoine Ordonneau</p>
+                    <p>Malo Leblond</p>
+                    <p>
+                        Giovanni Josserand (
+                        <Link to={"https://linktree.josserand.ovh/"}>linktree</Link>
+                        )
+                    </p>
+                </div>
+            </section>
+        </Modal>
+    </>
+}

src/components/Footer/Footer.module.css

@@ -1,34 +1,76 @@
-.footer{
+.footer {
     width: 100%;
-    display: flex;
-    align-items: center;
-    height: fit-content;
-    padding: 2rem;
+    padding: 1.5rem 2rem;
+    margin-top: auto;
 }
 
 .footerContent {
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
     width: 100%;
-    justify-content: center;
-    gap: 2rem;
+}
+
+.footerNav {
+    display: flex;
+    align-items: center;
 }
 
 .link {
+    color: black !important;
+    text-decoration: none;
+    font-size: 0.95rem;
+    transition: color 0.2s ease;
+    padding: 0 !important;
+}
+
+.link:hover {
+    color: #019AFF !important;
+}
+
+.separator {
+    width: 1px;
+    height: 16px;
+    background-color: black;
+    margin: 0 1rem;
+}
+
+.copyright {
     color: black;
-    width: fit-content;
-    text-align: center;
+    font-size: 0.9rem;
+    white-space: nowrap;
+}
+
+.section{
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
 }
 
 
 
-@media screen and (max-width: 480px) {
-    .footer{
-        padding: 1rem;
+
+@media screen and (max-width: 768px) {
+    .footerContent {
+        flex-direction: column-reverse;
+        gap: 1rem;
+        text-align: center;
     }
 
-    .footerContent{
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
+    .footerNav {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .link {
+        margin: 0.5rem 1rem;
+    }
+
+    .separator {
+        display: none;
     }
 }

src/components/createEventBtn/CreateEventBtn.jsx

@@ -24,6 +24,7 @@ export default function CreateEventBtn() {
     }
 
     return <>
+    {/* TODO : faire le responsive du menu de création d'événement */}
         <Button className={`${styles.createButton} glassCard`} variant={"default"} onClick={() => setIsOpen(true)}> + </Button>
 
         <Modal title={"Créer un événement"} open={isOpen} onClose={() => setIsOpen(false)}>