From b813f1357ecc376196ac6fb31e102a0db82e6312 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Mon, 28 Oct 2024 18:26:15 +0200 Subject: [PATCH 1/5] main login baner css, deleted partner --- FrontEnd/src/global.css | 12 +- .../LandingPage/LoginBanner/LoginBanner.css | 183 ------------------ .../LandingPage/LoginBanner/LoginBanner.jsx | 56 ++---- .../LoginBanner/LoginBanner.module.css | 77 ++++++++ FrontEnd/src/pages/LandingPage/MainPage.jsx | 2 - .../pages/LandingPage/Partners/Partners.css | 97 ---------- .../pages/LandingPage/Partners/Partners.jsx | 57 ------ 7 files changed, 99 insertions(+), 385 deletions(-) delete mode 100644 FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.css create mode 100644 FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css delete mode 100644 FrontEnd/src/pages/LandingPage/Partners/Partners.css delete mode 100644 FrontEnd/src/pages/LandingPage/Partners/Partners.jsx diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 80b9f54dd..996efb1c2 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -77,8 +77,10 @@ /* Footer */ --footer-backround: #3C4044; --footer-font-color: #FFF; - --footer-links-font-color: #A0ABC0; + --footer-links-font-color: #FFF; --footer-bottom-backround: #333; + --footer-policy-links-font-color: #959595; + --footer-scroll-button: #B4D27A; /* main pages About block*/ --about-text-font-color: #292E32; @@ -90,11 +92,11 @@ --about-cards-font-color: #292E32; --about-cards-background-color: #F0F1F3; --about-cards-background-content-color: #FFF; - /* main pages Banner block*/ --banner-main-font-color: #000; - --banner-main-dark-color: #1F9A7C; - + --banner-main-color: #B4D27A; + --banner-main-batton-text-color: #FFF; + --banner-main-batton-color: black; /* CompanyCard */ --companies-card-text-color: #292e32; --companies-card-box-shadow: rgba(65, 64, 69, 0.2); @@ -113,6 +115,8 @@ --primary-green-80: #1f9a7c; --character-title-85: rgba(0, 0, 0, 0.85); + /*Login Page*/ + --min-height-login-page: calc(100vh - 528px); --wf-base-white: #FFF; --profile-min-height-block: calc(100vh - 565px); diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.css b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.css deleted file mode 100644 index dfad9f503..000000000 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.css +++ /dev/null @@ -1,183 +0,0 @@ -.login-banner-group { - width: var(--main-block-size); - height: 270px; - position: relative; -} - -.login-banner-group__rectangle { - width: var(--main-block-size); - height: 270px; - flex-shrink: 0; - background: #FFF; - left: 0; - top: 0; - position: absolute; -} - -.login-banner-group__content { - width: 1304px; - height: 198px; - flex-shrink: 0; - border-radius: 12px; - border: 1px solid #E2E5EB; - box-shadow: 0 0 2px 0 rgba(65, 64, 69, 0.20); - left: 104px; - top: 36px; - position: absolute; - overflow: hidden; -} - -.login-banner-group__content__rectangle { - width: 954px; - height: 198px; - flex-shrink: 0; - background: #1F9A7C; - left: 0; - top: 0; - position: absolute; - overflow: hidden; -} - -.login-banner-group__image { - width: 960px; - height: 210px; - flex-shrink: 0; - border-radius: 8px; - background: lightgray 50% / cover no-repeat; - position: relative; -} - -.login-banner-group__content__login-rectangle { - width: 350px; - height: 198px; - flex-shrink: 0; - background: #FFF; - left: 954px; - top: 0; - position: absolute; -} - -.login-banner-group__content__dots { - width: 63px; - height: 150px; - display: inline-flex; - flex-direction: column; - align-items: flex-start; - gap: 24px; - left: 17px; - top: 60px; - position: absolute; -} - -.login-banner-group__login-section-basic { - width: 1160px; - height: 38px; - flex-shrink: 0; - left: 104px; - top: 80px; - position: absolute; -} - -.login-banner-group__login-section { - display: inline-flex; - align-items: center; - gap: 121px; - left: 0; - top: 0; - position: absolute; -} - -.login-banner-group__text-section { - display: flex; - align-items: center; - gap: 10px; - filter: blur(3px); -} - -.login-banner-group__banner-text { - color: #FFF; - text-shadow: 0 6px 6px 0 rgba(72, 72, 72, 0.25); - font-family: var(--font-main); - font-size: 32px; - font-style: normal; - font-weight: 700; - line-height: 120%; - /* 38.4px */ - left: 209px; - top: 117px; - position: absolute; -} - -.login-banner-group__banner-shadow-text { - color: #59636A; - font-family: var(--font-main); - font-size: 32px; - font-style: normal; - font-weight: 700; - line-height: 120%; - /* 38.4px */ - left: 209px; - top: 117px; - position: absolute; -} - -.login-banner-group__login-buttons { - display: flex; - align-items: flex-start; - gap: 12px; - top: 5px; - left: 900px; - position: absolute; -} - -.login-banner-group__login-button { - display: flex; - padding: 5px 15px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 4px; - border: 1px solid #1F9A7C; - background: #1F9A7C; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04); -} - -.login-banner-group__login-button-text { - color: #FFF; - text-align: center; - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 20px; - /* 125% */ - letter-spacing: -0.16px; - text-decoration: none; -} - -.login-banner-group__register-button { - display: flex; - padding: 5px 15px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 4px; - border: 1px solid #1F9A7C; - background: #FFF; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.02); -} - -.login-banner-group__register-button-text { - color: #1F9A7C; - text-align: center; - font-feature-settings: 'calt' off; - font-family: var(--font-main); - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 20px; - /* 125% */ - letter-spacing: -0.16px; - text-decoration: none; -} \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx index a74da0070..3062d5cf4 100644 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx +++ b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx @@ -1,51 +1,23 @@ -import './LoginBanner.css'; +import css from './LoginBanner.module.css'; import { Link } from 'react-router-dom'; const MainLoginBanner = () => { return ( -
-
-
-
- -
- dots_3x5W.png -
-
-
-
-
- - Увійти - -
-
- - Зареєстуватися - -
-
-
+
+
+

