From 6e220c6be2d043ade0801ad5a5d4a09a6ae10477 Mon Sep 17 00:00:00 2001
From: Drina_Rincon <drina.rincon@bitlogic.io>
Date: Thu, 19 May 2022 11:44:23 -0300
Subject: [PATCH 1/2] Agregar a blog Page en landing y ajustar estilos

---
 .../BlogPage/BlogArticle/BlogArticle.js       |  2 +-
 .../BlogPage/BlogArticle/BlogArticle.scss     | 20 ++++++-------
 src/components/BlogPage/BlogContainer.js      | 24 ++--------------
 src/components/BlogPage/BlogGrid/BlogGrid.js  |  2 +-
 .../BlogPage/BlogGrid/BlogGrid.scss           | 14 ++++------
 src/components/Pagination/Pagination.scss     |  3 +-
 src/context/themeContext.js                   |  5 ++--
 src/styles/global.scss                        | 11 ++++----
 src/templates/LandingPage.js                  | 28 +++++++++++++------
 9 files changed, 48 insertions(+), 61 deletions(-)

diff --git a/src/components/BlogPage/BlogArticle/BlogArticle.js b/src/components/BlogPage/BlogArticle/BlogArticle.js
index d0e27644..ed5ade0c 100644
--- a/src/components/BlogPage/BlogArticle/BlogArticle.js
+++ b/src/components/BlogPage/BlogArticle/BlogArticle.js
@@ -25,7 +25,7 @@ const BlogArticle = ({ title, summary, image, slug, text }) => {
         </div>
         <div className="article__link">
           <Link to={slug}>
-            <button>{text}</button>
+            <small>{text}</small>
           </Link>
         </div>
       </div>
diff --git a/src/components/BlogPage/BlogArticle/BlogArticle.scss b/src/components/BlogPage/BlogArticle/BlogArticle.scss
index 22da4ecc..e676ae7e 100644
--- a/src/components/BlogPage/BlogArticle/BlogArticle.scss
+++ b/src/components/BlogPage/BlogArticle/BlogArticle.scss
@@ -9,14 +9,12 @@
     padding: 0.5em;
     color: $primary;
   }
-
   &__image {
     width: 100%;
     height: 170px;
     transition: opacity 3s ease-in;
     border-radius: 8px;
   }
-
   &__description {
     // display: flex;
     // flex-direction: column;
@@ -38,9 +36,8 @@
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
-      overflow: hidden; 
+      overflow: hidden;
     }
-
     p {
       margin-bottom: 15px;
       line-height: 24px;
@@ -50,21 +47,19 @@
       overflow: hidden;
     }
   }
-
   &__link {
     position: absolute;
-    bottom: 0;
+    bottom: 15px;
     a {
       margin-right: 0;
       font-weight: $max_bold;
       cursor: pointer;
-      button {
-        @include primaryBtn;
-      }
+      text-decoration-line: underline;
+      color: $link-blog;
+      font-size: $small;
     }
   }
 }
-
 @media (min-width: $breakpoint-md) {
   .article {
     &__description {
@@ -73,15 +68,16 @@
         line-height: 1.3rem;
       }
     }
+    &__link {
+      bottom: 0;
+    }
   }
 }
