diff --git a/package-lock.json b/package-lock.json index 17620cf..0a8fe64 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,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", "sass": "^1.57.1", "typescript": "^4.9.4", @@ -3066,6 +3067,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", @@ -14059,6 +14068,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", @@ -18999,6 +19038,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", @@ -26832,6 +26876,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", diff --git a/package.json b/package.json index fc2b8db..ae3d239 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,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", "sass": "^1.57.1", "typescript": "^4.9.4", diff --git a/public/index.html b/public/index.html index e898449..b04588a 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,7 @@ - Desafio React e TypeScript + M3 Academy - Desafio 5 diff --git a/src/components/Header/Menu.module.scss b/src/components/Header/Menu.module.scss deleted file mode 100644 index b21e96e..0000000 --- a/src/components/Header/Menu.module.scss +++ /dev/null @@ -1,71 +0,0 @@ -@import "../../styles/utils/variables.scss"; - -.menu { - display: none; - - @media (max-width: 1024px) { - display: flex; - } - - .menu-header-opacity { - width: 100vw; - min-height: 100%; - opacity: 2; - position: absolute; - top: 0; - left: 0; - background-color: #454545b2; - z-index: 999; - - .menu-header { - position: absolute; - background-color: $black; - width: 90.5%; - - @media (min-width: 280px) and (max-width: 1024px) { - width: 95.3%; - } - - .menu-header-wrapper { - padding: 31px 16px; - display: flex; - justify-content: space-between; - align-items: center; - - div { - a { - font-size: 14px; - font-weight: 400; - line-height: 16px; - text-transform: uppercase; - color: $white; - text-decoration: none; - } - } - } - } - - .menu-nav { - height: 585px; - background-color: $white; - padding: 31px 16px; - - ul { - list-style: none; - - li { - cursor: pointer; - font-size: 14px; - font-weight: 500; - line-height: 16px; - text-transform: uppercase; - color: $primary-500; - - &:nth-child(2) { - margin: 12px 0; - } - } - } - } - } -} diff --git a/src/components/footer/FooterBottom.module.scss b/src/components/footer/FooterBottom.module.scss index 68a6023..5f3ae93 100644 --- a/src/components/footer/FooterBottom.module.scss +++ b/src/components/footer/FooterBottom.module.scss @@ -55,6 +55,10 @@ width: 30px; } + @media (min-width: 280px) and (max-width: 300px) { + width: 24.5px; + } + @media (min-width: 2500px) { width: 70px; } diff --git a/src/components/section/ContentContato.module.scss b/src/components/section/ContentContato.module.scss new file mode 100644 index 0000000..0f5a74b --- /dev/null +++ b/src/components/section/ContentContato.module.scss @@ -0,0 +1,83 @@ +@import "../../styles/utils/variables.scss"; + +.contentContato { + width: 100%; + + h2 { + font-size: 24px; + font-weight: 700; + line-height: 28px; + } + + form { + .infosForm { + flex-direction: column; + + label { + font-size: 14px; + font-weight: 400; + line-height: 16px; + color: $black; + } + + input { + min-width: 100%; + height: 46px; + border-radius: 25px; + padding: 15px 20px; + margin: 12px 0; + outline: none; + border: 1px solid #100d0e; + + &::placeholder { + font-size: 14px; + font-weight: 400; + line-height: 16px; + color: #b9b7b7; + } + } + } + + .checkboxForm { + display: flex; + justify-content: center; + margin-bottom: 12px; + + label { + display: flex; + align-items: flex-end; + margin-right: 5px; + + p { + text-decoration: underline; + color: #100d0e; + font-size: 14px; + font-weight: 400; + line-height: 16px; + } + + span { + color: $primary-900; + margin-right: 3px; + } + } + + input { + width: 18px; + } + } + + button { + width: 100%; + height: 52px; + border-radius: 25px; + background-color: $black; + color: $white; + font-size: 16px; + font-weight: 400; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + } + } +} diff --git a/src/components/section/ContentContato.tsx b/src/components/section/ContentContato.tsx new file mode 100644 index 0000000..b849554 --- /dev/null +++ b/src/components/section/ContentContato.tsx @@ -0,0 +1,47 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleContentContato from "./ContentContato.module.scss"; + +const ContentContato = () => { + return ( +
+

Preencha o formulário

+ +
+
+ + + + + + + + + + + + + + + + + +
+ +
+ + +
+ + +
+
+ ); +}; + +export { ContentContato }; diff --git a/src/components/section/ContentEntrega.tsx b/src/components/section/ContentEntrega.tsx new file mode 100644 index 0000000..d8bd0d7 --- /dev/null +++ b/src/components/section/ContentEntrega.tsx @@ -0,0 +1,29 @@ +// Bibliotecas +import React from "react"; + +// Estilos +//import styleContentEntrega from "./ContentEntrega.module.scss"; + +const ContentEntrega = () => { + return ( +
+

