Check email page

Client/src/App.jsx

@@ -12,6 +12,7 @@ import Status from "./Pages/Status";
 import Integrations from "./Pages/Integrations";
 import Settings from "./Pages/Settings";
 import ForgotPassword from "./Pages/ForgotPassword";
+import CheckEmail from "./Pages/CheckEmail";
 
 function App() {
   return (
@@ -30,6 +31,7 @@ function App() {
         <Route path="*" element={<NotFound />} />
         <Route path="/playground" element={<PlayGround />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />
+        <Route path="/check-email" element={<CheckEmail />} />
       </Routes>
     </>
   );

Client/src/Pages/CheckEmail/index.css

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

Client/src/Pages/CheckEmail/index.jsx

@@ -0,0 +1,58 @@
+import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
+import "./index.css";
+import React from "react";
+import EmailIcon from "../../assets/Images/email.png";
+import Button from "../../Components/Button";
+import LeftArrow from "../../assets/Images/arrow-left.png";
+
+const CheckEmail = () => {
+  return (
+    <div className="check-email-page">
+      <BackgroundPattern />
+      <div className="check-email-form">
+        <div className="check-email-form-header">
+          <img
+            className="check-email-form-header-logo"
+            src={EmailIcon}
+            alt="EmailIcon"
+          />
+          <div className="check-email-v-gap-medium"></div>
+          <div className="check-email-form-heading">Check your email</div>
+          <div className="check-email-v-gap-small"></div>
+          <div className="check-email-form-subheading">
+            We sent a password reset link to <span>username@email.com</span>
+          </div>
+        </div>
+        <div className="check-email-v-gap-large"></div>
+        <div className="check-email-body">
+          <Button
+            level="primary"
+            label="Open email app"
+            sx={{
+              width: "100%",
+              fontSize: "13px",
+              fontWeight: "200",
+              height: "44px",
+            }}
+          />
+        </div>
+        <div className="check-email-v-gap-large"></div>
+        <div className="check-email-resend">
+          Didn’t receive the email?
+          <span> Click to resend</span>
+        </div>
+        <div className="check-email-v-gap-large"></div>
+        <div className="check-email-back-button">
+          <img
+            className="check-email-back-button-img"
+            src={LeftArrow}
+            alt="LeftArrow"
+          />
+          <div className="check-email-back-button-text">Back to log in</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CheckEmail;