From 1c363f7580a10a2a2387bfa154afcb4af6d616cc Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Wed, 7 Dec 2022 19:51:13 -0300 Subject: [PATCH] feat(home): Cria a prateleira de produtos --- meta/pages/home.js | 121 +----- src/arquivos/js/app/app.js | 2 + .../app/components/Prateleira/Prateleira.js | 6 +- src/arquivos/js/app/partials/Shelf.js | 16 + src/arquivos/js/config/slick.js | 11 +- src/arquivos/sass/main.scss | 23 +- src/arquivos/sass/pages/_home.scss | 42 +- src/arquivos/sass/partials/_flags.scss | 54 ++- src/arquivos/sass/partials/_prateleira.scss | 387 +++++++----------- src/arquivos/sass/partials/_slider.scss | 33 ++ src/arquivos/sass/utils/_variaveis.scss | 5 +- src/arquivos/sprite/left-gray-arrow-icon.png | Bin 0 -> 2258 bytes src/arquivos/sprite/right-gray-arrow-icon.png | Bin 0 -> 2232 bytes src/template-pagina/manuelaluana-home.html | 6 + ...ml => manuelaluana-prateleira-padrao.html} | 34 +- ... manuelaluana-prateleira-padrao.vtex.html} | 17 +- 16 files changed, 305 insertions(+), 452 deletions(-) create mode 100644 src/arquivos/js/app/partials/Shelf.js create mode 100644 src/arquivos/sass/partials/_slider.scss create mode 100644 src/arquivos/sprite/left-gray-arrow-icon.png create mode 100644 src/arquivos/sprite/right-gray-arrow-icon.png rename src/template-prateleira/{prateleira-padrao.html => manuelaluana-prateleira-padrao.html} (77%) rename src/template-prateleira/{prateleira-padrao.vtex.html => manuelaluana-prateleira-padrao.vtex.html} (83%) diff --git a/meta/pages/home.js b/meta/pages/home.js index cbe8fe8..4766c74 100644 --- a/meta/pages/home.js +++ b/meta/pages/home.js @@ -126,120 +126,19 @@ module.exports = { ], }, - // ==================== - // MOSAICO - // ==================== { - id: "banner-01", + id: "prateleira-01", objects: [ { - type: "banner", - name: "banner 01", - contents: [ - { - name: "banner 01 content", - active: true, - type: "image", - file: "banner-01.png", - width: 500, - height: 500, - }, - ], - }, - ], - }, - { - id: "banner-02", - objects: [ - { - type: "banner", - name: "banner 02", - contents: [ - { - name: "banner 02 content", - active: true, - type: "image", - file: "banner-02.png", - width: 500, - height: 500, - }, - ], - }, - ], - }, - { - id: "banner-03", - objects: [ - { - type: "banner", - name: "banner 03", - contents: [ - { - name: "banner 03 content", - active: true, - type: "image", - file: "banner-03.png", - width: 500, - height: 500, - }, - ], - }, - ], - }, - { - id: "banner-04", - objects: [ - { - type: "banner", - name: "banner 04", - contents: [ - { - name: "banner 04 content", - active: true, - type: "image", - file: "banner-04.png", - width: 500, - height: 500, - }, - ], - }, - ], - }, - { - id: "banner-05", - objects: [ - { - type: "banner", - name: "banner 05", - contents: [ - { - name: "banner 05 content", - active: true, - type: "image", - file: "banner-05.png", - width: 500, - height: 500, - }, - ], - }, - ], - }, - { - id: "mobile-banner-05", - objects: [ - { - type: "banner", - name: "banner 05 mobile", - contents: [ - { - name: "banner 05 mobile content", - active: true, - type: "image", - file: "banner-05.png", - width: 500, - height: 500, - }, - ], + type: "Produtos Relacionados", + name: "CONFIRA NOSSAS NOVIDADES", + + properties: { + layout: "manuelaluana-prateleira-padrao", + type: "QuemViuViuTambem", + "number-of-columns": 12, + "number-of-items": 12, + }, }, ], }, diff --git a/src/arquivos/js/app/app.js b/src/arquivos/js/app/app.js index 942a4e8..f97684b 100644 --- a/src/arquivos/js/app/app.js +++ b/src/arquivos/js/app/app.js @@ -20,6 +20,7 @@ import Promocao from "./partials/Promocao"; import MenuContents from "./partials/MenuContents"; import Login from "./partials/Login"; import Prateleira from "./components/Prateleira/Prateleira"; +import Shelf from "./partials/Shelf"; import PrateleiraService from "./components/Prateleira/PrateleiraService"; @@ -38,6 +39,7 @@ const app = new Container({ ScrollToTop, AutoComplete, Prateleira, + Shelf, ], services: [PrateleiraService], pages: [ diff --git a/src/arquivos/js/app/components/Prateleira/Prateleira.js b/src/arquivos/js/app/components/Prateleira/Prateleira.js index 8218c4d..dbc9cc1 100644 --- a/src/arquivos/js/app/components/Prateleira/Prateleira.js +++ b/src/arquivos/js/app/components/Prateleira/Prateleira.js @@ -96,8 +96,8 @@ export default class Prateleira { //ex atualziar atualizar() { this.flagDeDesconto(); - this.precoParcelado(); - this.precoBoleto(); + // this.precoParcelado(); + // this.precoBoleto(); } criarHtmlPrecoBoleto(valor) { @@ -123,7 +123,7 @@ export default class Prateleira { createFlagDesconto($elemento, percentualDeDesconto) { var $flag = $("

