diff --git a/desafio-5/src/components/assets/icons/Boleto.svg b/desafio-5/src/components/assets/icons/Boleto.svg
new file mode 100644
index 0000000..c88b339
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Boleto.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Diners.svg b/desafio-5/src/components/assets/icons/Diners.svg
new file mode 100644
index 0000000..3c46e2b
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Diners.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Elo.svg b/desafio-5/src/components/assets/icons/Elo.svg
new file mode 100644
index 0000000..2044f5e
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Elo.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Hiper.svg b/desafio-5/src/components/assets/icons/Hiper.svg
new file mode 100644
index 0000000..4ca33b2
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Hiper.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Master.svg b/desafio-5/src/components/assets/icons/Master.svg
new file mode 100644
index 0000000..ce0592d
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Master.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Pagseguro.svg b/desafio-5/src/components/assets/icons/Pagseguro.svg
new file mode 100644
index 0000000..5f54700
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Pagseguro.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/Visa.svg b/desafio-5/src/components/assets/icons/Visa.svg
new file mode 100644
index 0000000..789568e
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/Visa.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/assets/icons/vtex-pci-200.svg b/desafio-5/src/components/assets/icons/vtex-pci-200.svg
new file mode 100644
index 0000000..6c91706
--- /dev/null
+++ b/desafio-5/src/components/assets/icons/vtex-pci-200.svg
@@ -0,0 +1,9 @@
+
diff --git a/desafio-5/src/components/modules/footer.module.scss b/desafio-5/src/components/modules/footer.module.scss
index 411a462..fd7e6b0 100644
--- a/desafio-5/src/components/modules/footer.module.scss
+++ b/desafio-5/src/components/modules/footer.module.scss
@@ -70,45 +70,85 @@
}
}
}
+ &_Top{
+ width: 100%;
+ }
&_bottom{
background: $-black;
width: 100%;
+ height: 100%;
display: flex;
justify-content: space-between;
+ align-items: center;
padding: 15px 100px;
- height: 64px;
p{
color: $-white;
- width: 100%;
+ font-family: 'Roboto',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 10px;
+ line-height: 12px;
+ text-transform: capitalize;
+ width: 234px;
+ }
+
+ &__Payments{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 36.852%;
+ min-height: 100%;
+ fieldset{
+
+ width: 100%;
+ min-width: 83.42%;
+ display: flex;
+ align-items: center;
+ min-height: 20px;
+ gap: 12px;
+ padding-right: 12px;
+ border: none;
+ border-right: 1px solid $-gray-300;
+
+ &[datatype=Payments]{
+ border: none;
+ width: 100%;
+ padding-right: 0;
+ min-width: 16%;
+ min-height: 34px;
+ }
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
}
&_Authors{
display: flex;
align-items: center;
gap: 12px;
- width: 100%;
+ width: 20.926%;
+ height: 2.965vh;
p{
- font-family: 'Roboto',sans-serif;
- font-style: normal;
- font-weight: 400;
- font-size: 10px;
- line-height: 12px;
- text-transform: capitalize;
width: auto;
+ white-space: nowrap;
}
a{
width: 100%;
- background: pink;
- max-width: 8.89%;
- min-width: 5.188%;
- img{
- &[datatype=VtexLogo]{
- width: 100%;
- }
+ height: 100%;
+ width: 100%;
+ &[datatype=LinkVtex]{
+ width: 19.47%;
+ }
- &[datatype=M3]{
- width: 100%;
- }
+ &[datatype=LinkM3]{
+ width: 12.39%;
+ }
+
+ img{
+ width: 100%;
+ height: 100%;
}
}
}
diff --git a/desafio-5/src/components/scripts/células/FooterBottom.tsx b/desafio-5/src/components/scripts/células/FooterBottom.tsx
index 79e6064..2c1bca6 100644
--- a/desafio-5/src/components/scripts/células/FooterBottom.tsx
+++ b/desafio-5/src/components/scripts/células/FooterBottom.tsx
@@ -1,10 +1,12 @@
import React from "react";
import { Author } from "../moleculas/Authors";
+import { PaymentsMethod } from "../moleculas/PaymentsMethod";
interface Calsses {
Dadclass?: string;
Authorclass?: string;
wraaperclass?: string;
+ Paymentsclass?: string;
}
interface TopFooterProps extends Calsses {
@@ -15,7 +17,7 @@ interface TopFooteratrr extends TopFooterProps {
}
export const BottomFooter: React.FC