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 = ( - {Dadclass,wraaperclass,Authorclass} + {Dadclass,wraaperclass,Authorclass,Paymentsclass} ) => { @@ -25,6 +27,7 @@ export const BottomFooter: React.FC = ( Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

+ ) diff --git a/desafio-5/src/components/scripts/células/FooterTop.tsx b/desafio-5/src/components/scripts/células/FooterTop.tsx index 3eb41fc..042f922 100644 --- a/desafio-5/src/components/scripts/células/FooterTop.tsx +++ b/desafio-5/src/components/scripts/células/FooterTop.tsx @@ -1,7 +1,7 @@ import React from "react"; interface Calsses { - wraaperclass?: string; + DadClass?: string; } interface TopFooterProps extends Calsses { @@ -12,12 +12,12 @@ interface TopFooteratrr extends TopFooterProps { } export const TopFooter: React.FC = ( - {wraaperclass} + {DadClass} ) => { return( -
+
Footer top
) diff --git a/desafio-5/src/components/scripts/footer.tsx b/desafio-5/src/components/scripts/footer.tsx index 9911947..926c7a2 100644 --- a/desafio-5/src/components/scripts/footer.tsx +++ b/desafio-5/src/components/scripts/footer.tsx @@ -14,8 +14,9 @@ const Footer = () =>{ FormClass={FooterStyles.footer_wrapper_Form__Newsletter} Errorclass={FooterStyles.hiden} /> - + diff --git a/desafio-5/src/components/scripts/moleculas/Authors.tsx b/desafio-5/src/components/scripts/moleculas/Authors.tsx index 19358fb..72664ee 100644 --- a/desafio-5/src/components/scripts/moleculas/Authors.tsx +++ b/desafio-5/src/components/scripts/moleculas/Authors.tsx @@ -16,11 +16,11 @@ export const Author: React.FC = ( return(

Powered by

- + vtex logo

Developed by

- + M3
diff --git a/desafio-5/src/components/scripts/moleculas/PaymentsMethod.tsx b/desafio-5/src/components/scripts/moleculas/PaymentsMethod.tsx index 9df32a4..1c6ed70 100644 --- a/desafio-5/src/components/scripts/moleculas/PaymentsMethod.tsx +++ b/desafio-5/src/components/scripts/moleculas/PaymentsMethod.tsx @@ -1,4 +1,12 @@ import React from "react"; +import Master from "../../assets/icons/Master.svg" +import Visa from "../../assets/icons/Visa.svg" +import AmericanExpress from "../../assets/icons/Diners.svg" +import Elo from "../../assets/icons/Elo.svg" +import HiperCard from "../../assets/icons/Hiper.svg" +import Pagseguro from "../../assets/icons/Pagseguro.svg" +import Boleto from "../../assets/icons/Boleto.svg" +import Vtex from "../../assets/icons/vtex-pci-200.svg" interface Calsses { Paymentsclass?: string; @@ -16,14 +24,18 @@ export const PaymentsMethod: React.FC = ( ) => { return(
- - - - - - - - +
+ master card + cartão visa + American Express + Elo + HiperCard + Pay Pal + Boleto +
+
+ VtexPci +
) }; \ No newline at end of file