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

@@ -6,14 +6,26 @@ export default class Footer {
     }
 
     async init() {
+        this.productList = [];
+        this.carregaProdutos();
         await this.selectors();
-        // this.onUpdate();
+        await this.criaStamps();
+        await this.criaDevelopedBy();
+        this.criaPrateleira();
+        this.verificaListaDeProdutos();
+        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.prateleira = await waitElement(".footerCheckout__prateleira");
         this.checkoutVazio = await waitElement(".empty-cart-content");
+
+        this.stamps = await waitElement(".footerCheckout__stamps");
+        this.developedBy = await waitElement(".footerCheckout__developedBy");
+        this.footer = await waitElement(".footerCheckout__wrapper");
     }
 
     onUpdate() {
@@ -21,20 +33,174 @@ export default class Footer {
         // 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 config = { childList: true, attributes: true };
+        let config = { attributes: true, attributeOldValue: true, attributeFilter: ["style"] };
+
+        let changeAttrName;
+        const tituloCheckoutVazio = document.querySelector("#cart-title");
+
         let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
+            mutations.forEach((mutation) => {
-                console.log(mutation.type);
+                changeAttrName = mutation.target.style;
+                if (changeAttrName.display == "block") {
+                    this.prateleira.innerHTML = "";
+                    tituloCheckoutVazio.style.display = "none";
+                } else if (changeAttrName.display == "none") {
+                    tituloCheckoutVazio.style.display = "block";
+
+                    this.criaPrateleira();
+
+                }
             });
         });
 
+        window.addEventListener("hashchange", () => {
+            if (window.location.hash == "#/cart") {
+                this.prateleira.style.display = "block";
+            } else {
+                this.prateleira.style.display = "none";
+            }
+        });
+
         observer.observe(target, config);
     }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const prateleiraSlick = await waitElement(".prateleira");
-        $(elemento).slick({
+        $(prateleiraSlick).not('.slick-initialized').slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                    },
+                },
+                {
+                    breakpoint: 600,
+                    settings: {
+                        slidesToShow: 2,
+                    },
+                },
+            ],
         });
     }
+
+    criaPrateleira() {
+        let estrutura = "";
+        let estruturaSkus = "";
+        if (this.prateleira) {
+            this.productList.forEach((product) => {
+                estruturaSkus = "";
+                product.skus.forEach((name) => {
+                    estruturaSkus += `<span class="prateleira__name">${name}</span>`;
+                });
+
+                estrutura += `
+
+                <div class="prateleira__container">
+                <figure class="prateleira__image-wrapper">
+                <img src=${product.image}>
+                </figure>
+                <div class="prateleira__content">
+                <p class="prateleira__title">${product.productName}</p>
+                <div class="prateleira__name-wrapper">
+                ${estruturaSkus}
+                </div>
+                <button class="prateleira__button">
+                <a href=${product.link}>Ver Produto</a>
+                </button>
+                </div>
+
+                </div>
+                `;
+            });
+            this.prateleira.innerHTML = `<h2 class="footerCheckout__prateleira-title">Você também pode gostar:</h2><div class="prateleira">${estrutura}</div>`;
+            this.addCarrossel();
+        }
+    }
+
+    verificaListaDeProdutos() {
+        const tituloCheckoutVazio = document.querySelector("#cart-title");
+        if (this.checkoutVazio.style.display === "block") {
+            this.prateleira.innerHTML = "";
+            tituloCheckoutVazio.style.display = "none";
+        }
+
+    }
+
+    carregaProdutos() {
+        fetch(
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+        )
+            .then((response) => response.json())
+            .then((data) => {
+                data.forEach((item) => {
+                    const arraySKU = [];
+                    item.items.forEach((sku) => {
+                        arraySKU.push(sku.name);
+                    });
+
+                    const product = {
+                        image: item.items[0].images[0].imageUrl,
+                        productName: item.productName,
+                        link: item.link,
+                        skus: arraySKU,
+                    };
+
+                    this.productList.push(product);
+                });
+            })
+            .catch((err) => log(err));
+    }
+
+    async criaStamps() {
+        if (this.stamps) {
+            this.stamps.innerHTML = `<li class="footerCheckout__li masterCard">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="lodo da MasterCard" />
+        </li>
+        <li class="footerCheckout__li visa">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="logo da Visa" />
+        </li>
+        <li class="footerCheckout__li amex">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="logo da Amex" />
+        </li>
+        <li class="footerCheckout__li elo">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="logo da Elo" />
+        </li>
+        <li class="footerCheckout__li hiperCard">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="logo da HiperCard" />
+        </li>
+        <li class="footerCheckout__li payPal">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="logo do PayPal" />
+        </li>
+        <li class="footerCheckout__li boleto">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="logo Boleto" />
+        </li>
+        <li class="divider">
+        </li>
+        <li class="footerCheckout__li vtexPCI">
+            <img src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="logo da Vtex PCI" />
+        </li>`;
+        }
+    }
+
+    async criaDevelopedBy() {
+        if (this.developedBy) {
+            this.developedBy.innerHTML = `
+            <li>
+                <a href="https://vtex.com/br-pt">
+                    <span>Powered by</span>
+                    <img class="vtex" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"/>
+                </a>
+            </li>
+            <li>
+                <a href="https://m3ecommerce.com/">
+                    <span>Developed by</span>
+                    <img class="m3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/>
+                </a>
+                </li>
+            `;
+        }
+    }
 }

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