-
 @media (min-width: $breakpoint-lg) {
   .article {
     &__container {
       flex-direction: column;
       padding: 1rem;
-      
     }
 
     &__image {
diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js
index 410704e5..0694162f 100644
--- a/src/components/BlogPage/BlogContainer.js
+++ b/src/components/BlogPage/BlogContainer.js
@@ -1,41 +1,21 @@
 import React from "react"
 import { useBlog } from "../../hooks"
-import Layout from "../../components/layout"
 import BlogGrid from "./BlogGrid/BlogGrid"
 import BlogArticle from "./BlogArticle/BlogArticle"
-import { Seo, Banner} from "../index"
 
 import "./BlogContainer.scss"
 
 const Blog = () => {
 
   const blogData = useBlog()
-
   const data = blogData?.allStrapiBlogCategory?.nodes
   const dataArticles = blogData?.allStrapiArticle?.nodes
-  const banner = blogData?.allStrapiBlogPage?.nodes[0]?.banner
   const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name))
 
-  const {
-    pageTitle,
-    pageDescription,
-    pageKeywords,
-  } = blogData?.allStrapiBlogPage?.nodes[0]?.seo
-
   return (
-    <Layout>
-      {blogData?.allStrapiBlogPage?.nodes[0]?.seo && (
-        <Seo
-          title={pageTitle}
-          description={pageDescription}
-          keywords={pageKeywords}
-        />
-      )}
+    <>
       {data.length > 0 && (
         <div className="blog__container container">
-
-          {banner && <Banner data={banner} />}
-
           {filterArticle?.map((category, idx) => (
             <BlogGrid key={idx} title={category[0]?.blog_category?.name}>
               {category.map((item, idx) => (
@@ -52,7 +32,7 @@ const Blog = () => {
           ))}
         </div>
       )}
-    </Layout>
+    </>
   )
 }
 
diff --git a/src/components/BlogPage/BlogGrid/BlogGrid.js b/src/components/BlogPage/BlogGrid/BlogGrid.js
index 047c1b99..470ba478 100644
--- a/src/components/BlogPage/BlogGrid/BlogGrid.js
+++ b/src/components/BlogPage/BlogGrid/BlogGrid.js
@@ -5,7 +5,7 @@ import Pagination from '../../Pagination/Pagination'
 const BlogGrid = ({ title, children }) => {
   return (
     <div className="grid__container">
-      <h5>{title}</h5>
+      <h4>{title}</h4>
       {/* <div className="grid__content">{children}</div> */}
       <Pagination initialState={true} postPerPage="3" posts={children} />
     </div>
diff --git a/src/components/BlogPage/BlogGrid/BlogGrid.scss b/src/components/BlogPage/BlogGrid/BlogGrid.scss
index d23011d8..0e89a897 100644
--- a/src/components/BlogPage/BlogGrid/BlogGrid.scss
+++ b/src/components/BlogPage/BlogGrid/BlogGrid.scss
@@ -5,12 +5,11 @@
     flex-direction: column;
     justify-content: center;
     padding: 40px 0;
-    border-bottom: 4px solid $alt;
+    border-bottom: 4px solid #dedede;
 
-    h3 {
-      padding-left: 5px;
-      font-size: $medium;
-      color: $blackBit;
+    h4 {
+      padding-left: 0.5rem;
+      color: $primary;
     }
   }
 }
@@ -18,9 +17,8 @@
 @media (min-width: $breakpoint-lg) {
   .grid {
     &__container {
-      h3 {
-        padding-left: 35px;
-        font-size: $large;
+      h4 {
+        padding-left: 1rem;
       }
     }
 
diff --git a/src/components/Pagination/Pagination.scss b/src/components/Pagination/Pagination.scss
index 2140b7b6..501dc329 100644
--- a/src/components/Pagination/Pagination.scss
+++ b/src/components/Pagination/Pagination.scss
@@ -18,12 +18,11 @@
   }
   &__link {
     font-weight: $bold;
-    color: $primary;
+    color: $link-blog;
     padding: 0.2rem;
 
     &:hover {
       text-decoration: none;
-      color: $blue;
     }
   }
 }
diff --git a/src/context/themeContext.js b/src/context/themeContext.js
index d75a07df..f65c7558 100644
--- a/src/context/themeContext.js
+++ b/src/context/themeContext.js
@@ -16,7 +16,8 @@ const themes = {
     "--border-bottom": "#cdcdcd",
     "--bg-form": "#DBDBDD",
     "--bg-diagonal": "#f2f0f7",
-    "--summary-color": "rgba(0, 0, 0, 0.5)"
+    "--summary-color": "rgba(0, 0, 0, 0.5)",
+    "--link-blog": "#0621E0"
   },
   dark: {
     "--nav-footer-container": "#383838",
@@ -35,7 +36,7 @@ const themes = {
     "--bg-form": "#FAF8F8",
     "--bg-diagonal": "#4A494B",
     "--summary-color": "#ffffff",
-
+    "--link-blog": "#BBB3EC"
   },
 }
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index e1a9c647..47eddbea 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -21,6 +21,7 @@ $title-jobs: var(--title-jobs);
 $jobs-hover: var(--jobs-hover);
 $bg-form: var(--bg-form);
 $bg-diagonal: var(--bg-diagonal);
+$link-blog: var(--link-blog);
 
 $summary-color: var(--summary-color);
 
@@ -51,15 +52,15 @@ a {
 /* Colors */
 $black: #2a2c2e;
 $white: #ffffff;
-$yellow: #67F293;
-$blue: #3F6BE8;
+$yellow: #67f293;
+$blue: #3f6be8;
 $grey-light: #f5f5f5;
 //new colors
 $grey: #545468;
 $light-grey: #c4c4c4;
 $alt: #67f293;
 $blackBit: #242424;
-$grey-light-bg: #FAF8F8;
+$grey-light-bg: #faf8f8;
 /* Sizes */
 $small: 15px;
 $medium: 20px;
@@ -102,8 +103,8 @@ $extra-large: 45px;
   transition: filter 200ms ease-in;
   &:hover {
     color: white;
-    background-color: #7D7D92;
-    border: 1px solid #7D7D92;
+    background-color: #7d7d92;
+    border: 1px solid #7d7d92;
   }
   &:active {
     background-color: $grey;
diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js
index c15fc02b..d163fb0a 100644
--- a/src/templates/LandingPage.js
+++ b/src/templates/LandingPage.js
@@ -1,6 +1,7 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
+import BlogContainer from '../components/BlogPage/BlogContainer'
 
 // componentes del body
 import {
@@ -19,7 +20,7 @@ import {
   OneSection,
   Quote,
   Professionals,
-  FeaturedBlogs
+  FeaturedBlogs,
 } from "../components"
 
 import VideoBackground from "../components/videoBackground/VideoBackground"
@@ -39,13 +40,13 @@ const LandingPage = ({ data, location }) => {
 
     const casesSection =
       component.strapi_component === "components.cases-section" &&
-      !component.allCases ? (
+        !component.allCases ? (
         <CasesSection data={component} />
       ) : null
 
     const casesList =
       component.strapi_component === "components.cases-section" &&
-      component.allCases ? (
+        component.allCases ? (
         <CasesList />
       ) : null
 
@@ -58,14 +59,17 @@ const LandingPage = ({ data, location }) => {
       component.strapi_component === "components.text" ? (
         <Text data={component} />
       ) : null
+
     const logosSection =
       component.strapi_component === "components.logos-section" ? (
         <LogosSection data={component} />
       ) : null
+
     const form =
       component.strapi_component === "components.form" ? (
         <Form data={component} location={location} />
       ) : null
+
     const banner =
       component.strapi_component === "components.banner" ? (
         <Banner data={component} />
@@ -94,16 +98,23 @@ const LandingPage = ({ data, location }) => {
         <VideoBackground data={component} />
       ) : null
 
-      const professionals =
+    const professionals =
       component.strapi_component === "components.professionals-section" ? (
         <Professionals data={component} />
-        ) : null
-        
-      const featuredBlogs =
-      component.strapi_component === "components.featured-blogs" ? (
+      ) : null
+
+    const featuredBlogs =
+      component.strapi_component === "components.featured-blogs" && !component.allBlog ? (
         <FeaturedBlogs data={component} />
       ) : null
 
+    const blogContainer =
+      component.strapi_component === "components.featured-blogs" &&
+        component.allBlog ? (
+        <BlogContainer />
+      ) : null
+
+
     return (
       <div key={idx}>
         <>
@@ -122,6 +133,7 @@ const LandingPage = ({ data, location }) => {
           {animatedTransition}
           {professionals}
           {featuredBlogs}
+          {blogContainer}
         </>
       </div>
     )

From e8b4cefef930c16ed2b2f3c3520dfcf35e933bc9 Mon Sep 17 00:00:00 2001
From: Drina_Rincon <drina.rincon@bitlogic.io>
Date: Fri, 20 May 2022 10:10:47 -0300
Subject: [PATCH 2/2] Agregar por defecto una categoria, arreglar algunos
 padding

---
 src/components/BannerList/BannerList.js           | 14 +++++++-------
 src/components/BlogPage/BlogContainer.js          |  3 ++-
 src/components/Pagination/Pagination.scss         |  1 +
 src/components/expandGrid/ExpandGrid.js           | 11 +++++------
 src/components/videoBackground/VideoBackground.js |  2 +-
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/BannerList/BannerList.js b/src/components/BannerList/BannerList.js
index 27f3a3ce..ae176460 100644
--- a/src/components/BannerList/BannerList.js
+++ b/src/components/BannerList/BannerList.js
@@ -32,7 +32,7 @@ export default function BannerList({ data }) {
   })
 
   return (
-    <div className="container py-4" id={data.strapi_component + "-" + data.id}>
+    <div className="container pt-5" id={data.strapi_component + "-" + data.id}>
       <div className="bannerList d-md-flex flex-row">
         <h1 className="bannerList__title col-md-6 col-xl-6 align-self-center mb-4">
           {title}
@@ -43,14 +43,14 @@ export default function BannerList({ data }) {
           )}
         </h1>
         <div className="bannerList__cards col-md-6 col-xl-6">{cards}
-        
+
         </div>
         {data.contactForm && (
-            <button className="bannerList__buttonMobile">
-              <a href={"#" + data.concactFormAnchor}>Contáctanos</a>
-            </button>
-          )}
-        
+          <button className="bannerList__buttonMobile">
+            <a href={"#" + data.concactFormAnchor}>Contáctanos</a>
+          </button>
+        )}
+
       </div>
     </div>
   )
diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js
index 0694162f..f133b9e8 100644
--- a/src/components/BlogPage/BlogContainer.js
+++ b/src/components/BlogPage/BlogContainer.js
@@ -10,7 +10,8 @@ const Blog = () => {
   const blogData = useBlog()
   const data = blogData?.allStrapiBlogCategory?.nodes
   const dataArticles = blogData?.allStrapiArticle?.nodes
-  const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name))
+  const defaultCategory = data[0]?.name
+  const filterArticle = data.map(category => dataArticles.filter(article => category.name === article?.blog_category?.name || defaultCategory))
 
   return (
     <>
diff --git a/src/components/Pagination/Pagination.scss b/src/components/Pagination/Pagination.scss
index 501dc329..15704170 100644
--- a/src/components/Pagination/Pagination.scss
+++ b/src/components/Pagination/Pagination.scss
@@ -23,6 +23,7 @@
 
     &:hover {
       text-decoration: none;
+      color: $link-blog;
     }
   }
 }
diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index 02a05db5..67ab2b8f 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -15,15 +15,14 @@ const ExpandGrid = ({ data }) => {
     <div
       className="expandGrid-background"
       style={{
-        backgroundImage: `url(${
-          theme === "dark" && backgroundImageDark
-            ? "http://localhost:1337" + backgroundImageDark
-            : "http://localhost:1337" + backgroundImage
-        })`,
+        backgroundImage: `url(${theme === "dark" && backgroundImageDark
+          ? "http://localhost:1337" + backgroundImageDark
+          : "http://localhost:1337" + backgroundImage
+          })`,
       }}
     >
       <div
-        className="p-3 mx-auto sm:mx-3 py-5 container"
+        className="mx-auto sm:mx-3 pb-5 container"
         id={data.strapi_component + "-" + data.id}
       >
         <section className="expandGrid">
diff --git a/src/components/videoBackground/VideoBackground.js b/src/components/videoBackground/VideoBackground.js
index 75aa9a03..a97c2534 100644
--- a/src/components/videoBackground/VideoBackground.js
+++ b/src/components/videoBackground/VideoBackground.js
@@ -43,7 +43,7 @@ const VideoBackground = ({
 
   return (
     <div
-      className={`${backgroundImage && "pt-5"} pb-3`}
+      className={`${backgroundImage && "pt-5 pb-3"}`}
       style={{
         backgroundImage: `url(${backgroundImage?.url})`, backgroundRepeatY: 'no-repeat',
       }}