diff --git a/custom/react/Main.tsx b/custom/react/Main.tsx
new file mode 100644
index 0000000..ce523db
--- /dev/null
+++ b/custom/react/Main.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Main = () => {
+ return
Main
;
+};
+
+export default Main;
diff --git a/custom/store/interfaces.json b/custom/store/interfaces.json
index 0938c36..2c26755 100644
--- a/custom/store/interfaces.json
+++ b/custom/store/interfaces.json
@@ -23,5 +23,8 @@
"content": {
"$ref": "app:agenciamagma.m3-custom#/definitions/DynamicMenu"
}
+ },
+ "main-academy": {
+ "component": "Main"
}
}
diff --git a/storefront/store/blocks/pages/home/home.jsonc b/storefront/store/blocks/pages/home/home.jsonc
index 328fb06..94c00cd 100644
--- a/storefront/store/blocks/pages/home/home.jsonc
+++ b/storefront/store/blocks/pages/home/home.jsonc
@@ -4,6 +4,8 @@
"list-context.image-list#demo",
"flex-layout.row#deals",
"__fold__",
+ "flex-layout.row#faixa-de-imagens",
+ "main-academy",
"rich-text#m3-shelf-title",
"flex-layout.row#m3-shelf",
"info-card#m3-middle-card",
@@ -15,6 +17,71 @@
// "challenge": "challenge.trade-policy-condition"
// }
},
+
+ "flex-layout.row#faixa-de-imagens": {
+ "props": {
+ "blockClass": "faixa-de-imagens"
+ },
+ "children": [
+ "image#imagem-1",
+ "flex-layout.col#image-meio",
+ "image#imagem-2"
+ ]
+
+ },
+
+ "flex-layout.col#image-meio": {
+ "props":{
+ "blockClass": "faixa-de-imagens"
+ },
+ "children": [
+ "image#imagem-3",
+ "flex-layout.col#conteudo-meio"
+ ]
+ },
+ "flex-layout.col#conteudo-meio": {
+ "children": [
+ "rich-text#text-meio",
+ "link#link-meio"
+ ],
+ "props": {
+ "blockClass": "conteudo-meio",
+ "preventVerticalStretch": "auto"
+ }
+ },
+
+ "rich-text#text-meio": {
+ "props":{
+ "text": "### Qual produto \n # ideal para vocĂȘ? \n lorem ipsum dolor sit amet, consecteur",
+ "blockClass": "texto-meio"
+ }
+ },
+
+ "link#link-meio": {
+ "props": {
+ "href": "/",
+ "label": "RESPONDA NOSSO QUIZ E DESCUBRA",
+ "blockClass": "link-meio"
+
+ }
+ },
+
+ "image#imagem-1":{
+ "props": {
+ "src": "assets/imgs/products.png"
+ }
+ },
+ "image#imagem-2":{
+ "props": {
+ "src": "assets/imgs/products.png"
+ }
+ },
+ "image#imagem-3":{
+ "props": {
+ "src": "assets/imgs/products.png"
+ }
+ },
+
"challenge.trade-policy-condition": {
"props": {
"redirectPath": "/registration",
diff --git a/storefront/styles/sass/pages/home/vtex.flex-layout.scss b/storefront/styles/sass/pages/home/vtex.flex-layout.scss
new file mode 100644
index 0000000..4c671e6
--- /dev/null
+++ b/storefront/styles/sass/pages/home/vtex.flex-layout.scss
@@ -0,0 +1,29 @@
+.flexRowContent--faixa-de-imagens {
+ margin-top: 5rem;
+
+ :global(.vtex-store-components-3-x-imageElement) {
+ height: 100%;
+ width: 100%;
+ }
+
+ .stretchChildrenWidth {
+ margin: 0 8px;
+ }
+}
+
+.flexColChild--faixa-de-imagens {
+ :global(.vtex-store-components-3-x-imageElement) {
+ filter: brightness(70%);
+ }
+}
+
+.flexCol--faixa-de-imagens {
+ position: relative;
+}
+
+.flexCol--conteudo-meio {
+ position: absolute;
+ inset: 0;
+
+ justify-content: center;
+}
diff --git a/storefront/styles/sass/pages/home/vtex.rich-text.scss b/storefront/styles/sass/pages/home/vtex.rich-text.scss
new file mode 100644
index 0000000..06d3c82
--- /dev/null
+++ b/storefront/styles/sass/pages/home/vtex.rich-text.scss
@@ -0,0 +1,32 @@
+.container--texto-meio {
+ justify-content: center;
+ color: #ffffff;
+ font-family: "Oxygen";
+}
+
+.wrapper--texto-meio {
+ width: 100%;
+ margin: 0 24px;
+}
+
+.headingLevel3--texto-meio,
+.headingLevel1--texto-meio,
+.paragraph--texto-meio {
+ margin: 0;
+}
+
+.headingLevel3--texto-meio {
+ font-size: 32px;
+ font-weight: 600;
+ letter-spacing: -0.05em;
+}
+.headingLevel1--texto-meio {
+ font-size: 46px;
+ font-weight: 600;
+ letter-spacing: -0.05em;
+}
+.paragraph--texto-meio {
+ font-size: 18px;
+ font-weight: 300;
+ letter-spacing: 0.05em;
+}
diff --git a/storefront/styles/sass/pages/home/vtex.store-link.scss b/storefront/styles/sass/pages/home/vtex.store-link.scss
new file mode 100644
index 0000000..8e75720
--- /dev/null
+++ b/storefront/styles/sass/pages/home/vtex.store-link.scss
@@ -0,0 +1,12 @@
+.link--link-meio {
+ color: #fff;
+ text-decoration: underline;
+ padding: 16px 22px;
+ background-color: #4e1d52;
+ border-radius: 30px;
+ margin: 2rem 24px;
+ display: block;
+ width: fit-content;
+ font-size: 14px;
+ letter-spacing: 0.05em;
+}