feat: adição do slick e scss do desktop

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

@@ -1,3 +1,4 @@
+import { data } from "jquery";
 import { waitElement } from "m3-utils";
 
 export default class Footer {
@@ -10,74 +11,151 @@ export default class Footer {
         this.createPaymentsIcons();
         this.createVtexpciIcon();
         this.createDevIcons();
-        // this.onUpdate();
+        this.onUpdate();
+        this.events();
+    }
+
+    events() {
+        window.addEventListener("hashchange", () => {
+            if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
+                this.listaPrateleira.style.display = "flex";
+            }
+            if (window.location.hash != "#/cart") {
+                this.listaPrateleira.style.display = "none";
+            }
+        });
+        addEventListener("resize", () => {
+            this.addCarrossel();
+        });
     }
 
     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.payments = await waitElement(".footerCheckout__payments");
         this.vtexpci = await waitElement(".footerCheckout__vtexpci");
         this.devIncons = await waitElement(".footerCheckout__developedBy");
+        this.listaPrateleira = await waitElement(".footerCheckout__prateleira");
+        this.titulo = await waitElement(".transactions-container");
+    }
+
+    onUpdate() {
+        let target = this.checkoutVazio;
+        let list = this.listaPrateleira;
+        if (target.style.display == "none" && window.location.hash == "#/cart") {
+            list.style.display = "flex";
+            this.fetchApi();
+        } else {
+            list.style.display = "none";
+        }
+        let config = { childList: true, attributes: true };
+        let observer = new MutationObserver((mutations) => {
+            if (!this.listaPrateleira.classList.contains("fetch")) {
+                this.fetchApi();
+            }
+            mutations.forEach(function (mutation) {
+                if (target.style.display != "none") {
+                    list.style.display = "none";
+                } else list.style.display = "flex";
+            });
+        });
+
+        observer.observe(target, config);
+    }
+
+    async addCarrossel() {
+        const elemet = await waitElement(".slick-list");
+        if ($(elemet).hasClass("slick-initialized")) {
+            $(elemet).slick("unslick");
+        }
+        if (window.innerWidth > 1024) {
+            $(elemet).not(".slick-initialized").slick({
+                slidesToShow: 4,
+                slidesToScroll: 1,
+            });
+        } else if (window.innerWidth > 375) {
+            $(elemet).not(".slick-initialized").slick({
+                slidesToShow: 3,
+                slidesToScroll: 1,
+            });
+        } else if (window.innerWidth <= 375) {
+            $(elemet).not(".slick-initialized").slick({
+                slidesToShow: 2,
+                slidesToScroll: 1,
+            });
+        }
     }
 
     createPaymentsIcons() {
         this.payments.innerHTML = `
-            <ul class="payments-icons-wrapper">
+        <ul class="payments-icons-wrapper">
-                <li>
+            <li>
+                <figure>
                     <img
                         src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
                         alt=""
                     />
-                </li>
+                </figure>
-                <li>
+            </li>
+            <li>
+                <figure>
                     <img
                         src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
                         alt=""
                     />
-                </li>
+                </figure>
-                <li>
+            </li>
+            <li>
+                <figure>
                     <img
                         src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
                         alt=""
                     />
-                </li>
+                </figure>
-                <li>
+            </li>
+            <li>
+                <figure>
                     <img
                         src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
                         alt=""
                     />
-                </li>
+                </figure>
-                <li>
+            </li>
+            <li>
+                <figure>
                     <img
                         src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
                         alt=""
                     />
-                </li>
+                </figure>
-                <li>
+            </li>
+            <li>
+                <figure>
                     <img
                         src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
                         alt=""
                     />
-                </li>
+                </figure>
-                <li>
+            </li>
+            <li>
+                <figure>
                     <img
                         src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
                         alt=""
                     />
-                </li>
+                </figure>
-            </ul>
+            </li>
-        </div>
+        </ul>
         `;
     }
 
     createVtexpciIcon() {
         this.vtexpci.innerHTML = `
-            <img class="vtex-icon"
+        <figure class="vtex-icon">
+            <img
                 src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
                 alt=""
             />
+        </figure>
         `;
     }
 
