SBIT-69: Agregar join-us a landing page

src/components/BannerHead/BannerHead.js

@@ -0,0 +1,30 @@
+import React from "react"
+import "./BannerHead.scss"
+import MarkdownView from "react-showdown"
+
+const BannerHead = ({ data }) => {
+
+    const title = data?.title;
+    const image = data?.image;
+    console.log(image)
+    return (
+        <div class="banner d-flex justify-content-center">
+            <div class="banner__image">
+                {(image.length !== 0) && (
+                    <img
+                        src={image.url} alt={image.name}
+                    />
+                )}
+            </div>
+            <div class="banner__title">
+                <h1>
+                    {title && (
+                        <MarkdownView markdown={title} />
+                    )}
+                </h1>
+            </div>
+        </div>
+    )
+}
+
+export default BannerHead

src/components/BannerHead/BannerHead.scss

@@ -0,0 +1,50 @@
+@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;
+
+  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;
+    }
+  }
+}

src/components/Catsone/catsone.js

@@ -0,0 +1,23 @@
+import React from "react"
+import Helmet from "react-helmet"
+import "./catsone.scss"
+
+const Catsone = () => {
+    return (
+        <>
+            <div id="cats-portal-widget" className="container widget-container"></div>
+            <Helmet>
+                <script>
+                    {`window.cjw=window.cjw||function(){(cjw.instance=cjw.instance||[]).push(arguments[0])};
+                        cjw({"id":91646,"domain":"catsone.com","target":"#cats-portal-widget"});`}
+                </script>
+                <script
+                    async
+                    src="https://app.catsone.com/resources/entry-jobwidget.js"
+                ></script>
+            </Helmet>
+        </>
+    )
+}
+
+export default Catsone

src/components/JobsPage/JobsPage.scss → src/components/Catsone/catsone.scss

@@ -1,5 +1,5 @@
 @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;

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,

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

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" ?
       <Hero data={component} /> :
       null
 
-    const bannerList = component.strapi_component === "components.banner-list" ? 
+    const bannerList = component.strapi_component === "components.banner-list" ?
       <BannerList data={component} /> :
       null
 
-    const expandGrid = component.strapi_component === "components.selected-grid" ? 
+    const expandGrid = component.strapi_component === "components.selected-grid" ?
       <ExpandGrid data={component} /> :
       null
 
-    const casesSection = (component.strapi_component === "components.cases-section" && !component.allCases) ? 
+    const casesSection = (component.strapi_component === "components.cases-section" && !component.allCases) ?
       <CasesSection data={component} /> :
       null
 
-      const casesList = (component.strapi_component === "components.cases-section" && component.allCases) ? 
+    const casesList = (component.strapi_component === "components.cases-section" && component.allCases) ?
       <CasesList /> :
       null
 
+    const catsone = component.strapi_component === "scripts.catsone" ?
+      <Catsone data={component} /> :
+      null
+
+    const bannerHead = component.strapi_component === "banners.banner-head" ?
+      <BannerHead data={component} /> :
+      null
+
     return (
       <div key={idx}>
-      <>
-        {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}  
-      </>
-    </div>
+        <>
+          {hero}
+          {bannerList}
+          {expandGrid}
+          {casesSection}
+          {casesList}
+          {catsone}
+          {bannerHead}
+        </>
+      </div>
     )
 
   })