diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index 7d8b2d3..058633e 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -9,7 +9,8 @@ import CustomImage from "../CustomImage/CustomImage"
const Banner = ({ data }) => {
const { theme } = useTheme()
- const { title, variant, summary, animation, image, imageDark, button } = data
+ const { title, variant, summary, animation, image, imageDark, arrayButtons, button } = data
+
const defaultOptions = {
loop: true,
@@ -39,14 +40,27 @@ const Banner = ({ data }) => {
dangerouslySetInnerHTML={{ __html: summary }}
/>
}
- {button && (
-
+ {Array.isArray(arrayButtons) && arrayButtons.length > 0 && (
+
+ {arrayButtons.map((btn, index) => (
+
+ ))}
+
)}
+ {button && (
+
+ )}
@@ -81,6 +95,15 @@ Banner.propTypes = {
title: PropTypes.string.isRequired,
variant: PropTypes.string.isRequired,
summary: PropTypes.string,
+ arrayButtons: PropTypes.arrayOf(
+ PropTypes.shape({
+ content: PropTypes.string,
+ url: PropTypes.string,
+ english_landing_page: PropTypes.shape({
+ slug: PropTypes.string.isRequired,
+ }),
+ })
+ ),
button: PropTypes.shape({
content: PropTypes.string.isRequired,
url: PropTypes.string,
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index 5313508..4bb3726 100644
--- a/src/components/Banner/Banner.scss
+++ b/src/components/Banner/Banner.scss
@@ -170,6 +170,8 @@
&.diagonalReverse {
.banner__wrapper {
margin: 32px auto;
+ display: flex;
+ flex-direction: column;
}
.imagen {
@@ -184,13 +186,22 @@
}
}
+ .banner__buttons{
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ padding-top: 25px;
+ padding-right: 10px;
+ }
+
.button {
- margin-top: 20px;
- margin-bottom: 20px;
- display: inline-block;
- color: #607ee7;
- text-decoration: underline;
- padding-left: 5px;
+ color:$primary;
+
+ @include primaryBtn;
+ display: block;
+ width: max-content;
+ padding: 10px 15px;
+ margin-right: 20px;
}
.title {
@@ -356,9 +367,7 @@
}
}
- .button {
- padding-left: 5rem;
- }
+
.title {
display: flex;
diff --git a/src/hooks/useHomePage.js b/src/hooks/useHomePage.js
index db3a69f..648b59a 100644
--- a/src/hooks/useHomePage.js
+++ b/src/hooks/useHomePage.js
@@ -152,6 +152,14 @@ const useHomePage = () => {
slug
}
}
+ arrayButtons {
+ content
+
+ english_landing_page {
+ id
+ slug
+ }
+ }
backgroundImageDark {
url
}
diff --git a/src/schema/generalSchema.js b/src/schema/generalSchema.js
index 1aa7c23..8a68b42 100644
--- a/src/schema/generalSchema.js
+++ b/src/schema/generalSchema.js
@@ -96,7 +96,7 @@ const generalSchema = `
type ComponentButton {
id: Int
- content: String!
+ content: String
url: String
english_landing_page: StrapiEnglishLandingPage
}
@@ -196,6 +196,7 @@ const generalSchema = `
summary: String
image: LocalFile
button: ComponentButton
+ arrayButtons: [ComponentButton]
imageDark: LocalFile
animation: JSON
navTitle: String
diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js
index 9e5b589..944cbc5 100644
--- a/src/templates/LandingPage.js
+++ b/src/templates/LandingPage.js
@@ -234,6 +234,14 @@ export const query = graphql`
slug
}
}
+ arrayButtons {
+ content
+
+ english_landing_page {
+ id
+ slug
+ }
+ }
backgroundImageDark {
url
}