Forgot password page

Client/src/App.jsx

@@ -6,17 +6,18 @@ import Register from "./Pages/Register";
 import HomeLayout from "./Layouts/HomeLayout";
 import Demo from "./Pages/Demo/Demo";
 import PlayGround from "./Pages/PlayGround/PlayGround";
-import Monitors from "./Pages/Monitors"
+import Monitors from "./Pages/Monitors";
 import Incidents from "./Pages/Incidents";
 import Status from "./Pages/Status";
 import Integrations from "./Pages/Integrations";
 import Settings from "./Pages/Settings";
+import ForgotPassword from "./Pages/ForgotPassword";
 
 function App() {
   return (
     <>
       <Routes>
-        <Route exact path="/" element={<HomeLayout />} >
+        <Route exact path="/" element={<HomeLayout />}>
           <Route path="monitors" element={<Monitors />} />
           <Route path="incidents" element={<Incidents />} />
           <Route path="status" element={<Status />} />
@@ -28,6 +29,7 @@ function App() {
         <Route exact path="/demo" element={<Demo />} />
         <Route path="*" element={<NotFound />} />
         <Route path="/playground" element={<PlayGround />} />
+        <Route path="/forgot-password" element={<ForgotPassword />} />
       </Routes>
     </>
   );

Client/src/Pages/ForgotPassword/index.css

@@ -0,0 +1,94 @@
+:root {
+  --spacing-1: 15px;
+  --spacing-2: 20px;
+  --spacing-3: 25px;
+  --textfield-font-size: 13px;
+
+  --forgot-password-page-width-1: 100vw;
+  --forgot-password-page-height-1: 100vh;
+
+  --forgot-password-form-width-1: 360px;
+  --forgot-password-form-height-1: 526px;
+
+  --logo-width-1: 20px;
+  --forgot-font-size-medium: 13px;
+
+  --forgot-color-1: #101828;
+  --forgot-color-2: #1570ef;
+  --forgot-color-3: #475467;
+}
+
+.forgot-password-page {
+  width: var(--forgot-password-page-width-1);
+  display: flex;
+  justify-content: center;
+  min-height: var(--forgot-password-page-height-1);
+}
+
+.forgot-password-form {
+  width: var(--forgot-password-form-width-1);
+  height: var(--forgot-password-form-height-1);
+  margin: 90px auto;
+}
+
+.forgot-password-form-header {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.forgot-password-form-header-logo {
+  margin: 0 auto;
+}
+
+.forgot-password-v-gap-large {
+  height: 32px;
+}
+
+.forgot-password-v-gap-medium {
+  height: 24px;
+}
+
+.forgot-password-v-gap-small {
+  height: 12px;
+}
+
+.forgot-password-form-heading {
+  font-size: 16px;
+  font-weight: 700;
+  color: #101828;
+}
+
+.forgot-password-form-subheading {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--forgot-color-3);
+}
+
+.forgot-password-body {
+  width: 360px;
+}
+
+#forgot-password-email-input {
+  width: 308px;
+  height: 11px;
+  font-size: var(--textfield-font-size);
+}
+
+.forgot-password-back-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.forgot-password-back-button-img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.forgot-password-back-button-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--forgot-color-3);
+}

Client/src/Pages/ForgotPassword/index.jsx

@@ -0,0 +1,60 @@
+import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
+import "./index.css";
+import React from "react";
+import Logomark from "../../assets/Images/key-password.png";
+import EmailTextField from "../../Components/TextFields/Email/EmailTextField";
+import Button from "../../Components/Button";
+import LeftArrow from "../../assets/Images/arrow-left.png";
+
+const ForgotPassword = () => {
+  return (
+    <div className="forgot-password-page">
+      <BackgroundPattern></BackgroundPattern>
+      <div className="forgot-password-form">
+        <div className="forgot-password-form-header">
+          <img
+            className="forgot-password-form-header-logo"
+            src={Logomark}
+            alt="Logomark"
+          />
+          <div className="forgot-password-v-gap-medium"></div>
+          <div className="forgot-password-form-heading">Forgot password?</div>
+          <div className="forgot-password-v-gap-small"></div>
+          <div className="forgot-password-form-subheading">
+            No worries, we’ll send you reset instructions.
+          </div>
+        </div>
+        <div className="forgot-password-v-gap-large"></div>
+        <div className="forgot-password-body">
+          <EmailTextField
+            error={false}
+            placeholder="Enter your email"
+            id="forgot-password-email-input"
+          />
+          <div className="forgot-password-v-gap-medium"></div>
+          <Button
+            level="primary"
+            label="Reset password"
+            sx={{
+              width: "100%",
+              fontSize: "13px",
+              fontWeight: "200",
+              height: "44px",
+            }}
+          />
+        </div>
+        <div className="forgot-password-v-gap-large"></div>
+        <div className="forgot-password-back-button">
+          <img
+            className="forgot-password-back-button-img"
+            src={LeftArrow}
+            alt="LeftArrow"
+          />
+          <div className="forgot-password-back-button-text">Back to log in</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPassword;