From 5fb35ed5512fca25fe87de02f5060af93e718aa8 Mon Sep 17 00:00:00 2001 From: blackstars Date: Fri, 25 Oct 2024 01:44:49 +0200 Subject: [PATCH] [feat] add Landing Page for first mobile scss - added generic BasicButtom and LittleLogo and added translate --- frontend/package.json | 2 +- frontend/src/App.css | 40 +++++- frontend/src/assets/_variables.scss | 8 +- frontend/src/assets/globs/glob.svg | 3 + frontend/src/assets/globs/glob2.svg | 3 + frontend/src/assets/images/girl.svg | 9 ++ .../atoms/BasicButton/BasicButton.scss | 10 ++ .../atoms/BasicButton/BasicButton.type.tsx | 5 + .../components/atoms/BasicButton/index.tsx | 17 +++ .../atoms/LittleLogo/LittleLogo.scss | 2 +- frontend/src/index.css | 2 - .../src/pages/LandingPage/LandingPage.scss | 132 ++++++++++++++++++ frontend/src/pages/LandingPage/index.tsx | 74 +++++++--- frontend/tsconfig.app.json | 48 ++++--- .../locales/en/translation.json | 2 +- .../locales/fr/translation.json | 2 +- 16 files changed, 310 insertions(+), 49 deletions(-) create mode 100644 frontend/src/assets/globs/glob.svg create mode 100644 frontend/src/assets/globs/glob2.svg create mode 100644 frontend/src/assets/images/girl.svg create mode 100644 frontend/src/components/atoms/BasicButton/BasicButton.scss create mode 100644 frontend/src/components/atoms/BasicButton/BasicButton.type.tsx create mode 100644 frontend/src/components/atoms/BasicButton/index.tsx diff --git a/frontend/package.json b/frontend/package.json index bd42db4..6d78e85 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -39,7 +39,7 @@ "@types/i18next-xhr-backend": "^1.4.1", "@types/i18next": "^12.1.0", "@types/jest": "^29.5.14", - "@types/react-dom": "^18.3.1", + "@types/react-dom": "^18.3.0", "@types/react-i18next": "^7.8.3", "@types/react-router-dom": "^5.3.3", "@types/react": "^18.3.12", diff --git a/frontend/src/App.css b/frontend/src/App.css index aef0a84..c132fe8 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -4,7 +4,43 @@ } #root { - width: 100%; - height: 100%; font-family: 'Urbanist', sans-serif; + margin: 0; + padding: 0; +} + +p { + margin: 0; +} + +*::-webkit-scrollbar { + height: 8px; + width: 8px; +} + +*::-webkit-scrollbar-track { + border-radius: 4px; + background-color: #132945; + border: 1px solid #A9A9A9; +} + +*::-webkit-scrollbar-track:hover { + background-color: #132945; +} + +*::-webkit-scrollbar-track:active { + background-color: #132945; +} + +*::-webkit-scrollbar-thumb { + border-radius: 8px; + background-color: #D4D4D4; +} + +*::-webkit-scrollbar-thumb:hover { + background-color: #D4D4D4; +} + +*::-webkit-scrollbar-thumb:active { + background-color: #D4D4D4; } \ No newline at end of file diff --git a/frontend/src/assets/_variables.scss b/frontend/src/assets/_variables.scss index 77cf4f1..ad233e5 100644 --- a/frontend/src/assets/_variables.scss +++ b/frontend/src/assets/_variables.scss @@ -1,7 +1,7 @@ //Font -@mixin big-title-bold{ +@mixin big-title{ font-size: 40px; - font-weight: bold; + font-weight: 600; } @mixin title-bold{ @@ -24,13 +24,13 @@ @mixin title-medium{ font-size: 20px; - font-weight: 700; + font-weight: 600; margin: 0; } @mixin big-content-bold{ font-size: 18px; - font-weight: 300; + font-weight: bold; margin: 0; } diff --git a/frontend/src/assets/globs/glob.svg b/frontend/src/assets/globs/glob.svg new file mode 100644 index 0000000..7c35cd7 --- /dev/null +++ b/frontend/src/assets/globs/glob.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/globs/glob2.svg b/frontend/src/assets/globs/glob2.svg new file mode 100644 index 0000000..1df94da --- /dev/null +++ b/frontend/src/assets/globs/glob2.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/images/girl.svg b/frontend/src/assets/images/girl.svg new file mode 100644 index 0000000..cb18530 --- /dev/null +++ b/frontend/src/assets/images/girl.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/atoms/BasicButton/BasicButton.scss b/frontend/src/components/atoms/BasicButton/BasicButton.scss new file mode 100644 index 0000000..7b354bd --- /dev/null +++ b/frontend/src/components/atoms/BasicButton/BasicButton.scss @@ -0,0 +1,10 @@ +@import '@assets/variables.scss'; + +.basic-button{ + @include big-content-bold; + background: $secondary; + color: $white; + border-radius: 10px; + padding: 14px 24px; + border: none; +} \ No newline at end of file diff --git a/frontend/src/components/atoms/BasicButton/BasicButton.type.tsx b/frontend/src/components/atoms/BasicButton/BasicButton.type.tsx new file mode 100644 index 0000000..975fb97 --- /dev/null +++ b/frontend/src/components/atoms/BasicButton/BasicButton.type.tsx @@ -0,0 +1,5 @@ +export interface BasicButtonProps + extends React.ButtonHTMLAttributes { + children: React.ReactNode; + width?: number; +} diff --git a/frontend/src/components/atoms/BasicButton/index.tsx b/frontend/src/components/atoms/BasicButton/index.tsx new file mode 100644 index 0000000..3b9f0cd --- /dev/null +++ b/frontend/src/components/atoms/BasicButton/index.tsx @@ -0,0 +1,17 @@ +import type { BasicButtonProps } from "./BasicButton.type"; +import "./BasicButton.scss"; + +function BasicButton({ children, width = 300, ...props }: BasicButtonProps) { + return ( + + ); +} + +export default BasicButton; diff --git a/frontend/src/components/atoms/LittleLogo/LittleLogo.scss b/frontend/src/components/atoms/LittleLogo/LittleLogo.scss index e9e58d9..5ca6b09 100644 --- a/frontend/src/components/atoms/LittleLogo/LittleLogo.scss +++ b/frontend/src/components/atoms/LittleLogo/LittleLogo.scss @@ -8,7 +8,7 @@ &__title{ @include content-bold; - color: $prymary-color; + color: $prymary; margin: 0; } } \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index cb1f8c5..a3c84f0 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,6 +1,4 @@ body { margin: 0; padding: 0; - width: 100%; - height: 100%; } \ No newline at end of file diff --git a/frontend/src/pages/LandingPage/LandingPage.scss b/frontend/src/pages/LandingPage/LandingPage.scss index e69de29..dee5c1e 100644 --- a/frontend/src/pages/LandingPage/LandingPage.scss +++ b/frontend/src/pages/LandingPage/LandingPage.scss @@ -0,0 +1,132 @@ +@import '@assets/variables.scss'; + +.landing-page { + background: linear-gradient(82deg, rgba(255,255,252,1) 0%, rgba(68,119,232,1) 100%); + + &__first-view { + height: 100vh; + + &__glob{ + position: absolute; + right: 0; + width: 268px; + top: 145px; + overflow: hidden; + z-index: 0; + + &__img{ + width: 440px; + height: 347px; + } + } + + &__girl{ + position: absolute; + right: 0; + top: 300px; + width: 268px; + z-index: 0; + overflow: hidden; + + &__img{ + width: 400px; + height: 500px; + } + } + + &__header{ + display: flex; + align-items: center; + justify-content: space-around; + padding: 32px 0 40px; + + &__connect{ + @include big-content-bold; + color: $white; + } + } + + &__description{ + @include big-title; + position: relative; + z-index: 1; + color: $prymary; + width: 180px; + text-align: center; + margin-left: 7%; + } + + &__buttom{ + position: absolute; + display: flex; + justify-content: center; + z-index: 1; + bottom: 4%; + width: 100%; + + + } + } + + &__second-view { + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + + &__description{ + @include title-medium-bold; + color: $prymary; + text-align: center; + margin: 94px 16px 43px; + } + + &__step{ + display: flex; + flex-direction: column; + gap: 34px; + + &__content{ + @include title-medium-bold; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: $white; + background: $prymary; + border-radius: 10px; + width: 178px; + height: 150px; + padding: 0 16px; + text-align: center; + + } + } + + &__glob{ + position: absolute; + right: 0; + left: 0; + bottom: -100vh; + height: 124px; + z-index: 0; + overflow: hidden; + + &__img{ + width: 440px; + height: 360px; + } + } + + &__buttom{ + position: absolute; + display: flex; + justify-content: center; + z-index: 1; + bottom: -94%; + width: 100%; + + + } + } +} \ No newline at end of file diff --git a/frontend/src/pages/LandingPage/index.tsx b/frontend/src/pages/LandingPage/index.tsx index e0bc59b..514491c 100644 --- a/frontend/src/pages/LandingPage/index.tsx +++ b/frontend/src/pages/LandingPage/index.tsx @@ -1,30 +1,72 @@ -import { useTranslation } from "react-i18next"; - +import BasicButton from "@components/atoms/BasicButton"; import LittleLogo from "@components/atoms/LittleLogo"; +import "./LandingPage.scss"; +import globFirstView from "@assets/globs/glob.svg"; +import globSecondView from "@assets/globs/glob2.svg"; +import girldImage from "@assets/images/girl.svg"; +import { useTranslation } from "react-i18next"; + function LandingPage() { const { t } = useTranslation(); return ( -
-
-
-
+
+
+
+ glob +
+
+ girl +
+
+
-

