From c842f9536b9c43229273b403218881f72fd79487 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Wed, 20 Apr 2022 16:09:24 -0300 Subject: [PATCH 1/3] Modificar detalles en dual section, onesection y text --- src/components/DualSection/DualSection.js | 19 ++++++----- src/components/DualSection/DualSection.scss | 27 +++++---------- src/components/DualSection/OneSection.js | 16 ++++----- src/components/Text/Text.js | 38 +++++++++++---------- src/components/Text/Text.scss | 26 +++++++------- src/styles/global.scss | 2 +- 6 files changed, 59 insertions(+), 69 deletions(-) diff --git a/src/components/DualSection/DualSection.js b/src/components/DualSection/DualSection.js index cde57e64..4bcf8989 100644 --- a/src/components/DualSection/DualSection.js +++ b/src/components/DualSection/DualSection.js @@ -5,7 +5,7 @@ export default function DualSection({ data }) { const dualSectionParts = data?.dualSectionPart const listSectionParts = dualSectionParts.map((section) => -
+

{section.title}

{section.description}

- - - + {section.button && ( + + + + )}
-
); return ( -
-
- {listSectionParts} -
+
+
+ {listSectionParts} +
diff --git a/src/components/DualSection/DualSection.scss b/src/components/DualSection/DualSection.scss index 375536f2..66206052 100644 --- a/src/components/DualSection/DualSection.scss +++ b/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%; } } diff --git a/src/components/DualSection/OneSection.js b/src/components/DualSection/OneSection.js index 91ebfbbb..a0421b20 100644 --- a/src/components/DualSection/OneSection.js +++ b/src/components/DualSection/OneSection.js @@ -20,19 +20,17 @@ const OneSection = ({ data: { id, strapi_component, dualSectionPart } }) => { theme === "dark" && backgroundImageDark?.url ? backgroundImageDark?.url : backgroundImage?.url - })`, + })`, }} > -
+
-

{title}

-

{description}

+

{title}

+

{description}

{button && ( - + + + )}
diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js index 9fcdbd9a..28b01d9c 100644 --- a/src/components/Text/Text.js +++ b/src/components/Text/Text.js @@ -8,27 +8,29 @@ export default function Text({ data }) { const bgImage = data?.backgroundImage?.url return ( -
- {title !== "" && title !== undefined && title !== null ? ( -
-
-

{title}

+
+ {title !== "" && title !== undefined && title !== null ? ( +
+
+

{title}

+
+
- -
- ) : ( -
- -
- )} + ) : ( +
+ +
+ )} +
) } diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss index 02c5b153..6abd1b42 100644 --- a/src/components/Text/Text.scss +++ b/src/components/Text/Text.scss @@ -4,21 +4,23 @@ .text { color: $primary; .title { - width: 100%; .titleText { - margin: 0; text-transform: uppercase; margin-top: 2rem; } } .description { - background-color: $primary-container; - padding-bottom: 3rem; + background-color: $grey-light-bg; + p:first-child { padding-top: 1rem; } + p:last-child { + margin-bottom: 0.5rem; + } p { - padding: 0rem 1rem; + color: $black; + padding: 0rem 0.5rem; } } } @@ -29,10 +31,10 @@ .notTitle { color: $primary; border-radius: 20px; - background-color: $primary-container; + background-color: $white; padding: 1rem; - margin: 1rem; - p:nth-last-child(2) { + margin: 1.5rem 0rem; + p:nth-last-child(-n+2) { margin-bottom: 0px; } } @@ -46,9 +48,8 @@ padding-top: 4rem; } .description { - p:first-child { - padding-top: 4rem; - } + margin-left: 2rem; + margin-top: 2rem; } } } @@ -58,8 +59,7 @@ .text { .description { p { - padding: 0rem 2.5rem; - padding-right: 7rem; + padding: 0rem 2rem; } } } diff --git a/src/styles/global.scss b/src/styles/global.scss index ae5e2e52..4fd1998e 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -55,7 +55,7 @@ $grey: #545468; $light-grey: #c4c4c4; $alt: #67f293; $blackBit: #242424; - +$grey-light-bg: #FAF8F8; /* Sizes */ $small: 15px; $medium: 20px; From 7d50a49844c2636a0ed353d5d65e1581b8201969 Mon Sep 17 00:00:00 2001 From: Yuliya Sharapa Date: Wed, 20 Apr 2022 16:43:51 -0300 Subject: [PATCH 2/3] create professionalsSection --- gatsby-config.js | 3 +- gatsby-node.js | 2 + src/components/LogosSection/logosSection.scss | 3 +- src/components/Professionals/Professionals.js | 53 +++++++++ .../Professionals/Professionals.scss | 112 ++++++++++++++++++ src/components/index.js | 4 +- src/hooks/index.js | 4 +- src/hooks/useProfessionals.js | 27 +++++ src/schema/professionalsSchema.js | 41 +++++++ src/templates/LandingPage.js | 9 +- 10 files changed, 253 insertions(+), 5 deletions(-) create mode 100644 src/components/Professionals/Professionals.js create mode 100644 src/components/Professionals/Professionals.scss create mode 100644 src/hooks/useProfessionals.js create mode 100644 src/schema/professionalsSchema.js diff --git a/gatsby-config.js b/gatsby-config.js index 20b0f4a2..49e1bd74 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -41,7 +41,8 @@ module.exports = { `blog-category`, `landing-page`, `case`, - `icon` + `icon`, + `professional`, ], singleTypes: [ `global-seo`, diff --git a/gatsby-node.js b/gatsby-node.js index a6ce12aa..1ca343ed 100644 --- a/gatsby-node.js +++ b/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) } diff --git a/src/components/LogosSection/logosSection.scss b/src/components/LogosSection/logosSection.scss index 3d6eab5b..cef4b0f8 100644 --- a/src/components/LogosSection/logosSection.scss +++ b/src/components/LogosSection/logosSection.scss @@ -11,7 +11,8 @@ &__summary { font-weight: 400; text-align: center; - line-height: 30px; + line-height: 33px; + color: rgba(0, 0, 0, 0.5); } &__logos { margin-top: 10px; diff --git a/src/components/Professionals/Professionals.js b/src/components/Professionals/Professionals.js new file mode 100644 index 00000000..cf95e3a0 --- /dev/null +++ b/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 ( +
+
+ +
+
+
+
{name}
+ {linkedin && } +
{position}
+

