#269 implement functionality of profile details

FrontEnd/src/App.css

@@ -1,8 +1,8 @@
 .App {
   /*for footer correct work*/
-  /* min-height: 100vh;
+  min-height: 100vh;
   flex-direction: column;
-  display: flex; */ 
+  display: flex;
 }
 
 .App-logo {
@@ -35,7 +35,8 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
-}
+}

FrontEnd/src/components/HeaderFooter/footer/Footer.module.css

@@ -1,3 +1,3 @@
-.footer-сontent {
+.footer-content {
     margin-top: auto;
 }

FrontEnd/src/components/ProfileDetail/BannerImage.jsx

@@ -0,0 +1,33 @@
+import { PropTypes } from 'prop-types';
+import classes from './BannerImage.module.css';
+
+function BannerImage ({ data }) {
+
+    return (
+        <div className={classes['banner-image__block']}>
+            <div className={classes['banner-image']}>
+                {data.banner_image ? (
+                    <img src={data.banner_image} alt="Company Banner" />
+                    ) : (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="103"
+                    height="80"
+                    viewBox="0 0 103 80"
+                    fill="none"
+                >
+                    <path fillRule="evenodd" clipRule="evenodd" d="M0 40V80H51.2941H102.588V40V0H51.2941H0V40ZM84.9092 10.652L91.6322 11.289V40.156V69.022L51.0451 68.761L10.458 68.5L10.1941 39.818L9.93014 11.136L12.6841 10.718C17.2617 10.023 77.6942 9.968 84.9092 10.652ZM26.6431 19.08C23.7128 20.794 21.7856 25.537 22.8642 28.383C25.4668 35.258 35.6758 34.13 37.4088 26.775C37.9238 24.591 37.4537 23.45 35.0384 21.025C31.9049 17.879 29.6072 17.347 26.6431 19.08ZM57.5052 32.25C55.6447 34.587 53.1188 37.962 51.8927 39.75C49.2105 43.662 47.9027 43.795 44.7922 40.471L42.4257 37.941L33.1649 47.201C28.0713 52.294 23.9041 56.807 23.9041 57.23C23.9041 57.654 36.7256 58 52.3967 58C76.8954 58 80.8116 57.796 80.3345 56.548C79.6095 54.651 61.8428 28 61.3029 28C61.0759 28 59.3667 29.913 57.5052 32.25Z" fill="#BFC6CF"/>
+                </svg>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default BannerImage;
+
+BannerImage.propTypes = {
+    data: PropTypes.shape({
+        banner_image: PropTypes.string,
+    }),
+};

FrontEnd/src/components/ProfileDetail/BannerImage.module.css

@@ -0,0 +1,15 @@
+.banner-image__block {
+    width: 1512px;
+    height: 200px;
+    flex-shrink: 0;
+}
+
+.banner-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1512px;
+    height: 200px;
+    flex-shrink: 0;
+    background: var(--main-grey-20, #DEE1E8);
+}

FrontEnd/src/components/ProfileDetail/DetailedInfo/Company.jsx

@@ -0,0 +1,58 @@
+import { PropTypes } from 'prop-types';
+import classes from './Company.module.css';
+import ReadMore from './ReadMore';
+
+function Company ({ data }) {
+
+    // TODO: implement logic for getting data from db when it's added on server side
+
+    const competitiveEdge = '';
+    const slogan = '';
+    const companyData = data.common_info || competitiveEdge || slogan;
+
+    return (
+        companyData ? (
+            <div id="about-company" className={classes['about-company']}>
+                <div className={classes['about-company__title']}>
+                    <div className={classes['about-company__title--block']}>
+                        <p className={classes['about-company__title--text']}>Про компанію</p>
+                    </div>
+                    <div className={classes['about-company__title--divider']}></div>
+                </div>
+                <div className={classes['about-company__content']}>
+                    {data.common_info ? (
+                        <div className={classes['about-company__content--common']}>
+                            <ReadMore >
+                                {data.common_info}
+                            </ReadMore>
+                        </div>
+                    ) : null}
+                    {competitiveEdge ? (
+                        <div className={classes['about-company__content--advantage']}>
+                            <p className={classes['about-company__content--advantage--title']}>Конкурентна перевага</p>
+                            <div className={classes['about-company__content--advantage--description']}>
+                                <ReadMore>
+                                    {competitiveEdge}
+                                </ReadMore>
+                            </div>
+                        </div>
+                    ) : null}
+                    {slogan ? (
+                        <div className={classes['about-company__content--slogan']}>
+                            <p className={classes['about-company__content--slogan--title']}>Візія, слоган</p>
+                            <p className={classes['about-company__content--slogan--text']}>{slogan}</p>
+                        </div>
+                    ) : null}
+                </div>
+            </div>
+        ) : null
+    );
+}
+
+export default Company;
+
+Company.propTypes = {
+    data: PropTypes.shape({
+      common_info: PropTypes.string,
+    }),
+  };

FrontEnd/src/components/ProfileView/ProfileMenu/ProfileMenuStartup/ProfileMenuStartup.module.css → FrontEnd/src/components/ProfileDetail/DetailedInfo/Company.module.css

@@ -1,87 +1,103 @@
-.profile-menu-startup-block {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-    border-radius: 8px;
-}
-.profile-menu-startup-main {
+.about-company {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
+    border-radius: 8px;
 }
-.profile-menu-startup-main__title {
+
+.about-company__title {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;
-    box-shadow: 0 4px 8px 0 rgba(65, 64, 69, 0.10);
 }
-.profile-menu-startup-main__title-block {
+
+.about-company__title--block {
     display: flex;
     padding: 8px 12px;
     align-items: flex-start;
     gap: 10px;
     align-self: stretch;
     border-radius: 4px;
 }
-.profile-menu-startup-main__title-text {
+
+.about-company__title--text {
     width: 742px;
-    color: #25292C;
-    font-family: Inter, sans-serif;
+    color: var(--main-grey-90, #25292C);
+    font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
-    line-height: 20px; /* 125% */
+    line-height: 20px;
     text-transform: uppercase;
 }
-.profile-menu-startup-main__content {
+
+.about-company__title--divider {
+    width: 795px;
+    height: 1px;
+    background: var(--main-grey-20, #DEE1E8);
+}
+
+.about-company__content {
     display: flex;
     padding: 12px;
     flex-direction: column;
     align-items: flex-start;
-    gap: 12px;
+    gap: 24px;
 }
-.profile-menu-main__content-block {
+
+.about-company__content--common {
+    width: 776px;
+    color: var(--main-grey-90, #25292C);
+    font-feature-settings: 'calt' off;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.14px;
+}
+
+.about-company__content--advantage,
+.about-company__content--slogan {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
 }
-.profile-menu-main__content-block-title {
-    color: #25292C;
+
+.about-company__content--advantage--title {
+    color: var(--main-grey-90, #25292C);
     font-feature-settings: 'calt' off;
-    font-family: Inter, sans-serif;
+    font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
-    line-height: 20px; /* 125% */
+    line-height: 20px;
     letter-spacing: -0.16px;
 }
-.profile-menu-main__content-block-text {
+
+.about-company__content--advantage--description {
     width: 776px;
-    color: #25292C;
+    color: var(--main-grey-90, #25292C);
     font-feature-settings: 'calt' off;
-    font-family: Inter, sans-serif;
+    font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
-    line-height: 22px; /* 157.143% */
+    line-height: 22px;
     letter-spacing: -0.14px;
 }
-.profile-startup-divider {
-    align-self: stretch;
-    height: 1px;
-    background: #DEE1E8;
-}
-.profile-menu-more-text {
-    color: #1F9A7C;
+
+.about-company__content--slogan--title,
+.about-company__content--slogan--text {
+    color: var(--main-grey-90, #25292C);
     font-feature-settings: 'calt' off;
-    font-family: Inter, sans-serif;
-    font-size: 14px;
+    font-family: Inter;
+    font-size: 16px;
     font-style: normal;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: -0.14px;
-}
+    font-weight: 600;
+    line-height: 20px;
+    letter-spacing: -0.16px;
+}

FrontEnd/src/components/ProfileDetail/DetailedInfo/CompanyDescription.jsx

@@ -0,0 +1,30 @@
+import { PropTypes } from 'prop-types';
+import classes from './CompanyDescription.module.css';
+import Company from './Company';
+import Startup from './Startup';
+import ProductsServices from './ProductsServices';
+import Logistics from './Logistics';
+import Cooperation from './Cooperation';
+
+function CompanyDescription ({ data }) {
+    return (
+        <div className={classes['company-description-block']}>
+            <Company data={data} />
+            <Startup data={data} />
+            <ProductsServices data={data} />
+            <Logistics />
+            <Cooperation />
+        </div>
+    );
+}
+
+export default CompanyDescription;
+
+CompanyDescription.propTypes = {
+    data: PropTypes.shape({
+        common_info: PropTypes.string,
+        startup_idea: PropTypes.string,
+        product_info: PropTypes.string,
+        service_info: PropTypes.string,
+      }),
+};

FrontEnd/src/components/ProfileDetail/DetailedInfo/CompanyDescription.module.css

@@ -0,0 +1,7 @@
+.company-description-block {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    min-width: 800px;
+}

FrontEnd/src/components/ProfileDetail/DetailedInfo/Cooperation.jsx

@@ -0,0 +1,32 @@
+import classes from './Cooperation.module.css';
+import ReadMore from './ReadMore';
+
+function Cooperation () {
+    const cooperationData = '';
+
+    // TODO: implement logic for getting data from db when it's added on server side
+
+    return (
+        cooperationData ? (
+            <div id="cooperation" className={classes['cooperation-wrapper']}>
+                <div className={classes['cooperation']}>
+                    <div className={classes['cooperation__title']}>
+                        <div className={classes['cooperation__title--block']}>
+                            <p className={classes['cooperation__title--text']}>Формат співпраці</p>
+                        </div>
+                        <div className={classes['cooperation__title--divider']}></div>
+                    </div>
+                    <div className={classes['cooperation__content--block']}>
+                            <div className={classes['cooperation__content--description']}>
+                                <ReadMore>
+                                    {cooperationData}
+                                </ReadMore>
+                            </div>
+                    </div>
+                </div>
+            </div>
+        ) : null
+    );
+}
+
+export default Cooperation;