From 83600b593250d58ae439faf2c35c72efdef1a012 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Thu, 5 Jan 2023 17:03:19 -0300 Subject: [PATCH] feat: cria main 1280px e adiciona react-router-dom --- package-lock.json | 39 ++++++++++ package.json | 1 + src/assets/images/arrow-right.png | Bin 0 -> 270 bytes src/assets/images/home.png | Bin 0 -> 479 bytes .../FooterBottom/styles.module.scss | 1 - src/components/FooterTop/styles.module.scss | 11 +-- src/components/Header/styles.module.scss | 5 +- src/components/InstitutionalMain/index.tsx | 8 -- .../InstitutionalMain/styles.module.scss | 3 - src/components/Main/About/index.tsx | 43 +++++++++++ src/components/Main/About/styles.module.scss | 29 +++++++ src/components/Main/Contact/index.tsx | 17 +++++ .../Main/Contact/styles.module.scss | 29 +++++++ src/components/Main/Delivery/index.tsx | 43 +++++++++++ .../Main/Delivery/styles.module.scss | 29 +++++++ .../Main/ExchangeAndReturn/index.tsx | 43 +++++++++++ .../Main/ExchangeAndReturn/styles.module.scss | 29 +++++++ src/components/Main/MainMenu/index.tsx | 32 ++++++++ .../Main/MainMenu/styles.module.scss | 22 ++++++ src/components/Main/Payment/index.tsx | 43 +++++++++++ .../Main/Payment/styles.module.scss | 29 +++++++ .../Main/SecurityAndPrivacy/index.tsx | 43 +++++++++++ .../SecurityAndPrivacy/styles.module.scss | 29 +++++++ src/components/Main/index.tsx | 46 +++++++++++ src/components/Main/styles.module.scss | 72 ++++++++++++++++++ src/components/NewsLetter/styles.module.scss | 2 +- src/pages/Institutional/index.tsx | 4 +- src/styles/global.scss | 4 +- 28 files changed, 630 insertions(+), 26 deletions(-) create mode 100644 src/assets/images/arrow-right.png create mode 100644 src/assets/images/home.png delete mode 100644 src/components/InstitutionalMain/index.tsx delete mode 100644 src/components/InstitutionalMain/styles.module.scss create mode 100644 src/components/Main/About/index.tsx create mode 100644 src/components/Main/About/styles.module.scss create mode 100644 src/components/Main/Contact/index.tsx create mode 100644 src/components/Main/Contact/styles.module.scss create mode 100644 src/components/Main/Delivery/index.tsx create mode 100644 src/components/Main/Delivery/styles.module.scss create mode 100644 src/components/Main/ExchangeAndReturn/index.tsx create mode 100644 src/components/Main/ExchangeAndReturn/styles.module.scss create mode 100644 src/components/Main/MainMenu/index.tsx create mode 100644 src/components/Main/MainMenu/styles.module.scss create mode 100644 src/components/Main/Payment/index.tsx create mode 100644 src/components/Main/Payment/styles.module.scss create mode 100644 src/components/Main/SecurityAndPrivacy/index.tsx create mode 100644 src/components/Main/SecurityAndPrivacy/styles.module.scss create mode 100644 src/components/Main/index.tsx create mode 100644 src/components/Main/styles.module.scss diff --git a/package-lock.json b/package-lock.json index faa9718..1b62705 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index ce174ec..de8c552 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/assets/images/arrow-right.png b/src/assets/images/arrow-right.png new file mode 100644 index 0000000000000000000000000000000000000000..3308aafad03f1d27f5c3e2de61812175dc4aa4da GIT binary patch literal 270 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9E$svykh8Km+7D9BhG z-eGdd&;F%Q!WKJL~`^F7N+N+N?IadzQrajup=q$tzz=+~adoYA(>Z N44$rjF6*2UngFBdXuSXc literal 0 HcmV?d00001 diff --git a/src/assets/images/home.png b/src/assets/images/home.png new file mode 100644 index 0000000000000000000000000000000000000000..9e522168cb3976ac6735c7b0623595bde0ef44de GIT binary patch literal 479 zcmV<50U-W~P)eF;l(uoSRDy0e1?_@Y<~ ze22FzW?R1RAF8T4(DfBo3N8P&EXyb2zU;Uo48tN#)6p*_NfOXAdn5b(6o6_z=*Hr) z8fNn64&>JFG;tuQB~hL{meh&`x{w6_dSlfXJ=1_h9my&g3ox8s)01kf|C)*Cg9m35 z*aS8K)jqK2ZCBMlF%G>`RarCqJEs(&q9g5QNBARC@MMKZ0*qDI^zn?H?TL Vcu7|`(Te~8002ovPDHLkV1juY!>a%Q literal 0 HcmV?d00001 diff --git a/src/components/FooterBottom/styles.module.scss b/src/components/FooterBottom/styles.module.scss index 81c6d75..450668c 100644 --- a/src/components/FooterBottom/styles.module.scss +++ b/src/components/FooterBottom/styles.module.scss @@ -139,7 +139,6 @@ &__corporateName { width: 100%; - max-width: 100%; height: auto; order: 2; margin-bottom: 15px; diff --git a/src/components/FooterTop/styles.module.scss b/src/components/FooterTop/styles.module.scss index a9d3242..2bc0a9d 100644 --- a/src/components/FooterTop/styles.module.scss +++ b/src/components/FooterTop/styles.module.scss @@ -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); } } diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss index dbfd65e..83b11f4 100644 --- a/src/components/Header/styles.module.scss +++ b/src/components/Header/styles.module.scss @@ -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; diff --git a/src/components/InstitutionalMain/index.tsx b/src/components/InstitutionalMain/index.tsx deleted file mode 100644 index c6b0342..0000000 --- a/src/components/InstitutionalMain/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react"; -import styles from "./styles.module.scss"; - -const InstitutionalMain = () => { - return
; -}; - -export { InstitutionalMain }; diff --git a/src/components/InstitutionalMain/styles.module.scss b/src/components/InstitutionalMain/styles.module.scss deleted file mode 100644 index 50dcf6d..0000000 --- a/src/components/InstitutionalMain/styles.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.main { - height: 588px; -} diff --git a/src/components/Main/About/index.tsx b/src/components/Main/About/index.tsx new file mode 100644 index 0000000..f498474 --- /dev/null +++ b/src/components/Main/About/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { MainMenu } from "../MainMenu"; +import styles from "./styles.module.scss"; + +const About = () => { + 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 { About }; diff --git a/src/components/Main/About/styles.module.scss b/src/components/Main/About/styles.module.scss new file mode 100644 index 0000000..9e888ab --- /dev/null +++ b/src/components/Main/About/styles.module.scss @@ -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); + } + } +} diff --git a/src/components/Main/Contact/index.tsx b/src/components/Main/Contact/index.tsx new file mode 100644 index 0000000..a5864e9 --- /dev/null +++ b/src/components/Main/Contact/index.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { MainMenu } from "../MainMenu"; +import styles from "./styles.module.scss"; + +const Contact = () => { + return ( +
+ +
+

Contato

+
+
+
+ ); +}; + +export { Contact }; diff --git a/src/components/Main/Contact/styles.module.scss b/src/components/Main/Contact/styles.module.scss new file mode 100644 index 0000000..9e888ab --- /dev/null +++ b/src/components/Main/Contact/styles.module.scss @@ -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); + } + } +} diff --git a/src/components/Main/Delivery/index.tsx b/src/components/Main/Delivery/index.tsx new file mode 100644 index 0000000..e9ea071 --- /dev/null +++ b/src/components/Main/Delivery/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { MainMenu } from "../MainMenu"; +import styles from "./styles.module.scss"; + +const Delivery = () => { + 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 { Delivery }; diff --git a/src/components/Main/Delivery/styles.module.scss b/src/components/Main/Delivery/styles.module.scss new file mode 100644 index 0000000..9e888ab --- /dev/null +++ b/src/components/Main/Delivery/styles.module.scss @@ -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); + } + } +} diff --git a/src/components/Main/ExchangeAndReturn/index.tsx b/src/components/Main/ExchangeAndReturn/index.tsx new file mode 100644 index 0000000..a00bc14 --- /dev/null +++ b/src/components/Main/ExchangeAndReturn/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { MainMenu } from "../MainMenu"; +import styles from "./styles.module.scss"; + +const ExchangeAndReturn = () => { + return ( +
+ +
+

Troca e Devolução

+

+ 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 { ExchangeAndReturn }; diff --git a/src/components/Main/ExchangeAndReturn/styles.module.scss b/src/components/Main/ExchangeAndReturn/styles.module.scss new file mode 100644 index 0000000..9e888ab --- /dev/null +++ b/src/components/Main/ExchangeAndReturn/styles.module.scss @@ -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); + } + } +} diff --git a/src/components/Main/MainMenu/index.tsx b/src/components/Main/MainMenu/index.tsx new file mode 100644 index 0000000..497932d --- /dev/null +++ b/src/components/Main/MainMenu/index.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import styles from "./styles.module.scss"; + +const MainMenu = () => { + return ( +
+
    +
  • + Sobre +
    • +
  • + Forma de Pagamento +
    • +
  • + Entrega +
    • +
  • + Troca e Devolução +
    • +
  • + Segurança e Privacidade +
    • +
  • + Contato +
    • +
+
+ ); +}; + +export { MainMenu }; diff --git a/src/components/Main/MainMenu/styles.module.scss b/src/components/Main/MainMenu/styles.module.scss new file mode 100644 index 0000000..04acfc2 --- /dev/null +++ b/src/components/Main/MainMenu/styles.module.scss @@ -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); + } + } +} diff --git a/src/components/Main/Payment/index.tsx b/src/components/Main/Payment/index.tsx new file mode 100644 index 0000000..9d5f3f0 --- /dev/null +++ b/src/components/Main/Payment/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { MainMenu } from "../MainMenu"; +import styles from "./styles.module.scss"; + +const Payment = () => { + return ( +
+ +
+

Formas 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 { Payment }; diff --git a/src/components/Main/Payment/styles.module.scss b/src/components/Main/Payment/styles.module.scss new file mode 100644 index 0000000..9e888ab --- /dev/null +++ b/src/components/Main/Payment/styles.module.scss @@ -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); + } + } +} diff --git a/src/components/Main/SecurityAndPrivacy/index.tsx b/src/components/Main/SecurityAndPrivacy/index.tsx new file mode 100644 index 0000000..5233fa1 --- /dev/null +++ b/src/components/Main/SecurityAndPrivacy/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { MainMenu } from "../MainMenu"; +import styles from "./styles.module.scss"; + +const SecurityAndPrivacy = () => { + 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 { SecurityAndPrivacy }; diff --git a/src/components/Main/SecurityAndPrivacy/styles.module.scss b/src/components/Main/SecurityAndPrivacy/styles.module.scss new file mode 100644 index 0000000..9e888ab --- /dev/null +++ b/src/components/Main/SecurityAndPrivacy/styles.module.scss @@ -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); + } + } +} diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx new file mode 100644 index 0000000..7bef5e3 --- /dev/null +++ b/src/components/Main/index.tsx @@ -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 ( +
+
+
+
+ + Home + + + Seta + +

INSTITUCIONAL

+
+
+

Institucional

+
+ + + } /> + } /> + } /> + } /> + } /> + } /> + + +
+
+
+ ); +}; + +export { Main }; diff --git a/src/components/Main/styles.module.scss b/src/components/Main/styles.module.scss new file mode 100644 index 0000000..95579f0 --- /dev/null +++ b/src/components/Main/styles.module.scss @@ -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); + } + } +} diff --git a/src/components/NewsLetter/styles.module.scss b/src/components/NewsLetter/styles.module.scss index 09acf11..57f9137 100644 --- a/src/components/NewsLetter/styles.module.scss +++ b/src/components/NewsLetter/styles.module.scss @@ -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; } } diff --git a/src/pages/Institutional/index.tsx b/src/pages/Institutional/index.tsx index d44d0c8..d039743 100644 --- a/src/pages/Institutional/index.tsx +++ b/src/pages/Institutional/index.tsx @@ -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)} />
setMenuMobileModal(true)} /> - +