From 13d880575db10668c9e91e9c9a5e62ed400d6384 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 20 Jan 2023 19:57:43 -0300 Subject: [PATCH] feat(MainContainer): Adiciona estrutura do Main Container --- src/App.scss | 111 +++++++++++++ src/App.tsx | 32 ++++ src/components/ContactForm.tsx | 133 ++++++++++++++++ .../Container-menu/TextContainer.tsx | 35 +++++ .../Container-menu/TopContainer.modules.scss | 75 +++++++++ .../Container-menu/TopContainer.tsx | 23 +++ src/components/DetectSize.tsx | 26 +++ src/components/Header/ContentMenuHeader.tsx | 19 --- .../Header/HeaderDesktop.modules.scss | 148 ------------------ src/components/Header/HeaderDesktop.tsx | 44 ------ .../Header/HeaderMobile.modules.scss | 141 ----------------- src/components/Header/HeaderMobile.tsx | 38 ----- src/components/MenuHeader.tsx | 27 ++++ src/components/Navegation.tsx | 41 +++++ src/index.tsx | 15 ++ src/react-app-env.d.ts | 1 + src/router.tsx | 23 +++ 17 files changed, 542 insertions(+), 390 deletions(-) create mode 100644 src/App.scss create mode 100644 src/App.tsx create mode 100644 src/components/ContactForm.tsx create mode 100644 src/components/Container-menu/TextContainer.tsx create mode 100644 src/components/Container-menu/TopContainer.modules.scss create mode 100644 src/components/Container-menu/TopContainer.tsx create mode 100644 src/components/DetectSize.tsx delete mode 100644 src/components/Header/ContentMenuHeader.tsx delete mode 100644 src/components/Header/HeaderDesktop.modules.scss delete mode 100644 src/components/Header/HeaderDesktop.tsx delete mode 100644 src/components/Header/HeaderMobile.modules.scss delete mode 100644 src/components/Header/HeaderMobile.tsx create mode 100644 src/components/MenuHeader.tsx create mode 100644 src/components/Navegation.tsx create mode 100644 src/index.tsx create mode 100644 src/react-app-env.d.ts create mode 100644 src/router.tsx diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..02fa106 --- /dev/null +++ b/src/App.scss @@ -0,0 +1,111 @@ +@import "./components/Variables.scss"; + +body { + margin: 0; +} + +.Container-menu { + display: flex; + flex-direction: column; +} + +.TopContainer_wrapper { + display: flex; + flex-direction: column; +} + +.MainConteiner { + display: flex; + max-width: 100%; + padding-bottom: 66px; + + @media (min-width: 1025px) { + margin: 0 100px; + margin-bottom: 70px; + } + + @media (max-width: 1024px) { + padding-bottom: 68px; + } + + @media (min-width: 2500px) { + margin-bottom: 84px; + } + + .Main_textArea { + @media (min-width: 1025px) { + width: 100%; + padding: 10px 0px; + } + + @media (max-width: 1024px) { + padding: 0 16px; + } + + h2 { + margin: 0; + margin-bottom: 12px; + font-family: $fontFamily; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: $color-black; + + @media (max-width: 1024px) { + text-align: center; + margin-top: 30px; + } + + @media (min-width: 2500px) { + font-weight: 700; + font-size: 48px; + line-height: 56px; + } + } + + .MainText { + display: flex; + flex-direction: column; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 15px; + color: $color-gray-500; + gap: 20px; + + .Apagar-Texto { + @media (max-width: 1024px) { + display: none; + } + } + + p { + margin: 0; + color: $color-gray-500; + font-weight: 400; + font-size: 13px; + line-height: 15px; + font-family: $fontFamily; + + @media (max-width: 1024px) { + font-weight: 400; + font-size: 12px; + line-height: 18px; + text-align: justify; + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 26px; + line-height: 30px; + } + } + } + } + + @media (max-width: 1024px) { + flex-direction: column; + } +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..b54722c --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,32 @@ +import { Router } from "./router"; +import { Navegation } from "./components/Navegation"; + +import { ScreenSize } from "./components/DetectSize"; + +import { HeaderDesktop } from "./components/Header/HeaderDesktop"; +import { HeaderMobile } from "./components/Header/HeaderMobile"; +import { TopContainer } from "./components/Container-menu/TopContainer"; +import { MainFooter } from "./components/Footer/FooterMain"; + +import "./App.scss"; + +export const App = () => { + return ( + ScreenSize(), + ( + <> + {window.innerWidth > 1024 ? : } +
+
+ +
+
+ + +
+ +
+ + ) + ); +}; diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx new file mode 100644 index 0000000..4378ee6 --- /dev/null +++ b/src/components/ContactForm.tsx @@ -0,0 +1,133 @@ +import { Formik, Form, Field, ErrorMessage } from "formik"; +import FormSchema from "./schema/FormSchema"; +import { useState } from "react"; + +interface IFormikValues { + name: string; + email: string; + cpf: string; + data: string; + telefone: string; + instagram?: string; + checkbox: boolean; +} + +const initialValues = { + name: "", + email: "", + cpf: "", + data: "", + telefone: "", + instagram: "", + checkbox: false, +}; + +export const ContactForm = () => { + const [isSubmited, setIsSubmited] = useState(false); + const formSubmit = (values: IFormikValues) => { + setIsSubmited(true); + }; + return ( + + {({ errors, touched, isValid, validateForm }) => ( +
+
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ + {isSubmited && *Formulário enviado com sucesso!} +
+ )} + + ); +}; diff --git a/src/components/Container-menu/TextContainer.tsx b/src/components/Container-menu/TextContainer.tsx new file mode 100644 index 0000000..7c428b9 --- /dev/null +++ b/src/components/Container-menu/TextContainer.tsx @@ -0,0 +1,35 @@ +export const MainText = () => { + return ( + <> +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+ + ); +}; diff --git a/src/components/Container-menu/TopContainer.modules.scss b/src/components/Container-menu/TopContainer.modules.scss new file mode 100644 index 0000000..89214e8 --- /dev/null +++ b/src/components/Container-menu/TopContainer.modules.scss @@ -0,0 +1,75 @@ +@import "../Variables.scss"; + +.TopIcons { + display: flex; + padding: 29px 16px; + align-items: center; + + .HouseIcon { + @media (min-width: 2500px) { + img { + width: 31.22px; + } + } + } + + @media (min-width: 1025px) { + padding: 30px 0 81px 100px; + } + + .Arrow { + margin: 0 9.7px; + + @media (min-width: 2500px) { + width: 15.62px; + height: 15.62px; + } + } + + .span_top { + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-gray; + text-transform: uppercase; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + } +} + +.Title_wrapper { + display: flex; + justify-content: center; + + .Title { + margin: 0 0 80px 0; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: $color-gray-800; + + @media (max-width: 1024px) { + margin: 80px 0 40px; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 48px; + line-height: 56px; + letter-spacing: 0.1em; + } + } +} diff --git a/src/components/Container-menu/TopContainer.tsx b/src/components/Container-menu/TopContainer.tsx new file mode 100644 index 0000000..efec1c2 --- /dev/null +++ b/src/components/Container-menu/TopContainer.tsx @@ -0,0 +1,23 @@ +import { NavLink } from "react-router-dom"; + +import HouseIcon from "../assets/imgs/SVGs/house-icon.svg"; +import Arrow from "../assets/imgs/SVGs/arrow-point-to-right.svg"; + +import "./TopContainer.modules.scss"; + +export const TopContainer = () => { + return ( + <> +
+ + HouseIcon + + Arrow + institucional +
+
+

institucional

+
+ + ); +}; diff --git a/src/components/DetectSize.tsx b/src/components/DetectSize.tsx new file mode 100644 index 0000000..80cfc16 --- /dev/null +++ b/src/components/DetectSize.tsx @@ -0,0 +1,26 @@ +import React, { useState, useEffect } from "react"; + +import { HeaderDesktop } from "./Header/HeaderDesktop"; +import { HeaderMobile } from "./Header/HeaderMobile"; + +export function ScreenSize() { + const [windowDimenion, detectHW] = useState({ + winWidth: window.innerWidth, + }); + + const detectSize = () => { + detectHW({ + winWidth: window.innerWidth, + }); + }; + + useEffect(() => { + window.addEventListener("resize", detectSize); + + return () => { + window.removeEventListener("resize", detectSize); + }; + }, [windowDimenion]); + + return window.innerWidth > 1024 ? : ; +} diff --git a/src/components/Header/ContentMenuHeader.tsx b/src/components/Header/ContentMenuHeader.tsx deleted file mode 100644 index a11f752..0000000 --- a/src/components/Header/ContentMenuHeader.tsx +++ /dev/null @@ -1,19 +0,0 @@ -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 deleted file mode 100644 index 05956ff..0000000 --- a/src/components/Header/HeaderDesktop.modules.scss +++ /dev/null @@ -1,148 +0,0 @@ -@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 deleted file mode 100644 index c29e19e..0000000 --- a/src/components/Header/HeaderDesktop.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 deleted file mode 100644 index 84e7135..0000000 --- a/src/components/Header/HeaderMobile.modules.scss +++ /dev/null @@ -1,141 +0,0 @@ -@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 deleted file mode 100644 index e87fc82..0000000 --- a/src/components/Header/HeaderMobile.tsx +++ /dev/null @@ -1,38 +0,0 @@ -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 - -
-
-
- -
-
- - ); -}; diff --git a/src/components/MenuHeader.tsx b/src/components/MenuHeader.tsx new file mode 100644 index 0000000..1489d78 --- /dev/null +++ b/src/components/MenuHeader.tsx @@ -0,0 +1,27 @@ +import { ContentMenuHeader } from "./Header/ContentMenuHeader"; + +import CloseIcon from "./assets/imgs/SVGs/Close-button.svg"; + +interface MenuHeaderProps { + isOpened: boolean; + setIsOpened: React.Dispatch>; +} + +export const MenuHeader = ({ isOpened, setIsOpened }: MenuHeaderProps) => { + return ( + <> +
+
+ ENTRAR + +
+
+ +
+
+
+ + ); +}; diff --git a/src/components/Navegation.tsx b/src/components/Navegation.tsx new file mode 100644 index 0000000..5bb9011 --- /dev/null +++ b/src/components/Navegation.tsx @@ -0,0 +1,41 @@ +import { useState } from "react"; +import { NavLink } from "react-router-dom"; + +import "./Navegation.modules.scss"; + +export const Navegation = () => { + const [isActive, setIsActive] = useState(false); + + const handlechange = () => { + setIsActive((isActive) => !isActive); + }; + + let toggleClassCheck = isActive ? "active" : ""; + + return ( + <> + + + ); +}; diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..494dd23 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; +import { App } from "./App"; + +const root = ReactDOM.createRoot( + document.getElementById("root") as HTMLElement +); +root.render( + + + + + +); diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/router.tsx b/src/router.tsx new file mode 100644 index 0000000..216694f --- /dev/null +++ b/src/router.tsx @@ -0,0 +1,23 @@ +import { Routes, Route } from "react-router-dom"; + +import { About } from "./pages/About"; +import { Payments } from "./pages/Payments"; +import { Delivery } from "./pages/Delivery"; +import { Form } from "./pages/Contact"; +import { Privacy } from "./pages/Privacy"; +import { Refund } from "./pages/Refund"; + +export const Router = () => { + return ( + <> + + } /> + } /> + } /> + } /> + } /> + } /> + + + ); +}; -- 2.34.1