forked from M3-Academy/desafio-react-e-typescript
Merge pull request 'feat: Cria main responsivo' (#4) from feature/criaMain into main
Reviewed-on: #4
This commit is contained in:
commit
4bc4ead765
@ -0,0 +1,80 @@
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
import "./style.css";
|
||||
|
||||
const NaviDesktop = () => {
|
||||
return (
|
||||
<div className="menu-desktop">
|
||||
<div className="menu-navigation">
|
||||
<div className="menu-navigation__subMenu">
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/sobre"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Sobre
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/formaDePagamento"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Forma de Pagamento
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/entrega"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Entrega
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/trocaDevolucao"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Troca e Devolução
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/segurancaPrivacidade"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Segurança e Privacidade
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/contato"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Contato
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default NaviDesktop;
|
||||
@ -0,0 +1,81 @@
|
||||
import React from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import "./style.css";
|
||||
|
||||
const NavigationTablets = () => {
|
||||
return (
|
||||
<div className="menu-desktop">
|
||||
<div className="menu-navigation">
|
||||
<div className="menu-navigation__subMenu">
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/sobre"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Sobre
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/formaDePagamento"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Forma de Pagamento
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/entrega"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Entrega
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/trocaDevolucao"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Troca e Devolução
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/segurancaPrivacidade"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Segurança e Privacidade
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="menu-navigation__description">
|
||||
<NavLink
|
||||
to="/contato"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "ativo menu-link" : "menu-link"
|
||||
}
|
||||
>
|
||||
Contato
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavigationTablets;
|
||||
24
react-academy/src/Components/Navigation/index.tsx
Normal file
24
react-academy/src/Components/Navigation/index.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import NaviDesktop from "./NaviDesktop";
|
||||
import NaviTablets from "./NaviTablets";
|
||||
|
||||
import "./style.css";
|
||||
|
||||
const Navigation = () => {
|
||||
const [width, setWidth] = useState<number>(window.innerWidth);
|
||||
|
||||
const handleWindow = () => {
|
||||
setWidth(window.innerWidth);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("resize", handleWindow);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleWindow);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <>{width <= 1024 ? <NaviTablets /> : <NaviDesktop />}</>;
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
53
react-academy/src/Components/Navigation/style.css
Normal file
53
react-academy/src/Components/Navigation/style.css
Normal file
@ -0,0 +1,53 @@
|
||||
.menu-navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 30px 0 100px;
|
||||
}
|
||||
|
||||
.menu-navigation__subMenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--color-black);
|
||||
height: 285px;
|
||||
width: 302px;
|
||||
}
|
||||
|
||||
.menu-navigation__description {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.menu-navigation__description:hover {
|
||||
background-color: var(--color-gray-200);
|
||||
}
|
||||
|
||||
.menu-navigation__description a {
|
||||
color: var(--color-gray-400);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
display: block;
|
||||
padding: 10px 0 10px 16px;
|
||||
}
|
||||
|
||||
.menu-link.ativo {
|
||||
background-color: var(--color-black);
|
||||
color: var(--color-white);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.menu-navigation {
|
||||
max-width: 100%;
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.menu-navigation__subMenu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
26
react-academy/src/Pages/Contato/index.tsx
Normal file
26
react-academy/src/Pages/Contato/index.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
|
||||
import BreadCrumb from "../../Components/BreadCrumb";
|
||||
import CustomFormCont from "../../Components/CustomForm/CustomFormContato";
|
||||
import Navigation from "../../Components/Navigation";
|
||||
|
||||
import "./style.css";
|
||||
|
||||
const Contato = () => {
|
||||
return (
|
||||
<div className="main-contato__container">
|
||||
<BreadCrumb />
|
||||
<h2 className="subTitle">INSTITUCIONAL</h2>
|
||||
<div className="main-form">
|
||||
<div className="container-form">
|
||||
<Navigation />
|
||||
<div className="custom-form">
|
||||
<CustomFormCont />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contato;
|
||||
154
react-academy/src/Pages/Contato/style.css
Normal file
154
react-academy/src/Pages/Contato/style.css
Normal file
@ -0,0 +1,154 @@
|
||||
.container-form {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.custom-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container-form__labels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container-form__labels label {
|
||||
position: relative;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-invalid {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 120px;
|
||||
color: var(--color-red);
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.container-form__labels input {
|
||||
font-family: "Roboto", sans-serif;
|
||||
line-height: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
padding: 15px 15px 15px 20px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 25px;
|
||||
border: 1px solid var(--color-black-100);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.container-form__description {
|
||||
width: 100%;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.container-form__description h2 {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-gray-500);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sobre-text {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: var(--color-gray-400);
|
||||
margin-right: 100px;
|
||||
margin-bottom: 81px;
|
||||
}
|
||||
|
||||
.container-checkbox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container-checkbox label {
|
||||
margin-right: 4px;
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
.container-checkbox u {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.container-checkbox input {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.container-btn {
|
||||
margin-bottom: 66px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.btn-contato {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1.5px;
|
||||
line-height: 18px;
|
||||
border: none;
|
||||
background-color: var(--color-black);
|
||||
color: var(--color-white);
|
||||
width: 100%;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
padding: 17px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-msg {
|
||||
font-family: "Roboto", sans-serif;
|
||||
color: var(--color-green);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container-form__description h2 {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.container-form__description {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sobre-text {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.container-btn,
|
||||
.container-form__labels input {
|
||||
margin: 12px 16px;
|
||||
}
|
||||
|
||||
.container-btn {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.container-form__labels label {
|
||||
margin-left: 30px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.form-invalid {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
51
react-academy/src/Pages/Entrega/index.tsx
Normal file
51
react-academy/src/Pages/Entrega/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import BreadCrumb from "../../Components/BreadCrumb";
|
||||
import Navigation from "../../Components/Navigation";
|
||||
|
||||
import "./style.css";
|
||||
|
||||
const FormaDePagamento = () => {
|
||||
return (
|
||||
<div>
|
||||
<BreadCrumb />
|
||||
<h2 className="subTitle">INSTITUCIONAL</h2>
|
||||
|
||||
<div className="main-entrega">
|
||||
<div className="container-entrega">
|
||||
<Navigation />
|
||||
<div className="container-entrega__description">
|
||||
<h2>Entrega</h2>
|
||||
<p className="sobre-text">
|
||||
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.
|
||||
<br></br>
|
||||
<br></br>
|
||||
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.
|
||||
<br></br>
|
||||
<br></br>
|
||||
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?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default FormaDePagamento;
|
||||
52
react-academy/src/Pages/Entrega/style.css
Normal file
52
react-academy/src/Pages/Entrega/style.css
Normal file
@ -0,0 +1,52 @@
|
||||
.subTitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
letter-spacing: 5px;
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
.main-entrega {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container-entrega {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container-entrega__description h2 {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
.sobre-text {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: var(--color-gray-400);
|
||||
margin-right: 100px;
|
||||
margin-bottom: 81px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container-entrega {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container-entrega__description h2 {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.sobre-text {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
51
react-academy/src/Pages/FormaDePagamento/index.tsx
Normal file
51
react-academy/src/Pages/FormaDePagamento/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import Navigation from "../../Components/Navigation";
|
||||
import BreadCrumb from "../../Components/BreadCrumb";
|
||||
|
||||
import "./style.css";
|
||||
|
||||
const FormaDePagamento = () => {
|
||||
return (
|
||||
<div>
|
||||
<BreadCrumb />
|
||||
<h2 className="subTitle">INSTITUCIONAL</h2>
|
||||
|
||||
<div className="main-formaPagamento">
|
||||
<div className="container-pagamento">
|
||||
<Navigation />
|
||||
<div className="container-forma__description">
|
||||
<h2>Forma de Pagamento</h2>
|
||||
<p className="sobre-text">
|
||||
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.
|
||||
<br></br>
|
||||
<br></br>
|
||||
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.
|
||||
<br></br>
|
||||
<br></br>
|
||||
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?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default FormaDePagamento;
|
||||
39
react-academy/src/Pages/FormaDePagamento/style.css
Normal file
39
react-academy/src/Pages/FormaDePagamento/style.css
Normal file
@ -0,0 +1,39 @@
|
||||
.subTitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
letter-spacing: 5px;
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
.main-formaPagamento {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container-pagamento {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container-forma__description h2 {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container-pagamento {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container-forma__description h2 {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
51
react-academy/src/Pages/SegurancaPrivacidade/index.tsx
Normal file
51
react-academy/src/Pages/SegurancaPrivacidade/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import Navigation from "../../Components/Navigation";
|
||||
import BreadCrumb from "../../Components/BreadCrumb";
|
||||
|
||||
import "./style.css";
|
||||
|
||||
const Sobre = () => {
|
||||
return (
|
||||
<div>
|
||||
<BreadCrumb />
|
||||
<h2 className="subTitle">INSTITUCIONAL</h2>
|
||||
|
||||
<div className="main-seguranca">
|
||||
<div className="container-seguranca">
|
||||
<Navigation />
|
||||
<div className="container-seguranca__description">
|
||||
<h2>Segurança e Privacidade</h2>
|
||||
<p className="sobre-text">
|
||||
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.
|
||||
<br></br>
|
||||
<br></br>
|
||||
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.
|
||||
<br></br>
|
||||
<br></br>
|
||||
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?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Sobre;
|
||||
40
react-academy/src/Pages/SegurancaPrivacidade/style.css
Normal file
40
react-academy/src/Pages/SegurancaPrivacidade/style.css
Normal file
@ -0,0 +1,40 @@
|
||||
.subTitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
letter-spacing: 5px;
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
.main-seguranca {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container-seguranca {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.container-seguranca__description h2 {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container-seguranca {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container-seguranca__description h2 {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
51
react-academy/src/Pages/Sobre/index.tsx
Normal file
51
react-academy/src/Pages/Sobre/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import Navigation from "../../Components/Navigation";
|
||||
import BreadCrumb from "../../Components/BreadCrumb";
|
||||
|
||||
import "./style.css";
|
||||
|
||||
const Sobre = () => {
|
||||
return (
|
||||
<div className="main-sobre__container">
|
||||
<BreadCrumb />
|
||||
<h2 className="subTitle">INSTITUCIONAL</h2>
|
||||
|
||||
<div className="main-sobre">
|
||||
<div className="container-sobre">
|
||||
<Navigation />
|
||||
<div className="container-sobre__description">
|
||||
<h2>Sobre</h2>
|
||||
<p className="sobre-text">
|
||||
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.
|
||||
<br></br>
|
||||
<br></br>
|
||||
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.
|
||||
<br></br>
|
||||
<br></br>
|
||||
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?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Sobre;
|
||||
50
react-academy/src/Pages/Sobre/style.css
Normal file
50
react-academy/src/Pages/Sobre/style.css
Normal file
@ -0,0 +1,50 @@
|
||||
.subTitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
letter-spacing: 5px;
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
.main-sobre {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container-sobre {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.container-sobre__description h2 {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container-sobre {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.container-sobre__description h2 {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sobre-text {
|
||||
margin: 12px 16px 80px 16px;
|
||||
text-align: justify;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
51
react-academy/src/Pages/TrocaDevolucao/index.tsx
Normal file
51
react-academy/src/Pages/TrocaDevolucao/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import Navigation from "../../Components/Navigation";
|
||||
import BreadCrumb from "../../Components/BreadCrumb";
|
||||
|
||||
import "./style.css";
|
||||
|
||||
const Sobre = () => {
|
||||
return (
|
||||
<div>
|
||||
<BreadCrumb />
|
||||
<h2 className="subTitle">INSTITUCIONAL</h2>
|
||||
|
||||
<div className="main-troca">
|
||||
<div className="container-troca">
|
||||
<Navigation />
|
||||
<div className="container-troca__description">
|
||||
<h2>Troca e Devolução</h2>
|
||||
<p className="sobre-text">
|
||||
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.
|
||||
<br></br>
|
||||
<br></br>
|
||||
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.
|
||||
<br></br>
|
||||
<br></br>
|
||||
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?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Sobre;
|
||||
40
react-academy/src/Pages/TrocaDevolucao/style.css
Normal file
40
react-academy/src/Pages/TrocaDevolucao/style.css
Normal file
@ -0,0 +1,40 @@
|
||||
.subTitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
letter-spacing: 5px;
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
.main-troca {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container-troca {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.container-troca__description h2 {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container-troca {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container-troca__description h2 {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@ -3,13 +3,28 @@ import { Routes, Route, Navigate } from "react-router-dom";
|
||||
import Header from "./Components/Header";
|
||||
import Footer from "./Components/Footer";
|
||||
import NewsLetter from "./Components/Newsletter";
|
||||
import Sobre from "./Pages/Sobre";
|
||||
import Contato from "./Pages/Contato";
|
||||
import Entrega from "./Pages/Entrega";
|
||||
import TrocaDevolucao from "./Pages/TrocaDevolucao";
|
||||
import FormaDePagamento from "./Pages/FormaDePagamento";
|
||||
import SegurancaPrivacidade from "./Pages/SegurancaPrivacidade";
|
||||
|
||||
export default function Router() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route></Route>
|
||||
<Route path="/" element={<Navigate to="/sobre" />} />
|
||||
<Route path="/sobre" element={<Sobre />} />
|
||||
<Route path="/formaDePagamento" element={<FormaDePagamento />} />
|
||||
<Route
|
||||
path="/segurancaPrivacidade"
|
||||
element={<SegurancaPrivacidade />}
|
||||
/>
|
||||
<Route path="/entrega" element={<Entrega />} />
|
||||
<Route path="/trocaDevolucao" element={<TrocaDevolucao />} />
|
||||
<Route path="/contato" element={<Contato />} />
|
||||
</Routes>
|
||||
<NewsLetter />
|
||||
<Footer />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user