diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index aec32ab1..40a60424 100644 --- a/src/components/Banner/Banner.js +++ b/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 ( -
+
- {variant === 'hero' ?

{title}

:

{title}

} -

{summary}

+ {variant === "hero" ?

{title}

:

{title}

} + {/*

{summary}

*/} + {button && (button?.landing_page ? ( @@ -34,15 +42,15 @@ const Banner = ({ data }) => { ))}
- -
+ +
{/* {title} */} {title}
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index 45fca86c..e1b3d2a0 100644 --- a/src/components/Banner/Banner.scss +++ b/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; diff --git a/src/components/BlogPage/BlogArticle/BlogArticle.scss b/src/components/BlogPage/BlogArticle/BlogArticle.scss index 4c7b731d..c89d0f70 100644 --- a/src/components/BlogPage/BlogArticle/BlogArticle.scss +++ b/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; diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js index ed54c4d9..410704e5 100644 --- a/src/components/BlogPage/BlogContainer.js +++ b/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 && ( -
+
- + {banner && } {filterArticle?.map((category, idx) => ( diff --git a/src/components/BlogPage/BlogContainer.scss b/src/components/BlogPage/BlogContainer.scss index 3dcc8221..5b1bc6fd 100644 --- a/src/components/BlogPage/BlogContainer.scss +++ b/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 { diff --git a/src/hooks/useBlog.js b/src/hooks/useBlog.js index a940b8bf..d9642075 100644 --- a/src/hooks/useBlog.js +++ b/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 + } + } } } }