forked from M3-Academy/desafio-react-e-typescript
style: organização e padronizacao de arquivos scss, para utilizar variaveis de cor e de tamanho
This commit is contained in:
parent
2465e22cf6
commit
b07ad66065
@ -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,
|
||||
|
||||
@ -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 (
|
||||
<nav >
|
||||
{pathname !== "/" && (
|
||||
<ul className={styles["breadNav"]}>
|
||||
<li className={styles["navItem"]}>
|
||||
<Link to="/institucional">
|
||||
<Link to="/sobre">
|
||||
<img src={homeIcon} alt="Icone de home" />
|
||||
</Link>
|
||||
</li>
|
||||
@ -26,8 +24,8 @@ export const BreadCrumb = () => {
|
||||
<img src={arrowRight} alt="Icone de seta para a direita" />
|
||||
|
||||
<span className={styles["routeName"]}>
|
||||
{/* {routeName} */}
|
||||
Institucional
|
||||
{routeName}
|
||||
{/* Institucional */}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "../../variaveis";
|
||||
|
||||
.breadNav {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
@ -5,13 +7,13 @@
|
||||
margin: 0 100px;
|
||||
padding: 30px 16px;
|
||||
|
||||
@media (max-width:1024px) {
|
||||
@media (max-width:$tablets) {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
img {
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
min-width: 31.25px;
|
||||
min-height: 31.25px;
|
||||
}
|
||||
@ -25,7 +27,7 @@
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 8.9px;
|
||||
@ -39,18 +41,18 @@
|
||||
}
|
||||
|
||||
.routeName {
|
||||
font-family: 'Roboto';
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
|
||||
color: #C4C4C4;
|
||||
color: $color-gray6;
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
@import "../../../variaveis";
|
||||
|
||||
h5 {
|
||||
margin: 0;
|
||||
font-family: 'Roboto';
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
@ -8,9 +10,9 @@ h5 {
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #303030;
|
||||
color: $color-gray8;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width: $full) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@ -26,13 +28,13 @@ h5 {
|
||||
height: 100%;
|
||||
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
|
||||
max-width: 1531px;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
@media (max-width:$tablets) {
|
||||
flex-direction: column;
|
||||
width: 99.875%;
|
||||
max-width: 992px;
|
||||
@ -40,7 +42,7 @@ h5 {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width:490px) {
|
||||
@media (max-width:$phone) {
|
||||
|
||||
width: 96.875%;
|
||||
|
||||
@ -103,16 +105,16 @@ h5 {
|
||||
|
||||
li {
|
||||
a {
|
||||
font-family: 'Roboto';
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
|
||||
color: #303030;
|
||||
color: $color-gray8;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@ -128,8 +130,8 @@ h5 {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
@media (min-width:2500px),
|
||||
(max-width:1024px) {
|
||||
@media (min-width:$full),
|
||||
(max-width:$tablets) {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@ -137,7 +139,7 @@ h5 {
|
||||
a {
|
||||
font-weight: 500;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@ -4,7 +4,6 @@ interface AccordionProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
{/* Recebe List Items como filho */ }
|
||||
export const AccordionElement = ({ children }: AccordionProps) => {
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import styleAccordion from "./styles/Accordion.module.scss";
|
||||
import styleAccordion from "./Accordion.module.scss";
|
||||
|
||||
import { ListItem } from "../../utils/ListItem";
|
||||
import { AccordionElement } from "./AccordionElement";
|
||||
import {
|
||||
Accordion,
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ import {
|
||||
AccordionHeader,
|
||||
AccordionItem as HAccordionItem,
|
||||
} from "react-headless-accordion";
|
||||
import styleAccordion from "./styles/Accordion.module.scss";
|
||||
import styleAccordion from "./Accordion.module.scss";
|
||||
|
||||
|
||||
interface AccordionItemFooterProps {
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "../../../variaveis";
|
||||
|
||||
.wrapper__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -13,15 +15,11 @@
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
@media (max-width:$tablets) {
|
||||
height: 73px;
|
||||
bottom: 60px;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.link {
|
||||
@ -40,7 +38,7 @@
|
||||
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
background-color: #C4C4C4;
|
||||
background-color: $color-gray6;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "../../../variaveis";
|
||||
|
||||
.newsLetter {
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
@ -10,7 +12,7 @@
|
||||
width: 37.03125%;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width:1024px) {
|
||||
@media (max-width:$tablets) {
|
||||
row-gap: 16px;
|
||||
// margin: 0 16px;
|
||||
width: 96.875%;
|
||||
@ -21,7 +23,7 @@
|
||||
width: 94%;
|
||||
}
|
||||
|
||||
@media (max-width:490px) {
|
||||
@media (max-width:$phone) {
|
||||
|
||||
width: 91.42%;
|
||||
}
|
||||
@ -29,7 +31,7 @@
|
||||
|
||||
|
||||
.newsLetter__title {
|
||||
font-family: 'Roboto';
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
@ -38,18 +40,18 @@
|
||||
font-variant: small-caps;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #303030;
|
||||
color: $color-gray8;
|
||||
|
||||
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
@media (max-width:$tablets) {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
@ -62,7 +64,7 @@
|
||||
justify-content: space-between;
|
||||
column-gap: 10px;
|
||||
|
||||
@media (max-width:1024px) {
|
||||
@media (max-width:$tablets) {
|
||||
row-gap: 16px;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -73,7 +75,7 @@
|
||||
// max-width: 340px;
|
||||
height: 42px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E5E5E5;
|
||||
border: 1px solid $color-gray5;
|
||||
outline: none;
|
||||
|
||||
padding: 0 16px;
|
||||
@ -81,20 +83,20 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
color: #C4C4C4;
|
||||
color: $color-gray6;
|
||||
|
||||
&::placeholder {
|
||||
color: #C4C4C4;
|
||||
color: $color-gray6;
|
||||
}
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
height: 59px;
|
||||
min-width: 668px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
@media (max-width:$tablets) {
|
||||
|
||||
max-width: 96.875%;
|
||||
}
|
||||
@ -109,14 +111,14 @@
|
||||
width: 91.875%;
|
||||
}
|
||||
|
||||
@media (max-width:490px) {
|
||||
@media (max-width:$phone) {
|
||||
|
||||
width: 90.4%;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit {
|
||||
font-family: 'Roboto';
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
@ -129,7 +131,7 @@
|
||||
|
||||
|
||||
|
||||
color: #FFFFFF;
|
||||
color: $color-white;
|
||||
|
||||
width: 100%;
|
||||
max-width: 126px;
|
||||
@ -138,18 +140,18 @@
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
background: #000000;
|
||||
background: $color-black;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
min-width: 246px;
|
||||
height: 59px;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
@media (max-width:$tablets) {
|
||||
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
color: $color-gray2;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
background-color: $color-black;
|
||||
|
||||
&__wrapper {
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
align-items: center;
|
||||
margin: 0 100px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: $tablets) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 0 16px;
|
||||
@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
&__address {
|
||||
color: #fff;
|
||||
color: $color-white;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
@ -35,7 +35,7 @@
|
||||
width: 100%;
|
||||
max-width: 269px;
|
||||
|
||||
@media(min-width:2500px) {
|
||||
@media(min-width:$full) {
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
max-width: none;
|
||||
@ -43,7 +43,7 @@
|
||||
min-width: 537px;
|
||||
}
|
||||
|
||||
@media(max-width:1024px) {
|
||||
@media(max-width:$tablets) {
|
||||
margin-bottom: 16px;
|
||||
order: 2;
|
||||
}
|
||||
@ -62,13 +62,13 @@
|
||||
column-gap: 11px;
|
||||
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
@media (min-width: $full) {
|
||||
min-width: 690px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: $tablets) {
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
margin-bottom: 23px;
|
||||
@ -82,17 +82,17 @@
|
||||
width: 36px;
|
||||
height: 20.2px;
|
||||
|
||||
@media(min-width:2500px) {
|
||||
@media(min-width:$full) {
|
||||
width: 70px;
|
||||
height: 39.27px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: $tablets) {
|
||||
width: 35px;
|
||||
height: 20.13px;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
@media (max-width: $phone) {
|
||||
width: 30px;
|
||||
height: 17px;
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
width: 53px;
|
||||
height: 33px;
|
||||
|
||||
@media(min-width:2500px) {
|
||||
@media(min-width:$full) {
|
||||
width: 103.52px;
|
||||
height: 64.44px;
|
||||
}
|
||||
@ -144,11 +144,11 @@
|
||||
|
||||
margin: 0;
|
||||
|
||||
@media(min-width:2500px) {
|
||||
@media(min-width:$full) {
|
||||
min-width: 388.98px;
|
||||
}
|
||||
|
||||
@media(max-width:1024px) {
|
||||
@media(max-width:$tablets) {
|
||||
order: 3;
|
||||
padding: 0;
|
||||
}
|
||||
@ -157,7 +157,7 @@
|
||||
width: 100%;
|
||||
min-width: 108.5px;
|
||||
|
||||
@media(min-width:2500px) {
|
||||
@media(min-width:$full) {
|
||||
min-width: 189PX;
|
||||
}
|
||||
}
|
||||
@ -175,7 +175,7 @@
|
||||
line-height: 12px;
|
||||
|
||||
|
||||
@media(min-width:2500px) {
|
||||
@media(min-width:$full) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
@ -186,7 +186,7 @@
|
||||
width: 28.66px;
|
||||
height: 15.65px;
|
||||
|
||||
@media(min-width:2500px) {
|
||||
@media(min-width:$full) {
|
||||
width: 55.98px;
|
||||
height: 30.55px;
|
||||
}
|
||||
@ -206,10 +206,10 @@
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
color: $color-white;
|
||||
text-transform: capitalize;
|
||||
|
||||
@media(min-width:2500px) {
|
||||
@media(min-width:$full) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
@ -218,7 +218,7 @@
|
||||
margin-right: 8px;
|
||||
width: 100%;
|
||||
|
||||
@media(min-width:2500px) {
|
||||
@media(min-width:$full) {
|
||||
margin-right: 10px;
|
||||
min-width: 100px;
|
||||
}
|
||||
@ -231,7 +231,7 @@
|
||||
width: 44.92px;
|
||||
height: 16px;
|
||||
|
||||
@media(min-width:2500px) {
|
||||
@media(min-width:$full) {
|
||||
width: 87.73px;
|
||||
height: 31.24px;
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "../../../variaveis";
|
||||
|
||||
.wrapper {
|
||||
@media (max-width:1025px) {
|
||||
padding: 0 16px;
|
||||
@ -10,7 +12,7 @@
|
||||
max-width: 215px;
|
||||
padding: 0;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
@media (min-width: $full) {
|
||||
max-width: 390px;
|
||||
}
|
||||
|
||||
@ -22,7 +24,7 @@
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
@media (min-width: $full) {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
@ -43,7 +45,7 @@
|
||||
|
||||
text-transform: lowercase;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
font-size: 28x;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "../../../variaveis";
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
|
||||
@ -10,11 +12,11 @@
|
||||
padding: 50px 0;
|
||||
position: relative;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
height: 239px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: $tablets) {
|
||||
flex-direction: column;
|
||||
width: 96.875%;
|
||||
max-width: 992px;
|
||||
|
||||
@ -1,19 +1,22 @@
|
||||
@import "../../variaveis";
|
||||
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-family: 'Roboto';
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: #FFFFFF;
|
||||
color: $color-white;
|
||||
position: relative;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@ -34,12 +37,12 @@ a {
|
||||
|
||||
// AREA HEADER TOP
|
||||
&__top {
|
||||
background-color: #000;
|
||||
background-color: $color-black;
|
||||
display: flex;
|
||||
height: 75px;
|
||||
border-bottom: 1px solid #C4C4C4;
|
||||
border-bottom: 1px solid $color-gray6;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
@ -60,7 +63,7 @@ a {
|
||||
width: 100%;
|
||||
max-width: 162px;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
max-width: 265.62px;
|
||||
}
|
||||
|
||||
@ -69,7 +72,7 @@ a {
|
||||
width: 100%;
|
||||
height: 25.86px;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
height: 50.5px;
|
||||
}
|
||||
}
|
||||
@ -83,7 +86,7 @@ a {
|
||||
justify-content: center;
|
||||
max-width: 264px;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
max-width: none;
|
||||
width: 24.44444%;
|
||||
height: 57px;
|
||||
@ -97,14 +100,14 @@ a {
|
||||
padding-left: 16px;
|
||||
border-radius: 5px;
|
||||
|
||||
color: #C4C4C4;
|
||||
font-family: 'Roboto';
|
||||
color: $color-gray6;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
width: 100%;
|
||||
height: 57px;
|
||||
font-size: 28px;
|
||||
@ -112,14 +115,14 @@ a {
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #C4C4C4;
|
||||
font-family: 'Roboto';
|
||||
color: $color-gray6;
|
||||
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: 33px;
|
||||
}
|
||||
@ -127,7 +130,7 @@ a {
|
||||
|
||||
&:focus {
|
||||
transition: 0.35s ease;
|
||||
color: #000;
|
||||
color: $color-black;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
transition: opacity 0.45s ease;
|
||||
@ -147,7 +150,7 @@ a {
|
||||
|
||||
&:focus {
|
||||
transition: 0.35s ease;
|
||||
color: #000;
|
||||
color: $color-black;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
transition: opacity 0.45s ease;
|
||||
@ -174,7 +177,7 @@ a {
|
||||
top: 7px;
|
||||
right: 32px;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
top: 14px;
|
||||
right: 64px;
|
||||
|
||||
@ -193,7 +196,7 @@ a {
|
||||
max-width: 136px;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
max-width: 214.68px;
|
||||
|
||||
|
||||
@ -202,15 +205,16 @@ a {
|
||||
&__enter {
|
||||
a {
|
||||
|
||||
font-family: 'Roboto';
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: #FFFFFF;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
color: $color-white;
|
||||
|
||||
@media (min-width:$full) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@ -220,7 +224,7 @@ a {
|
||||
&__cart {
|
||||
a {
|
||||
img {
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
width: 54.68px;
|
||||
height: 54.68px;
|
||||
}
|
||||
@ -231,7 +235,7 @@ a {
|
||||
}
|
||||
|
||||
.search-container {
|
||||
width: 490px;
|
||||
width: $phone;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@ -251,11 +255,11 @@ a {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
height: 61px;
|
||||
}
|
||||
|
||||
background-color: #000;
|
||||
background-color: $color-black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -286,13 +290,13 @@ a {
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
@media (min-width:$full) {
|
||||
max-width: 588.62px;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
@media (max-width:$tablets) {
|
||||
display: flex;
|
||||
align-items: initial;
|
||||
flex-direction: column;
|
||||
@ -311,14 +315,14 @@ a {
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #FFFFFF;
|
||||
background: $color-white;
|
||||
transition: all .45s;
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
color: #C4C4C4;
|
||||
@media (max-width:$tablets) {
|
||||
color: $color-gray6;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
@ -330,7 +334,7 @@ a {
|
||||
|
||||
// AREA HEADER MOBILE
|
||||
&__mobile {
|
||||
background-color: #000;
|
||||
background-color: $color-black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
@ -353,13 +357,13 @@ a {
|
||||
width: 94%;
|
||||
}
|
||||
|
||||
@media (max-width:490px) {
|
||||
@media (max-width:$phone) {
|
||||
|
||||
width: 91.466666666666666666666666666667%;
|
||||
}
|
||||
|
||||
.container__hamburguer {
|
||||
background-color: lightgray;
|
||||
background-color: $color-white;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
@ -372,7 +376,7 @@ a {
|
||||
justify-content: center;
|
||||
margin: 0 16px;
|
||||
max-width: 992px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: $color-white;
|
||||
border-radius: 5px;
|
||||
|
||||
@media (max-width:768px) {
|
||||
@ -380,7 +384,7 @@ a {
|
||||
width: 94%;
|
||||
}
|
||||
|
||||
@media (max-width:490px) {
|
||||
@media (max-width:$phone) {
|
||||
|
||||
width: 91.466666666666666666666666666667%;
|
||||
}
|
||||
@ -395,8 +399,8 @@ a {
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color: #C4C4C4;
|
||||
font-family: 'Roboto';
|
||||
color: $color-gray6;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -405,7 +409,7 @@ a {
|
||||
|
||||
&:focus {
|
||||
transition: 0.35s ease;
|
||||
color: #000;
|
||||
color: $color-black;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
transition: opacity 0.45s ease;
|
||||
@ -466,10 +470,10 @@ a {
|
||||
top: 0;
|
||||
width: 96.484375%;
|
||||
height: 585px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: $color-white;
|
||||
z-index: 8;
|
||||
|
||||
@media (max-width:490px) {
|
||||
@media (max-width:$phone) {
|
||||
width: 90.4%;
|
||||
}
|
||||
|
||||
@ -488,7 +492,7 @@ a {
|
||||
}
|
||||
|
||||
.header__menu {
|
||||
background-color: #000;
|
||||
background-color: $color-black;
|
||||
height: 78px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -3,7 +3,7 @@ import { HeaderTop } from "./HeaderDesk/HeaderTop";
|
||||
import { HeaderBottom } from "./HeaderDesk/HeaderBottom";
|
||||
import { HeaderMobile } from "./HeaderMobile/HeaderMobile";
|
||||
|
||||
import styleHeader from './styles/Header.module.scss';
|
||||
import styleHeader from './Header.module.scss';
|
||||
|
||||
export const Header = () => {
|
||||
return (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import styleHeader from '../styles/Header.module.scss';
|
||||
import styleHeader from '../Header.module.scss';
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
export const HeaderBottom = () => {
|
||||
@ -13,7 +13,7 @@ export const HeaderBottom = () => {
|
||||
<Link className={styleHeader["list__items__link"]} to="/saiba-mais">
|
||||
Saiba Mais
|
||||
</Link>
|
||||
<Link className={styleHeader["list__items__link"]} to="/sobre">
|
||||
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
|
||||
Institucional
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
@ -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 = () => {
|
||||
|
||||
@ -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) => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Esse nav vai viraar um componente */}
|
||||
<nav className={styleHeader["navBar__items"]}>
|
||||
{/* esse "a" vai virar um componente */}
|
||||
<Link className={styleHeader["list__items__link"]} to="/cursos">
|
||||
Cursos
|
||||
</Link>
|
||||
<Link className={styleHeader["list__items__link"]} to="/saiba-mais">
|
||||
Saiba Mais
|
||||
</Link>
|
||||
<Link className={styleHeader["list__items__link"]} to="/sobre">
|
||||
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
|
||||
Institucional
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
@ -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";
|
||||
|
||||
|
||||
|
||||
@ -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 = () => {
|
||||
<Header />
|
||||
<BreadCrumb />
|
||||
<main className={styles["main"]}>
|
||||
{/* <Instituicional /> */}
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { Article } from './Article';
|
||||
|
||||
|
||||
|
||||
export const Sobre = () => {
|
||||
export const About = () => {
|
||||
return (
|
||||
<Article title='Sobre'>
|
||||
<p>
|
||||
@ -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;
|
||||
}
|
||||
@ -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<IFormikValues> = []
|
||||
|
||||
|
||||
|
||||
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 = () => {
|
||||
<Field id="instagram" name="instagram" placeholder="@seuuser" />
|
||||
|
||||
<div className={style["checkbox_wrapper"]}>
|
||||
<span className={style["obrigatorio__form"]}>*</span>
|
||||
<label className={style["label__form"]} htmlFor="checkbox">Declaro que li e aceito</label>
|
||||
<span className={style["error"]}>
|
||||
<ErrorMessage name="checkbox" className={style["form-ivalid-feedback"]} />
|
||||
@ -3,7 +3,7 @@ import { Article } from './Article';
|
||||
|
||||
|
||||
|
||||
export const Entrega = () => {
|
||||
export const Delivery = () => {
|
||||
return (
|
||||
<Article title='Entrega'>
|
||||
<p>
|
||||
@ -3,7 +3,7 @@ import { Article } from './Article';
|
||||
|
||||
|
||||
|
||||
export const TrocaEDevolucao = () => {
|
||||
export const ExchangeAndEvolution = () => {
|
||||
return (
|
||||
<Article title='Troca e Devolucao'>
|
||||
<p>
|
||||
@ -3,7 +3,7 @@ import { Article } from './Article';
|
||||
|
||||
|
||||
|
||||
export const FormaDePagamento = () => {
|
||||
export const FormOfPayment = () => {
|
||||
return (
|
||||
<Article title='Forma de Pagamento'>
|
||||
<p>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<>
|
||||
@ -3,7 +3,7 @@ import { Article } from './Article';
|
||||
|
||||
|
||||
|
||||
export const SegurancaEPrivacidade = () => {
|
||||
export const SecurityAndPrivacy = () => {
|
||||
return (
|
||||
<Article title='Seguranca e Privacidade'>
|
||||
<p>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<ReactRouterRoutes>
|
||||
<Route path="/" element={< Home />}>
|
||||
< Route path="/" element={<Instituicional />}>
|
||||
<Route path="/sobre" element={<Sobre />} />
|
||||
<Route path="/forma-de-pagamento" element={<FormaDePagamento />} />
|
||||
<Route path="/entrega" element={<Entrega />} />
|
||||
<Route path="/troca-e-devolucao" element={<TrocaEDevolucao />} />
|
||||
<Route path="/seguranca-e-privacidade" element={<SegurancaEPrivacidade />} />
|
||||
<Route path="/contato" element={<Contato />} />
|
||||
< Route path="institucional" element={<Instituitional />} >
|
||||
<Route path="sobre" element={<About />} />
|
||||
<Route path="forma-de-pagamento" element={<FormOfPayment />} />
|
||||
<Route path="entrega" element={<Delivery />} />
|
||||
<Route path="troca-e-devolucao" element={<ExchangeAndEvolution />} />
|
||||
<Route path="seguranca-e-privacidade" element={<SecurityAndPrivacy />} />
|
||||
<Route path="contato" element={<Contact />} />
|
||||
</Route>
|
||||
</Route>
|
||||
</ReactRouterRoutes >
|
||||
|
||||
@ -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], ""),
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user