forked from M3-Academy/desafio-react-e-typescript
feat: cria main 1280px e adiciona react-router-dom
This commit is contained in:
parent
2c4a8ab1ee
commit
83600b5932
39
package-lock.json
generated
39
package-lock.json
generated
@ -18,6 +18,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
@ -3079,6 +3080,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",
|
||||
@ -13988,6 +13997,36 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
|
||||
"integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
|
||||
"integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.1"
|
||||
},
|
||||
"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",
|
||||
|
@ -13,6 +13,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
|
BIN
src/assets/images/arrow-right.png
Normal file
BIN
src/assets/images/arrow-right.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 270 B |
BIN
src/assets/images/home.png
Normal file
BIN
src/assets/images/home.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 479 B |
@ -139,7 +139,6 @@
|
||||
|
||||
&__corporateName {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
order: 2;
|
||||
margin-bottom: 15px;
|
||||
|
@ -1,9 +1,6 @@
|
||||
.footerTop {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-width: 0px 0px 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--black-500);
|
||||
height: auto;
|
||||
padding: 50px 0;
|
||||
|
||||
@ -41,7 +38,7 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: var(--black-400);
|
||||
color: var(--black-300);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -50,7 +47,7 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: var(--black-400);
|
||||
color: var(--black-300);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@ -60,7 +57,7 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: var(--black-400);
|
||||
color: var(--black-300);
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
@ -89,7 +86,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--black-400);
|
||||
color: var(--black-300);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -11,7 +11,6 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 76px;
|
||||
padding: 0 16px 0 16px;
|
||||
|
||||
.menu-mobile-button {
|
||||
display: none;
|
||||
@ -46,7 +45,7 @@
|
||||
align-items: center;
|
||||
|
||||
&__input {
|
||||
width: 29.915%;
|
||||
width: 28.721%;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-top-left-radius: 5px;
|
||||
@ -137,7 +136,6 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 0 16px 0 16px;
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
@ -174,6 +172,7 @@
|
||||
&__content {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
|
||||
.menu-mobile-button {
|
||||
display: block;
|
||||
|
@ -1,8 +0,0 @@
|
||||
import React from "react";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const InstitutionalMain = () => {
|
||||
return <div className={styles["main"]}></div>;
|
||||
};
|
||||
|
||||
export { InstitutionalMain };
|
@ -1,3 +0,0 @@
|
||||
.main {
|
||||
height: 588px;
|
||||
}
|
43
src/components/Main/About/index.tsx
Normal file
43
src/components/Main/About/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "../MainMenu";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<div className={styles["content"]}>
|
||||
<MainMenu />
|
||||
<div className={styles["content__text"]}>
|
||||
<h1>Sobre</h1>
|
||||
<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.
|
||||
<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 />
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export { About };
|
29
src/components/Main/About/styles.module.scss
Normal file
29
src/components/Main/About/styles.module.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.388%;
|
||||
height: 100%;
|
||||
|
||||
h1 {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: var(--black-400);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
}
|
17
src/components/Main/Contact/index.tsx
Normal file
17
src/components/Main/Contact/index.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "../MainMenu";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const Contact = () => {
|
||||
return (
|
||||
<div className={styles["content"]}>
|
||||
<MainMenu />
|
||||
<div className={styles["content__text"]}>
|
||||
<h1>Contato</h1>
|
||||
<form></form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Contact };
|
29
src/components/Main/Contact/styles.module.scss
Normal file
29
src/components/Main/Contact/styles.module.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.388%;
|
||||
height: 100%;
|
||||
|
||||
h1 {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: var(--black-400);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
}
|
43
src/components/Main/Delivery/index.tsx
Normal file
43
src/components/Main/Delivery/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "../MainMenu";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const Delivery = () => {
|
||||
return (
|
||||
<div className={styles["content"]}>
|
||||
<MainMenu />
|
||||
<div className={styles["content__text"]}>
|
||||
<h1>Entrega</h1>
|
||||
<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.
|
||||
<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 />
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export { Delivery };
|
29
src/components/Main/Delivery/styles.module.scss
Normal file
29
src/components/Main/Delivery/styles.module.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.388%;
|
||||
height: 100%;
|
||||
|
||||
h1 {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: var(--black-400);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
}
|
43
src/components/Main/ExchangeAndReturn/index.tsx
Normal file
43
src/components/Main/ExchangeAndReturn/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "../MainMenu";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const ExchangeAndReturn = () => {
|
||||
return (
|
||||
<div className={styles["content"]}>
|
||||
<MainMenu />
|
||||
<div className={styles["content__text"]}>
|
||||
<h1>Troca e Devolução</h1>
|
||||
<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.
|
||||
<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 />
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export { ExchangeAndReturn };
|
29
src/components/Main/ExchangeAndReturn/styles.module.scss
Normal file
29
src/components/Main/ExchangeAndReturn/styles.module.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.388%;
|
||||
height: 100%;
|
||||
|
||||
h1 {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: var(--black-400);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
}
|
32
src/components/Main/MainMenu/index.tsx
Normal file
32
src/components/Main/MainMenu/index.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const MainMenu = () => {
|
||||
return (
|
||||
<div className={styles["menu"]}>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/">Sobre</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/payment">Forma de Pagamento</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/delivery">Entrega</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/exchange">Troca e Devolução</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/security">Segurança e Privacidade</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact">Contato</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MainMenu };
|
22
src/components/Main/MainMenu/styles.module.scss
Normal file
22
src/components/Main/MainMenu/styles.module.scss
Normal file
@ -0,0 +1,22 @@
|
||||
.menu {
|
||||
border-width: 0 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: var(--black-500);
|
||||
width: 28.015%;
|
||||
height: 100%;
|
||||
|
||||
li {
|
||||
padding: 10px 0 10px 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: var(--gray-300);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: var(--black-500);
|
||||
color: var(--white-500);
|
||||
}
|
||||
}
|
||||
}
|
43
src/components/Main/Payment/index.tsx
Normal file
43
src/components/Main/Payment/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "../MainMenu";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const Payment = () => {
|
||||
return (
|
||||
<div className={styles["content"]}>
|
||||
<MainMenu />
|
||||
<div className={styles["content__text"]}>
|
||||
<h1>Formas de Pagamento</h1>
|
||||
<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.
|
||||
<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 />
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export { Payment };
|
29
src/components/Main/Payment/styles.module.scss
Normal file
29
src/components/Main/Payment/styles.module.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.388%;
|
||||
height: 100%;
|
||||
|
||||
h1 {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: var(--black-400);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
}
|
43
src/components/Main/SecurityAndPrivacy/index.tsx
Normal file
43
src/components/Main/SecurityAndPrivacy/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import { MainMenu } from "../MainMenu";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const SecurityAndPrivacy = () => {
|
||||
return (
|
||||
<div className={styles["content"]}>
|
||||
<MainMenu />
|
||||
<div className={styles["content__text"]}>
|
||||
<h1>Segurança e Privacidade</h1>
|
||||
<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.
|
||||
<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 />
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export { SecurityAndPrivacy };
|
29
src/components/Main/SecurityAndPrivacy/styles.module.scss
Normal file
29
src/components/Main/SecurityAndPrivacy/styles.module.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.388%;
|
||||
height: 100%;
|
||||
|
||||
h1 {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: var(--black-400);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
}
|
46
src/components/Main/index.tsx
Normal file
46
src/components/Main/index.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import styles from "./styles.module.scss";
|
||||
import homeIcon from "../../assets/images/home.png";
|
||||
import arrowRightIcon from "../../assets/images/arrow-right.png";
|
||||
import { About } from "./About";
|
||||
import { Payment } from "./Payment";
|
||||
import { Delivery } from "./Delivery";
|
||||
import { ExchangeAndReturn } from "./ExchangeAndReturn";
|
||||
import { SecurityAndPrivacy } from "./SecurityAndPrivacy";
|
||||
import { Contact } from "./Contact";
|
||||
|
||||
const Main = () => {
|
||||
return (
|
||||
<section className={styles["main"]}>
|
||||
<div className={styles["main__container"]}>
|
||||
<div className={styles["main__top"]}>
|
||||
<div className={styles["main__way"]}>
|
||||
<span className={styles["homeIcon"]}>
|
||||
<img src={homeIcon} alt="Home" />
|
||||
</span>
|
||||
<span className={styles["arrowIcon"]}>
|
||||
<img src={arrowRightIcon} alt="Seta" />
|
||||
</span>
|
||||
<p>INSTITUCIONAL</p>
|
||||
</div>
|
||||
<div className={styles["main__title"]}>
|
||||
<h1>Institucional</h1>
|
||||
</div>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<About />} />
|
||||
<Route path="/payment" element={<Payment />} />
|
||||
<Route path="/delivery" element={<Delivery />} />
|
||||
<Route path="/exchange" element={<ExchangeAndReturn />} />
|
||||
<Route path="/security" element={<SecurityAndPrivacy />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { Main };
|
72
src/components/Main/styles.module.scss
Normal file
72
src/components/Main/styles.module.scss
Normal file
@ -0,0 +1,72 @@
|
||||
.main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 588px;
|
||||
|
||||
&__container {
|
||||
width: 84.375%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__top {
|
||||
width: 100%;
|
||||
height: 233px;
|
||||
}
|
||||
|
||||
&__way {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 9.7px;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
|
||||
.homeIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.arrowIcon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: var(--gray-100);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 189px;
|
||||
|
||||
h1 {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--black-400);
|
||||
}
|
||||
}
|
||||
}
|
@ -20,7 +20,7 @@
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
color: var(--black-400);
|
||||
color: var(--black-300);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Footer } from "../../components/Footer";
|
||||
import { Header } from "../../components/Header";
|
||||
import { InstitutionalMain } from "../../components/InstitutionalMain";
|
||||
import { Main } from "../../components/Main";
|
||||
import { MenuMobileModal } from "../../components/MunuMobileModal";
|
||||
|
||||
const Institutional = () => {
|
||||
@ -26,7 +26,7 @@ const Institutional = () => {
|
||||
onRequestClose={() => setMenuMobileModal(false)}
|
||||
/>
|
||||
<Header handleOpenMenuMobileModal={() => setMenuMobileModal(true)} />
|
||||
<InstitutionalMain />
|
||||
<Main />
|
||||
<Footer windowWidth={windowWidth} />
|
||||
</>
|
||||
);
|
||||
|
@ -9,11 +9,13 @@
|
||||
--white-400: #e5e5e5;
|
||||
--white-500: #ffffff;
|
||||
|
||||
--black-400: #303030;
|
||||
--black-300: #303030;
|
||||
--black-400: #292929;
|
||||
--black-500: #000000;
|
||||
|
||||
--gray-100: #c4c4c4;
|
||||
--gray-200: #c6c6c6;
|
||||
--gray-300: #7d7d7d;
|
||||
}
|
||||
|
||||
a {
|
||||
|
Loading…
Reference in New Issue
Block a user