") .addClass("flag produto-off") - .text(percentualDeDesconto + "%"); + .text(percentualDeDesconto + "%OFF"); $elemento.find(".flags-product .DiscountHightLight").append($flag); } diff --git a/src/arquivos/js/app/partials/Shelf.js b/src/arquivos/js/app/partials/Shelf.js new file mode 100644 index 0000000..4e87df8 --- /dev/null +++ b/src/arquivos/js/app/partials/Shelf.js @@ -0,0 +1,16 @@ +import slickConfig from "Config/slick"; + +export default class Shelf { + constructor() { + this.selectors(); + this.createSlider(); + } + + selectors() { + this.shelf = $(".shelf ul"); + } + + createSlider() { + this.shelf.slick(slickConfig.productShelf.defaultShelf); + } +} diff --git a/src/arquivos/js/config/slick.js b/src/arquivos/js/config/slick.js index 2b0565a..b1c1503 100644 --- a/src/arquivos/js/config/slick.js +++ b/src/arquivos/js/config/slick.js @@ -59,7 +59,7 @@ export default { productShelf: { defaultShelf: { lazyLoad: "ondemand", - dots: true, + dots: false, arrows: true, infinite: true, slidesToShow: 4, @@ -69,17 +69,13 @@ export default { { breakpoint: 1200, settings: { - lazyLoad: "ondemand", slidesToShow: 3, slidesToScroll: 3, - infinite: true, }, }, { breakpoint: 800, settings: { - arrows: true, - lazyLoad: "ondemand", slidesToShow: 2, slidesToScroll: 2, }, @@ -87,9 +83,8 @@ export default { { breakpoint: 576, settings: { - arrows: false, - slidesToShow: 2, - slidesToScroll: 2, + slidesToShow: 1, + slidesToScroll: 1, }, }, ], diff --git a/src/arquivos/sass/main.scss b/src/arquivos/sass/main.scss index 4275639..d53de5b 100644 --- a/src/arquivos/sass/main.scss +++ b/src/arquivos/sass/main.scss @@ -5,17 +5,7 @@ @import "./utils/all"; -@import "./pages/home"; -@import "./pages/categoria"; -@import "./pages/produto"; -@import "./pages/institucional"; -@import "./pages/erro"; -@import "./pages/login"; - -@import "./components/mini-cart"; -@import "./components/newsletter"; -@import "./components/instagram-gallery"; - +@import "./partials/slider"; @import "./partials/header"; @import "./partials/menu"; @import "./partials/search"; @@ -25,3 +15,14 @@ @import "./partials/prateleira"; @import "./partials/ajustes"; @import "./partials/flags"; + +@import "./components/mini-cart"; +@import "./components/newsletter"; +@import "./components/instagram-gallery"; + +@import "./pages/home"; +@import "./pages/categoria"; +@import "./pages/produto"; +@import "./pages/institucional"; +@import "./pages/erro"; +@import "./pages/login"; diff --git a/src/arquivos/sass/pages/_home.scss b/src/arquivos/sass/pages/_home.scss index 0d30afe..ae1ed67 100644 --- a/src/arquivos/sass/pages/_home.scss +++ b/src/arquivos/sass/pages/_home.scss @@ -2,6 +2,10 @@ .main-banners { margin-bottom: 38px; + @include mq(md, max) { + margin-bottom: 32px; + } + img { width: 100%; } @@ -19,17 +23,6 @@ } .slick-arrow { - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: map-get($z-index, Level-1); - padding: 0; - border: 0; - font-size: 0; - background-color: transparent; - outline: 0; - cursor: pointer; - @extend .sprite; @include mq(md, max) { @@ -60,24 +53,17 @@ } .slick-dots { - display: flex !important; - align-items: center; - justify-content: center; position: absolute; left: 0; bottom: 14px; z-index: map-get($z-index, Level-1); width: 100%; - margin: 0; @include mq(md, max) { bottom: 9px; } li { - display: flex; - margin: 0 4px; - &.slick-active { button { width: 16px; @@ -87,20 +73,14 @@ } } } - - button { - width: 10px; - height: 10px; - padding: 0; - border: 0; - outline: 0; - background: $color-white; - } } } .advantages { margin-bottom: 117px; + @include mq(md, max) { + margin-bottom: 89px; + } &__list { display: flex; @@ -143,4 +123,12 @@ line-height: 12px; } } + + .shelf { + margin-bottom: 172px; + + @include mq(md, max) { + margin-bottom: 80px; + } + } } diff --git a/src/arquivos/sass/partials/_flags.scss b/src/arquivos/sass/partials/_flags.scss index 20fcaee..ef3d0a0 100644 --- a/src/arquivos/sass/partials/_flags.scss +++ b/src/arquivos/sass/partials/_flags.scss @@ -1,43 +1,37 @@ .flags-product { - display: block; - pointer-events: none; position: absolute; - width: 100%; - z-index: 5; + padding: 8px; + top: 0; + left: 0; + z-index: map-get($z-index, Level-2); - p { - background-repeat: no-repeat; - color: $color-white; + .flag { display: none; - font-size: 11px; - float: right; - font-weight: 700; + text-transform: uppercase; + margin: 0 0 8px; min-width: 54px; - margin: 7px 100% 0 7px; - overflow: hidden; - padding: 2.5px 4px; - text-indent: -9999px; + max-width: max-content; + height: 20px; + font-size: 10px; + line-height: 12px; + &.novo, &.produto-off { - background: #142032; - display: table; - float: left; - text-indent: 0; - width: 50px; - - &:after { - content: "OFF"; - display: inline-block; - } + display: flex; + align-items: center; + justify-content: center; } &.novo { - background-color: #f71963; - border-radius: 5px; - display: table; - float: left; - text-indent: 0; - text-transform: uppercase; + font-weight: bold; + color: $color-white; + background: $color-blue; + } + + &.produto-off { + font-weight: 900; + color: $color-white; + background: $color-black; } } } diff --git a/src/arquivos/sass/partials/_prateleira.scss b/src/arquivos/sass/partials/_prateleira.scss index 2ad2e7b..7ea3cf4 100644 --- a/src/arquivos/sass/partials/_prateleira.scss +++ b/src/arquivos/sass/partials/_prateleira.scss @@ -1,263 +1,194 @@ -/***************************************************************/ -/**-- Prateleiras --------------------------********************/ -/*-------------------------------------------------------------*/ - -.prateleira-de-produtos { - position: relative; - - .slick-next, - .slick-prev { - @extend .sprite; - background-color: transparent; - border: none; - cursor: pointer; - font-size: 0; - outline: none; - padding: 0; - position: absolute; - top: 30%; - z-index: 1; - - @include mq(md, max) { - transform: scale(0.8); - } - } - - .slick-next { - @extend .sprite; - @extend .sprite-circled-arrow-right; - left: auto; - right: -60px; - - @include mq(md, max) { - right: -35px; - } - - @include mq_range(md, xl) { - right: -45px; - } - } - - .slick-prev { - @extend .sprite; - @extend .sprite-circled-arrow-left; - right: auto; - left: -60px; - - @include mq(md, max) { - left: -35px; - } - - @include mq_range(md, xl) { - left: -45px; - } - } - - .slick-dots { - bottom: 20px; - height: 17px; - position: absolute; - pointer-events: none; - text-align: center; - width: 100%; - - @include mq(md, max) { - margin-top: 16px; - position: initial; - } - - &, - li { - align-items: center; - display: flex !important; - justify-content: center; - } - - li { - display: inline-block; - margin: 0 4px; - } - - button { - background-color: #142032; - border: none; - cursor: pointer; - height: 10px; - outline: none; - padding: 0; - pointer-events: all; - transition: all 0.15s ease-in-out; - width: 10px; - } - - .slick-active { - button { - background-color: #f71963; - height: 16px; - width: 16px; - } - } - } - +.shelf { h2 { - color: #f71963; - font-size: 24px; - margin: 0 0 24px; + margin: 0 0 16px; text-align: center; - text-transform: lowercase; + font-size: 16px; + line-height: 19px; } ul { - max-width: 95%; - margin: auto; + margin: 0; - @include mq(md, max) { - max-width: 300px; + @include mq(lg, max) { + padding: 0 32px; } } - li { - display: inline-block; - vertical-align: top; - padding: 0 2.5px; + .slick-track { + display: flex; } -} -.produto-na-prateleira { - padding: 0 5px; - position: relative; - text-align: center; + .slick-slide { + height: auto; - .product-image { - overflow: hidden; + & > div, + li { + height: 100%; + } + } + + .slick-arrow { + @extend .sprite; + + @include mq(lg, max) { + transform: translateY(-50%) scale(0.7); + } + } + + .slick-prev { + right: 100%; + + @include mq(lg, max) { + left: 0; + right: auto; + transform-origin: left; + } + + @extend .sprite-left-gray-arrow-icon; + } + + .slick-next { + left: 100%; + + @include mq(lg, max) { + right: 0; + left: auto; + transform-origin: right; + } + + @extend .sprite-right-gray-arrow-icon; + } + + .produto-na-prateleira { + display: flex; + flex-direction: column; position: relative; + height: 100%; + margin: 0 15px; - .lazyload__sibling { - padding-bottom: 100%; + .product-image { + position: relative; + padding-top: 100%; + margin-bottom: 16px; + overflow: hidden; - + div { - top: 0; - left: 0; + &:hover { + .foto-secundaria { + opacity: 1; + pointer-events: all; + } + } + + .foto-principal, + .foto-secundaria { position: absolute; width: 100%; + height: 100%; + z-index: map-get($z-index, Level-1); + top: 0; + left: 0; } - } - .lazyload__sibling img { - left: 50%; - max-width: initial; - position: relative; - transform: translateX(-50%); - width: 100%; - } - - .foto-principal, - .foto-secundaria { - transition: all 0.25s linear; - } - - &:hover .foto-secundaria, - .foto-principal { - visibility: visible; - opacity: 1; - z-index: 1; - } - - .foto-secundaria { - position: absolute; - width: 100%; - top: 0; - z-index: -1; - visibility: hidden; - opacity: 0; - } - } - - .informacoes .nome { - font-size: 14px; - line-height: 16px; - margin-top: 16px; - min-height: 34px; - text-transform: capitalize; - } - - .price { - margin: 8px 0 17px; - - > div { - line-height: 1.3; - } - .antigo { - color: hsla(220, 1%, 43%, 1); - font-size: 14px; - min-height: 18px; - text-decoration: line-through; - } - - .principal { - font-size: 18px; - font-weight: 700; - } - - .parcelado { - color: hsla(220, 1%, 43%, 1); - font-size: 12px; - - strong { - font-weight: normal; - } - } - - .boleto { - display: none; - } - } - - .compra { - .btn-compra { - margin: 0; - display: block; - transition: all 0.25s linear 0.25s; - - @include mq(md, min) { - visibility: hidden; + .foto-secundaria { opacity: 0; + pointer-events: none; + transition: all 0.2s ease-in-out; } - a { - background-color: #2fab61; - color: $color-white; - display: block; - font-size: 14px; - letter-spacing: 1px; - padding: 15px 0; - text-transform: uppercase; - transition: all 0.15s linear; + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } - @include mq(lg) { + .indisponivel, + .disponivel { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + } + + .nome { + margin-bottom: 17px; + text-align: center; + text-transform: uppercase; + font-weight: 500; + font-size: 10px; + line-height: 12px; + } + + .price { + margin-bottom: 17px; + text-align: center; + text-transform: uppercase; + + .antigo { + margin-bottom: 4px; + text-decoration: line-through; + color: $color-grey3; + font-size: 10px; + line-height: 12px; + } + + .principal { + margin-bottom: 4px; + font-weight: 900; + font-size: 13px; + line-height: 16px; + } + + .parcelado { + font-size: 10px; + line-height: 12px; + color: $color-grey4; + } + } + + .btn-compra { + a { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + background: $color-black; + font-weight: 700; + font-size: 10px; + line-height: 12px; + color: $color-white; + + @include mq(lg, max) { + &:active { + background: lighten($color-black, 10); + } + } + + @include mq(lg, min) { &:hover { - background-color: hsla(138, 66%, 41%, 1); + background: lighten($color-black, 10); } &:active { - background-color: hsla(138, 50%, 41%, 1); + background: $color-black; } } } } - } - @include mq(lg) { - &:hover .compra .btn-compra { - visibility: visible; - opacity: 1; - z-index: 1; + .indisponivel { + // text-align: center; + + .erro { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + font-weight: 700; + font-size: 10px; + line-height: 12px; + color: $color-red; + } } } - - .indisponivel { - color: #f71963; - font-weight: bold; - margin: 5px 0; - } } diff --git a/src/arquivos/sass/partials/_slider.scss b/src/arquivos/sass/partials/_slider.scss new file mode 100644 index 0000000..a78296a --- /dev/null +++ b/src/arquivos/sass/partials/_slider.scss @@ -0,0 +1,33 @@ +.slick-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: map-get($z-index, Level-1); + padding: 0; + border: 0; + font-size: 0; + background-color: transparent; + outline: 0; + cursor: pointer; +} + +.slick-dots { + display: flex !important; + align-items: center; + justify-content: center; + margin: 0; + + li { + display: flex; + margin: 0 4px; + } + + button { + width: 10px; + height: 10px; + padding: 0; + border: 0; + outline: 0; + background: $color-white; + } +} diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index ed8f9cf..ad28ec1 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -1,6 +1,6 @@ // fonts -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap"); $font-family: "Inter", sans-serif; $font-weight-light: 300; @@ -22,6 +22,7 @@ $color-grey: #333333; $color-grey1: #e0e0e0; $color-grey2: #bdbdbd; $color-grey3: #828282; +$color-grey4: #6d6e70; // Grid breakpoints @@ -47,5 +48,5 @@ $z-index: ( // avise-me: 5, // scroll-top: 7, // header-fixo: 10, - // popup-user: 15,,,,,,,,,,,,,,,, + // popup-user: 15,,,,,,,,,,,,,,,,,,, ) !default; diff --git a/src/arquivos/sprite/left-gray-arrow-icon.png b/src/arquivos/sprite/left-gray-arrow-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..d008f76288d20cdb2d8d72f49a6874db8eea5b11 GIT binary patch literal 2258 zcmV;@2rc)CP)IyN!vCBJ&@?dpOLg_Fx*JrYPESu;S65e^jg5_m*VosN8;wSrlX20_%}v|P z%kPc(A>?b!@8L1z&zx;;Zl3S#?2M@-HK;&Ez!=6hUwazTvf}Rw`MXAZedK?}s7RoN z0Q~ahOQ+dvzU6{;xR5RKuK{50?(UwDXL$n%YvU@`WoT~;f;J~uCSN^%dd5~6k_R~l zxFEQxKjXZpej!^as^U4`c=qhse`dyS-@ZNM>i>X!-d5xbhcew(1IS{Xc*Hymw(~i|Es*Pwl&R z@4lv6kZntrF+=RGYK=<+6kpflr*AE9mj+JD0NG2((r4fJj+WF?0Hw+f;l%ZO=#O1q zUcPzx@?}UBl7Kwor+fN6u0iK~?JrZM7X~QsPAv@uTGSr*z1~xW#eLE)SKR}C8gn_) z!0apvaUp;y@WQ`;|L#=H>XIbZcuLAQE(5WdH)9e!R9W_QPwD~>!o9K;KH;aakqXL& zGNP9UIhGN*GyZ)5_4IgG#G7_+^ai0NXpPN)5H>o=xJnqJ`*7S zhx(S*7M6ENYa%I2-%LZ9xtn&7_1RQ_7@E<1KkuXpmWPIb913N^m|P`yF;GbRTp~dD zJ^sQYl^k+|@rFti3dF;;-`tA+;>TZKzkb~#M?znaZYOO`9i%lXi2&JrkJRvNjIK(V zBMXMtRO!B=sihnR092f{=w%1E~(sYor1^OHW)Ot{g2RF55<q_zP9DJ0>tEi`ht@(M;K}FeCYY}=Y8!DVL-N4c@7|MR(Dx=Y+G8R zkp~{8$;h!TE-v8fXH^+Y*fQrPPGSJ1;n1d9TGh>Ic|9LV11eBe zgcphZ-ba9K#Cx4so@C|zpI?4%e!1q$>>`x@&^oxweD7L}} zO|Hwa$x^IwkZ08m9)#8yQ~hQd{2)VYZkvf%BPEaG|0MolwSpH(8y5nc-~-z#Q%If! zcvzgu$W}>skY>XGA2%heb|$t+FBTZVyGajut1LWGEaVO&H&|e-KwPgUBDf5Vd6lo$i}T(A z()==^sn-4b_fywht1j;Vx%Zy679vOdhD$qb9b8s>F7l$jnt$M~K?EnAOjwEZc=f zdP`5T`cj=BT0-bTu#37evEUq+;bK{;3q)q3e}6Ph#~(ILy@VN1fvN*Uz3|5OGc~#? zK=Ff#;R{6w5V5B>El*hx!9q{_ZEkK(jcy81{NTvUP-HcZw7a_-R1u=3`VOLV8Jfn8 z=|O)`L~E>7HHb3)4JiKmvo>P}&=$U6i^wcOIU)8xfBx*fx4^#>sHBit%@*19WI|>{ zW>LxkvBkdo)F(t+#4ci`&DSx2c_K24R9=XSYz|yRus$8JdwF>o>#@WDCPifWy1_ik z1Ca~r+#gDrGb48A<^#nF%}l8qO^Q$+h~!w7eZ_8IOmIg&ISwv9&C-$)E& zlWp-o$fzE&5&21(r=>wS8%9npavDjC9tVHt57lsB|6JmZ{6v6|9MBN+1+YxM=^a`_ zan&8teANxoEIf5lNmkVKM&yoclV2-gV>!(qiIV9aGFRo;0uL=QgWWo>?bIJbhYWI1Hpm=DlH!=Y!(|WCSP3A+^Kk)BDFNi% z%|&OImH{#cI47sgtqc%KJDbnYfD3diGvD4MM=rl&a6wXNvCA_KodAp^)`&h;J1I|e zXtpbuurve$WI+>!Vs+IzgjS1vBOnHp0&;c(w?`nK;|OF1@spopI&G}2BRcBo&Ye4t z<>>gftkt$}avZlzo{l8-0uVxhxuBgai}WmS;39bgXo{zwUa^(HKL+GqXdFgt(fuMe zjTZti(r`FzZEbCB3(O9=v&@jM6S#xPWO7#I`Cf$r)DobN(7Bb70j`z=GHSmT;*Uhs g;+p!+qJe4s594s6?WrkG5C8xG07*qoM6N<$f=vA~+yDRo literal 0 HcmV?d00001 diff --git a/src/arquivos/sprite/right-gray-arrow-icon.png b/src/arquivos/sprite/right-gray-arrow-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..b6b99b1601694f2ac08e3ba4808cf5dfc868791e GIT binary patch literal 2232 zcmV;p2uJscP)uK~#7F-JDxi z6H63^i-7uQ&Irs5)DaL6UCSq61jZ2%M?e^XI0C{5z$e%862b_?5u83FF!<(`^Z#LY zR`pKxC84Uj@Lwx*QmKTlFS~Z#cGZe$P-kan?ccwDcUMjx@nBYBL6MW`;ZEfvhV`F1t8q$iXQ7JIMSjS^WLt0k&t_0sT#^Wu1jB%Yn zYXSJ-!-sCG)!IWryC`Jagx8QTx3;!UO<)BBNNYnC>jT;>Y;Tf$=P_ z08z*uZg#)Kx6wZhk?-{K^76~>?(U8K)o3(Y$N%i%Y1c?2Szr| zcyx2J%%E*x)gG2 z_l3Cz*>Pl<0Al~9*0?l4@pS_{-E+L%7&t8p+C{^}^PF%mo{@Bl- zKVLq7{yZ@eNkG2F(;fXDYS0B9yUSGRg#ik@Ge<+g7IlEW*BcYD&?oJq>h9xd#^p!@ zv#}_|g#Z@7OMd+Lu@RfqmZ%qZWu48&H|jCt@_W#Q`{-xhcj?-f?~7*8`J6_$-< zWLYbIRW%DNu)G^N;24Bn1pQ*)PFuthD_Nj47#)>7xb5&LDZ{`{6H7c{PowPfr2z2@ z9XeWDTHb;AOC)7Ew9{B-bkp|BK3iCYIW)uNNF|@*AMTpJP#DFWIYv{jP~OA5&*WMl z{T}?lYn7a!!FXvric?+up?Eb7i+w?JJ!xxezo=2k1qkzft%he4c2#_iEa)E48nQca z#4BD`@;jl#iCC7=T#uwuwK>ku`-~HyRNYLEot1TS9l&iA;?t*34>?C^r_q31wPOw-ZhoMcIh8*KQd-m)iW{9#pI%kFUiy6R=A3x5m(}uD> zTZD*9nU8G@qRR^HKI;r1tZ!R=c39U83wruPT*^A=jX)GD9NKAI-sJ>&bKMA2LZ9QZYOe$)I_A1AZp`cfD?USM`cP(WDwGr=OGvcOcbZZRmy78+tE6l2>Bs>ai9;(+#OFPq*w8 zB+;=^z;nbeCS;d(V@~aN(8J$04NE2i3Ws8K!K1)L|B&Npy4;9f!t9v_CGZO4lk0>> z>4i6R_ohZS1t@+nH+-Q^#R!iq^t9jF+S=6UrU1ncj_nLhRO1-oQI6_6OwVPQ4dq~x zIs&yyW(ZY;*RLBM1qMBplz`Q2kzG$FltyIwRuyM+;BNTpF=E zHyIa(ZrPO8Cz72aIsX4!jp!>wb97g1IV4y*BedDbyYs|)he^wgzvLA_wmeye#7wE zvavj~N3dw4QDGdQ9MF*Q1+>h~&CLztQC!H1VL_jp9nE~zE$qA(0+cVE+Y)d7g022q zoH{e}vp=QfEM1j@1s*tJ2Kx=fCWoVrRg9z*AX{blL+3_hvCdm9u{_=1ORBCZ zSB{0wJ8Q*UALRA2$zwQ|ku(@5jy0f#&cInHnB3=qHBHLr0YVE!Ch&`8OMGId%U;^g zHFvg`67LcB``HIPY9R|uMN7PQ@1FDUG2`)UKA$Q&8{m35;Jlu3=mlUZu}1c(I(d20L$iIsq@^(spbVNQ5v%jIG~g9rD)>f1?3oH7 zwsHjW1&=@mh%b1~>9mQq4q7>{ckbMIBuB@0WUaPyRpGd06X;0NAOI;A7zOQ?S!7@Z z1D7foKwG2HXd6~S|JXC(#l~R_i$1Jl(|9caQ=OcgwC~@)zb-Jl#-C*-c%0H5TwY$D z*LiYqtpK$I=tFjHWn{odTLKxiUrYE$B5L`V`pvq5Y5fo3{H3iq;s@^l0000 + +

+
+ +
+