feat: adicionando class nas div do js e montando o css

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

@@ -146,7 +146,9 @@ export default class Footer {
                 <div class="product-card__skus">
                     ${product.items.map((item) => `<button>${item.name}</button>`)}
                 </div>
+                <button class="product-card__btn" >
                 <a class="product-card__link" >ver produto</a>
+                </button>
             </div>
        `
         );

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

@@ -200,7 +200,7 @@
 
                 a {
                     align-items: center;
-                    background-color: #303030;
+                    background-color: $color-blue2;
                     border-radius: 8px;
                     border: none;
                     color: $color-white;
@@ -257,7 +257,6 @@
                 }
 
                 p {
-            
                     label {
                         font-family: $font-family;
                         font-style: normal;
@@ -301,6 +300,10 @@
                     &.client-phone {
                         width: calc(50% - 14.5px);
                     }
+
+                    #open-shipping {
+                        display: none;
+                    }
                 }
 
                 .box-client-info-pj {
@@ -409,6 +412,7 @@
                 .shp-summary-group-price,
                 .shp-summary-package {
                     color: $color-gray4;
+                    display: none;
                 }
 
                 .shp-summary-group-price {
@@ -418,6 +422,13 @@
                 .shp-summary-package {
                     padding-left: 16px;
                 }
+                .shp-summary-group-address {
+                    font-family: $font-family;
+                    font-weight: 400;
+                    font-size: 24px;
+                    line-height: 33px;
+                    color: $color-gray2;
+                }
 
                 .vtex-omnishipping-1-x-summaryChange {
                     border-color: #303030;
@@ -425,8 +436,8 @@
                 }
 
                 .vtex-omnishipping-1-x-deliveryChannelsToggle {
-                    background-color: #d8c8ac;
+                    background-color: $color-blue2;
-                    border: 1px solid #d8c8ac;
+                    border: 1px solid $color-black2;
                 }
 
                 .vtex-omnishipping-1-x-deliveryOptionActive {

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

@@ -86,18 +86,27 @@
         }
 
         #payment-data-submit {
-            background: $color-black;
+            font-family: "Open Sans";
-            border: none;
+            font-weight: 700;
-            border-radius: 0;
+            font-size: 28px;
+            line-height: 38px;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
             color: $color-white;
+            background: $color-green;
+            width: 100%;
+            padding: 12px;
+            border-radius: 8;
+            color: $color-black3;
             outline: none;
             transition: all 0.2s linear;
+
             &:hover {
-                background: lighten($color-black, 5);
+                background: lighten($color-green2, 5);
             }
 
             &:active {
-                background: darken($color-black, 5);
+                background: darken($color-green3, 5);
             }
         }
     }
@@ -152,6 +161,12 @@
         }
 
         .product-name {
+            font-family: $font-family-secundary;
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 28px;
+
+            color: $color-black3;
             padding-right: 0;
             padding-left: 31px;
             width: 360px;

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

@@ -3,6 +3,7 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
+
 html {
     height: 100%;
     min-height: 100%;

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

@@ -134,3 +134,59 @@
         }
     }
 }
+
+/* _prateleira.scss */
+.product-card {
+    .product-card__img {
+        width: 100%;
+        max-width: 75.7789%;
+    }
+
+    .product-card__description {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 26px;
+        line-height: 35px;
+        text-align: center;
+
+        color: #000000;
+        margin-bottom: 20px;
+    }
+
+    .product-card__skus {
+        button {
+            cursor: pointer;
+            background-color: $color-blue2;
+            padding: 8px;
+            border: none;
+            font-family: "Open Sans";
+            font-style: normal;
+            font-weight: 700;
+            font-size: 26px;
+            line-height: 35px;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            color: #ffffff;
+        }
+    }
+    .product-card__btn {
+        margin-top: 10px;
+        background-color: $color-blue2;
+        border-radius: 8px;
+        width: 100%;
+        max-width: 485px;
+        padding: 12px;
+    }
+    .product-card__link {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 26px;
+        line-height: 35px;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+
+        color: #ffffff;
+    }
+}

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

@@ -1 +0,0 @@
-/* _prateleira.scss */

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

@@ -25,6 +25,9 @@ $color-blue3: #00b7ff;
 $color-blue4: #00b7ffc2;
 
 $color-green: #4caf50;
+$color-green2: #4caf51;
+$color-green3: #4caf61;
+
 $color-red: #ff0000;
 
 /* Grid breakpoints */

checkout/src/template-checkout/checkout-footer.html

@@ -26,7 +26,7 @@
                     @TODO: vtex icon
                 </a>
             </li>
-
+            
             <li>
                 <a href="https://agenciam3.com/">
                     <span>Developed By</span>