diff --git a/src/_variaveis.scss b/src/_variaveis.scss index 16bcac5..dd37676 100644 --- a/src/_variaveis.scss +++ b/src/_variaveis.scss @@ -1,45 +1,33 @@ // /* fonts */ -// @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); -// @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); $font-family: "Roboto", sans-serif; -// $font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ -$color-black: #292929; -$color-black2: #000000; +$color-black: #000000; +$color-black1: #292929; +$color-black2: #100D0E; $color-white: #fff; -$color-gray: #6c6c6c; +$color-gray: #B9B7B7; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #C4C4C4; $color-gray7: #e0e0e0; +$color-gray8: #303030; -$color-blue: #4267b2; -$color-blue2: #00C8FF; -; - -$color-green: #4caf50; - - -$color-black: #000; -$color-black-800: #100d0e; - -$color-white: #fff; -$color-white-100: #f0f0f0; -$color-white-500: #e5e5e5; - -$color-gray: #c4c4c4; -$color-gray-300: #b9b7b7; -$color-gray-500: #7d7d7d; -$color-gray-700: #303030; -$color-gray-800: #292929; - +$color-green: #008000; $color-red: #ff0000; + +/* Grid breakpoints */ + +// Mains breakpoints +$full: 2500px; +$tablets: 1024px; +$phone: 490px; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, @@ -47,7 +35,8 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px) !default; + xl: 1200px, + xxl:2500px) !default; $z-index: ( level1: 5, diff --git a/src/components/BreadCrumb/BreadCreumb.tsx b/src/components/BreadCrumb/BreadCreumb.tsx index 457c3ea..523ed33 100644 --- a/src/components/BreadCrumb/BreadCreumb.tsx +++ b/src/components/BreadCrumb/BreadCreumb.tsx @@ -1,6 +1,4 @@ import React from "react"; -import { IconLink } from "../utils/IconLink"; -import { ListItem } from "../utils/ListItem"; import homeIcon from "./assets/svgs/home.svg" import arrowRight from "./assets/svgs/arrow-right.svg" @@ -10,14 +8,14 @@ export const BreadCrumb = () => { const { pathname } = useLocation() - // const routeName = pathname.split("/")[1] + const routeName = pathname.split("/")[1] return ( diff --git a/src/components/Header/HeaderDesk/HeaderTop.tsx b/src/components/Header/HeaderDesk/HeaderTop.tsx index 222a9ad..a8c258a 100644 --- a/src/components/Header/HeaderDesk/HeaderTop.tsx +++ b/src/components/Header/HeaderDesk/HeaderTop.tsx @@ -3,7 +3,7 @@ import logo from "../assets/svgs/logo.svg"; import search from "../assets/svgs/search.svg"; import cart from "../assets/svgs/cart.svg"; -import styleHeader from '../styles/Header.module.scss'; +import styleHeader from '../Header.module.scss'; import { Link } from "react-router-dom"; export const HeaderTop = () => { diff --git a/src/components/Header/HeaderMobile/BurguerMenu.tsx b/src/components/Header/HeaderMobile/BurguerMenu.tsx index 3707116..be26253 100644 --- a/src/components/Header/HeaderMobile/BurguerMenu.tsx +++ b/src/components/Header/HeaderMobile/BurguerMenu.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Link } from "react-router-dom"; import closeIcon from "../assets/svgs/icon-close.svg"; -import styleHeader from '../styles/Header.module.scss'; +import styleHeader from '../Header.module.scss'; interface MenuMobile { isOpenMenu: boolean; @@ -29,16 +29,14 @@ export const BurguerMenu = ({ isOpenMenu, setisOpenMenu }: MenuMobile) => { - {/* Esse nav vai viraar um componente */} diff --git a/src/components/Header/HeaderMobile/HeaderMobile.tsx b/src/components/Header/HeaderMobile/HeaderMobile.tsx index 69bfd57..6519ce4 100644 --- a/src/components/Header/HeaderMobile/HeaderMobile.tsx +++ b/src/components/Header/HeaderMobile/HeaderMobile.tsx @@ -4,7 +4,7 @@ import search from "../assets/svgs/search.svg"; import cart from "../assets/svgs/cart.svg"; import burguerIcon from "../assets/svgs/burger-icon.svg"; -import styleHeader from '../styles/Header.module.scss'; +import styleHeader from '../Header.module.scss'; import { BurguerMenu } from "./BurguerMenu"; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index e21f5ce..3331239 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -3,7 +3,6 @@ import { Footer } from "../components/Footer/Footer" import { Header } from "../components/Header/Header" import { BreadCrumb } from "../components/BreadCrumb/BreadCreumb" import styles from "./styles.module.scss" -import { Instituicional } from "./Intitucional/Instituicional" @@ -16,7 +15,6 @@ export const Home = () => {
- {/* */}
diff --git a/src/pages/Intitucional/Sobre.tsx b/src/pages/Intitucional/About.tsx similarity index 98% rename from src/pages/Intitucional/Sobre.tsx rename to src/pages/Intitucional/About.tsx index 7c9659a..15186ca 100644 --- a/src/pages/Intitucional/Sobre.tsx +++ b/src/pages/Intitucional/About.tsx @@ -3,7 +3,7 @@ import { Article } from './Article'; -export const Sobre = () => { +export const About = () => { return (

diff --git a/src/pages/Intitucional/Contato.module.scss b/src/pages/Intitucional/Contact.module.scss similarity index 69% rename from src/pages/Intitucional/Contato.module.scss rename to src/pages/Intitucional/Contact.module.scss index 272f379..90cfde9 100644 --- a/src/pages/Intitucional/Contato.module.scss +++ b/src/pages/Intitucional/Contact.module.scss @@ -1,14 +1,16 @@ +@import "../../variaveis"; + .formulario { display: flex; flex-direction: column; padding: 16px; - font-family: "Roboto"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; - @media (min-width: 2500px) { + @media (min-width: $full) { font-size: 28px; line-height: 32px; @@ -25,18 +27,18 @@ input { padding: 14px 20px; - border: 1px solid #100D0E; + border: 1px solid $color-black2; border-radius: 25px; - font-family: "Roboto"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; - color: #000; + color: $color-black; outline: none; - @media (min-width: 2500px) { + @media (min-width: $full) { font-size: 28px; line-height: 33px; @@ -45,9 +47,9 @@ } &::placeholder { - color: gray; + color: $color-gray; - @media (min-width: 2500px) { + @media (min-width: $full) { font-size: 28px; line-height: 33px; @@ -59,21 +61,22 @@ } .invalid { - border: 1px solid red; + border: 1px solid $color-red; } .error { display: flex; justify-content: end; - font-family: "Roboto"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 12px; line-height: 14px; - color: red; - @media (min-width: 2500px) { + color: $color-red; + + @media (min-width: $full) { font-size: 24px; line-height: 28px; @@ -81,7 +84,7 @@ } .success { - font-family: 'Roboto'; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 12px; @@ -89,11 +92,11 @@ /* identical to box height */ - color: #008000; + color: $color-green; margin-top: 12.56px; - @media (min-width: 2500px) { + @media (min-width: $full) { font-size: 24px; line-height: 28px; @@ -103,11 +106,12 @@ button { padding: 17px; - background: #000; + background: $color-black; border-radius: 25px; - color: #fff; - @media (min-width: 2500px) { + color: $color-white; + + @media (min-width: $full) { padding: 14.5px; font-size: 32px; line-height: 38px; @@ -120,19 +124,24 @@ justify-content: center; align-items: center; + .obrigatorio__form { + color: $color-red; + } + label { order: 2; + text-decoration: underline; } input { order: 3; width: 18px; height: 18px; - border: 1px solid #000; + border: 1px solid $color-black; border-radius: 3px; margin: 0 4px; - @media (min-width: 2500px) { + @media (min-width: $full) { width: 36.4px; height: 35.15px; @@ -140,7 +149,7 @@ } } - @media (max-width: 1024px) { + @media (max-width: $tablets) { h2 { text-align: center; } diff --git a/src/pages/Intitucional/Contato.tsx b/src/pages/Intitucional/Contact.tsx similarity index 94% rename from src/pages/Intitucional/Contato.tsx rename to src/pages/Intitucional/Contact.tsx index b633694..a23f10a 100644 --- a/src/pages/Intitucional/Contato.tsx +++ b/src/pages/Intitucional/Contact.tsx @@ -1,7 +1,7 @@ -import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"; +import { Formik, Form, Field, ErrorMessage } from "formik"; import ContactFormSchema from "../../schema/ContactFormSchema"; import { Article } from "./Article"; -import style from "./Contato.module.scss"; +import style from "./Contact.module.scss"; import InputMask from 'react-input-mask'; import React, { useState } from "react"; interface IFormikValues { @@ -28,7 +28,7 @@ let listContact: Array = [] -export const Contato = () => { +export const Contact = () => { const [isValidateForm, setisValidateForm] = useState(false); @@ -39,7 +39,8 @@ export const Contato = () => { onSubmit={(values: IFormikValues, actions) => { listContact.push(values); actions.resetForm(); - ({ ...values }) ? setisValidateForm(true) : setisValidateForm(false); + console.log(values); + ({ ...values }) && setisValidateForm(true); }} validationSchema={ContactFormSchema} > @@ -110,6 +111,7 @@ export const Contato = () => {

+ * diff --git a/src/pages/Intitucional/Entrega.tsx b/src/pages/Intitucional/Delivery.tsx similarity index 98% rename from src/pages/Intitucional/Entrega.tsx rename to src/pages/Intitucional/Delivery.tsx index a96a3ca..f908e53 100644 --- a/src/pages/Intitucional/Entrega.tsx +++ b/src/pages/Intitucional/Delivery.tsx @@ -3,7 +3,7 @@ import { Article } from './Article'; -export const Entrega = () => { +export const Delivery = () => { return (

diff --git a/src/pages/Intitucional/TrocaEDevolucao.tsx b/src/pages/Intitucional/ExchangeAndEvolution.tsx similarity index 97% rename from src/pages/Intitucional/TrocaEDevolucao.tsx rename to src/pages/Intitucional/ExchangeAndEvolution.tsx index 5c3ace4..c6c5903 100644 --- a/src/pages/Intitucional/TrocaEDevolucao.tsx +++ b/src/pages/Intitucional/ExchangeAndEvolution.tsx @@ -3,7 +3,7 @@ import { Article } from './Article'; -export const TrocaEDevolucao = () => { +export const ExchangeAndEvolution = () => { return (

diff --git a/src/pages/Intitucional/FormaDePagamento.tsx b/src/pages/Intitucional/FormOfPayment.tsx similarity index 97% rename from src/pages/Intitucional/FormaDePagamento.tsx rename to src/pages/Intitucional/FormOfPayment.tsx index 76d5649..be9d38a 100644 --- a/src/pages/Intitucional/FormaDePagamento.tsx +++ b/src/pages/Intitucional/FormOfPayment.tsx @@ -3,7 +3,7 @@ import { Article } from './Article'; -export const FormaDePagamento = () => { +export const FormOfPayment = () => { return (

diff --git a/src/pages/Intitucional/Institucional.module.scss b/src/pages/Intitucional/Instituitional.module.scss similarity index 70% rename from src/pages/Intitucional/Institucional.module.scss rename to src/pages/Intitucional/Instituitional.module.scss index deaee00..7f3c794 100644 --- a/src/pages/Intitucional/Institucional.module.scss +++ b/src/pages/Intitucional/Instituitional.module.scss @@ -1,3 +1,6 @@ +@import "../../variaveis"; + + .wrapper__sideBar { display: flex; gap: 30px; @@ -5,7 +8,7 @@ // max-height: 465px; margin: 80px 0 70px; - @media (max-width:1024px) { + @media (max-width:$tablets) { flex-direction: column; margin: 40px 0 80px; max-height: none; @@ -15,20 +18,20 @@ h2 { margin: 0; - font-family: 'Roboto'; + font-family: $font-family; font-style: normal; font-weight: 700; font-size: 24px; line-height: 28px; - @media (min-width:2500px) { + @media (min-width:$full) { font-size: 48px; line-height: 56px; } } nav { - @media (min-width:2500px) { + @media (min-width:$full) { max-width: 590px; width: 100%; } @@ -39,7 +42,7 @@ .sideBar { display: flex; flex-direction: column; - border-right: 1px solid #000; + border-right: 1px solid $color-black; width: 100%; min-width: 302px; height: 100%; @@ -48,16 +51,21 @@ margin: 0; - @media (min-width:2500px) { + @media (min-width:$full) { min-width: 590px; max-height: 465px; } - @media (max-width:1024px) { + @media (max-width:$tablets) { min-width: none; border-right: none; + } + + @media (max-width:$phone) { + min-width: 0; + } @@ -66,15 +74,15 @@ display: flex; align-items: center; - font-family: 'Roboto'; + font-family: $font-family; font-style: normal; font-weight: 400; text-transform: inherit; padding: 10px 16px; - color: #7D7D7D; + color: $color-gray2; - @media (min-width:2500px) { + @media (min-width:$full) { height: 58px; padding: 0 16px; @@ -82,14 +90,14 @@ &.ativo { - background-color: #000; - color: #fff; + background-color: $color-black; + color: $color-white; font-weight: 700; font-size: 16px; line-height: 19px; - @media (min-width:2500px) { + @media (min-width:$full) { font-size: 28px; line-height: 33px; } @@ -106,27 +114,27 @@ height: 100%; h2 { - @media (max-width:1024px) { + @media (max-width:$tablets) { text-align: center; } } p { - font-family: 'Roboto'; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 13px; line-height: 15px; margin-bottom: 0; - color: #7D7D7D; + color: $color-gray2; - @media (min-width:2500px) { + @media (min-width:$full) { font-size: 26px; line-height: 30px; } - @media (max-width:1024px) { + @media (max-width:$tablets) { text-align: justify; } } diff --git a/src/pages/Intitucional/Instituicional.tsx b/src/pages/Intitucional/Instituitional.tsx similarity index 96% rename from src/pages/Intitucional/Instituicional.tsx rename to src/pages/Intitucional/Instituitional.tsx index 62f60d4..c7f3d32 100644 --- a/src/pages/Intitucional/Instituicional.tsx +++ b/src/pages/Intitucional/Instituitional.tsx @@ -1,9 +1,9 @@ import React from "react"; import { NavLink, Outlet } from "react-router-dom"; -import styleInstitucional from "./Institucional.module.scss" +import styleInstitucional from "./Instituitional.module.scss" -export const Instituicional = () => { +export const Instituitional = () => { return ( <> diff --git a/src/pages/Intitucional/SegurancaEPrivacidade.tsx b/src/pages/Intitucional/SecurityAndPrivacy.tsx similarity index 97% rename from src/pages/Intitucional/SegurancaEPrivacidade.tsx rename to src/pages/Intitucional/SecurityAndPrivacy.tsx index 7ea5adc..546f0c0 100644 --- a/src/pages/Intitucional/SegurancaEPrivacidade.tsx +++ b/src/pages/Intitucional/SecurityAndPrivacy.tsx @@ -3,7 +3,7 @@ import { Article } from './Article'; -export const SegurancaEPrivacidade = () => { +export const SecurityAndPrivacy = () => { return (

diff --git a/src/pages/styles.module.scss b/src/pages/styles.module.scss index 20b765e..4c5015c 100644 --- a/src/pages/styles.module.scss +++ b/src/pages/styles.module.scss @@ -1,3 +1,6 @@ +@import "../variaveis"; + + .container { display: flex; flex-direction: column; @@ -20,7 +23,7 @@ } - @media (max-width:1024px) { + @media (max-width:$tablets) { margin: 0 16px; // z-index: -9; @@ -28,7 +31,7 @@ h1 { text-align: center; - font-family: 'Roboto'; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 24px; @@ -36,9 +39,9 @@ letter-spacing: 0.1em; text-transform: uppercase; - color: #292929; + color: $color-black1; - @media (min-width:2500px) { + @media (min-width:$full) { font-size: 48px; line-height: 56px; } diff --git a/src/routes.tsx b/src/routes.tsx index 903b31e..3bdcdf4 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,12 +1,12 @@ import { Routes as ReactRouterRoutes, Route } from "react-router-dom" import { Home } from "./pages/Home" -import { Contato } from "./pages/Intitucional/Contato" -import { Entrega } from "./pages/Intitucional/Entrega" -import { FormaDePagamento } from "./pages/Intitucional/FormaDePagamento" -import { Instituicional } from "./pages/Intitucional/Instituicional" -import { SegurancaEPrivacidade } from "./pages/Intitucional/SegurancaEPrivacidade" -import { Sobre } from "./pages/Intitucional/Sobre" -import { TrocaEDevolucao } from "./pages/Intitucional/TrocaEDevolucao" +import { Contact } from "./pages/Intitucional/Contact" +import { Delivery } from "./pages/Intitucional/Delivery" +import { FormOfPayment } from "./pages/Intitucional/FormOfPayment" +import { Instituitional } from "./pages/Intitucional/Instituitional" +import { SecurityAndPrivacy } from "./pages/Intitucional/SecurityAndPrivacy" +import { About } from "./pages/Intitucional/About" +import { ExchangeAndEvolution } from "./pages/Intitucional/ExchangeAndEvolution" @@ -15,13 +15,13 @@ export const Routes = () => { return ( }> - < Route path="/" element={}> - } /> - } /> - } /> - } /> - } /> - } /> + < Route path="institucional" element={} > + } /> + } /> + } /> + } /> + } /> + } /> diff --git a/src/schema/ContactFormSchema.ts b/src/schema/ContactFormSchema.ts index 8c34d2d..30505de 100644 --- a/src/schema/ContactFormSchema.ts +++ b/src/schema/ContactFormSchema.ts @@ -25,5 +25,5 @@ export default Yup.object().shape({ .required("*Campo Obrigatório") .max(new Date(),'Data de nascimento inválida'), - checkbox: Yup.boolean().oneOf([true], "*"), + checkbox: Yup.boolean().oneOf([true], ""), });