{t("CONNECT_MY")}

+

+ {t("CONNECT_MY")} +

+
+

+ {t("LANDING_DESCRIPTION")} +

+
+ {t("CREATE_ACCOUNT")}
-

{t("LANDING_DESCRIPTION")}

-
{/* {t("CREATE_ACCOUNT")} */}
-
-

{t("LANDING_DESCRIPTION_2")}

-
-

{t("PROGRAMS_TO_DICOVER")}

-

{t("FOLLOW_YOUR_PROGRESS")}

-

{t("PERSONALIZED_COACHING")}

+
+

+ {t("LANDING_DESCRIPTION_2")} +

+
+

+ {t("PROGRAMS_TO_DICOVER")} +

+

+ {t("FOLLOW_YOUR_PROGRESS")} +

+

+ {t("PERSONALIZED_COACHING")} +

+
+
+ {t("TEST_PROGRAM")} +
+
+ glob
-
{/* {t("TEST_PROGRAM")} */}
); diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json index 251fe2b..cd905f2 100644 --- a/frontend/tsconfig.app.json +++ b/frontend/tsconfig.app.json @@ -1,25 +1,31 @@ { - "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "isolatedModules": true, - "moduleDetection": "force", - "noEmit": true, - "jsx": "react-jsx", + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "types":["vitest", "jest"] - }, - "include": ["src"] + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "baseUrl": ".", + "types": ["vitest", "jest"], + "paths": { + "@components/*": ["src/components/*"], + "@assets/*": ["src/assets/*"], + "@scss/*": ["src/scss/*"] + } + }, + "include": ["src"] } diff --git a/translation-server/locales/en/translation.json b/translation-server/locales/en/translation.json index f92072d..7ece471 100644 --- a/translation-server/locales/en/translation.json +++ b/translation-server/locales/en/translation.json @@ -3,7 +3,7 @@ "CREATE_ACCOUNT": "Create Account", "FOLLOW_YOUR_PROGRESS": "Follow your progress", "LANDING_DESCRIPTION_2": "Whether you're a beginner or an expert, Pulse Form guides you every step of the way", - "LANDING_DESCRIPTION": "Last year you said next year.", + "LANDING_DESCRIPTION": "Last year you said next year", "PERSONALIZED_COACHING": "Personalized coaching", "PROGRAMS_TO_DICOVER": "Many programs to discover", "TEST_PROGRAM": "Testing a program" diff --git a/translation-server/locales/fr/translation.json b/translation-server/locales/fr/translation.json index 5a48448..8b43928 100644 --- a/translation-server/locales/fr/translation.json +++ b/translation-server/locales/fr/translation.json @@ -3,7 +3,7 @@ "CREATE_ACCOUNT": "Créer un compte", "FOLLOW_YOUR_PROGRESS": "Suis tes progression", "LANDING_DESCRIPTION_2": "Que tu sois débutant ou expert, Pulse Form te guide à chaque étape", - "LANDING_DESCRIPTION": "L'année dernière t'avais dit l'année prochaine. Cette année, c'est maintenant.", + "LANDING_DESCRIPTION": "L'année dernière t'avais dit l'année prochaine", "PERSONALIZED_COACHING": "Un coaching personnalisé", "PROGRAMS_TO_DICOVER": "De nombreux programmes à découvrir", "TEST_PROGRAM": "Tester un programme"