SBIT-70: Release a PROD

src/components/BannerHead/BannerHead.js

@@ -0,0 +1,32 @@
+import React from "react"
+import "./BannerHead.scss"
+import MarkdownView from "react-showdown"
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
+
+const BannerHead = ({ data }) => {
+    const title = data?.title;
+
+    const checkImage = () => {
+
+        if (data?.image?.url) {
+            return <img src={data?.image?.url} alt={data?.image?.name} />
+        } else {
+            const image = getImage(data?.image?.localFile)
+            return <GatsbyImage image={image} alt={`img-${title}`}></GatsbyImage>
+        }
+    }
+
+    return (
+        <div class="banner d-flex justify-content-center">
+            <div class="banner__image">
+                {checkImage()}
+            </div>
+
+            {title && (
+                <MarkdownView markdown={title} />
+            )}
+        </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/BlogPage/BlogContainer.js

@@ -3,7 +3,7 @@ import { useBlog } from "../../hooks"
 import Layout from "../../components/layout"
 import BlogGrid from "./BlogGrid/BlogGrid"
 import BlogArticle from "./BlogArticle/BlogArticle"
-import { Seo, BannerActionCall } from "../index"
+import { Seo, BannerHead } from "../index"
 
 import "./BlogContainer.scss"
 
@@ -13,11 +13,10 @@ const Blog = () => {
 
   const data = blogData?.allStrapiBlogCategory?.nodes
   const dataArticles = blogData?.allStrapiArticle?.nodes
-  const bannerActionCall = blogData?.allStrapiBlogPage?.nodes[0]?.actionCallBanner
-  const title = blogData?.allStrapiBlogPage?.nodes[0]?.title
-
+  const bannerHead = blogData?.allStrapiBlogPage?.nodes[0]?.bannerHead
   const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name))
 
+  console.log(bannerHead)
   const {
     pageTitle,
     pageDescription,
@@ -35,12 +34,9 @@ const Blog = () => {
       )}
       {data.length > 0 && (
         <div className="blog__container">
-          {title && (
-            <div className="banner__container">
-              <h3 dangerouslySetInnerHTML={{ __html: title }} />
-            </div>
-          )}
-
+
+          {bannerHead && <BannerHead data={bannerHead} />}
+
           {filterArticle?.map((category, idx) => (
             <BlogGrid key={idx} title={category[0]?.blog_category?.name}>
               {category.map((item, idx) => (
@@ -57,8 +53,6 @@ const Blog = () => {
           ))}
         </div>
       )}
-
-      {bannerActionCall && <BannerActionCall banner={bannerActionCall} />}
     </Layout>
   )
 }

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/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: () => <Dropdown sections={null} />,
-    },
     {
       title: "Blog",
       slug: "blog",

src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss

@@ -4,7 +4,6 @@
     &-section {
       padding: 28px;
       position: relative;
-      z-index: 10;
     }
     &-link {
       font-size: 18px;

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;

src/components/index.js

@@ -5,13 +5,12 @@ import BannerLogo from "./Banners/BannerLogo"
 import BannerISO from "./Banners/BannerISO"
 import BannerClientes from "./Banners/BannerClientes"
 import BannerTop from "./Banners/BannerTop"
-import BannerActionCall from "./Banners/BannerActionCall"
+import BannerHead from "./BannerHead/BannerHead"
 import CasesSection from "./CasesSection/CasesSection"
 import CasesList from "./CasesSection/CasesList"
-import JobsPage from "./JobsPage/JobsPage"
+
 
 export {
-  JobsPage,
   Cards,
   CasesList,
   CasesSection,
@@ -21,5 +20,5 @@ export {
   BannerISO,
   BannerClientes,
   BannerTop,
-  BannerActionCall,
+  BannerHead
 }

src/hooks/useBlog.js

@@ -27,33 +27,21 @@ const useBlog = () => {
       }
       allStrapiBlogPage {
         nodes {
-          title
           seo: pageMetadata {
             pageTitle
             pageKeywords
             pageDescription
           }
-          actionCallBanner {
+          bannerHead {
             title
-            link {
-              name
-              pathTo
-            }
             image {
               localFile {
                 childImageSharp {
                   gatsbyImageData
                 }
               }
             }
-            imageDarkMode {
-              localFile {
-                childImageSharp {
-                  gatsbyImageData
-                }
-              }
-            }
-          }
+          }          
         }
       }
     }