@@ -8,14 +8,148 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.events();
+        this.criaProgressBar();
+        await this.alteraProgressBar();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.headerCheckout = 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
+
-        });
+    events() {
+        window.addEventListener("resize", this.criaProgressBar.bind(this));
+    }
+
+    criaProgressBar() {
+        if (window.innerWidth > 1024) {
+            if (this.progressBar) {
+                this.progressBar.innerHTML = `
+                <ul class="progress-bar__ul">
+                    <li class="progress-bar__li">
+                        <div class="progress-bar__container">
+                            <div class="progress-bar__content">
+                                <p class="progress-bar__title">Meu Carrinho</p>
+                                <p id="progress-bar__circle-1"></p>
+                                <p class="progress-bar__line-1"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="progress-bar__li progress-bar__central">
+                        <div class="progress-bar__container">
+                            <div class="progress-bar__content">
+                                <p class="progress-bar__title">Dados Pessoais</p>
+                                <p id="progress-bar__circle-2"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="progress-bar__li">
+                        <div class="progress-bar__container">
+                            <div class="progress-bar__content">
+                                <p class="progress-bar__title">Pagamento</p>
+                                <p id="progress-bar__circle-3"></p>
+                                <p class="progress-bar__line-2"></p>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+                `;
+            }
+        } else {
+            this.progressBar.innerHTML = "";
+        }
+
+        this.alteraProgressBar();
+    }
+
+    ativaPrimeiroCirculo(el) {
+        if (el.children["progress-bar__circle-1"]) {
+            el.children["progress-bar__circle-1"].classList.add("active");
+        }
+
+        if (el.children["progress-bar__circle-2"]) {
+            if (el.children["progress-bar__circle-2"].classList.contains("active")) {
+                el.children["progress-bar__circle-2"].classList.remove("active");
+            }
+        }
+
+        if (el.children["progress-bar__circle-3"]) {
+            if (el.children["progress-bar__circle-3"].classList.contains("active")) {
+                el.children["progress-bar__circle-3"].classList.remove("active");
+            }
+        }
+    }
+
+    ativaSegundoCirculo(el) {
+        if (el.children["progress-bar__circle-1"]) {
+            if (el.children["progress-bar__circle-1"].classList.contains("active")) {
+                el.children["progress-bar__circle-1"].classList.remove("active");
+            }
+        }
+
+        if (el.children["progress-bar__circle-2"]) {
+            el.children["progress-bar__circle-2"].classList.add("active");
+        }
+
+        if (el.children["progress-bar__circle-3"]) {
+            if (el.children["progress-bar__circle-3"].classList.contains("active")) {
+                el.children["progress-bar__circle-3"].classList.remove("active");
+            }
+        }
+    }
+
+    ativaTerceiroCirculo(el) {
+        if (el.children["progress-bar__circle-1"]) {
+            if (el.children["progress-bar__circle-1"].classList.contains("active")) {
+                el.children["progress-bar__circle-1"].classList.remove("active");
+            }
+        }
+
+        if (el.children["progress-bar__circle-2"]) {
+            if (el.children["progress-bar__circle-2"].classList.contains("active")) {
+                el.children["progress-bar__circle-2"].classList.remove("active");
+            }
+        }
+
+        if (el.children["progress-bar__circle-3"]) {
+            el.children["progress-bar__circle-3"].classList.add("active");
+        }
+    }
+
+    async alteraProgressBar() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const progressBarContent = document.querySelectorAll(".progress-bar__content");
+
+            progressBarContent.forEach((el) => {
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    this.ativaPrimeiroCirculo(el);
+                } 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"
+                ) {
+                    this.ativaSegundoCirculo(el);
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    this.ativaTerceiroCirculo(el);
+                }
+
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        this.ativaPrimeiroCirculo(el);
+                    } else if (
+                        window.location.hash == "#/email" ||
+                        window.location.hash == "#/profile" ||
+                        window.location.hash == "#/shipping"
+                    ) {
+                        this.ativaSegundoCirculo(el);
+                    } else if (window.location.hash == "#/payment") {
+                        this.ativaTerceiroCirculo(el);
+                    }
+                });
+            });
+        }
     }
 }

