Join Platform Call-to-Action Section Redesign #835

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);

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;

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;
+    }
+}