- {variant === 'hero' ?
{title}
: {title}
}
- {summary}
+ {variant === "hero" ? {title}
: {title}
}
+ {/* {summary}
*/}
+
{button &&
(button?.landing_page ? (
@@ -34,15 +42,15 @@ const Banner = ({ data }) => {
))}
+
+
{/*

*/}
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
+ }
+ }
}
}
}