SBIT-70: Release a PROD

gatsby-config.js

@@ -41,7 +41,8 @@ module.exports = {
           `blog-category`,
           `landing-page`,
           `case`,
-          `icon`
+          `icon`,
+          `professional`,
         ],
         singleTypes: [
           `global-seo`,

gatsby-node.js

@@ -21,6 +21,7 @@ exports.createSchemaCustomization = ({ actions }) => {
   const landingSchema = require("./src/schema/landingSchema")
   const layoutSchema = require("./src/schema/layoutSchema")
   const generalSchema = require("./src/schema/generalSchema")
+  const professionalsSchema = require("./src/schema/professionalsSchema")
 
   const { createTypes } = actions
   const typeDefs =
@@ -32,6 +33,7 @@ exports.createSchemaCustomization = ({ actions }) => {
     iconSchema.value +
     landingSchema.value +
     layoutSchema.value + 
+    professionalsSchema.value +
     generalSchema.value
   createTypes(typeDefs)
 }

src/components/DualSection/DualSection.js

@@ -5,7 +5,7 @@ export default function DualSection({ data }) {
     const dualSectionParts = data?.dualSectionPart
 
     const listSectionParts = dualSectionParts.map((section) =>
-        <div className="dualSection p-4" >
+        <div className="dualSection col-md-6 my-2 p-md-3 p-xl-4">
             <div className="dualSection__image">
                 <img
                     src={section.image.url}
@@ -16,19 +16,20 @@ export default function DualSection({ data }) {
             <div className="dualSection__textContainer">
                 <h4>{section.title}</h4>
                 <p>{section.description}</p>
-                <a href={section.button?.url} target="_blank" rel="noreferrer" >
-                    <button className="px-4">{section.button?.content}</button>
-                </a>
+                {section.button && (
+                    <a href={section.button?.url} target="_blank" rel="noreferrer" >
+                        <button className="px-4">{section.button?.content}</button>
+                    </a>
+                )}
             </div>
-
         </div>
     );
 
     return (
-        <div className="container my-3 py-3" id={data.strapi_component + "-" + data.id}>
-        <div className="d-flex flex-column flex-md-row">
-            {listSectionParts}
-        </div>        
+        <div className="container py-3" id={data.strapi_component + "-" + data.id}>
+            <div className="d-flex flex-column flex-md-row">
+                {listSectionParts}
+            </div>
         </div>
 
 

src/components/DualSection/DualSection.scss

@@ -1,32 +1,21 @@
 @import "../../styles/global.scss";
 
 .dualSection {
-  p {
-    text-align: justify;
-    font-weight: 700;
-    max-height: 300px;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
+  color: $primary;
   h4 {
+    margin-top: 1rem;
     font-weight: 700;
   }
 
   &__image {
-    width: 300px;
+    width: 100%;
   }
   button {
-    background: $light-grey;
-    color: white;
-    font-weight: 500;
-    border-radius: 3px;
-    border: none;
-    padding: 0.3em;
+    @include primaryBtn;
   }
 }
 
+
 .one_sec {
   color: $primary;
   &-background{
@@ -39,7 +28,8 @@
   justify-content: space-around;
   align-items: center;
   gap: 3em;
-  padding: 3em 0;
+  padding-top: 3em;
+  padding-bottom: 3em;
   button {
     @include primaryBtn;
     a {
@@ -71,13 +61,12 @@
     }
   }
 
-  @media screen and (max-width: $breakpoint-xl) {
+  @media screen and (max-width: $breakpoint-sm) {
     flex-direction: column-reverse;
     &-img {
       flex-basis: 100%;
     }
     &-title {
-      padding: 0 10vw;
       flex-basis: 100%;
     }
   }

src/components/DualSection/OneSection.js

@@ -20,17 +20,17 @@ const OneSection = ({ data: { id, strapi_component, dualSectionPart } }) => {
           theme === "dark" && backgroundImageDark?.url
             ? backgroundImageDark?.url
             : backgroundImage?.url
-        })`,
+          })`,
       }}
     >
-      <div className="one_sec container" id={strapi_component + "-" + id}>
+      <div className="container one_sec" id={strapi_component + "-" + id}>
         <div className="one_sec-title">
-          <h3>{title}</h3>
-          <h3 className="one_sec-title-body">{description}</h3>
+          <h4>{title}</h4>
+          <h4 className="one_sec-title-body">{description}</h4>
           {button && (
-            <button>
-              <ButtonLink button={button} />
-            </button>
+            <a href={button?.url} target="_blank" rel="noreferrer" >
+              <button className="px-4">{button?.content}</button>
+            </a>
           )}
         </div>
         <div className="one_sec-img">

src/components/LogosSection/logosSection.scss

@@ -12,7 +12,8 @@
     &__summary {
         font-weight: 400;
         text-align: center;
-        line-height: 30px;
+        line-height: 33px;
+        color: $summary-color
     }
     &__logos {
         margin-top: 10px;

src/components/Professionals/Professionals.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { useProfessionals } from '../../hooks'
+import "./Professionals.scss"
+import { FaLinkedinIn } from "react-icons/fa"
+
+const Professionals = ({ data }) => {
+  const { title, summary, professionals } = data
+  const professionalsData = useProfessionals()
+
+  const professionalsList = professionals.map(pro =>
+    professionalsData?.allStrapiProfessional?.nodes.find(professional => professional.strapiId === pro.id)  
+  ).slice(0,6)
+
+  const professionalsCards = professionalsList.map((pro, idx) => {
+
+    const photo = getImage(pro.photo.localFile)
+
+    const {name, position, quote, linkedin} = pro
+
+    return (
+      <div
+      className="pro col-12 col-md-4 row"
+      key={`pro-${idx}`}
+      id={data.strapi_component + "-" + data.id}
+    >
+      <div className="col-6 col-md-12">
+        <GatsbyImage image={photo} alt={name} className="pro__img" />
+      </div>
+      <div className="col-6 col-md-12">
+        <div className="pro__descr">
+          <h6 className="pro__descr_title">{name}</h6>
+          {linkedin && <a href={linkedin} target="_blank"><FaLinkedinIn size={23}/></a>}
+          <h6 className="pro__descr_position">{position}</h6>
+          <p className="pro__descr_text">"{quote}"</p>
+        </div>
+      </div>
+    </div>
+    )
+  })
+
+  return (
+    <div className="container py-5 prosSection">
+      {title && <h2>{title}</h2>}
+      {summary && <h6 className="prosSection__summary px-lg-3">{summary}</h6>}
+      {(professionalsCards !== undefined && professionalsCards.length > 0) && 
+        <div className="cases row">{professionalsCards}</div>
+      }
+    </div>
+  )
+}
+
+export default Professionals

src/components/Professionals/Professionals.scss

@@ -0,0 +1,112 @@
+@import "../../styles/global.scss";
+
+.prosSection {
+    &__summary {
+        font-weight: 400;
+        text-align: center;
+        line-height: 33px;
+        color: $summary-color;
+    }
+    p {
+        margin-bottom: 10px;
+    }
+    a {
+        display: inline-block;
+        margin-bottom: 10px;
+    }
+    color: $primary;
+    h2 {
+        text-align: center;
+        font-weight: 700;
+        text-transform: uppercase;
+    }
+    h6 {
+        margin-bottom: 10px;
+    }
+}
+.pro {
+    color: $primary;
+    --bs-gutter-x: 0 !important;
+    padding: 10px;
+    &__img {
+        height: 260px;
+        width: 100%;
+        object-fit: cover;
+        border-radius: 10px;
+    }
+    &__descr {
+        padding-left: 10px;
+        &_title {
+            font-weight: 700;
+            width: 100%;
+        }
+        &_position {
+            font-weight: 400;
+        }
+    }
+    button {
+        @include primaryBtn;
+        margin-left: 10px;
+    }
+    &__socials {
+        display: flex;
+        justify-content: flex-start;
+        margin-top: 10px;
+        svg {
+            margin-right: 10px;
+        }
+    }
+}
+
+
+
+@media screen and (min-width: $breakpoint-md) {
+    .prosSection {
+        &__summary {
+            margin-top: 20px;
+            margin-bottom: 50px !important;
+        }
+    }
+    .pro {
+        &__img {
+            height: 240px;
+            margin-bottom: 15px;
+        }
+        &__descr {
+            h6 {
+                margin-bottom: 10px;
+            }
+            a {
+                width: 15%;
+            }
+            min-height: 210px;
+            &_title {
+                display: inline-block;
+                width: 85%;
+            }
+        }
+        &__socials {
+            justify-content: flex-end;
+            svg {
+                margin-left: 10px;
+                margin-right: 1px;
+            }
+        }
+    }
+
+}
+
+@media screen and (min-width: $breakpoint-lg) {
+    .prosSection {
+        &__summary {
+            margin-top: 40px;
+            margin-bottom: 80px !important;
+        }
+    }
+    .pro {
+        &__descr {
+            min-height: 260px;
+        }
+    }
+}
+

src/components/Text/Text.js

@@ -8,27 +8,29 @@ export default function Text({ data }) {
   const bgImage = data?.backgroundImage?.url
 
   return (
-    <div className="container-text" style={{
+    <div className="container-text mt-3 mt-xl-5" style={{
       backgroundImage: `url(${bgImage})`,
-    }} id={data.strapi_component + "-" + data.id}>
-      {title !== "" && title !== undefined && title !== null ? (
-        <div className="text d-flex flex-column flex-md-row">
-          <div className="title">
-            <h2 className="titleText pt-5 px-3 pb-3">{title}</h2>
+    }}>
+      <div className="container">
+        {title !== "" && title !== undefined && title !== null ? (
+          <div className="text d-flex flex-column flex-md-row">
+            <div className="title">
+              <h2 className="titleText pt-5 px-3 ps-md-0">{title}</h2>
+            </div>
+            <MarkdownView
+              markdown={description}
+              className="description"
+            />
           </div>
-          <MarkdownView
-            markdown={description}
-            className="description"
-          />
-        </div>
-      ) : (
-        <div className="container-markdown">
-          <MarkdownView
-            markdown={description}
-            className="notTitle mx-lg-5"
-          />
-        </div>
-      )}
+        ) : (
+          <div className="container-markdown">
+            <MarkdownView
+              markdown={description}
+              className="notTitle"
+            />
+          </div>
+        )}
+      </div>
     </div>
   )
 }