diff --git a/src/components/Footer/BottomFooter.tsx b/src/components/Footer/BottomFooter.tsx new file mode 100644 index 0000000..b53f679 --- /dev/null +++ b/src/components/Footer/BottomFooter.tsx @@ -0,0 +1,45 @@ +import Vtex from "../assets/imgs/SVGs/Vtex-logo.svg"; +import M3 from "../assets/imgs/SVGs/M3-logo.svg"; + +import Master from "../assets/imgs/SVGs/credit-cards/Master.svg"; +import Visa from "../assets/imgs/SVGs/credit-cards/Visa.svg"; +import Diners from "../assets/imgs/SVGs/credit-cards/Diners.svg"; +import Elo from "../assets/imgs/SVGs/credit-cards/Elo.svg"; +import Hiper from "../assets/imgs/SVGs/credit-cards/Hiper.svg"; +import Pagseguro from "../assets/imgs/SVGs/credit-cards/Pagseguro.svg"; +import Boleto from "../assets/imgs/SVGs/credit-cards/Boleto.svg"; +import vtex from "../assets/imgs/SVGs/credit-cards/vtex-pci-200.svg"; + +export const BottomFooter = () => { + return ( + <> +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor + + +
+ Master-icon + Visa-icon + Diners-icon + Elo-icon + Hiper-icon + Pagseguro-icon + Boleto-icon + + + vtex-icon +
+ +
+ Powered by + Vtex-logo + + Developed by + M3-logo +
+
+ + ); +}; diff --git a/src/components/Footer/ContactFooter.tsx b/src/components/Footer/ContactFooter.tsx new file mode 100644 index 0000000..5515f20 --- /dev/null +++ b/src/components/Footer/ContactFooter.tsx @@ -0,0 +1,62 @@ +import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter"; +import { useState } from "react"; + +export const Contact = () => { + const [isOpened, setIsOpened] = useState(false); + const [isOpened2, setIsOpened2] = useState(false); + const [isOpened3, setIsOpened3] = useState(false); + if (window.innerWidth > 1024) { + return ( + <> +
+
+
Institucional
+ +
+
+
Dúvidas
+ +
+
+
Fale Conosco
+ +
+
+ + ); + } else { + return ( + <> +
+
{ + setIsOpened(!isOpened); + }} + > +
Institucional
+ {isOpened && } +
+
{ + setIsOpened2(!isOpened2); + }} + > +
Dúvidas
+ {isOpened2 && } +
+
{ + setIsOpened3(!isOpened3); + }} + > +
Fale Conosco
+ {isOpened3 && } +
+
+ + ); + } +}; diff --git a/src/components/Footer/FooterMain.tsx b/src/components/Footer/FooterMain.tsx new file mode 100644 index 0000000..a79699c --- /dev/null +++ b/src/components/Footer/FooterMain.tsx @@ -0,0 +1,21 @@ +import { Newsletter } from "./Newsletter"; +import { Contact } from "./ContactFooter"; +import { SocialMedia } from "./SocialMedia"; +import { BottomFooter } from "./BottomFooter"; + +import "./FooterMain.modules.scss"; + +export const MainFooter = () => { + return ( + <> +
+ +
+ + +
+ +
+ + ); +}; diff --git a/src/components/Footer/MenuListFooter.tsx b/src/components/Footer/MenuListFooter.tsx new file mode 100644 index 0000000..d08a6c9 --- /dev/null +++ b/src/components/Footer/MenuListFooter.tsx @@ -0,0 +1,63 @@ +import { NavLink } from "react-router-dom"; + +interface MenuFooterProps { + isOpened: boolean; + setIsOpened: React.Dispatch>; +} + +export const MenuList1 = () => { + return ( + <> + + Quem Somos + + + Política de Privacidade + + + Segurança + + + Seja um Revendedor + + + ); +}; + +export const MenuList2 = () => { + return ( + <> + + Entrega + + + Pagamento + + + Trocas e Devoluções + + + Dúvidas Frequentes + + + ); +}; + +export const MenuList3 = () => { + return ( + <> + + Atendimento ao Consumidor + + + (11) 4159-9504 + + + Atendimento Online + + + (11) 99433-8825 + + + ); +}; diff --git a/src/components/Footer/Newsletter.tsx b/src/components/Footer/Newsletter.tsx new file mode 100644 index 0000000..a635f75 --- /dev/null +++ b/src/components/Footer/Newsletter.tsx @@ -0,0 +1,16 @@ +export const Newsletter = () => { + return ( + <> +
+
+

Assine nossa Newsletter

+ +
+ + +
+
+
+ + ); +}; diff --git a/src/components/Footer/SocialMedia.tsx b/src/components/Footer/SocialMedia.tsx new file mode 100644 index 0000000..db7b420 --- /dev/null +++ b/src/components/Footer/SocialMedia.tsx @@ -0,0 +1,26 @@ +import Facebook from "../assets/imgs/SVGs/Facebook.svg"; +import Instagram from "../assets/imgs/SVGs/Instagram.svg"; +import Twitter from "../assets/imgs/SVGs/Twitter.svg"; +import YouTube from "../assets/imgs/SVGs/YouTube.svg"; +import Linkedin from "../assets/imgs/SVGs/Linkedin.svg"; + +import { WppIcon } from "./wpp"; + +export const SocialMedia = () => { + return ( + <> +
+
+ Facebook-logo + Instagram-logo + Twitter-logo + YouTube-logo + Linkedin-logo +
+ www.loremipsum.com + + {/*
{window.innerWidth > 1024 ? : ""}
*/} +
+ + ); +}; diff --git a/src/components/Footer/wpp.tsx b/src/components/Footer/wpp.tsx new file mode 100644 index 0000000..2d9bb2f --- /dev/null +++ b/src/components/Footer/wpp.tsx @@ -0,0 +1,30 @@ +import Wpp from "../assets/imgs/SVGs/whatsapp.svg"; +import Ellipse from "../assets/imgs/SVGs/Ellipse.svg"; +import { useEffect } from "react"; + +export const WppIcon = () => { + return ( + <> +
+ + Wpp-logo + +
+ Ellipse-logo { + window.scrollTo(0, 0); + }} + /> +
+
+ + ); +}; diff --git a/src/components/Header/ContentMenuHeader.tsx b/src/components/Header/ContentMenuHeader.tsx new file mode 100644 index 0000000..a11f752 --- /dev/null +++ b/src/components/Header/ContentMenuHeader.tsx @@ -0,0 +1,19 @@ +import { NavLink } from "react-router-dom"; + +export const ContentMenuHeader = () => { + return ( + <> +
+ + + + + + + + + +
+ + ); +}; diff --git a/src/components/Header/HeaderDesktop.modules.scss b/src/components/Header/HeaderDesktop.modules.scss new file mode 100644 index 0000000..05956ff --- /dev/null +++ b/src/components/Header/HeaderDesktop.modules.scss @@ -0,0 +1,148 @@ +@import "../Variables.scss"; + +.HeaderDesktop { + display: flex; + justify-content: space-between; + height: 31px; + padding: 22px 100px; + background: $color-black; + font-family: $fontFamily; + border-bottom: 1px solid $color-gray; + + @media (min-width: 2500px) { + height: 56px; + } + + .m3LogoWrapper { + display: flex; + align-items: center; + + .M3Logo { + width: 100%; + @media (min-width: 2500px) { + width: 265.62px; + height: 50.5px; + } + } + } + + .Search_Header_wrapper { + position: relative; + display: flex; + align-items: center; + width: 24.445%; + max-width: 515px; + + .Search_Header { + position: relative; + width: 100%; + height: 12px; + padding: 8px 16px; + border: 2px solid $color-white-100; + border-radius: 5px; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-gray; + + &::placeholder { + color: $color-gray; + } + + @media (min-width: 2500px) { + height: 29px; + padding: 12px 16px; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + } + .Search_Header_wrapper::after { + position: absolute; + content: ""; + width: 18px; + height: 18px; + top: 7px; + right: 16px; + background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg"); + background-repeat: no-repeat; + cursor: pointer; + + @media (min-width: 2500px) { + width: 35.15px; + height: 35.15px; + background-size: contain; + top: 10px; + } + } + .Headerlinks { + display: flex; + gap: 55px; + + .EnterLink { + display: flex; + align-items: center; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-white; + text-decoration: none; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + .CartIcon_Wrapper { + display: flex; + align-items: center; + + a { + display: flex; + align-items: center; + } + + .CartIcon { + width: 100%; + } + } + } +} + +.ContentHeader_wrapper { + padding: 14px 100px; + background: $color-black; + font-family: $fontFamily; + font-style: normal; + gap: 55px; + display: flex; + height: 16px; + font-weight: 400; + font-size: 14px; + line-height: 16px; + + @media (min-width: 2500px) { + height: 33px; + } + + button { + padding: 0; + background: $color-black; + border: none; + color: $color-white; + cursor: pointer; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + font-family: $fontFamily; + @media (min-width: 2500px) { + font-weight: 500; + font-size: 28px; + line-height: 33px; + } + } +} diff --git a/src/components/Header/HeaderDesktop.tsx b/src/components/Header/HeaderDesktop.tsx new file mode 100644 index 0000000..c29e19e --- /dev/null +++ b/src/components/Header/HeaderDesktop.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { NavLink } from "react-router-dom"; + +import LogoM3 from "../assets/imgs/SVGs/M3Logo_desktop.svg"; +import CartIcon from "../assets/imgs/SVGs/CartIcon_desktop.svg"; + +import { ContentMenuHeader } from "./ContentMenuHeader"; + +import "./HeaderDesktop.modules.scss"; + +export const HeaderDesktop = () => { + return ( + <> +
+
+ + LogoM3 + +
+
+ + +
+
+ + ENTRAR + +
+ + Cart-Icon + +
+
+
+
+ +
+ + ); +}; diff --git a/src/components/Header/HeaderMobile.modules.scss b/src/components/Header/HeaderMobile.modules.scss new file mode 100644 index 0000000..84e7135 --- /dev/null +++ b/src/components/Header/HeaderMobile.modules.scss @@ -0,0 +1,141 @@ +@import "../Variables.scss"; + +.HeaderMobile { + display: flex; + flex-direction: column; + padding: 25px 16px; + background: $color-black; + + .topHeaderMobile { + display: flex; + justify-content: space-between; + padding-bottom: 25px; + + .ModalWrapper { + position: fixed; + left: 0; + top: 0; + + pointer-events: none; + opacity: 0; + transition: all 0.2s ease-in-out; + + .ModalContent { + z-index: 8; + + .ContentHeader_wrapper { + display: flex; + flex-direction: column; + height: 585px; + background: $color-white; + padding: 31px 16px; + gap: 12px; + z-index: 8; + + button { + color: $color-gray; + background: $color-white; + } + } + } + + .Modaltop { + display: flex; + justify-content: space-between; + padding: 31px 16px; + background: $color-black; + color: $color-white; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + z-index: 8; + + .CloseButton { + border: none; + background: $color-black; + } + } + } + + .ModalWrapper.opened { + display: flex; + flex-direction: column; + width: calc(100% - 36px); + position: fixed; + left: 0; + top: 0; + z-index: 8; + + pointer-events: all; + opacity: 1; + } + + .ModalOuverlay { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 1; + + background-color: rgba(69, 69, 69, 0.7); + } + } + + .MenuIcon { + background: $color-black; + border: none; + + @media (max-width: 1024px) { + padding-left: 0; + } + } + + .Search_Header_wrapper { + position: relative; + width: 100%; + + @media (max-width: 374px) { + display: flex; + justify-content: center; + } + + .Search_Header { + width: 96.372%; + border: 2px solid $color-white-100; + border-radius: 5px; + padding: 10px 16px; + color: $color-black; + + @media (max-width: 1024px) { + height: 12px; + width: calc(100% - 36px); + } + + @media (max-width: 375px) { + width: 89.508%; + height: 12px; + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + + &::placeholder { + color: $color-gray; + } + } + } + + .Search_Header_wrapper::after { + position: absolute; + content: ""; + width: 18px; + height: 18px; + right: 16px; + top: 10px; + background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg"); + cursor: pointer; + } +} \ No newline at end of file diff --git a/src/components/Header/HeaderMobile.tsx b/src/components/Header/HeaderMobile.tsx new file mode 100644 index 0000000..e87fc82 --- /dev/null +++ b/src/components/Header/HeaderMobile.tsx @@ -0,0 +1,38 @@ +import { useState } from "react"; +import { NavLink } from "react-router-dom"; + +import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg"; +import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg"; +import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg"; +import { MenuHeader } from "../MenuHeader"; + +import "./HeaderMobile.modules.scss"; + +export const HeaderMobile = () => { + const [isOpened, setIsOpened] = useState(false); + return ( + <> +
+
+ + +
+ + LogoM3 + +
+
+ + CartIcon + +
+
+
+ +
+
+ + ); +};