Sbit 95

src/components/Banner/Banner.js

@@ -1,8 +1,10 @@
 import React from "react"
 import { Link } from "gatsby"
-import "./Banner.scss"
+import ReactMarkdown from "react-markdown"
 import { useTheme } from "../../context/themeContext"
 
+import "./Banner.scss"
+
 const Banner = ({ data }) => {
   const { theme } = useTheme()
   const title = data?.title
@@ -11,12 +13,18 @@ const Banner = ({ data }) => {
   const image = data?.image
   const imageDark = data?.imageDark
   const button = data?.button
+  const diagonalReverseState =
+    variant === "diagonalReverse" ? "col-md-4" : "col-md-6"
   return (
-    <div className={`banner ${variant}`} id={data.strapi_component + "-" + data.id}>
+    <div
+      className={`banner ${variant}`}
+      id={data.strapi_component + "-" + data.id}
+    >
       <div className="title container-md">
         <div className="col-12 col-lg-6">
-          {variant === 'hero' ? <h1>{title}</h1> : <h2>{title}</h2>}
-          <h3>{summary}</h3>
+          {variant === "hero" ? <h1>{title}</h1> : <h2>{title}</h2>}
+          {/* <h3>{summary}</h3> */}
+          <ReactMarkdown source={summary} className="banner-markdown" />
           {button &&
             (button?.landing_page ? (
               <Link to={`../${button.landing_page.slug}`} className="button">
@@ -34,15 +42,15 @@ const Banner = ({ data }) => {
             ))}
         </div>
       </div>
-
-      <div className={`imagen col-12 ${variant === 'diagonal' ? 'col-md-8' : variant === 'diagonalReverse' ? 'col-md-4' : 'col-md-6'} `}>
+
+      <div
+        className={`imagen col-12 ${
+          variant === "diagonal" ? "col-md-8" : diagonalReverseState
+        } `}
+      >
         {/* <img src={image?.url} alt={title} /> */}
         <img
-          src={
-            theme === "dark" && imageDark
-              ? imageDark?.url
-              : image?.url
-          }
+          src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
           alt={title}
         />
       </div>

src/components/Banner/Banner.scss

@@ -170,6 +170,23 @@
   .gatsby-image-wrapper {
     display: block;
   }
+  .banner-markdown{
+    font-size: 30px;
+    h1,h2,h3,h4,h5,h6{
+      font-size: 32px;
+      font-weight: 600;
+      margin-bottom: 0;
+    }
+    p , a, span, small, li, i, em{
+      span, strong, small, i, b, em {
+        font-size: 30px;
+      }
+      font-size: 30px;
+    }
+    strong, b {
+      font-weight: 600;
+    }
+  }
 
   @media screen and (min-width: $breakpoint-md) {
     flex-direction: row;

src/components/BlogPage/BlogArticle/BlogArticle.scss

@@ -7,12 +7,14 @@
     align-items: center;
     width: 100%;
     padding: 1.5rem 0;
+    color: $primary;
   }
 
   &__image {
     width: 100%;
     height: 150px;
     transition: opacity 3s ease-in;
+    border-radius: 8px;
   }
 
   &__description {
@@ -96,8 +98,7 @@
         -webkit-line-clamp: 2;
       }
 
-      p,
-      a {
+      p {
         font-size: 18px;
         line-height: 30px;
 

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 } from "../index"
+import { Seo, Banner} from "../index"
 
 import "./BlogContainer.scss"
 
@@ -13,6 +13,7 @@ const Blog = () => {
 
   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 {
@@ -31,9 +32,9 @@ const Blog = () => {
         />
       )}
       {data.length > 0 && (
-        <div className="blog__container">
+        <div className="blog__container container">
 
-
+          {banner && <Banner data={banner} />}
 
           {filterArticle?.map((category, idx) => (
             <BlogGrid key={idx} title={category[0]?.blog_category?.name}>

src/components/BlogPage/BlogContainer.scss

@@ -3,7 +3,7 @@
 .blog__container {
   width: 100%;
   padding: 5px 15px 60px;
-  margin-bottom: 45px;
+  margin-bottom: 0px;
 }
 
 .banner__container {
@@ -13,7 +13,7 @@
   width: 100%;
   height: 190px;
   text-align: center;
-  border-bottom: 4px solid$alt;
+  border-bottom: 4px solid $alt;
 
   h3 {
     margin-bottom: 0;
@@ -56,9 +56,6 @@
 }
 
 @media (min-width: $breakpoint-lg) {
-  .blog__container {
-    margin-bottom: 85px;
-  }
 
   .banner__container {
     h3 {

src/hooks/useBlog.js

@@ -33,7 +33,25 @@ const useBlog = () => {
             pageKeywords
             pageDescription
           }
-
+          banner {
+            id
+            title
+            variant
+            summary
+            button {
+              content
+              id
+              url
+              landing_page {
+                name
+                slug
+                id
+              }
+            }
+            image {
+              url
+            }
+          }
         }
       }
     }