From d563bc2481ecd28e2f37cc3c9d813da5962aa381 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 18:02:00 -0300 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20adiciona=20a=20newsletter,=20sua=20?= =?UTF-8?q?estiliza=C3=A7=C3=A3o=20e=20responsividade?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Footer/Footer.tsx | 13 ++ .../Newsletter/Newsletter.module.scss | 118 ++++++++++++++++++ .../src/components/Newsletter/Newsletter.tsx | 23 ++++ desafio-react-e-typescript/src/pages/Home.tsx | 2 + 4 files changed, 156 insertions(+) create mode 100644 desafio-react-e-typescript/src/components/Footer/Footer.tsx create mode 100644 desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss create mode 100644 desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..d4c732e --- /dev/null +++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +import { Newsletter } from "../Newsletter/Newsletter"; + +const Footer = () => { + return ( +
+ +
+ ); +}; + +export { Footer }; diff --git a/desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss new file mode 100644 index 0000000..c6df49a --- /dev/null +++ b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss @@ -0,0 +1,118 @@ +.newsletter-container { + width: 100%; + height: 104px; + display: flex; + flex-direction: column; + align-items: center; + border-top: 1px solid black; + padding: 16px 0px; + + @media screen and (min-width: 2500px) { + height: 141px; + } + + @media screen and (max-width: 1024px) { + padding: 16px 16px; + height: 182px; + } + + .newsletter-wrapper { + width: 100%; + max-width: 475px; + + @media screen and (min-width: 2500px) { + max-width: 922px; + } + + @media screen and (max-width: 1024px) { + max-width: unset; + } + + h3 { + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + font-variant: small-caps; + color: #303030; + margin: unset; + margin-bottom: 8px; + text-transform: lowercase; + + @media screen and (min-width: 2500px) { + font-size: 36px; + line-height: 42px; + } + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } + } + .newsletter-container-input { + @media screen and (min-width: 2500px) { + display: flex; + } + input { + width: 100%; + max-width: 340px; + height: 42px; + margin-right: 8px; + padding: 13px 16px; + border: 1px solid #e5e5e5; + border-radius: 4px; + font-family: "Roboto", sans-serif; + font-size: 14px; + line-height: 16px; + + @media screen and (min-width: 2500px) { + max-width: 668px; + height: 59px; + font-size: 28px; + line-height: 33px; + } + + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + gap: 16px; + height: 50px; + max-width: unset; + } + } + + button { + width: 100%; + max-width: 126px; + height: 42px; + background: #000000; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border: none; + border-radius: 4px; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 12px; + line-height: 14px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #ffffff; + cursor: pointer; + + @media screen and (min-width: 2500px) { + max-width: 246px; + height: 59px; + font-size: 24px; + line-height: 28px; + } + + @media screen and (max-width: 1024px) { + height: 50px; + max-width: unset; + margin-top: 16px; + } + } + } + } +} diff --git a/desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx new file mode 100644 index 0000000..50249b3 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +import styles from "./Newsletter.module.scss"; + +const Newsletter = () => { + return ( +
+
+

Assine Nossa Newsletter

+
+ + +
+
+
+ ); +}; + +export { Newsletter }; diff --git a/desafio-react-e-typescript/src/pages/Home.tsx b/desafio-react-e-typescript/src/pages/Home.tsx index 82e25dd..70bc1c5 100644 --- a/desafio-react-e-typescript/src/pages/Home.tsx +++ b/desafio-react-e-typescript/src/pages/Home.tsx @@ -1,11 +1,13 @@ import React from "react"; import { Header } from "../components/Header/Header"; +import { Footer } from "../components/Footer/Footer"; const Home = () => { return (
+
); }; From daca532c2e02939acccf56846952ba1ae72bb019 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 18:08:40 -0300 Subject: [PATCH 2/7] feat: adiciona estrutura do footer top --- .../src/assets/images/facebookicon.svg | 16 +++ .../src/assets/images/gotopicon.svg | 4 + .../src/assets/images/instagramicon.svg | 18 +++ .../src/assets/images/linkedinicon.svg | 18 +++ .../src/assets/images/twittericon.svg | 11 ++ .../src/assets/images/whatsappicon.svg | 11 ++ .../src/assets/images/youtubeicon.svg | 11 ++ .../src/components/Footer/Footer.module.scss | 0 .../src/components/Footer/Footer.tsx | 136 ++++++++++++++++++ 9 files changed, 225 insertions(+) create mode 100644 desafio-react-e-typescript/src/assets/images/facebookicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/gotopicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/instagramicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/linkedinicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/twittericon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/whatsappicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/youtubeicon.svg create mode 100644 desafio-react-e-typescript/src/components/Footer/Footer.module.scss diff --git a/desafio-react-e-typescript/src/assets/images/facebookicon.svg b/desafio-react-e-typescript/src/assets/images/facebookicon.svg new file mode 100644 index 0000000..b4c5651 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/facebookicon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/gotopicon.svg b/desafio-react-e-typescript/src/assets/images/gotopicon.svg new file mode 100644 index 0000000..41a2663 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/gotopicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio-react-e-typescript/src/assets/images/instagramicon.svg b/desafio-react-e-typescript/src/assets/images/instagramicon.svg new file mode 100644 index 0000000..e9666cd --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/instagramicon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/linkedinicon.svg b/desafio-react-e-typescript/src/assets/images/linkedinicon.svg new file mode 100644 index 0000000..1ef76c2 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/linkedinicon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/twittericon.svg b/desafio-react-e-typescript/src/assets/images/twittericon.svg new file mode 100644 index 0000000..4ea375a --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/twittericon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/whatsappicon.svg b/desafio-react-e-typescript/src/assets/images/whatsappicon.svg new file mode 100644 index 0000000..53c5037 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/whatsappicon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/youtubeicon.svg b/desafio-react-e-typescript/src/assets/images/youtubeicon.svg new file mode 100644 index 0000000..7be42bf --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/youtubeicon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx index d4c732e..3978fbf 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.tsx +++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx @@ -2,10 +2,146 @@ import React from "react"; import { Newsletter } from "../Newsletter/Newsletter"; +import styles from "./Footer.module.scss"; + +import facebook from "../../assets/images/facebookicon.svg"; +import instagram from "../../assets/images/instagramicon.svg"; +import twitter from "../../assets/images/twittericon.svg"; +import youtube from "../../assets/images/youtubeicon.svg"; +import linkedin from "../../assets/images/linkedinicon.svg"; +import whatsapp from "../../assets/images/whatsappicon.svg"; +import gototop from "../../assets/images/gotopicon.svg"; + const Footer = () => { return (
+
+ + + +
+ + + + + + +

+ www.loremipsum.com +

+ +
+ +
+ + +
+
); }; From 6789e7c39c49e93cee98844965798525f76fedf3 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 18:11:53 -0300 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o=20?= =?UTF-8?q?do=20footer=20top=20desktop=20e=204k?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Footer/Footer.module.scss | 167 ++++++++++++++++++ 1 file changed, 167 insertions(+) diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss index e69de29..0436abc 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss +++ b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss @@ -0,0 +1,167 @@ +.footer-container-top { + width: 100%; + height: 240px; + border-top: 1px solid black; + display: flex; + justify-content: center; + padding: 50px 16px 50px 16px; + + @media screen and (min-width: 2500px) { + height: 297px; + } + + @media screen and (max-width: 1024px) { + display: none; + } + + .footer-container-institucional, + .footer-container-duvidas, + .footer-container-fale-conosco { + width: 100%; + max-width: 155px; + height: 125px; + margin-right: 122px; + + a { + text-decoration: none; + } + + @media screen and (min-width: 2500px) { + max-width: 315px; + height: 197px; + margin-right: 293px; + } + + h4 { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: #303030; + margin: 12px 0px; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + .footer-fale-conosco-atendimento, + .footer-fale-conosco-atendimento-on { + font-weight: 500; + } + } + + h3 { + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: #303030; + margin: 0px 0px 12px 0px; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + .footer-institucional-revendedor, + .footer-duvidas-duvidasfreq, + .footer-fale-conosco-num1, + .footer-fale-conosco-num2 { + text-decoration: underline; + } + + .footer-socials-container { + width: 100%; + max-width: 215px; + height: 63px; + margin-right: 50px; + + @media screen and (min-width: 2500px) { + max-width: 390px; + height: 116px; + } + + button { + width: 35px; + height: 35px; + background-color: transparent; + border: none; + padding: unset; + margin-right: 10px; + cursor: pointer; + + @media screen and (min-width: 2500px) { + width: 70px; + height: 70px; + } + + img { + @media screen and (min-width: 2500px) { + width: 70px; + height: 70px; + } + } + + @media screen and (max-width: 1024px) { + border: none; + } + } + + button:last-of-type { + margin: unset; + } + + a { + text-decoration: none; + + h4 { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #303030; + text-transform: lowercase; + margin-bottom: 0; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + } + } + + .whatsapp-container { + display: flex; + flex-direction: column; + position: fixed; + height: 73px; + padding-top: 40px; + top: 85%; + right: 1%; + + @media screen and (min-width: 2500px) { + height: 137px; + } + + button { + background: transparent; + border: none; + } + + img { + width: 100%; + max-width: 34px; + height: 34px; + + @media screen and (min-width: 2500px) { + max-width: 66px; + height: 66px; + } + } + } +} From 95c1334239d02240778f243ff1fa0326d4582687 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 18:19:59 -0300 Subject: [PATCH 4/7] feat: adiciona accordion mobile e organiza pasta do menu hamburguer --- .../Footer/Accordion/Accordion.scss | 107 ++++++++++++++++++ .../components/Footer/Accordion/Accordion.tsx | 103 +++++++++++++++++ .../Footer/Accordion/AccordionData.js | 25 ++++ .../src/components/Footer/Footer.tsx | 2 + .../src/components/Header/Header.tsx | 2 +- .../MenuHamburguer/MenuHamb.module.scss | 2 +- .../{ => Header}/MenuHamburguer/MenuHamb.tsx | 8 +- 7 files changed, 243 insertions(+), 6 deletions(-) create mode 100644 desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.scss create mode 100644 desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.tsx create mode 100644 desafio-react-e-typescript/src/components/Footer/Accordion/AccordionData.js rename desafio-react-e-typescript/src/components/{ => Header}/MenuHamburguer/MenuHamb.module.scss (97%) rename desafio-react-e-typescript/src/components/{ => Header}/MenuHamburguer/MenuHamb.tsx (90%) diff --git a/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.scss b/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.scss new file mode 100644 index 0000000..090a4a8 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.scss @@ -0,0 +1,107 @@ +.wrapper-container { + border-top: 1px solid black; + padding: 24px 16px; + min-height: 198px; + + @media screen and (min-width: 1025px) { + display: none; + } + + .wrapper { + display: flex; + align-items: center; + height: auto; + + .accordion { + width: 100%; + + .item { + margin-bottom: 12px; + + .title { + color: #303030; + display: flex; + justify-content: space-between; + align-items: center; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-style: normal; + font-size: 14px; + + h3 { + margin: 0; + } + + span { + font-size: 14px; + } + } + } + + .content { + max-height: 0; + overflow: hidden; + transition: all 0.2s cubic-bezier(0, 1, 0, 1); + + ul { + padding: unset; + list-style-type: none; + + li { + margin: 12px 0px; + + a { + font-family: "Roboto", sans-serif; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: #303030; + text-decoration: none; + } + } + } + + .institucional-content { + margin: 0; + } + + .revendedor-content, + .duvidasfreq-content, + .num2-content { + text-decoration: underline; + } + + .atendimento-content, + .atendimento2-content { + font-weight: 500; + } + } + + .content.show { + height: auto; + max-height: 9999px; + transition: all 0.5s cubic-bezier(1, 0, 1, 0); + } + } + } + + .footer-socials-container { + button { + margin-right: 10px; + background-color: transparent; + } + + h4 { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: lowercase; + margin-top: 12px; + } + + @media screen and (min-width: 1025px) { + display: none; + } + } +} diff --git a/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.tsx b/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.tsx new file mode 100644 index 0000000..36454e2 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Footer/Accordion/Accordion.tsx @@ -0,0 +1,103 @@ +import React, { useState } from "react"; + +import facebook from "../../../assets/images/facebookicon.svg"; +import instagram from "../../../assets/images/instagramicon.svg"; +import twitter from "../../../assets/images/twittericon.svg"; +import youtube from "../../../assets/images/youtubeicon.svg"; +import linkedin from "../../../assets/images/linkedinicon.svg"; + +import "./Accordion.scss"; +import { data } from "./AccordionData"; + +const Accordion = () => { + const [selected, setSelected] = useState(false); + + const toggle = (i: any) => { + if (selected === i) { + return setSelected(false); + } + + setSelected(i); + }; + + return ( +
+
+
+ {data.map((item: any, i: any) => ( +
+
toggle(i)}> +

{item.title}

+ {selected === i ? "-" : "+"} +
+ +
+ ))} +
+
+
+ + + + + +

www.loremipsum.com

+
+
+ ); +}; + +export { Accordion }; diff --git a/desafio-react-e-typescript/src/components/Footer/Accordion/AccordionData.js b/desafio-react-e-typescript/src/components/Footer/Accordion/AccordionData.js new file mode 100644 index 0000000..487344e --- /dev/null +++ b/desafio-react-e-typescript/src/components/Footer/Accordion/AccordionData.js @@ -0,0 +1,25 @@ +const data = [ + { + title: "Institucional", + subtitle: ["Quem somos"], + subtitle2: ["Política de Privacidade"], + subtitle3: ["Segurança"], + subtitle4: ["Seja um Revendedor"], + }, + { + title: "Dúvidas", + subtitle12: ["Entrega"], + subtitle22: ["Pagamento"], + subtitle32: ["Trocas e Devoluções"], + subtitle42: ["Dúvidas Frequentes"], + }, + { + title: "Fale Conosco", + subtitle13: ["Atendimento Ao Consumidor"], + subtitle23: ["(11) 4159-9504"], + subtitle33: ["Atendimento Online"], + subtitle43: ["(11) 99433-8825"], + }, +]; + +export { data }; diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx index 3978fbf..982546d 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.tsx +++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx @@ -1,6 +1,7 @@ import React from "react"; import { Newsletter } from "../Newsletter/Newsletter"; +import { Accordion } from "../Footer/Accordion/Accordion"; import styles from "./Footer.module.scss"; @@ -16,6 +17,7 @@ const Footer = () => { return (
+

Institucional

diff --git a/desafio-react-e-typescript/src/components/Header/Header.tsx b/desafio-react-e-typescript/src/components/Header/Header.tsx index 0044323..375be2a 100644 --- a/desafio-react-e-typescript/src/components/Header/Header.tsx +++ b/desafio-react-e-typescript/src/components/Header/Header.tsx @@ -2,7 +2,7 @@ import React from "react"; import logo from "../../assets/images/Logo-M3Academy 1.svg"; import cart from "../../assets/images/carticon.svg"; -import { MenuHamb } from "../MenuHamburguer/MenuHamb"; +import { MenuHamb } from "./MenuHamburguer/MenuHamb"; import styles from "./Header.module.scss"; diff --git a/desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.module.scss b/desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.module.scss similarity index 97% rename from desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.module.scss rename to desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.module.scss index 89b0825..1603b6f 100644 --- a/desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.module.scss +++ b/desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.module.scss @@ -65,7 +65,7 @@ height: 18px; right: 16px; background-color: transparent; - background-image: url(../../assets/images/searchicon.svg); + background-image: url(../../../assets/images/searchicon.svg); background-repeat: no-repeat; margin: 9px 16px 9px 16px; cursor: pointer; diff --git a/desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.tsx b/desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.tsx similarity index 90% rename from desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.tsx rename to desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.tsx index 9b047b4..f8e3acf 100644 --- a/desafio-react-e-typescript/src/components/MenuHamburguer/MenuHamb.tsx +++ b/desafio-react-e-typescript/src/components/Header/MenuHamburguer/MenuHamb.tsx @@ -1,8 +1,8 @@ import React, { useState } from "react"; -import menuhambicon from "../../assets/images/menuhambicon.svg"; -import logo from "../../assets/images/Logo-M3Academy 1.svg"; -import cart from "../../assets/images/carticon.svg"; -import close from "../../assets/images/closeicon.svg"; +import menuhambicon from "../../../assets/images/menuhambicon.svg"; +import logo from "../../../assets/images/Logo-M3Academy 1.svg"; +import cart from "../../../assets/images/carticon.svg"; +import close from "../../../assets/images/closeicon.svg"; import styles from "./MenuHamb.module.scss"; From 40dc142c6c29c06790b5866dcabc48c88d432273 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 18:29:46 -0300 Subject: [PATCH 5/7] feat: adiciona estrutura do footer bottom --- .../src/assets/images/boletoicon.svg | 9 +++ .../src/assets/images/dinersicon.svg | 9 +++ .../src/assets/images/eloicon.svg | 9 +++ .../src/assets/images/hipericon.svg | 9 +++ .../src/assets/images/m3developed.svg | 4 ++ .../src/assets/images/mastericon.svg | 9 +++ .../src/assets/images/pagseguroicon.svg | 9 +++ .../src/assets/images/visaicon.svg | 9 +++ .../src/assets/images/vtexicon.svg | 9 +++ .../src/assets/images/vtexpowered.svg | 7 +++ .../src/components/Footer/Footer.tsx | 61 ++++++++++++++++++- 11 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 desafio-react-e-typescript/src/assets/images/boletoicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/dinersicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/eloicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/hipericon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/m3developed.svg create mode 100644 desafio-react-e-typescript/src/assets/images/mastericon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/pagseguroicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/visaicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/vtexicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/vtexpowered.svg diff --git a/desafio-react-e-typescript/src/assets/images/boletoicon.svg b/desafio-react-e-typescript/src/assets/images/boletoicon.svg new file mode 100644 index 0000000..b4a9010 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/boletoicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/dinersicon.svg b/desafio-react-e-typescript/src/assets/images/dinersicon.svg new file mode 100644 index 0000000..8748138 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/dinersicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/eloicon.svg b/desafio-react-e-typescript/src/assets/images/eloicon.svg new file mode 100644 index 0000000..f17760b --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/eloicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/hipericon.svg b/desafio-react-e-typescript/src/assets/images/hipericon.svg new file mode 100644 index 0000000..dfba036 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/hipericon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/m3developed.svg b/desafio-react-e-typescript/src/assets/images/m3developed.svg new file mode 100644 index 0000000..0eeb905 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/m3developed.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio-react-e-typescript/src/assets/images/mastericon.svg b/desafio-react-e-typescript/src/assets/images/mastericon.svg new file mode 100644 index 0000000..f6c126e --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/mastericon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/pagseguroicon.svg b/desafio-react-e-typescript/src/assets/images/pagseguroicon.svg new file mode 100644 index 0000000..688c2f7 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/pagseguroicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/visaicon.svg b/desafio-react-e-typescript/src/assets/images/visaicon.svg new file mode 100644 index 0000000..71b806c --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/visaicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/vtexicon.svg b/desafio-react-e-typescript/src/assets/images/vtexicon.svg new file mode 100644 index 0000000..92e177c --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/vtexicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-react-e-typescript/src/assets/images/vtexpowered.svg b/desafio-react-e-typescript/src/assets/images/vtexpowered.svg new file mode 100644 index 0000000..7e8d17b --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/vtexpowered.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx index 982546d..f35ee1b 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.tsx +++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { Newsletter } from "../Newsletter/Newsletter"; import { Accordion } from "../Footer/Accordion/Accordion"; @@ -12,6 +12,16 @@ import youtube from "../../assets/images/youtubeicon.svg"; import linkedin from "../../assets/images/linkedinicon.svg"; import whatsapp from "../../assets/images/whatsappicon.svg"; import gototop from "../../assets/images/gotopicon.svg"; +import mastercard from "../../assets/images/mastericon.svg"; +import visa from "../../assets/images/visaicon.svg"; +import diners from "../../assets/images/dinersicon.svg"; +import elo from "../../assets/images/eloicon.svg"; +import hiper from "../../assets/images/hipericon.svg"; +import pagseguro from "../../assets/images/pagseguroicon.svg"; +import boleto from "../../assets/images/boletoicon.svg"; +import vtex from "../../assets/images/vtexicon.svg"; +import vtexpowered from "../../assets/images/vtexpowered.svg"; +import m3developed from "../../assets/images/m3developed.svg"; const Footer = () => { return ( @@ -144,6 +154,55 @@ const Footer = () => {
+ +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor +

+
+ +
+ Mastercard + Visa + American Express + Elo + Hipercard + Pay Pal + Boleto + + Vtex +
+ +
+

Powered by

+ Vtex +

Developed by

+ logo M3 +
+ +
+ + +
+
); }; From 7e8e4d89d8af736051da38b04fd8c1c998adbb07 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 18:33:49 -0300 Subject: [PATCH 6/7] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o=20?= =?UTF-8?q?do=20footer=20bottom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Footer/Footer.module.scss | 156 ++++++++++++++++++ 1 file changed, 156 insertions(+) diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss index 0436abc..0f3587c 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss +++ b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss @@ -165,3 +165,159 @@ } } } + +.footer-bottom { + background: #000000; + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 100px; + height: 64px; + + @media screen and (min-width: 2500px) { + height: 96px; + } + + @media screen and (max-width: 1024px) { + flex-direction: column; + align-items: flex-start; + padding: 15px 16px; + height: 134px; + } + + p { + font-family: "Roboto", sans-serif; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + margin: 0; + + @media screen and (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } + } + + .first-text { + width: 22%; + min-width: 234px; + + @media screen and (max-width: 1024px) { + display: flex; + order: 1; + margin: 15px 0; + width: 22%; + min-width: 234px; + } + } + + .cards { + display: flex; + align-items: center; + + .icons { + width: 36px; + height: 20px; + margin-right: 12px; + + @media screen and (min-width: 2500px) { + width: 70px; + height: 40px; + } + + @media screen and (max-width: 428px) { + width: 30px; + height: 17px; + } + } + + .divisor { + border: 1px solid #c4c4c4; + height: 24px; + width: 1px; + } + + .icon-vtex { + width: 55px; + height: 34px; + margin-left: 12px; + + @media screen and (min-width: 2500px) { + width: 106px; + height: 66px; + } + + @media screen and (max-width: 428px) { + max-width: 45px; + height: 28px; + } + } + } + + .powered { + display: flex; + align-items: center; + + @media screen and (min-width: 2500px) { + width: 100%; + max-width: 404px; + } + + @media screen and (max-width: 1024px) { + order: 2; + } + + .vtexP { + width: 45px; + height: 16px; + margin: 0 13px; + + @media screen and (min-width: 2500px) { + width: 84px; + height: 30px; + } + } + + .m3 { + width: 28.66px; + height: 15.65px; + margin-left: 13px; + + @media screen and (min-width: 2500px) { + width: 54.95px; + height: 30px; + } + } + } + + .wrapper { + display: flex; + flex-direction: column; + } + + .whatsapp-container { + display: flex; + flex-direction: column; + position: fixed; + height: 73px; + padding-top: 40px; + top: 85%; + right: 1%; + + @media screen and (min-width: 2500px) { + display: none; + } + + button { + background: transparent; + border: none; + } + + img { + width: 100%; + max-width: 34px; + height: 34px; + } + } +} From 2b24ab7297320ee102c239aa1953cbae7926713c Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 18:36:44 -0300 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20adiciona=20fun=C3=A7=C3=A3o=20do=20?= =?UTF-8?q?bot=C3=A3o=20de=20ir=20para=20o=20topo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Footer/Footer.tsx | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx index f35ee1b..0e55425 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.tsx +++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx @@ -24,6 +24,20 @@ import vtexpowered from "../../assets/images/vtexpowered.svg"; import m3developed from "../../assets/images/m3developed.svg"; const Footer = () => { + const [visible, setVisible] = useState(false); + useEffect(() => { + const handleResize = () => { + if (window.pageYOffset > 100) { + setVisible(true); + } else { + setVisible(false); + } + }; + window.addEventListener("scroll", handleResize); + return () => { + window.removeEventListener("scroll", handleResize); + }; + }, []); return (
@@ -197,9 +211,11 @@ const Footer = () => {