From 138a055a520456ddec4414c90365bc4722455c0b Mon Sep 17 00:00:00 2001 From: Yuliya Sharapa Date: Fri, 11 Mar 2022 14:06:28 -0300 Subject: [PATCH 1/2] fix bugs --- src/components/BannerList/Banner.scss | 8 +--- src/components/BannerList/BannerLis.js | 13 +++--- .../BitwayPage/Paragraph/Paragraph.scss | 6 +-- src/components/CasesSection/CasesSection.js | 13 ++++++ src/components/CasesSection/CasesSection.scss | 1 + src/components/DualSection/DualSection.js | 11 +++-- src/components/DualSection/DualSection.scss | 12 +++++ src/components/Hero/Hero.js | 2 +- src/components/Hero/Hero.scss | 4 +- src/components/expandGrid/ExpandGrid.js | 10 ++-- src/components/expandGrid/expandGrid.scss | 15 +++--- src/components/index.js | 2 + src/components/layout.scss | 20 -------- src/components/quote/Quote.js | 6 ++- src/components/quote/quote.scss | 9 ++-- .../videoBackground/VideoBackground.js | 9 ++-- .../videoBackground/videoBackground.scss | 12 +++-- src/styles/global.scss | 46 ++++++++++++++++++- src/templates/LandingPage.js | 8 +++- 19 files changed, 137 insertions(+), 70 deletions(-) create mode 100644 src/components/CasesSection/CasesSection.js create mode 100644 src/components/CasesSection/CasesSection.scss diff --git a/src/components/BannerList/Banner.scss b/src/components/BannerList/Banner.scss index ca7a6b64..c6cdc0d1 100644 --- a/src/components/BannerList/Banner.scss +++ b/src/components/BannerList/Banner.scss @@ -5,24 +5,20 @@ p { text-align: justify; margin: 0 !important; - font-size: 16px; } img { width: 48px; } } &__title { - font-size: $second-large; - text-align: center; + font-weight: 700; + text-align: left; } } @media screen and (min-width: $breakpoint-xl) { .bannerList { .card_item { - p { - font-size: 20px; - } img { width: 70px; } diff --git a/src/components/BannerList/BannerLis.js b/src/components/BannerList/BannerLis.js index d4f67562..4d59e412 100644 --- a/src/components/BannerList/BannerLis.js +++ b/src/components/BannerList/BannerLis.js @@ -4,8 +4,6 @@ import './Banner.scss'; export default function BannerLis({ data }) { const title = data?.title; const image = data?.Card[0]?.icon?.url; - console.log(data) - console.log(image) const cards = data?.Card.map((item) => { return ( @@ -18,7 +16,7 @@ export default function BannerLis({ data }) { />
-

{item.title}

+

{item.title}

{item.description}

@@ -27,10 +25,13 @@ export default function BannerLis({ data }) { }) return ( -
-
{title}
-
{cards}
+
+
+

{title}

+
{cards}
+
+ ) } diff --git a/src/components/BitwayPage/Paragraph/Paragraph.scss b/src/components/BitwayPage/Paragraph/Paragraph.scss index 3ed9bde7..ea659b21 100644 --- a/src/components/BitwayPage/Paragraph/Paragraph.scss +++ b/src/components/BitwayPage/Paragraph/Paragraph.scss @@ -4,7 +4,6 @@ margin-bottom: 20px; & p { font-family: $primary-font; - font-size: 20px; font-style: normal; font-weight: 400; line-height: 30px; @@ -13,16 +12,13 @@ } & > div > p { font-family: $primary-font; - font-size: 20px; + font-style: normal; font-weight: 400; line-height: 30px; letter-spacing: 0em; text-align: justify; // padding: 0 80px 20px; - & * { - font-size: 20px; - } & a { color: $blue; } diff --git a/src/components/CasesSection/CasesSection.js b/src/components/CasesSection/CasesSection.js new file mode 100644 index 00000000..8d83f108 --- /dev/null +++ b/src/components/CasesSection/CasesSection.js @@ -0,0 +1,13 @@ +import React from 'react' +import "./CasesSection.scss" + +const CasesSection = ({data}) => { + return ( +
+
{data.title}
+
+ + ) +} + +export default CasesSection \ No newline at end of file diff --git a/src/components/CasesSection/CasesSection.scss b/src/components/CasesSection/CasesSection.scss new file mode 100644 index 00000000..0519ecba --- /dev/null +++ b/src/components/CasesSection/CasesSection.scss @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/DualSection/DualSection.js b/src/components/DualSection/DualSection.js index b2828042..f8e7f723 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.title}

{section.description}

- +
@@ -25,10 +25,13 @@ export default function DualSection({ data }) { ); return ( - +
{listSectionParts} +
+ + ) } diff --git a/src/components/DualSection/DualSection.scss b/src/components/DualSection/DualSection.scss index 7ced9781..ad127844 100644 --- a/src/components/DualSection/DualSection.scss +++ b/src/components/DualSection/DualSection.scss @@ -3,9 +3,21 @@ .dualSection { p { text-align: justify; + font-weight: 700; + } + h4 { + font-weight: 700; } &__image { width: 300px; } + button { + background: $light-grey; + color: white; + font-weight: 500; + border-radius: 3px; + border: none; + padding: 0.3em; + } } diff --git a/src/components/Hero/Hero.js b/src/components/Hero/Hero.js index b2c6da39..b4d455a2 100644 --- a/src/components/Hero/Hero.js +++ b/src/components/Hero/Hero.js @@ -20,7 +20,7 @@ export default function Hero({ data }) { return ( <> -
+
{ return ( +

{data.title}

-

{data.subtitle}

+
{data.subtitle}
-
+ +
+ ) } @@ -88,7 +92,7 @@ const ExpandedListItem = ({ index, onClick, data }) => {
-

{data.text}

+
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss index e114ccce..2f866e54 100644 --- a/src/components/expandGrid/expandGrid.scss +++ b/src/components/expandGrid/expandGrid.scss @@ -3,20 +3,17 @@ .expandGrid { display: flex; flex-direction: column; - padding: 0 2em; justify-content: center; - @media screen and (max-width: 890px) { - padding: 0 10px; - } h2 { - font-size: 4em; - text-transform: uppercase; color: #333333; flex-grow: 1; text-align: center; + font-weight: 700; } - h4{ + h6 { text-align: center; + line-height: 30px; + font-weight: 400; } } @@ -114,6 +111,7 @@ width: 100%; margin-top: 2rem; + @media screen and (max-width: 890px) { margin: 0; } @@ -123,6 +121,9 @@ opacity: 0; border-radius: 3px; height: 5rem; + h4 { + text-align: left; + } } /* content fade in animations */ diff --git a/src/components/index.js b/src/components/index.js index 96136753..b8cb378f 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -16,11 +16,13 @@ import BannerTop from "./Banners/BannerTop" import BannerActionCall from "./Banners/BannerActionCall" import PartnersSection from "./PartnersSection/PartnersSection" import JobsPage from "./JobsPage/JobsPage" +import CasesSection from "./CasesSection/CasesSection" export { ServicesSection, ServiceCard, Cards, + CasesSection, SubModuleItems, SubModulesEdTech, Title, diff --git a/src/components/layout.scss b/src/components/layout.scss index c9fb3389..31dff157 100644 --- a/src/components/layout.scss +++ b/src/components/layout.scss @@ -1,5 +1,4 @@ @import "../styles/global.scss"; -@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; @@ -12,7 +11,6 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2a2c2e; - font-family: "Roboto", sans-serif; font-weight: normal; word-wrap: break-word; font-kerning: normal; @@ -83,19 +81,14 @@ h1 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "Roboto", sans-serif; font-weight: bold; text-rendering: optimizeLegibility; - font-size: 2.25rem; line-height: 1.1; } mark { background-color: #ff0; color: #000; } -small { - font-size: 80%; -} sub, sup { font-size: 75%; @@ -128,7 +121,6 @@ code, kbd, pre, samp { - font-family: "Roboto", sans-serif; font-size: 1em; } figure { @@ -261,10 +253,8 @@ h2 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "Roboto", sans-serif; font-weight: bold; text-rendering: optimizeLegibility; - font-size: 1.62671rem; line-height: 1.1; } h3 { @@ -277,10 +267,8 @@ h3 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "Roboto", sans-serif; font-weight: bold; text-rendering: optimizeLegibility; - font-size: 1.38316rem; line-height: 1.1; } h4 { @@ -293,10 +281,8 @@ h4 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "Roboto", sans-serif; font-weight: bold; text-rendering: optimizeLegibility; - font-size: 1rem; line-height: 1.1; } h5 { @@ -309,10 +295,8 @@ h5 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "Roboto", sans-serif; font-weight: bold; text-rendering: optimizeLegibility; - font-size: 0.85028rem; line-height: 1.1; } h6 { @@ -325,10 +309,8 @@ h6 { padding-top: 0; margin-bottom: 1.45rem; color: inherit; - font-family: "Roboto", sans-serif; font-weight: bold; text-rendering: optimizeLegibility; - font-size: 0.78405rem; line-height: 1.1; } hgroup { @@ -417,7 +399,6 @@ table { padding-right: 0; padding-top: 0; margin-bottom: 1.45rem; - font-size: 1rem; line-height: 1.45rem; border-collapse: collapse; width: 100%; @@ -563,7 +544,6 @@ tt, code { background-color: hsla(0, 0%, 0%, 0.04); border-radius: 3px; - font-family: "Roboto", sans-serif; padding: 0; padding-top: 0.2em; padding-bottom: 0.2em; diff --git a/src/components/quote/Quote.js b/src/components/quote/Quote.js index 7a63ed47..5389dde6 100644 --- a/src/components/quote/Quote.js +++ b/src/components/quote/Quote.js @@ -4,7 +4,8 @@ import React from "react" const Quote = ({ data: { description, title, variant, profile, image } }) => { return ( -
+
+
{
-

{title}

+

{title}

{description}

@@ -26,6 +27,7 @@ const Quote = ({ data: { description, title, variant, profile, image } }) => { />
+
) } diff --git a/src/components/quote/quote.scss b/src/components/quote/quote.scss index 7100cda9..3f195b88 100644 --- a/src/components/quote/quote.scss +++ b/src/components/quote/quote.scss @@ -2,9 +2,7 @@ .quote { display: grid; - padding: 0 4em; gap: 3em; - margin-bottom: 3em; &-body { grid-area: quote-body; @@ -16,15 +14,16 @@ } &-person { + padding-top: 1em; grid-area: quote-person; display: flex; flex-direction: column; &-title { - font-size: 3em; - margin-bottom: 0.3em; + margin-bottom: 1.5em; + font-weight: 700; } &-text { - font-size: 1em; + font-weight: 700; } @keyframes move-shadow { 0% { diff --git a/src/components/videoBackground/VideoBackground.js b/src/components/videoBackground/VideoBackground.js index 1bb67f07..13b805b5 100644 --- a/src/components/videoBackground/VideoBackground.js +++ b/src/components/videoBackground/VideoBackground.js @@ -32,7 +32,8 @@ const VideoBackground = ({ data: { video, description, button } }) => { return ( -
+
+
+
+ ) } diff --git a/src/components/videoBackground/videoBackground.scss b/src/components/videoBackground/videoBackground.scss index aa61f43a..345af175 100644 --- a/src/components/videoBackground/videoBackground.scss +++ b/src/components/videoBackground/videoBackground.scss @@ -1,3 +1,5 @@ +@import "../../styles/global.scss"; + .videoBackground { width: 100%; height: 90vh; @@ -22,14 +24,18 @@ backdrop-filter: blur(14px); color: white; border-radius: 5px; - background: #ffffff4f; + background: #e8e8e8c5; box-shadow: 0px 0px 3px #00000044; margin: 1em; - padding: 1em; + padding: 2em; + h4{ + color: $grey; + } button { - background: none; + background: $grey; border: 1px solid white; color: white; + font-weight: 500; border-radius: 3px; padding: 0.3em; } diff --git a/src/styles/global.scss b/src/styles/global.scss index 27f62369..701ba938 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,6 +1,6 @@ /* Fonts */ -@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); -$primary-font: "Roboto", sans-serif; +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +$primary-font: 'Poppins', sans-serif; $medium: 20px; $nav-footer-container: var(--nav-footer-container); @@ -47,6 +47,9 @@ $yellow: #ffe927; $blue: #1ecad3; $grey-light: #f5f5f5; +$grey:#545468; +$light-grey:#C4C4C4; + /* Sizes */ @@ -56,6 +59,45 @@ $large: 25px; $second-large: 40px; $extra-large: 45px; +// new sizes +$h1bDesk: 69px; +$h2bDesk: 53px; +$h3bDesk: 39px; +$h4bDesk: 31px; +$h5bDesk: 25px; +$h6bDesk: 20px; +$textDesk: 18px; +$textSDesk: 16px; +$textXSDesk: 14px; + +body { + font-size: 18px; + p { + font-size: 18px; + } + h1 { + font-size: 69px; + } + h2 { + font-size: 53px; + } + h3 { + font-size: 39px; + } + h4 { + font-size: 31px; + } + h5 { + font-size: 25px; + } + h6 { + font-size: 20px; + } + small { + font-size: 16px; + } +} + /* Weights */ $normal: 400; $standard: 500; diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js index 8ea9938e..47c3ecab 100644 --- a/src/templates/LandingPage.js +++ b/src/templates/LandingPage.js @@ -1,7 +1,7 @@ import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" -import { Seo } from "../components/index.js" +import { Seo, CasesSection } from "../components/index.js" // componentes del body import Hero from "../components/Hero/Hero" @@ -10,6 +10,7 @@ import ExpandGrid from "../components/expandGrid/ExpandGrid" const LandingPage = ({ data }) => { const pageData = data?.allStrapiLandingPage?.nodes[0] + console.log(pageData.body, "pageData") const content = pageData.body.map((component, idx) => { @@ -25,12 +26,17 @@ const LandingPage = ({ data }) => { : null + const casesSection = component.strapi_component === "components.cases-section" ? + : + null + return (
<> {component.strapi_component === "home.hero" && hero} {component.strapi_component === "components.banner-list" && bannerList} {component.strapi_component === "components.selected-grid" && expandGrid} + {/* {component.strapi_component === "components.cases-section" && casesSection} */}
) From 6bade7ef989ebb65b0bafc86f64617a4d8e7a31a Mon Sep 17 00:00:00 2001 From: Yuliya Sharapa Date: Fri, 11 Mar 2022 14:19:37 -0300 Subject: [PATCH 2/2] fix expand grid --- src/components/expandGrid/ExpandGrid.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js index 0b9501b2..119f6ca3 100644 --- a/src/components/expandGrid/ExpandGrid.js +++ b/src/components/expandGrid/ExpandGrid.js @@ -1,5 +1,6 @@ import React, { useRef, useState } from "react" import { Flipper, Flipped } from "react-flip-toolkit" +import MarkdownView from "react-showdown" import "./expandGrid.scss" const ExpandGrid = ({ data }) => {