From bf880bd5dc81e47cd868579e5378e3f619009eb7 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Sat, 14 Jan 2023 11:25:43 -0300 Subject: [PATCH] feat: criado e estilizado a parte institucional. --- src/assets/svg/arrow.svg | 3 ++ src/assets/svg/home.svg | 3 ++ src/components/Header/Form.tsx | 2 +- src/components/Header/Menu.tsx | 2 +- src/components/Header/Nav.tsx | 2 +- src/components/Header/User.tsx | 2 +- src/components/institucional/Breadcrumb.tsx | 21 +++++++++ .../institucional/InstitucionalContent.tsx | 45 +++++++++++++++++++ .../institucional/NavInstitucional.tsx | 39 ++++++++++++++++ .../institucional/TitleInstitucional.tsx | 13 ++++++ src/pages/Header.tsx | 12 ++--- src/pages/Home.tsx | 8 +++- src/pages/Institucional.tsx | 29 ++++++++++++ src/styles/common/global.scss | 1 + .../partials/{ => header}/Form.module.scss | 0 .../{ => header}/HeaderWrapper.module.scss | 0 .../partials/{ => header}/Menu.module.scss | 0 .../partials/{ => header}/Nav.module.scss | 0 .../partials/{ => header}/User.module.scss | 0 .../institucional/Breadcrumb.module.scss | 25 +++++++++++ .../InstitucionalContent.module.scss | 29 ++++++++++++ .../NavInstitucional.module.scss | 40 +++++++++++++++++ .../SectionAccordion.module.scss | 9 ++++ .../TitleInstitucional.module.scss | 12 +++++ 24 files changed, 286 insertions(+), 11 deletions(-) create mode 100644 src/assets/svg/arrow.svg create mode 100644 src/assets/svg/home.svg create mode 100644 src/components/institucional/Breadcrumb.tsx create mode 100644 src/components/institucional/InstitucionalContent.tsx create mode 100644 src/components/institucional/NavInstitucional.tsx create mode 100644 src/components/institucional/TitleInstitucional.tsx create mode 100644 src/pages/Institucional.tsx rename src/styles/partials/{ => header}/Form.module.scss (100%) rename src/styles/partials/{ => header}/HeaderWrapper.module.scss (100%) rename src/styles/partials/{ => header}/Menu.module.scss (100%) rename src/styles/partials/{ => header}/Nav.module.scss (100%) rename src/styles/partials/{ => header}/User.module.scss (100%) create mode 100644 src/styles/partials/institucional/Breadcrumb.module.scss create mode 100644 src/styles/partials/institucional/InstitucionalContent.module.scss create mode 100644 src/styles/partials/institucional/NavInstitucional.module.scss create mode 100644 src/styles/partials/institucional/SectionAccordion.module.scss create mode 100644 src/styles/partials/institucional/TitleInstitucional.module.scss diff --git a/src/assets/svg/arrow.svg b/src/assets/svg/arrow.svg new file mode 100644 index 0000000..f9d5afd --- /dev/null +++ b/src/assets/svg/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/home.svg b/src/assets/svg/home.svg new file mode 100644 index 0000000..7d137cd --- /dev/null +++ b/src/assets/svg/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Header/Form.tsx b/src/components/Header/Form.tsx index 046ccd6..a1c0935 100644 --- a/src/components/Header/Form.tsx +++ b/src/components/Header/Form.tsx @@ -2,7 +2,7 @@ import React from "react"; // Estilos -import styleForm from "../../styles/partials/Form.module.scss"; +import styleForm from "../../styles/partials/header/Form.module.scss"; // Imagem import search from "../../assets/svg/search.svg"; diff --git a/src/components/Header/Menu.tsx b/src/components/Header/Menu.tsx index 86666b8..63d9dce 100644 --- a/src/components/Header/Menu.tsx +++ b/src/components/Header/Menu.tsx @@ -2,7 +2,7 @@ import React from "react"; // Estilos -import styleMenu from "../../styles/partials/Menu.module.scss"; +import styleMenu from "../../styles/partials/header/Menu.module.scss"; // Imagens import menu from "../../assets/svg/menu.svg"; diff --git a/src/components/Header/Nav.tsx b/src/components/Header/Nav.tsx index 480aac1..a72498e 100644 --- a/src/components/Header/Nav.tsx +++ b/src/components/Header/Nav.tsx @@ -2,7 +2,7 @@ import React from "react"; // Estilos -import styleNav from "../../styles/partials/Nav.module.scss"; +import styleNav from "../../styles/partials/header/Nav.module.scss"; const Nav = () => { return ( diff --git a/src/components/Header/User.tsx b/src/components/Header/User.tsx index 30bf267..262484c 100644 --- a/src/components/Header/User.tsx +++ b/src/components/Header/User.tsx @@ -2,7 +2,7 @@ import React from "react"; // Estilos -import styleUser from "../../styles/partials/User.module.scss"; +import styleUser from "../../styles/partials/header/User.module.scss"; // Imagem import cart from "../../assets/svg/cart.svg"; diff --git a/src/components/institucional/Breadcrumb.tsx b/src/components/institucional/Breadcrumb.tsx new file mode 100644 index 0000000..e17bf86 --- /dev/null +++ b/src/components/institucional/Breadcrumb.tsx @@ -0,0 +1,21 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleBreadcrumb from "../../styles/partials/institucional/Breadcrumb.module.scss"; + +// Imagens +import home from "../../assets/svg/home.svg"; +import arrow from "../../assets/svg/arrow.svg"; + +const Breadcrumb = () => { + return ( +
+ Home + Flecha +

