From 39f8d27343a8dfa60f34a7decf67d923034fe918 Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Fri, 27 Jan 2023 22:15:01 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Cria=C3=A7=C3=A3o=20footer=20todas=20as?= =?UTF-8?q?=20telas=20finalizada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/descont-pix/index.tsx | 2 +- store/blocks/footer/footer.json | 327 ++++++++++++++++-- store/blocks/footer/menu.json | 245 ++++++++----- styles/css/vtex.flex-layout.css | 245 +++++++++++++ styles/css/vtex.menu.css | 73 ++++ styles/css/vtex.rich-text.css | 59 ++++ styles/css/vtex.store-components.css | 5 + styles/css/vtex.store-footer.css | 23 +- .../sass/pages/footer/vtex.flex-layout.scss | 304 ++++++++++++++++ styles/sass/pages/footer/vtex.menu.scss | 96 +++++ styles/sass/pages/footer/vtex.rich-text.scss | 68 ++++ .../pages/footer/vtex.store-components.scss | 7 + .../sass/pages/footer/vtex.store-footer.scss | 11 + 13 files changed, 1356 insertions(+), 109 deletions(-) create mode 100644 styles/sass/pages/footer/vtex.flex-layout.scss create mode 100644 styles/sass/pages/footer/vtex.menu.scss create mode 100644 styles/sass/pages/footer/vtex.rich-text.scss create mode 100644 styles/sass/pages/footer/vtex.store-components.scss create mode 100644 styles/sass/pages/footer/vtex.store-footer.scss diff --git a/react/components/descont-pix/index.tsx b/react/components/descont-pix/index.tsx index d78e7a3..a8a7671 100644 --- a/react/components/descont-pix/index.tsx +++ b/react/components/descont-pix/index.tsx @@ -34,7 +34,7 @@ export const DescontPix: FC = () => { // fetchApi(); - let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice); + let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.lowPrice); sellingPrice = (sellingPrice - (sellingPrice/10)); diff --git a/store/blocks/footer/footer.json b/store/blocks/footer/footer.json index c05ac0f..49081c0 100644 --- a/store/blocks/footer/footer.json +++ b/store/blocks/footer/footer.json @@ -7,19 +7,35 @@ }, "footer-layout.desktop": { "children": [ + "flex-layout.row#newsletter", "flex-layout.row#footer-1-desktop", - "flex-layout.row#footer-2-desktop", "flex-layout.row#footer-3-desktop" ] }, + "flex-layout.row#newsletter": { + "children": [ + "newsletter" + ], + "props": { + "blockClass": "newsletter-footer" + } + }, + + "newsletter": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } + }, + "flex-layout.row#footer-1-desktop": { "children": [ "vtex.menu@2.x:menu#Products", "vtex.menu@2.x:menu#footer-clothing", - "vtex.menu@2.x:menu#footer-decoration", - "vtex.menu@2.x:menu#footer-bags", "footer-spacer", - "social-networks" + "vtex.menu@2.x:menu#footer-decoration", + "footer-spacer", + "flex-layout.col#social-link-and-payments" ], "props": { "blockClass": "menu-row", @@ -29,26 +45,226 @@ }, "social-networks": { "props": { + "blockClass": "social-links-footer", "socialNetworks": [ { "name": "Facebook", "url": "https://www.facebook.com/vtexonline/" }, { - "name": "Instagram", - "url": "https://www.instagram.com/vtextruecloud/" - }, - { - "name": "Twitter", - "url": "https://twitter.com/vtexonline" - }, - { - "name": "Youtube", - "url": "https://www.youtube.com/user/VTEXTV" + "name": "Pinterest", + "url": "https://br.pinterest.com/" } ] } }, + + "flex-layout.col#social-link-and-payments": { + "children":[ + "flex-layout.col#sociais-link-container", + "flex-layout.col#payments-container" + ], + "props": { + "blockClass": "menu-social-links-and-payments" + } + }, + + "flex-layout.col#sociais-link-container":{ + "children": [ + "rich-text#title-nos-siga", + "flex-layout.row#sociais-link" + ], + "props": { + "blockClass": "sociais-links-container" + } + }, + + "flex-layout.col#payments-container":{ + "children": [ + "rich-text#title-payments", + "flex-layout.row#payments-icons" + ], + "props": { + "blockClass": "sociais-links-container" + } + }, + + "rich-text#title-payments": { + "props": { + "text": "Formas de pagamento", + "blockClass": "title-payments" + } + }, + + "flex-layout.row#payments-icons": { + "children": [ + "image#mastercard", + "image#dinners", + "image#boleto", + "image#pix", + "image#elo", + "image#hipercard", + "image#visa", + "image#amex" + ], + "props": { + "blockClass": "wrapper-payments-icons" + } + }, + + "flex-layout.row#sociais-link": { + "children": [ + "image#email", + "image#facebook", + "image#pinterest", + "image#spotify", + "image#linkedin", + "image#twitter", + "image#instagram", + "image#whatsapp", + "image#youtube" + ], + "props": { + "blockClass": "wrapper-social-links" + } + }, + + "rich-text#title-nos-siga": { + "props": { + "text": "Nos siga", + "blockClass": "title-nos-siga" + } + }, + + "image#email":{ + "props": { + "link": { + "url": "mailto:contato@vtex.com.br" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/EmailChallegeVtexT4.svg" + } + }, + + "image#facebook":{ + "props": { + "link": { + "url": "https://www.facebook.com/vtexonline/" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/FacebookChallegeVtexT4.svg" + } + }, + + "image#pinterest":{ + "props": { + "link": { + "url": "https://br.pinterest.com/" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/PinterestChallegeVtexT4.svg" + } + }, + + "image#spotify":{ + "props": { + "link": { + "url": "https://open.spotify.com/" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/SpotyFyChallegeVtexT4.svg" + } + }, + + "image#linkedin":{ + "props": { + "link": { + "url": "https://br.linkedin.com/" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/LinkedinChallegeVtexT4.svg" + } + }, + + "image#twitter":{ + "props": { + "link": { + "url": "https://twitter.com/vtexonline" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/TwiterChallegeVtexT4.svg" + } + }, + + "image#instagram":{ + "props": { + "link": { + "url": "https://www.instagram.com/vtextruecloud/" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/InstagramChallegeVtexT4.svg" + } + }, + + "image#whatsapp":{ + "props": { + "link": { + "url": "https://www.whatsapp.com/?lang=pt_br" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/WhatsAppChallegeVtexT4.svg" + } + }, + + "image#youtube":{ + "props": { + "link": { + "url": "https://www.youtube.com/user/VTEXTV" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/YouTubeChallegeVtexT4.svg" + } + }, + + "image#mastercard":{ + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/MasterCardChallegeVtexT4.png" + } + }, + + "image#dinners":{ + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/DinnersChallegeVtexT4.png" + } + }, + + "image#boleto":{ + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/BoletoChallegeVtexT4.png" + } + }, + + "image#pix":{ + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/PixChallegeVtexT4.png" + } + }, + + "image#elo":{ + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/EloChallegeVtexT4.png" + } + }, + + "image#hipercard":{ + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/HiperCardChallegeVtexT4.png" + } + }, + + "image#visa":{ + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/VisaChallegeVtexT4.png" + } + }, + + "image#amex":{ + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/AmexChallegeVtexT4.png" + } + }, + "flex-layout.row#footer-2-desktop": { "children": [ "accepted-payment-methods" @@ -68,20 +284,88 @@ }, "flex-layout.row#footer-3-desktop": { "children": [ - "rich-text#footer" + "rich-text#footer", + "flex-layout.row#develop" ], "props": { "blockClass": "credits" } }, + "rich-text#footer": { "props": { - "text": "All stock and product photos are from photos.icons8.com", - "blockClass": "footer" + "text": "**Copyright © 2022 M3 Academy. Todos os direitos reservados.** \n R. Helena Coutinho, 41 - Braunes - Nova Friburgo - RJ \n CNPJ: 12.345.678.0009-10", + "blockClass": "footer-copyright", + "textAlignment": "CENTER", + "textPosition": "CENTER" } }, + + "flex-layout.row#develop": { + "props": { + "blockClass": "container-develop" + }, + "children": [ + "flex-layout.row#content-vtex", + "flex-layout.row#content-m3" + ] + }, + + "flex-layout.row#content-vtex": { + "props": { + "blockClass": "content-vtex-develop" + }, + "children": [ + "rich-text#title-develop-vtex", + "image#icon-vtex" + ] + }, + + "flex-layout.row#content-m3": { + "props": { + "blockClass": "content-m3-develop" + }, + "children": [ + "rich-text#title-develop-m3", + "image#icon-m3" + ] + }, + + "rich-text#title-develop-vtex": { + "props": { + "text": "Powered by", + "blockClass": "title-develop-vtex" + } + }, + + "image#icon-vtex": { + "props": { + "link": { + "url": "https://vtex.com/br-pt/" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/logovtexChallegeVtexT4.svg" + } + }, + + "rich-text#title-develop-m3": { + "props": { + "text": "Developed by", + "blockClass": "title-develop-vtex" + } + }, + + "image#icon-m3": { + "props": { + "link": { + "url": "https://m3ecommerce.com/" + }, + "src": "https://agenciamagma.vtexassets.com/arquivos/logom3ChallegeVtexT4.svg" + } + }, + "footer-layout.mobile": { "children": [ + "flex-layout.row#newsletter", "flex-layout.row#1-footer-mobile", "flex-layout.row#2-footer-mobile" ] @@ -98,9 +382,9 @@ }, "flex-layout.col#footer-1-mobile": { "children": [ - "accepted-payment-methods", - "social-networks", - "rich-text#footer-mobile" + "vtex.menu@2.x:menu#footer-decoration", + "flex-layout.col#social-link-and-payments", + "flex-layout.row#footer-3-desktop" ], "props": { "blockClass": "payment-methods", @@ -112,7 +396,8 @@ "flex-layout.row#1-footer-mobile": { "props": { "paddingTop": 4, - "paddingBottom": 4 + "paddingBottom": 4, + "blockClass": "container-menu-1-footer-mobile" }, "children": [ "vtex.menu@2.x:menu#footer-mobile" diff --git a/store/blocks/footer/menu.json b/store/blocks/footer/menu.json index 7cc85f7..c58b2f6 100644 --- a/store/blocks/footer/menu.json +++ b/store/blocks/footer/menu.json @@ -4,15 +4,43 @@ "orientation": "vertical" }, "children": [ - "menu-item#news", - "menu-item#blackfriday", - "menu-item#sale", - "menu-item#personalization" + "flex-layout.col#menu-1-footer" ] }, - "menu-item#news": { + + "flex-layout.col#menu-1-footer": { "props": { - "id": "menu-item-news", + "blockClass": "menu-1-footer" + }, + "children": [ + "rich-text#title-site-m3-academy", + "menu-item#loja-ebit-ouro", + "menu-item#trocas-e-devolucoes", + "menu-item#central-de-atendimento", + "menu-item#fale-conosco", + "menu-item#imprensa", + "menu-item#rastreamento", + "rich-text#cnpj-m3" + ] + }, + + "rich-text#title-site-m3-academy": { + "props": { + "text": "Site M3 academy", + "blockClass": "title-site-m3-academy" + } + }, + + "rich-text#cnpj-m3": { + "props": { + "text": "CNPJ 12.345.678.0009-10", + "blockClass": "cnpj-m3" + } + }, + + "menu-item#loja-ebit-ouro": { + "props": { + "id": "loja-ebit-ouro", "type": "custom", "iconId": null, "highlight": false, @@ -20,14 +48,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "News", - "text": "News" + "tagTitle": "LojaEbitOuro", + "text": "Loja Ebit Ouro" } } }, - "menu-item#blackfriday": { + "menu-item#trocas-e-devolucoes": { "props": { - "id": "menu-item-black-friday", + "id": "trocas-e-devolucoes", "type": "custom", "iconId": null, "highlight": false, @@ -35,14 +63,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "BlackFriday", - "text": "Black Friday" + "tagTitle": "TrocasEDevoluções", + "text": "Trocas e devoluções" } } }, - "menu-item#sale": { + "menu-item#central-de-atendimento": { "props": { - "id": "menu-item-sale", + "id": "central-de-atendimento", "type": "custom", "iconId": null, "highlight": false, @@ -50,14 +78,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "Sale", - "text": "Sale" + "tagTitle": "CentralDeAtendimento", + "text": "Central de atendimento" } } }, - "menu-item#personalization": { + "menu-item#fale-conosco": { "props": { - "id": "menu-item-personalization", + "id": "fale-conosco", "type": "custom", "iconId": null, "highlight": false, @@ -65,51 +93,91 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "Personalization", - "text": "Personalization" + "tagTitle": "fale-conosco", + "text": "Fale conosco" + } + } + }, + + "menu-item#imprensa": { + "props": { + "id": "imprensa", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Imprensa", + "text": "Imprensa" + } + } + }, + + "menu-item#rastreamento": { + "props": { + "id": "rastreamento", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Rastreamento", + "text": "Rastreamento" } } }, "vtex.menu@2.x:menu#footer-decoration": { "props": { - "orientation": "vertical" + "orientation": "vertical", + "blockClass": "menu-seja-franqueado" }, "children": [ + "rich-text#title-seja-um-fraqueado", "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" + "menu-item#videogames" ] }, + "rich-text#title-seja-um-fraqueado": { + "props": { + "text": "Seja um franqueado", + "blockClass": "title-seja-um-franqueado" + } + }, + "menu-item#smartphones": { "props": { - "id": "menu-item-smartphones", + "id": "menu-item-seja-um-franqueado", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/decoration/smartphones", + "href": "#", "noFollow": true, - "tagTitle": "Smartphones", - "text": "Smartphones" + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" } } }, "menu-item#videogames": { "props": { - "id": "menu-item-videogames", + "id": "menu-item-multimarcas", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/decoration/videogames", + "href": "#", "noFollow": true, - "tagTitle": "Videogames", - "text": "Videogames" + "tagTitle": "Multimarcas", + "text": "Multimarcas" } } }, @@ -191,42 +259,60 @@ "vtex.menu@2.x:menu#footer-clothing": { "props": { - "orientation": "vertical" + "orientation": "vertical", + "blockClass": "menu-2-site-m3" }, "children": [ + "rich-text#title-a-m3-academy", "menu-item#clothing", "menu-item#shorts", "menu-item#tank-tops", + "rich-text#title-responsabilidade-social", "menu-item#shirts", "menu-item#sweatshirt", "menu-item#cropped" ] }, + "rich-text#title-a-m3-academy": { + "props": { + "text": "A M3 Academy", + "blockClass": "title-a-m3-academy" + } + }, + + "rich-text#title-responsabilidade-social": { + "props": { + "text": "Responsabilidade Social", + "blockClass": "title-responsabilidade-social" + } + }, + "vtex.menu@2.x:menu#footer-mobile": { "props": { - "orientation": "vertical" + "orientation": "vertical", + "blockClass": "menu-1-footer-mobile" }, "children": [ - "menu-item#clothing-mobile", - "menu-item#decoration-mobile", - "menu-item#sale-mobile" + "menu-item#site-m3-academy", + "menu-item#a-m3-academy" ] }, - "menu-item#clothing-mobile": { + "menu-item#site-m3-academy": { "props": { - "id": "menu-item-category-clothing", + "id": "menu-item-site-m3-academy", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/d", + "href": "#", "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" - } + "tagTitle": "Site M3 Academy", + "text": "Site M3 Academy" + }, + "blockClass": "site-m3-academy" }, "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"] }, @@ -239,20 +325,23 @@ "orientation": "vertical" }, "children": [ - "menu-item#shorts", - "menu-item#tank-tops", - "menu-item#shirts", - "menu-item#sweatshirt", - "menu-item#cropped" + "menu-item#loja-ebit-ouro", + "menu-item#trocas-e-devolucoes", + "menu-item#central-de-atendimento", + "menu-item#fale-conosco", + "menu-item#imprensa", + "menu-item#rastreamento", + "rich-text#cnpj-m3" ] }, - "menu-item#decoration-mobile": { + "menu-item#a-m3-academy": { "props": { "itemProps": { - "tagTitle": "Decoration", - "text": "Decoration" - } + "tagTitle": "A M3 Academy", + "text": "A M3 Academy" + }, + "blockClass": "a-m3-academy" }, "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"] }, @@ -265,9 +354,9 @@ "orientation": "vertical" }, "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" + "menu-item#clothing", + "menu-item#shorts", + "menu-item#tank-tops" ] }, @@ -297,96 +386,96 @@ "menu-item#clothing": { "props": { - "id": "menu-item-category-clothing", + "id": "menu-item-seja-um-franqueado", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/d", + "href": "#", "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" + "tagTitle": "SejaUmFranqueado", + "text": "Seja um franqueado" } } }, "menu-item#shorts": { "props": { - "id": "menu-item-shorts", + "id": "menu-item-quem-somos", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/shorts", + "href": "#", "noFollow": false, - "tagTitle": "Shorts", - "text": "Shorts" + "tagTitle": "QuemSomos", + "text": "Quem somos" } } }, "menu-item#tank-tops": { "props": { - "id": "menu-item-tank-tops", + "id": "menu-item-nossas-lojas", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/tank-tops", + "href": "#", "noFollow": false, - "tagTitle": "Tank tops", - "text": "Tank tops" + "tagTitle": "Nossas lojas", + "text": "Nossas lojas" } } }, "menu-item#shirts": { "props": { - "id": "menu-item-shirts", + "id": "menu-item-franquias", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/shirts", + "href": "#", "noFollow": false, - "tagTitle": "Shirts", - "text": "Shirts" + "tagTitle": "Franquias", + "text": "Franquias" } } }, "menu-item#sweatshirt": { "props": { - "id": "menu-item-sweat-shirts", + "id": "menu-item-procon-mg", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/sweatshirt", + "href": "#", "noFollow": false, - "tagTitle": "Sweatshirt", - "text": "Sweatshirt" + "tagTitle": "Procon MG", + "text": "Procon MG" } } }, "menu-item#cropped": { "props": { - "id": "menu-item-cropped", + "id": "menu-item-política-de-privacidade", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/clothing/cropped", + "href": "#", "noFollow": false, - "tagTitle": "Cropped", - "text": "Cropped" + "tagTitle": "Política de Privacidade", + "text": "Política de Privacidade" } } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 27b3623..70e2736 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,6 +8,251 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) { + padding: 32px 0 0 0; + background-color: #000000; + display: flex; + justify-content: center; + align-items: flex-end; +} +.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) { + max-width: 100%; + width: 774px; + margin-bottom: 16px; +} +.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-label) { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #FFFFFF; + display: flex; + flex-direction: column; +} +.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-label)::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + margin: 16px 0; +} +.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) { + padding: 0; + display: flex; + border-bottom: 1px solid #929292; + height: 32px; +} +.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: 0; + border-radius: 0; + height: 32px; +} +.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + border-radius: 0; + background: transparent; + height: 32px; +} +.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; + height: 32px; +} +.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { + min-height: 32px; + height: 32px; + border: 0; + background: transparent; + font-weight: 700; + font-size: 14px; + line-height: 19px; + border-bottom: 3px solid #BFBFBF; + border-radius: 0; +} +.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) :global(.vtex-button__label) { + height: 32px; +} + +.flexRow--menu-row { + height: 464px; + background-color: #000000; + border-top: 1px solid #FFFFFF; +} + +.flexRowContent--menu-row { + padding: 32px 32px 0 32px; + display: grid; + grid-template-columns: max-content max-content 11% max-content 11% 191px; + justify-content: space-between; +} +.flexRowContent--menu-row .stretchChildrenWidth { + width: 100% !important; +} +.flexRowContent--menu-row .flexColChild--menu-social-links-and-payments { + height: auto; + margin-bottom: 16px; +} +.flexRowContent--menu-row .flexColChild--sociais-links-container { + width: 200px; +} +.flexRowContent--menu-row .flexRowContent--wrapper-payments-icons { + display: block; + width: 160px; +} +.flexRowContent--menu-row .flexRowContent--wrapper-payments-icons .stretchChildrenWidth { + width: 100% !important; + display: contents; +} +.flexRowContent--menu-row .flexRowContent--wrapper-payments-icons .stretchChildrenWidth :global(.vtex-store-components-3-x-imageElement) { + margin-right: 8px; +} + +.flexCol--menu-1-footer { + row-gap: 8px; +} + +.flexColChild--menu-1-footer :global(.vtex-menu-2-x-styledLinkContainer) { + padding: 0; +} +.flexColChild--menu-1-footer :global(.vtex-menu-2-x-styledLinkContainer) :global(.vtex-menu-2-x-styledLink) { + font-weight: 400; + font-size: 14px; + line-height: 30px; + color: rgba(255, 255, 255, 0.45); + text-transform: none; + letter-spacing: 0; +} + +.flexCol--sociais-links-container .flexColChild--sociais-links-container { + height: max-content !important; +} +.flexCol--sociais-links-container .flexRowContent--wrapper-social-links { + display: block; +} +.flexCol--sociais-links-container .flexRowContent--wrapper-social-links .stretchChildrenWidth { + width: 100% !important; + display: contents; +} +.flexCol--sociais-links-container .flexRowContent--wrapper-social-links .stretchChildrenWidth :global(.vtex-store-components-3-x-imageElement) { + margin-right: 8px; +} + +.flexRow--container-menu-1-footer-mobile { + background-color: #000000; + padding: 0 16px; +} + +.flexRowContent--credits { + display: grid; + grid-template-columns: 1fr max-content; + padding: 32px 32px 16px 32px; + justify-content: center; + align-items: flex-start; + border-top: 1px solid #FFFFFF; +} +.flexRowContent--credits .stretchChildrenWidth { + width: 100% !important; +} +.flexRowContent--credits .flexRowContent--container-develop { + gap: 16px; +} +.flexRowContent--credits .flexRowContent--container-develop .stretchChildrenWidth { + width: 100% !important; +} +.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop { + gap: 8px; +} +.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop .stretchChildrenWidth { + width: max-content !important; + align-items: center; +} +.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop .stretchChildrenWidth :global(.vtex-rich-text-0-x-paragraph--title-develop-vtex) { + margin: 0; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: #FFFFFF; +} +.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop { + gap: 8px; +} +.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop .stretchChildrenWidth { + width: max-content !important; + align-items: center; +} +.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop .stretchChildrenWidth :global(.vtex-rich-text-0-x-paragraph--title-develop-vtex) { + margin: 0; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: #FFFFFF; +} + +@media screen and (min-width: 1920px) { + .flexRowContent--menu-row { + padding: 32px 320px 0 320px; + } + .flexRowContent--credits { + padding: 32px 320px 16px 320px; + } +} +@media screen and (max-width: 1026px) { + .flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) { + padding-top: 64px; + } + .flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-container) { + width: 100%; + padding: 0 16px; + } + .flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) { + width: 100%; + margin-bottom: 32px; + } + .flexCol--menu-social-links-and-payments { + padding: 16px 0 32px 0; + } + .flexColChild--payment-methods { + padding-bottom: 0; + } + .flexColChild--payment-methods .flexRowContent--wrapper-payments-icons { + display: grid; + grid-template-columns: repeat(4, 42px); + width: 192px; + justify-content: center; + gap: 8px; + } + .flexColChild--payment-methods .flexRowContent--wrapper-payments-icons .stretchChildrenWidth { + width: 100% !important; + height: 29px; + } + .flexRowContent--payment-methods { + padding-bottom: 0; + } + .flexCol--sociais-links-container { + display: flex; + justify-content: center; + align-items: center; + padding: 0 16px; + } + .flexCol--sociais-links-container .flexColChild--sociais-links-container { + width: 200px; + } + .flexCol--sociais-links-container .flexColChild--sociais-links-container .flexRowContent--wrapper-social-links { + text-align: center; + } + .flexRowContent--credits { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 32px; + padding: 16px 0 8px 0; + height: 131px; + } + .flexRowContent--credits .stretchChildrenWidth { + width: max-content !important; + } +} .flexRowContent--main-header { padding: 24.5px 40px !important; justify-content: space-between; diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css index fd7b46f..758da3f 100644 --- a/styles/css/vtex.menu.css +++ b/styles/css/vtex.menu.css @@ -7,6 +7,79 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.menuContainer { + gap: 8px !important; +} + +.menuContainer--menu-2-site-m3 :global(.vtex-menu-2-x-styledLinkContainer), .menuContainer--menu-seja-franqueado :global(.vtex-menu-2-x-styledLinkContainer) { + padding: 0; +} +.menuContainer--menu-2-site-m3 :global(.vtex-menu-2-x-styledLinkContainer) :global(.vtex-menu-2-x-styledLinkContent), .menuContainer--menu-seja-franqueado :global(.vtex-menu-2-x-styledLinkContainer) :global(.vtex-menu-2-x-styledLinkContent) { + font-weight: 400; + font-size: 14px; + line-height: 30px; + color: rgba(255, 255, 255, 0.45); + text-transform: none; + letter-spacing: 0; +} + +.menuContainer--menu-seja-franqueado :global(.vtex-menu-2-x-styledLinkContainer) { + padding: 0; +} +.menuContainer--menu-seja-franqueado :global(.vtex-menu-2-x-styledLinkContainer) :global(.vtex-menu-2-x-styledLinkContent) { + display: flex; + align-items: center; + justify-content: center; + width: 164px; + height: 42px; + border: 1px solid #FFFFFF; + color: #FFFFFF; + font-weight: 400; + font-size: 12px; + line-height: 30px; +} + +.menuContainer--menu-1-footer-mobile { + gap: 18px !important; +} +.menuContainer--menu-1-footer-mobile .styledLinkContainer { + padding: 0; +} +.menuContainer--menu-1-footer-mobile .styledLinkContent--site-m3-academy, .menuContainer--menu-1-footer-mobile .styledLinkContent--a-m3-academy { + border-bottom: 1px solid #FFFFFF; +} +.menuContainer--menu-1-footer-mobile .styledLink { + font-weight: 400; + font-size: 14px; + line-height: 38px; + color: #FFFFFF; + text-transform: none; + letter-spacing: 0; +} +.menuContainer--menu-1-footer-mobile .styledLink .accordionIcon { + font-size: 0; + border: 0 !important; +} +.menuContainer--menu-1-footer-mobile .styledLink .accordionIcon::after { + content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowTopFooterChallegeVtexT4.svg"); + border: 0 !important; +} +.menuContainer--menu-1-footer-mobile .submenuAccordion { + padding-top: 8px; +} + +@media screen and (max-width: 1026px) { + .menuContainer--menu-seja-franqueado { + padding: 0 16px; + align-items: center; + } + .menuContainer--menu-seja-franqueado .menuItem { + width: 100%; + } + .menuContainer--menu-seja-franqueado :global(.vtex-menu-2-x-styledLinkContainer) :global(.vtex-menu-2-x-styledLinkContent) { + width: 100%; + } +} :global(.vtex-menu-2-x-styledLink) { font-weight: 400; font-size: 12px; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index e52c13d..19bb9ad 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,6 +7,65 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.paragraph--title-site-m3-academy, +.paragraph--cnpj-m3, +.paragraph--title-a-m3-academy, +.paragraph--title-responsabilidade-social, +.paragraph--title-seja-um-franqueado, +.paragraph--title-nos-siga, +.paragraph--title-payments { + font-weight: 400; + font-size: 14px; + line-height: 38px; + color: #FFFFFF; + margin: 0; +} + +.paragraph--cnpj-m3, .paragraph--title-responsabilidade-social { + text-decoration: underline; +} + +.paragraph--title-payments { + font-size: 18px; + line-height: 38px; +} + +.container--footer-copyright { + background-color: #000000; + color: rgba(255, 255, 255, 0.45); +} +.container--footer-copyright .paragraph--footer { + margin: 0; + font-weight: 400; + font-size: 12px; + line-height: 20px; +} +.container--footer-copyright .paragraph--footer-copyright { + margin: 0; + font-size: 12px; + line-height: 20px; +} + +@media screen and (min-width: 1920px) { + .container--footer-copyright { + justify-content: flex-start; + } + .container--footer-copyright .paragraph--footer-copyright { + text-align: left; + } +} +@media screen and (max-width: 1026px) { + .container--title-nos-siga, .container--title-payments { + justify-content: center; + } + .paragraph--title-payments { + font-size: 14px; + line-height: 38px; + } + .paragraph--footer-copyright { + margin: 0; + } +} .container--text-top-menu-descont { justify-content: center; background-color: #000000; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8a98a83..c7e54b7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,6 +8,11 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.flexRowContent--newsletter-footer .newsletter { + height: 175px; + background-color: #000000; +} + .searchBarContainer { padding: 0; align-self: center; diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..e8d1551 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,16 @@ -.row--menu-row { - padding-right: 24px; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.socialNetworksContainer .socialNetworkLink .socialNetworkImage--facebook { + display: none; } -.row--menu-row .rowContainer { - align-items: flex-start; -} - -.row--payment-methods { - padding-top: 16px; -} +.footerLayout { + background-color: #000000; +} \ No newline at end of file diff --git a/styles/sass/pages/footer/vtex.flex-layout.scss b/styles/sass/pages/footer/vtex.flex-layout.scss new file mode 100644 index 0000000..41c1607 --- /dev/null +++ b/styles/sass/pages/footer/vtex.flex-layout.scss @@ -0,0 +1,304 @@ +.flexRowContent--newsletter-footer{ + :global(.vtex-store-components-3-x-newsletter){ + padding: 32px 0 0 0; + background-color: #000000; + + display: flex; + justify-content: center; + align-items: flex-end; + + :global(.vtex-store-components-3-x-form){ + max-width: 100%; + width: 774px; + + margin-bottom: 16px; + :global(.vtex-store-components-3-x-label){ + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #FFFFFF; + + display: flex; + flex-direction: column; + + &::after{ + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + margin: 16px 0; + } + } + :global(.vtex-store-components-3-x-inputGroup){ + padding: 0; + display: flex; + + border-bottom: 1px solid #929292; + height: 32px; + + :global(.vtex-input){ + :global(.vtex-input-prefix__group){ + border: 0; + border-radius: 0; + height: 32px; + + :global(.vtex-styleguide-9-x-input){ + border-radius: 0; + background: transparent; + height: 32px; + } + } + } + + :global(.vtex-store-components-3-x-buttonContainer){ + padding: 0; + height: 32px; + :global(.vtex-button){ + min-height: 32px; + height: 32px; + border: 0; + background: transparent; + + font-weight: 700; + font-size: 14px; + line-height: 19px; + + border-bottom: 3px solid #BFBFBF; + + border-radius: 0; + + :global(.vtex-button__label){ + height: 32px; + } + } + } + } + } + } +} + +.flexRow--menu-row{ + height: 464px; + background-color: #000000; + border-top: 1px solid #FFFFFF; +} + +.flexRowContent--menu-row{ + padding: 32px 32px 0 32px; + + display: grid; + grid-template-columns: max-content max-content 11% max-content 11% 191px; + justify-content: space-between; + + .stretchChildrenWidth{ + width: 100% !important; + } + + .flexColChild--menu-social-links-and-payments{ + height: auto; + margin-bottom: 16px; + } + + .flexColChild--sociais-links-container{ + width: 200px; + } + + .flexRowContent--wrapper-payments-icons{ + display: block; + width: 160px; + .stretchChildrenWidth{ + width: 100% !important; + display: contents; + + :global(.vtex-store-components-3-x-imageElement){ + margin-right: 8px; + } + } + } +} + +.flexCol--menu-1-footer{ + row-gap: 8px; +} + +.flexColChild--menu-1-footer{ + :global(.vtex-menu-2-x-styledLinkContainer){ + padding: 0; + + :global(.vtex-menu-2-x-styledLink){ + font-weight: 400; + font-size: 14px; + line-height: 30px; + color: rgba(255, 255, 255, 0.45); + text-transform: none; + letter-spacing: 0; + } + } +} + +.flexCol--sociais-links-container{ + .flexColChild--sociais-links-container{ + height: max-content !important; + } + + .flexRowContent--wrapper-social-links{ + display: block; + .stretchChildrenWidth{ + width: 100% !important; + display: contents; + + :global(.vtex-store-components-3-x-imageElement){ + margin-right: 8px; + } + } + } +} +.flexRow--container-menu-1-footer-mobile{ + background-color: #000000; + padding: 0 16px; +} + +.flexRowContent--credits{ + display: grid; + grid-template-columns: 1fr max-content; + padding: 32px 32px 16px 32px; + justify-content: center; + align-items: flex-start; + + border-top: 1px solid #FFFFFF; + + .stretchChildrenWidth{ + width: 100% !important; + } + + .flexRowContent--container-develop{ + gap: 16px; + .stretchChildrenWidth{ + width: 100% !important; + } + + .flexRowContent--content-vtex-develop{ + gap: 8px; + .stretchChildrenWidth{ + width: max-content !important; + align-items: center; + + :global(.vtex-rich-text-0-x-paragraph--title-develop-vtex){ + margin: 0; + + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: #FFFFFF; + } + } + } + + .flexRowContent--content-m3-develop{ + gap: 8px; + .stretchChildrenWidth{ + width: max-content !important; + align-items: center; + + :global(.vtex-rich-text-0-x-paragraph--title-develop-vtex){ + margin: 0; + + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: #FFFFFF; + } + } + } + } +} + +@media screen and (min-width: 1920px) { + .flexRowContent--menu-row{ + padding: 32px 320px 0 320px; + } + + .flexRowContent--credits{ + padding: 32px 320px 16px 320px;; + } +} + +@media screen and (max-width: 1026px) { + .flexRowContent--newsletter-footer{ + :global(.vtex-store-components-3-x-newsletter){ + padding-top: 64px; + :global(.vtex-store-components-3-x-container){ + width: 100%; + padding: 0 16px; + } + + :global(.vtex-store-components-3-x-form){ + width: 100%; + margin-bottom: 32px; + } + } + } + + .flexCol--menu-social-links-and-payments{ + padding: 16px 0 32px 0 ; + } + + .flexColChild--payment-methods{ + padding-bottom: 0; + + .flexRowContent--wrapper-payments-icons{ + display: grid; + grid-template-columns: repeat(4, 42px); + width: 192px; + justify-content: center; + gap: 8px; + + .stretchChildrenWidth{ + width: 100% !important; + height: 29px; + } + } + } + + .flexRowContent--payment-methods{ + padding-bottom: 0; + } + + .flexCol--sociais-links-container{ + display: flex; + justify-content: center; + align-items: center; + + padding: 0 16px; + + .flexColChild--sociais-links-container{ + width: 200px; + + .flexRowContent--wrapper-social-links{ + text-align: center; + } + } + } + + .flexRowContent--credits{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + gap: 32px; + + padding: 16px 0 8px 0; + height: 131px; + + .stretchChildrenWidth{ + width: max-content !important; + } + } + +} + + diff --git a/styles/sass/pages/footer/vtex.menu.scss b/styles/sass/pages/footer/vtex.menu.scss new file mode 100644 index 0000000..9d4cef6 --- /dev/null +++ b/styles/sass/pages/footer/vtex.menu.scss @@ -0,0 +1,96 @@ +.menuContainer{ + gap: 8px !important; +} + +.menuContainer--menu-2-site-m3, .menuContainer--menu-seja-franqueado{ + :global(.vtex-menu-2-x-styledLinkContainer){ + padding: 0; + :global(.vtex-menu-2-x-styledLinkContent){ + font-weight: 400; + font-size: 14px; + line-height: 30px; + color: rgba(255, 255, 255, 0.45); + text-transform: none; + letter-spacing: 0; + } + } +} + +.menuContainer--menu-seja-franqueado{ + :global(.vtex-menu-2-x-styledLinkContainer){ + padding: 0; + + :global(.vtex-menu-2-x-styledLinkContent){ + display: flex; + align-items: center; + justify-content: center; + + width: 164px; + height: 42px; + + border: 1px solid #FFFFFF; + + color: #FFFFFF; + font-weight: 400; + font-size: 12px; + line-height: 30px; + } + + } +} + +.menuContainer--menu-1-footer-mobile{ + gap: 18px !important; + .styledLinkContainer{ + padding: 0; + } + + .styledLinkContent--site-m3-academy, .styledLinkContent--a-m3-academy{ + border-bottom: 1px solid #FFFFFF; + } + + .styledLink{ + font-weight: 400; + font-size: 14px; + line-height: 38px; + color: #FFFFFF; + text-transform: none; + letter-spacing: 0; + + .accordionIcon{ + font-size: 0; + border: 0 !important; + + &::after{ + content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowTopFooterChallegeVtexT4.svg"); + border: 0 !important; + } + } + } + + .submenuAccordion{ + padding-top: 8px; + } +} + +@media screen and (max-width: 1026px){ + .menuContainer--menu-seja-franqueado{ + padding: 0 16px; + + align-items: center; + + .menuItem{ + width: 100%; + } + + :global(.vtex-menu-2-x-styledLinkContainer){ + + :global(.vtex-menu-2-x-styledLinkContent){ + width: 100%; + } + + } + } +} + + diff --git a/styles/sass/pages/footer/vtex.rich-text.scss b/styles/sass/pages/footer/vtex.rich-text.scss new file mode 100644 index 0000000..b4d5af6 --- /dev/null +++ b/styles/sass/pages/footer/vtex.rich-text.scss @@ -0,0 +1,68 @@ +.paragraph--title-site-m3-academy, +.paragraph--cnpj-m3, +.paragraph--title-a-m3-academy, +.paragraph--title-responsabilidade-social, +.paragraph--title-seja-um-franqueado, +.paragraph--title-nos-siga, +.paragraph--title-payments{ + font-weight: 400; + font-size: 14px; + line-height: 38px; + color: #FFFFFF; + + margin: 0; +} + +.paragraph--cnpj-m3, .paragraph--title-responsabilidade-social{ + text-decoration: underline; +} + +.paragraph--title-payments{ + font-size: 18px; + line-height: 38px; +} + +.container--footer-copyright{ + background-color: #000000; + color: rgba(255, 255, 255, 0.45); + + .paragraph--footer{ + margin: 0; + + font-weight: 400; + font-size: 12px; + line-height: 20px; + } + + .paragraph--footer-copyright{ + margin: 0; + + font-size: 12px; + line-height: 20px; + } +} + +@media screen and (min-width: 1920px) { + .container--footer-copyright{ + justify-content: flex-start; + + .paragraph--footer-copyright{ + text-align: left; + } + } +} + +@media screen and (max-width: 1026px) { + .container--title-nos-siga, .container--title-payments { + justify-content: center; + } + + .paragraph--title-payments{ + font-size: 14px; + line-height: 38px; + } + + .paragraph--footer-copyright{ + margin: 0; + } +} diff --git a/styles/sass/pages/footer/vtex.store-components.scss b/styles/sass/pages/footer/vtex.store-components.scss new file mode 100644 index 0000000..70a0ec3 --- /dev/null +++ b/styles/sass/pages/footer/vtex.store-components.scss @@ -0,0 +1,7 @@ +.flexRowContent--newsletter-footer{ + + .newsletter{ + height: 175px; + background-color: #000000; + } +} diff --git a/styles/sass/pages/footer/vtex.store-footer.scss b/styles/sass/pages/footer/vtex.store-footer.scss new file mode 100644 index 0000000..698568f --- /dev/null +++ b/styles/sass/pages/footer/vtex.store-footer.scss @@ -0,0 +1,11 @@ +.socialNetworksContainer{ + .socialNetworkLink{ + .socialNetworkImage--facebook{ + display: none; + } + } +} + +.footerLayout{ + background-color: #000000; +}