forked from M3-Academy/desafio-react-e-typescript
feat(main-content): Adiciona menu de navegação no conteúdo principal da página responsivo
This commit is contained in:
parent
0049bdeb18
commit
eb7fba79c1
61
package-lock.json
generated
61
package-lock.json
generated
@ -19,6 +19,7 @@
|
||||
"formik": "^2.2.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4",
|
||||
@ -3081,6 +3082,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -14048,6 +14057,36 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
|
||||
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
|
||||
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
@ -18984,6 +19023,11 @@
|
||||
"source-map": "^0.7.3"
|
||||
}
|
||||
},
|
||||
"@remix-run/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
|
||||
},
|
||||
"@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -26808,6 +26852,23 @@
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
|
||||
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
|
||||
"requires": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
|
||||
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
|
||||
"requires": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.2"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"formik": "^2.2.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4",
|
||||
|
||||
34
src/components/MainContent.tsx
Normal file
34
src/components/MainContent.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import React from "react";
|
||||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
||||
|
||||
import style from "./main-content.module.scss";
|
||||
|
||||
import { Sobre } from "../components/main/components/Sobre";
|
||||
import { FormasDePagamento } from "../components/main/components/FormasDePagamento";
|
||||
import { Entrega } from "../components/main/components/Entrega";
|
||||
import { TrocaEDevolucao } from "../components/main/components/TrocaEDevolucao";
|
||||
import { SegurancaEPrivacidade } from "../components/main/components/SegurancaEPrivacidade";
|
||||
import { Contato } from "../components/main/components/Contato";
|
||||
|
||||
const MainContent = () => {
|
||||
return (
|
||||
<main className={style["main-content-container"]}>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<Sobre />} />
|
||||
<Route path="/sobre" element={<Sobre />} />
|
||||
<Route path="/forma-de-pagamento" element={<FormasDePagamento />} />
|
||||
<Route path="/entrega" element={<Entrega />} />
|
||||
<Route path="/troca-e-devolucao" element={<TrocaEDevolucao />} />
|
||||
<Route
|
||||
path="/seguranca-e-privacidade"
|
||||
element={<SegurancaEPrivacidade />}
|
||||
/>
|
||||
<Route path="/contato" element={<Contato />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export { MainContent };
|
||||
89
src/components/main-content.module.scss
Normal file
89
src/components/main-content.module.scss
Normal file
@ -0,0 +1,89 @@
|
||||
@use "../variables.module.scss";
|
||||
|
||||
.main-content-container {
|
||||
width: 100%;
|
||||
// height: 588px;
|
||||
background: variables.$color-white;
|
||||
// padding-top: 40px;
|
||||
|
||||
.main-content-wrapper {
|
||||
width: 80.46875%;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content-list {
|
||||
width: 29.32038%;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-content-item {
|
||||
padding: 10px 0 16px 16px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: variables.$color-grey3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.selected {
|
||||
display: flex;
|
||||
padding: 10px 16px;
|
||||
background: variables.$color-black;
|
||||
color: variables.$color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content-text {
|
||||
width: 72.62135%;
|
||||
border-left: 1px solid variables.$color-black;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
margin-left: 30px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
margin-left: 0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: variables.$color-black2;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: variables.$color-grey3;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
src/components/main/components/Contato.tsx
Normal file
19
src/components/main/components/Contato.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "./MainMenu";
|
||||
|
||||
import style from "../../main-content.module.scss";
|
||||
|
||||
const Contato = () => {
|
||||
return (
|
||||
<section className={style["main-content-wrapper"]}>
|
||||
<MainMenu />
|
||||
<div className={style["main-content-text"]}>
|
||||
<div className={style["main-content-text-wrapper"]}>
|
||||
<h2>Contato</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { Contato };
|
||||
46
src/components/main/components/Entrega.tsx
Normal file
46
src/components/main/components/Entrega.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "./MainMenu";
|
||||
|
||||
import style from "../../main-content.module.scss";
|
||||
|
||||
const Entrega = () => {
|
||||
return (
|
||||
<section className={style["main-content-wrapper"]}>
|
||||
<MainMenu />
|
||||
<div className={style["main-content-text"]}>
|
||||
<div className={style["main-content-text-wrapper"]}>
|
||||
<h2>Entrega</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { Entrega };
|
||||
46
src/components/main/components/FormasDePagamento.tsx
Normal file
46
src/components/main/components/FormasDePagamento.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "./MainMenu";
|
||||
|
||||
import style from "../../main-content.module.scss";
|
||||
|
||||
const FormasDePagamento = () => {
|
||||
return (
|
||||
<section className={style["main-content-wrapper"]}>
|
||||
<MainMenu />
|
||||
<div className={style["main-content-text"]}>
|
||||
<div className={style["main-content-text-wrapper"]}>
|
||||
<h2>Formas de Pagamento</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { FormasDePagamento };
|
||||
79
src/components/main/components/MainMenu.tsx
Normal file
79
src/components/main/components/MainMenu.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import classnames from "classnames";
|
||||
|
||||
import style from "../../main-content.module.scss";
|
||||
|
||||
const MainMenu = () => {
|
||||
const activeClassName = style["selected"];
|
||||
return (
|
||||
<div className={style["main-content-list"]}>
|
||||
<nav>
|
||||
<ul className={style["teste"]}>
|
||||
<li className={classnames(style["main-content-item"])}>
|
||||
<NavLink
|
||||
to="/sobre"
|
||||
className={({ isActive }) =>
|
||||
isActive ? activeClassName : undefined
|
||||
}
|
||||
>
|
||||
Sobre
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className={classnames(style["main-content-item"])}>
|
||||
<NavLink
|
||||
to="/forma-de-pagamento"
|
||||
className={({ isActive }) =>
|
||||
isActive ? activeClassName : undefined
|
||||
}
|
||||
>
|
||||
Forma de Pagamento
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className={classnames(style["main-content-item"])}>
|
||||
<NavLink
|
||||
to="/entrega"
|
||||
className={({ isActive }) =>
|
||||
isActive ? activeClassName : undefined
|
||||
}
|
||||
>
|
||||
Entrega
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className={classnames(style["main-content-item"])}>
|
||||
<NavLink
|
||||
to="/troca-e-devolucao"
|
||||
className={({ isActive }) =>
|
||||
isActive ? activeClassName : undefined
|
||||
}
|
||||
>
|
||||
Troca e Devolução
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className={classnames(style["main-content-item"])}>
|
||||
<NavLink
|
||||
to="/seguranca-e-privacidade"
|
||||
className={({ isActive }) =>
|
||||
isActive ? activeClassName : undefined
|
||||
}
|
||||
>
|
||||
Segurança e Privacidade
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className={classnames(style["main-content-item"])}>
|
||||
<NavLink
|
||||
to="/contato"
|
||||
className={({ isActive }) =>
|
||||
isActive ? activeClassName : undefined
|
||||
}
|
||||
>
|
||||
Contato
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MainMenu };
|
||||
46
src/components/main/components/SegurancaEPrivacidade.tsx
Normal file
46
src/components/main/components/SegurancaEPrivacidade.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "./MainMenu";
|
||||
|
||||
import style from "../../main-content.module.scss";
|
||||
|
||||
const SegurancaEPrivacidade = () => {
|
||||
return (
|
||||
<section className={style["main-content-wrapper"]}>
|
||||
<MainMenu />
|
||||
<div className={style["main-content-text"]}>
|
||||
<div className={style["main-content-text-wrapper"]}>
|
||||
<h2>Segurança e Privacidade</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { SegurancaEPrivacidade };
|
||||
46
src/components/main/components/Sobre.tsx
Normal file
46
src/components/main/components/Sobre.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "./MainMenu";
|
||||
|
||||
import style from "../../main-content.module.scss";
|
||||
|
||||
const Sobre = () => {
|
||||
return (
|
||||
<section className={style["main-content-wrapper"]}>
|
||||
<MainMenu />
|
||||
<div className={style["main-content-text"]}>
|
||||
<div className={style["main-content-text-wrapper"]}>
|
||||
<h2>Sobre</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { Sobre };
|
||||
46
src/components/main/components/TrocaEDevolucao.tsx
Normal file
46
src/components/main/components/TrocaEDevolucao.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "./MainMenu";
|
||||
|
||||
import style from "../../main-content.module.scss";
|
||||
|
||||
const TrocaEDevolucao = () => {
|
||||
return (
|
||||
<section className={style["main-content-wrapper"]}>
|
||||
<MainMenu />
|
||||
<div className={style["main-content-text"]}>
|
||||
<div className={style["main-content-text-wrapper"]}>
|
||||
<h2>Troca e Devolução</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { TrocaEDevolucao };
|
||||
@ -5,12 +5,14 @@ import { HeaderBottom } from "../components/HeaderBottom";
|
||||
import { FooterBottom } from "../components/FooterBottom";
|
||||
import { FooterTop } from "../components/FooterTop";
|
||||
import { Newsletter } from "../components/Newsletter";
|
||||
import { MainContent } from "../components/MainContent";
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<div className="App">
|
||||
<HeaderTop />
|
||||
<HeaderBottom />
|
||||
<MainContent />
|
||||
<Newsletter />
|
||||
<FooterTop />
|
||||
<FooterBottom />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user