diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..6a35681 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,6 +7,9 @@ export default class Footer {
async init() {
await this.selectors();
+ this.pagamentos();
+ this.certificado();
+ this.desenvolvimento();
// this.onUpdate();
}
@@ -14,6 +17,18 @@ export default class Footer {
//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", {
+ timeout: 5000,
+ interval: 1000,
+ });
+ this.vtexIcon = await waitElement(".footerCheckout__stamps", {
+ timeout: 5000,
+ interval: 1000,
+ });
+ this.developed = await waitElement(".footerCheckout__developedBy", {
+ timeout: 5000,
+ interval: 1000,
+ });
}
onUpdate() {
@@ -37,4 +52,58 @@ export default class Footer {
slidesToScroll: 1,
});
}
+
+ pagamentos() {
+ this.payments.innerHTML = `
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+ `;
+ }
+
+ certificado() {
+ this.vtexIcon.children[2].children[0].innerHTML = `
+
+ -
+
+
+
+ `;
+ }
+
+ desenvolvimento() {
+ this.developed.children[0].children[0].innerHTML = `
+
+ Powered By
+
+
+ `;
+
+ this.developed.children[1].children[0].innerHTML = `
+
+ Developed By
+
+
+ `;
+ }
}
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..55b03dd 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,21 +1,35 @@
/* _footer.scss */
.footerCheckout {
- border-top: none;
+ border-top: 1px solid black;
color: $color-gray2;
&__wrapper {
- align-items: center;
- display: flex;
- justify-content: space-between;
+ width: auto !important;
+ padding: 16px 22px 16px 32px;
+ margin: 0;
+
+ @include mq(xl, min) {
+ padding: 14px 63px 16px 63px;
+ }
+ .container {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ width: auto;
+ }
+ .container::before,
+ ::after {
+ display: none !important;
+ }
}
&__address {
- color: $color-gray2;
+ color: $color-black;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
- line-height: 12px;
+ line-height: 14px;
text-transform: capitalize;
max-width: 40%;
@@ -23,6 +37,11 @@
margin-bottom: 24px;
max-width: 100%;
}
+
+ @include mq(xl, min) {
+ font-size: 20px;
+ line-height: 27px;
+ }
}
&__stamps {
@@ -30,6 +49,12 @@
display: flex;
justify-self: center;
list-style: none;
+ margin: 0;
+ width: 31.56%;
+
+ @include mq(xl, min) {
+ width: 29.1%;
+ }
@include mq(md, max) {
align-self: center;
@@ -40,9 +65,21 @@
background-color: $color-gray4;
display: inline-block;
height: 24px;
- margin: 0 8px;
+ margin: 0 10px 0 13px;
width: 1px;
}
+
+ .lista-pagamentos {
+ list-style: none;
+ margin: 0;
+ display: flex;
+ gap: 13px;
+ }
+
+ .lista-certificados {
+ list-style: none;
+ margin: 0;
+ }
}
&__developedBy {
@@ -57,17 +94,40 @@
a {
align-items: center;
- color: $color-gray2;
+ color: $color-black;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
- font-size: 10px;
+ font-size: 9px;
line-height: 12px;
text-decoration: none;
+ @include mq(xl, min) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+
span {
- margin-right: 8px;
+ margin-right: 10px;
+ }
+
+ .powered {
+ img {
+ width: 44px;
+ @include mq(xl, min) {
+ width: 87px;
+ }
+ }
+ }
+
+ .developed {
+ img {
+ width: 28px;
+ @include mq(xl, min) {
+ width: 56px;
+ }
+ }
}
}
}