From a3696be33b31e764406bf4b8bbc35ae085c6d94c Mon Sep 17 00:00:00 2001 From: Naian Date: Tue, 10 Jan 2023 19:01:12 -0300 Subject: [PATCH 1/3] feat: adicionar footer desktop,tablet e mobile --- desafio5/src/assets/img/Boleto.svg | 9 ++ desafio5/src/assets/img/Diners.svg | 9 ++ desafio5/src/assets/img/Elo.svg | 9 ++ desafio5/src/assets/img/Hiper.svg | 9 ++ desafio5/src/assets/img/Master.svg | 9 ++ desafio5/src/assets/img/Pagseguro.svg | 9 ++ desafio5/src/assets/img/Visa.svg | 9 ++ desafio5/src/assets/img/m3-develop.svg | 4 + desafio5/src/assets/img/vtex-pci-200.svg | 9 ++ desafio5/src/assets/img/vtex-powered.svg | 7 ++ desafio5/src/components/Footer/Footer.tsx | 44 ++++++++ .../src/components/Footer/footer.module.css | 104 ++++++++++++++++++ .../src/components/Header/HeaderMobile.tsx | 7 +- .../components/Header/headerMobile.module.css | 5 +- desafio5/src/pages/Home.tsx | 15 ++- 15 files changed, 249 insertions(+), 9 deletions(-) create mode 100644 desafio5/src/assets/img/Boleto.svg create mode 100644 desafio5/src/assets/img/Diners.svg create mode 100644 desafio5/src/assets/img/Elo.svg create mode 100644 desafio5/src/assets/img/Hiper.svg create mode 100644 desafio5/src/assets/img/Master.svg create mode 100644 desafio5/src/assets/img/Pagseguro.svg create mode 100644 desafio5/src/assets/img/Visa.svg create mode 100644 desafio5/src/assets/img/m3-develop.svg create mode 100644 desafio5/src/assets/img/vtex-pci-200.svg create mode 100644 desafio5/src/assets/img/vtex-powered.svg create mode 100644 desafio5/src/components/Footer/Footer.tsx create mode 100644 desafio5/src/components/Footer/footer.module.css diff --git a/desafio5/src/assets/img/Boleto.svg b/desafio5/src/assets/img/Boleto.svg new file mode 100644 index 0000000..f006c0a --- /dev/null +++ b/desafio5/src/assets/img/Boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Diners.svg b/desafio5/src/assets/img/Diners.svg new file mode 100644 index 0000000..3c30d9c --- /dev/null +++ b/desafio5/src/assets/img/Diners.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Elo.svg b/desafio5/src/assets/img/Elo.svg new file mode 100644 index 0000000..b2adb7d --- /dev/null +++ b/desafio5/src/assets/img/Elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Hiper.svg b/desafio5/src/assets/img/Hiper.svg new file mode 100644 index 0000000..3e7fe78 --- /dev/null +++ b/desafio5/src/assets/img/Hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Master.svg b/desafio5/src/assets/img/Master.svg new file mode 100644 index 0000000..6c93215 --- /dev/null +++ b/desafio5/src/assets/img/Master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Pagseguro.svg b/desafio5/src/assets/img/Pagseguro.svg new file mode 100644 index 0000000..0018b69 --- /dev/null +++ b/desafio5/src/assets/img/Pagseguro.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/Visa.svg b/desafio5/src/assets/img/Visa.svg new file mode 100644 index 0000000..322fa95 --- /dev/null +++ b/desafio5/src/assets/img/Visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/m3-develop.svg b/desafio5/src/assets/img/m3-develop.svg new file mode 100644 index 0000000..780c92a --- /dev/null +++ b/desafio5/src/assets/img/m3-develop.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio5/src/assets/img/vtex-pci-200.svg b/desafio5/src/assets/img/vtex-pci-200.svg new file mode 100644 index 0000000..5b503f6 --- /dev/null +++ b/desafio5/src/assets/img/vtex-pci-200.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio5/src/assets/img/vtex-powered.svg b/desafio5/src/assets/img/vtex-powered.svg new file mode 100644 index 0000000..b6fd99e --- /dev/null +++ b/desafio5/src/assets/img/vtex-powered.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/desafio5/src/components/Footer/Footer.tsx b/desafio5/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..0618e44 --- /dev/null +++ b/desafio5/src/components/Footer/Footer.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import master from "../../assets/img/Master.svg"; +import visa from "../../assets/img/Visa.svg"; +import amex from "../../assets/img/Diners.svg"; +import elo from "../../assets/img/Elo.svg"; +import hiper from "../../assets/img/Hiper.svg"; +import paypal from "../../assets/img/Pagseguro.svg"; +import boleto from "../../assets/img/Boleto.svg"; +import vtex from "../../assets/img/vtex-pci-200.svg"; +import vtexP from "../../assets/img/vtex-powered.svg"; +import m3 from "../../assets/img/m3-develop.svg"; +import style from "./footer.module.css"; + +const Footer = () => { + return ( +
+
+

+ 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 default Footer; diff --git a/desafio5/src/components/Footer/footer.module.css b/desafio5/src/components/Footer/footer.module.css new file mode 100644 index 0000000..8752eba --- /dev/null +++ b/desafio5/src/components/Footer/footer.module.css @@ -0,0 +1,104 @@ +.footer { + background: #000000; + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 100px; +} + +.first-text { + width: 22%; + min-width: 234px; +} + +.cards { + display: flex; + align-items: center; +} + +.icons { + width: 36px; + height: 20px; + margin-right: 12px; +} + +.icon-vtex { + width: 55px; + height: 34px; + margin-left: 12px; +} + +.vtexP { + width: 45px; + height: 16px; + margin: 0 13px; +} + +.m3 { + width: 28.66px; + height: 15.65px; + margin-left: 13px; +} + +.powered { + display: flex; + align-items: center; +} + +span { + border: 1px solid #c4c4c4; + height: 24px; + width: 1px; +} + +p { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + margin: 0; +} + +@media screen and (max-width: 1024px) { + .footer { + flex-direction: column; + align-items: flex-start; + padding: 15px 16px; + } + + .first-text { + display: flex; + order: 1; + margin-bottom: 15px; + } + + .cards { + margin-bottom: 15px; + } + + .powered { + order: 2; + } +} + +@media screen and (max-width: 428px) { + .icons { + width: 30px; + height: 17px; + margin-right: 11px; + } + .icon-vtex { + width: 45px; + height: 28px; + margin-left: 11px; + } +} + +@media screen and (max-width: 374px) { + .cards { + display: block; + } +} diff --git a/desafio5/src/components/Header/HeaderMobile.tsx b/desafio5/src/components/Header/HeaderMobile.tsx index 39e215a..27c57fa 100644 --- a/desafio5/src/components/Header/HeaderMobile.tsx +++ b/desafio5/src/components/Header/HeaderMobile.tsx @@ -11,7 +11,7 @@ const HeaderMobile = () => { <>
- +
@@ -21,7 +21,7 @@ const HeaderMobile = () => { className={style["input"]} type="text" placeholder="Buscar..."> - +
@@ -36,7 +36,8 @@ const HeaderMobile = () => { + className={style["button-close"]} + />
diff --git a/desafio5/src/components/Header/headerMobile.module.css b/desafio5/src/components/Header/headerMobile.module.css index c2606d3..fc7d82d 100644 --- a/desafio5/src/components/Header/headerMobile.module.css +++ b/desafio5/src/components/Header/headerMobile.module.css @@ -104,7 +104,7 @@ .menu-burguer-buttons { display: flex; justify-content: space-between; - padding: 16px 31px; + padding: 31px 16px; background-color: #000000; } @@ -118,6 +118,7 @@ line-height: 16px; text-transform: uppercase; color: #ffffff; + padding: 0; } .button-close { @@ -137,7 +138,7 @@ .menu-burguer-ul { list-style: none; - padding: 16px 31px; + padding: 31px 16px; margin: 0; } diff --git a/desafio5/src/pages/Home.tsx b/desafio5/src/pages/Home.tsx index 3c9ccdd..9a3b2ca 100644 --- a/desafio5/src/pages/Home.tsx +++ b/desafio5/src/pages/Home.tsx @@ -1,13 +1,20 @@ import React from "react"; import Header from "../components/Header/Header"; import HeaderMobile from "../components/Header/HeaderMobile"; +import Footer from "../components/Footer/Footer"; const Home = () => { return ( -
-
- -
+ <> +
+
+ +
+
+
+
+
+ ); }; -- 2.34.1 From 4092ee89be323bbff52b9123826887cc2ade9c91 Mon Sep 17 00:00:00 2001 From: Naian Date: Mon, 16 Jan 2023 00:23:41 -0300 Subject: [PATCH 2/3] feat: adiciona footer mobile e newletter descktop e mobile --- desafio5/src/assets/img/face.svg | 11 + desafio5/src/assets/img/insta.svg | 13 ++ desafio5/src/assets/img/link.svg | 13 ++ desafio5/src/assets/img/twitter.svg | 4 + desafio5/src/assets/img/up-button.svg | 4 + desafio5/src/assets/img/whatsapp.svg | 11 + desafio5/src/assets/img/youtube.svg | 4 + desafio5/src/components/Footer/Footer.tsx | 148 +++++++++++--- .../src/components/Footer/FooterMobile.tsx | 189 ++++++++++++++++++ .../src/components/Footer/footer.module.css | 149 ++++++++++---- .../components/Footer/footerMobile.module.css | 189 ++++++++++++++++++ .../src/components/Newsletter/Newsletter.tsx | 29 +++ .../Newsletter/newsletter.module.css | 101 ++++++++++ desafio5/src/pages/Home.tsx | 4 + desafio5/src/style/index.css | 2 +- 15 files changed, 808 insertions(+), 63 deletions(-) create mode 100644 desafio5/src/assets/img/face.svg create mode 100644 desafio5/src/assets/img/insta.svg create mode 100644 desafio5/src/assets/img/link.svg create mode 100644 desafio5/src/assets/img/twitter.svg create mode 100644 desafio5/src/assets/img/up-button.svg create mode 100644 desafio5/src/assets/img/whatsapp.svg create mode 100644 desafio5/src/assets/img/youtube.svg create mode 100644 desafio5/src/components/Footer/FooterMobile.tsx create mode 100644 desafio5/src/components/Footer/footerMobile.module.css create mode 100644 desafio5/src/components/Newsletter/Newsletter.tsx create mode 100644 desafio5/src/components/Newsletter/newsletter.module.css diff --git a/desafio5/src/assets/img/face.svg b/desafio5/src/assets/img/face.svg new file mode 100644 index 0000000..59cfda0 --- /dev/null +++ b/desafio5/src/assets/img/face.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio5/src/assets/img/insta.svg b/desafio5/src/assets/img/insta.svg new file mode 100644 index 0000000..4574a17 --- /dev/null +++ b/desafio5/src/assets/img/insta.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/desafio5/src/assets/img/link.svg b/desafio5/src/assets/img/link.svg new file mode 100644 index 0000000..653ecfa --- /dev/null +++ b/desafio5/src/assets/img/link.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/desafio5/src/assets/img/twitter.svg b/desafio5/src/assets/img/twitter.svg new file mode 100644 index 0000000..bf71aac --- /dev/null +++ b/desafio5/src/assets/img/twitter.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio5/src/assets/img/up-button.svg b/desafio5/src/assets/img/up-button.svg new file mode 100644 index 0000000..adb26a4 --- /dev/null +++ b/desafio5/src/assets/img/up-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio5/src/assets/img/whatsapp.svg b/desafio5/src/assets/img/whatsapp.svg new file mode 100644 index 0000000..2314673 --- /dev/null +++ b/desafio5/src/assets/img/whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio5/src/assets/img/youtube.svg b/desafio5/src/assets/img/youtube.svg new file mode 100644 index 0000000..d94b497 --- /dev/null +++ b/desafio5/src/assets/img/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio5/src/components/Footer/Footer.tsx b/desafio5/src/components/Footer/Footer.tsx index 0618e44..b6e1402 100644 --- a/desafio5/src/components/Footer/Footer.tsx +++ b/desafio5/src/components/Footer/Footer.tsx @@ -9,35 +9,137 @@ import boleto from "../../assets/img/Boleto.svg"; import vtex from "../../assets/img/vtex-pci-200.svg"; import vtexP from "../../assets/img/vtex-powered.svg"; import m3 from "../../assets/img/m3-develop.svg"; +import facebook from "../../assets/img/face.svg"; +import instagram from "../../assets/img/insta.svg"; +import twitter from "../../assets/img/twitter.svg"; +import youtube from "../../assets/img/youtube.svg"; +import linkedin from "../../assets/img/link.svg"; import style from "./footer.module.css"; const Footer = () => { + // const [open, setOpen] = useState(false); + // const clickAccordion = () => { + // setOpen(true); + // }; return ( -
-
-

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

+ <> +
+
+

INSTITUCIONAL

+ +
+ +
+

DÚVIDAS

+ +
+ +
+

FALE CONOSCO

+
+

Atendimento ao Consumidor

+ (11) 4159 9504 +

Atendimento Online

+ + (11) 99433-8825 + +
+
+ + +
+ + +
-
- Mastercard - Visa - American Express - Elo - Hipercard - Pay Pal - Boleto - - Vtex + +
+
+

+ 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 +
-
-

Powered by

- Vtex -

Developed by

- logo M3 -
-
+ ); }; diff --git a/desafio5/src/components/Footer/FooterMobile.tsx b/desafio5/src/components/Footer/FooterMobile.tsx new file mode 100644 index 0000000..29bcd82 --- /dev/null +++ b/desafio5/src/components/Footer/FooterMobile.tsx @@ -0,0 +1,189 @@ +import React, { useState } from "react"; +import master from "../../assets/img/Master.svg"; +import visa from "../../assets/img/Visa.svg"; +import amex from "../../assets/img/Diners.svg"; +import elo from "../../assets/img/Elo.svg"; +import hiper from "../../assets/img/Hiper.svg"; +import paypal from "../../assets/img/Pagseguro.svg"; +import boleto from "../../assets/img/Boleto.svg"; +import vtex from "../../assets/img/vtex-pci-200.svg"; +import vtexP from "../../assets/img/vtex-powered.svg"; +import m3 from "../../assets/img/m3-develop.svg"; +import facebook from "../../assets/img/face.svg"; +import instagram from "../../assets/img/insta.svg"; +import twitter from "../../assets/img/twitter.svg"; +import youtube from "../../assets/img/youtube.svg"; +import linkedin from "../../assets/img/link.svg"; +import style from "./footerMobile.module.css"; + +interface AccordionStates { + institucional: boolean; + duvidas: boolean; + faleConosco: boolean; +} + +const FooterMobile = () => { + const [accordions, setAccordions] = useState({ + institucional: false, + duvidas: false, + faleConosco: false, + }); + const toggleAccordion = ( + name: "institucional" | "duvidas" | "faleConosco" + ) => { + setAccordions({ ...accordions, [name]: !accordions[name] }); + }; + return ( + <> +
+
+ + +
+ +
+ + +
+ +
+ + +
+

Atendimento ao Consumidor

+ (11) 4159 9504 +

Atendimento Online

+ + (11) 99433-8825 + +
+
+ + +
+ + +
+
+ +
+
+

+ 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 default FooterMobile; diff --git a/desafio5/src/components/Footer/footer.module.css b/desafio5/src/components/Footer/footer.module.css index 8752eba..267d422 100644 --- a/desafio5/src/components/Footer/footer.module.css +++ b/desafio5/src/components/Footer/footer.module.css @@ -1,4 +1,74 @@ -.footer { +.footer-top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 50px 100px; +} + +h1 { + font-family: "Roboto"; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: #303030; + margin: 0; + margin-bottom: 12px; + text-transform: uppercase; +} + +h2 { + font-family: "Roboto"; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: #303030; + margin: 0; + margin-bottom: 12px; +} + +a { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: #303030; + text-decoration: none; + cursor: pointer; + margin-bottom: 12px; +} + +.institucional, +.duvidas, +.fale-conosco { + display: flex; + flex-direction: column; +} + +.last-link { + margin: 0; +} + +.icons-top { + width: 35px; + height: 35px; + margin-left: 10px; +} + +.icon-facebook { + width: 35px; + height: 35px; +} + +.url-link { + text-transform: lowercase; +} + +.footer-bottom { background: #000000; display: flex; align-items: center; @@ -45,7 +115,12 @@ align-items: center; } -span { +.wrapper { + display: flex; + flex-direction: column; +} + +.divisor { border: 1px solid #c4c4c4; height: 24px; width: 1px; @@ -62,43 +137,39 @@ p { margin: 0; } +.float-buttons { + position: fixed; + top: 80%; + right: 2%; + display: flex; + flex-direction: column; +} + +.button-whats { + height: 34px; + width: 34px; + background-image: url("../../assets/img/whatsapp.svg"); + background-repeat: no-repeat; + background-size: 100% 100%; + background-color: transparent; + border: 0; + cursor: pointer; +} + +.up-button { + margin-top: 5px; + width: 34px; + height: 34px; + background-image: url("../../assets/img/up-button.svg"); + background-repeat: no-repeat; + background-size: 100% 100%; + background-color: transparent; + border: 0; +} + @media screen and (max-width: 1024px) { - .footer { - flex-direction: column; - align-items: flex-start; - padding: 15px 16px; - } - - .first-text { - display: flex; - order: 1; - margin-bottom: 15px; - } - - .cards { - margin-bottom: 15px; - } - - .powered { - order: 2; - } -} - -@media screen and (max-width: 428px) { - .icons { - width: 30px; - height: 17px; - margin-right: 11px; - } - .icon-vtex { - width: 45px; - height: 28px; - margin-left: 11px; - } -} - -@media screen and (max-width: 374px) { - .cards { - display: block; + .footer-top, + .footer-bottom { + display: none; } } diff --git a/desafio5/src/components/Footer/footerMobile.module.css b/desafio5/src/components/Footer/footerMobile.module.css new file mode 100644 index 0000000..0ab92e3 --- /dev/null +++ b/desafio5/src/components/Footer/footerMobile.module.css @@ -0,0 +1,189 @@ +.footer-top { + flex-direction: column; + padding: 24px 16px; + align-items: flex-start; +} + +.button-title { + margin-bottom: 12px; + font-family: "Roboto"; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: #303030; + display: flex; + justify-content: space-between; + width: 100%; +} + +.signal { + font-size: 20px; + width: 16px; + height: 16px; + display: flex; + justify-content: center; + align-items: center; +} + +.url-link { + text-transform: lowercase; +} + +button { + border: 0; + background-color: transparent; + padding: 0; +} + +.wrapper { + display: flex; + flex-direction: column; + overflow: hidden; + max-height: 0; + transition: all 700ms ease-in-out; +} + +.wrapper.active { + max-height: 500px; +} + +.icons-top, +.icon-facebook { + width: 35px; + height: 35px; +} + +.icons-top { + margin-left: 10px; +} + +p { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + margin: 0; +} + +.footer-bottom { + flex-direction: column; + align-items: flex-start; + padding: 15px 16px; + background: #000000; + display: flex; + justify-content: space-between; + padding: 15px 16px; +} + +.first-text { + display: flex; + order: 1; + margin-bottom: 15px; + width: 22%; + min-width: 234px; +} + +.cards { + margin-bottom: 15px; +} + +.powered { + display: flex; + align-items: center; + order: 2; +} + +.cards { + display: flex; + align-items: center; +} + +.icons { + width: 36px; + height: 20px; + margin-right: 11px; +} + +.icon-vtex { + width: 55px; + height: 34px; + margin-left: 12px; +} + +.vtexP { + width: 45px; + height: 16px; + margin: 0 13px; +} + +.m3 { + width: 28.66px; + height: 15.65px; + margin-left: 13px; +} + +.divisor { + border: 1px solid #c4c4c4; + height: 24px; + width: 1px; +} + +.float-buttons { + position: fixed; + top: 80%; + right: 2%; + display: flex; + flex-direction: column; +} + +.button-whats { + height: 34px; + width: 34px; + background-image: url("../../assets/img/whatsapp.svg"); + background-repeat: no-repeat; + background-size: 100% 100%; + background-color: transparent; + border: 0; + cursor: pointer; +} + +.up-button { + margin-top: 5px; + width: 34px; + height: 34px; + background-image: url("../../assets/img/up-button.svg"); + background-repeat: no-repeat; + background-size: 100% 100%; + background-color: transparent; + border: 0; +} + +@media screen and (min-width: 1025px) { + .footer-top, + .footer-bottom { + display: none; + } +} + +@media screen and (max-width: 428px) { + .icons { + width: 30px; + height: 17px; + margin-right: 11px; + } + .icon-vtex { + width: 45px; + height: 28px; + margin-left: 11px; + } +} + +@media screen and (max-width: 374px) { + .cards { + display: block; + } +} diff --git a/desafio5/src/components/Newsletter/Newsletter.tsx b/desafio5/src/components/Newsletter/Newsletter.tsx new file mode 100644 index 0000000..415a1ed --- /dev/null +++ b/desafio5/src/components/Newsletter/Newsletter.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import style from "./newsletter.module.css"; + +const Newsletter = () => { + return ( + <> +
+
e.preventDefault()}> +
+ + +
+ +
+
+ + ); +}; + +export default Newsletter; diff --git a/desafio5/src/components/Newsletter/newsletter.module.css b/desafio5/src/components/Newsletter/newsletter.module.css new file mode 100644 index 0000000..4cc9d28 --- /dev/null +++ b/desafio5/src/components/Newsletter/newsletter.module.css @@ -0,0 +1,101 @@ +.newsletter-wrapper { + display: flex; + flex-direction: column; + align-items: center; + border-width: 1px 0px; + border-style: solid; + border-color: #000000; + padding: 16px 0; +} + +.newsletter-wrapper form { + width: 100%; + display: flex; + justify-content: center; + align-items: flex-end; +} + +.input-wrapper { + width: 340px; + display: flex; + flex-direction: column; +} + +.newsletter-label { + font-family: "Roboto"; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 21px; + color: #303030; + letter-spacing: 0.05em; + margin-bottom: 8px; +} + +.button-submit { + background-color: #000; + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 14px; + color: #fff; + padding: 14px 40px; + letter-spacing: 0.05em; + height: 42px; + margin-left: 8px; + border-radius: 4px; +} + +.newsletter-wrapper input { + max-width: 340px; + width: 100%; + height: 42px; + border-radius: 4px; + border-color: #e5e5e5; + outline: none; + border-width: 1px; + border-style: solid; + padding: 13px 16px; +} + +.newsletter-wrapper input::placeholder { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #c4c4c4; +} + +@media screen and (max-width: 1024px) { + .newsletter-wrapper { + padding: 16px; + } + + .newsletter-wrapper form { + flex-direction: column; + } + + .input-wrapper { + display: flex; + flex-direction: column; + width: 100%; + margin-bottom: 8px; + } + + .newsletter-label { + font-size: 14px; + line-height: 16px; + } + + .newsletter-wrapper input { + width: 100%; + max-width: none; + } + + .button-submit { + width: 100%; + font-size: 14px; + line-height: 16px; + } +} diff --git a/desafio5/src/pages/Home.tsx b/desafio5/src/pages/Home.tsx index 9a3b2ca..0f8ed8c 100644 --- a/desafio5/src/pages/Home.tsx +++ b/desafio5/src/pages/Home.tsx @@ -1,7 +1,9 @@ import React from "react"; import Header from "../components/Header/Header"; import HeaderMobile from "../components/Header/HeaderMobile"; +import Newsletter from "../components/Newsletter/Newsletter"; import Footer from "../components/Footer/Footer"; +import FooterMobile from "../components/Footer/FooterMobile"; const Home = () => { return ( @@ -12,7 +14,9 @@ const Home = () => {
+
+
); diff --git a/desafio5/src/style/index.css b/desafio5/src/style/index.css index dd14571..2b822c4 100644 --- a/desafio5/src/style/index.css +++ b/desafio5/src/style/index.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); * { box-sizing: border-box; -- 2.34.1 From 5b6bd759de3a8d298681b2da35001d0317b4b3d9 Mon Sep 17 00:00:00 2001 From: Naian Date: Tue, 17 Jan 2023 15:03:18 -0300 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20adiciona=20fun=C3=A7=C3=A3o=20dos?= =?UTF-8?q?=20float=20bottons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- desafio5/package-lock.json | 26 +++++++++++++++++ desafio5/package.json | 3 ++ desafio5/src/components/Footer/Footer.tsx | 29 ++++++++++--------- .../src/components/Footer/FooterMobile.tsx | 17 +++++++---- .../{footer.module.css => footer.module.scss} | 16 +++++----- .../components/Footer/footerMobile.module.css | 16 +++++----- desafio5/src/components/Header/Header.tsx | 2 +- .../src/components/Header/HeaderMobile.tsx | 2 +- .../src/components/Header/header.module.css | 6 ++-- .../components/Header/headerMobile.module.css | 7 ++--- .../Newsletter/newsletter.module.css | 6 ++-- desafio5/src/style/index.css | 4 +++ 12 files changed, 90 insertions(+), 44 deletions(-) rename desafio5/src/components/Footer/{footer.module.css => footer.module.scss} (91%) diff --git a/desafio5/package-lock.json b/desafio5/package-lock.json index 68f112b..93a20dc 100644 --- a/desafio5/package-lock.json +++ b/desafio5/package-lock.json @@ -20,6 +20,9 @@ "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "sass": "^1.57.1" } }, "node_modules/@adobe/css-tools": { @@ -8609,6 +8612,12 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz", + "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==", + "devOptional": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -14479,6 +14488,23 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.57.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "devOptional": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", diff --git a/desafio5/package.json b/desafio5/package.json index 178045b..1d8cf6e 100644 --- a/desafio5/package.json +++ b/desafio5/package.json @@ -39,5 +39,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "sass": "^1.57.1" } } diff --git a/desafio5/src/components/Footer/Footer.tsx b/desafio5/src/components/Footer/Footer.tsx index b6e1402..533e129 100644 --- a/desafio5/src/components/Footer/Footer.tsx +++ b/desafio5/src/components/Footer/Footer.tsx @@ -14,18 +14,14 @@ import instagram from "../../assets/img/insta.svg"; import twitter from "../../assets/img/twitter.svg"; import youtube from "../../assets/img/youtube.svg"; import linkedin from "../../assets/img/link.svg"; -import style from "./footer.module.css"; +import style from "./footer.module.scss"; const Footer = () => { - // const [open, setOpen] = useState(false); - // const clickAccordion = () => { - // setOpen(true); - // }; return ( <>
-

INSTITUCIONAL

+

INSTITUCIONAL

Quem Somos @@ -40,7 +36,7 @@ const Footer = () => {
-

DÚVIDAS

+

DÚVIDAS

Entrega @@ -55,11 +51,11 @@ const Footer = () => {
-

FALE CONOSCO

+

FALE CONOSCO

-

Atendimento ao Consumidor

+

Atendimento ao Consumidor

(11) 4159 9504 -

Atendimento Online

+

Atendimento Online

(11) 99433-8825 @@ -109,8 +105,15 @@ const Footer = () => {
@@ -129,7 +132,7 @@ const Footer = () => { Hipercard Pay Pal Boleto - + Vtex
diff --git a/desafio5/src/components/Footer/FooterMobile.tsx b/desafio5/src/components/Footer/FooterMobile.tsx index 29bcd82..88489ae 100644 --- a/desafio5/src/components/Footer/FooterMobile.tsx +++ b/desafio5/src/components/Footer/FooterMobile.tsx @@ -100,9 +100,9 @@ const FooterMobile = () => { className={`${style["wrapper"]} ${ accordions.faleConosco ? style["active"] : "" }`}> -

Atendimento ao Consumidor

+

Atendimento ao Consumidor

(11) 4159 9504 -

Atendimento Online

+

Atendimento Online

(11) 99433-8825 @@ -152,8 +152,15 @@ const FooterMobile = () => {
- - + + . + + + . +
@@ -172,7 +179,7 @@ const FooterMobile = () => { Hipercard Pay Pal Boleto - + Vtex
diff --git a/desafio5/src/components/Footer/footer.module.css b/desafio5/src/components/Footer/footer.module.scss similarity index 91% rename from desafio5/src/components/Footer/footer.module.css rename to desafio5/src/components/Footer/footer.module.scss index 267d422..6fd7f28 100644 --- a/desafio5/src/components/Footer/footer.module.css +++ b/desafio5/src/components/Footer/footer.module.scss @@ -5,9 +5,8 @@ padding: 50px 100px; } -h1 { - font-family: "Roboto"; - font-style: normal; +h2 { + font-family: "Roboto", sans-serif; font-weight: 500; font-size: 14px; line-height: 16px; @@ -17,8 +16,8 @@ h1 { text-transform: uppercase; } -h2 { - font-family: "Roboto"; +h3 { + font-family: "Roboto", sans-serif; font-style: normal; font-weight: 500; font-size: 12px; @@ -30,7 +29,7 @@ h2 { } a { - font-family: "Roboto"; + font-family: "Roboto", sans-serif; font-style: normal; font-weight: 400; font-size: 12px; @@ -51,6 +50,7 @@ a { .last-link { margin: 0; + text-decoration: underline; } .icons-top { @@ -127,7 +127,7 @@ a { } p { - font-family: "Roboto"; + font-family: "Roboto", sans-serif; font-style: normal; font-weight: 400; font-size: 10px; @@ -153,6 +153,7 @@ p { background-size: 100% 100%; background-color: transparent; border: 0; + margin: 0; cursor: pointer; } @@ -164,6 +165,7 @@ p { background-repeat: no-repeat; background-size: 100% 100%; background-color: transparent; + margin-bottom: 0; border: 0; } diff --git a/desafio5/src/components/Footer/footerMobile.module.css b/desafio5/src/components/Footer/footerMobile.module.css index 0ab92e3..aace8ef 100644 --- a/desafio5/src/components/Footer/footerMobile.module.css +++ b/desafio5/src/components/Footer/footerMobile.module.css @@ -6,7 +6,7 @@ .button-title { margin-bottom: 12px; - font-family: "Roboto"; + font-family: "Roboto", sans-serif; font-style: normal; font-weight: 500; font-size: 14px; @@ -59,7 +59,7 @@ button { } p { - font-family: "Roboto"; + font-family: "Roboto", sans-serif; font-style: normal; font-weight: 400; font-size: 10px; @@ -72,7 +72,6 @@ p { .footer-bottom { flex-direction: column; align-items: flex-start; - padding: 15px 16px; background: #000000; display: flex; justify-content: space-between; @@ -87,10 +86,6 @@ p { min-width: 234px; } -.cards { - margin-bottom: 15px; -} - .powered { display: flex; align-items: center; @@ -100,6 +95,7 @@ p { .cards { display: flex; align-items: center; + margin-bottom: 15px; } .icons { @@ -132,6 +128,10 @@ p { width: 1px; } +.last-link { + text-decoration: underline; +} + .float-buttons { position: fixed; top: 80%; @@ -148,6 +148,7 @@ p { background-size: 100% 100%; background-color: transparent; border: 0; + margin: 0; cursor: pointer; } @@ -159,6 +160,7 @@ p { background-repeat: no-repeat; background-size: 100% 100%; background-color: transparent; + margin-bottom: 0; border: 0; } diff --git a/desafio5/src/components/Header/Header.tsx b/desafio5/src/components/Header/Header.tsx index 7c03795..2c323b2 100644 --- a/desafio5/src/components/Header/Header.tsx +++ b/desafio5/src/components/Header/Header.tsx @@ -6,7 +6,7 @@ import style from "./header.module.css"; const Header = () => { return ( -
+