"{quote}"

+
+
+
+ ) + }) + + return ( +
+ {title &&

{title}

} + {summary &&
{summary}
} + {(professionalsCards !== undefined && professionalsCards.length > 0) && +
{professionalsCards}
+ } +
+ ) +} + +export default Professionals \ No newline at end of file diff --git a/src/components/Professionals/Professionals.scss b/src/components/Professionals/Professionals.scss new file mode 100644 index 00000000..d0ec2107 --- /dev/null +++ b/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: rgba(0, 0, 0, 0.5); + } + 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; + } + } +} + diff --git a/src/components/index.js b/src/components/index.js index 7723068c..4086764b 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -15,6 +15,7 @@ import DualSection from "./DualSection/DualSection" import AnimatedTransitionContinous from "./animatedTransitionContinous/AnimatedTransitionContinous" import BannerTop from "./Banners/BannerTop" import BannerHead from "./BannerHead/BannerHead"; +import Professionals from "./Professionals/Professionals" export { @@ -34,5 +35,6 @@ export { DualSection, AnimatedTransitionContinous, BannerTop, - BannerHead + BannerHead, + Professionals, } diff --git a/src/hooks/index.js b/src/hooks/index.js index 81e39987..445b6a5f 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -4,6 +4,7 @@ import useBlog from './useBlog' import useFooter from './useFooter'; import useCases from './useCases' import useNavbar from './useNavbar'; +import useProfessionals from "./useProfessionals"; export { useGlobalSeo, @@ -11,5 +12,6 @@ export { useBlog, useFooter, useCases, - useNavbar + useNavbar, + useProfessionals, } diff --git a/src/hooks/useProfessionals.js b/src/hooks/useProfessionals.js new file mode 100644 index 00000000..32f3c039 --- /dev/null +++ b/src/hooks/useProfessionals.js @@ -0,0 +1,27 @@ +import { useStaticQuery, graphql } from "gatsby" + +const useContactPage = () => { + return useStaticQuery(graphql` + { + allStrapiProfessional { + nodes { + quote + position + name + linkedin + strapiId + id + photo { + localFile { + childImageSharp { + gatsbyImageData + } + } + } + } + } + } + `) +} + +export default useContactPage diff --git a/src/schema/professionalsSchema.js b/src/schema/professionalsSchema.js new file mode 100644 index 00000000..13c4472a --- /dev/null +++ b/src/schema/professionalsSchema.js @@ -0,0 +1,41 @@ +const blogSchema = ` +type StrapiProfessional implements Node { + id: ID! + parent: Node + children: [Node!]! + internal: Internal! + name: String + position: String + quote: String + linkedin: String + published_at( + formatString: String + fromNow: Boolean + difference: String + locale: String + ): Date + created_at( + formatString: String + fromNow: Boolean + difference: String + locale: String + ): Date + updated_at( + formatString: String + fromNow: Boolean + difference: String + locale: String + ): Date + photo: LocalFile + strapiId: Int + } + + type LocalFile { + localFile: File @link(from: "localFile___NODE") + } + +` + +module.exports = { + value: blogSchema, +} \ No newline at end of file diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js index 0d1ba6de..ec07ee80 100644 --- a/src/templates/LandingPage.js +++ b/src/templates/LandingPage.js @@ -17,7 +17,8 @@ import { AnimatedTransitionContinous, DualSection, OneSection, - Quote + Quote, + Professionals } from "../components" import VideoBackground from "../components/videoBackground/VideoBackground" @@ -93,6 +94,11 @@ const LandingPage = ({ data, location }) => { ) : null + const professionals = + component.strapi_component === "components.professionals-section" ? ( + + ) : null + return (
<> @@ -109,6 +115,7 @@ const LandingPage = ({ data, location }) => { {quote} {dualSection} {animatedTransition} + {professionals}
) From 8f4de19cea219003d5224c3098a80d8a16b0b871 Mon Sep 17 00:00:00 2001 From: Yuliya Sharapa Date: Wed, 20 Apr 2022 17:25:50 -0300 Subject: [PATCH 3/3] fix color in dark mode --- src/components/LogosSection/logosSection.scss | 2 +- src/components/Professionals/Professionals.js | 2 +- src/components/Professionals/Professionals.scss | 2 +- src/context/themeContext.js | 2 ++ src/styles/global.scss | 2 ++ 5 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/LogosSection/logosSection.scss b/src/components/LogosSection/logosSection.scss index ffe82cb7..45e6baba 100644 --- a/src/components/LogosSection/logosSection.scss +++ b/src/components/LogosSection/logosSection.scss @@ -13,7 +13,7 @@ font-weight: 400; text-align: center; line-height: 33px; - color: rgba(0, 0, 0, 0.5); + color: $summary-color } &__logos { margin-top: 10px; diff --git a/src/components/Professionals/Professionals.js b/src/components/Professionals/Professionals.js index cf95e3a0..68867583 100644 --- a/src/components/Professionals/Professionals.js +++ b/src/components/Professionals/Professionals.js @@ -30,7 +30,7 @@ const Professionals = ({ data }) => {
{name}
- {linkedin && } + {linkedin && }
{position}

"{quote}"

diff --git a/src/components/Professionals/Professionals.scss b/src/components/Professionals/Professionals.scss index d0ec2107..f6a3a369 100644 --- a/src/components/Professionals/Professionals.scss +++ b/src/components/Professionals/Professionals.scss @@ -5,7 +5,7 @@ font-weight: 400; text-align: center; line-height: 33px; - color: rgba(0, 0, 0, 0.5); + color: $summary-color; } p { margin-bottom: 10px; diff --git a/src/context/themeContext.js b/src/context/themeContext.js index 7d1b846f..f6b28014 100644 --- a/src/context/themeContext.js +++ b/src/context/themeContext.js @@ -17,6 +17,7 @@ const themes = { "--border-bottom": "#cdcdcd", "--bg-form": "#DBDBDD", "--bg-diagonal": "#f2f0f7", + "--summary-color": "rgba(0, 0, 0, 0.5)" }, dark: { "--nav-footer-container": "#383838", @@ -34,6 +35,7 @@ const themes = { "--secondary-container": "#191919", "--bg-form": "#FAF8F8", "--bg-diagonal": "#4A494B", + "--summary-color": "#ffffff", }, } diff --git a/src/styles/global.scss b/src/styles/global.scss index fdbcef0b..64eef92c 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -22,6 +22,8 @@ $jobs-hover: var(--jobs-hover); $bg-form: var(--bg-form); $bg-diagonal: var(--bg-diagonal); +$summary-color: var(--summary-color); + main { background-color: $primary-container !important; }