bitlogic · marino-martin · May 19, 2022 · May 19, 2022
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -5,22 +5,20 @@
     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;
     }
   }
 }
 
 @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
@@ -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
@@ -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
@@ -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
@@ -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>
     )