feat: criação, estilização e responsivo do institucional finalizado. #2

Merged
luizfelipe9627 merged 1 commits from feature/institucional into development 2023-01-15 04:44:48 +00:00
24 changed files with 286 additions and 11 deletions

3
src/assets/svg/arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.11608 3.60396L1.6762 0.164193C1.45738 -0.0547314 1.10261 -0.0547314 0.883896 0.164193C0.665166 0.382921 0.665166 0.737679 0.883896 0.95639L3.92766 4.00006L0.883984 7.04362C0.665255 7.26244 0.665255 7.61716 0.883984 7.83589C1.10271 8.0547 1.45747 8.0547 1.67629 7.83589L5.11617 4.39607C5.22553 4.28665 5.28015 4.1434 5.28015 4.00008C5.28015 3.85668 5.22543 3.71332 5.11608 3.60396Z" fill="#C4C4C4"/>
</svg>

After

Width:  |  Height:  |  Size: 510 B

3
src/assets/svg/home.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8326 7.59562L14.6903 6.4533L8.40431 0.167326C8.18118 -0.0557753 7.81942 -0.0557753 7.59628 0.167326L1.31028 6.4533L0.167381 7.59623C-0.0518699 7.82324 -0.0456085 8.185 0.18141 8.40425C0.402871 8.61814 0.753946 8.61814 0.975407 8.40425L1.14226 8.23623V15.4285C1.14226 15.7442 1.3981 16 1.71372 16H14.2857C14.6013 16 14.8572 15.7442 14.8572 15.4285V8.23623L15.0246 8.40368C15.2516 8.62293 15.6134 8.61664 15.8326 8.38965C16.0465 8.16819 16.0465 7.81708 15.8326 7.59562ZM9.71409 14.8571H6.28537V10.2855H9.71409V14.8571ZM13.7142 14.8571H10.857V9.71403C10.857 9.39841 10.6011 9.14256 10.2855 9.14256H5.7139C5.39829 9.14256 5.14244 9.39841 5.14244 9.71403V14.8571H2.28518V7.09334L7.99969 1.3788L13.7142 7.09334V14.8571Z" fill="#C4C4C4"/>
</svg>

After

Width:  |  Height:  |  Size: 848 B

View File

@ -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";

View File

@ -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";

View File

@ -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 (

View File

@ -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";

View File

@ -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 (
<div className={styleBreadcrumb["nav-main"]}>
<img src={home} alt="Home" />
<img src={arrow} alt="Flecha" />
<p>Institucional</p>
</div>
);
};
export { Breadcrumb };

View File

@ -0,0 +1,45 @@
// Bibliotecas
import React from "react";
// Estilos
import styleInstitucionalContent from "../../styles/partials/institucional/InstitucionalContent.module.scss";
const InstitucionalContent = () => {
return (
<div className={styleInstitucionalContent["accordion-content"]}>
<h2>Sobre</h2>
<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.
</p>
<p>
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.
</p>
<p>
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>
);
};
export { InstitucionalContent };

View File

@ -0,0 +1,39 @@
// Bibliotecas
import React from "react";
// Estilos
import styleNavInstitucional from "../../styles/partials/institucional/NavInstitucional.module.scss";
const NavInstitucional = () => {
return (
<nav className={styleNavInstitucional["accordion-nav"]}>
<ul>
<li className={styleNavInstitucional["active"]} >
<a href="sobre">Sobre</a>
</li>
<li>
<a href="forma-de-pagamento">Forma de Pagamento</a>
</li>
<li>
<a href="entrega">Entrega</a>
</li>
<li>
<a href="troca-e-devolucao">Troca e Evolução</a>
</li>
<li>
<a href="seguranca-e-privacidade">Segurança e Privacidade</a>
</li>
<li>
<a href="contato">Contato</a>
</li>
</ul>
</nav>
);
};
export { NavInstitucional };

View File

@ -0,0 +1,13 @@
// Bibliotecas
import React from "react";
// Estilos
import styleTitleInstitucional from "../../styles/partials/institucional/TitleInstitucional.module.scss";
const TitleInstitucional = () => {
return (
<h1 className={styleTitleInstitucional["title"]}>Institucional</h1>
);
};
export { TitleInstitucional };

View File

@ -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 (

View File

@ -1,9 +1,15 @@
import React from "react";
import { Header } from "./Header";
import { Institucional } from "./Institucional";
function Home() {
return <Header />;
return (
<body>
<Header />
<Institucional />
</body>
);
}
export { Home };

View File

@ -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 (
<main>
<Breadcrumb />
<TitleInstitucional />
<section className={styleSection["section-accordion"]}>
<NavInstitucional />
<InstitucionalContent />
</section>
</main>
);
};
export { Institucional };

View File

@ -1,3 +1,4 @@
body {
font-family: "Roboto";
height: 1000px;
}

View File

@ -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;
}
}

View File

@ -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;
}
}
}

View File

@ -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;
}
}
}
}

View File

@ -0,0 +1,9 @@
.section-accordion {
display: flex;
padding: 0 100px;
@media (max-width: 1024px) {
padding: 0 16px;
flex-direction: column;
}
}

View File

@ -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;
}
}