From 3f081a89467be2e979550c14bd18fd9f28eb860e Mon Sep 17 00:00:00 2001
From: Leonardo <rochaleo879@gmail.com>
Date: Sun, 18 Dec 2022 20:00:53 -0300
Subject: [PATCH] feat: cria o estilo para as paginas restantes na versao
 desktop

---
 checkout/src/arquivos/js/components/Footer.js | 149 ++++++++++++----
 .../sass/checkout/_checkout-autenticacao.scss | 130 ++++++++++++--
 .../sass/checkout/_checkout-carrinho.scss     |  40 ++++-
 .../sass/checkout/_checkout-pagamento.scss    | 160 ++++++++++++++++++
 .../sass/checkout/_checkout-vazio.scss        |  27 ++-
 .../src/arquivos/sass/checkout/_checkout.scss |  18 +-
 .../src/arquivos/sass/partials/_footer.scss   |  66 +++++++-
 .../src/arquivos/sass/partials/_header.scss   |  31 +++-
 .../src/arquivos/sass/utils/_variaveis.scss   |   2 +-
 9 files changed, 550 insertions(+), 73 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ec471f5..17f986d 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,38 +7,56 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        this.catalogoApi();
+        await this.catalogoApi();
         this.footerBanner();
         this.footerDev();
-        // this.onUpdate();
+        this.onUpdate();
     }
 
     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.footerPrateleira = document.querySelector(".footerCheckout__prateleira");
+        this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
+        this.checkoutPagamento = await waitElement(".cart-template");
         this.footerLogo = document.querySelector(".footerCheckout__stamps");
+        this.paymentText = document.querySelector(".notification");
         this.footerDeveloped = document.querySelector(".footerCheckout__developedBy");
     }
 
     footerBanner() {
-        this.footerLogo.innerHTML = `
-        <li>
-        <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.paymentText.innerHTML = `
+        Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
+        `;
+
+        this.footerLogo.innerHTML = `
+        <li class="logo-footer-cards">
+        <figure>
+
+        <img class="logo1" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
+
+
+        <img class="logo2"  src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png">
+
+
+        <img class="logo3"  src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" />
+
+
+        <img class="logo4"  src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" />
+
+
+        <img class="logo5"  src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" />
+
+
+        <img class="logo6"  src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" />
+
+        <img class="logo7"  src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" />
 
-    </li>
-    <li>
         <span class="footerCheckout__stamps__divider"></span>
-    </li>
-    <li>
-        <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png">
+
+        <img class="logo8"  src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png">
+        </figure>
+
     </li>
 
         `;
@@ -49,22 +67,25 @@ export default class Footer {
         <li>
                 <a href="https://vtex.com/br-pt/">
                     <span>Powered By</span>
-                    @TODO: vtex icon
+                    <figure class="logo-vtex">
+                    <img class="logo-vtex" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
+                    </figure>
                 </a>
             </li>
 
             <li>
                 <a href="https://agenciam3.com/">
                     <span>Developed By</span>
-                    @TODO: m3 icon
+                    <figure class="logo-m3">
+                    <img class="logo-m3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
+                    </figure>
                 </a>
             </li>
 
         `;
     }
 
