creation of Footer component

src/components/Footer/Footer.jsx

@@ -0,0 +1,17 @@
+import styles from "./Footer.module.css"
+import {Link} from "react-router";
+
+function Footer(){
+
+    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>
+            </div>
+        </footer>
+    )
+}
+
+export default Footer;

src/components/Footer/Footer.module.css

@@ -0,0 +1,20 @@
+.footer{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: fit-content;
+    padding: 2rem;
+}
+
+.footerContent {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.link {
+    color: black;
+    width: fit-content;
+    text-align: center;
+}

src/index.css

@@ -1,3 +1,11 @@
+* {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -13,6 +21,15 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+
+
+.content {
+  padding: 1.5rem;
+}
+
+
+
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -32,9 +49,10 @@ body {
 
 
 .glassCard {
+  z-index: 100;
   width: 240px;
   height: 360px;
-  background: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.65);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   border-radius: 20px;

src/layout.jsx

@@ -1,11 +1,15 @@
 import { Outlet } from "react-router";
+import Footer from "./components/Footer/Footer.jsx"
 
 
 function Layout(){
 
     return (
         <div>
-            <Outlet />
+            <div className="content">
+                <Outlet />
+                <Footer />
+            </div>
         </div>
     )
 }

src/pages/Home/HomePage.jsx

@@ -1,10 +1,9 @@
-import styles from "./HomePage.module.css"
+
 
 function HomePage(){
 
     return (
         <div>
-            <h1 className={styles.title}>Accueil</h1>
         </div>
     )
 }