+ Майданчик для тих, хто втілює свої ідеї в життя. +

+
+ + Долучитися +
-
- Майданчик для тих, хто втілює свої ідеї в життя. -
-
- Майданчик для тих, хто втілює свої ідеї в життя. -
); }; diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css new file mode 100644 index 000000000..b5f197154 --- /dev/null +++ b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css @@ -0,0 +1,77 @@ +.login-banner-group { + display: flex; + background: var(--banner-main-color); + width: 100vw; + justify-content: center; + +} + +.login-banner-group__content { + display: flex; + flex-direction: column; + justify-content: center; + width: 365px; + height: 208px; + gap: 24px; +} + + +.login-banner-group__text { + color: var(--banner-main-font-color, black); + font-feature-settings: 'calt' off; + font-family: var(--font-main); + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 48px; + letter-spacing: 1%; + text-align: center; + +} + +.login-banner-group__button { + display: flex; + justify-content: center; +} + +.login-banner-group__button-text { + display: flex; + justify-content: center; + align-items: center; + color: var(--banner-main-batton-text-color, white); + font-feature-settings: 'calt' off; + font-family: var(--font-main); + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: -1%; + text-decoration: none; + text-align: center; + width: 170px; + height: 46px; + background: var(--banner-main-batton-color, black); + border-radius: 4px; +} + +@media only screen and (min-width: 768px) { + .login-banner-group__content { + width: 694px; + height: 262px; + } + + .login-banner-group__text { + font-size: 40px; + } +} + +@media only screen and (min-width: 1512px) { + .login-banner-group__content { + width: 694px; + height: 326px; + } + + .login-banner-group__text { + font-size: 40px; + } +} diff --git a/FrontEnd/src/pages/LandingPage/MainPage.jsx b/FrontEnd/src/pages/LandingPage/MainPage.jsx index 82527e016..edc5cccdd 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.jsx +++ b/FrontEnd/src/pages/LandingPage/MainPage.jsx @@ -1,6 +1,5 @@ import { useState } from 'react'; import MainBanner from './Banner/Banner'; -// import MainPartners from './partners/Partners'; import MainCompanies from './Companies/Companies'; import MainLoginBanner from './LoginBanner/LoginBanner'; import MainAboutSection from './AboutSection/About'; @@ -19,7 +18,6 @@ const MainPage = ({ isAuthorized }) => {
- {/* */} {!isAuthorized ? : null}
diff --git a/FrontEnd/src/pages/LandingPage/Partners/Partners.css b/FrontEnd/src/pages/LandingPage/Partners/Partners.css deleted file mode 100644 index b7c34f50c..000000000 --- a/FrontEnd/src/pages/LandingPage/Partners/Partners.css +++ /dev/null @@ -1,97 +0,0 @@ -.partners-section { - width: 1304px; - display: flex; - padding: 80px 104px; - flex-direction: column; - align-items: flex-start; - gap: 24px; - background: #FFF; -} - -.partners-section__header { - display: flex; - align-items: center; - gap: 800px; -} -.partners-section__header-text { - width: 444px; - color: #292E32; - font-family: var(--font-main); - font-size: 20px; - font-style: normal; - font-weight: 700; - line-height: 120%; /* 24px */ - text-transform: uppercase; -} - -.partners-section__navi-icons { - display: flex; - align-items: flex-start; - gap: 12px; - z-index: 1; -} -.partners-section__navi-icon { - display: flex; - width: 24px; - height: 24px; - padding: 2px; - justify-content: center; - align-items: center; -} -.partners-section__icon { - width: 20px; - height: 20px; - flex-shrink: 0; -} -.partners-section__images { - height: 70px; - display: flex; - justify-content: center; - align-items: center; - gap: 50px; - background: #FFF; -} -.partners-section__image1 { - width: 57.692px; - height: 60px; -} -.partners-section__image2 { - width: 121.724px; - height: 60px; -} -.partners-section__image3 { - width: 230px; - height: 98px; - flex-shrink: 0; -} -.partners-section__image4 { - width: 212px; - height: 104px; - flex-shrink: 0; -} -.partners-section__image5 { - width: 156.415px; - height: 60px; -} -.partners-section__image6 { - width: 336.168px; - height: 206.037px; - flex-shrink: 0; -} -.partners-section__image1, -.partners-section__image5, -.partners-section__image2, -.partners-section__image3, -.partners-section__image4, -.partners-section__image6 { - transition: transform 0.2s ease; -} - -.partners-section__image1:hover, -.partners-section__image5:hover, -.partners-section__image2:hover, -.partners-section__image3:hover, -.partners-section__image4:hover, -.partners-section__image6:hover { - transform: scale(1.1); -} \ No newline at end of file diff --git a/FrontEnd/src/pages/LandingPage/Partners/Partners.jsx b/FrontEnd/src/pages/LandingPage/Partners/Partners.jsx deleted file mode 100644 index f2042874a..000000000 --- a/FrontEnd/src/pages/LandingPage/Partners/Partners.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import './Partners.css'; - -const MainPartners = () => { - return ( -
-
-
партнери
-
-
-
- Left navigation -
-
-
-
- Right navigation -
-
-
-
-
- - - - - - -
-
- ); -}; - -export default MainPartners; From 696dd1fdad3ae6f827f32044cfe9db69d023f0d7 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Wed, 30 Oct 2024 22:06:00 +0200 Subject: [PATCH 2/5] font corection --- .../pages/LandingPage/LoginBanner/LoginBanner.jsx | 2 +- .../LandingPage/LoginBanner/LoginBanner.module.css | 14 ++++---------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx index 3062d5cf4..b6e27202b 100644 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx +++ b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx @@ -6,7 +6,7 @@ const MainLoginBanner = () => {

- Майданчик для тих, хто втілює свої ідеї в життя. + Майданчик для тих, хто втілює свої ідеї в життя

Date: Thu, 31 Oct 2024 11:07:53 +0200 Subject: [PATCH 3/5] format css in mainPage --- FrontEnd/src/pages/LandingPage/MainPage.module.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/FrontEnd/src/pages/LandingPage/MainPage.module.css b/FrontEnd/src/pages/LandingPage/MainPage.module.css index 8e21df79e..22a692266 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.module.css +++ b/FrontEnd/src/pages/LandingPage/MainPage.module.css @@ -1,16 +1,13 @@ .main-app { - width: var(--main-block-size); - border-radius: 8px; - background: #FFF; - margin-left: auto; - margin-right: auto; + width: 100vw; } .main-app-body { + display: flex; flex-direction: column; - align-items: center; } .main-app-header { + display: flex; flex-direction: column; } From 3a81c3c327182f831ae5ba11c92686e3206e7ad4 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Thu, 31 Oct 2024 15:14:47 +0200 Subject: [PATCH 4/5] rename main baner to JoinUs block --- FrontEnd/src/global.css | 18 ++++++------- .../src/pages/LandingPage/JoinUs/JoinUs.jsx | 25 +++++++++++++++++++ .../JoinUs.module.css} | 24 +++++++++--------- .../LandingPage/LoginBanner/LoginBanner.jsx | 25 ------------------- FrontEnd/src/pages/LandingPage/MainPage.jsx | 24 +++++++----------- .../src/pages/LandingPage/MainPage.module.css | 10 -------- 6 files changed, 53 insertions(+), 73 deletions(-) create mode 100644 FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.jsx rename FrontEnd/src/pages/LandingPage/{LoginBanner/LoginBanner.module.css => JoinUs/JoinUs.module.css} (70%) delete mode 100644 FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 996efb1c2..7cf43db33 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -77,26 +77,24 @@ /* Footer */ --footer-backround: #3C4044; --footer-font-color: #FFF; - --footer-links-font-color: #FFF; + --footer-links-font-color: #A0ABC0; --footer-bottom-backround: #333; - --footer-policy-links-font-color: #959595; - --footer-scroll-button: #B4D27A; - /* main pages About block*/ --about-text-font-color: #292E32; --about-text-background-color: #FFF; - --about-as-font-color: #FFF; --about-as-background-color: #0B6C61; - --about-cards-font-color: #292E32; --about-cards-background-color: #F0F1F3; --about-cards-background-content-color: #FFF; /* main pages Banner block*/ --banner-main-font-color: #000; - --banner-main-color: #B4D27A; - --banner-main-batton-text-color: #FFF; - --banner-main-batton-color: black; + --banner-main-dark-color: #1F9A7C; + /* main pages JoinUs block*/ + --join-us-batton-color: black; + --join-us-main-color: #B4D27A; + --join-us-font-color: black; + --join-us-batton-text-color: white; /* CompanyCard */ --companies-card-text-color: #292e32; --companies-card-box-shadow: rgba(65, 64, 69, 0.2); @@ -115,8 +113,6 @@ --primary-green-80: #1f9a7c; --character-title-85: rgba(0, 0, 0, 0.85); - /*Login Page*/ - --min-height-login-page: calc(100vh - 528px); --wf-base-white: #FFF; --profile-min-height-block: calc(100vh - 565px); diff --git a/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.jsx b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.jsx new file mode 100644 index 000000000..0bf3d17ef --- /dev/null +++ b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.jsx @@ -0,0 +1,25 @@ +import css from './JoinUs.module.css'; +import { Link } from 'react-router-dom'; + +const JoinUs = () => { + return ( +
+
+

+ Майданчик для тих, хто втілює свої ідеї в життя +

+
+ + Долучитися + +
+
+
+ ); +}; + +export default JoinUs; diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css similarity index 70% rename from FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css rename to FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css index c1025d089..e3d426c37 100644 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.module.css +++ b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css @@ -1,11 +1,11 @@ -.login-banner-group { +.join-us { display: flex; - background: var(--banner-main-color); + background: var(--join-us-main-color); width: 100vw; justify-content: center; } -.login-banner-group__content { +.join-us__content { display: flex; flex-direction: column; justify-content: center; @@ -15,8 +15,8 @@ } -.login-banner-group__text { - color: var(--banner-main-font-color, black); +.join-us__text { + color: var(--join-us-font-color, black); font-feature-settings: 'calt' off; font-family: var(--font-main); font-size: 24px; @@ -27,16 +27,16 @@ text-align: center; } -.login-banner-group__button { +.join-us__button { display: flex; justify-content: center; } -.login-banner-group__button-text { +.join-us__button-text { display: flex; justify-content: center; align-items: center; - color: var(--banner-main-batton-text-color, white); + color: var(--join-us-batton-text-color, white); font-feature-settings: 'calt' off; font-family: var(--font-main); font-size: 16px; @@ -48,24 +48,24 @@ text-align: center; width: 170px; height: 46px; - background: var(--banner-main-batton-color, black); + background: var(--join-us-batton-color, black); border-radius: 4px; } @media only screen and (min-width: 768px) { - .login-banner-group__content { + .join-us__content { width: 694px; height: 262px; } - .login-banner-group__text { + .join-us__text { font-size: 40px; line-height: 48px; } } @media only screen and (min-width: 1512px) { - .login-banner-group__content { + .join-us__content { height: 326px; } } diff --git a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx b/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx deleted file mode 100644 index b6e27202b..000000000 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import css from './LoginBanner.module.css'; -import { Link } from 'react-router-dom'; - -const MainLoginBanner = () => { - return ( -
-
-

- Майданчик для тих, хто втілює свої ідеї в життя -

-
- - Долучитися - -
-
-
- ); -}; - -export default MainLoginBanner; diff --git a/FrontEnd/src/pages/LandingPage/MainPage.jsx b/FrontEnd/src/pages/LandingPage/MainPage.jsx index edc5cccdd..5cdf613c3 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.jsx +++ b/FrontEnd/src/pages/LandingPage/MainPage.jsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import MainBanner from './Banner/Banner'; import MainCompanies from './Companies/Companies'; -import MainLoginBanner from './LoginBanner/LoginBanner'; +import JoinUs from './JoinUs/JoinUs'; import MainAboutSection from './AboutSection/About'; import CookieMod from '../../components/CookieAcception/CookieMod'; import css from './MainPage.module.css'; @@ -14,20 +14,14 @@ const MainPage = ({ isAuthorized }) => { const [modalActive, setModalActive] = useState(true); return (
-
- -
- - {!isAuthorized ? : null} - -
- -
-
-
+ + + {!isAuthorized ? : null} + +
); }; diff --git a/FrontEnd/src/pages/LandingPage/MainPage.module.css b/FrontEnd/src/pages/LandingPage/MainPage.module.css index 22a692266..c585079d7 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.module.css +++ b/FrontEnd/src/pages/LandingPage/MainPage.module.css @@ -1,13 +1,3 @@ .main-app { - width: 100vw; -} - -.main-app-body { - display: flex; - flex-direction: column; -} - -.main-app-header { - display: flex; flex-direction: column; } From a2391d249eb4536a140fb06a00fd7b8f073f49f3 Mon Sep 17 00:00:00 2001 From: romanmyko Date: Thu, 31 Oct 2024 15:20:26 +0200 Subject: [PATCH 5/5] add display flex in main-app --- FrontEnd/src/pages/LandingPage/MainPage.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/FrontEnd/src/pages/LandingPage/MainPage.module.css b/FrontEnd/src/pages/LandingPage/MainPage.module.css index c585079d7..c254f7e2a 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.module.css +++ b/FrontEnd/src/pages/LandingPage/MainPage.module.css @@ -1,3 +1,4 @@ .main-app { + display: flex; flex-direction: column; }