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; +}