diff --git a/storefront/assets/imgs/img1.jpg b/storefront/assets/imgs/img1.jpg new file mode 100644 index 0000000..c813c28 Binary files /dev/null and b/storefront/assets/imgs/img1.jpg differ diff --git a/storefront/assets/imgs/img2.jpg b/storefront/assets/imgs/img2.jpg new file mode 100644 index 0000000..afc8a80 Binary files /dev/null and b/storefront/assets/imgs/img2.jpg differ diff --git a/storefront/assets/imgs/img3.jpg b/storefront/assets/imgs/img3.jpg new file mode 100644 index 0000000..ac36c1d Binary files /dev/null and b/storefront/assets/imgs/img3.jpg differ diff --git a/storefront/store/blocks/pages/home/home.jsonc b/storefront/store/blocks/pages/home/home.jsonc index 328fb06..9089442 100644 --- a/storefront/store/blocks/pages/home/home.jsonc +++ b/storefront/store/blocks/pages/home/home.jsonc @@ -4,6 +4,7 @@ "list-context.image-list#demo", "flex-layout.row#deals", "__fold__", + "flex-layout.row#faixa-de-imagens", "rich-text#m3-shelf-title", "flex-layout.row#m3-shelf", "info-card#m3-middle-card", @@ -15,6 +16,72 @@ // "challenge": "challenge.trade-policy-condition" // } }, + + "flex-layout.row#faixa-de-imagens": { + "props": { + "blockClass": "faixa-de-imagens" + }, + "children": [ + "image#imagem-1", + "flex-layout.col#middle-image", + "image#imagem-3" + ] + }, + + "flex-layout.col#middle-image": { + "props": { + "blockClass": "faixa-de-imagens" + }, + "children": [ + "image#imagem-2", + "flex-layout.col#conteudo-meio" + ] + }, + + "flex-layout.col#conteudo-meio": { + "children": [ + "rich-text#texto-meio", + "link#link-meio" + ], + "props": { + "blockClass": "conteudo-meio", + "preventVerticalStretch": "auto" + } + }, + + "rich-text#texto-meio": { + "props": { + "text": "### Qual dieta é a melhor\n # pra você?\n Tenha uma vida saudável!", + "blockClass": "texto-meio" + } + }, + + "link#link-meio": { + "props": { + "href": "/", + "label": "Responda Nosso Quiz e Descubra", + "blockClass": "link-meio" + } + }, + + "image#imagem-1": { + "props": { + "src":"assets/imgs/img1.jpg" + } + }, + + "image#imagem-2": { + "props": { + "src":"assets/imgs/img2.jpg" + } + }, + + "image#imagem-3": { + "props": { + "src":"assets/imgs/img3.jpg" + } + }, + "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..5b30e73 --- /dev/null +++ b/storefront/styles/sass/pages/home/vtex.flex-layout.scss @@ -0,0 +1,23 @@ +.flexRow--faixa-de-imagens { + margin-top: 5rem; + + :global(.vtex-store-components-3-x-imageElement) { + height: 100%; + width: 100%; + } + + .stretchChildrenWidth { + margin: 0 8px; + } +} + +.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..135f470 --- /dev/null +++ b/storefront/styles/sass/pages/home/vtex.rich-text.scss @@ -0,0 +1,34 @@ +.container--texto-meio { + justify-content: center; + font-family: "Roboto", sans-serif; + color: black; +} + +.headingLevel3--texto-meio, +.headingLevel1--texto-meio, +.paragraph--texto-meio { + margin: 0; +} + +.headingLevel3--texto-meio { + font-size: 24px; + font-weight: 600; + letter-spacing: -0.05em; +} + +.headingLevel1--texto-meio { + font-size: 42px; + font-weight: 600; + letter-spacing: -0.05em; +} + +.paragraph--texto-meio { + font-size: 16px; + font-weight: 300; + letter-spacing: 0.05em; +} + +.wrapper--texto-meio { + width: 100%; + margin: 0 24px; +} 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..f6bbce4 --- /dev/null +++ b/storefront/styles/sass/pages/home/vtex.store-link.scss @@ -0,0 +1,11 @@ +.link--link-meio { + padding: 16px 22px; + background-color: #c70042; + color: white; + border-radius: 30px; + display: block; + width: fit-content; + margin: 2rem 24px; + letter-spacing: 0.05em; + font-size: 14px; +} diff --git a/yarn.lock b/yarn.lock index c6dc322..922fc23 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,13 +2,6 @@ # yarn lockfile v1 -"@agenciam3/pkg@^1.1.13": - version "1.1.13" - resolved "https://gitlab.com/api/v4/projects/21631951/packages/npm/@agenciam3/pkg/-/@agenciam3/pkg-1.1.13.tgz#1e5c0e831d325f46bfbfd65e3347949b6be69c5d" - integrity sha1-HlwOgx0yX0a/v9ZeM0eUm2vmnF0= - dependencies: - "@types/jquery" "^3.5.1" - "@babel/code-frame@7.12.11": version "7.12.11" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f" @@ -2041,13 +2034,6 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83" integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw== -"@types/jquery@^3.5.1": - version "3.5.6" - resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.6.tgz#97ac8e36dccd8ad8ed3f3f3b48933614d9fd8cf0" - integrity sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg== - dependencies: - "@types/sizzle" "*" - "@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8": version "7.0.9" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d" @@ -2083,11 +2069,6 @@ resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== -"@types/sizzle@*": - version "2.3.3" - resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef" - integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ== - "@typescript-eslint/eslint-plugin@^2.17.0": version "2.34.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9" @@ -6687,6 +6668,11 @@ lru-queue@^0.1.0: dependencies: es5-ext "~0.10.2" +m3-utils@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/m3-utils/-/m3-utils-0.1.0.tgz#0e0ebe1a108263ab23ce53bdee8beab5a1a0e4a8" + integrity sha512-N8bdQwPBeiTnOIzWKweN4rI683Lmm/xbXpfy1PqQLjqIZZcgh1eidq9Spab1RogK3DPQ9hlmvAyl4wGW6rmJmQ== + make-dir@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"