diff --git a/src/components/Footer/FooterBottom/FooterBottom.module.scss b/src/components/Footer/FooterBottom/FooterBottom.module.scss index e69de29..0467508 100644 --- a/src/components/Footer/FooterBottom/FooterBottom.module.scss +++ b/src/components/Footer/FooterBottom/FooterBottom.module.scss @@ -0,0 +1,134 @@ +.container { + background: #000000; + display: flex; + align-items: center; + justify-content: space-between; + // gap: 110.41px; + padding: 15px 100px; + + .address { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + // background-color: yellow; + + p { + margin: 0; + } + + @media screen and (width >= 2500px) { + font-size: 20px; + line-height: 23px; + } + } + + .payment-solutions { + display: flex; + align-items: center; + // justify-content: center; + gap: 12px; + // justify-self: center; + // background-color: cyan; + + .menu-list { + // background-color: blue; + + margin: 0; + padding: 0; + list-style: none; + text-decoration: none; + display: flex; + gap: 12px; + + li { + // transition: all 0.2s ease-in-out; + + img { + width: 35px; + height: 20px; + display: block; + + @media screen and (width >= 2500px) { + width: 70px; + height: 40px; + } + + // &:hover { + // border-radius: 50%; + // background: #292929; + // color: white; + // } + } + } + } + + span { + width: 1px; + height: 24px; + background: #c4c4c4; + + @media screen and (width >= 2500px) { + height: 48px; + } + } + + img { + width: 54.61px; + height: 34px; + display: block; + + @media screen and (width >= 2500px) { + width: 106px; + height: 66px; + } + } + } + + .authors { + // background-color: magenta; + display: flex; + gap: 13px; + align-items: center; + // justify-self: end; + + p { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + margin: 0; + + @media screen and (width >= 2500px) { + font-size: 20px; + line-height: 23px; + } + } + + .vtex-icon { + width: 44.92px; + height: 16px; + + @media screen and (width >= 2500px) { + width: 82.22px; + height: 30px; + } + } + + .m3-icon { + width: 28.66px; + height: 15.65px; + + @media screen and (width >= 2500px) { + width: 54.95px; + height: 30px; + } + } + } +} diff --git a/src/components/Footer/FooterBottom/FooterBottom.tsx b/src/components/Footer/FooterBottom/FooterBottom.tsx index a49fd7b..eabba5b 100644 --- a/src/components/Footer/FooterBottom/FooterBottom.tsx +++ b/src/components/Footer/FooterBottom/FooterBottom.tsx @@ -2,13 +2,85 @@ import React from "react"; import styles from "./FooterBottom.module.scss"; +import Master from "../assets/Master.svg"; +import Visa from "../assets/Visa.svg"; +import Amex from "../assets/Diners.svg"; +import Elo from "../assets/Elo.svg"; +import Hipercard from "../assets/Hiper.svg"; +import Paypal from "../assets/Pagseguro.svg"; +import Boleto from "../assets/Boleto.svg"; +import PCI from "../assets/vtex-pci-200.svg"; +import VtexIcon from "../assets/vtex-icon.svg"; +import M3Icon from "../assets/m3-icon.svg"; + +// import { ReactComponent as Master } from "../assets/Master.svg"; +// import { ReactComponent as Visa } from "../assets/Visa.svg"; +// import { ReactComponent as Amex } from "../assets/Diners.svg"; +// import { ReactComponent as Elo } from "../assets/Elo.svg"; +// import { ReactComponent as Hipercard } from "../assets/Hiper.svg"; +// import { ReactComponent as Paypal } from "../assets/Pagseguro.svg"; +// import { ReactComponent as Boleto } from "../assets/Boleto.svg"; +// import { ReactComponent as PCI } from "../assets/vtex-pci-200.svg"; +// import { ReactComponent as VtexIcon } from "../assets/vtex-icon.svg"; +// import { ReactComponent as M3Icon } from "../assets/m3-icon.svg"; + +const PaymentSolutions = [ + { + src: Master, + alt: "Logo da Mastercard", + }, + { + src: Visa, + alt: "Logo da Visa", + }, + { + src: Amex, + alt: "Logo da American Express", + }, + { + src: Elo, + alt: "Logo da Elo", + }, + { + src: Hipercard, + alt: "Logo da Hipercard", + }, + { + src: Paypal, + alt: "Logo da PayPal", + }, + { + src: Boleto, + alt: "Ícone de boleto", + }, +]; const FooterBottom = () => { return (
- +
+

Lorem ipsum dolor sit amet, consectetur adipiscing

+ elit, sed do eiusmod tempor +
+
+ + + Ícone de Certificado PCI 200 +
+
+

Powered by

+ Logo da VTEX +

Developed by

+ Logo da M3 +
); }; -export { FooterBottom }; \ No newline at end of file +export { FooterBottom }; diff --git a/src/components/Footer/assets/Boleto.svg b/src/components/Footer/assets/Boleto.svg new file mode 100644 index 0000000..b94209f --- /dev/null +++ b/src/components/Footer/assets/Boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Footer/assets/Diners.svg b/src/components/Footer/assets/Diners.svg new file mode 100644 index 0000000..4aa9d09 --- /dev/null +++ b/src/components/Footer/assets/Diners.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Footer/assets/Elo.svg b/src/components/Footer/assets/Elo.svg new file mode 100644 index 0000000..19fcd41 --- /dev/null +++ b/src/components/Footer/assets/Elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Footer/assets/Hiper.svg b/src/components/Footer/assets/Hiper.svg new file mode 100644 index 0000000..342010a --- /dev/null +++ b/src/components/Footer/assets/Hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Footer/assets/Master.svg b/src/components/Footer/assets/Master.svg new file mode 100644 index 0000000..2543e9b --- /dev/null +++ b/src/components/Footer/assets/Master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Footer/assets/Pagseguro.svg b/src/components/Footer/assets/Pagseguro.svg new file mode 100644 index 0000000..0cd24ec --- /dev/null +++ b/src/components/Footer/assets/Pagseguro.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Footer/assets/Visa.svg b/src/components/Footer/assets/Visa.svg new file mode 100644 index 0000000..8e47ea2 --- /dev/null +++ b/src/components/Footer/assets/Visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Footer/assets/m3-icon.svg b/src/components/Footer/assets/m3-icon.svg new file mode 100644 index 0000000..0eeb905 --- /dev/null +++ b/src/components/Footer/assets/m3-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Footer/assets/vtex-icon.svg b/src/components/Footer/assets/vtex-icon.svg new file mode 100644 index 0000000..518ed61 --- /dev/null +++ b/src/components/Footer/assets/vtex-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Footer/assets/vtex-pci-200.svg b/src/components/Footer/assets/vtex-pci-200.svg new file mode 100644 index 0000000..c5a2d09 --- /dev/null +++ b/src/components/Footer/assets/vtex-pci-200.svg @@ -0,0 +1,9 @@ + + + + + + + + +