From 665c8e72e1cf3ac4c6574ad709c5bc9ac0c32879 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Mon, 16 Jan 2023 16:24:31 -0300 Subject: [PATCH] fix: Corrige alinha mente e responsividade dos conteudos dentro do main --- src/components/BreadCrumb/BreadCreumb.tsx | 11 +- .../BreadCrumb/BreadCrumb.module.scss | 31 ++++- .../Accordion/styles/Accordion.module.scss | 6 +- src/components/Footer/Footer.tsx | 1 + .../Footer/NewsLetter/Newsletter.module.scss | 2 +- .../Footer/Rodape/Rodape.module.scss | 2 +- src/components/Footer/Rodape/Rodape.tsx | 3 + .../Footer/SocialMedia/SocialMedia.tsx | 10 +- .../Header/HeaderDesk/HeaderBottom.tsx | 2 +- .../Header/HeaderDesk/HeaderTop.tsx | 9 +- .../Header/styles/Header.module.scss | 4 +- src/components/Layout/index.tsx | 24 ---- src/components/Main/Fom/ContactForm.tsx | 108 ------------------ src/pages/Home.tsx | 24 ++++ .../Intitucional/Institucional.module.scss | 67 ++++++++++- src/pages/Intitucional/Instituicional.tsx | 2 +- .../Layout => pages}/styles.module.scss | 14 ++- src/routes.tsx | 10 +- variables.scss | 28 ----- 19 files changed, 161 insertions(+), 197 deletions(-) delete mode 100644 src/components/Layout/index.tsx delete mode 100644 src/components/Main/Fom/ContactForm.tsx create mode 100644 src/pages/Home.tsx rename src/{components/Layout => pages}/styles.module.scss (65%) delete mode 100644 variables.scss diff --git a/src/components/BreadCrumb/BreadCreumb.tsx b/src/components/BreadCrumb/BreadCreumb.tsx index 89903d4..4b98d5f 100644 --- a/src/components/BreadCrumb/BreadCreumb.tsx +++ b/src/components/BreadCrumb/BreadCreumb.tsx @@ -12,21 +12,20 @@ export const BreadCrumb = () => { const routeName = pathname.split("/")[1] - return ( diff --git a/src/components/Header/HeaderDesk/HeaderTop.tsx b/src/components/Header/HeaderDesk/HeaderTop.tsx index a8d91a1..45f7544 100644 --- a/src/components/Header/HeaderDesk/HeaderTop.tsx +++ b/src/components/Header/HeaderDesk/HeaderTop.tsx @@ -4,14 +4,15 @@ import search from "../assets/svgs/search.svg"; import cart from "../assets/svgs/cart.svg"; import styleHeader from '../styles/Header.module.scss'; +import { Link } from "react-router-dom"; export const HeaderTop = () => { return (
-
+ < img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} /> -
+
@@ -23,9 +24,9 @@ export const HeaderTop = () => { Entrar - + icone de cart - +
diff --git a/src/components/Header/styles/Header.module.scss b/src/components/Header/styles/Header.module.scss index 9ecedfe..8d99525 100644 --- a/src/components/Header/styles/Header.module.scss +++ b/src/components/Header/styles/Header.module.scss @@ -51,7 +51,7 @@ a { .container__header__top { display: flex; align-items: center; - margin: 0 7.8125%; + margin: 0 100px; width: 100%; @@ -276,7 +276,7 @@ a { .navBar__items { width: 100%; max-width: 349px; - margin: 0 7.8125%; + margin: 0 100px; display: flex; diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx deleted file mode 100644 index 6dd3e50..0000000 --- a/src/components/Layout/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Outlet } from "react-router-dom" -import { Footer } from "../Footer/Footer" -import { Header } from "../Header/Header" -import { BreadCrumb } from "../BreadCrumb/BreadCreumb" -import styles from "./styles.module.scss" - - - - - -export const Layout = () => { - - return ( -
-
- -
- -
- -
-
- ) -} \ No newline at end of file diff --git a/src/components/Main/Fom/ContactForm.tsx b/src/components/Main/Fom/ContactForm.tsx deleted file mode 100644 index da1a62d..0000000 --- a/src/components/Main/Fom/ContactForm.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Formik, Form, Field, ErrorMessage } from "formik"; -import contactFormSchema from "../../../schema/ContactFormSchema"; -import styleForm from "./ContactForm.module.scss"; - - - -interface IFormikValues { - name: string; - email: string; - cpf: string; - dateBirth: string; - phone: string; - instagram?: string; - checkbox: boolean; -} - -const initialValues = { - name: "", - email: "", - cpf: "", - dateBirth: "", - phone: "", - instagram: "", - checkbox: false, -}; - -const formSubmit = (values: IFormikValues) => { - console.log(values); -}; - -export const ContactForm = () => { - return ( - - {({ errors, touched }) => ( - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
- - - - )} - - ); -}; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..3331239 --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,24 @@ +import { Outlet } from "react-router-dom" +import { Footer } from "../components/Footer/Footer" +import { Header } from "../components/Header/Header" +import { BreadCrumb } from "../components/BreadCrumb/BreadCreumb" +import styles from "./styles.module.scss" + + + + + +export const Home = () => { + + return ( +
+
+ +
+ +
+ +
+
+ ) +} \ No newline at end of file diff --git a/src/pages/Intitucional/Institucional.module.scss b/src/pages/Intitucional/Institucional.module.scss index 7da04fd..8b2d7a9 100644 --- a/src/pages/Intitucional/Institucional.module.scss +++ b/src/pages/Intitucional/Institucional.module.scss @@ -1,9 +1,18 @@ -.batata { +.wrapper__sideBar { display: flex; gap: 30px; - height: 285px; + height: 100%; + max-height: 465px; margin: 80px 0 70px; + @media (max-width:1024px) { + flex-direction: column; + margin: 40px 0 80px; + max-height: none; + + + } + h2 { margin: 0; font-family: 'Roboto'; @@ -11,6 +20,18 @@ font-weight: 700; font-size: 24px; line-height: 28px; + + @media (min-width:2500px) { + font-size: 48px; + line-height: 56px; + } + } + + nav { + @media (min-width:2500px) { + max-width: 590px; + width: 100%; + } } @@ -25,22 +46,38 @@ padding: 0; margin: 0; - @media (min-width:2500px) {} + + @media (min-width:2500px) { + min-width: 590px; + + } @media (max-width:1024px) { min-width: none; + border-right: none; + + } + &__item { + display: flex; + + align-items: center; font-family: 'Roboto'; font-style: normal; font-weight: 400; text-transform: inherit; - padding: 10px 16px; color: #7D7D7D; + @media (min-width:2500px) { + height: 58px; + padding: 0 16px; + + } + &.ativo { background-color: #000; @@ -50,15 +87,23 @@ font-size: 16px; line-height: 19px; + @media (min-width:2500px) { + font-size: 28px; + line-height: 33px; + } + + + + } } } .content-right { - background-color: aquamarine; width: 100%; + height: 100%; + - h2 {} p { font-family: 'Roboto'; @@ -66,8 +111,18 @@ font-weight: 400; font-size: 13px; line-height: 15px; + margin-bottom: 0; color: #7D7D7D; + + @media (min-width:2500px) { + font-size: 26px; + line-height: 30px; + } + + @media (max-width:1024px) { + text-align: justify; + } } } } \ No newline at end of file diff --git a/src/pages/Intitucional/Instituicional.tsx b/src/pages/Intitucional/Instituicional.tsx index 067db7c..62f60d4 100644 --- a/src/pages/Intitucional/Instituicional.tsx +++ b/src/pages/Intitucional/Instituicional.tsx @@ -8,7 +8,7 @@ export const Instituicional = () => { return ( <>

Institucional

-
+