@@ -86,38 +164,62 @@ export default class Footer {
         <li>
             <a href="https://vtex.com/br-pt/">
                 <span>Powered By</span>
-                <img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
+                <figure>
+                    <img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
+                </figure>
             </a>
         </li>
 
         <li>
             <a href="https://agenciam3.com/">
                 <span>Developed By</span>
-                <img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
+                <figure>
+                    <img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
+                </figure>
             </a>
         </li>
         `;
     }
 
-    onUpdate() {
+    async fetchApi() {
-        //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
+        this.titulo.innerHTML = `
-        // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
+        <h3 class="title_slick">Você também pode gostar:</h3>
-        // 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 config = { childList: true, attributes: true };
-        let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
-                console.log(mutation.type);
-            });
-        });
 
-        observer.observe(target, config);
+        fetch(
-    }
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
-    async addCarrossel() {
+        )
-        const elemento = await waitElement("#my-element");
+            .then((response) => response.json())
-        $(elemento).slick({
+            .then((data) => {
-            slidesToShow: 4,
+                const ul = document.createElement("ul");
-            slidesToScroll: 1,
+                ul.classList.add("slick-list");
-        });
+                this.listaPrateleira.appendChild(ul);
+
+                data.map((item) => {
+                    let cores = "";
+                    for (let i = 0; i < item.items.length; i++) {
+                        cores += `<p>${item.items[i].name}</p>`;
+                    }
+                    const li = document.createElement("li");
+                    li.setAttribute("name", item.itemId);
+                    li.classList.add("slick-list__itemList");
+
+                    li.innerHTML = `
+                        <figure class="img-container">
+                        <img class="itemImg" src="${item.items[0].images[0].imageUrl}">
+                        </figure>
+                        <figcaption class="itemtName">${item.productName}</figcaption>
+                        <div class="itemSku">
+                            ${cores}
+                        </div>
+                        <a class="itemLink" type="button" href="${item.link}">VER PRODUTO</a>
+                        `;
+                    ul.appendChild(li);
+                    this.listaPrateleira.classList.add("fetch");
+                });
+            })
+            .then(() => {
+                this.addCarrossel();
+            });
     }
 }

checkout/src/arquivos/js/components/Header.js

