From 96fe6f66760c4fd7c65c4514fe0577935e037e47 Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 10 Jan 2023 15:35:00 -0300 Subject: [PATCH] Feat: Adiciona o Footer --- my-app/src/assets/svgs/Boleto.svg | 9 +++ my-app/src/assets/svgs/Diners.svg | 9 +++ my-app/src/assets/svgs/Elo.svg | 9 +++ my-app/src/assets/svgs/Hiper.svg | 9 +++ my-app/src/assets/svgs/M3icon.svg | 4 ++ my-app/src/assets/svgs/Master.svg | 9 +++ my-app/src/assets/svgs/Pagseguro.svg | 9 +++ my-app/src/assets/svgs/VTEX.svg | 7 +++ my-app/src/assets/svgs/Visa.svg | 9 +++ my-app/src/assets/svgs/vtexPCI.svg | 9 +++ .../src/components/Footer/Footer.modules.scss | 57 +++++++++++++++++++ my-app/src/components/Footer/Footer.tsx | 43 ++++++++++++++ .../FooterTop/FooterTop.modules.scss | 2 +- my-app/src/components/FooterTop/FooterTop.tsx | 4 +- my-app/src/pages/Home.tsx | 2 + 15 files changed, 188 insertions(+), 3 deletions(-) create mode 100644 my-app/src/assets/svgs/Boleto.svg create mode 100644 my-app/src/assets/svgs/Diners.svg create mode 100644 my-app/src/assets/svgs/Elo.svg create mode 100644 my-app/src/assets/svgs/Hiper.svg create mode 100644 my-app/src/assets/svgs/M3icon.svg create mode 100644 my-app/src/assets/svgs/Master.svg create mode 100644 my-app/src/assets/svgs/Pagseguro.svg create mode 100644 my-app/src/assets/svgs/VTEX.svg create mode 100644 my-app/src/assets/svgs/Visa.svg create mode 100644 my-app/src/assets/svgs/vtexPCI.svg create mode 100644 my-app/src/components/Footer/Footer.modules.scss create mode 100644 my-app/src/components/Footer/Footer.tsx diff --git a/my-app/src/assets/svgs/Boleto.svg b/my-app/src/assets/svgs/Boleto.svg new file mode 100644 index 0000000..64d3292 --- /dev/null +++ b/my-app/src/assets/svgs/Boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/my-app/src/assets/svgs/Diners.svg b/my-app/src/assets/svgs/Diners.svg new file mode 100644 index 0000000..87e22bd --- /dev/null +++ b/my-app/src/assets/svgs/Diners.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/my-app/src/assets/svgs/Elo.svg b/my-app/src/assets/svgs/Elo.svg new file mode 100644 index 0000000..f0d0282 --- /dev/null +++ b/my-app/src/assets/svgs/Elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/my-app/src/assets/svgs/Hiper.svg b/my-app/src/assets/svgs/Hiper.svg new file mode 100644 index 0000000..0bf1350 --- /dev/null +++ b/my-app/src/assets/svgs/Hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/my-app/src/assets/svgs/M3icon.svg b/my-app/src/assets/svgs/M3icon.svg new file mode 100644 index 0000000..07c5257 --- /dev/null +++ b/my-app/src/assets/svgs/M3icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/my-app/src/assets/svgs/Master.svg b/my-app/src/assets/svgs/Master.svg new file mode 100644 index 0000000..b594ae4 --- /dev/null +++ b/my-app/src/assets/svgs/Master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/my-app/src/assets/svgs/Pagseguro.svg b/my-app/src/assets/svgs/Pagseguro.svg new file mode 100644 index 0000000..f1d4697 --- /dev/null +++ b/my-app/src/assets/svgs/Pagseguro.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/my-app/src/assets/svgs/VTEX.svg b/my-app/src/assets/svgs/VTEX.svg new file mode 100644 index 0000000..ca389de --- /dev/null +++ b/my-app/src/assets/svgs/VTEX.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/my-app/src/assets/svgs/Visa.svg b/my-app/src/assets/svgs/Visa.svg new file mode 100644 index 0000000..362a0f1 --- /dev/null +++ b/my-app/src/assets/svgs/Visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/my-app/src/assets/svgs/vtexPCI.svg b/my-app/src/assets/svgs/vtexPCI.svg new file mode 100644 index 0000000..49c1cd8 --- /dev/null +++ b/my-app/src/assets/svgs/vtexPCI.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/my-app/src/components/Footer/Footer.modules.scss b/my-app/src/components/Footer/Footer.modules.scss new file mode 100644 index 0000000..436b8b8 --- /dev/null +++ b/my-app/src/components/Footer/Footer.modules.scss @@ -0,0 +1,57 @@ +.footer_wrapper{ + margin-top: 50px; + display: flex; + flex-direction: row; + background-color: black; + justify-content: space-around; + align-items: center; + padding-top: 20px; + padding-bottom: 20px; +} +.footerText{ + & p{ + width: 234px; + height: 24px; + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #FFFFFF; + } +} +.payments{ + display: flex; + flex-direction: row; + align-items: center; + gap: 12px; + & img{ + width: 36px; + height: 20.2px; + } +} +.vtexPci{ + padding-left: 12px; + border-left: 1px solid #C4C4C4; + & img{ + width: 64.61px; + height: 34px; + }; +} +.Powered{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 13px; + & p{ + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #FFFFFF; + } +} \ No newline at end of file diff --git a/my-app/src/components/Footer/Footer.tsx b/my-app/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..83015a1 --- /dev/null +++ b/my-app/src/components/Footer/Footer.tsx @@ -0,0 +1,43 @@ +import './Footer.modules.scss' +import Master from '../../assets/svgs/Master.svg' +import Visa from '../../assets/svgs/Visa.svg' +import Diners from '../../assets/svgs/Diners.svg' +import Elo from '../../assets/svgs/Elo.svg' +import Hiper from '../../assets/svgs/Hiper.svg' +import Pagseguro from '../../assets/svgs/Pagseguro.svg' +import Boleto from '../../assets/svgs/Boleto.svg' +import vtexPCI from '../../assets/svgs/vtexPCI.svg' +import Vtex from '../../assets/svgs/VTEX.svg' +import M3icon from '../../assets/svgs/M3icon.svg' + +const Footer = () => { + return ( + <> + + + ) +} + +export {Footer} \ No newline at end of file diff --git a/my-app/src/components/FooterTop/FooterTop.modules.scss b/my-app/src/components/FooterTop/FooterTop.modules.scss index 569fdfa..7b4efc8 100644 --- a/my-app/src/components/FooterTop/FooterTop.modules.scss +++ b/my-app/src/components/FooterTop/FooterTop.modules.scss @@ -1,5 +1,5 @@ -.footer{ +.footerTop{ display: flex; flex-direction: row; justify-content: space-between; diff --git a/my-app/src/components/FooterTop/FooterTop.tsx b/my-app/src/components/FooterTop/FooterTop.tsx index 2c33776..28bfb0b 100644 --- a/my-app/src/components/FooterTop/FooterTop.tsx +++ b/my-app/src/components/FooterTop/FooterTop.tsx @@ -10,8 +10,8 @@ import WppAndArrow from '../../assets/svgs/WppAndArrow.svg' const FooterTop = () => { return ( <> -