feat: add pages forget password

src/pages/ForgetPassword/ForgetPassword.module.scss

@@ -0,0 +1,94 @@
+.home {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--background);
+}
+
+.image {
+  height: 100vh;
+  left: 660px;
+  top: 0px;
+
+  mix-blend-mode: hard-light;
+  opacity: 0.8;
+}
+
+.logon {
+  display: flex;
+  width: 50%;
+  height: 616px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.form {
+  display: flex;
+  height: 540px;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+
+  h2 {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: var(--white);
+  }
+}
+
+.separator {
+  font-size: 14px;
+  color: var(--text-primary);
+
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+
+  &::before {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--text-primary);
+    margin-right: 16px;
+    width: 7rem;
+  }
+
+  &::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--text-primary);
+    margin-left: 16px;
+    width: 7rem;
+  }
+}
+
+p {
+  margin-top: 20px;
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+}
+
+span {
+  color: #ff0000;
+  font-size: 12px;
+  margin-top: -5px;
+  justify-content: flex-start;
+  display: flex;
+  width: 100%;
+}
+
+.link {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--orange);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

src/pages/ForgetPassword/index.tsx

@@ -0,0 +1,62 @@
+import { FiUser } from 'react-icons/fi';
+import { Link } from 'react-router-dom';
+
+import barberImage from 'assets/barber.png';
+import logoDark from 'assets/Logo_dark.png';
+import logo from 'assets/Logo.png';
+
+import { Button } from 'components/Button';
+import { Input } from 'components/Input';
+
+import { useTheme } from 'contexts/Theme';
+
+import { useForgetPassword } from 'hooks/useForgetPassword';
+
+import styles from './ForgetPassword.module.scss';
+
+export function ForgetPassword() {
+  const { theme } = useTheme();
+  const { formikForgetPassword } = useForgetPassword();
+
+  return (
+    <>
+      <div className={styles.home} data-theme={theme}>
+        <div className={styles.logon}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              formikForgetPassword.handleSubmit(e);
+            }}
+          >
+            <div className={styles.form}>
+              <img src={theme === 'light' ? logoDark : logo} alt="Logo" />
+              <h2>Recuperar senha</h2>
+
+              <Input
+                type="email"
+                name="email"
+                placeholder="Email"
+                onChange={formikForgetPassword.handleChange}
+                onBlur={formikForgetPassword.handleBlur}
+                value={formikForgetPassword.values.email}
+                icon={<FiUser color="#666360" size={24} />}
+              />
+              {formikForgetPassword.errors.email && formikForgetPassword.touched.email && (
+                <span>{formikForgetPassword.errors.email}</span>
+              )}
+
+              <Button type="submit">Recuperar</Button>
+            </div>
+          </form>
+
+          <p>
+            <Link to="/" className={styles.link}>
+              Voltar ao login
+            </Link>
+          </p>
+        </div>
+        <img src={barberImage} alt="baberiro" className={styles.image} />
+      </div>
+    </>
+  );
+}