From defaa70cfc742745f89d5408e1e85e8d43ad10fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Mon, 9 Jan 2023 13:25:45 -0300 Subject: [PATCH] feat: Adiciona newsletter mobile --- react-project/package-lock.json | 15 ++++ react-project/package.json | 1 + .../src/components/Footer/Footer.tsx | 8 ++ react-project/src/components/Footer/Links.tsx | 90 +++++++++++++++++++ .../Footer/assets/modules/Footer.module.scss | 10 +++ .../Footer/assets/modules/Links.module.scss | 45 ++++++++++ .../components/Footer/assets/svgs/more.svg | 3 + 7 files changed, 172 insertions(+) create mode 100644 react-project/src/components/Footer/Links.tsx create mode 100644 react-project/src/components/Footer/assets/modules/Footer.module.scss create mode 100644 react-project/src/components/Footer/assets/modules/Links.module.scss create mode 100644 react-project/src/components/Footer/assets/svgs/more.svg diff --git a/react-project/package-lock.json b/react-project/package-lock.json index f310550..e33dde4 100644 --- a/react-project/package-lock.json +++ b/react-project/package-lock.json @@ -19,6 +19,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-headless-accordion": "^1.0.2", "react-input-mask": "^2.0.4", "react-modal": "^3.16.1", "react-router-dom": "^6.6.1", @@ -15097,6 +15098,14 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "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-input-mask": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz", @@ -29284,6 +29293,12 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "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-input-mask": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz", diff --git a/react-project/package.json b/react-project/package.json index 8d8bcc3..13b53d0 100644 --- a/react-project/package.json +++ b/react-project/package.json @@ -14,6 +14,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-headless-accordion": "^1.0.2", "react-input-mask": "^2.0.4", "react-modal": "^3.16.1", "react-router-dom": "^6.6.1", diff --git a/react-project/src/components/Footer/Footer.tsx b/react-project/src/components/Footer/Footer.tsx index 354d4b6..77cacb2 100644 --- a/react-project/src/components/Footer/Footer.tsx +++ b/react-project/src/components/Footer/Footer.tsx @@ -1,9 +1,17 @@ import { Newsletter } from "./Newsletter"; +import { Links } from "./Links"; + +import footer from "./assets/modules/Footer.module.scss"; const Footer = () => { return ( ); }; diff --git a/react-project/src/components/Footer/Links.tsx b/react-project/src/components/Footer/Links.tsx new file mode 100644 index 0000000..ba027ed --- /dev/null +++ b/react-project/src/components/Footer/Links.tsx @@ -0,0 +1,90 @@ +import { + Accordion, + AccordionBody, + AccordionHeader, + AccordionItem, +} from "react-headless-accordion"; + +import links from "./assets/modules/Links.module.scss"; + +import more from "./assets/svgs/more.svg"; + +const Links = () => { + return ( + + + +

Institucional

+ Icone de + + + + + + + + + + +

Dúvidas

+ Icone de + + + + + + + + + + +

Fale Conosco

+ Icone de + + + + + + + + + ); +}; + +export { Links }; diff --git a/react-project/src/components/Footer/assets/modules/Footer.module.scss b/react-project/src/components/Footer/assets/modules/Footer.module.scss new file mode 100644 index 0000000..a1618dc --- /dev/null +++ b/react-project/src/components/Footer/assets/modules/Footer.module.scss @@ -0,0 +1,10 @@ +.wrapper { + padding: 50px 100px; + display: flex; + justify-content: space-between; + + @media screen and (max-width: 1024px) { + padding: 24px 16px; + flex-direction: column; + } +} diff --git a/react-project/src/components/Footer/assets/modules/Links.module.scss b/react-project/src/components/Footer/assets/modules/Links.module.scss new file mode 100644 index 0000000..05ec8d9 --- /dev/null +++ b/react-project/src/components/Footer/assets/modules/Links.module.scss @@ -0,0 +1,45 @@ +.accordion { + width: 100%; + button { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + border: none; + background: none; + margin-bottom: 12px; + cursor: pointer; + + h4 { + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: var(--black-200); + } + } + + ul { + li { + margin-bottom: 12px; + + a { + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: var(--black-200); + text-decoration: none; + } + + span { + font-weight: 500; + font-size: 12px; + line-height: 14px; + color: var(--black-200); + } + + &:last-child { + text-decoration: underline; + } + } + } +} diff --git a/react-project/src/components/Footer/assets/svgs/more.svg b/react-project/src/components/Footer/assets/svgs/more.svg new file mode 100644 index 0000000..d64bfd8 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/more.svg @@ -0,0 +1,3 @@ + + +