From f323f22a2e8c119a97d6040de467c1338349d093 Mon Sep 17 00:00:00 2001 From: ueberjames Date: Sun, 8 Jan 2023 20:18:30 -0300 Subject: [PATCH] =?UTF-8?q?cria=C3=A7=C3=A3o=20do=20footer=20bandeira=20e?= =?UTF-8?q?=20powerby=20de=20descktop=201280=20e=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/flagsCards/AmericanExpress.svg | 9 ++ .../Footer/assets/flagsCards/Elo.svg | 9 ++ .../Footer/assets/flagsCards/Hiper.svg | 9 ++ .../Footer/assets/flagsCards/Master.svg | 9 ++ .../Footer/assets/flagsCards/PayPal.svg | 9 ++ .../Footer/assets/flagsCards/Visa.svg | 9 ++ .../Footer/assets/flagsCards/boleto.svg | 9 ++ .../Footer/assets/flagsCards/vtexPci-icon.svg | 9 ++ .../components/Footer/assets/imgs/m3-logo.svg | 4 + .../Footer/assets/imgs/vtex-logo.svg | 7 ++ .../components/Footer/components/footerBy.tsx | 29 +++++++ .../components/Footer/components/payFlags.tsx | 20 +++++ desafio-5/src/components/Footer/footer.tsx | 54 ++++++++++++ .../Footer/style/footer.module.scss | 86 +++++++++++++++++++ .../Footer/style/footerBy.module.scss | 39 +++++++++ .../Footer/style/payFlags.module.scss | 26 ++++++ .../Header/assets/icons}/Vectorbuscaicon.svg | 0 .../Header/assets/icons}/fechaHamburgue.svg | 0 .../assets/icons}/menuHamburguer-icon.svg | 0 .../assets/icons}/shoppingCart-icon.svg | 0 .../Logo-M3Academy 1m3academy-header.svg | 0 .../Header/{ => components}/BuscaMenu.tsx | 4 +- .../Header/{ => components}/SubMenu.tsx | 60 ++++++------- .../Header/components/menuHeader.tsx | 36 ++++++++ desafio-5/src/components/Header/header.tsx | 30 +++---- .../src/components/Header/menuHeader.tsx | 38 -------- .../Header/styles}/header.module.scss | 0 .../Header/styles}/headermenu.module.scss | 0 .../styles}/inputMenuHeader.module.scss | 0 .../Header/styles}/submenu.module.scss | 4 +- desafio-5/src/pages/Home.tsx | 4 +- 31 files changed, 418 insertions(+), 95 deletions(-) create mode 100644 desafio-5/src/components/Footer/assets/flagsCards/AmericanExpress.svg create mode 100644 desafio-5/src/components/Footer/assets/flagsCards/Elo.svg create mode 100644 desafio-5/src/components/Footer/assets/flagsCards/Hiper.svg create mode 100644 desafio-5/src/components/Footer/assets/flagsCards/Master.svg create mode 100644 desafio-5/src/components/Footer/assets/flagsCards/PayPal.svg create mode 100644 desafio-5/src/components/Footer/assets/flagsCards/Visa.svg create mode 100644 desafio-5/src/components/Footer/assets/flagsCards/boleto.svg create mode 100644 desafio-5/src/components/Footer/assets/flagsCards/vtexPci-icon.svg create mode 100644 desafio-5/src/components/Footer/assets/imgs/m3-logo.svg create mode 100644 desafio-5/src/components/Footer/assets/imgs/vtex-logo.svg create mode 100644 desafio-5/src/components/Footer/components/footerBy.tsx create mode 100644 desafio-5/src/components/Footer/components/payFlags.tsx create mode 100644 desafio-5/src/components/Footer/footer.tsx create mode 100644 desafio-5/src/components/Footer/style/footer.module.scss create mode 100644 desafio-5/src/components/Footer/style/footerBy.module.scss create mode 100644 desafio-5/src/components/Footer/style/payFlags.module.scss rename desafio-5/src/{assets/icones => components/Header/assets/icons}/Vectorbuscaicon.svg (100%) rename desafio-5/src/{assets/icones => components/Header/assets/icons}/fechaHamburgue.svg (100%) rename desafio-5/src/{assets/icones => components/Header/assets/icons}/menuHamburguer-icon.svg (100%) rename desafio-5/src/{assets/icones => components/Header/assets/icons}/shoppingCart-icon.svg (100%) rename desafio-5/src/{assets/logos => components/Header/assets/imgs}/Logo-M3Academy 1m3academy-header.svg (100%) rename desafio-5/src/components/Header/{ => components}/BuscaMenu.tsx (81%) rename desafio-5/src/components/Header/{ => components}/SubMenu.tsx (52%) create mode 100644 desafio-5/src/components/Header/components/menuHeader.tsx delete mode 100644 desafio-5/src/components/Header/menuHeader.tsx rename desafio-5/src/{styles/header => components/Header/styles}/header.module.scss (100%) rename desafio-5/src/{styles/header => components/Header/styles}/headermenu.module.scss (100%) rename desafio-5/src/{styles/header => components/Header/styles}/inputMenuHeader.module.scss (100%) rename desafio-5/src/{styles/header => components/Header/styles}/submenu.module.scss (98%) diff --git a/desafio-5/src/components/Footer/assets/flagsCards/AmericanExpress.svg b/desafio-5/src/components/Footer/assets/flagsCards/AmericanExpress.svg new file mode 100644 index 0000000..efa6194 --- /dev/null +++ b/desafio-5/src/components/Footer/assets/flagsCards/AmericanExpress.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-5/src/components/Footer/assets/flagsCards/Elo.svg b/desafio-5/src/components/Footer/assets/flagsCards/Elo.svg new file mode 100644 index 0000000..93ccba3 --- /dev/null +++ b/desafio-5/src/components/Footer/assets/flagsCards/Elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-5/src/components/Footer/assets/flagsCards/Hiper.svg b/desafio-5/src/components/Footer/assets/flagsCards/Hiper.svg new file mode 100644 index 0000000..923ff82 --- /dev/null +++ b/desafio-5/src/components/Footer/assets/flagsCards/Hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-5/src/components/Footer/assets/flagsCards/Master.svg b/desafio-5/src/components/Footer/assets/flagsCards/Master.svg new file mode 100644 index 0000000..7707d8b --- /dev/null +++ b/desafio-5/src/components/Footer/assets/flagsCards/Master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-5/src/components/Footer/assets/flagsCards/PayPal.svg b/desafio-5/src/components/Footer/assets/flagsCards/PayPal.svg new file mode 100644 index 0000000..5da8465 --- /dev/null +++ b/desafio-5/src/components/Footer/assets/flagsCards/PayPal.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-5/src/components/Footer/assets/flagsCards/Visa.svg b/desafio-5/src/components/Footer/assets/flagsCards/Visa.svg new file mode 100644 index 0000000..3b9692b --- /dev/null +++ b/desafio-5/src/components/Footer/assets/flagsCards/Visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-5/src/components/Footer/assets/flagsCards/boleto.svg b/desafio-5/src/components/Footer/assets/flagsCards/boleto.svg new file mode 100644 index 0000000..e47286d --- /dev/null +++ b/desafio-5/src/components/Footer/assets/flagsCards/boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-5/src/components/Footer/assets/flagsCards/vtexPci-icon.svg b/desafio-5/src/components/Footer/assets/flagsCards/vtexPci-icon.svg new file mode 100644 index 0000000..a28db2f --- /dev/null +++ b/desafio-5/src/components/Footer/assets/flagsCards/vtexPci-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/desafio-5/src/components/Footer/assets/imgs/m3-logo.svg b/desafio-5/src/components/Footer/assets/imgs/m3-logo.svg new file mode 100644 index 0000000..4229a66 --- /dev/null +++ b/desafio-5/src/components/Footer/assets/imgs/m3-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio-5/src/components/Footer/assets/imgs/vtex-logo.svg b/desafio-5/src/components/Footer/assets/imgs/vtex-logo.svg new file mode 100644 index 0000000..f052f92 --- /dev/null +++ b/desafio-5/src/components/Footer/assets/imgs/vtex-logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/desafio-5/src/components/Footer/components/footerBy.tsx b/desafio-5/src/components/Footer/components/footerBy.tsx new file mode 100644 index 0000000..9d3b191 --- /dev/null +++ b/desafio-5/src/components/Footer/components/footerBy.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { ReactComponent as M3 } from "../assets/imgs/m3-logo.svg"; +import { ReactComponent as Vtex } from "../assets/imgs/vtex-logo.svg"; +import style from "../style/footerBy.module.scss"; + +const FooterBy = () => { + return ( +
+ + Powered by + + + + Developed by + + +
+ ); +}; + +export { FooterBy }; \ No newline at end of file diff --git a/desafio-5/src/components/Footer/components/payFlags.tsx b/desafio-5/src/components/Footer/components/payFlags.tsx new file mode 100644 index 0000000..4f1c295 --- /dev/null +++ b/desafio-5/src/components/Footer/components/payFlags.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import style from "../style/payFlags.module.scss"; + +interface IPayment{ + urlImage: string; + textAlt: string; + vtexPci?: boolean +} + +const Payment = ({urlImage, textAlt, vtexPci} : IPayment) => { + return ( + {textAlt} + ); +}; + +export { Payment }; diff --git a/desafio-5/src/components/Footer/footer.tsx b/desafio-5/src/components/Footer/footer.tsx new file mode 100644 index 0000000..1f513bd --- /dev/null +++ b/desafio-5/src/components/Footer/footer.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import style from "../Footer/style/footer.module.scss"; +import Master from "../Footer/assets/flagsCards/Master.svg"; +import Visa from "../Footer/assets/flagsCards/Visa.svg"; +import AmericanExpress from "../Footer/assets/flagsCards/AmericanExpress.svg"; +import Elo from "../Footer/assets/flagsCards/Elo.svg"; +import Hiper from "../Footer/assets/flagsCards/Hiper.svg"; +import Paypal from "../Footer/assets/flagsCards/PayPal.svg"; +import Boleto from "../Footer/assets/flagsCards/boleto.svg"; +import VtexPci from "../Footer/assets/flagsCards/vtexPci-icon.svg"; + + +import {FooterBy} from "../Footer/components/footerBy" +import { Payment } from "../Footer/components/payFlags"; + + + +const Footer = () => { + return ( + + ); + + } + + + + + export { Footer }; \ No newline at end of file diff --git a/desafio-5/src/components/Footer/style/footer.module.scss b/desafio-5/src/components/Footer/style/footer.module.scss new file mode 100644 index 0000000..433a3d6 --- /dev/null +++ b/desafio-5/src/components/Footer/style/footer.module.scss @@ -0,0 +1,86 @@ +.footer-home { + display: block; + display: flex; + background-color: var(--black-600); + justify-content: space-between; + align-items: center; + padding: 20px 100px; + color: #fff; +} + +.footer-home__text { + // max-width: 234px; + width: 100%; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; +} + +.footer-home__text--mobile { + display: none; +} + +.footer-home__payments { + display: flex; + align-items: center; +} + +.footer-home__payments--division { + display: flex; + align-items: center; + padding-left: 6px; +} + +.footer-home__payments--division:first-child { + padding-left: 0; +} + +@media screen and (max-width: 1024px) { + + .footer-home__payments{ + + order: -1; + } + .footer-home { + flex-direction: column; + padding: 16px; + align-items: flex-start; + + } + + .footer-home__text { + max-width: 234px; + + margin: 21.94px 0 21px 0; + } + + .footer-home__text--mobile { + max-width: 234px; + display: flex; + justify-content: center; + + } + + +} + + + + +@media screen and (max-width: 375px) { + + + + + + .footer-home__text--mobile { + flex-direction: column; + align-items: flex-start; + } + + .footer-home__payments--division:last-child { + margin-top: 10px; + } +} \ No newline at end of file diff --git a/desafio-5/src/components/Footer/style/footerBy.module.scss b/desafio-5/src/components/Footer/style/footerBy.module.scss new file mode 100644 index 0000000..0922c76 --- /dev/null +++ b/desafio-5/src/components/Footer/style/footerBy.module.scss @@ -0,0 +1,39 @@ +.footer-home__creators { + display: flex; +} + +.footer-home__creators-powered, +.footer-home__creators-developed { + display: flex; + align-items: center; + + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + text-decoration: none; + color: var(--whiet-100); +} + +.footer-home__creators-powered svg, +.footer-home__creators-developed svg { + padding-left: 8px; +} + +.footer-home__creators-developed { + margin-left: 13px; +} + +@media screen and (max-width: 1024px) { + .footer-home__creators { + width: 100%; + justify-content: flex-start; + + } +} + +@media screen and (max-width: 375px) { + .footer-home__creators { + justify-content: flex-start; + } +} \ No newline at end of file diff --git a/desafio-5/src/components/Footer/style/payFlags.module.scss b/desafio-5/src/components/Footer/style/payFlags.module.scss new file mode 100644 index 0000000..85a0bdf --- /dev/null +++ b/desafio-5/src/components/Footer/style/payFlags.module.scss @@ -0,0 +1,26 @@ +.footer-home__payments-band{ + padding: 0 7px; + } + .footer-home__payments-band:first-child{ + padding: 0 7px 0 0; + } + .footer-home__payments-band--vtexPci{ + margin-left: 7px; + padding: 0 0 0 10px; + border-left: 1px solid var(--gray-400); + } + + @media screen and (max-width: 1024px) { + .footer-home__payments-band{ + max-width: 30px; + padding: 0 5px; + + + } + .footer-home__payments-band:first-child{ + padding: 0 5px 0 0; + } + .footer-home__payments-band--vtexPci{ + max-width: 45px; + } + } \ No newline at end of file diff --git a/desafio-5/src/assets/icones/Vectorbuscaicon.svg b/desafio-5/src/components/Header/assets/icons/Vectorbuscaicon.svg similarity index 100% rename from desafio-5/src/assets/icones/Vectorbuscaicon.svg rename to desafio-5/src/components/Header/assets/icons/Vectorbuscaicon.svg diff --git a/desafio-5/src/assets/icones/fechaHamburgue.svg b/desafio-5/src/components/Header/assets/icons/fechaHamburgue.svg similarity index 100% rename from desafio-5/src/assets/icones/fechaHamburgue.svg rename to desafio-5/src/components/Header/assets/icons/fechaHamburgue.svg diff --git a/desafio-5/src/assets/icones/menuHamburguer-icon.svg b/desafio-5/src/components/Header/assets/icons/menuHamburguer-icon.svg similarity index 100% rename from desafio-5/src/assets/icones/menuHamburguer-icon.svg rename to desafio-5/src/components/Header/assets/icons/menuHamburguer-icon.svg diff --git a/desafio-5/src/assets/icones/shoppingCart-icon.svg b/desafio-5/src/components/Header/assets/icons/shoppingCart-icon.svg similarity index 100% rename from desafio-5/src/assets/icones/shoppingCart-icon.svg rename to desafio-5/src/components/Header/assets/icons/shoppingCart-icon.svg diff --git a/desafio-5/src/assets/logos/Logo-M3Academy 1m3academy-header.svg b/desafio-5/src/components/Header/assets/imgs/Logo-M3Academy 1m3academy-header.svg similarity index 100% rename from desafio-5/src/assets/logos/Logo-M3Academy 1m3academy-header.svg rename to desafio-5/src/components/Header/assets/imgs/Logo-M3Academy 1m3academy-header.svg diff --git a/desafio-5/src/components/Header/BuscaMenu.tsx b/desafio-5/src/components/Header/components/BuscaMenu.tsx similarity index 81% rename from desafio-5/src/components/Header/BuscaMenu.tsx rename to desafio-5/src/components/Header/components/BuscaMenu.tsx index 8885268..acbfb38 100644 --- a/desafio-5/src/components/Header/BuscaMenu.tsx +++ b/desafio-5/src/components/Header/components/BuscaMenu.tsx @@ -1,7 +1,7 @@ import React from "react"; -import style from "../../styles/header/inputMenuHeader.module.scss" -import buscaIcon from "../../assets/icones/Vectorbuscaicon.svg"; +import style from "../styles/inputMenuHeader.module.scss" +import buscaIcon from "../assets/icons/Vectorbuscaicon.svg"; interface IView{ view: string diff --git a/desafio-5/src/components/Header/SubMenu.tsx b/desafio-5/src/components/Header/components/SubMenu.tsx similarity index 52% rename from desafio-5/src/components/Header/SubMenu.tsx rename to desafio-5/src/components/Header/components/SubMenu.tsx index a0bca8a..48570bb 100644 --- a/desafio-5/src/components/Header/SubMenu.tsx +++ b/desafio-5/src/components/Header/components/SubMenu.tsx @@ -1,35 +1,30 @@ import React, { useContext } from "react"; -import style from "../../styles/header/submenu.module.scss"; -import { HeaderContext } from "../../contexts/HeaderContext"; -import fechaIcon from "../../assets/icones/fechaHamburgue.svg"; - - - - +import style from "../styles/submenu.module.scss"; +import { HeaderContext } from "../../../contexts/HeaderContext"; +import fechaIcon from "../assets/icons/fechaHamburgue.svg"; const Submenu = () => { - const { open, menu } = useContext(HeaderContext); - return ( -
-
-
- - CURSOS - - - SAIBA MAIS - + return ( +
+ -
+
+
menu(false)} className={`${style["submenu--absolute"]} ${ @@ -43,9 +38,7 @@ const Submenu = () => { > ENTRAR - menu(false)} /> - CURSOS @@ -54,13 +47,12 @@ const Submenu = () => { SAIBA MAIS - INSTIUCIONAL + INSTIUCIONais
- -
- ); - }; - - export { Submenu }; \ No newline at end of file +
+ ); +}; + +export { Submenu }; diff --git a/desafio-5/src/components/Header/components/menuHeader.tsx b/desafio-5/src/components/Header/components/menuHeader.tsx new file mode 100644 index 0000000..a73dea3 --- /dev/null +++ b/desafio-5/src/components/Header/components/menuHeader.tsx @@ -0,0 +1,36 @@ +import React, { useContext } from "react"; + +import style from "../styles/headermenu.module.scss"; +import logo from "../assets/imgs/Logo-M3Academy 1m3academy-header.svg"; +import CartIcon from "../assets/icons/shoppingCart-icon.svg"; +import { ReactComponent as MenuIcon } from "../assets/icons/menuHamburguer-icon.svg"; +import { BuscaMenu } from "./BuscaMenu"; +import { HeaderContext } from "../../../contexts/HeaderContext"; + +const MenuHeader = () => { + const { menu } = useContext(HeaderContext); + return ( +
+
+
menu(true)} className={style["icon-menu"]}> + +
+ + Logo M3 + + +
+ + ENTRAR + + +
+
+ +
+ ); +}; + +export { MenuHeader }; diff --git a/desafio-5/src/components/Header/header.tsx b/desafio-5/src/components/Header/header.tsx index 36ca687..eb2b141 100644 --- a/desafio-5/src/components/Header/header.tsx +++ b/desafio-5/src/components/Header/header.tsx @@ -1,26 +1,20 @@ -import React from "react"; +import React from "react"; -import style from "../../styles/header/header.module.scss"; +import style from "../Header/styles/header.module.scss"; - - -import { MenuHeader } from "./menuHeader"; -import { Submenu } from "./SubMenu" +import { MenuHeader } from "./components/menuHeader"; +import { Submenu } from "./components/SubMenu"; import { HeaderProvider } from "../../contexts/HeaderContext"; const Header = () => { - return ( - -
- - < Submenu /> - + return ( + +
+ +
- - ) - - -} - + + ); +}; export { Header }; diff --git a/desafio-5/src/components/Header/menuHeader.tsx b/desafio-5/src/components/Header/menuHeader.tsx deleted file mode 100644 index 7e511b0..0000000 --- a/desafio-5/src/components/Header/menuHeader.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { useContext } from "react"; - -import style from "../../styles/header/headermenu.module.scss"; -import logo from "../../assets/logos/Logo-M3Academy 1m3academy-header.svg"; -import CartIcon from "../../assets/icones/shoppingCart-icon.svg"; -import { ReactComponent as MenuIcon } from "../../assets/icones/menuHamburguer-icon.svg"; -import { BuscaMenu } from "./BuscaMenu"; -import { HeaderContext } from "../../contexts/HeaderContext"; - - -const MenuHeader = () => { - const { menu } = useContext(HeaderContext); - return ( -
-
-
menu(true)} className={style["icon-menu"]}> - -
- - Logo M3 - - < BuscaMenu view="desktop" /> -
- - ENTRAR - - -
-
- -
- ); - -} - -export { MenuHeader }; \ No newline at end of file diff --git a/desafio-5/src/styles/header/header.module.scss b/desafio-5/src/components/Header/styles/header.module.scss similarity index 100% rename from desafio-5/src/styles/header/header.module.scss rename to desafio-5/src/components/Header/styles/header.module.scss diff --git a/desafio-5/src/styles/header/headermenu.module.scss b/desafio-5/src/components/Header/styles/headermenu.module.scss similarity index 100% rename from desafio-5/src/styles/header/headermenu.module.scss rename to desafio-5/src/components/Header/styles/headermenu.module.scss diff --git a/desafio-5/src/styles/header/inputMenuHeader.module.scss b/desafio-5/src/components/Header/styles/inputMenuHeader.module.scss similarity index 100% rename from desafio-5/src/styles/header/inputMenuHeader.module.scss rename to desafio-5/src/components/Header/styles/inputMenuHeader.module.scss diff --git a/desafio-5/src/styles/header/submenu.module.scss b/desafio-5/src/components/Header/styles/submenu.module.scss similarity index 98% rename from desafio-5/src/styles/header/submenu.module.scss rename to desafio-5/src/components/Header/styles/submenu.module.scss index 8d41119..4e387dd 100644 --- a/desafio-5/src/styles/header/submenu.module.scss +++ b/desafio-5/src/components/Header/styles/submenu.module.scss @@ -104,7 +104,7 @@ } .submenu-links--mobile .submenu-link { - width: 100%; + // width: 100%; padding: 10px 0; padding: 0 0 12px 16px; @@ -115,7 +115,7 @@ } .submenu-link-entre { - width: 100%; + // width: 100%; margin-bottom: 31px; padding: 31px 0 31px 16px; diff --git a/desafio-5/src/pages/Home.tsx b/desafio-5/src/pages/Home.tsx index 0d7d372..1d43932 100644 --- a/desafio-5/src/pages/Home.tsx +++ b/desafio-5/src/pages/Home.tsx @@ -1,12 +1,14 @@ import React from "react"; -import { Header } from "../components/Header/Header"; +import { Header } from "../components/Header/header" +import { Footer } from "../components/Footer/footer" const Home = () => { return (
< Header /> + < Footer />