Cun 900: Agregar page Jobs

gatsby-config.js

@@ -52,6 +52,7 @@ module.exports = {
           `bitway-page`,
           `contact-page`,
           `global-config`,
+          `jobs-page`,
         ],
       },
     },

public/page-data/index/page-data.json

@@ -2,4 +2,4 @@
     "componentChunkName": "component---src-pages-index-js",
     "path": "/",
     "result": {"pageContext":{}},
-    "staticQueryHashes": ["1128713364","1687125271","176670904","2432702713","3498872882","3858639830","4109181808","854109855","882490824"]}
+    "staticQueryHashes": ["1128713364","1687125271","176670904","2432702713","3498872882","3858639830","4109181808","770810350","854109855","882490824"]}

src/components/JobsPage/JobsPage.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import Layout from '../layout'
+import Helmet from 'react-helmet'
+import { useJobsPage } from '../../hooks'
+import MarkdownView from "react-showdown"
+import { Seo } from '../index'
+import './JobsPage.scss'
+
+export default function JobsPage() {
+    const jobsData = useJobsPage()
+    const banner = jobsData.strapiJobsPage.banner
+
+    const { pageTitle, pageDescription, pageKeywords } = jobsData?.strapiJobsPage?.pageMetadata || {}
+
+    return (
+        <Layout>
+            {jobsData?.strapiJobsPage?.pageMetadata && (
+                <Seo
+                    title={pageTitle}
+                    description={pageDescription}
+                    keywords={pageKeywords}
+                />
+            )}
+            <MarkdownView markdown={banner} className="banner__head" />
+            <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>
+
+        </Layout>
+    )
+}

src/components/JobsPage/JobsPage.scss

@@ -0,0 +1,95 @@
+@import "../../styles/global.scss";
+
+.cats-job-title {
+    a {
+        color: rgb(86, 130, 198);
+        font-weight: 700;
+    }
+}
+
+.cats-job {
+    border-bottom: 1px solid  #cdcdcd;
+    padding-left: 15px !important;
+
+    >div{
+        overflow-x: hidden !important;
+    }
+
+
+    &:hover {
+        background-color: #faf5f5 !important;
+        cursor: pointer;
+    }
+}
+
+.widget-container {
+    min-height: 65vh;
+    margin-top: 20px !important;
+    margin-bottom: 70px !important;
+}
+
+.cats-powered-by {
+    display: none;
+}
+
+.cats-column-header{
+    padding-left: 15px !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;
+    }
+}
+
+@media (min-width: $breakpoint-tablet) {
+    .widget-container {
+        margin-top: 70px !important;
+    }
+    .banner__head {
+        h2 {
+            font-size: $extra-large;
+            p{
+                font-size: $extra-large;
+            }
+        }
+        h3 {
+            font-size: $large;
+            border-bottom: 4px solid $blue;
+            padding: 7px;
+        }
+    }
+}

src/components/index.js

@@ -15,6 +15,7 @@ import BannerClientes from "./Banners/BannerClientes"
 import BannerTop from "./Banners/BannerTop"
 import BannerActionCall from "./Banners/BannerActionCall"
 import PartnersSection from "./PartnersSection/PartnersSection"
+import JobsPage from "./JobsPage/JobsPage"
 
 export {
   ServicesSection,
@@ -34,4 +35,5 @@ export {
   BannerTop,
   BannerActionCall,
   PartnersSection,
+  JobsPage,
 }

src/constants/MenuLinks/MenuLinks.js

@@ -8,7 +8,8 @@ const MENU_LINKS = [
   { id: 3, text: "edtech", url: "/edtech" },
   { id: 4, text: "bitway", url: "/bitway" },
   { id: 5, text: "blog", url: "/blog" },
-  { id: 6, text: "contacto", url: "/contacto" },
+  { id: 6, text: "jobs", url: "/jobs" },
+  { id: 7, text: "contacto", url: "/contacto" },
 ]
 
 const MenuLinks = ({ styleClass }) => {

src/hooks/index.js

@@ -6,6 +6,7 @@ import useGlobalSeo from "./useGlobalSeo"
 import useHomePage from "./useHomePage"
 import useContactPage from "./useContactPage"
 import useBlog from './useBlog'
+import useJobsPage from "./useJobsPage"
 
 export {
   useServices,
@@ -16,4 +17,5 @@ export {
   useHomePage,
   useContactPage,
   useBlog,
+  useJobsPage,
 }

src/hooks/useJobsPage.js

@@ -0,0 +1,20 @@
+import { useStaticQuery, graphql } from "gatsby"
+
+const useJobsPage = () => {
+    const query = useStaticQuery(graphql`
+    {
+      strapiJobsPage {
+        banner
+        pageMetadata {
+          pageDescription
+          pageKeywords
+          pageTitle
+        }
+      }
+    }
+
+  `)
+    return query
+}
+
+export default useJobsPage

src/pages/jobs.js

@@ -0,0 +1,6 @@
+import React from "react"
+import {JobsPage} from "../components"
+
+const Jobs = () => <JobsPage />
+
+export default Jobs

src/schema/schema.js

@@ -1180,6 +1180,41 @@ type StrapiGlobalConfigScript {
   src: String
 }
 
+type StrapiJobsPage implements Node {
+  id: ID!
+  parent: Node
+  children: [Node!]!
+  internal: Internal!
+  banner: 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
+}
+
 
 `