- 
- {hasLabel &&
- );
-}
+ return (
+ {"Pulse Form"}
} -
+
+ {hasLabel &&
+ );
+};
export default LittleLogo;
diff --git a/frontend/src/components/atoms/LoginImage/LoginImage.scss b/frontend/src/components/atoms/LoginImage/LoginImage.scss
new file mode 100644
index 00000000..88c28066
--- /dev/null
+++ b/frontend/src/components/atoms/LoginImage/LoginImage.scss
@@ -0,0 +1,4 @@
+.login-image__img {
+ box-shadow: 50px 50px 50px rgba(0, 0, 0, 0.4);
+ width: 600px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/atoms/LoginImage/LoginImage.type.ts b/frontend/src/components/atoms/LoginImage/LoginImage.type.ts
new file mode 100644
index 00000000..4eaecd1d
--- /dev/null
+++ b/frontend/src/components/atoms/LoginImage/LoginImage.type.ts
@@ -0,0 +1,3 @@
+export interface LoginImageProps {
+ size?: "mobile" | "giant" | "desktop";
+}
\ No newline at end of file
diff --git a/frontend/src/components/atoms/LoginImage/index.tsx b/frontend/src/components/atoms/LoginImage/index.tsx
new file mode 100644
index 00000000..6130e466
--- /dev/null
+++ b/frontend/src/components/atoms/LoginImage/index.tsx
@@ -0,0 +1,24 @@
+import classNames from "classnames";
+
+import loginImage from "@assets/icons/loging-page-img.svg";
+import type { LoginImageProps } from "./LoginImage.type";
+import "./LoginImage.scss";
+
+const LoginImage: React.FCPulse Form
} +
+ 
+
+ );
+};
+
+export default LoginImage;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8e898c6a..a3c84f0e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,4 @@
body {
- margin: 0;
- padding: 0;
-}
+ margin: 0;
+ padding: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/LandingPage/components/FirstView/FirstView.scss b/frontend/src/pages/LandingPage/components/FirstView/FirstView.scss
index a4672e52..b95fe4da 100644
--- a/frontend/src/pages/LandingPage/components/FirstView/FirstView.scss
+++ b/frontend/src/pages/LandingPage/components/FirstView/FirstView.scss
@@ -101,9 +101,13 @@
&__connect {
@include h2-phone;
color: $white;
+ text-decoration: none;
+ &:hover {
+ cursor: pointer;
+ }
}
}
- }
+ }
&__description {
@include landing-page-title-phone;
diff --git a/frontend/src/pages/LandingPage/components/FirstView/index.tsx b/frontend/src/pages/LandingPage/components/FirstView/index.tsx
index 1ba67399..4c8ae3bb 100644
--- a/frontend/src/pages/LandingPage/components/FirstView/index.tsx
+++ b/frontend/src/pages/LandingPage/components/FirstView/index.tsx
@@ -1,9 +1,11 @@
import BasicButton from "@components/atoms/BasicButton";
import LittleLogo from "@components/atoms/LittleLogo";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
import blobFirstView from "@assets/blobs/blob.svg";
import girldImage from "@assets/images/girl.svg";
-import { useTranslation } from "react-i18next";
import "./FirstView.scss";
function FirstView() {
@@ -30,9 +32,9 @@ function FirstView() {
{t("CREATE_ACCOUNT")}
- + {t("CONNECT_MY")} -
+{t("LANDING_DESCRIPTION")}
diff --git a/frontend/src/pages/LoginPage/LoginPage.scss b/frontend/src/pages/LoginPage/LoginPage.scss new file mode 100644 index 00000000..6840ba80 --- /dev/null +++ b/frontend/src/pages/LoginPage/LoginPage.scss @@ -0,0 +1,210 @@ +@import '@assets/variables'; + +.login-page { + &__logo { + display: none; + + @media screen and (min-width: 768px) { + display: flex; + } + } + + &__blob { + position: absolute; + width: 85%; + top: 0; + right: 0; + z-index: 0; + overflow: hidden; + + @media screen and (min-width: 768px) { + display: none; + } + } + + &__form-section { + display: flex; + align-items: center; + flex-direction: column; + min-height: 100vh; + + @media screen and (min-width: 768px) { + flex-direction: row; + align-items: center; + background-color: $white; + } + } + + &__title { + @include h1-phone; + color: $primary; + position: relative; + z-index: 1; + margin: 200px 0px 100px; + + @media screen and (min-width: 768px) { + color: $white; + background-color: $primary; + margin: 100px 0px 100px; + } + } + + &__form { + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; + z-index: 1; + + @media screen and (min-width: 768px) { + color: $white; + background-color: $primary; + } + } + + &__connect-button { + background-color: $secondary; + color: $white; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + margin: 40px 0px 80px; + width: 260px; + } + + &__section { + @include landing-page-title-desktop; + display: flex; + flex-direction: column; + align-items: center; + + @media screen and (min-width: 768px) { + background-color: $primary; + } + } + + &__align { + display: flex; + flex-direction: row; + align-items: start; + } + + &__motivation-block, + &__create-account-block { + display: flex; + flex-direction: column; + align-items: center; + + @media screen and (min-width: 768px) { + background-color: $primary; + } + } + + &__motivation-title, + &__create-account-button { + display: flex; + align-items: center; + width: 75px; + height: 40px; + padding: 0; + margin: 0; + } + + &__motivation-title { + @include h3-phone; + color: $primary; + justify-content: end; + margin-right: 2px; + + @media screen and (min-width: 768px) { + background-color: $primary; + color: $white; + } + } + + &__create-account-button { + @include h3-phone; + background-color: $white; + color: $secondary; + border: none; + width: 140px; + + @media screen and (min-width: 768px) { + background-color: $primary; + } + } + + &__primary-trait { + width: 70px; + background-color: $primary; + border-radius: 5px 0 0 5px; + height: 5px; + + @media screen and (min-width: 768px) { + background-color: $white; + width: 68px; + } + } + + &__secondary-trait { + width: 140px; + height: 6px; + background-color: $secondary; + border-radius: 0 5px 5px 0; + + @media screen and (min-width: 768px) { + width: 150px; + } + } + + &__image-side { + display: none; + + @media screen and (min-width: 768px) { + display: flex; + align-items: center; + justify-content: end; + background-color: $white; + flex: 1; + } + } + + &__form-container { + background-color: $white; + + @media screen and (min-width: 768px) { + background-color: $primary; + padding: 60px 250px 100px; + margin-right: 20%; + border-radius: 10px; + box-shadow: 50px 50px 50px rgba(0, 0, 0, 0.4); + } + } + + &__test-program-container { + display: none; + + @media screen and (min-width: 768px) { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + width: 100%; + top: 7%; + background-color: transparent; + z-index: 2; + } + } + + &__test-program-button { + @include h1-phone; + padding: 10px 20px; + font-size: 18px; + color: $primary; + background-color: transparent; + border: 2px solid black; + border-radius: 10px; + cursor: pointer; + } +} diff --git a/frontend/src/pages/LoginPage/index.tsx b/frontend/src/pages/LoginPage/index.tsx new file mode 100644 index 00000000..8746ab7a --- /dev/null +++ b/frontend/src/pages/LoginPage/index.tsx @@ -0,0 +1,92 @@ +import { useForm } from "react-hook-form"; +import { useTranslation } from "react-i18next"; + +import blopLoginPage from "@assets/icons/blob/blob3.svg"; +import BasicButton from "@components/atoms/BasicButton"; +import InputField from "@components/atoms/ImputField/ImputField"; +import LittleLogo from "@components/atoms/LittleLogo/index"; +import LoginImage from "@components/atoms/LoginImage"; + +import "./LoginPage.scss"; + +interface LoginFormValues { + email: string; + password: string; +} + +function LoginPage() { + const { t } = useTranslation(); + const { register, handleSubmit } = useForm
+
+
+
+
+
+
+
+
+ {t("READY")}
+ +
+
+
+
+ {t("MOTIVATED")}
+ +
+
+
+
+ CONNECT_MY -
+renders the App component 1`] = ` CREATE_ACCOUNT -
CONNECT_MY -
+ {
it("renders the Landing Page", () => {
- const tree = render(
CONNECT_MY -
+renders the Landing Page 1`] = ` CREATE_ACCOUNT -
CONNECT_MY -
+ {
it("renders the FirstView component", () => {
- const tree = render(
CONNECT_MY -
+renders the FirstView component 1`] = ` CREATE_ACCOUNT -
CONNECT_MY -
+