diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css index 80b9f54dd..7cf43db33 100644 --- a/FrontEnd/src/global.css +++ b/FrontEnd/src/global.css @@ -79,22 +79,22 @@ --footer-font-color: #FFF; --footer-links-font-color: #A0ABC0; --footer-bottom-backround: #333; - /* 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-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); 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/JoinUs/JoinUs.module.css b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css new file mode 100644 index 000000000..e3d426c37 --- /dev/null +++ b/FrontEnd/src/pages/LandingPage/JoinUs/JoinUs.module.css @@ -0,0 +1,71 @@ +.join-us { + display: flex; + background: var(--join-us-main-color); + width: 100vw; + justify-content: center; +} + +.join-us__content { + display: flex; + flex-direction: column; + justify-content: center; + width: 365px; + height: 208px; + gap: 24px; +} + + +.join-us__text { + color: var(--join-us-font-color, black); + font-feature-settings: 'calt' off; + font-family: var(--font-main); + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 28.8px; + letter-spacing: 0.24px; + text-align: center; +} + +.join-us__button { + display: flex; + justify-content: center; +} + +.join-us__button-text { + display: flex; + justify-content: center; + align-items: center; + color: var(--join-us-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: -0.16px; + text-decoration: none; + text-align: center; + width: 170px; + height: 46px; + background: var(--join-us-batton-color, black); + border-radius: 4px; +} + +@media only screen and (min-width: 768px) { + .join-us__content { + width: 694px; + height: 262px; + } + + .join-us__text { + font-size: 40px; + line-height: 48px; + } +} + +@media only screen and (min-width: 1512px) { + .join-us__content { + height: 326px; + } +} 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 deleted file mode 100644 index a74da0070..000000000 --- a/FrontEnd/src/pages/LandingPage/LoginBanner/LoginBanner.jsx +++ /dev/null @@ -1,53 +0,0 @@ -import './LoginBanner.css'; -import { Link } from 'react-router-dom'; - -const MainLoginBanner = () => { - return ( -
-
-
-
- -
- dots_3x5W.png -
-
-
-
-
- - Увійти - -
-
- - Зареєстуватися - -
-
-
-
-
-
- Майданчик для тих, хто втілює свої ідеї в життя. -
-
- Майданчик для тих, хто втілює свої ідеї в життя. -
-
- ); -}; - -export default MainLoginBanner; diff --git a/FrontEnd/src/pages/LandingPage/MainPage.jsx b/FrontEnd/src/pages/LandingPage/MainPage.jsx index 82527e016..5cdf613c3 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.jsx +++ b/FrontEnd/src/pages/LandingPage/MainPage.jsx @@ -1,8 +1,7 @@ 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 JoinUs from './JoinUs/JoinUs'; import MainAboutSection from './AboutSection/About'; import CookieMod from '../../components/CookieAcception/CookieMod'; import css from './MainPage.module.css'; @@ -15,21 +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 8e21df79e..c254f7e2a 100644 --- a/FrontEnd/src/pages/LandingPage/MainPage.module.css +++ b/FrontEnd/src/pages/LandingPage/MainPage.module.css @@ -1,16 +1,4 @@ .main-app { - width: var(--main-block-size); - border-radius: 8px; - background: #FFF; - margin-left: auto; - margin-right: auto; -} - -.main-app-body { - flex-direction: column; - align-items: center; -} - -.main-app-header { + display: flex; flex-direction: column; } 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;