From 9d90919098adac81146c560219cadf04154feca6 Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 4 Jan 2023 17:43:47 -0300 Subject: [PATCH] feat: add Main --- package-lock.json | 61 +++++++++++++ package.json | 1 + src/assets/imgs/ArrowPointToRight.svg | 3 + src/assets/imgs/HomeIcon.svg | 3 + src/components/Main/Contato.tsx | 36 ++++++++ src/components/Main/Entrega.tsx | 36 ++++++++ src/components/Main/FormaDePagamento.tsx | 36 ++++++++ src/components/Main/Main.module.scss | 85 +++++++++++++++++++ src/components/Main/Main.tsx | 40 +++++++++ src/components/Main/SegurancaEPrivacidade.tsx | 36 ++++++++ src/components/Main/Sobre.tsx | 36 ++++++++ src/components/Main/TrocaEDevolucao.tsx | 36 ++++++++ src/config/routes.js | 23 +++++ src/pages/Home.tsx | 2 + 14 files changed, 434 insertions(+) create mode 100644 src/assets/imgs/ArrowPointToRight.svg create mode 100644 src/assets/imgs/HomeIcon.svg create mode 100644 src/components/Main/Contato.tsx create mode 100644 src/components/Main/Entrega.tsx create mode 100644 src/components/Main/FormaDePagamento.tsx create mode 100644 src/components/Main/Main.module.scss create mode 100644 src/components/Main/Main.tsx create mode 100644 src/components/Main/SegurancaEPrivacidade.tsx create mode 100644 src/components/Main/Sobre.tsx create mode 100644 src/components/Main/TrocaEDevolucao.tsx create mode 100644 src/config/routes.js diff --git a/package-lock.json b/package-lock.json index 839c86f..1c7b603 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "node-sass": "^8.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4" @@ -3116,6 +3117,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", @@ -15210,6 +15219,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", @@ -20839,6 +20878,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", @@ -29547,6 +29591,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "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==", + "requires": { + "@remix-run/router": "1.2.1" + } + }, + "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==", + "requires": { + "@remix-run/router": "1.2.1", + "react-router": "6.6.1" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 2a48ea6..da18b18 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "node-sass": "^8.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4" diff --git a/src/assets/imgs/ArrowPointToRight.svg b/src/assets/imgs/ArrowPointToRight.svg new file mode 100644 index 0000000..f9d5afd --- /dev/null +++ b/src/assets/imgs/ArrowPointToRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/imgs/HomeIcon.svg b/src/assets/imgs/HomeIcon.svg new file mode 100644 index 0000000..7d137cd --- /dev/null +++ b/src/assets/imgs/HomeIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Main/Contato.tsx b/src/components/Main/Contato.tsx new file mode 100644 index 0000000..50ffc7c --- /dev/null +++ b/src/components/Main/Contato.tsx @@ -0,0 +1,36 @@ +const Contato = () => { + return ( +
+

Contato

+

+ 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. +

+

+ 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. +

+

+ 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? +

