add login component

front-end/src/pages/auth/Login.jsx

@@ -1,13 +1,63 @@
-import React from 'react'
+import { Link } from "react-router-dom";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Input,
+  Checkbox,
+  Button,
+  Typography,
+} from "@material-tailwind/react";
 
-
-
-function Login() {
+export function Login() {
   return (
-    <h1 className="text-3xl font-bold bg-orange-600 underline">
-      Hello world!
-    </h1>
-  )
+    <>
+      <img
+        src="https://www.ehret-creation.fr/wp-content/uploads/sites/20/2022/01/artisanat-maroc-1020x600.jpg"
+        className="absolute inset-0 z-0 h-full w-full object-cover"
+      />
+      <div className="absolute inset-0 z-0 h-full w-full bg-black/50" />
+      <div className="container mx-auto p-4">
+        <Card className="absolute top-2/4 left-2/4 w-full max-w-[24rem] -translate-y-2/4 -translate-x-2/4">
+          <CardHeader
+            variant="gradient"
+            color="blue"
+            className="mb-4 grid h-28 place-items-center"
+          >
+            <Typography variant="h3" color="white">
+              Sign In
+            </Typography>
+          </CardHeader>
+          <CardBody className="flex flex-col gap-4">
+            <Input type="email" label="Email" size="lg" />
+            <Input type="password" label="Password" size="lg" />
+            <div className="-ml-2.5">
+              <Checkbox label="Remember Me" />
+            </div>
+          </CardBody>
+          <CardFooter className="pt-0">
+            <Button variant="gradient" fullWidth>
+              Sign In
+            </Button>
+            <Typography variant="small" className="mt-6 flex justify-center">
+              Don't have an account?
+              <Link to="/signup">
+                <Typography
+                  as="span"
+                  variant="small"
+                  color="blue"
+                  className="ml-1 font-bold"
+                >
+                  Sign up
+                </Typography>
+              </Link>
+            </Typography>
+          </CardFooter>
+        </Card>
+      </div>
+    </>
+  );
 }
 
-export default Login
+export default Login;