@@ -8,14 +8,241 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.createProgressBar();
+        await this.progressBarProgress();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.header = await waitElement(".headerCheckout");
-            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
+        this.progressBar = await waitElement("#progressBar");
-            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
+    }
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+    createProgressBar() {
-        });
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+                <ul>
+                    <li>
+                        <div class="containerLi">
+                            <div>
+                                <p class="progress-bar-text">Meu carrinho</p>
+                                <p id="progress-bar-circle-1" class="progress-bar-circle-1"></p>
+                                <p class="progress-bar-line-1"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="central">
+                        <div class="containerLi">
+                            <div>
+                                <p class="progress-bar-text">Dados Pessoais</p>
+                                <p id="progress-bar-circle-2" class="progress-bar-circle-2"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="containerLi">
+                            <div>
+                                <p class="progress-bar-text">Pagamento</p>
+                                <p id="progress-bar-circle-3" class="progress-bar-circle-3"></p>
+                                <p class="progress-bar-line-2"></p>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            `;
+        }
+        if (this.progressBar && window.innerWidth <= 1024) {
+            this.progressBar.innerHTML = ``;
+        }
+    }
+    async progressBarProgress() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const progressBarList = document.querySelectorAll("#progressBar ul li");
+            progressBarList.forEach((li) => {
+                if (window.location.href == "https://m3academy.myvtex.com/checkout/#/cart") {
+                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                        li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
+                            "active"
+                        );
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.remove("active");
+                        }
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.remove("active");
+                        }
+                    }
+                } else if (
+                    window.location.href == "https://m3academy.myvtex.com/checkout/#/email" ||
+                    window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" ||
+                    window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
+                ) {
+                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.remove("active");
+                        }
+                    }
+
+                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                        li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
+                            "active"
+                        );
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.remove("active");
+                        }
+                    }
+                } else if (
+                    window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.remove("active");
+                        }
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                        if (
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.contains("active")
+                        ) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.remove("active");
+                        }
+                    }
+                    if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                        li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
+                            "active"
+                        );
+                    }
+                }
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-1"
+                            ].classList.add("active");
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-2"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-2"
+                                ].classList.remove("active");
+                            }
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.remove("active");
+                            }
+                        }
+                    } else if (
+                        window.location.hash == "#/email" ||
+                        window.location.hash == "#/profile" ||
+                        window.location.hash == "#/shipping"
+                    ) {
+                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-1"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-1"
+                                ].classList.remove("active");
+                            }
+                        }
+
+                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                            console.log("teste 1");
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.add("active");
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.remove("active");
+                            }
+                        }
+                    } else if (window.location.hash == "#/payment") {
+                        if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-1"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-1"
+                                ].classList.remove("active");
+                            }
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                            if (
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-2"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-2"
+                                ].classList.remove("active");
+                            }
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-3"
+                            ].classList.add("active");
+                        }
+                    }
+                });
+            });
+        }
     }
 }

checkout/src/arquivos/sass/checkout.scss

@@ -1,5 +1,6 @@
 @import "./utils/all";
 @import "./lib/slick";
+@import "./partials/prateleira";
 @import "./partials/header";
 @import "./partials/footer";
 @import "./checkout/checkout.scss";

checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss

@@ -5,7 +5,8 @@
 }
 
 .cart-template {
-    font-family: $font-family;
+    font-family: $font-family-secundary;
+
     @include mq(md, max) {
         padding: 0 0;
     }
@@ -13,7 +14,7 @@
         display: none;
     }
     .cart {
-        border: 3px solid $color-gray3;
+        border: 1px solid $gray-100;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
@@ -48,7 +49,7 @@
         }
 
         .cart {
-            border: 1px solid $gray-200;
+            // border: 1px solid $gray-200;
 
             ul li {
                 border-top: none;
@@ -63,6 +64,9 @@
 
                 .shipping-date,
                 .price {
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 16px;
                     color: #7d7d7d;
                 }
             }
@@ -111,10 +115,11 @@
         }
 
         th {
+            // text-align: initial;
             color: $black;
             padding: 0 0 16px;
             font-style: normal;
-            font-weight: bold;
+            font-weight: 400;
             font-size: 14px;
             line-height: 16px;
 
@@ -155,7 +160,7 @@
             }
 
             a {
-                color: $color-blue;
+                color: $black;
                 font-style: normal;
                 font-weight: normal;
                 font-size: 12px;
@@ -163,7 +168,7 @@
                 transition: ease-in 0.22s all;
 
                 &:hover {
-                    color: darken($color-blue, 10);
+                    color: darken($black, 10);
                     text-decoration: none;
                 }
 
@@ -179,7 +184,7 @@
         }
 
         td.shipping-date {
-            color: $color-gray2;
+            color: $gray-150;
             font-size: 12px;
             line-height: 14px;
 
@@ -200,7 +205,7 @@
             }
 
             span.list-price {
-                color: $color-gray2;
+                color: $gray-150;
                 font-size: 12px;
                 line-height: 14px;
                 text-decoration-line: line-through;
@@ -234,7 +239,7 @@
 
             input {
                 background-color: $white;
-                border: 1px solid $color-gray3;
+                border: 1px solid $white;
                 border-radius: 0;
                 border-width: 0 1px;
                 display: block;
@@ -242,7 +247,7 @@
                 margin: 0 !important;
                 padding: 8px 0;
                 width: 38px;
-                color: $color-gray2;
+                color: $black;
                 box-shadow: none;
 
                 @include mq(lg, max) {
@@ -262,14 +267,14 @@
 
             .icon-minus-sign {
                 &:before {
-                    content: "-";
+                    color: $blue;
                     font-size: 16px;
                 }
             }
 
             .icon-plus-sign {
                 &:before {
-                    content: "+";
+                    color: $blue;
                     font-size: 14px;
                 }
             }
@@ -297,10 +302,10 @@
             }
             span {
                 font-style: normal;
-                font-weight: normal;
+                font-weight: 700;
                 font-size: 14px;
                 line-height: 16px;
-                color: $black;
+                color: $gray-500;
             }
         }
 
@@ -352,11 +357,12 @@
 
                 .srp-main-title {
                     margin: 32px 0 12px;
+                    font-family: "Open Sans";
                     font-style: normal;
-                    font-weight: normal;
+                    font-weight: 400;
                     font-size: 24px;
-                    line-height: 28px;
+                    line-height: 33px;
-                    color: $color-gray2;
+                    color: $black;
 
                     @include mq(md, max) {
                         margin-top: 0;
@@ -364,19 +370,21 @@
                 }
 
                 .srp-description {
-                    color: $color-gray2;
+                    color: $gray-150;
+                    font-family: "Open Sans";
                     font-size: 12px;
                     line-height: 18px;
                     margin: 0 0 12px;
                 }
 
                 button.shp-open-options {
-                    background-color: $color-gray5;
+                    background-color: $gray-50;
                     border: none;
                     border-radius: 5px;
-                    color: $color-gray2;
+                    color: $black;
                     font-size: 16px;
                     letter-spacing: 0.05em;
+                    font-family: "Open Sans";
                     line-height: 19px;
                     font-weight: 500;
                     outline: none;
@@ -384,11 +392,11 @@
                     transition: all 0.2s linear;
 
                     &:hover {
-                        background-color: lighten($color-gray5, 5);
+                        background-color: lighten($gray-50, 5);
                     }
 
                     &:active {
-                        background-color: darken($color-gray5, 5);
+                        background-color: darken($gray-50, 5);
                     }
                 }
             }
@@ -603,12 +611,12 @@
                     }
                 }
                 span {
-                    font-family: $font-family;
+                    font-family: $font-family-secundary;
                     font-style: normal;
-                    font-weight: normal;
+                    font-weight: 400;
                     font-size: 12px;
                     line-height: 14px;
-                    color: $color-blue;
+                    color: $black;
                     text-decoration: none;
                 }
             }
@@ -636,7 +644,7 @@
                     font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: $color-gray2;
+                    color: $gray-150;
                     cursor: none;
                 }
 
@@ -716,7 +724,7 @@
                             font-weight: normal;
                             font-size: 14px;
                             line-height: 16px;
-                            color: $black;
+                            color: $gray-500;
                             padding: 12px 0;
                         }
 
@@ -733,11 +741,12 @@
                 tfoot {
                     td.info,
                     td.monetary {
+                        font-family: $font-family;
                         font-style: normal;
-                        font-weight: normal;
+                        font-weight: 700;
                         font-size: 18px;
-                        line-height: 21px;
+                        line-height: 25px;
-                        color: $black;
+                        color: $gray-500;
                     }
                 }
             }
@@ -771,39 +780,40 @@
             }
 
             a {
-                font-family: $font-family;
+                font-family: $font-family-secundary;
                 font-style: normal;
-                font-weight: normal;
+                font-weight: 400;
                 font-size: 12px;
                 line-height: 14px;
-                color: $color-blue;
+                color: $black;
             }
         }
 
         .btn-place-order-wrapper {
             a {
-                background: $color-green;
+                background: $blue;
                 border: none;
                 border-radius: 5px;
                 display: block;
                 font-size: 0;
                 transition: ease-in 0.22s all;
                 padding: 12px 19px;
+                cursor: pointer;
 
                 &:hover {
-                    background-color: darken($color-green, 5);
+                    background-color: darken($blue, 5);
                 }
 
                 &:after {
                     content: "finalizar compra";
                     font-family: $font-family;
-                    font-weight: 500;
+                    font-weight: 700;
-                    font-size: 13px;
+                    font-size: 14px;
+                    line-height: 19px;
                     letter-spacing: 0.05em;
-                    color: $white;
+                    color: $black;
                     text-transform: uppercase;
                     vertical-align: middle;
-                    line-height: 19px;
                     text-shadow: none;
                 }
             }

checkout/src/arquivos/sass/checkout/_checkout-vazio.scss

@@ -1,6 +1,8 @@
 .empty-cart {
     font-family: $font-family;
+
     &-content {
+        height: 100%;
         color: $black;
         text-align: center;
 

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -7,14 +7,25 @@ html {
     height: 100%;
     min-height: 100%;
 }
+footer {
+    margin-top: auto;
+}
 
 footer .footerCheckout__wrapper {
     width: 100%;
     margin: auto auto 0 auto;
 }
-footer .footerCheckout__prateleira,
+footer .footerCheckout__prateleira {
+    width: 100%;
+    margin: 0 auto 56px;
+
+    @include mq(dt, min) {
+        width: 79.376%;
+    }
+}
+
 header {
-    width: 79.53125%;
+    width: 100%;
     margin: 0 auto;
 }
 
@@ -23,11 +34,16 @@ body {
     flex-direction: column;
     min-height: 100% !important;
     padding-top: 0 !important;
+    text-decoration: none;
 
     @include mq(md, max) {
         padding-left: 0;
     }
 
+    a:hover {
+        text-decoration: none !important;
+    }
+
     &.body-cart {
         font-family: $font-family;
     }
@@ -68,7 +84,7 @@ body {
 
 #cart-title,
 #orderform-title {
-    color: $color-gray2;
+    color: $gray-500;
     font-family: $font-family;
     font-weight: 500;
     font-size: 36px;
@@ -96,7 +112,7 @@ body {
         &::before,
         &::after {
             content: "";
-            background: $color-gray2;
+            background: $gray-150;
             display: block;
             float: right;
             height: 2px;

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

@@ -20,6 +20,10 @@
 
     &__wrapper {
         border-top: 1px solid $black;
+
+        @media screen and (max-width: 490px) {
+            padding: 7px 0;
+        }
     }
 
     &__address {
@@ -56,22 +60,13 @@
 
     &__stamps {
         display: flex;
+        height: 33px;
         align-items: center;
         list-style: none;
         margin: 0 0 0 5px;
 
-        @include mq(Gf, max) {
+        li {
-            flex-direction: column;
+            height: 33px;
-            align-items: start;
-            gap: 5px;
-
-            .footerCheckout__stamps__divider {
-                display: none;
-            }
-
-            .footerCheckout__vtexpci {
-                margin-left: 0 !important;
-            }
         }
 
         @include mq(dt, min) {
@@ -86,25 +81,31 @@
 
         .payments-icons-wrapper {
             display: flex;
-            align-items: center;
+            width: 100%;
-            justify-content: center;
             list-style: none;
             margin: 0;
+            gap: 4px;
 
-            li {
+            figure {
+                padding: 6px 0 7px;
                 width: 35.65px;
-            }
+                height: 20px;
-
+                margin: 0;
-            @include mq(tv, min) {
+                @include mq(tv, min) {
-                li {
                     width: 69.63px;
                 }
+
+                @include mq(Gf, max) {
+                    width: 28px;
+                }
             }
         }
 
         .footerCheckout__stamps__divider {
-            border-left: 1px solid $gray;
+            border-left: 1px solid $gray-125;
-            margin-left: 4px;
+            margin: 0 10px;
+            height: 33px;
+            padding: 0 0 9px;
 
             @include mq(dt, min) {
                 margin-left: 11.35px;
@@ -112,11 +113,9 @@
         }
 
         .footerCheckout__vtexpci {
-            margin-left: 10px;
-
             .vtex-icon {
                 width: 53px;
-                height: 33px;
+                margin: 0;
             }
 
             @include mq(tv, min) {
@@ -148,13 +147,19 @@
 
         li {
             margin-left: 16px;
+
+            figure {
+                margin: 0;
+            }
         }
 
         .vtex-icon {
             width: 44.92px;
+            margin: 0;
         }
         .m3-icon {
             width: 28.66px;
+            margin: 0;
         }
 
         a {

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

@@ -1,36 +1,164 @@
-/* _header.scss */
 .headerCheckout {
     .container {
         width: auto !important;
     }
     &__wrapper {
-        align-items: center;
         display: flex;
+        align-items: center;
         justify-content: space-between;
+        padding: 16px;
+        border-bottom: 1px solid $black;
+
+        @media (min-width: 1025px) {
+            padding: 33.5px 130px;
+        }
+
+        @media (min-width: 2500px) {
+            padding: 33.5px 256px;
+        }
+    }
+    .progress-bar {
+        display: flex;
+        flex-direction: column;
+        right: 31.5%;
+        top: 33%;
+
+        @media (min-width: 2500px) {
+            right: 41%;
+        }
+
+        .containerLi {
+            display: flex;
+            position: relative;
+            align-items: center;
+        }
+        ul {
+            display: flex;
+            margin: 0;
+            gap: 100px;
+            list-style: none;
+        }
+
+        p {
+            margin-bottom: 0;
+        }
+
+        &-text {
+            font-family: $font-family-secundary;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+
+            @media (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+        }
+
+        &-line-1,
+        &-line-2 {
+            position: absolute;
+            width: 169px;
+            top: 82%;
+            left: 55%;
+            border: 1px solid $black;
+
+            @media (min-width: 2500px) {
+                width: 240px;
+                top: 79%;
+                left: 55%;
+            }
+        }
+
+        &-line-2 {
+            width: 166px;
+            left: -223%;
+
+            @media (min-width: 2500px) {
+                width: 230px;
+                left: -143%;
+            }
+        }
+
+        &-circle-1,
+        &-circle-2,
+        &-circle-3 {
+            display: flex;
+            height: 10px;
+            width: 10px;
+            align-self: center;
+            background: $white;
+            border: 1px solid $black;
+            border-radius: 50%;
+            margin-left: 40%;
+            margin-top: 9px;
+            padding: 0;
+
+            @media (min-width: 2500px) {
+                height: 22px;
+                width: 22px;
+            }
+        }
+
+        .active {
+            background: $black;
+        }
     }
 
     &__logo {
-        img {
+        width: 45.35%;
-            height: 52px;
+
-            width: auto;
+        @media (min-width: 1025px) {
+            width: 17.059%;
+        }
+
+        @media (min-width: 1025px) {
+            width: 15.28%;
+
+            img {
+                width: 100%;
+            }
+        }
+        @media (min-width: 2500px) {
+            width: 17.059%;
         }
     }
 
     &__safeBuy {
+        display: flex;
+        position: relative;
+
         span {
-            align-items: center;
+            min-width: fit-content;
-            display: flex;
+            height: 50%;
             text-transform: uppercase;
             font-family: $font-family;
             font-style: normal;
             font-weight: normal;
             font-size: 12px;
-            line-height: 14px;
+            line-height: 16px;
             color: $color-gray;
+            margin-left: 8px;
+
+            @media (min-width: 2500px) {
+                font-style: normal;
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
-        i {
+        img {
-            margin-right: 8px;
+            position: absolute;
+            width: 11.25%;
+            top: -11%;
+            left: -11px;
+
+            @media (min-width: 2500px) {
+                width: 14.34%;
+                top: -15%;
+                left: -27px;
+            }
         }
     }
 }

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

@@ -1 +1,82 @@
-/* _prateleira.scss */
+.title_slick {
+    font-family: $font-family-secundary;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+    text-align: center;
+    margin: 20px 0;
+}
+
+footer .footerCheckout__prateleira {
+    .slick-list {
+        width: 100%;
+
+        &__itemList {
+            display: flex !important;
+            flex-direction: column;
+            list-style: none;
+            align-items: center;
+            justify-content: center;
+            width: 95.28% !important;
+            margin: 0;
+
+            .img-container {
+                margin: 0;
+            }
+
+            .itemtName {
+                font-family: $font-family-secundary;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 13px;
+                line-height: 18px;
+                color: $black;
+                margin: 20px 0 !important;
+            }
+
+            .itemSku {
+                display: flex;
+                gap: 10px;
+                list-style: none;
+                margin-bottom: 20px;
+
+                p {
+                    border-radius: 8px;
+                    background: $blue;
+                    color: $white;
+                    padding: 5px;
+                }
+            }
+
+            .itemLink {
+                width: 100%;
+                border-radius: 8px;
+                background: $blue;
+                padding: 12px 0;
+                text-align: center;
+                color: $white;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .slick-prev {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
+            no-repeat center center;
+        z-index: 4;
+        left: 22px;
+        top: 41%;
+        border: none;
+        height: 30px;
+    }
+    .slick-next {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+            no-repeat center center;
+        z-index: 4;
+        right: 20px;
+        top: 41%;
+        border: none;
+        height: 30px;
+    }
+}

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -9,14 +9,17 @@ $font-family-secundary: "Tenor Sans", sans-serif;
 $black: #000;
 $white: #fff;
 
-$gray: #c4c4c4;
+$gray-50: #e5e5e5;
+$gray-100: #f0f0f0;
+$gray-125: #c4c4c4;
+$gray-150: #989898;
 $gray-200: #8d8d8d;
 $gray-500: #292929;
 
+$blue: #00c8ff;
+
 $color-gray: #6c6c6c;
-$color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
-$color-gray5: #e5e5e5;
 
 $color-blue: #4267b2;
 
@@ -25,7 +28,7 @@ $color-green: #4caf50;
 /* Grid breakpoints */
 $grid-breakpoints: (
     xs: 0,
-    Gf: 322px,
+    Gf: 328px,
     cstm: 400,
     sm: 576px,
     md: 768px,