feat: adiciona estruturas e imagens ao footer ver, versao mobile e desktop

checkout/src/arquivos/js/components/Footer.js

@@ -8,12 +8,19 @@ export default class Footer {
     async init() {
         await this.selectors();
         // this.onUpdate();
+        this.createPayments();
+        this.createDevelopedBy()
     }
 
     async selectors() {
         //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.footerCheckoutWrapper = await waitElement(".footerCheckout__wrapper");
+        this.footerCheckoutPayments = await waitElement(".footerCheckout__payments");
+        this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci");
+        this.footerCheckoutDevelopedBy = await waitElement(".footerCheckout__developedBy");
+        this.footerCheckoutShelf = await waitElement(".footerCheckout__prateleira");
     }
 
     onUpdate() {
@@ -30,6 +37,33 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+    createPayments() {
+        this.footerCheckoutPayments.innerHTML = `
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" />
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" />
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" />
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" />
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" />
+            <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" />      
+        `;
+        this.footerCheckoutVtexPci.innerHTML =
+            ` <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" />`
+    }
+    createDevelopedBy() {
+        this.footerCheckoutDevelopedBy.innerHTML = `
+            <li>
+                <a href="https://vtex.com/br-pt/">
+                    <span>Powered By</span>
+                </a>
+        </li>
+        <li>
+            <a href="https://agenciam3.com/">
+                <span>Developed By</span>
+            </a>
+        </li>
+        `;
+    }
     async addCarrossel() {
         const elemento = await waitElement("#my-element");
         $(elemento).slick({
@@ -37,4 +71,5 @@ export default class Footer {
             slidesToScroll: 1,
         });
     }
+
 }

checkout/src/arquivos/sass/partials/_footer.scss

@@ -2,22 +2,59 @@
 .footerCheckout {
     border-top: none;
     color: $color-gray2;
+    bottom: 0;
+    width: 100%;
+
 
     &__wrapper {
+        width: 100%;
+        border-top: 1px solid;
+        padding: 16px 0;
+
+        .container {
+            width: 94.9734%;
+
             align-items: center;
             display: flex;
             justify-content: space-between;
+
+            @media (max-width: 1024px) {
+                flex-direction: column;
+                align-items: flex-start;
+                margin: 0 16px;
+
             }
 
-    &__address {
+            &::before,
+            &::after {
+                content: none;
+            }
+
+            & .footerCheckout__address {
                 color: $color-gray2;
                 font-family: $font-family;
                 font-style: normal;
-        font-weight: normal;
+                font-weight: 400;
                 font-size: 10px;
                 line-height: 12px;
                 text-transform: capitalize;
-        max-width: 40%;
+                width: 100%;
+                max-width: 269px;
+
+                @media(min-width:2500px) {
+                    font-size: 20px;
+                    line-height: 27px;
+                    max-width: none;
+                    width: 537px;
+                    min-width: 537px;
+                }
+
+                @media(max-width:1024px) {
+                    margin-bottom: 16px;
+                    order: 2;
+                }
+
+
 
                 @include mq(md, max) {
                     margin-bottom: 24px;
@@ -25,17 +62,43 @@
                 }
             }
 
-    &__stamps {
+            & .footerCheckout__stamps {
                 align-items: center;
                 display: flex;
+                justify-content: center;
                 justify-self: center;
                 list-style: none;
+                width: 100%;
+
+                @media (min-width: 2500px) {
+                    min-width: 690px;
+
+                }
+
+                @media (max-width: 1024px) {
+                    justify-content: flex-start;
+                    margin: 0;
+                    margin-bottom: 23px;
+                    margin-left: -5px;
+                    order: 1;
+                }
 
                 @include mq(md, max) {
                     align-self: center;
                     margin-bottom: 12px;
                 }
 
+                img {
+                    width: 34.78px;
+                    height: 20px;
+
+                    @media(min-width:2500px) {
+                        width: 69.63px;
+                        height: 39.06px;
+                    }
+                }
+
+
                 &__divider {
                     background-color: $color-gray4;
                     display: inline-block;
@@ -43,16 +106,87 @@
                     margin: 0 8px;
                     width: 1px;
                 }
+
             }
 
-    &__developedBy {
+            & .footerCheckout__vtexpci {
-        align-items: center;
+                img {
+                    width: 53px;
+                    height: 33px;
+
+                    @media(min-width:2500px) {
+                        width: 103.52px;
+                        height: 64.44px;
+                    }
+                }
+            }
+
+            & .footerCheckout__developedBy {
                 display: flex;
+                align-items: center;
+                justify-content: flex-end;
                 list-style-type: none;
                 margin: 0;
+                width: 33%;
+                gap: 10.73px;
+                margin: 0;
+
+
+                li:first-child {
+
+                    a {
+                        display: flex;
+
+                        &::after {
+                            content: "";
+                            background: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png") no-repeat center center;
+                            background-size: 100%;
+                            display: block;
+                            min-width: 44.92px;
+                            height: 16px;
+
+                            @media (min-width: 2500px) {
+                                width: 87.73px;
+                                height: 31.25px;
+                            }
+                        }
+
+                        span {
+                            width: 100%;
+                            min-width: 61px;
+                            margin-right: 10.12px;
+                        }
+                    }
+                }
 
                 li:last-child {
                     margin-left: 16px;
+
+                    a {
+                        display: flex;
+
+                        &::after {
+                            content: "";
+                            background: url(" https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png") no-repeat center center;
+                            background-size: 100%;
+                            display: block;
+                            width: 28.66px;
+                            height: 15.65px;
+
+                            @media(min-width:2500px) {
+                                width: 55.98px;
+                                height: 30.55px;
+                            }
+                        }
+
+                        span {
+
+                            width: 100%;
+                            min-width: 61px;
+                            margin-right: 10.12px;
+                        }
+                    }
+
                 }
 
                 a {
@@ -66,9 +200,22 @@
                     line-height: 12px;
                     text-decoration: none;
 
+                    @media(min-width:2500px) {
+                        font-size: 18px;
+                        line-height: 25px;
+                    }
+
                     span {
-                margin-right: 8px;
+                        width: 100%;
+                    }
+
+                }
+
+
+
             }
         }
+
     }
+
 }