begin login page

src/components/form.jsx

@@ -0,0 +1,31 @@
+function LoginForm({ className }) {
+    return (
+        <form className={className}>
+            <h1>Connexion</h1>
+
+            <div className="form-group">
+                <br/>
+                <label htmlFor="email" className="floating-label">Adresse e-mail</label>
+                <input
+                    type="email"
+                    id="email"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="password" className="floating-label">Mot de passe</label>
+                <input
+                    type="password"
+                    id="password"
+                    required
+                />
+                <br/>
+            </div>
+
+            <button type="submit" className="login-button">Se connecter</button>
+        </form>
+    );
+}
+export default LoginForm;
+

src/index.css

@@ -2,7 +2,6 @@
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
@@ -26,10 +25,12 @@ body {
   margin: 0;
   display: flex;
   place-items: center;
+  width:100%;
   min-width: 320px;
   min-height: 100vh;
 }
 
+
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
@@ -58,6 +59,7 @@ button:focus-visible {
   :root {
     color: #213547;
     background-color: #ffffff;
+  
   }
   a:hover {
     color: #747bff;

src/pages/Login/LoginPage.jsx

@@ -0,0 +1,14 @@
+import styles from "./LoginPage.module.css"
+import LoginForm from "../../components/form.jsx"
+
+function LoginPage(){
+
+    return (
+            <div className={styles.container}>
+                <LoginForm className={styles["login-form"]}/>
+            </div>
+       
+    )
+}
+
+export default LoginPage;

src/pages/Login/LoginPage.module.css

@@ -0,0 +1,55 @@
+* {
+    margin: 0;
+    padding: 0;
+    width:100%;
+    box-sizing: border-box;
+}
+.container {
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(235, 199, 22);
+    padding: 20px;
+}
+.login-form {
+    display: flex;
+    flex-direction: column;
+    padding: 40px 20px;
+    width: 100%;
+    max-width: 400px;
+    background-color: rgb(232, 229, 229);
+    opacity: 0.85;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    
+}
+.form-group {
+    margin-bottom: 30px;
+}
+label{
+    color:red;
+}
+input {
+    width: 100%;
+    padding: 15px 10px 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+}
+h1 {
+    text-align: center;
+    color: orange;
+    margin-bottom: 20px;
+}
+.login-button {
+    padding: 10px;
+    background-color: rgb(125, 117, 133);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    margin-top: 100px;
+}

src/router.js

@@ -1,6 +1,7 @@
 import { createBrowserRouter } from "react-router";
 import Layout from "./layout.jsx";
 import HomePage from "./pages/Home/HomePage";
+import LoginPage from "./pages/Login/LoginPage";
 
 const router = createBrowserRouter([
     {
@@ -10,6 +11,10 @@ const router = createBrowserRouter([
             {
                 path: "/",
                 Component: HomePage,
+            },
+            {
+                path: "/login",
+                Component: LoginPage,
             }
         ]
     }