finished login

src/assets/zoom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1329.08 1329.08" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><defs><style>.fil1{fill:#fff;fill-rule:nonzero}</style></defs><g id="Layer_x0020_1"><g id="_2116467169744"><path d="M664.54 0c367.02 0 664.54 297.52 664.54 664.54s-297.52 664.54-664.54 664.54S0 1031.56 0 664.54 297.52 0 664.54 0z" fill="#e5e5e4" fill-rule="nonzero"/><path class="fil1" d="M664.54 12.94c359.87 0 651.6 291.73 651.6 651.6s-291.73 651.6-651.6 651.6-651.6-291.73-651.6-651.6 291.74-651.6 651.6-651.6z"/><path d="M664.54 65.21c331 0 599.33 268.33 599.33 599.33 0 331-268.33 599.33-599.33 599.33-331 0-599.33-268.33-599.33-599.33 0-331 268.33-599.33 599.33-599.33z" fill="#4a8cff" fill-rule="nonzero"/><path class="fil1" d="M273.53 476.77v281.65c.25 63.69 52.27 114.95 115.71 114.69h410.55c11.67 0 21.06-9.39 21.06-20.81V570.65c-.25-63.69-52.27-114.95-115.7-114.69H294.6c-11.67 0-21.06 9.39-21.06 20.81zm573.45 109.87l169.5-123.82c14.72-12.18 26.13-9.14 26.13 12.94v377.56c0 25.12-13.96 22.08-26.13 12.94l-169.5-123.57V586.64z"/></g></g></svg>

src/components/login/Login.tsx

@@ -1,9 +1,29 @@
+import { Stack } from "@mui/material";
 import Container from "@mui/material/Container";
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
+import hsbcLogo from "../../assets/logo-png.png";
+import zoomLogo from "../../assets/zoom.png";
+import LoginIcon from '@mui/icons-material/Login';
 
 const Login: React.FC = () => {
     return (
         <Container className="login">
-            Login
+            <Stack className="grid-container" spacing={2}>
+                <img className="login-logo" src={hsbcLogo} alt="HSBC Logo"/>
+                <TextField className="username-input" id="outlined-basic" label="Username" variant="outlined" placeholder="Username"/>
+                <TextField className="password-input" id="outlined-basic" label="Password" variant="outlined" placeholder="Password"/>
+                <Stack direction="row" justifyContent="space-between" spacing={2}>
+                    <a className="register-btn" href="#">Forgotten Your Password?</a>
+                    <Button endIcon={<LoginIcon />} className="login-btn" href="#" variant="contained">Login</Button>
+                </Stack>
+                <Stack direction="row" justifyContent="space-between" spacing={2}>
+                    <label>Login with</label>
+                    <a className="zoom-logo" href="#">
+                        <img src={zoomLogo} alt="Zoom Logo"/>
+                    </a>
+                </Stack>
+            </Stack>
         </Container>
     );
   };

src/index.tsx

@@ -1,8 +1,10 @@
 import ReactDOM from "react-dom";
 import App from "./App";
+import "./style/App.css";
+import Login from "./components/login/Login";
 
 const Index:React.FC = () => {
-  return <App />;
+  return <Login />;
 };
 
 ReactDOM.render(<Index />, document.getElementById("root"));

src/style/App.css

@@ -2,6 +2,10 @@
   width: 100%;
 }
 
+a {
+  text-decoration: none;
+}
+
 .main-home {
   max-width: 85% !important;
 }
@@ -69,4 +73,46 @@
   width: 70%;
   height: 70%;
 }
+
+.login .grid-container {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: auto;
+  margin-top: 20%;
+  max-width: 40% !important;
+}
+
+.login .grid-container > * {
+  width: 98%;
+  margin: 0.5% 0;
+}
+
+.login .grid-container .login-logo {
+  display: inline-block;
+  text-align: center;
+  margin: 5% 0;
+}
+
+.login .grid-container .login-btn {
+  margin: 5% 0;
+  width: 40%;
+  background-color: #ed7f88;
+}
+
+.login .grid-container .register-btn {
+  display: inline-block;
+  text-align: left;
+  margin: 5% 0;
+  padding-top: 1rem;
+}
+
+.login .grid-container .zoom-logo {
+  width: 40px;
+  height: 40px;
+}
+
+.login .grid-container .zoom-logo * {
+  width: 100%;
+}
 /*# sourceMappingURL=App.css.map */

src/style/App.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AG4CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AK7ClB,AAAA,UAAU,CAAC;EAGP,SAAS,EAAE,cAAc;CA6CO;;AAhDpC,AAII,UAJM,CAIN,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,KAAK;EACnB,YAAY,EPRS,OAAO;EOS5B,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAgBO;;AA7B/B,AAcQ,UAdE,CAIN,eAAe,CAUX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CAAG;;AAf1B,AAgBQ,UAhBE,CAIN,eAAe,CAYX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;CAAG;;AApBjC,AAqBQ,UArBE,CAIN,eAAe,CAiBX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,cAAc,EAAE,EAAE;CAAG;;AAxBjC,AAyBQ,UAzBE,CAIN,eAAe,CAqBX,QAAQ,CAAC;EACL,gBAAgB,EP1BC,OAAO;EO2BxB,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,CAAC;CAAG;;AA7B7B,AA+BQ,UA/BE,CA8BN,WAAW,CACP,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;CAAG;;AAhC/B,AAiCQ,UAjCE,CA8BN,WAAW,CAGP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AAlC9B,AAmCQ,UAnCE,CA8BN,WAAW,CAKP,KAAK,CAAC;EACF,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AAtCjC,AAuCQ,UAvCE,CA8BN,WAAW,CASP,KAAK,CAAC;EACF,YAAY,EAAE,IAAI;EAClB,gBAAgB,EPzCC,OAAO;EO0CxB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAIC;;AAhDhC,AA6CY,UA7CF,CA8BN,WAAW,CASP,KAAK,CAMD,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CAAG",
+    "mappings": "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",
     "sources": [
         "App.sass",
         "_variables.sass",

src/style/base/_base.sass

@@ -44,3 +44,7 @@
 
 .full-width
     width: 100%
+
+a
+    text-decoration: none
+    

src/style/modules/_login.sass

@@ -1 +1,27 @@
 .login
+    .grid-container
+        align-items: center
+        margin: auto
+        margin-top: 20%
+        max-width: 40% !important
+        > *
+            width: 98%
+            margin: 0.5% 0
+        .login-logo
+            display: inline-block
+            text-align: center
+            margin: 5% 0
+        .login-btn,
+            margin: 5% 0
+            width: 40%
+            background-color: #ed7f88
+        .register-btn
+            display: inline-block
+            text-align: left
+            margin: 5% 0
+            padding-top: 1rem
+        .zoom-logo
+            width: 40px
+            height: 40px
+            *
+                width: 100%