-    catalogoApi() {
-        this.addCarrossel();
+    async catalogoApi() {
         this.footerPrateleira.innerHTML = `
         <h2 class="card-title">Você também pode gostar:</h2>
         <ul class="products-list"></ul>`;
@@ -76,14 +97,11 @@ export default class Footer {
                     const novaUl = document.querySelector(".products-list");
                     const name = product.productName;
                     const link = product.link;
-                    for (let i = 0; i < product.items.length; i++) {
-                        product.items.name;
-                    }
                     const image = product.items[0].images[0].imageUrl;
                     novaUl.innerHTML += `
                     <li class="product-cards">
                     <figure>
-                    <img class="product-image" src ="${image}" />
+                    <img class="products-image" src ="${image}" />
                     </figure>
                     <h3 class ="product-name">${name}</h3>
                     <ul class= "size-items">
@@ -101,9 +119,10 @@ export default class Footer {
                 });
             });
         });
+        this.addCarrossel();
     }
 
-    onUpdate() {
+    /*onUpdate() {
         //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
@@ -111,17 +130,81 @@ export default class Footer {
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                if (carrinhoEstaVazio()) {
+                    target.style.display = "none";
+                }
             });
         });
 
         observer.observe(target, config);
-    }
-    async addCarrossel() {
-        const elemento = await waitElement(".products-list");
-        $(elemento).slick({
-            slidesToShow: 4,
-            slidesToScroll: 1,
+    }*/
+
+    onUpdate() {
+        //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
+        // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
+        // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
+        let target = this.checkoutVazio;
+        let myCart = document.querySelector("#cart-title");
+        let observer = new MutationObserver((mutations) => {
+            mutations.forEach(() => {
+                if (target.style.display == "none") {
+                    this.footerPrateleira.classList.remove("desable");
+                    myCart.classList.remove("desable");
+                    this.catalogoApi();
+                } else {
+                    this.footerPrateleira.classList.add("desable");
+                    myCart.classList.add("desable");
+                    this.footerPrateleira.innerHTML = "";
+                }
+            });
+            /*window.addEventListener("hashchange", () => {
+                if ((window.location.hash = "#/cart")) {
+                    if (target.style.display == "none") {
+                        this.footerPrateleira.classList.remove("desable");
+                        this.catalogoApi();
+                    }
+                } else {
+                    this.footerPrateleira.classList.add("desable");
+                }
+            });*/
+        });
+
+        observer.observe(this.checkoutVazio, {
+            attributes: true,
         });
     }
+
+    async addCarrossel() {
+        const elemento = await waitElement(".products-list");
+        setTimeout(() => {
+            $(elemento).slick({
+                slidesToShow: 4,
+                slidesToScroll: 1,
+                responsive: [
+                    {
+                        breakpoint: 1025,
+                        settings: {
+                            slidesToShow: 3,
+                            slidesToScroll: 1,
+                        },
+                    },
+
+                    {
+                        breakpoint: 601,
+                        settings: {
+                            slidesToShow: 2,
+                            slidesToScroll: 1,
+                        },
+                    },
+                ],
+            });
+        }, 1500);
+
+        /* if (window.innerWidth <= 1024) {
+            $(elemento).slick({
+                slidesToShow: 2,
+                slidesToScroll: 1,
+            });
+        }*/
+    }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 0677f03..f83b3ce 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -12,6 +12,9 @@
                 font-size: 14px;
                 line-height: 16px;
                 text-transform: uppercase;
+                @media (max-width: 1024px) {
+                    margin-right: 16px;
+                }
 
                 &:hover {
                     color: lighen($color-black, 10);
@@ -50,6 +53,9 @@
 
         .client-email {
             margin: 0 0 16px;
+            @media (max-width: 1024px) {
+                width: 100%;
+            }
 
             input {
                 box-shadow: none;
@@ -61,8 +67,16 @@
                 border-radius: 5px 0 0 5px;
                 width: 443px;
 
-                @media (max-width: 490px) {
-                    width: auto;
+                @media (max-width: 1024px) {
+                    width: 84.498% !important;
+                    display: flex;
+                    margin-left: 16px;
+                }
+
+                @media (max-width: 375px) {
+                    width: 57.6% !important;
+                    display: flex;
+                    margin-left: 16px;
                 }
             }
 
@@ -81,11 +95,17 @@
                 right: 0;
                 top: 0;
 
-                @media (max-width: 490px) {
-                    height: 48px;
-                    margin: 0;
+                @media (max-width: 1024px) {
+                    margin-right: 16px;
                     position: absolute;
                 }
+
+                @media (max-width: 490px) {
+                    height: 52px;
+                    margin-right: 16px;
+                    position: absolute;
+                    top: -5px;
+                }
             }
 
             span.help.error {
@@ -147,10 +167,27 @@
             padding: 16px;
 
             .accordion-heading {
+                .icon-user,
+                .icon-home,
+                .icon-credit-card {
+                    display: none;
+                }
+
                 span {
-                    color: #303030;
+                    color: $color-black;
                     margin-bottom: 8px;
                     padding: 0;
+                    font-family: font-family-secundary;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 16px;
+                    line-height: 19px;
+
+                    @media (min-width: 2500px) {
+                        font-weight: 400;
+                        font-size: 32px;
+                        line-height: 37px;
+                    }
 
                     i::before {
                         fill: #303030;
@@ -159,7 +196,7 @@
 
                 a {
                     align-items: center;
-                    background-color: #303030;
+                    background-color: $color-blue2;
                     border-radius: 8px;
                     border: none;
                     color: $color-white;
@@ -172,10 +209,28 @@
             .accordion-inner {
                 padding: 0;
 
+                div.form-step.box-info {
+                    @media (min-width: 2500px) {
+                        font-weight: 400;
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
+                }
+
+                @media (min-width: 2500px) {
+                    font-weight: 400;
+                    font-size: 24px;
+                    line-height: 33px;
+                }
+
                 /* General configurations */
 
                 .client-notice {
+                    display: none;
                     color: $color-black;
+                    @media (max-width: 1024px) {
+                        display: none;
+                    }
                 }
 
                 p {
@@ -186,9 +241,10 @@
 
                     select,
                     input {
-                        border-radius: 0;
-                        border: 1px solid $color-gray4;
+                        border-radius: 5px;
+                        border: 1px solid $color-gray6;
                         box-shadow: none;
+                        width: 95.331%;
                     }
 
                     .help.error {
@@ -199,6 +255,7 @@
                 .box-client-info-pj {
                     .link a#is-corporate-client,
                     .link a#not-corporate-client {
+                        display: none;
                         color: $color-black;
                         font-weight: 500;
                         text-decoration: underline;
@@ -211,18 +268,20 @@
 
                 button.submit {
                     border: none;
-                    border-radius: 5px;
-                    background: $color-black;
+                    border-radius: 8px;
+                    width: 100%;
+                    background: $color-blue2;
+                    color: $color-white;
                     margin-top: 8px;
                     outline: none;
                     transition: all 0.2s linear;
 
                     &:hover {
-                        background: lighten($color-black, 5);
+                        background: $color-blue2;
                     }
 
                     &:active {
-                        background: darken($color-black, 5);
+                        background: $color-blue2;
                     }
                 }
 
@@ -299,7 +358,50 @@
                     padding-left: 16px;
                 }
 
-                .vtex-omnishipping-1-x-summaryChange {
+                .vtex-omnishipping-1-x-addressFormPart1 {
+                    p.input.ship-postalCode.required.text {
+                        display: flex;
+                        flex-direction: column;
+
+                        #ship-postalCode {
+                            padding-right: 67.612%;
+                        }
+                    }
+
+                    .input.ship-country.text {
+                        display: none;
+                    }
+                }
+
+                .input .ship-complement .text {
+                    display: inline-block;
+                    width: 95.331%;
+                }
+
+                .vtex-omnishipping-1-x-address {
+                    display: flex;
+                    flex-direction: column;
+
+                    #ship-number {
+                        width: 98.67%;
+                    }
+
+                    #ship-city {
+                        width: 98.67%;
+                    }
+
+                    #ship-state {
+                        width: 98.712%;
+                    }
+
+                    div {
+                        display: grid;
+                    }
+                }
+
+
+
+                .vtex-omnishipping-1-x-addressSummary .vtex-omnishipping-1-x-summaryChange {
                     border-color: #303030;
                     color: #303030;
                 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index b24d13e..91d555b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -118,7 +118,7 @@
             font-size: 14px;
             line-height: 16px;
 
-            @include mq(md, max) {
+            @media (max-width: 1024px) {
                 &.quantity-price,
                 &.shipping-date {
                     display: none;
@@ -127,7 +127,7 @@
         }
 
         .product-image {
-            height: auto;
+            height: 60px;
             padding: 0;
             width: 60px;
 
@@ -138,7 +138,7 @@
             img {
                 height: 60px;
                 max-width: 100%;
-                width: auto;
+                width: 60px;
 
                 @include mq(sm, max) {
                     height: 72px;
@@ -179,12 +179,33 @@
             }
         }
 
+        th.shipping-date,
+        th.quantity,
+        th.product,
+        th.product-price {
+            @media (max-width: 1024px) {
+                display: none;
+            }
+        }
+
+        th.quantity-price {
+            @media (max-width: 1024px) {
+                display: none;
+            }
+        }
+
         td.shipping-date {
             color: $color-gray2;
             font-size: 12px;
             line-height: 14px;
 
-            @include mq(md, max) {
+            @media (max-width: 1024px) {
+                display: none;
+            }
+        }
+
+        td.quantity-price {
+            @media (max-width: 1024px) {
                 display: none;
             }
         }
@@ -239,7 +260,7 @@
 
             input {
                 background-color: $color-white;
-                border: 1px solid $color-gray3;
+                border: 1px solid transparent;
                 border-radius: 0;
                 border-width: 0 1px;
                 display: block;
@@ -477,7 +498,7 @@
             }
 
             .srp-postal-code {
-                .ship-country {
+                #ship-country {
                     display: none;
                 }
 
@@ -730,6 +751,11 @@
             .accordion-group {
                 tr {
                     border-color: #e5e5e5;
+                    th {
+                        @media (max-width: 1024px) {
+                            display: none;
+                        }
+                    }
 
                     td {
                         &.empty {
@@ -792,7 +818,7 @@
             text-align: center;
             margin-bottom: 16px;
 
-            @include mq(md, max) {
+            @media (max-width: 1024px) {
                 margin-bottom: 0px;
             }
 
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 9a52731..f4ebfdd 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -1,4 +1,8 @@
 body .container-main.container-order-form .orderform-template.active {
+    @media (max-width: 1024px) {
+        display: flex;
+        flex-direction: column;
+    }
     .mini-cart {
         width: 32.3242%;
         margin-left: unset;
@@ -6,6 +10,162 @@ body .container-main.container-order-form .orderform-template.active {
         float: right;
     }
     .orderform-template-holder {
+        @media (max-width: 1024px) {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
         width: 66.1132%;
     }
+
+    .row-fluid {
+        .box-client-info-pf {
+            label,
+            input {
+                @media (min-width: 2500px) {
+                    font-weight: 400;
+                    font-size: 28px;
+                    line-height: 38px;
+                    height: 51px;
+                }
+            }
+
+            button {
+                font-weight: 700;
+                font-size: 28px;
+                line-height: 38px;
+                text-align: center;
+                letter-spacing: 0.05em;
+            }
+        }
+        .box-client-info-pj {
+            display: none;
+        }
+        label.checkbox.newsletter-label {
+            display: flex;
+            @media (min-width: 2500px) {
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 33px;
+            }
+
+            #opt-in-newsletter {
+                width: 6.53%;
+            }
+        }
+        @media (max-width: 1024px) {
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+        }
+
+        .span6 {
+            @media (max-width: 1024px) {
+                width: 100% !important;
+                margin: 0;
+            }
+        }
+        .client-email {
+            @media (max-width: 1024px) {
+                margin: auto;
+                margin-left: 16px;
+            }
+        }
+        #client-email {
+            @media (max-width: 1024px) {
+                width: 94.7792% !important;
+                margin: auto;
+            }
+        }
+        .client-first-name {
+            width: 42.933%;
+            margin-right: 25px;
+            @media (max-width: 1024px) {
+                width: 45.603% !important;
+                margin-left: 16px;
+            }
+
+            @media (min-width: 2500px) {
+                width: 42.573%;
+                margin-left: 30px;
+            }
+            #client-first-name {
+                width: 100% !important;
+                @media (max-width: 1024px) {
+                    width: 100%;
+                }
+            }
+        }
+
+        .client-last-name {
+            width: 42.933%;
+            @media (max-width: 1024px) {
+                width: 45.603%;
+                margin-left: 14.5px;
+            }
+
+            @media (min-width: 2500px) {
+                width: 42.573%;
+            }
+            #client-last-name {
+                width: 100%;
+                @media (max-width: 1024px) {
+                    width: 100%;
+                }
+            }
+        }
+
+        .client-document {
+            width: 42.933%;
+            margin-right: 25px;
+            @media (max-width: 1024px) {
+                width: 45.603%;
+                margin-left: 16px;
+            }
+
+            @media (min-width: 2500px) {
+                width: 42.573%;
+            }
+            #client-document {
+                width: 100%;
+                @media (max-width: 1024px) {
+                    width: 100%;
+                }
+            }
+        }
+
+        .client-phone {
+            width: 42.933%;
+            @media (max-width: 1024px) {
+                width: 45.603%;
+                margin-left: 14.5px;
+            }
+
+            @media (min-width: 2500px) {
+                width: 42.573%;
+            }
+            #client-phone {
+                width: 100%;
+                @media (max-width: 1024px) {
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+#holder-document-0,
+.FormFieldLabel {
+    display: none;
+}
+
+.PaymentCardNumber input {
+    display: block;
+    width: 223px;
+    height: 25px;
+}
+
+.steps-view {
+    width: 393px;
+    height: 292px;
+    margin-right: 0px;
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index bda6846..e339b9e 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -14,6 +14,7 @@
     }
 
     &-title {
+        margin-top: 170px;
         font-size: 20px;
         font-style: normal;
         font-weight: 700;
@@ -21,25 +22,45 @@
         line-height: 33px;
         text-align: center;
         text-transform: uppercase;
+
+        @media (min-width: 2500px) {
+            font-weight: 700;
+            font-size: 48px;
+            line-height: 65px;
+            text-align: center;
+            text-transform: uppercase;
+        }
     }
 
     &-links {
         .link-choose-products {
+            display: flex;
+            justify-content: center;
+            align-items: center;
             background: $color-white;
-            border: 1px solid #000000;
+            border: 1px solid $color-black2;
             transition: ease-in 0.22s all;
             outline: none;
             border-radius: 0px;
-            font-family: $font-family;
+            font-family: $font-family-secundary;
             width: 287px;
             height: 24px;
-            color: $color-black;
+            color: $color-black2;
             font-weight: 400;
             font-size: 14px;
             line-height: 16px;
             text-align: center;
             text-transform: uppercase;
             margin: auto;
+            margin-bottom: 264px;
+
+            @media (min-width: 2500px) {
+                width: 638.67px;
+                height: 66px;
+                font-weight: 400;
+                font-size: 28px;
+                line-height: 33px;
+            }
 
             &:hover {
                 background: $color-white;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index bead8ae..7d2b0ad 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -50,6 +50,10 @@ body {
     .container-order-form,
     .container-cart {
         width: 80%;
+
+        @media (max-width: 1024px) {
+            width: 100%;
+        }
     }
 }
 
@@ -66,6 +70,10 @@ body {
     color: $color-black !important;
 }
 
+.hide {
+    display: none;
+}
+
 #cart-title,
 #orderform-title {
     color: $color-black;
@@ -77,8 +85,14 @@ body {
     letter-spacing: 0.1em;
     text-transform: uppercase;
 
-    @include mq(md, max) {
-        margin-left: 30px;
+    @media (max-width: 1024px) {
+        margin-left: 16px;
+    }
+
+    @media (min-width: 2500) {
+        font-weight: 700;
+        font-size: 48px;
+        line-height: 65px;
     }
 }
 
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index b2431d2..9166388 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,4 +1,7 @@
 /* _footer.scss */
+.desable {
+    display: none;
+}
 .footerCheckout {
     border-top: none;
     color: $color-gray2;
@@ -30,7 +33,7 @@
             margin: 5px;
         }
 
-        .product-image {
+        .products-image {
             width: 97.19%;
         }
 
@@ -81,8 +84,13 @@
         border-top: 1px solid $color-black2;
 
         .container {
+            width: 100%;
             display: flex;
             justify-content: space-between;
+
+            @media (max-width: 1024px) {
+                flex-direction: column;
+            }
         }
     }
 
@@ -95,9 +103,13 @@
         line-height: 12px;
         text-transform: capitalize;
         max-width: 40%;
-
-        @include mq(md, max) {
-            margin-bottom: 24px;
+        display: flex;
+        align-items: center;
+        @media (min-width: 2500px) {
+            font-weight: 400;
+            font-size: 20px;
+            line-height: 27px;
+            width: 537px;
             max-width: 100%;
         }
     }
@@ -108,8 +120,38 @@
         justify-self: center;
         list-style: none;
 
-        img {
-            width: 35px;
+        .logo-footer-cards {
+            display: flex;
+
+            .logo1,
+            .logo6,
+            .logo7 {
+                width: 35.65px;
+                @media (min-width: 2500px) {
+                    width: 69.63px;
+                }
+            }
+            .logo2,
+            .logo3,
+            .logo5 {
+                width: 34.78px;
+                @media (min-width: 2500px) {
+                    width: 67.93px;
+                }
+            }
+            .logo4 {
+                width: 36.52px;
+                @media (min-width: 2500px) {
+                    width: 71.33px;
+                }
+            }
+
+            .logo8 {
+                width: 53px;
+                @media (min-width: 2500px) {
+                    width: 103.52px;
+                }
+            }
         }
 
         @include mq(md, max) {
@@ -132,6 +174,18 @@
         list-style-type: none;
         margin: 0;
 
+        .logo-m3 {
+            margin: 0;
+            width: 28.66px;
+            height: 15.65px;
+        }
+
+        .logo-vtex {
+            margin: 0;
+            width: 44.92px;
+            height: 16px;
+        }
+
         li:last-child {
             margin-left: 16px;
         }
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 2c30d63..59fa4ce 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,10 +1,20 @@
 /* _header.scss */
 
 .headerCheckout {
+    width: 100%;
+    height: 96px;
+    border-bottom: 1px solid $color-black;
     .container {
         width: auto !important;
+        width: 79.532% !important;
         .progress-bar {
             width: 446px;
+            @media (min-width: 2500px) {
+                width: 790.7px;
+            }
+            @media (max-width: 1024px) {
+                display: none;
+            }
 
             ul {
                 list-style-type: none;
@@ -101,10 +111,6 @@
             }
         }
 
-        @media (max-width: 1024px) {
-            display: none;
-        }
-
         @media screen and (max-width: 1024px) {
             width: 100% !important;
         }
@@ -117,18 +123,26 @@
         align-items: center;
         display: flex;
         justify-content: space-between;
-
-        @media screen and (max-width: 1024px) {
-            margin: 29px 16px 0 16px;
+        @media (min-width: 2500px) {
+            margin-top: 10px;
         }
     }
 
     &__logo {
         width: 155.58px;
         height: 99.35%;
+
+        @media (min-width: 2500px) {
+            width: 382.07px;
+            height: 91.2px;
+        }
         img {
             max-width: 100%;
         }
+
+        @media (max-width: 1024px) {
+            margin-left: 16px;
+        }
     }
 
     &__safeBuy {
@@ -151,5 +165,8 @@
         i {
             margin-right: 8px;
         }
+        @media (max-width: 1024px) {
+            margin-right: 16px;
+        }
     }
 }
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index bb163c6..13cf688 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -10,12 +10,12 @@ $color-black2: #000000;
 
 
 $color-white: #fff;
-
 $color-gray: #6c6c6c;
 $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
+$color-gray6: #E0E0E0;
 
 $color-blue: #4267b2;
 $color-blue2: #00C8FF;