rename main baner to JoinUs block

ita-social-projects · Oct 31, 2024 · 3a81c3c · 3a81c3c
1 parent be29fa1
commit 3a81c3c
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 73 deletions.
diff --git 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
@@ -0,0 +1,25 @@
+import css from './JoinUs.module.css';
+import { Link } from 'react-router-dom';
+
+const JoinUs = () => {
+  return (
+    <div className={css['join-us']}>
+      <div className={css['join-us__content']}>
+        <h2 className={css['join-us__text']}>
+          Майданчик для тих, хто втілює свої ідеї в життя
+        </h2>
+        <div className={css['join-us__button']}>
+          <Link
+            className={css['join-us__button-text']}
+            to="/sign-up"
+            alt="долучитись до спільноти"
+          >
+            Долучитися
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JoinUs;
diff --git a/...ngPage/LoginBanner/LoginBanner.module.css → ...ages/LandingPage/JoinUs/JoinUs.module.css b/...ngPage/LoginBanner/LoginBanner.module.css → ...ages/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
diff --git 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 (
     <div className={css['main-app']}>
-      <div className={css['main-app-header']}>
-        <MainBanner isAuthorized={isAuthorized} />
-        <div className={css['main-app-body']}>
-          <MainCompanies isAuthorized={isAuthorized} />
-          {!isAuthorized ? <MainLoginBanner /> : null}
-          <MainAboutSection />
-          <div>
-            <CookieMod
-              active={modalActive}
-              setActive={setModalActive}
-            ></CookieMod>
-          </div>
-        </div>
-      </div>
+      <MainBanner isAuthorized={isAuthorized} />
+      <MainCompanies isAuthorized={isAuthorized} />
+      {!isAuthorized ? <JoinUs /> : null}
+      <MainAboutSection />
+      <CookieMod
+        active={modalActive}
+        setActive={setModalActive}
+      ></CookieMod>
     </div>
   );
 };

diff --git 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;
 }