From 3b2da7666d873fe970eaba44e7c46927a813ffb4 Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Sun, 18 Dec 2022 20:50:46 -0300
Subject: [PATCH 1/2] feat: estiliza #/profile e #/email

---
 checkout/src/arquivos/js/components/Footer.js |  99 +++++++--
 checkout/src/arquivos/js/components/Header.js |  12 -
 .../sass/checkout/_checkout-autenticacao.scss | 210 ++++++++++++++----
 .../sass/checkout/_checkout-carrinho.scss     | 138 ++++++++++--
 .../sass/checkout/_checkout-pagamento.scss    |  42 ++++
 checkout/src/arquivos/sass/lib/_slick.scss    |   5 +-
 .../arquivos/sass/partials/_prateleira.scss   |  13 --
 .../src/arquivos/sass/utils/_variaveis.scss   |   1 +
 8 files changed, 405 insertions(+), 115 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ad5a611..9e0ccbe 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -1,3 +1,4 @@
+import { timers } from "jquery";
 import { waitElement } from "m3-utils";
 
 export default class Footer {
@@ -7,42 +8,85 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        this.replaceEmptyCartContent();
-        this.renderPrateleira();
-        this.stampsHTML();
-        this.developedByHTML();
-        this.onUpdate();
+        await this.stampsHTML();
+        await this.developedByHTML();
+        await this.replaceEmptyCartContent();
+        await this.renderPrateleira();
+        await this.onUpdate();
+        await this.replaceCartContent();
+        await this.replaceSummaryContent();
+        // await this.replaceProfileContent();
     }
 
     async selectors() {
+        console.log("iniciando 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.cartTitle = await waitElement("#cart-title");
         this.checkoutVazio = await waitElement(".empty-cart-content");
         this.emptyCartTitle = await waitElement(".empty-cart-title");
         this.continueShopping = await waitElement("#cart-choose-products");
+
+        this.cart = await waitElement(".cart");
+        this.cartTitle = await waitElement("#cart-title");
         this.frete = await waitElement(".shipping-date");
         this.unidade = await waitElement(".product-price");
-        this.iconMinus = await waitElement(".icon-minus-sign");
-        this.iconPlus = await waitElement(".icon-plus-sign");
+
+
         this.prateleira = await waitElement(".footerCheckout__prateleira");
-        this.naoSeiMeuCep = await waitElement(".ship-postalCode");
+
         // this.prateleiraSlick = await waitElement(".prateleira__carousel")
     }
 
-    replaceEmptyCartContent() {
+    async replaceEmptyCartContent() {
         if (this.checkoutVazio) {
-            console.log("entrou no if do replaceContent()")
+            console.log("entrou no if do replaceEmptyCart()")
             this.emptyCartTitle.textContent = "Seu Carrinho está vazio";
+            console.log(this.emptyCartTitle)
             this.continueShopping.textContent = "Continuar comprando";
-            this.frete.textContent = "Frete";
-            this.unidade.textContent = "Unidade";
-            this.naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal";
-
+            console.log(this.continueShopping)
         }
     }
 
-    onUpdate() {
+    async replaceCartContent() {
+        console.log("entrou no replaceCart")
+
+        if(this.cart) {
+            console.log("entrou no if do replaceCart()")
+            console.log(this.cart)
+            this.frete.textContent = "Frete";
+            console.log(this.frete)
+            this.unidade.textContent = "Unidade";
+            console.log(this.unidade)
+        }
+    }
+
+    async replaceSummaryContent() {
+        console.log("entrou no replaceSummary()")
+
+        const naoSeiMeuCep = await waitElement(".ship-postalCode");
+
+        if(naoSeiMeuCep) {
+            console.log("entrou no if naoSeiMeuCep")
+            naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal";
+            console.log(naoSeiMeuCep)
+        }
+    }
+
+    // async replaceProfileContent() {
+    //     if(this.identificacao) {
+
+    //     }
+    //     const identificacao = await waitElement(".accordion-heading");
+    //     if(identificacao) {
+    //         console.log("entrou no if identificacao")
+
+    //         identificacao.children[0].children[1].textContent = "Identificação";
+    //         console.log(identificacao)
+    //     }
+    // }
+
+    async onUpdate() {
+        console.log("chamada do 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
@@ -53,19 +97,18 @@ export default class Footer {
             let config = { attributes: true };
 
             // this.cartTitle.style.display = "none";
-            // this.prateleira.style.display = "none";
+            this.prateleira.style.display = "none";
 
             let observer = new MutationObserver((mutations) => {
                 mutations.forEach(() => {
 
                     if(this.checkoutVazio.style.display == "block") {
-                        console.log("Carrinho está vazio")
+                        console.log("Carrinho está vazio ou não está no #/cart")
                         this.cartTitle.style.display = "none";
                         this.prateleira.style.display = "none";
 
                     } else {
-
-                        console.log("Carrinho NÃO está vazio");
+                        console.log("Carrinho NÃO está vazio e está no #/cart");
                         this.cartTitle.style.display = "block";
                         this.prateleira.style.display = "block";
                     }
@@ -73,12 +116,22 @@ export default class Footer {
             });
 
             observer.observe(target, config);
+
+            window.addEventListener("hashchange", () => {
+
+                if (window.location.hash == "#/cart") {
+                    this.prateleira.style.display = "block";
+                } else {
+                    this.cartTitle.style.display = "block";
+                    this.prateleira.style.display = "none";
+                }
+            })
         }
     }
 
     async renderPrateleira() {
 
-        if (this.prateleira) {
+        if (this.prateleira && window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
 
             const prateleiraTitle = document.createElement("h2");
             const titleNode = document.createTextNode("Você também pode gostar:");
@@ -159,6 +212,8 @@ export default class Footer {
     }
 
     async stampsHTML() {
+        console.log("entrou no stamps")
+
         const stamps = await waitElement('.footerCheckout__stamps');
 
         // console.log(stamps.children[0], stamps.children[2]);
@@ -204,6 +259,8 @@ export default class Footer {
     }
 
     async developedByHTML() {
+        console.log("entrou no developedBy")
+
         const developedBy = await waitElement('.footerCheckout__developedBy');
 
         // console.log(developedBy.children[0].children[0]);
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index fbea03f..7df8cb7 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -182,16 +182,4 @@ export default class Header {
             })
         }
     }
-
-    // async progressBarMove() {
-    //     if (this.progressBar && window.innerWidth > 1024) {
-    //         const progressBarList = document.querySelectorAll(("#progressBar ul li"));
-    //         progressBarList.forEach((li) => {
-    //             console.log("Aqui vem seu código")
-    //         })
-    //     }
-    // }
 }
-
-
-
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index d785fcf..9c3cf62 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -10,14 +10,21 @@
 
 
 	.client-pre-email {
-		border-color: $color-gray4;
+        border: none;
+		// border-color: $color-gray4;
 		font-family: $font-family;
 		padding-top: 8px;
 
 		.link-cart {
 			a {
-				color: $black-300;
-				font-size: 14px;
+                font-family: $font-family-secundary;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 16px;
+                text-align: center;
+                text-transform: uppercase;
+                color: #000000;
 
 				&:hover {
 					color: lighen($black-300, 10);
@@ -34,28 +41,43 @@
 			h3 {
 				margin-bottom: 16px;
 
-				span {
-					color: #303030;
-					font-size: 24px;
+				span, small {
+                    line-height: 23px;
+                    font-family: $font-family-secundary;
+                    font-size: 20px;
+                    font-weight: 400;
+                    font-style: normal;
+                    text-align: center;
+                    text-transform: uppercase;
+                    color: $black-500;
 				}
 
-				small {
-					color: $color-gray4;
-				}
+				// small {
+				// 	color: $color-gray4;
+				// }
 			}
 		}
 
 		.client-email {
-			margin: 0 0 16px;
+			margin: 0 0 24px;
 
 			input {
-				box-shadow: none;
-				color: $black-300;
+                border: 1px solid $black-500;
+                border-radius: 5px 0px 0px 5px;
+
+
 				font-family: $font-family;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 16px;
+                // display: flex;
+                // align-items: center;
+                color: $black-500;
+
+				box-shadow: none;
 				padding: 0 16px;
-				border: 2px solid $color-gray3;
 				box-sizing: border-box;
-				border-radius: 5px;
 
 				@media (max-width: 490px) {
 					width: auto;
@@ -63,11 +85,23 @@
 			}
 
 			button {
-				background-color: $black-300;
-				border-radius: 5px;
-				border: none;
+                height: 52px;
+                padding: 12px 14px;
+                display: flex;
+                align-items: center;
+                border: none;
+                border-radius: 0px 8px 8px 0px;
+                line-height: 19px;
 				font-family: $font-family;
-				height: 54px;
+                font-size: 14px;
+                font-weight: 700;
+                font-style: normal;
+                letter-spacing: 0.05em;
+                text-align: center;
+                text-transform: uppercase;
+                color: $black-500;
+				background: $blue-300;
+
 				right: 0;
 				top: 0;
 
@@ -79,19 +113,36 @@
 			}
 
 			span.help.error {
-				color: red;
+                margin-top: 3px;
+                line-height: 16px;
+                font-family: $font-family;
+                font-size: 12px;
+                font-weight: 700;
+                font-style: normal;
+                text-align: center;
+				color: $red-300;
 			}
 		}
 
 		.emailInfo {
-			padding: 16px;
+            width: 400px;
+            height: 150px;
+			padding: 16px 16px 24px;
 			background-color: $color-white;
-			border: 1px solid $color-gray4;
-			border-radius: 0;
+			border: 1px solid $black-500;
+			border-radius: 5px;
 
 			h3 {
-				color: #303030;
-				margin: 0 0 8px 0;
+                margin: 0 0 9px;
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 700;
+                font-size: 12px;
+                line-height: 16px;
+
+                color: #000000;
+
+				// margin: 0 0 8px 0;
 			}
 
 			ul {
@@ -99,11 +150,18 @@
 
 				li {
 					span {
-						color: $black-300;
+                        font-family: 'Open Sans';
+                        font-style: normal;
+                        font-weight: 700;
+                        font-size: 12px;
+                        line-height: 16px;
+                        align-items: center;
+
+                        color: #000000;
 					}
 
 					i::before {
-						color: $black-300;
+						color: $blue-300;
 						font-size: 1rem;
 						opacity: 1;
 					}
@@ -122,20 +180,48 @@
 	.payment-data,
 	.client-profile-data {
 		.accordion-group {
-			border-radius: 0;
-			border: 1px solid $color-gray4;
+            border: 1px solid #F0F0F0;
+            border-radius: 8px;
+
 			font-family: $font-family;
-			padding: 16px;
+			padding: 28px 17px;
 
 			.accordion-heading {
 				span {
-					color: #303030;
-					margin-bottom: 8px;
+                    font-family: 'Tenor Sans';
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 16px;
+                    line-height: 19px;
+                    color: #292929;
+
+					margin-bottom: 15px;
 					padding: 0;
 
-					i::before {
-						fill: #303030;
-					}
+                    i::before {
+                        display: none;
+                    }
+
+                    .icon-user {
+                        ~ span {
+                            font-size: 0;
+                        }
+
+                        &::after {
+                            content: "Identificação";
+
+                            line-height: 19px;
+                            font-family: $font-family-secundary;
+                            font-size: 16px;
+                            font-weight: 400;
+                            font-style: normal;
+                            color: $black-300;
+
+                            letter-spacing: 0.05em;
+                            text-shadow: none;
+                            vertical-align: middle;
+                        }
+                    }
 				}
 
 				a {
@@ -147,28 +233,47 @@
 					display: flex;
 					justify-content: center;
 					padding: 6px 5px 6px 8px;
+
+                    // &::after {
+                    //     content: "";
+                    //     width: 20px;
+                    //     height: 20px;
+                    //     background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
+                    // }
 				}
 			}
 
 			.accordion-inner {
 				padding: 0;
 
+                .box-client-info {
+                    margin-bottom: 44px;
+                    padding-top: 11px;
+                }
+
 				/* General configurations */
 
 				.client-notice {
-					color: $black-300;
-				}
+                    display: none;
+                }
 
 				p {
+                    margin-bottom: 16px;
+
 					label {
-						color: $black-300;
-						font-weight: 500;
+                        font-family: 'Open Sans';
+                        font-style: normal;
+                        font-weight: 400;
+                        font-size: 14px;
+                        line-height: 19px;
+                        color: #7D7D7D;
 					}
 
 					select,
 					input {
-						border-radius: 0;
-						border: 1px solid $color-gray4;
+                        padding: 12px;
+                        border: 1px solid #E0E0E0;
+                        border-radius: 5px;
 						box-shadow: none;
 					}
 
@@ -178,6 +283,8 @@
 				}
 
 				.box-client-info-pj {
+                    display: none;
+
 					.link a#is-corporate-client,
 					.link a#not-corporate-client {
 						color: $black-300;
@@ -191,19 +298,32 @@
 				}
 
 				button.submit {
+                    width: 100%;
+                    background: #00C8FF;
+                    border-radius: 8px;
+
+                    font-family: 'Open Sans';
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 14px;
+                    line-height: 19px;
+                    text-align: center;
+                    letter-spacing: 0.05em;
+                    text-transform: uppercase;
+                    color: #FFFFFF;
+
 					border: none;
-					border-radius: 5px;
-					background: $black-300;
-					margin-top: 8px;
+					border-radius: 8px;
+					margin-bottom: 16px;
 					outline: none;
 					transition: all 0.2s linear;
 
 					&:hover {
-						background: lighten($black-300, 5);
+						background: lighten($blue-300, 5);
 					}
 
 					&:active {
-						background: darken($black-300, 5);
+						background: darken($blue-300, 5);
 					}
 				}
 
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 91744cc..f02492c 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -51,14 +51,23 @@
     }
 
     .cart-fixed {
+        // border: 1px solid #E5E5E5;
+        border-radius: 8px;
+
         font-family: $font-family;
         width: 100%;
+
         h2 {
+            margin-bottom: 34px;
+            padding: 0;
+            font-family: 'Tenor Sans';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 19px;
+            color: #292929;
+            text-align: left;
             background: $color-white;
-            border: none;
-            color: #303030;
-            font-size: 14px;
-            font-weight: 500;
         }
 
         .item-unavailable {
@@ -83,10 +92,41 @@
                     border-top: 1px solid #e5e5e5;
                 }
 
+                img {
+                    width: 60px;
+                    height: 60px;
+                    transform: translateX(-1);
+                }
+
+                span.badge {
+                    display: none;
+                }
+
                 .shipping-date,
                 .price {
                     color: #7d7d7d;
                 }
+
+                span.product-name,
+                span.shipping-date {
+                    font-family: 'Tenor Sans';
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 14px;
+
+                    color: #000000;
+                }
+
+                span.price {
+                    font-family: 'Open Sans';
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 16px;
+                    text-align: right;
+                    color: #292929;
+                }
             }
         }
 
@@ -95,11 +135,22 @@
             background: $color-white;
         }
 
-        #go-to-cart-button a {
-            color: #303030;
-            text-decoration: underline;
+        #go-to-cart-button {
+            margin: 10px 0;
+
+            a {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 16px;
+                text-align: right;
+                text-decoration-line: underline;
+                color: #000000;
+            }
         }
 
+
         .summary-totalizers {
             td.info {
                 width: 100%;
@@ -107,12 +158,29 @@
         }
 
         #payment-data-submit {
-            background: $black-300;
+            background: #298541;
+            border-radius: 8px;
             border: none;
-            border-radius: 0;
             color: $color-white;
             outline: none;
             transition: all 0.2s linear;
+
+            span {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 700;
+                font-size: 14px;
+                line-height: 19px;
+                text-align: center;
+                letter-spacing: 0.05em;
+                text-transform: uppercase;
+                color: #FFFFFF;
+            }
+
+            .icon-lock {
+                display: none;
+            }
+
             &:hover {
                 background: lighten($black-300, 5);
             }
@@ -133,14 +201,14 @@
         // border-collapse: separate;
         // border-spacing: 16px;
 
-        .product-item {
-            // height: 60px;
-            // background: green;
-        }
+        // .product-item {
+        //     // height: 60px;
+        //     // background: green;
+        // }
 
-        thead tr {
-            // background: purple;
-        }
+        // thead tr {
+        //     // background: purple;
+        // }
 
         th {
             padding: 0;
@@ -911,6 +979,13 @@
             }
 
             .accordion-group {
+
+                table {
+                    outline: 1px solid #E5E5E5;
+                    // border-radius: 0 0 8px 8px;
+                    // border-top: none;
+                }
+
                 tr {
                     padding: 10px 0;
                     line-height: 16px;
@@ -930,12 +1005,18 @@
 
                         &.info,
                         &.monetary {
+                            border-bottom: 1px solid #E0E0E0;
+                            box-shadow: none;
+
+                            font-family: 'Open Sans';
                             font-style: normal;
-                            font-weight: normal;
+                            font-weight: 400;
                             font-size: 14px;
-                            line-height: 16px;
-                            color: $black-300;
-                            padding: 10px 0;
+                            line-height: 19px;
+                            text-align: right;
+                            color: #7D7D7D;
+
+                            padding: 25px 17px;
                         }
 
                         &.info {
@@ -951,12 +1032,29 @@
                 tfoot {
                     td.info,
                     td.monetary {
+                        padding: 30px 17px 22px;
+
                         line-height: 25px;
                         font-family: $font-family;
                         font-size: 18px;
                         font-weight: 700;
                         font-style: normal;
                         color: $black-300;
+
+                        font-family: 'Open Sans';
+                        font-style: normal;
+                        font-weight: 700;
+                    }
+
+                    td.info {
+                        font-size: 18px;
+                        line-height: 25px;
+                    }
+
+                    td.monetary {
+                        font-size: 14px;
+                        line-height: 19px;
+                        text-align: right;
                     }
                 }
             }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 9a52731..480c35c 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -5,7 +5,49 @@ body .container-main.container-order-form .orderform-template.active {
         margin-right: 0;
         float: right;
     }
+
     .orderform-template-holder {
         width: 66.1132%;
+
+        .payment-data {
+            background: red;
+
+
+        }
     }
 }
+
+.link-gift-card {
+    a {
+        display: none;
+
+    }
+}
+
+.payment-group-list-btn {
+
+    // a {
+    //     color: yellow;
+
+    //     &:nth-child(1),
+    //     &:nth-child(2),
+    //     &:nth-child(3),
+    //     &:nth-child(4),
+    //     {
+    //     }
+    // }
+
+    a:nth-child(n+1):nth-child(-n+4),
+    a:nth-child(n+6):nth-child(-n+9),
+    a:nth-child(n+11):nth-child(-n+15)
+
+    {
+        display: none;
+    }
+
+    // a {
+    //     display: none;
+    // }
+}
+
+
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 61e8fac..b2a02db 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -130,15 +130,12 @@
     transform: translateY(-50%);
 }
 
-
 .slick-prev {
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
     no-repeat center center;
-    no-repeat center center;
     left: 10px;
-
-
 }
+
 .slick-next {
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
         no-repeat center center;
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 26981d8..056440d 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -73,9 +73,6 @@
             button {
                 padding: 5px;
             }
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
         }
 
         &--name {
@@ -89,16 +86,7 @@
             color: $black-500;
         }
 
-        &--options {
-            margin: 0 auto;
-            display: flex;
-            gap: 5px;
-            list-style: none;
 
-            button {
-                padding: 5px;
-            }
-        }
 
         &--link {
             button {
@@ -116,7 +104,6 @@
             }
         }
     }
-}
 
 // .slick-track {
 
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 06f0f95..af7c011 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -17,6 +17,7 @@ $gray-100: #EDEDED;
 $gray-300: #989898;
 $blue-300: #00C8FF;
 $color-gray5: #e5e5e5;
+$red-300: #FF0000;
 
 
 $color-gray: #6c6c6c;

From 61527ab28d56a4ad82f4e3f6426e7d9e44e467d5 Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Mon, 19 Dec 2022 01:42:59 -0300
Subject: [PATCH 2/2] feat: cria responsividade parcialmente

---
 checkout/src/arquivos/js/components/Footer.js | 90 +++++++++----------
 checkout/src/arquivos/js/components/Header.js | 12 ++-
 .../sass/checkout/_checkout-carrinho.scss     | 32 ++++++-
 .../sass/checkout/_checkout-vazio.scss        | 82 +++++++++++++----
 .../src/arquivos/sass/checkout/_checkout.scss |  9 ++
 .../src/arquivos/sass/partials/_footer.scss   | 66 +++++++++++++-
 .../src/arquivos/sass/partials/_header.scss   | 56 +++++++++++-
 .../arquivos/sass/partials/_prateleira.scss   | 12 +++
 .../src/arquivos/sass/utils/_variaveis.scss   |  4 +-
 9 files changed, 291 insertions(+), 72 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 9e0ccbe..e7f8f0f 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -1,4 +1,3 @@
-import { timers } from "jquery";
 import { waitElement } from "m3-utils";
 
 export default class Footer {
@@ -10,11 +9,9 @@ export default class Footer {
         await this.selectors();
         await this.stampsHTML();
         await this.developedByHTML();
-        await this.replaceEmptyCartContent();
-        await this.renderPrateleira();
         await this.onUpdate();
+        await this.renderPrateleira();
         await this.replaceCartContent();
-        await this.replaceSummaryContent();
         // await this.replaceProfileContent();
     }
 
@@ -23,9 +20,6 @@ export default class Footer {
         //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.emptyCartTitle = await waitElement(".empty-cart-title");
-        this.continueShopping = await waitElement("#cart-choose-products");
-
         this.cart = await waitElement(".cart");
         this.cartTitle = await waitElement("#cart-title");
         this.frete = await waitElement(".shipping-date");
@@ -37,16 +31,6 @@ export default class Footer {
         // this.prateleiraSlick = await waitElement(".prateleira__carousel")
     }
 
-    async replaceEmptyCartContent() {
-        if (this.checkoutVazio) {
-            console.log("entrou no if do replaceEmptyCart()")
-            this.emptyCartTitle.textContent = "Seu Carrinho está vazio";
-            console.log(this.emptyCartTitle)
-            this.continueShopping.textContent = "Continuar comprando";
-            console.log(this.continueShopping)
-        }
-    }
-
     async replaceCartContent() {
         console.log("entrou no replaceCart")
 
@@ -60,18 +44,6 @@ export default class Footer {
         }
     }
 
-    async replaceSummaryContent() {
-        console.log("entrou no replaceSummary()")
-
-        const naoSeiMeuCep = await waitElement(".ship-postalCode");
-
-        if(naoSeiMeuCep) {
-            console.log("entrou no if naoSeiMeuCep")
-            naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal";
-            console.log(naoSeiMeuCep)
-        }
-    }
-
     // async replaceProfileContent() {
     //     if(this.identificacao) {
 
@@ -96,8 +68,16 @@ export default class Footer {
             let target = this.checkoutVazio;
             let config = { attributes: true };
 
-            // this.cartTitle.style.display = "none";
-            this.prateleira.style.display = "none";
+            if(this.checkoutVazio.style.display == "block") {
+                console.log("Carrinho está vazio ou não está no #/cart")
+                this.cartTitle.style.display = "none";
+                this.prateleira.style.display = "none";
+
+            } else {
+                console.log("Carrinho NÃO está vazio e está no #/cart");
+                this.cartTitle.style.display = "block";
+                this.prateleira.style.display = "block";
+            }
 
             let observer = new MutationObserver((mutations) => {
                 mutations.forEach(() => {
@@ -116,22 +96,24 @@ export default class Footer {
             });
 
             observer.observe(target, config);
-
-            window.addEventListener("hashchange", () => {
-
-                if (window.location.hash == "#/cart") {
-                    this.prateleira.style.display = "block";
-                } else {
-                    this.cartTitle.style.display = "block";
-                    this.prateleira.style.display = "none";
-                }
-            })
         }
+
+        window.addEventListener("hashchange", () => {
+
+            if (window.location.hash == "#/cart") {
+                this.cartTitle.style.display = "none";
+                this.prateleira.style.display = "block";
+                // this.renderPrateleira();
+            } else {
+                this.cartTitle.style.display = "block";
+                this.prateleira.style.display = "none";
+            }
+        })
     }
 
     async renderPrateleira() {
 
-        if (this.prateleira && window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+        if (this.prateleira) {
 
             const prateleiraTitle = document.createElement("h2");
             const titleNode = document.createTextNode("Você também pode gostar:");
@@ -194,11 +176,15 @@ export default class Footer {
                 this.prateleira.appendChild(prateleiraSlick);
                 prateleiraSlick.innerHTML = cardsStructure;
 
-                if(window.innerWidth > 1024) {
+                // if(window.innerWidth > 1024) {
                     this.addCarrossel(prateleiraSlick);
-                }
+                // }
             }
         }
+
+        // else {
+        //     this.prateleira.style.display = none;
+        // }
     }
 
     async addCarrossel(element) {
@@ -207,7 +193,21 @@ export default class Footer {
         $(element).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
-            infinite: false
+            infinite: false,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                    }
+                },
+                {
+                    breakpoint: 768,
+                    settings: {
+                        slidesToShow: 2,
+                    }
+                }
+            ]
         });
     }
 
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 7df8cb7..466e0ac 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -7,18 +7,22 @@ export default class Header {
     }
 
     async init() {
+        console.log("entrou no init do header")
         await this.selectors();
-        this.progressBarStructure();
+        await this.progressBarStructure();
         await this.progressBarMove();
     }
 
     async selectors() {
         // this.header = await waitElement(".headerCheckout");
         this.progressBar = await waitElement("#progressBar");
+        console.log("progressBar await element")
     }
 
-    progressBarStructure() {
+    async progressBarStructure() {
         if (this.progressBar && window.innerWidth > 1024) {
+            console.log("entrou no if do progressBarStructure")
+
             this.progressBar.innerHTML = `
                 <ul class="progress-bar__container">
                     <li class="progress-bar__stage">
@@ -48,7 +52,9 @@ export default class Header {
 
         if (this.progressBar && window.innerWidth > 1024) {
 
-            const progressBarStages = document.querySelectorAll((".progress-bar__stage"));
+            console.log("entrou no if do progressBarMove")
+
+            const progressBarStages = document.querySelectorAll(".progress-bar__stage");
 
             progressBarStages.forEach((stage) => {
 
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index f02492c..ba849e0 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -220,6 +220,11 @@
             color: $black-300;
             text-align: left;
 
+            @include mq(xl, min) {
+                font-size: 28px;
+                line-height: 33px;
+            }
+
             @include mq(md, max) {
                 &.quantity-price,
                 &.shipping-date {
@@ -236,6 +241,7 @@
             margin: 0;
             padding: 0;
             text-align: left;
+
         }
 
         .product-image {
@@ -282,6 +288,11 @@
                     text-decoration: none;
                 }
 
+                @include mq(xl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+
                 @media (max-width: 490px) {
                     margin-left: 23px;
                 }
@@ -301,6 +312,11 @@
             font-style: normal;
             color: $gray-300;
 
+            @include mq(xl, min) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+
             @include mq(md, max) {
                 display: none;
             }
@@ -329,6 +345,10 @@
 
                 text-decoration-line: line-through;
 
+                @include mq(xl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
 
                 @include mq(sm, max) {
                     font-size: 12px;
@@ -463,6 +483,11 @@
                 font-size: 14px;
                 line-height: 16px;
                 color: $black-300;
+
+                @include mq(xl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
             }
         }
 
@@ -699,10 +724,15 @@
                         margin-bottom: 2px;
                         line-height: 14px;
                         font-family: $font-family;
-                        font-size: 12px;
+                        font-size: 0;
                         font-weight: normal;
                         font-style: normal;
                         color: $black-300;
+
+                        &::after {
+                            content: "Não sei meu código postal";
+                            font-size: 12px;
+                        }
                     }
 
                     input {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 5cec85c..c7722df 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -5,17 +5,43 @@
         text-align: center;
         text-transform: uppercase;
 
+
+
 		@include mq(md, max) {
             padding: 0 16px;
 		}
 	}
 
 	&-title {
+        font-size: 0;
         margin: 0 0 32px;
-        line-height: 33px;
-        font-family: $font-family;
-        font-size: 24px;
-        color: $black-500;
+
+        @include mq(sm, max) {
+            margin: 0 0 22px;
+        }
+
+        &::after {
+            content: "Seu Carrinho está vazio";
+            line-height: 33px;
+            font-family: $font-family;
+            font-size: 24px;
+            font-weight: 700;
+            font-style: normal;
+            color: $black-500;
+            text-align: center;
+            text-transform: uppercase;
+            vertical-align: bottom;
+
+            @include mq(xl, min) {
+                line-height: 65px;
+                font-size: 48px;
+            }
+
+            @include mq(lg, max) {
+                line-height: 25px;
+                font-size: 18px;
+            }
+        }
 	}
 
     &-message {
@@ -23,26 +49,46 @@
     }
 
 	&-links {
-        width: 325px;
-        height: 46px;
+        width: 32%; //327px;
+        height: 48px;
         margin: 0 auto;
-        border: 1px solid $black-500;
+
+        @include mq(xl, min) {
+            height: 66px;
+        }
+
+        @include mq(sm, max) {
+            width: 100%;
+        }
 
         .link-choose-products {
+            width: 100%;
+            height: 100%;
+            margin: 0;
             padding: 0;
-            line-height: 16px;
-            font-family: $font-family-secundary;
-            font-size: 14px;
-            border: none;
+            border: 1px solid $black-500;
             border-radius: 0;
-            color: $black-500;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0;
             background: $color-white;
-			transition: ease-in 0.22s all;
-
             box-shadow: none;
-
+			transition: ease-in 0.22s all;
 			// outline: none;
-			// letter-spacing: 0.05em;
+
+            &::after {
+                content: "Continuar comprando";
+                line-height: 16px;
+                font-family: $font-family-secundary;
+                font-size: 14px;
+                color: $black-500;
+
+                @include mq(xl, min) {
+                    line-height: 33px;
+                    font-size: 28px;
+                }
+            }
 
 			&:hover {
 				background: lighten($blue-300, 5);
@@ -52,3 +98,7 @@
 	}
 }
 
+
+.transactions-container.row-fluid {
+    display: none;
+}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 72b36fc..4d86421 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -96,6 +96,15 @@ body {
     @include mq(md, max) {
         margin-left: 30px;
     }
+
+    @include mq(xl, min) {
+        font-size: 48px;
+        line-height: 65px;
+    }
+
+    @include mq(lg, max) {
+        line-height: 33px;
+    }
 }
 
 .dropdown {
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 01bd1c6..afc70aa 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -4,11 +4,19 @@
     display: flex;
     flex-direction: column;
     gap: 54px;
+    // margin-top: 262px;
     // background: cyan;
 
 //     border-top: none;
 //     color: $color-gray2;
 
+    // @include mq(sm, max) {
+    //     position: fixed;
+    //     bottom: 0;
+    //     background: $color-white;
+    //     z-index: 5;
+    // }
+
     &__prateleira {
         // margin-top: 101px;
         height: 448px;
@@ -26,6 +34,16 @@
 //     //     // align-items: center;
 //     //     // display: flex;
 //     //     // justify-content: space-between;
+
+        @include mq(xl, min) {
+            padding: 16px 63px;
+        }
+
+        @include mq(sm, max) {
+            padding: 16px;
+        }
+
+
     }
 
 
@@ -39,6 +57,14 @@
         grid-template-columns: repeat(3, 1fr);
         align-items: center;
 
+        @include mq(lg, max) {
+            display: grid;
+            grid-template-areas:
+                "stamps"
+                "address"
+                "developedBy"
+        }
+
         // text-align: center;
         //     //     // grid-auto-flow: column;
 //     //     // grid-auto-columns: max-content;
@@ -64,12 +90,24 @@
         // max-width: 40%;
         justify-self: flex-start;
 
+        @include mq(xl, min) {
+            font-size: 20px;
+            line-height: 27px;
+        }
+
 
 
         @include mq(md, max) {
             margin-bottom: 24px;
             max-width: 100%;
         }
+
+        @include mq(lg, max) {
+            margin-bottom: 16px;
+            grid-area: address;
+            display: flex;
+            justify-content: space-between;
+        }
     }
 
     &__stamps {
@@ -80,9 +118,18 @@
 
         margin: 0;
 
-        @include mq(md, max) {
-            align-self: center;
-            margin-bottom: 12px;
+        // @include mq(md, max) {
+        //     align-self: center;
+        //     margin-bottom: 12px;
+        // }
+
+        @include mq(lg, max) {
+            margin-bottom: 16px;
+            grid-area: stamps;
+            display: grid;
+            grid-auto-flow: column;
+            grid-auto-columns: max-content;
+            gap: 4px;
         }
 
         &__divider {
@@ -106,6 +153,10 @@
                 display: block;
                 height: 20px;
                 width: auto;
+
+                @include mq(xl, min) {
+                    height: 40px;
+                }
             }
     }
 
@@ -113,6 +164,10 @@
         display: block;
         width: 53px;
         height: 33px;
+
+        @include mq(lg, max) {
+            width: 30px;
+        }
     }
 
     &__developedBy {
@@ -123,6 +178,11 @@
         margin: 0;
         justify-self: flex-end;
 
+        @include mq(lg, max) {
+            grid-area: developedBy;
+            justify-self: flex-start;
+        }
+
         a {
             align-items: center;
             color: $black-300;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 7820251..2a8a424 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -6,22 +6,48 @@
     width: 100%;
     border-bottom: 1px solid $black-500;
 
+    @include mq(xl, min) {
+        padding: 30px 256px;
+    }
+
+    @include mq(lg, max) {
+        padding: 16px 16px;
+    }
+
     .container {
         width: auto !important;
     }
 
     &__wrapper {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 1fr 43.22% 1fr;
+        //repeat(3, 1fr);
         // display: flex;
         // justify-content: space-between;
         align-items: center;
+
+        @include mq(xl, min) {
+            grid-template-columns: 1fr 54.27% 1fr;
+        }
+
+        @include mq(lg, max) {
+            display: flex;
+            justify-content: space-between;
+        }
     }
 
     &__logo {
         img {
             height: 37.14px;
             width: auto;
+
+            @include mq(xl, min) {
+                height: 91.2px;
+            }
+
+            @include mq(lg, max) {
+                height: 32.12px;
+            }
         }
     }
 
@@ -30,7 +56,7 @@
         // top: 50%;
         // left: 50%;
         // transform: translate(-50%, -50%);
-        width: 440px;
+        // width: 43.22%; //440px;
 
         &__container {
             // position:relative;
@@ -58,7 +84,14 @@
                 line-height: 14px;
                 font-family: $font-family-secundary;
                 font-size: 12px;
+                font-weight: 400;
+                font-style: normal;
                 color: $black-500;
+
+                @include mq(xl, min) {
+                    line-height: 28px;
+                    font-size: 24px;
+                }
             }
 
             &--circle {
@@ -70,6 +103,11 @@
                 &.active {
                     background: $black-500;
                 }
+
+                @include mq(xl, min) {
+                    width: 24px;
+                    height: 24px;
+                }
             }
 
             &::before,
@@ -106,6 +144,15 @@
         img {
             width: 12px;
             height: 15px;
+
+            @include mq(xl, min) {
+                width: 29.47px;
+                height: 41.46px;
+            }
+
+            @include mq(lg, max) {
+                height: 13.33px;
+            }
         }
 
         span {
@@ -114,6 +161,11 @@
             font-size: 12px;
             text-transform: uppercase;
             color: $black-300;
+
+            @include mq(xl, min) {
+                line-height: 33px;
+                font-size: 24px;
+            }
         }
     }
 }
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 056440d..05d9c68 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -45,6 +45,18 @@
 
         &--image {
             height: 242px;
+
+            @include mq(xl, min) {
+                height: 485px;
+            }
+
+            @include mq(lg, max) {
+                height: 320px;
+            }
+
+            @include mq(sm, max) {
+                height: 164px;
+            }
         }
 
         &--description {
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index af7c011..721fca6 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -34,8 +34,8 @@ $grid-breakpoints: (
 	cstm: 400,
 	sm: 576px,
 	md: 768px,
-	lg: 992px,
-	xl: 1200px
+	lg: 1025px,
+	xl: 2500px
 ) !default;
 
 $z-index: (