+
+ ); +}; + +export default Contato; diff --git a/src/components/Main/Entrega.tsx b/src/components/Main/Entrega.tsx new file mode 100644 index 0000000..929d593 --- /dev/null +++ b/src/components/Main/Entrega.tsx @@ -0,0 +1,36 @@ +const Entrega = () => { + return ( +
+

Entrega

+

+ 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. +

+

+ 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. +

+

+ 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? +

+
+ ); +}; + +export default Entrega; diff --git a/src/components/Main/FormaDePagamento.tsx b/src/components/Main/FormaDePagamento.tsx new file mode 100644 index 0000000..92e1097 --- /dev/null +++ b/src/components/Main/FormaDePagamento.tsx @@ -0,0 +1,36 @@ +const FormaDePagamento = () => { + return ( +
+

Forma de Pagamento

+

+ 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. +

+

+ 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. +

+

+ 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? +

+
+ ); +}; + +export default FormaDePagamento; diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss new file mode 100644 index 0000000..fd1d9f6 --- /dev/null +++ b/src/components/Main/Main.module.scss @@ -0,0 +1,85 @@ +@import "../../variaveis.scss"; + +main { + width: 100%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin-bottom: 66.56px; + .Main__Nav { + width: 84.378%; + padding-top: 30px; + display: flex; + align-items: center; + & img { + margin-right: 8px; + } + & a:not(:first-of-type) { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #c4c4c4; + text-decoration: none; + text-transform: uppercase; + margin-left: 8px; + } + } + h1 { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #292929; + margin: 80px 0; + } + .Container { + display: flex; + justify-content: space-between; + width: 84.378%; + aside { + display: flex; + flex-direction: column; + width: 27.864%; + border-right: 1px solid #000000; + & a { + width: 302px; + height: 39px; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #7d7d7d; + text-decoration: none; + display: flex; + align-items: center; + } + } + & div { + width: 69.241%; + h2 { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: #292929; + } + + p { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 15px; + color: #7d7d7d; + } + } + } +} diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx new file mode 100644 index 0000000..905af5a --- /dev/null +++ b/src/components/Main/Main.tsx @@ -0,0 +1,40 @@ +import { BrowserRouter } from "react-router-dom"; +import Rotas from "../../config/routes"; +import { Link } from "react-router-dom"; +import HomeIcon from "../../assets/imgs/HomeIcon.svg"; +import ArrowPointToRight from "../../assets/imgs/ArrowPointToRight.svg"; +import styles from "./Main.module.scss"; + + +const Main = () => { + return ( + +
+ +

institucional

+
+ + +
+
+ + ); +}; + +export { Main }; diff --git a/src/components/Main/SegurancaEPrivacidade.tsx b/src/components/Main/SegurancaEPrivacidade.tsx new file mode 100644 index 0000000..4bc07a3 --- /dev/null +++ b/src/components/Main/SegurancaEPrivacidade.tsx @@ -0,0 +1,36 @@ +const SegurancaEPrivacidade = () => { + return ( +
+

Segurança e Privacidade

+

+ 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. +

+

+ 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. +

+

+ 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? +

+
+ ); +}; + +export default SegurancaEPrivacidade; diff --git a/src/components/Main/Sobre.tsx b/src/components/Main/Sobre.tsx new file mode 100644 index 0000000..3f1f597 --- /dev/null +++ b/src/components/Main/Sobre.tsx @@ -0,0 +1,36 @@ +const Sobre = () => { + return ( +
+

Sobre

+

+ 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. +

+

+ 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. +

+

+ 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? +

+
+ ); +}; + +export default Sobre; diff --git a/src/components/Main/TrocaEDevolucao.tsx b/src/components/Main/TrocaEDevolucao.tsx new file mode 100644 index 0000000..eb80750 --- /dev/null +++ b/src/components/Main/TrocaEDevolucao.tsx @@ -0,0 +1,36 @@ +const TrocaEDevolucao = () => { + return ( +
+

Troca e Devolucao

+

+ 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. +

+

+ 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. +

+

+ 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? +

+
+ ); +}; + +export default TrocaEDevolucao; diff --git a/src/config/routes.js b/src/config/routes.js new file mode 100644 index 0000000..956ac57 --- /dev/null +++ b/src/config/routes.js @@ -0,0 +1,23 @@ +import Sobre from "../components/Main/Sobre"; +import FormaDePagamento from "../components/Main/FormaDePagamento"; +import Entrega from "../components/Main/Entrega"; +import TrocaEDevolucao from "../components/Main/TrocaEDevolucao"; +import SegurancaEPrivacidade from "../components/Main/SegurancaEPrivacidade"; +import Contato from "../components/Main/Contato"; +import { Routes, Route } from "react-router-dom"; + +const Rotas = () => { + return ( + + } exact> + } exact> + } exact> + } exact> + } exact> + } exact> + } exact> + + ); +}; + +export default Rotas; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 055ecc1..0be77c6 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,10 +1,12 @@ import { Header } from "../components/Header/Header"; import { Footer } from "../components/Footer/Footer"; +import { Main } from "../components/Main/Main"; const Home = () => { return ( <>
+