update footer

src/components/Footer/Footer.jsx

@@ -1,52 +1,31 @@
 import styles from "./Footer.module.css"
-import {Link, NavLink} from "react-router";
-import Button from "../ui/button/button.jsx"
-import {useContext} from "react";
-import {AuthContext} from "../../contexts/auth/AuthContext.js";
+import {Link} from "react-router";
 
 function Footer(){
-    const { user } = useContext(AuthContext);
+    const currentYear = new Date().getFullYear();
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+    };
 
     return (
-        <footer className={`${styles.footer} ${"glassCard"}`} >
+        <footer className={`${styles.footer} glassCard`}>
             <div className={styles.footerContent}>
-                <div className={styles.footerElement}>
-                    {/* TODO: les mettre dans un fichier de configuration */}
-                    <p>contact@example.com</p>
-                    <p>06 68 98 10 56</p>
+                <div className={styles.copyright}>
+                    © {currentYear} Beaup'hub. Tous droits réservés.
                 </div>
 
-                <div className={styles.footerElement}>
-                    {/*  TODO : mettre le nom du fichier dans un fichier de configuration aussi ou pas comme tu veux */}
-                    <Button variant={"transparent"}
-                            onClick={() => window.open("/rgpd.pdf", "_blank")}>
-                            Fiche RGPD
-                    </Button>
-                    <Button variant={"transparent"}
-                            onClick={() => window.open("/legalNotices", "_blank")}>
-                        Mentions légales
-                    </Button>
-                    <Link to="" className={styles.link}></Link>
-                </div>
-                <div className={styles.footerElement}>
-                    <NavLink to="/">
-                        Accueil
-                    </NavLink>
-                    <NavLink to="/events">
-                        Evènements
-                    </NavLink>
-                    <NavLink to="/volunteers">
-                        Bénévoles
-                    </NavLink>
-                    {user?.isAdmin && (
-                        <NavLink to="/admin">
-                            Administration
-                        </NavLink>
-                    )}
-                </div>
+                <nav className={styles.footerNav}>
+                    <Link to="/rgpd.pdf" target="_blank" className={styles.link}>Fiche RGPD</Link>
+                    <span className={styles.separator}></span>
+                    <Link to="/legalNotices" className={styles.link}>Mentions légales</Link>
+                    <span className={styles.separator}></span>
+                    <Link to="/contact" 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;

src/components/Footer/Footer.module.css

@@ -1,33 +1,63 @@
-.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;
 }
 
-.footerElement{
+.footerNav {
     display: flex;
+    align-items: center;
+}
+
+.link {
+    color: black;
+    text-decoration: none;
+    font-size: 0.95rem;
+    transition: color 0.2s ease;
+}
+
+.link:hover {
+    color: #019AFF;
+}
+
+.separator {
+    width: 1px;
+    height: 16px;
+    background-color: black;
+    margin: 0 1rem;
+}
+
+.copyright {
+    color: black;
+    font-size: 0.9rem;
+    white-space: nowrap;
 }
 
 
 
-
-@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;
     }
 }