Institucional

+
+ ); +}; + +export { Breadcrumb }; diff --git a/src/components/institucional/InstitucionalContent.tsx b/src/components/institucional/InstitucionalContent.tsx new file mode 100644 index 0000000..dd34f04 --- /dev/null +++ b/src/components/institucional/InstitucionalContent.tsx @@ -0,0 +1,45 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleInstitucionalContent from "../../styles/partials/institucional/InstitucionalContent.module.scss"; + +const InstitucionalContent = () => { + 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 { InstitucionalContent }; diff --git a/src/components/institucional/NavInstitucional.tsx b/src/components/institucional/NavInstitucional.tsx new file mode 100644 index 0000000..ee58cb8 --- /dev/null +++ b/src/components/institucional/NavInstitucional.tsx @@ -0,0 +1,39 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleNavInstitucional from "../../styles/partials/institucional/NavInstitucional.module.scss"; + +const NavInstitucional = () => { + return ( + + ); +}; + +export { NavInstitucional }; diff --git a/src/components/institucional/TitleInstitucional.tsx b/src/components/institucional/TitleInstitucional.tsx new file mode 100644 index 0000000..02d2326 --- /dev/null +++ b/src/components/institucional/TitleInstitucional.tsx @@ -0,0 +1,13 @@ +// Bibliotecas +import React from "react"; + +// Estilos +import styleTitleInstitucional from "../../styles/partials/institucional/TitleInstitucional.module.scss"; + +const TitleInstitucional = () => { + return ( +

Institucional

+ ); +}; + +export { TitleInstitucional }; diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx index 6355e56..7578c0b 100644 --- a/src/pages/Header.tsx +++ b/src/pages/Header.tsx @@ -2,14 +2,14 @@ import React from "react"; // Componentes -import { Menu } from "../components/Header/Menu"; -import { LogoM3 } from "../components/Header/LogoM3"; -import { Form } from "../components/Header/Form"; -import { User } from "../components/Header/User"; -import { Nav } from "../components/Header/Nav"; +import { Menu } from "../components/header/Menu"; +import { LogoM3 } from "../components/header/LogoM3"; +import { Form } from "../components/header/Form"; +import { User } from "../components/header/User"; +import { Nav } from "../components/header/Nav"; // Estilos -import styleHeaderWrapper from "../styles/partials/HeaderWrapper.module.scss"; +import styleHeaderWrapper from "../styles/partials/header/HeaderWrapper.module.scss"; const Header = () => { return ( diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index d8c7f9a..ce3a770 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,9 +1,15 @@ import React from "react"; import { Header } from "./Header"; +import { Institucional } from "./Institucional"; function Home() { - return
; + return ( + +
+ + + ); } export { Home }; diff --git a/src/pages/Institucional.tsx b/src/pages/Institucional.tsx new file mode 100644 index 0000000..15faf5f --- /dev/null +++ b/src/pages/Institucional.tsx @@ -0,0 +1,29 @@ +// Bibliotecas +import React from "react"; + +// Componentes +import { Breadcrumb } from "../components/institucional/Breadcrumb"; +import { TitleInstitucional } from "../components/institucional/TitleInstitucional"; +import { NavInstitucional } from "../components/institucional/NavInstitucional"; +import { InstitucionalContent } from "../components/institucional/InstitucionalContent"; + +// Estilos +import styleSection from "../styles/partials/institucional/SectionAccordion.module.scss"; + +const Institucional = () => { + return ( +
+ + + +
+ + +
+ + +
+ ); +}; + +export { Institucional }; diff --git a/src/styles/common/global.scss b/src/styles/common/global.scss index 6aec588..b921731 100644 --- a/src/styles/common/global.scss +++ b/src/styles/common/global.scss @@ -1,3 +1,4 @@ body { font-family: "Roboto"; + height: 1000px; } diff --git a/src/styles/partials/Form.module.scss b/src/styles/partials/header/Form.module.scss similarity index 100% rename from src/styles/partials/Form.module.scss rename to src/styles/partials/header/Form.module.scss diff --git a/src/styles/partials/HeaderWrapper.module.scss b/src/styles/partials/header/HeaderWrapper.module.scss similarity index 100% rename from src/styles/partials/HeaderWrapper.module.scss rename to src/styles/partials/header/HeaderWrapper.module.scss diff --git a/src/styles/partials/Menu.module.scss b/src/styles/partials/header/Menu.module.scss similarity index 100% rename from src/styles/partials/Menu.module.scss rename to src/styles/partials/header/Menu.module.scss diff --git a/src/styles/partials/Nav.module.scss b/src/styles/partials/header/Nav.module.scss similarity index 100% rename from src/styles/partials/Nav.module.scss rename to src/styles/partials/header/Nav.module.scss diff --git a/src/styles/partials/User.module.scss b/src/styles/partials/header/User.module.scss similarity index 100% rename from src/styles/partials/User.module.scss rename to src/styles/partials/header/User.module.scss diff --git a/src/styles/partials/institucional/Breadcrumb.module.scss b/src/styles/partials/institucional/Breadcrumb.module.scss new file mode 100644 index 0000000..18c7456 --- /dev/null +++ b/src/styles/partials/institucional/Breadcrumb.module.scss @@ -0,0 +1,25 @@ +.nav-main { + padding: 30px 100px 0 100px; + display: flex; + align-items: center; + + @media (max-width: 1024px) { + padding: 30px 16px 0 16px; + } + + img { + &:nth-child(2) { + margin: 0 10px; + } + } + + p { + font-size: 12px; + font-weight: 400; + line-height: 14px; + text-transform: uppercase; + color: #C4C4C4; + } +} + + diff --git a/src/styles/partials/institucional/InstitucionalContent.module.scss b/src/styles/partials/institucional/InstitucionalContent.module.scss new file mode 100644 index 0000000..525646a --- /dev/null +++ b/src/styles/partials/institucional/InstitucionalContent.module.scss @@ -0,0 +1,29 @@ +.accordion-content { + h2 { + margin: 12px 0; + font-size: 24px; + font-weight: 700; + line-height: 28px; + + @media (max-width: 1024px) { + margin: 30px 0 12px 0; + text-align: center; + } + } + + p { + font-size: 14.2px; + font-weight: 400; + line-height: 15px; + color: #7d7d7d; + + &:nth-child(3) { + margin: 20px 0; + } + + @media (max-width: 1024px) { + font-size: 12px; + line-height: 18px; + } + } +} diff --git a/src/styles/partials/institucional/NavInstitucional.module.scss b/src/styles/partials/institucional/NavInstitucional.module.scss new file mode 100644 index 0000000..ce82a0f --- /dev/null +++ b/src/styles/partials/institucional/NavInstitucional.module.scss @@ -0,0 +1,40 @@ +.accordion-nav { + border-right: 1px solid #000; + margin-right: 30px; + + @media (max-width: 1024px) { + border: none; + margin-right: 0; + } + + ul { + list-style: none; + + li { + padding: 10px 16px; + width: 302px; + height: 39px; + + @media (max-width: 1024px) { + width: 100%; + } + + a { + font-size: 16px; + font-weight: 400; + line-height: 19px; + color: #7d7d7d; + text-decoration: none; + } + } + + .active { + background-color: #000; + + a { + color: #fff; + font-weight: 700; + } + } + } +} diff --git a/src/styles/partials/institucional/SectionAccordion.module.scss b/src/styles/partials/institucional/SectionAccordion.module.scss new file mode 100644 index 0000000..9dd500a --- /dev/null +++ b/src/styles/partials/institucional/SectionAccordion.module.scss @@ -0,0 +1,9 @@ +.section-accordion { + display: flex; + padding: 0 100px; + + @media (max-width: 1024px) { + padding: 0 16px; + flex-direction: column; + } +} \ No newline at end of file diff --git a/src/styles/partials/institucional/TitleInstitucional.module.scss b/src/styles/partials/institucional/TitleInstitucional.module.scss new file mode 100644 index 0000000..c37403d --- /dev/null +++ b/src/styles/partials/institucional/TitleInstitucional.module.scss @@ -0,0 +1,12 @@ +.title { + font-size: 24px; + font-weight: 400; + line-height: 28px; + text-transform: uppercase; + text-align: center; + margin: 80px 0; + + @media (max-width: 1024px) { + margin: 80px 0 40px 0; + } +}