addSccsLogReg

frontend/src/App.jsx

@@ -6,8 +6,7 @@ import Write from "./pages/Write";
 import Single from "./pages/Single";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
-
-import "./App.css";
+import "./style.scss";
 
 function Layout() {
   return (

frontend/src/components/Footer.jsx

@@ -1,7 +1,15 @@
 import React from "react";
+import Logo from "../img/logo.png";
 
 function Footer() {
-  return <div>Footer</div>;
+  return (
+    <footer>
+      <img src={Logo} alt="" />
+      <span>
+        Fabriqué avec ♥️ sur <b>React.js</b>.
+      </span>
+    </footer>
+  );
 }
 
 export default Footer;

frontend/src/components/Navbar.jsx

@@ -1,7 +1,34 @@
 import React from "react";
+import { Link } from "react-router-dom";
+import logo from "../assets/logo.png";
 
 function Navbar() {
-  return <div>Navbar</div>;
+  return (
+    <div className="navbar">
+      <div className="container">
+        <div className="logo">
+          <Link to="/">
+            <img src={logo} className="logo" alt="logo" />
+          </Link>
+        </div>
+        <div className="links">
+          <Link className="link" to="/?cat=art">
+            <h6>Articles</h6>
+          </Link>
+          <Link className="link" to="/?cat=dossier">
+            <h6>Dossiers</h6>
+          </Link>
+          <span>ZeitounMax</span>
+          <span>Déconnexion</span>
+          <span className="write">
+            <Link className="link" to="/write">
+              Ecrire
+            </Link>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default Navbar;

frontend/src/pages/Home.jsx

@@ -1,10 +1,54 @@
-import logo from "../assets/logo.png";
+import React from "react";
+import { Link } from "react-router-dom";
+
+function Home() {
+  const posts = [
+    {
+      id: 1,
+      title: "Lorem Ipsum",
+      desc: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. A possimus excepturi aliquid nihil cumque ipsam facere aperiam at! Ea dolorem ratione sit debitis deserunt repellendus numquam ab vel perspiciatis corporis!",
+      img: "https://images.pexels.com/photos/7008010/pexels-photo-7008010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+    },
+    {
+      id: 2,
+      title: "Lorem Ipsum",
+      desc: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. A possimus excepturi aliquid nihil cumque ipsam facere aperiam at! Ea dolorem ratione sit debitis deserunt repellendus numquam ab vel perspiciatis corporis!",
+      img: "https://images.pexels.com/photos/7008010/pexels-photo-7008010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+    },
+    {
+      id: 3,
+      title: "Lorem Ipsum",
+      desc: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. A possimus excepturi aliquid nihil cumque ipsam facere aperiam at! Ea dolorem ratione sit debitis deserunt repellendus numquam ab vel perspiciatis corporis!",
+      img: "https://images.pexels.com/photos/7008010/pexels-photo-7008010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+    },
+    {
+      id: 4,
+      title: "Lorem Ipsum",
+      desc: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. A possimus excepturi aliquid nihil cumque ipsam facere aperiam at! Ea dolorem ratione sit debitis deserunt repellendus numquam ab vel perspiciatis corporis!",
+      img: "https://images.pexels.com/photos/7008010/pexels-photo-7008010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+    },
+  ];
 
-export default function Home() {
   return (
-    <header className="App-header">
-      <img src={logo} className="App-logo" alt="logo" />
-      <p>Forgotten Silver</p>
-    </header>
+    <div className="home">
+      <div className="posts">
+        {posts.map((post) => (
+          <div className="post" key={post.id}>
+            <div className="img">
+              <img src={post.img} alt="" />
+            </div>
+            <div className="content">
+              <Link className="link" to={`/post/${post.id}`}>
+                <h1>{post.title}</h1>
+                <p>{post.desc}</p>
+                <button type="button">Lire en plus</button>
+              </Link>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
   );
 }
+
+export default Home;

frontend/src/pages/Login.jsx

@@ -1,7 +1,21 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 function Login() {
-  return <div>Login</div>;
+  return (
+    <div className="auth">
+      <h1>Login</h1>
+      <form>
+        <input required type="text" placeholder="username" />
+        <input required type="password" placeholder="password" />
+        <button type="submit">Valider</button>
+        <p>Une erreur est survenu</p>
+        <span>
+          Tu n'as pas de compte ? <Link to="/register">S'inscrire</Link>
+        </span>
+      </form>
+    </div>
+  );
 }
 
 export default Login;

frontend/src/pages/Register.jsx

@@ -1,7 +1,22 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 function Register() {
-  return <div>Register</div>;
+  return (
+    <div className="auth">
+      <h1>S'inscrire</h1>
+      <form>
+        <input required type="text" placeholder="username" />
+        <input required type="email" placeholder="email" />
+        <input required type="password" placeholder="password" />
+        <button type="submit">Valider</button>
+        <p>Une erreur est survenue</p>
+        <span>
+          Vous avez un compte ? <Link to="/login">Se Connecter</Link>
+        </span>
+      </form>
+    </div>
+  );
 }
 
 export default Register;

frontend/src/style.scss

@@ -0,0 +1,194 @@
+.app {
+  display: flex;
+  justify-content: center;
+
+  .container {
+    width: 1024px;
+
+    .link {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    // Login and Register
+
+    .auth {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+    }
+
+    h1 {
+      font-size: 20px;
+      color: rgb(221, 164, 19);
+      margin-bottom: 20px;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+      background-color: bisque;
+      width: 200px;
+      gap: 20px;
+
+      input {
+        padding: 10px;
+        border: none;
+        border-bottom: 1px solid gray;
+      }
+    }
+
+    button {
+      padding: 10px;
+      border: none;
+      background-color: blue;
+      cursor: pointer;
+      color: white;
+    }
+
+    span {
+      font-size: 12px;
+      text-align: center;
+    }
+
+    p {
+      font-size: 12px;
+      color: red;
+      text-align: center;
+    }
+
+    // Navbar
+    .navbar {
+      .container {
+        padding: 10px 0px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .logo {
+          img {
+            width: 250px;
+          }
+        }
+
+        .links {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+
+          h6 {
+            font-size: 16px;
+            font-weight: 300;
+          }
+
+          span {
+            cursor: pointer;
+          }
+
+          .write {
+            background-color: red;
+            color: white;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 300;
+            border: 1px solid white;
+
+            &:hover {
+              width: 48px;
+              height: 48px;
+              color: red;
+              background-color: white;
+              border: 1px solid red;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Footer
+  footer {
+    margin-top: 100px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background-color: black;
+    color: white;
+    justify-content: space-between;
+    font-size: 12px;
+
+    img {
+      height: 40px;
+    }
+
+    // Home
+
+    .home {
+      .posts {
+        margin-top: 50px;
+        display: flex;
+        flex-direction: column;
+        gap: 150px;
+
+        .post {
+          display: flex;
+          gap: 100px;
+
+          &:nth-child(2n + 1) {
+            flex-direction: row-reverse;
+          }
+
+          .img {
+            flex: 2;
+            position: relative;
+
+            &::after {
+              content: "";
+              width: 100%;
+              height: 100%;
+              background-color: blanchedalmond;
+              position: absolute;
+              top: 20px;
+              left: -20px;
+            }
+
+            img {
+              width: 100%;
+              max-height: 400px;
+              object-fit: cover;
+            }
+          }
+
+          .content {
+            flex: 3;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            h1 {
+              font-size: 48px;
+            }
+            p {
+              font-size: 18px;
+            }
+
+            button {
+              width: max-content;
+              padding: 10px;
+              border: none;
+              cursor: pointer;
+              background-color: #fff;
+              border: 1px solid black;
+            }
+          }
+        }
+      }
+    }
+  }
+}