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

@@ -8,14 +8,51 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.progressBarContent();
     }
 
     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
+
-        });
+    progressBarContent() {
+        // console.log(this.progressBar.innerHTML);
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+                <ul>
+                    <li>
+                        <div class="containerProgressBar">
+                            <div>
+                                <p class="progress-bar-first-text">Meu carrinho</p>
+                                <p id="progress-bar-first-circle" class="progress-bar-first-circle"></p>
+                                <p class="progress-bar-first-line"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="center-li">
+                        <div class="containerProgressBar">
+                            <div>
+                                <p>Dados Pessoais</p>
+                                <p id="progress-bar-second-circle" class="progress-bar-second-circle"></p>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="containerProgressBar">
+                            <div>
+                                <p>Pagamento</p>
+                                <p id="progress-bar-third-circle" class="progress-bar-third-circle"></p>
+                                <p class="progress-bar-second-line"></p>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            `;
+        }
+
+        if (this.progressBar && window.innerWidth <= 1024) {
+            this.progressBar.innerHTML = ``;
+        }
     }
 }

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

@@ -13,7 +13,7 @@ footer .footerCheckout__wrapper {
     margin: auto auto 0 auto;
 }
 footer .footerCheckout__prateleira,
-header {
+header .container {
     width: 79.53125%;
     margin: 0 auto;
 }

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

@@ -7,16 +7,125 @@
         align-items: center;
         display: flex;
         justify-content: space-between;
+        padding: 29px 131px;
+        border-bottom: 1px solid $color-black2;
+
+        @include mq(pg, max) {
+            padding: 16px;
+        }
+
+        @include mq(xxl, min) {
+            padding: 29px 256px;
+        }
+    }
+
+    #progressBar {
+        width: 439px;
+
+        @include mq(xxl, min) {
+            width: 1078.86px;
+        }
+    }
+
+    #progressBar ul {
+        display: flex;
+        justify-content: space-between;
+        list-style-type: none;
+        margin: 0;
+    }
+
+    #progressBar li .containerProgressBar {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        position: relative;
+        font-family: "Tenor Sans", sans-serif;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+
+        @include mq(xxl, min) {
+            font-size: 24px;
+            line-height: 28px;
+        }
+    }
+
+    #progressBar li.center-li {
+        width: auto;
+    }
+
+    .containerProgressBar .progress-bar-first-line,
+    .progress-bar-second-line {
+        width: 181px;
+        bottom: 5px;
+        border: 1px solid $color-black2;
+        position: absolute;
+        margin: 0;
+
+        @include mq(xxl, min) {
+            width: 444px;
+            bottom: 10px;
+        }
+    }
+
+    .progress-bar-first-line {
+        left: 60%;
+        // transform: translate(-50%);
+    }
+
+    .progress-bar-second-line {
+        right: 40%;
+        z-index: -1;
+
+        @include mq(xxl, min) {
+            right: 58%;
+        }
+        // transform: translate(-50%);
+    }
+
+    .containerProgressBar .progress-bar-first-circle,
+    .progress-bar-second-circle,
+    .progress-bar-third-circle {
+        margin: 0 auto;
+        width: 12px;
+        height: 12px;
+        margin-top: 9px;
+        border: 1px solid $color-black2;
+        border-radius: 50%;
+        background: $color-white;
+
+        @include mq(xxl, min) {
+            width: 24px;
+            height: 24px;
+        }
     }
 
     &__logo {
         img {
             height: 52px;
             width: auto;
+            cursor: pointer;
+
+            @include mq(pg, max) {
+                height: 32.12px;
+                width: 155px;
+            }
+
+            @include mq(cstm, max) {
+                height: 33px;
+                width: 155px;
+            }
+
+            @include mq(xxl, min) {
+                height: 91.2px;
+            }
         }
     }
 
     &__safeBuy {
+        display: flex;
         span {
             align-items: center;
             display: flex;
@@ -27,10 +136,33 @@
             font-size: 12px;
             line-height: 14px;
             color: $color-gray;
+
+            @include mq(pg, max) {
+                line-height: 16px;
+                color: $color-black;
             }
 
-        i {
+            @include mq(xxl, min) {
+                font-size: 24px;
+                line-height: 33px;
+                color: $color-black;
+            }
+        }
+
+        img {
             margin-right: 8px;
+            max-width: 12px;
+            height: 15px;
+
+            @include mq(pg, max) {
+                height: 13.33px;
+            }
+
+            @include mq(xxl, min) {
+                margin-right: 7.9px;
+                height: 41.46px;
+                max-width: 29.47px;
+            }
         }
     }
 }

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

@@ -2,10 +2,11 @@
 @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;
+$color-black2: #000000;
 
 $color-white: #fff;
 
@@ -26,7 +27,9 @@ $grid-breakpoints: (
     sm: 576px,
     md: 768px,
     lg: 992px,
-	xl: 1200px
+    pg: 1025px,
+    xl: 1200px,
+    xxl: 2500px,
 ) !default;
 
 $z-index: (
@@ -34,5 +37,5 @@ $z-index: (
     level2: 10,
     level3: 15,
     level4: 20,
-	level5: 25
+    level5: 25,
 ) !default;