checkout/src/arquivos/sass/checkout.scss

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

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

@@ -4,8 +4,238 @@ body .container-main.container-order-form .orderform-template.active {
         margin-left: unset;
         margin-right: 0;
         float: right;
+        border: 1px solid #e5e5e5;
+        padding: 24px 17px 0;
+        border-radius: 8px;
+
+        @include mq(tablet, max) {
+            margin: 17px 16px 0 16px;
+            width: auto;
+        }
+
+        .cart-fixed {
+            box-sizing: border-box;
+            max-width: 331px;
+            width: auto;
+            position: inherit;
+            height: auto !important;
+
+            @include mq(tablet, max) {
+                max-width: none;
+            }
+
+            @include mq(desktop4K, min) {
+                max-width: none;
+            }
+            h2 {
+                background-color: transparent;
+                text-align: start;
+                padding: 0;
+                text-shadow: none;
+
+                font-family: "Tenor Sans";
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 19px;
+                color: $black-300;
+
+                margin-bottom: 34px;
+                border: none;
+
+                h2 {
+                    font-size: 32px;
+                    line-height: 37px;
+                }
+
+                @include mq(desktop4K, min) {
+                    font-size: 32px;
+                    line-height: 37px;
+                }
+            }
+
+            .cart {
+                border: none;
+                padding: 0;
+                margin: 0;
+
+                li {
+                    padding: 0;
+                    margin: 0;
+                    border: none;
+                    display: flex;
+                    align-items: center;
+
+                    a {
+                        height: auto;
+                        padding: 0;
+                        width: 60px;
+
+                        img {
+                            height: 60px;
+                            max-width: 100%;
+                            width: 100%;
+                        }
+                    }
+
+                    span {
+                        font-family: "Tenor Sans";
+                        font-weight: 400;
+                        font-size: 12px;
+                        line-height: 14px;
+
+                        color: $black-500;
+                        max-width: 115px;
+                        white-space: inherit;
+
+                        @include mq(desktop4K, min) {
+                            font-size: 24px;
+                            line-height: 28px;
+
+                            max-width: none;
+                        }
+                    }
+                    .description {
+                        margin: 0;
+                        flex: 1;
+
+                        strong {
+                            font-family: "Open Sans";
+                            font-weight: 400;
+                            font-size: 12px;
+                            line-height: 16px;
+                            color: $black-300;
+
+                            @include mq(desktop4K, min) {
+                                font-size: 24px;
+                                line-height: 33px;
+                            }
+                        }
+                    }
+
+                    .quantity,
+                    .description span {
+                        display: none;
+                    }
+                }
+            }
+
+            p {
+                margin: 19px 0 10px 0;
+                a {
+                    font-family: "Open Sans";
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 16px;
+                    text-align: right;
+                    text-decoration-line: underline;
+
+                    color: $black-500;
+
+                    @include mq(desktop4K, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
+                }
+            }
+
+            .summary-template-holder {
+                border: none;
+                background-color: transparent;
+                padding: 0;
+
+                .summary-totalizers {
+                    margin: 0;
+                    .table {
+                        tr {
+                            border-top: 1px solid $gray-400;
+                            border-bottom: 1px solid $gray-400;
+                        }
+                        .info,
+                        .monetary {
+                            font-family: "Open Sans";
+                            font-weight: 400;
+                            font-size: 14px;
+                            line-height: 19px;
+                            color: $gray-1000;
+                            padding: 25px 0;
+
+                            @include mq(desktop4K, min) {
+                                font-size: 28px;
+                                line-height: 38px;
+                            }
+                        }
+
+                        .info {
+                            text-align: start;
+                            width: 100%;
+                        }
+
+                        tfoot {
+                            tr {
+                                border-bottom: none;
+                            }
+
+                            .info,
+                            .monetary {
+                                font-family: "Open Sans";
+                                font-weight: 700;
+                                font-size: 18px;
+                                line-height: 25px;
+                                color: $black-300;
+                                padding: 30px 0 22px;
+                                @include mq(desktop4K, min) {
+                                    font-size: 36px;
+                                    line-height: 49px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .payment-confirmation-wrap {
+                padding: 0;
+                border: none;
+                margin-bottom: 100px;
+                p {
+                    margin: 0;
+                }
+
+                button {
+                    background: $green-500;
+                    border-radius: 8px;
+
+                    font-family: "Open Sans";
+                    font-weight: 700;
+                    font-size: 14px;
+                    line-height: 19px;
+                    letter-spacing: 0.05em;
+                    text-transform: uppercase;
+                    color: $white-500;
+                    border: none;
+
+                    @include mq(desktop4K, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
+
+                    i {
+                        display: none;
+                    }
+                }
+            }
+        }
     }
     .orderform-template-holder {
+        box-sizing: border-box;
         width: 66.1132%;
+
+        @include mq(tablet, max) {
+            width: 100%;
+
+            .row-fluid {
+                display: flex;
+                flex-direction: column;
+            }
+        }
     }
 }

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

@@ -9,16 +9,30 @@ html {
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    border-top: 1px solid $black-500;
-    margin: auto auto 0 auto;
+
+    .container {
+        width: 94.9734%;
+        margin: 16px auto 16px auto;
+
+        @include mq(tablet, max) {
+            margin: 0;
+            width: 100%;
+        }
+
+        @include mq(desktop4K, min) {
+            margin: 14px auto 16.54px auto;
+        }
+    }
 }
-footer .footerCheckout__prateleira,
+
 header {
     width: 79.53125%;
     margin: 0 auto;
 }
 
 body {
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     min-height: 100% !important;
@@ -30,29 +44,26 @@ body {
 
     &.body-cart {
         font-family: $font-family;
-    }
 
-    &.body-cart,
+        @include mq(tablet, max) {
-    &.body-order-form {
+            padding: 0;
-        @include mq(xl, min) {
-            padding-top: 0;
-        }
-
-        @include mq(lg, max) {
-            padding-bottom: 0 !important;
-        }
-
-        @include mq(md, max) {
-            padding-right: 0;
-            padding-left: 0;
         }
     }
+
     .container-order-form,
     .container-cart {
         width: 80%;
+
+        @include mq(tablet, max) {
+            width: 100%;
+        }
     }
 }
 
+#checkoutMainContainer {
+    padding-right: 0;
+}
+
 .btn-success {
     background: $color-black;
     text-shadow: none;
@@ -66,19 +77,41 @@ body {
     color: $color-black !important;
 }
 
-#cart-title,
 #orderform-title {
-    color: $color-gray2;
+    font-family: "Open Sans";
-    font-family: $font-family;
+    font-weight: 700;
-    font-weight: 500;
+    font-size: 24px;
-    font-size: 36px;
+    line-height: 33px;
-    line-height: 42px;
-    margin: 40px 0 30px;
-    letter-spacing: 0.1em;
     text-transform: uppercase;
+    margin: 17px 0;
 
-    @include mq(md, max) {
+    color: $black-500;
-        margin-left: 30px;
+
+    @include mq(tablet, max) {
+        margin-left: 16px;
+    }
+
+    @include mq(desktop4K, min) {
+        font-size: 48px;
+        line-height: 65px;
+
+        margin: 17.8px 0 17px 0;
+    }
+}
+
+#cart-title {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: $black-300;
+    margin: 17px 0 16px 0;
+
+    @include mq(tablet, max) {
+        margin-left: 16px;
     }
 }
 
@@ -124,3 +157,71 @@ body {
         }
     }
 }
+
+.empty-cart-title {
+    font-family: "Open Sans";
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+    text-align: center;
+    text-transform: uppercase;
+    color: $black-500;
+
+    margin: 100px 0 0;
+
+    @include mq(tablet, max) {
+        font-size: 18px;
+        line-height: 25px;
+    }
+
+    @include mq(desktop4K, min) {
+        font-size: 48px;
+        line-height: 65px;
+    }
+}
+
+.empty-cart-message {
+    p {
+        display: none;
+    }
+}
+
+.empty-cart-links .link-choose-products {
+    box-sizing: border-box;
+    width: 31.93359375%;
+    margin-top: 32px;
+
+    font-size: 0;
+    background-color: transparent;
+
+    border: 1px solid $black-500;
+    border-radius: 0;
+    padding: 15px 0 17px 0;
+
+    &::after {
+        content: "Continuar Comprando";
+        font-size: 14px;
+        font-family: "Tenor Sans";
+        font-weight: 400;
+        color: $black-500;
+        line-height: 16px;
+    }
+
+    @include mq(tablet, max) {
+        width: 30.519%;
+    }
+
+    @include mq(celular, max) {
+        width: 93.283582%;
+    }
+
+    @include mq(desktop4K, min) {
+        width: 97.054%;
+        font-size: 28px;
+        line-height: 33px;
+    }
+
+    &:hover {
+        background: transparent;
+    }
+}

checkout/src/arquivos/sass/lib/_slick.scss

@@ -40,6 +40,7 @@
 }
 
 .slick-track {
+    display: flex !important;
     position: relative;
     left: 0;
     top: 0;
@@ -63,9 +64,14 @@
 }
 .slick-slide {
     float: left;
-    height: 100%;
+    height: auto;
     min-height: 1px;
     outline: none;
+
+    & > div,
+    li {
+        height: 100%;
+    }
     [dir="rtl"] & {
         float: right;
     }
@@ -99,16 +105,53 @@
 .slick-arrow {
     font-size: 0;
     position: absolute;
+    border: none;
+    top: 50%;
+    width: 30px;
+    height: 30px;
+    transform: translateY(-50%);
+    z-index: 4;
+
+    padding: 0;
+    cursor: pointer;
+
+    @include mq(tablet, max) {
+        width: 13.64px;
+        height: 29.47px;
+    }
+
+    @include mq(desktop4K, min) {
+        width: 26px;
+        height: 58px;
+    }
 }
 .slick-prev {
-    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
         no-repeat center center;
-    z-index: 4;
+    left: 20px;
-    left: 10px;
+
+    @include mq(desktop, max) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
+            no-repeat center center;
+    }
+
+    @include mq(celular, max) {
+        left: 10px;
+    }
 }
 .slick-next {
-    z-index: 4;
+    right: 20px;
-    right: 10px;
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
+        no-repeat center center;
+
+    @include mq(desktop, max) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+            no-repeat center center;
+    }
+
+    @include mq(celular, max) {
+        right: 10px;
+    }
 }
 .slick-arrow.slick-hidden {
     display: none;

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

@@ -1,73 +1,272 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
+    &__prateleira {
-    color: $color-gray2;
+        box-sizing: border-box;
+        margin: 0 8px;
+
+        @include mq(celular, max) {
+            margin: 0 8px 0 7px;
+        }
+    }
+
+    &__prateleira-title {
+        font-family: "Tenor Sans";
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+        margin: 0;
+        margin-bottom: 20px;
+
+        color: $black-500;
+
+        @include mq(celular, max) {
+            font-size: 14px;
+            line-height: 28px;
+        }
+
+        @include mq(desktop4K, min) {
+            font-size: 48px;
+            line-height: 76px;
+        }
+    }
 
     &__wrapper {
-        align-items: center;
+        .container {
-        display: flex;
+            display: flex;
-        justify-content: space-between;
+            align-items: center;
+            justify-content: center;
+
+            @include mq(tablet, max) {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
     }
 
     &__address {
-        color: $color-gray2;
+        font-family: "Open Sans";
-        font-family: $font-family;
         font-style: normal;
-        font-weight: normal;
+        font-weight: 400;
         font-size: 10px;
-        line-height: 12px;
+        line-height: 14px;
         text-transform: capitalize;
-        max-width: 40%;
+        color: $black-300;
 
-        @include mq(md, max) {
+        @include mq(tablet, max) {
-            margin-bottom: 24px;
+            order: 2;
-            max-width: 100%;
+
+            margin: 0 16px 16px;
+        }
+
+        @include mq(desktop4K, min) {
+            font-size: 20px;
+            line-height: 27px;
         }
     }
 
     &__stamps {
-        align-items: center;
+        box-sizing: border-box;
-        display: flex;
+        width: 33.234%;
-        justify-self: center;
-        list-style: none;
 
-        @include mq(md, max) {
+        display: flex;
-            align-self: center;
+        align-items: center;
-            margin-bottom: 12px;
+        justify-content: space-between;
+        list-style: none;
+        margin: 0 auto;
+
+        @include mq(tablet, max) {
+            order: 1;
+            margin: 0;
+
+            width: 100%;
+            padding: 16px 8px;
+
+            justify-content: flex-start;
         }
 
-        &__divider {
+        @include mq(desktop4K, min) {
-            background-color: $color-gray4;
+            width: 29.0827%;
-            display: inline-block;
+        }
+
+        .divider {
             height: 24px;
-            margin: 0 8px;
             width: 1px;
+            background-color: $gray-500;
+
+            @include mq(desktop4K, min) {
+                height: 43px;
+            }
+        }
+    }
+
+    &__li {
+        &.masterCard {
+            margin-right: 13.35px;
+
+            @include mq(tablet, max) {
+                margin-right: 4.35px;
+                width: 3.536%;
+            }
+
+            @include mq(celular, max) {
+                width: 9.93%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.37px;
+            }
+        }
+
+        &.visa {
+            margin-right: 13.22px;
+
+            @include mq(tablet, max) {
+                margin-right: 5.22px;
+
+                width: 3.451%;
+            }
+
+            @include mq(celular, max) {
+                width: 9.688%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.07px;
+            }
+        }
+        &.amex {
+            margin-right: 13.22px;
+            @include mq(tablet, max) {
+                margin-right: 4.22px;
+                width: 3.451%;
+            }
+
+            @include mq(celular, max) {
+                width: 9.688%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.07px;
+            }
+        }
+        &.elo {
+            margin-right: 13.38px;
+            @include mq(tablet, max) {
+                margin-right: 4.48px;
+                width: 3.623%;
+            }
+
+            @include mq(celular, max) {
+                width: 10.1727%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.67px;
+            }
+        }
+        &.hiperCard {
+            margin-right: 13.22px;
+            @include mq(tablet, max) {
+                margin-right: 4.22px;
+                width: 3.451%;
+            }
+
+            @include mq(celular, max) {
+                width: 9.688%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.07px;
+            }
+        }
+        &.payPal {
+            margin-right: 13.35px;
+            @include mq(tablet, max) {
+                margin-right: 4.35px;
+                width: 3.536%;
+            }
+            @include mq(celular, max) {
+                width: 9.93%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.37px;
+            }
+        }
+        &.boleto {
+            margin-right: 13.35px;
+
+            @include mq(tablet, max) {
+                margin-right: 4.35px;
+                width: 3.536%;
+            }
+            @include mq(celular, max) {
+                width: 9.93%;
+            }
+
+            @include mq(desktop4K, min) {
+                margin-right: 13.37px;
+            }
+        }
+        &.vtexPCI {
+            margin-left: 10px;
+
+            @include mq(tablet, max) {
+                width: 5.593%;
+            }
+
+            @include mq(celular, max) {
+                width: 14.76323%;
+            }
         }
     }
 
     &__developedBy {
-        align-items: center;
-        display: flex;
         list-style-type: none;
         margin: 0;
+        display: flex;
+        gap: 10.73px;
 
-        li:last-child {
+        @include mq(tablet, max) {
-            margin-left: 16px;
+            order: 3;
+
+            margin: 0 16px 16px;
+            justify-content: flex-start;
         }
 
         a {
-            align-items: center;
-            color: $color-gray2;
             display: flex;
-            font-family: $font-family;
+            align-items: center;
-            font-style: normal;
+            flex-wrap: wrap;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 12px;
-            text-decoration: none;
 
-            span {
+            font-family: "Open Sans";
-                margin-right: 8px;
+            font-weight: 400;
+            font-size: 9px;
+            line-height: 12px;
+
+            color: $black-300;
+
+            @include mq(desktop4K, min) {
+                font-size: 18px;
+                line-height: 25px;
+            }
+
+            .vtex {
+                width: 44.92px;
+                margin-left: 10.12px;
+
+                @include mq(desktop4K, min) {
+                    width: 87.73px;
+                }
+            }
+
+            .m3 {
+                width: 28.66px;
+                margin-left: 10.97px;
+                @include mq(desktop4K, min) {
+                    width: 55.98px;
+                }
             }
         }
     }

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

@@ -1,8 +1,25 @@
 /* _header.scss */
 .headerCheckout {
+    margin: 0;
+    width: 100%;
+    border-bottom: 1px solid $black-500;
+
     .container {
-        width: auto !important;
+        box-sizing: border-box;
+        width: 79.53125% !important;
+        margin: 29px auto 29.86px auto;
+
+        @include mq(tablet, max) {
+            width: 100% !important;
+            padding: 16px !important;
+            margin: 0;
+        }
+
+        @include mq(desktop4K, min) {
+            margin: 29px auto;
+        }
     }
+
     &__wrapper {
         align-items: center;
         display: flex;
@@ -10,27 +27,80 @@
     }
 
     &__logo {
+        width: 15.2829%;
+
+
+        @include mq(tablet, max) {
+            min-width: 119px;
+            width: 15.6834%;
+        }
+
+        @include mq(celular, max) {
+            width: 45.3586%;
+            min-width: auto;
+        }
+
+        @include mq(desktop4K, min) {
+            width: 19.2161%;
+        }
+
         img {
-            height: 52px;
+            width: 100%;
-            width: auto;
         }
     }
 
     &__safeBuy {
-        span {
+        width: 11.6896%;
-            align-items: center;
+        min-width: 119px;
-            display: flex;
+        display: flex;
-            text-transform: uppercase;
+        align-items: center;
-            font-family: $font-family;
+        justify-content: flex-end;
-            font-style: normal;
+
-            font-weight: normal;
+
-            font-size: 12px;
+        @include mq(tablet, max) {
-            line-height: 14px;
+            width: 11.996%;
-            color: $color-gray;
         }
 
-        i {
+        @include mq(celular, max) {
-            margin-right: 8px;
+            width: 34.69387%;
+            min-width: auto;
+
+        }
+
+        @include mq(desktop4K, min) {
+            width: 11.834%;
+        }
+
+        img {
+            width: 10.09%;
+
+            height: auto;
+
+            @include mq(tablet, max) {
+                width: 10.085%;
+            }
+
+            @include mq(desktop4K, min) {
+                width: 12.5255%;
+            }
+        }
+
+        span {
+            margin-left: 8px;
+
+            font-family: "Open Sans";
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            text-transform: uppercase;
+            color: $black-300;
+
+            @include mq(desktop4K, min) {
+                margin-left: 7.9px;
+
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
     }
 }

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

@@ -1 +1,130 @@
-/* _prateleira.scss */
+.prateleira {
+    box-sizing: border-box;
+    margin: 0 auto 56px auto;
+    width: 81.5%;
+
+    @include mq(tablet, max) {
+        width: 100%;
+        margin: 0 0 54px 0;
+    }
+
+    @include mq(desktop4K, min) {
+        width: 80.7%;
+    }
+
+    &__container {
+        height: 100%;
+        display: flex !important;
+        flex-direction: column;
+    }
+
+    &__image-wrapper {
+        margin: 0 8px;
+
+        img {
+            width: 100%;
+        }
+
+        @include mq(desktop4K, min) {
+            margin: 0 8.465px;
+        }
+    }
+
+    &__content {
+        margin: 0 8px;
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+
+        @include mq(desktop4K, min) {
+            margin: 0 8.465px;
+        }
+    }
+
+    &__title {
+        font-family: "Open Sans";
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 18px;
+        text-align: center;
+        color: $black-500;
+        margin: 20px 0;
+
+        flex: 1;
+
+        @include mq(tablet, max) {
+            margin: 22px 0 18px 0;
+        }
+
+        @include mq(celular, max) {
+            margin: 20px 0;
+        }
+
+        @include mq(desktop4K, min) {
+            margin: 21.93px 0 20px;
+
+            font-size: 26px;
+            line-height: 35px;
+        }
+    }
+
+    &__name-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        margin-bottom: 20px;
+
+        flex: 1;
+
+        @include mq(celular, max) {
+            margin-bottom: 37px;
+            flex-wrap: wrap;
+        }
+    }
+
+    &__name, &__button a {
+        font-family: "Open Sans";
+        font-weight: 700;
+        font-size: 13px;
+        line-height: 18px;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        color: $white-500;
+        @include mq(desktop4K, min) {
+            font-size: 26px;
+            line-height: 35px;
+        }
+
+    }
+
+    &__name {
+        background-color: $blue-500;
+        padding: 5px;
+        border-radius: 8px;
+        text-align: center;
+
+        @include mq(desktop4K, min) {
+            padding: 8.04px 4.38px 8.04px 5.62px;
+        }
+    }
+
+    &__button {
+        width: 100%;
+        border-radius: 8px;
+        background-color: $blue-500;
+        border: none;
+        padding: 12px 0;
+
+        cursor: pointer;
+
+        a {
+            &:hover,
+            &:focus {
+                color: $blue-500;
+                text-decoration: none;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,126 @@
+.progress-bar {
+    width: 439px;
+
+    @include mq(tablet, max) {
+        display: none;
+    }
+
+    @include mq(desktop4K, min) {
+        width: 1078.86px;
+    }
+
+    &__ul {
+        margin: 0;
+        list-style: none;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__li {
+        width: 39.75%;
+
+        @include mq(desktop4K, min) {
+            width: 41.7042%;
+        }
+
+        &:first-child {
+            .progress-bar__container {
+                justify-content: flex-start;
+            }
+        }
+
+        &:last-child {
+            .progress-bar__container {
+                justify-content: flex-end;
+            }
+        }
+    }
+
+    &__central {
+        width: auto;
+        flex: 1;
+    }
+
+    &__container {
+        position: relative;
+
+        display: flex;
+        justify-content: center;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__title {
+        font-family: "Tenor Sans";
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+
+        margin-bottom: 9px;
+        color: $black-500;
+
+        @include mq(desktop4K, min) {
+            font-size: 24px;
+            line-height: 28px;
+        }
+    }
+
+    #progress-bar__circle-1,
+    #progress-bar__circle-2,
+    #progress-bar__circle-3 {
+        width: 12px;
+        height: 12px;
+        border: 1px solid $black-500;
+        border-radius: 50%;
+
+        @include mq(desktop4K, min) {
+            width: 24px;
+            height: 24px;
+        }
+
+        &.active {
+            background-color: $black-500;
+        }
+    }
+
+    &__line-1,
+    &__line-2 {
+        position: absolute;
+        bottom: 5px;
+        transform: translateY(-50%);
+
+        height: 1px;
+        border-top: 1px solid $black-500;
+
+        @include mq(desktop4K, min) {
+            bottom: 9px;
+        }
+    }
+
+    &__line-1 {
+        left: 27%;
+        width: 95%;
+
+        @include mq(desktop4K, min) {
+            left: 21%;
+            width: 96%;
+        }
+    }
+
+    &__line-2 {
+        right: 22%;
+        width: 100%;
+
+        @include mq(desktop4K, min) {
+            right: 17%;
+            width: 100%;
+        }
+    }
+}

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

@@ -2,7 +2,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
 $font-family: "Open Sans", sans-serif;
-$font-family-secundary:"Tenor Sans", sans-serif;
+$font-family-secundary: "Tenor Sans", sans-serif;
 
 /* Colors */
 $color-black: #292929;
@@ -19,20 +19,49 @@ $color-blue: #4267b2;
 
 $color-green: #4caf50;
 
+/*CORES*/
+$white-500: #fff;
+
+$black-100: #58595b;
+$black-300: #292929;
+$black-500: #000;
+
+$blue-500: #00c8ff;
+
+$red-100: #F15A31;
+$red-500: #ff0000;
+
+$green-500: #298541;
+
+$gray-000: #F2F2F2;
+$gray-100: #f0f0f0;
+$gray-200: #ededed;
+$gray-300: #e5e5e5;
+$gray-400: #e0e0e0;
+$gray-500: #c4c4c4;
+$gray-600: #bdbdbd;
+$gray-700: #989898;
+$gray-800: #868686;
+$gray-900: #808080;
+$gray-1000: #7d7d7d;
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+    xs: 0,
-	cstm: 400,
+    cstm: 400,
-	sm: 576px,
+    sm: 576px,
-	md: 768px,
+    md: 768px,
-	lg: 992px,
+    lg: 992px,
-	xl: 1200px
+    xl: 1200px,
+    celular: 600px,
+    tablet: 1025px,
+    desktop4K: 2500px,
+    desktop: 1280px,
 ) !default;
 
 $z-index: (
-	level1: 5,
+    level1: 5,
-	level2: 10,
+    level2: 10,
-	level3: 15,
+    level3: 15,
-	level4: 20,
+    level4: 20,
-	level5: 25
+    level5: 25,
 ) !default;

checkout/src/template-checkout/checkout-header.html

@@ -1,20 +1,27 @@
 <!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
     MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
 
-    <header class="headerCheckout">
+<header class="headerCheckout">
-        <div class="container">
+    <div class="container">
-            <div class="headerCheckout__wrapper">
+        <div class="headerCheckout__wrapper">
-                <div class="headerCheckout__logo">
+            <div class="headerCheckout__logo">
-                    <a href="/">
+                <a href="/">
-                        <img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
+                    <img
-                    </a>
+                        src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
-                </div>
+                        alt="M3 Academy"
-                <div id="progressBar" class="progress-bar">	Aqui entra a barra de progresso
+                    />
-                </div>
+                </a>
-                <div class="headerCheckout__safeBuy">
+            </div>
-                      <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
+            <div id="progressBar" class="progress-bar">
-                    <span>Compra segura</span>
+                
-                </div>
+            </div>
+            <div class="headerCheckout__safeBuy">
+                <img
+                    src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
+                    alt="Cadeado"
+                />
+                <span>Compra segura</span>
             </div>
         </div>
-    </header>
+    </div>
+</header>

checkout/src/template-checkout/templates.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+    </head>
+    <body>
+        <ul>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="" />
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" />
+            </li>
+            <li class="divider">
+
+            </li>
+            <li class="footerCheckout__li">
+                <img src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" />
+            </li>
+        </ul>
+
+        <div>
+            <li>
+                <a href="https://vtex.com/br-pt">Powered by <img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt=""></a>
+               </li>
+           <li>
+            <a href="https://agenciam3.com/">Developed by <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt=""></a>
+           </li>
+        </div>
+    </body>
+</html>