From 012ee79500040ff8def770440d43c9f788d334bb Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Wed, 11 Jan 2023 13:31:39 -0300 Subject: [PATCH] Feat(Footer): Cria Footer Middle e Bottom Mobile --- desafio/package-lock.json | 15 ++ desafio/package.json | 1 + desafio/src/assets/svgs/mais.svg | 3 + desafio/src/components/Footer.tsx | 148 ++++++++++++++++++- desafio/src/scss/partials/footer.module.scss | 79 +++++++++- 5 files changed, 239 insertions(+), 7 deletions(-) create mode 100644 desafio/src/assets/svgs/mais.svg diff --git a/desafio/package-lock.json b/desafio/package-lock.json index 735341e..0fbcd28 100644 --- a/desafio/package-lock.json +++ b/desafio/package-lock.json @@ -17,6 +17,7 @@ "@types/react-dom": "^18.0.10", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-headless-accordion": "^1.0.2", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", @@ -13934,6 +13935,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-headless-accordion": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz", + "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==", + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26590,6 +26599,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-headless-accordion": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz", + "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/desafio/package.json b/desafio/package.json index c064d22..873cb02 100644 --- a/desafio/package.json +++ b/desafio/package.json @@ -12,6 +12,7 @@ "@types/react-dom": "^18.0.10", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-headless-accordion": "^1.0.2", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", diff --git a/desafio/src/assets/svgs/mais.svg b/desafio/src/assets/svgs/mais.svg new file mode 100644 index 0000000..d64bfd8 --- /dev/null +++ b/desafio/src/assets/svgs/mais.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio/src/components/Footer.tsx b/desafio/src/components/Footer.tsx index 993a581..7c384ff 100644 --- a/desafio/src/components/Footer.tsx +++ b/desafio/src/components/Footer.tsx @@ -1,4 +1,5 @@ import React from "react"; +import {Accordion, AccordionBody, AccordionHeader, AccordionItem} from "react-headless-accordion"; import styles from "../scss/partials/footer.module.scss" @@ -13,6 +14,7 @@ import VtexPci from "../assets/imgs/vtex-pci-200.png" import LogoM3 from "../assets/imgs/LogoM3.png" import LogoVtex from "../assets/imgs/LogoVtex.png" +import MaisIcon from "../assets/svgs/mais.svg" import facebookIcon from "../assets/svgs/facebookIcon.svg" import instagramIcon from "../assets/svgs/instagramIcon.svg" @@ -23,11 +25,22 @@ import linkedinIcon from "../assets/svgs/linkedinIcon.svg" const Footer = () => { return } +const FooterDesk : any = () => { + if (window.innerWidth > 1024){ + return <> + + + + }else if (window.innerWidth <= 1024){ + return <> + + + + } +} const FooterMidle = () => { return
@@ -97,6 +110,130 @@ const FooterMidle = () => {
+
    + +
  • + facebookIcon +
    • + +
  • + instagramIcon +
    • + +
  • + twitterIcon +
    • + +
  • + youtubeIcon +
    • + +
  • + linkedinIcon +
    • +
+ + www.loremipsum.com +
+ + +
+} + +const FooterMidleMobile = () => { + return
+ + + +

Institucional

+ MaisIcon + + + +
+ +
+ + + + + +

Dúvidas

+ MaisIcon + + + + + + + + + +

Fale Conosco

+ MaisIcon + + + + + + + + +
+
  • @@ -121,12 +258,11 @@ const FooterMidle = () => {
www.loremipsum.com -
- - +
} + const FooterBottom = () => { return
diff --git a/desafio/src/scss/partials/footer.module.scss b/desafio/src/scss/partials/footer.module.scss index 6a53152..3190570 100644 --- a/desafio/src/scss/partials/footer.module.scss +++ b/desafio/src/scss/partials/footer.module.scss @@ -7,17 +7,63 @@ display: flex; } + &__fM-wrapper-mobile{ + padding: 0 16px; + } + + &__accordion-wrapper{ + + &__title-wrapper{ + width: 100%; + border: none; + display: flex; + align-items: center; + padding: 6px 0; + background-color: var(--white1); + + &__title{ + display: flex; + margin: 0; + flex: 1; + font-family: var(--font-roboto); + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: var(--black2); + } + + &__title-icone{ + display: flex; + margin: 0; + } + } + + &__description-wrapper{ + + &__description{ + padding: 0 0 0 8px; + } + } + + } + &__wrapper-content{ width: 84.38%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); + + @media screen and (max-width: 1024px) { + width: 100%; + box-sizing: border-box; + padding: 0 16px; + grid-template-columns: 1fr; + } } &__fM-wrapper{ padding: 50px 0; } - &__fM-colum-wrapper{ width: 84.38%; margin: 0 auto; @@ -26,6 +72,11 @@ gap: 121px; justify-content: center; + } + + &__fM-colum-wrapper, + &__fM-wrapper-mobile{ + a{ text-decoration: none; font-family: var(--font-roboto); @@ -33,6 +84,11 @@ font-size: 12px; line-height: 14px; color: var(--black2); + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } } &__colum{ @@ -70,6 +126,12 @@ } + &__colum-social{ + @media screen and (max-width: 1024px) { + padding: 6px 0 24px 0; + } + } + &__links, &__links-social{ @@ -116,6 +178,10 @@ align-items: center; padding: 20px 0; + @media screen and (max-width: 1024px) { + padding: 0; + } + &__text{ color: var(--white1); margin: 0; @@ -134,6 +200,12 @@ align-items: center; padding: 15px 0; + @media screen and (max-width: 1024px) { + justify-content: normal; + grid-area: 1 / 1 / 1 / 1; + + } + &__cards-wrapper{ list-style-type: none; @@ -163,6 +235,11 @@ align-items: center; padding: 24px 0; + @media screen and (max-width: 1024px) { + justify-content: normal; + padding: 15px 0; + } + &__wrapper{ list-style-type: none;