SBIT-96: featured blog

src/components/BlogPage/BlogArticle/BlogArticle.js

@@ -8,11 +8,15 @@ import "./BlogArticle.scss"
 const BlogArticle = ({ title, summary, image, slug, text }) => {
   return (
     <div className="article__container">
-      <GatsbyImage
-        image={getImage(image?.localFile)}
-        alt={title}
-        className="article__image"
-      />
+      {image?.localFile ? (
+        <GatsbyImage
+          image={getImage(image?.localFile)}
+          alt={title}
+          className="article__image"
+        />
+      ) : (
+        <img src={image?.url} alt={title} className="article__image" />
+      )}
       <div className="article__description">
         <h6>{`${title} ...`}</h6>
         <div>

src/components/BlogPage/BlogArticle/BlogArticle.scss

@@ -1,5 +1,6 @@
 @import "../../../styles/global.scss";
 .article {
+  color: $primary;
   &__container {
     display: flex;
     justify-content: center;
@@ -21,7 +22,6 @@
     width: 100%;
     height: 150px;
     padding: 0 15px;
-    color: $black;
     h1,
     h2,
     h3,
@@ -32,7 +32,6 @@
       font-size: 15px !important;
       margin-bottom: 15px;
       line-height: 1rem;
-      color: $black;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;

src/components/FeaturedBlogs/FeaturedBlogs.js

@@ -0,0 +1,28 @@
+import React from "react"
+
+import "./featuredBlogs.scss"
+import BlogArticle from "../BlogPage/BlogArticle/BlogArticle"
+
+const FeaturedBlogs = ({ data }) => {
+  return (
+    <div className="contaner featured" id={data.strapi_component + "-" + data.id}>
+      <h2>{data.title}</h2>
+      <h6 className="px-5">{data.subtitle}</h6>
+
+      <div className="featured-blogs">
+        {data.articles.slice(0, 3).map((item, idx) => (
+          <BlogArticle
+            key={idx}
+            image={item.image}
+            title={item.title}
+            summary={item.summary}
+            slug={"/blog/" + item.slug}
+            text="Ver más"
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default FeaturedBlogs

src/components/FeaturedBlogs/featuredBlogs.scss

@@ -0,0 +1,27 @@
+@import "../../styles/global.scss";
+
+.featured {
+    color: $primary;
+  h2 {
+    flex-grow: 1;
+    text-align: center;
+    font-weight: 700;
+  }
+  h6 {
+    text-align: center;
+    line-height: 30px;
+    font-weight: 400;
+  }
+
+  &-blogs {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    & > * {
+      flex-basis: 33%;
+    }
+    @media screen and (max-width: $breakpoint-lg) {
+      flex-direction: column;
+    }
+  }
+}

src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js

@@ -14,13 +14,13 @@ const getComponentTitle = component => {
     "components.cases-section": () => component.title,
     "home.quote": () => component.title,
     "home.video-background": () => component.title,
+    "components.featured-blogs": () => component.title,
     "home.dual-section": () =>
       component.dualSectionPart.map(section => section.title).join(" - "),
   }
   return (
-    (titleReference[component.strapi_component] &&
-      titleReference[component.strapi_component]()) ||
-    "Titulo no definido"
+    titleReference[component.strapi_component] &&
+    titleReference[component.strapi_component]()
   )
 }
 

src/components/index.js

@@ -15,7 +15,7 @@ import DualSection from "./DualSection/DualSection"
 import AnimatedTransitionContinous from "./animatedTransitionContinous/AnimatedTransitionContinous"
 import BannerTop from "./Banners/BannerTop"
 import BannerHead from "./BannerHead/BannerHead";
-
+import FeaturedBlogs from './FeaturedBlogs/FeaturedBlogs'
 
 export {
   Cards,
@@ -34,5 +34,6 @@ export {
   DualSection,
   AnimatedTransitionContinous,
   BannerTop,
-  BannerHead
+  BannerHead,
+  FeaturedBlogs
 }

src/templates/LandingPage.js

@@ -17,12 +17,12 @@ import {
   AnimatedTransitionContinous,
   DualSection,
   OneSection,
-  Quote
+  Quote,
+  FeaturedBlogs
 } from "../components"
 
 import VideoBackground from "../components/videoBackground/VideoBackground"
 
-
 const LandingPage = ({ data, location }) => {
   const pageData = data?.allStrapiLandingPage?.nodes[0]
   const content = pageData.body.map((component, idx) => {
@@ -88,11 +88,16 @@ const LandingPage = ({ data, location }) => {
         <AnimatedTransitionContinous data={component} />
       ) : null
 
-      const videoBackground =
+    const videoBackground =
       component.strapi_component === "home.video-background" ? (
         <VideoBackground data={component} />
       ) : null
 
+      const featuredBlogs =
+      component.strapi_component === "components.featured-blogs" ? (
+        <FeaturedBlogs data={component} />
+      ) : null
+
     return (
       <div key={idx}>
         <>
@@ -109,6 +114,7 @@ const LandingPage = ({ data, location }) => {
           {quote}
           {dualSection}
           {animatedTransition}
+          {featuredBlogs}
         </>
       </div>
     )