From 606ccf6df71beef8eee612790296d634a6420496 Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Sat, 31 Dec 2022 17:48:32 -0300 Subject: [PATCH] feat: adiciona footer responsivo em telas desktop adiante --- src/assets/img/american-express.svg | 9 + src/assets/img/boleto.svg | 9 + src/assets/{ => img}/cart.svg | 0 src/assets/img/elo.svg | 9 + src/assets/img/facebook.svg | 3 + src/assets/img/hiper.svg | 9 + src/assets/img/instagram.svg | 5 + src/assets/img/linkedlin.svg | 5 + src/assets/{ => img}/logo-m3.png | Bin src/assets/img/m3.svg | 4 + src/assets/img/master.svg | 9 + src/assets/img/paypal.svg | 9 + src/assets/{ => img}/search.svg | 0 src/assets/img/twitter.svg | 3 + src/assets/img/visa.svg | 9 + src/assets/img/vtex-dev.svg | 7 + src/assets/img/vtex.svg | 9 + src/assets/img/youtube.svg | 3 + src/components/Footer/Footer.module.scss | 12 - src/components/Footer/Footer.tsx | 80 +---- .../FooterSelosDev/FooterSelosDev.module.scss | 202 +++++++++++ .../FooterSelosDev/FooterSelosDev.tsx | 98 ++++++ src/components/Header/Header.module.scss | 5 +- src/components/Header/Header.tsx | 6 +- .../LinksFooter/LinksFooter.module.scss | 315 ++++++++++++++++++ src/components/LinksFooter/LinksFooter.tsx | 88 +++++ src/components/LinksFotter/LinksFotter.scss | 0 src/components/LinksFotter/LinksFotter.tsx | 1 - .../Newsletter/Newsletter.module.scss | 85 +++++ src/components/Newsletter/Newsletter.tsx | 20 +- src/global.scss | 2 + 31 files changed, 922 insertions(+), 94 deletions(-) create mode 100644 src/assets/img/american-express.svg create mode 100644 src/assets/img/boleto.svg rename src/assets/{ => img}/cart.svg (100%) create mode 100644 src/assets/img/elo.svg create mode 100644 src/assets/img/facebook.svg create mode 100644 src/assets/img/hiper.svg create mode 100644 src/assets/img/instagram.svg create mode 100644 src/assets/img/linkedlin.svg rename src/assets/{ => img}/logo-m3.png (100%) create mode 100644 src/assets/img/m3.svg create mode 100644 src/assets/img/master.svg create mode 100644 src/assets/img/paypal.svg rename src/assets/{ => img}/search.svg (100%) create mode 100644 src/assets/img/twitter.svg create mode 100644 src/assets/img/visa.svg create mode 100644 src/assets/img/vtex-dev.svg create mode 100644 src/assets/img/vtex.svg create mode 100644 src/assets/img/youtube.svg create mode 100644 src/components/FooterSelosDev/FooterSelosDev.module.scss create mode 100644 src/components/FooterSelosDev/FooterSelosDev.tsx create mode 100644 src/components/LinksFooter/LinksFooter.module.scss create mode 100644 src/components/LinksFooter/LinksFooter.tsx delete mode 100644 src/components/LinksFotter/LinksFotter.scss delete mode 100644 src/components/LinksFotter/LinksFotter.tsx diff --git a/src/assets/img/american-express.svg b/src/assets/img/american-express.svg new file mode 100644 index 0000000..480c87b --- /dev/null +++ b/src/assets/img/american-express.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/img/boleto.svg b/src/assets/img/boleto.svg new file mode 100644 index 0000000..59f764a --- /dev/null +++ b/src/assets/img/boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/cart.svg b/src/assets/img/cart.svg similarity index 100% rename from src/assets/cart.svg rename to src/assets/img/cart.svg diff --git a/src/assets/img/elo.svg b/src/assets/img/elo.svg new file mode 100644 index 0000000..2d8374c --- /dev/null +++ b/src/assets/img/elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/img/facebook.svg b/src/assets/img/facebook.svg new file mode 100644 index 0000000..ef15d13 --- /dev/null +++ b/src/assets/img/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/hiper.svg b/src/assets/img/hiper.svg new file mode 100644 index 0000000..9e64c2e --- /dev/null +++ b/src/assets/img/hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/img/instagram.svg b/src/assets/img/instagram.svg new file mode 100644 index 0000000..fe6801f --- /dev/null +++ b/src/assets/img/instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/img/linkedlin.svg b/src/assets/img/linkedlin.svg new file mode 100644 index 0000000..b27144e --- /dev/null +++ b/src/assets/img/linkedlin.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/logo-m3.png b/src/assets/img/logo-m3.png similarity index 100% rename from src/assets/logo-m3.png rename to src/assets/img/logo-m3.png diff --git a/src/assets/img/m3.svg b/src/assets/img/m3.svg new file mode 100644 index 0000000..0eeb905 --- /dev/null +++ b/src/assets/img/m3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/img/master.svg b/src/assets/img/master.svg new file mode 100644 index 0000000..5300f00 --- /dev/null +++ b/src/assets/img/master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/img/paypal.svg b/src/assets/img/paypal.svg new file mode 100644 index 0000000..ff30d3b --- /dev/null +++ b/src/assets/img/paypal.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/search.svg b/src/assets/img/search.svg similarity index 100% rename from src/assets/search.svg rename to src/assets/img/search.svg diff --git a/src/assets/img/twitter.svg b/src/assets/img/twitter.svg new file mode 100644 index 0000000..fbba043 --- /dev/null +++ b/src/assets/img/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/visa.svg b/src/assets/img/visa.svg new file mode 100644 index 0000000..73d2f88 --- /dev/null +++ b/src/assets/img/visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/img/vtex-dev.svg b/src/assets/img/vtex-dev.svg new file mode 100644 index 0000000..7e8d17b --- /dev/null +++ b/src/assets/img/vtex-dev.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/img/vtex.svg b/src/assets/img/vtex.svg new file mode 100644 index 0000000..1cf4a5e --- /dev/null +++ b/src/assets/img/vtex.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/img/youtube.svg b/src/assets/img/youtube.svg new file mode 100644 index 0000000..cfad74f --- /dev/null +++ b/src/assets/img/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index fee9005..8b13789 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -1,13 +1 @@ -.container-footer { - position: relative; - min-height: 100vh; - .footer-wrapper { - position: absolute; - bottom: 0; - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - } -} diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 2fda10c..bedbe8a 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,80 +1,14 @@ import React from "react" -import styleFooter from "./Footer.module.scss" +import LinksFooter from "../LinksFooter/LinksFooter" +import FooterSelosDev from "../FooterSelosDev/FooterSelosDev" +import Newsletter from "../Newsletter/Newsletter" export function Footer() { return ( -