Merge pull request #711 from ita-social-projects/#545MainPageUpdateTexts

#545 main page update texts

FrontEnd/package.json

@@ -26,7 +26,7 @@
     "react-hook-form": "^7.45.4",
     "react-router-dom": "^6.22.3",
     "react-router-hash-link": "^2.4.3",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-timer-hook": "^3.0.7",
     "react-toastify": "^9.1.3",
     "swr": "^2.2.2",

FrontEnd/public/index.html

@@ -8,7 +8,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
   <link rel="manifest" href="/manifest.json" />
-  <title>Forum</title>
+  <title>CraftMerge</title>
   <meta name="description" content="Це унікальний майданчик для обміну інформацією і досвідом з тими,
      хто втілює свої ідеї в життя." />
 </head>

FrontEnd/src/components/CompanyCard/CompanyCard.module.css

@@ -33,7 +33,6 @@
   margin-top: 80px;
   margin-left: 125px;
   object-fit: cover;
-  opacity: 0.7;
 }
 
 .company-card__tooltip {
@@ -48,7 +47,6 @@
   border-top-right-radius: 11px;
   flex-shrink: 0;
   object-fit: cover;
-  opacity: 0.7;
 }
 
 .company-card__text-block {

FrontEnd/src/components/landing-page/MainPage.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import MainBanner from './banner/Banner';
-import MainPartners from './partners/Partners';
+// import MainPartners from './partners/Partners';
 import MainCompanies from './companies/Companies';
 import MainLoginBanner from './login-banner/LoginBanner';
 import MainAboutSection from './about-section/About';
@@ -19,7 +19,7 @@ const MainPage = ({ isAuthorized }) => {
         <MainBanner isAuthorized={isAuthorized} />
         <div className={css['main-app-body']}>
           <MainCompanies isAuthorized={isAuthorized} />
-          <MainPartners />
+          {/* <MainPartners /> */}
           {!isAuthorized ? <MainLoginBanner /> : null}
           <MainAboutSection />
           <div>

FrontEnd/src/components/landing-page/about-section/About.css

@@ -1,16 +1,17 @@
 .about-us-section {
+    width:  var(--main-block-size);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }
 .about-us-section-content {
     width: var(--main-block-size);
-    height: 366px;
+    height: 542px;
 }
 .about-us-section-content__field {
     display: flex;
     width: 580px;
-    height: 246px;
+    height: 542px;
     flex-direction: column;
     align-items: flex-start;
     gap: 24px;
@@ -19,20 +20,21 @@
 }
 .about-us-rectangle {
     width:  var(--main-block-size);
-    height: 366px;
+    height: 542px;
     flex-shrink: 0;
-    background: #0B6C61;
+    background: var(--about-as-background-color);
     position: absolute;
 }
 .about-us-section-content__text {
-    padding: 80px 104px;
+    padding: 80px 0 0 104px;
+    height: 402px;
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 24px;
 }
 .about-us-section-content__header-text {
-    color: #FFF;
+    color: var(--about-as-font-color);
     font-family: var(--font-main);
     font-size: 32px;
     font-style: normal;
@@ -41,7 +43,7 @@
 }
 .about-us-section-content__smart-text {
     width: 567px;
-    color: #FFF;
+    color: var(--about-as-font-color);
     font-feature-settings: 'calt' off;
     font-family: var(--font-main);
     font-size: 16px;
@@ -53,7 +55,7 @@
 }
 .about-us-section-content__image {
     width: 749px;
-    height: 366px;
+    height: 542px;
     flex-shrink: 0;
     position: absolute;
     top: 0;

FrontEnd/src/components/landing-page/about-section/About.jsx

@@ -1,32 +1,36 @@
 import './About.css';
+import React from 'react';
 import AboutSectionCards from './cards/AboutCards';
 import AboutSectionText from './about-text/AboutText';
+import AboutTextContent from './AboutMainText.js';
 
 const MainAboutSection = () => {
+  const TextStrong = (text, keyword) =>
+    text.split(keyword).map((part, i, arr) => (
+      <React.Fragment key={i}>
+        {part}
+        {i < arr.length - 1 && <strong>{keyword}</strong>}
+      </React.Fragment>
+    ));
+
   return (
     <div className="about-us-section">
       <AboutSectionText />
       <AboutSectionCards />
       <div className="about-us-section-content">
         <div className="about-us-rectangle">
-          <div className="about-us-section-content__field" />
-          <div className="about-us-section-content__text" id="about-us">
-            <div className="about-us-section-content__header-text">ХТО МИ</div>
-            <div className="about-us-section-content__smart-text">
-              Це перший форум Західної України, цілями якого є популяризація
-              українського виробника та представлення стартапів для розвитку
-              галузі «Smart Craft&Food»
-            </div>
-            <div className="about-us-section-content__smart-text">
-              Це перший форум Західної України, цілями якого є популяризація
-              українського виробника та представлення стартапів для розвитку
-              галузі «Smart Craft&Food»
-            </div>
+          <div className="about-us-section-content__text">
+            <h2 className="about-us-section-content__header-text">{AboutTextContent.header}</h2>
+            {AboutTextContent.contents.map(({ id, text }) => (
+              <p className="about-us-section-content__smart-text" key={id}>
+                {TextStrong(text, 'CraftMerge')}
+              </p>
+            ))}
           </div>
           <img
             className="about-us-section-content__image"
             src={`${process.env.REACT_APP_PUBLIC_URL}/img/about.jpeg`}
-            alt=""
+            alt="about_img"
           />
         </div>
       </div>
@@ -35,3 +39,4 @@ const MainAboutSection = () => {
 };
 
 export default MainAboutSection;
+

FrontEnd/src/components/landing-page/about-section/AboutMainText.js

@@ -0,0 +1,31 @@
+const AboutTextContent = {
+        id: 1,
+        header: 'ХТО МИ',
+        contents: [
+            {
+                id: 3,
+                text: 'CraftMerge - перший форум Західної України, який створений у ' +
+                    'співпраці з Національним університетом «Львівська політехніка». Наша ' +
+                    'місія - не лише об`єднання українських виробників та стартапів, а й ' +
+                    'відкриття нових перспектив у виробничій галузі.'
+            },
+            {
+                id: 4,
+                text: 'CraftMerge - це не лише платформа для обміну досвідом та ідеями, але ' +
+                    'й комунікаційний майданчик для обговорення актуальних тенденцій та ' +
+                    'передових технологій.'
+            },
+            {
+                id: 5,
+                text: 'Учасники форуму отримають можливість не лише обмінятися досвідом ' +
+                    'та ідеями, але й ознайомитися з найсучаснішими рішеннями ' +
+                    'виробництва крафтової продукції. Ми створили CraftMerge, щоб ' +
+                    'допомогти українським виробникам збільшити свою популярність та ' +
+                    'впізнаваність, розширити аудиторію споживачів та залучити нових ' +
+                    'клієнтів. Приєднуйтеся до нашого форуму та розвивайте свій бізнес ' +
+                    'разом з нами!'
+            }
+        ]
+    };
+
+export default AboutTextContent;

FrontEnd/src/components/landing-page/about-section/about-text/AboutText.css

@@ -4,18 +4,20 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 80px;
-    background: #FFF;
+    background: var(--about-text-background-color);
     overflow: hidden;
 }
 .about-us-text-section__text-field {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 24px;
+    position: relative;
+    z-index: 1; 
 }
 .about-us-text-section__header-text {
-    width: 971px;
-    color: #292E32;
+    width: 990px; 
+    color: var(--about-text-font-color);
     font-family: var(--font-main);
     font-size: 32px;
     font-style: normal;
@@ -25,7 +27,7 @@
 .about-us-text-section__text {
     width: 971px;
     height: 62px;
-    color: #292E32;
+    color: var(--about-text-font-color);
     font-feature-settings: 'calt' off;
     font-family: var(--font-main);
     font-size: 16px;
@@ -46,20 +48,21 @@
     align-self: flex-start;
     width: 466px;
     flex-shrink: 0;
-    color: #292E32;
+    color: var(--about-text-font-color);
     font-feature-settings: 'calt' off;
     font-family: var(--font-main);
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: 30px; /* 187.5% */
     letter-spacing: -0.16px;
-    content: "\2022";
+    /* content: "\2022"; */
 }
 .about-us-text-section__paragraph-two {
+    align-self: flex-start;
     width: 489px;
     flex-shrink: 0;
-    color: #292E32;
+    color: var(--about-text-font-color);
     font-feature-settings: 'calt' off;
     font-family: var(--font-main);
     font-size: 16px;
@@ -70,57 +73,16 @@
 }
 .about-us-text-section__paragraph-one span::before,
 .about-us-text-section__paragraph-two span::before {
-    content: "\2022";
+    /* content: "\2022"; */
     margin-right: 8px;
 }
 
-.about-us-text-section__ellipses-groups {
+.about-us-text-section__dots {
     width: 353px;
-    position: relative;
-    left: -110px;
-    bottom: 210px;
-}
-.about-us-text-section__first_ellipses-group {
-    width: 179px;
-    height: 150px;
-    left: 174px;
-    top: 116px;
-    position: absolute;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-}
-.about-us-text-section__second_ellipses-group {
-    width: 179px;
-    height: 150px;
-    left: 0;
-    top: 116px;
-    position: absolute;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-}
-.about-us-text-section__third_ellipses-group {
-    width: 179px;
-    height: 150px;
-    left: 174px;
-    top: 0;
-    position: absolute;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-}
-.about-us-text-section__fourse_ellipses-group {
-    width: 179px;
-    height: 150px;
-    left: 0;
-    top: 0;
+    height: auto;
+    padding: 50px 0 0 10px;
+    object-fit: cover; 
     position: absolute;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-}
+    transform: translateX(-50%); 
+    z-index: 0;
+}