Forma de Pagamento

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, alias, + hic consequuntur tenetur optio dicta explicabo quos voluptate laudantium + dolorum sed blanditiis aspernatur itaque aut adipisci rem. Dolores, + laborum rerum. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur + accusamus magnam a aliquid nam. Nemo magnam corporis soluta repellat + eveniet illo laboriosam tempore mollitia, adipisci, dolores repellendus + accusamus maxime perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore provident facere dolore consequuntur eum neque reiciendis voluptatem commodi porro, voluptatibus dolorem praesentium qui enim sapiente labore. Repellat sunt pariatur neque. +

+
+ ); +}; + +export { ContentEntrega }; diff --git a/src/components/section/ContentAbout.module.scss b/src/components/section/ContentInstitucional.module.scss similarity index 96% rename from src/components/section/ContentAbout.module.scss rename to src/components/section/ContentInstitucional.module.scss index 0446460..8cbf395 100644 --- a/src/components/section/ContentAbout.module.scss +++ b/src/components/section/ContentInstitucional.module.scss @@ -1,6 +1,6 @@ @import "../../styles/utils/variables.scss"; -.contentAbout { +.contentInstitucional { h2 { margin: 12px 0; font-size: 24px; diff --git a/src/components/section/ContentInstitucional.tsx b/src/components/section/ContentInstitucional.tsx new file mode 100644 index 0000000..605109a --- /dev/null +++ b/src/components/section/ContentInstitucional.tsx @@ -0,0 +1,31 @@ +// Bibliotecas +import React from "react"; +import { Routes, Route } from "react-router-dom"; + +// Estilos +import styleContentInstitucional from "./ContentInstitucional.module.scss"; + +import { ContentPagamento } from "./ContentPagamento"; +import { ContentEntrega } from "./ContentEntrega"; +import { ContentTroca } from "./ContentTroca"; +import { ContentSeguranca } from "./ContentSeguranca"; +import { ContentContato } from "./ContentContato"; +import { ContentSobre } from "./ContentSobre"; + +const ContentInstitucional = () => { + return ( +
+ + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
+ ); +}; + +export { ContentInstitucional }; diff --git a/src/components/section/ContentPagamento.tsx b/src/components/section/ContentPagamento.tsx new file mode 100644 index 0000000..73e1531 --- /dev/null +++ b/src/components/section/ContentPagamento.tsx @@ -0,0 +1,28 @@ +// Bibliotecas +import React from "react"; + +// Estilos +//import styleContentPagamento from "./ContentPagamento.module.scss"; + +const ContentPagamento = () => { + return ( +
+

Forma de Pagamento

+ +

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. +

+ +

+ Contrary to popular belief, Lorem Ipsum is not simply random text. It + has roots in a piece of classical Latin literature from 45 BC, making it + over 2000 years old. +

+
+ ); +}; + +export { ContentPagamento }; diff --git a/src/components/section/ContentSeguranca.tsx b/src/components/section/ContentSeguranca.tsx new file mode 100644 index 0000000..dedd0bd --- /dev/null +++ b/src/components/section/ContentSeguranca.tsx @@ -0,0 +1,25 @@ +// Bibliotecas +import React from "react"; + +// Estilos +//import styleContentSeguranca from "./ContentSeguranca.module.scss"; + +const ContentSeguranca = () => { + return ( +
+

Segurança e Privacidade

+ +

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit voluptatibus perferendis nihil necessitatibus iusto! Deserunt vero eaque reiciendis dolores ducimus? Aliquid totam repellendus impedit cumque velit quasi temporibus perspiciatis tenetur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate nisi officiis porro! Ipsum voluptatem deserunt repudiandae minima sunt reiciendis veniam minus animi repellat provident soluta error, voluptate tempora harum consequatur. +

