From fcea67d66e0043927ef9e2d0d4870e6a3e3b7568 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Tue, 29 Mar 2022 17:33:33 -0300 Subject: [PATCH 01/11] Eliminar jobs page --- src/components/JobsPage/JobsPage.js | 37 ------ src/components/JobsPage/JobsPage.scss | 181 -------------------------- src/components/index.js | 3 +- src/pages/jobs.js | 6 - src/schema/schema.js | 35 ----- 5 files changed, 1 insertion(+), 261 deletions(-) delete mode 100644 src/components/JobsPage/JobsPage.js delete mode 100644 src/components/JobsPage/JobsPage.scss delete mode 100644 src/pages/jobs.js diff --git a/src/components/JobsPage/JobsPage.js b/src/components/JobsPage/JobsPage.js deleted file mode 100644 index 643257fd..00000000 --- a/src/components/JobsPage/JobsPage.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react" -import Layout from "../layout" -import Helmet from "react-helmet" -import { Seo } from "../index" -import "./JobsPage.scss" - -const JobsPage = () => { - return ( - - - -
- - - - - - ) -} - -export default JobsPage diff --git a/src/components/JobsPage/JobsPage.scss b/src/components/JobsPage/JobsPage.scss deleted file mode 100644 index 0e98a897..00000000 --- a/src/components/JobsPage/JobsPage.scss +++ /dev/null @@ -1,181 +0,0 @@ -@import "../../styles/global.scss"; - -.cats-multiselect { - &-label { - color: $primary !important; - } - &-dropdown-menu { - background: $primary-container !important; - color: $primary !important; - } - - &-option { - cursor: pointer; - &:hover { - background: rgba(128, 128, 128, 0.13) !important; - } - } - - &-search input { - background: $primary-container !important; - color: $primary !important; - } -} -.cats-multiselect-label-block { - border: 2px solid $border-bottom !important; -} - -.cats-job { - border-bottom: 1px solid $border-bottom !important; - padding-left: 15px !important; - > div { - overflow-x: hidden !important; - } - - &-title { - overflow: hidden; - a { - color: $title-jobs; - font-weight: 700; - font-size: $medium; - padding-bottom: 10px; - } - } - - &-column-value { - color: $primary !important; - font-size: $small; - } - - &:hover { - background: $jobs-hover !important; - cursor: pointer; - & .cats-job-column-value { - color: $primary !important; - } - } -} - -.cats-chevron { - color: $primary !important; - & path { - fill: $primary !important; - } -} - -.widget-container { - min-height: 65vh; - margin-top: 20px !important; - padding-bottom: 70px !important; -} - -.cats-powered-by { - display: none; -} - -.cats-column-header { - padding-left: 15px !important; - border-bottom: 2px solid $border-bottom !important; - border-top: 2px solid $border-bottom !important; -} - -.banner__head { - width: 100%; - background: #303234; - min-height: 300px; - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - h2 { - color: $blue; - font-size: $large; - text-align: center; - - span { - background-color: $blue; - display: inline-block; - -webkit-transform: skew(-15deg); - transform: skew(-15deg); - - p { - padding: 5px 20px; - -webkit-transform: skew(15deg); - transform: skew(15deg); - color: $white !important; - font-size: $large; - margin: 0; - } - } - } - h3 { - color: $white; - //border-bottom: 4px solid $blue; - //padding: 7px; - font-size: $small; - text-align: center; - //padding: 0px 15px; - } -} - -.cats-mobile { - &-column-name { - font-size: $small; - } -} - -@media (min-width: $breakpoint-md) { - .cats-column-name { - span { - font-size: $large; - } - } - .cats-job { - &-title { - a { - font-size: $large; - } - } - - &-column-value { - font-size: $medium; - } - } - - .cats-mobile { - &-column-name { - font-size: $medium; - } - } - - .cats-multiselect-label { - font-size: $large; - } - - .widget-container { - margin-top: 70px !important; - } - .banner__head { - h2 { - font-size: $extra-large; - span { - p { - font-size: $extra-large; - } - } - } - h3 { - font-size: $large; - border-bottom: 4px solid $blue; - padding: 7px; - } - } -} - -@media (min-width: $breakpoint-lg) { - .cats-job { - &-column-value { - font-size: $large; - } - } -} diff --git a/src/components/index.js b/src/components/index.js index f92f9fcc..f5d40eca 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -8,10 +8,9 @@ import BannerTop from "./Banners/BannerTop" import BannerActionCall from "./Banners/BannerActionCall" import CasesSection from "./CasesSection/CasesSection" import CasesList from "./CasesSection/CasesList" -import JobsPage from "./JobsPage/JobsPage" + export { - JobsPage, Cards, CasesList, CasesSection, diff --git a/src/pages/jobs.js b/src/pages/jobs.js deleted file mode 100644 index 54baac6b..00000000 --- a/src/pages/jobs.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react" -import {JobsPage} from "../components" - -const Jobs = () => - -export default Jobs \ No newline at end of file diff --git a/src/schema/schema.js b/src/schema/schema.js index 7527055e..54f98638 100644 --- a/src/schema/schema.js +++ b/src/schema/schema.js @@ -1198,41 +1198,6 @@ type StrapiGlobalConfigScript { src: String } -type StrapiJobsPage implements Node { - id: ID! - parent: Node - children: [Node!]! - internal: Internal! - title: 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 - strapiId: Int - pageMetadata: StrapiJobsPagePageMetadata -} - -type StrapiJobsPagePageMetadata { - id: Int - pageTitle: String - pageDescription: String - pageKeywords: String -} - type StrapiLayoutFooter { id: Int subscription: StrapiLayoutFooterSubscription From 2ec68d0d7016dfb610423ebe843605417f92831b Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Tue, 29 Mar 2022 17:34:18 -0300 Subject: [PATCH 02/11] Crear componentes banner y catsone. Agregar join-us a landing --- src/components/BannerHead/BannerHead.js | 17 ++ src/components/BannerHead/BannerHead.scss | 52 +++++++ src/components/Catsone/catsone.js | 23 +++ src/components/Catsone/catsone.scss | 181 ++++++++++++++++++++++ src/templates/LandingPage.js | 42 +++-- 5 files changed, 300 insertions(+), 15 deletions(-) create mode 100644 src/components/BannerHead/BannerHead.js create mode 100644 src/components/BannerHead/BannerHead.scss create mode 100644 src/components/Catsone/catsone.js create mode 100644 src/components/Catsone/catsone.scss diff --git a/src/components/BannerHead/BannerHead.js b/src/components/BannerHead/BannerHead.js new file mode 100644 index 00000000..74c4cfae --- /dev/null +++ b/src/components/BannerHead/BannerHead.js @@ -0,0 +1,17 @@ +import React from "react" +import "./BannerHead.scss" +import MarkdownView from "react-showdown" + +const BannerHead = ({ data }) => { + console.log(data) + const title = data?.title + return ( + + ) +} + +export default BannerHead diff --git a/src/components/BannerHead/BannerHead.scss b/src/components/BannerHead/BannerHead.scss new file mode 100644 index 00000000..024cd166 --- /dev/null +++ b/src/components/BannerHead/BannerHead.scss @@ -0,0 +1,52 @@ +@import "../../styles/global.scss"; +//Pase todos los estilos de PageJobs, cuando este definido el estilo de la pag join-us lo cambiamos + +.banner { + width: 100%; + min-height: 300px; + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + h3 { + color: $primary; + text-align: center; + + span { + background-color: $primary; + display: inline-block; + -webkit-transform: skew(-15deg); + transform: skew(-15deg); + + h3 { + padding: 5px 20px; + -webkit-transform: skew(15deg); + transform: skew(15deg); + color: $white !important; + margin: 0; + } + } + } + h6 { + color: $primary; + //border-bottom: 4px solid $blue; + //padding: 7px; + text-align: center; + //padding: 0px 15px; + } +} + +.cats-mobile { + &-column-name { + font-size: $small; + } +} + +@media (min-width: $breakpoint-md) { + .banner { + h6 { + border-bottom: 4px solid $primary !important; + padding: 7px; + } + } +} diff --git a/src/components/Catsone/catsone.js b/src/components/Catsone/catsone.js new file mode 100644 index 00000000..b70ecb49 --- /dev/null +++ b/src/components/Catsone/catsone.js @@ -0,0 +1,23 @@ +import React from "react" +import Helmet from "react-helmet" +import "./catsone.scss" + +const Catsone = () => { + return ( + <> +
+ + + + + + ) +} + +export default Catsone diff --git a/src/components/Catsone/catsone.scss b/src/components/Catsone/catsone.scss new file mode 100644 index 00000000..2e58041a --- /dev/null +++ b/src/components/Catsone/catsone.scss @@ -0,0 +1,181 @@ +@import "../../styles/global.scss"; +//Pase todos los estilos de PageJobs, cuando este definido el estilo de la pag join us lo cambiamos +.cats-multiselect { + &-label { + color: $primary !important; + } + &-dropdown-menu { + background: $primary-container !important; + color: $primary !important; + } + + &-option { + cursor: pointer; + &:hover { + background: rgba(128, 128, 128, 0.13) !important; + } + } + + &-search input { + background: $primary-container !important; + color: $primary !important; + } +} +.cats-multiselect-label-block { + border: 2px solid $border-bottom !important; +} + +.cats-job { + border-bottom: 1px solid $border-bottom !important; + padding-left: 15px !important; + > div { + overflow-x: hidden !important; + } + + &-title { + overflow: hidden; + a { + color: $title-jobs; + font-weight: 700; + font-size: $medium; + padding-bottom: 10px; + } + } + + &-column-value { + color: $primary !important; + font-size: $small; + } + + &:hover { + background: $jobs-hover !important; + cursor: pointer; + & .cats-job-column-value { + color: $primary !important; + } + } +} + +.cats-chevron { + color: $primary !important; + & path { + fill: $primary !important; + } +} + +.widget-container { + min-height: 65vh; + margin-top: 20px !important; + padding-bottom: 70px !important; +} + +.cats-powered-by { + display: none; +} + +.cats-column-header { + padding-left: 15px !important; + border-bottom: 2px solid $border-bottom !important; + border-top: 2px solid $border-bottom !important; +} + +.banner__head { + width: 100%; + background: #303234; + min-height: 300px; + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + h2 { + color: $blue; + font-size: $large; + text-align: center; + + span { + background-color: $blue; + display: inline-block; + -webkit-transform: skew(-15deg); + transform: skew(-15deg); + + p { + padding: 5px 20px; + -webkit-transform: skew(15deg); + transform: skew(15deg); + color: $white !important; + font-size: $large; + margin: 0; + } + } + } + h3 { + color: $white; + //border-bottom: 4px solid $blue; + //padding: 7px; + font-size: $small; + text-align: center; + //padding: 0px 15px; + } +} + +.cats-mobile { + &-column-name { + font-size: $small; + } +} + +@media (min-width: $breakpoint-md) { + .cats-column-name { + span { + font-size: $large; + } + } + .cats-job { + &-title { + a { + font-size: $large; + } + } + + &-column-value { + font-size: $medium; + } + } + + .cats-mobile { + &-column-name { + font-size: $medium; + } + } + + .cats-multiselect-label { + font-size: $large; + } + + .widget-container { + margin-top: 70px !important; + } + .banner__head { + h2 { + font-size: $extra-large; + span { + p { + font-size: $extra-large; + } + } + } + h3 { + font-size: $large; + border-bottom: 4px solid $blue; + padding: 7px; + } + } +} + +@media (min-width: $breakpoint-lg) { + .cats-job { + &-column-value { + font-size: $large; + } + } +} diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js index 54e73fbb..fd9ef01a 100644 --- a/src/templates/LandingPage.js +++ b/src/templates/LandingPage.js @@ -5,43 +5,55 @@ import { Seo, CasesSection, CasesList } from "../components/index.js" // componentes del body import Hero from "../components/Hero/Hero" -import BannerList from '../components/BannerList/BannerLis'; +import BannerList from "../components/BannerList/BannerLis" import ExpandGrid from "../components/expandGrid/ExpandGrid" +import Catsone from "../components/Catsone/catsone" +import BannerHead from '../components/BannerHead/BannerHead'; const LandingPage = ({ data, location }) => { const pageData = data?.allStrapiLandingPage?.nodes[0] const content = pageData.body.map((component, idx) => { - - const hero = component.strapi_component === "home.hero" ? + console.log(component) + const hero = component.strapi_component === "home.hero" ? : null - const bannerList = component.strapi_component === "components.banner-list" ? + const bannerList = component.strapi_component === "components.banner-list" ? : null - const expandGrid = component.strapi_component === "components.selected-grid" ? + const expandGrid = component.strapi_component === "components.selected-grid" ? : null - const casesSection = (component.strapi_component === "components.cases-section" && !component.allCases) ? + const casesSection = (component.strapi_component === "components.cases-section" && !component.allCases) ? : null - const casesList = (component.strapi_component === "components.cases-section" && component.allCases) ? + const casesList = (component.strapi_component === "components.cases-section" && component.allCases) ? : null + const catsone = component.strapi_component === "scripts.catsone" ? + : + null + + const bannerHead = component.strapi_component === "banners.banner-head" ? + : + 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" && !component.allCases) && casesSection} - {(component.strapi_component === "components.cases-section" && component.allCases) && casesList} - -
+ <> + {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" && !component.allCases) && casesSection} + {(component.strapi_component === "components.cases-section" && component.allCases) && casesList} + {component.strapi_component === "scripts.catsone" && catsone} + {component.strapi_component === "banners.banner-head" && bannerHead} + + ) }) From a4ee7e765d2f554521e1a9edb5e86b1b334d7505 Mon Sep 17 00:00:00 2001 From: benjacanas Date: Wed, 30 Mar 2022 11:51:33 -0300 Subject: [PATCH 03/11] fix navbar --- .../NavBar/AnimatedNavBar/AnimatedNavbar.js | 11 +---------- .../AnimatedNavBar/DropdownContainer/dropdown.scss | 1 - src/components/NavBar/NavBar.scss | 5 ++++- 3 files changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js b/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js index 1bb69f7a..8fc6cdd6 100644 --- a/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js +++ b/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js @@ -24,11 +24,7 @@ const getComponentTitle = component => { ) } -const AnimatedNavbar = ({ - landingComponents, - navbarItems = [], - duration, -}) => { +const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => { const navbarConfig = [ ...navbarItems.map(navItem => { if (navItem.landing) { @@ -56,11 +52,6 @@ const AnimatedNavbar = ({ } } }), - { - title: "Join Us", - slug: "jobs", - dropdown: () => , - }, { title: "Blog", slug: "blog", diff --git a/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss b/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss index 8194ea43..d65f2558 100644 --- a/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss +++ b/src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss @@ -4,7 +4,6 @@ &-section { padding: 28px; position: relative; - z-index: 10; } &-link { font-size: 18px; diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index b606dfb4..746f257f 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -2,6 +2,7 @@ .NavBar { background-color: white; + z-index: 10; } .NavBar__Logo { margin: 16px 28px; @@ -49,6 +50,7 @@ align-items: center; justify-content: space-around; &-contact { + white-space: nowrap; box-shadow: 0px 2px 10px #3f6be880; padding: .6em; background-color: #3F6BE8; @@ -71,7 +73,7 @@ display: flex; flex-direction: row; & > a { - flex-basis: 30%; + flex-basis: 20%; } } .NavBar__Logo { @@ -89,6 +91,7 @@ .NavBar__Item { margin-right: 2.5rem; margin-top: .5em; + white-space: nowrap; } .NavBar_Side{ justify-content: unset; From a8db6ece453363c145f498b03efd7c0a188ce5f6 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Wed, 30 Mar 2022 12:48:35 -0300 Subject: [PATCH 04/11] Agregar en el bannerHead campo image --- src/components/BannerHead/BannerHead.js | 25 +++++++++++++++++------ src/components/BannerHead/BannerHead.scss | 4 +--- src/templates/LandingPage.js | 14 ++++++------- 3 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/components/BannerHead/BannerHead.js b/src/components/BannerHead/BannerHead.js index 74c4cfae..8e85fd33 100644 --- a/src/components/BannerHead/BannerHead.js +++ b/src/components/BannerHead/BannerHead.js @@ -3,13 +3,26 @@ import "./BannerHead.scss" import MarkdownView from "react-showdown" const BannerHead = ({ data }) => { - console.log(data) - const title = data?.title + + const title = data?.title; + const image = data?.image; + console.log(image) return ( -