Forgot password component

public/index.html

@@ -10,6 +10,9 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/ForgotPassword.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import './forgotPassword.css';
+import spaceYaTechLogo from './spaceYaTechLogo.svg';
+
+/**
+ * Page that allows user to reset password
+ * fp - stands for forgot password
+ */
+function ForgotPassword(){
+    return (
+        <div className="fp__whole__page">
+            <div className="fp__left__side">
+                <div className="fp__logo__area">
+                    <img src={spaceYaTechLogo} className="fp__logo"/>
+                </div>
+            </div>
+            <div className="fp__right__side">
+                <div className="fp__content__area">
+                    <div className="fp__reset__password__area">
+                        <div className="fp__reset__password__text">
+                            Please Reset Password
+                        </div>
+                    </div>
+                    <div>
+                        <form>
+                            <div>
+                                <div className="fp__form" id="fp__password__field">
+                                    <input className="fp__input__field" type="password" placeholder="Password"/>
+                                </div>
+                                <div className="fp__form" id="fp__confirm__password__field">
+                                    <input className="fp__input__field" type="password" placeholder="Confirm Password"/>
+                                </div>
+                            </div>
+                            <div className="fp__form">
+                                <button className="fp__continue">Continue</button>
+                            </div>
+                            <div></div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default ForgotPassword;

src/forgotPassword.css

@@ -0,0 +1,97 @@
+/* fp - stands for forgot password */
+.fp__whole__page {
+    display: flex;
+}
+
+/* fp - stands for forgot password */
+.fp__left__side {
+    width: 44vw;
+    height: 100vh;
+    background-color: #03A47E;
+}
+
+/* fp - stands for forgot password */
+.fp__logo__area {
+    padding: 22vh 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* fp - stands for forgot password */
+.fp__logo {
+    height: 56vh;
+}
+
+/* fp - stands for forgot password */
+.fp__right__side {
+    width: 56vw;
+    height: 100vh;
+}
+
+/* fp - stands for forgot password */
+.fp__content__area {
+    margin: 10vh 0 48vh;
+}
+
+/* fp - stands for forgot password */
+.fp__reset__password__area {
+    padding-bottom: 8vh;
+}
+
+/* fp - stands for forgot password */
+.fp__reset__password__text {
+    width: 32vw;
+    line-height: 5.7vh;
+    margin: auto;
+    font-size: 4vh;
+    text-align: center;
+    color: #252533;
+    font-family: 'Poppins', sans-serif;
+    font-style: normal;
+    font-weight: 500;
+}
+
+/* fp - stands for forgot password */
+.fp__form {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* fp - stands for forgot password */
+.fp__input__field {
+    box-sizing: border-box;
+    width: 42vw;
+    height: 7.5vh;
+    border: 1px solid #000000;
+    border-radius: 8px;
+    padding: 1.65vh 1vw;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    font-size: 2vh;
+
+}
+
+/* fp - stands for forgot password */
+#fp__password__field {
+    padding-bottom: 1.65vh;
+}
+
+#fp__confirm__password__field {
+    padding-bottom: 3.7vh;
+}
+
+.fp__continue {
+    box-sizing: border-box;
+    width: 42vw;
+    height: 7.5vh;
+    border: none;
+    border-radius: 8px;
+    font-family: 'Poppins', sans-serif;
+    font-style: normal;
+    font-size: 3vh;
+    font-weight: 500;
+    background-color: #03A47E;
+    color: #ffffff;
+}

src/index.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
+import ForgotPassword from "./ForgotPassword";
 import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(document.getElementById("root")!);
 root.render(
   <React.StrictMode>
-    <App />
+    {/*<App />*/}
+    <ForgotPassword />
   </React.StrictMode>
 );