+ +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae natus, nemo a ipsa eveniet assumenda iure ducimus suscipit libero, distinctio neque, consequatur quasi incidunt accusamus ad ipsam necessitatibus dignissimos vero. +

+ +

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt non eum minus officiis qui earum aperiam reprehenderit odit officia architecto blanditiis, ad corporis a natus voluptatem harum laudantium hic illum. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum quo cupiditate beatae expedita sapiente totam illo repellendus tempora delectus, aspernatur, earum aut natus dolor ducimus eaque excepturi ab debitis dolore!

+
+ ); +}; + +export { ContentSeguranca }; diff --git a/src/components/section/ContentAbout.tsx b/src/components/section/ContentSobre.tsx similarity index 90% rename from src/components/section/ContentAbout.tsx rename to src/components/section/ContentSobre.tsx index d7990fa..e499ba0 100644 --- a/src/components/section/ContentAbout.tsx +++ b/src/components/section/ContentSobre.tsx @@ -1,12 +1,9 @@ // Bibliotecas import React from "react"; -// Estilos -import styleContent from "./ContentAbout.module.scss"; - -const ContentAbout = () => { +const ContentSobre = () => { return ( -
+

Sobre

@@ -42,4 +39,4 @@ const ContentAbout = () => { ); }; -export { ContentAbout }; +export { ContentSobre }; diff --git a/src/components/section/ContentTroca.tsx b/src/components/section/ContentTroca.tsx new file mode 100644 index 0000000..c5efc7d --- /dev/null +++ b/src/components/section/ContentTroca.tsx @@ -0,0 +1,36 @@ +// Bibliotecas +import React from "react"; + +// Estilos +//import styleContentTroca from "./ContentTroca.module.scss"; + +const ContentTroca = () => { + return ( +

+

Troca e Devolução

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla excepturi + quisquam eos non, ipsum nobis est cum minus beatae illo molestias + similique corporis dignissimos maiores, accusantium mollitia temporibus + libero sint? +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dolorem + assumenda molestias beatae ducimus nobis ipsum, distinctio cumque, harum + nisi odio earum voluptate deleniti sapiente quod ullam ab repellendus + temporibus. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure + recusandae, accusantium voluptates expedita ullam nostrum exercitationem + incidunt! Voluptates ducimus maiores soluta consectetur ipsa rem + consequatur quasi fugit odio. Labore, quos. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium, optio? Odit ratione rerum veniam temporibus quis necessitatibus, provident soluta deleniti repudiandae? Delectus tempora nostrum impedit officia perferendis odio vero rem. +

+
+ ); +}; + +export { ContentTroca }; diff --git a/src/components/section/NavInstitucional.module.scss b/src/components/section/NavInstitucional.module.scss index ed3a25e..59e5a1d 100644 --- a/src/components/section/NavInstitucional.module.scss +++ b/src/components/section/NavInstitucional.module.scss @@ -1,7 +1,6 @@ @import "../../styles/utils/variables.scss"; .navInstitucional { - border-right: 1px solid $black; margin-right: 30px; @media (max-width: 1024px) { @@ -11,6 +10,13 @@ ul { list-style: none; + border-right: 1px solid #000; + height: 285px; + + @media (max-width: 1024px) { + height: auto; + border-right: none; + } li { padding: 10px 16px; diff --git a/src/components/section/NavInstitucional.tsx b/src/components/section/NavInstitucional.tsx index 0dbd306..f933cf0 100644 --- a/src/components/section/NavInstitucional.tsx +++ b/src/components/section/NavInstitucional.tsx @@ -4,6 +4,13 @@ import React from "react"; // Estilos import styleNavInstitucional from "./NavInstitucional.module.scss"; +import { ContentPagamento } from "./ContentPagamento"; +import { ContentEntrega } from "./ContentEntrega"; +import { ContentTroca } from "./ContentTroca"; +import { ContentSeguranca } from "./ContentSeguranca"; +import { ContentContato } from "./ContentContato"; +import { ContentSobre } from "./ContentSobre"; + const NavInstitucional = () => { return (