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/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/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/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/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/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/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/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/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.module.scss b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss new file mode 100644 index 0000000..0f3587c --- /dev/null +++ b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss @@ -0,0 +1,323 @@ +.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; + } + } + } +} + +.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; + } + } +} 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..0e55425 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx @@ -0,0 +1,226 @@ +import React, { useState, useEffect } from "react"; + +import { Newsletter } from "../Newsletter/Newsletter"; +import { Accordion } from "../Footer/Accordion/Accordion"; + +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"; +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 = () => { + 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 ( +
+ + +
+
+

Institucional

+ +

+ Quem Somos +

+ + +

+ Política de Privacidade +

+ + +

+ Segurança +

+ + +

+ Seja um Revendedor +

+ +
+
+

Dúvidas

+ +

Entrega

+ + +

Pagamento

+ + +

+ Trocas e Devoluções +

+ + +

+ Dúvidas Frequentes +

+ +
+
+

Fale Conosco

+ +

+ Atendimento Ao Consumidor +

+ + +

+ (11) 4159-9504 +

+ + +

+ Atendimento Online +

+ + +

+ (11) 99433-8825 +

+ +
+
+ + + + + + +

+ www.loremipsum.com +

+ +
+ +
+ + +
+
+ +
+
+

+ 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 +
+ +
+ + +
+
+
+ ); +}; + +export { Footer }; 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"; 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 (
+
); };