feat: adiciona o css da prateleira

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

@@ -9,6 +9,7 @@ export default class Footer {
         await this.selectors();
         this.catalogoApi();
         this.footerBanner();
+        this.footerDev();
         // this.onUpdate();
     }
 
@@ -62,10 +63,10 @@ export default class Footer {
         `;
     }
 
-    async catalogoApi() {
+    catalogoApi() {
         this.addCarrossel();
         this.footerPrateleira.innerHTML = `
-        <h2>Você também pode gostar</h2>
+        <h2 class="card-title">Você também pode gostar:</h2>
         <ul class="products-list"></ul>`;
         fetch(
             "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
@@ -81,7 +82,9 @@ export default class Footer {
                     const image = product.items[0].images[0].imageUrl;
                     novaUl.innerHTML += `
                     <li class="product-cards">
-                    <img src ="${image}" />
+                    <figure>
+                    <img class="product-image" src ="${image}" />
+                    </figure>
                     <h3 class ="product-name">${name}</h3>
                     <ul class= "size-items">
                     ${product.items

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

@@ -2,7 +2,77 @@
 .footerCheckout {
     border-top: none;
     color: $color-gray2;
-    width: 100%;
+    &__prateleira {
+        .card-title {
+            font-weight: 400;
+            font-size: 24px;
+            margin-bottom: 20px;
+            line-height: 38px;
+            color: $color-black2;
+            font-family: font-family-secundary;
+            text-align: center;
+        }
+
+        .product-name {
+            font-family: $font-family;
+            font-style: normal;
+            margin-bottom: 20px;
+            font-weight: 400;
+            font-size: 13px;
+            line-height: 18px;
+            text-align: center;
+            color: $color-black2;
+            margin-top: 20px;
+        }
+
+        figure {
+            width: 97.19%;
+            margin: 5px;
+        }
+
+        .product-image {
+            width: 97.19%;
+        }
+
+        .size-items {
+            list-style-type: none;
+            justify-content: center;
+            gap: 5px;
+            display: flex;
+            text-transform: uppercase;
+            margin: 0;
+        }
+
+        .size-cards {
+            margin-bottom: 20px;
+            background-color: $color-blue2;
+            border-radius: 8px;
+            color: $color-white;
+            padding: 4.78px;
+            font-weight: 700;
+            font-size: 13px;
+            line-height: 18px;
+            /* identical to box height */
+
+            display: flex;
+            align-items: center;
+            text-align: center;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+        }
+
+        a.product-link {
+            align-items: center;
+            justify-content: center;
+            height: 42px;
+            background: #00c8ff;
+            text-align: center;
+            border-radius: 8px;
+            width: 97%;
+            color: white;
+            display: flex;
+        }
+    }
 
     &__wrapper {
         align-items: center;
@@ -12,7 +82,6 @@
 
         .container {
             display: flex;
-            height: 65px
             justify-content: space-between;
         }
     }