ManuelaLuanaSchumackerTavares/desafio-react-e-typescript-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(main-content-top): Adiciona menu breadcrumb e título da pagina intitucional

Browse Source
This commit is contained in:
Manuela Luana Schumacker Tavares 2023-01-19 15:39:47 -03:00
parent 033320f2e0
commit 600f2a1b7e
4 changed files with 85 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/svgs/home.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3715_5676)">
<path d="M15.8327 7.59562L14.6904 6.4533L8.40443 0.167326C8.1813 -0.0557753 7.81954 -0.0557753 7.59641 0.167326L1.3104 6.4533L0.167503 7.59623C-0.0517478 7.82324 -0.0454864 8.185 0.181532 8.40425C0.402993 8.61814 0.754068 8.61814 0.975529 8.40425L1.14238 8.23623V15.4285C1.14238 15.7442 1.39823 16 1.71384 16H14.2858C14.6014 16 14.8573 15.7442 14.8573 15.4285V8.23623L15.0247 8.40368C15.2517 8.62293 15.6135 8.61664 15.8327 8.38965C16.0466 8.16819 16.0466 7.81708 15.8327 7.59562ZM9.71421 14.8571H6.28549V10.2855H9.71421V14.8571ZM13.7144 14.8571H10.8571V9.71403C10.8571 9.39841 10.6013 9.14256 10.2856 9.14256H5.71403C5.39841 9.14256 5.14256 9.39841 5.14256 9.71403V14.8571H2.28531V7.09334L7.99982 1.3788L13.7144 7.09334V14.8571Z" fill="#C4C4C4"/>
</g>
<defs>
<clipPath id="clip0_3715_5676">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 997 B

3
src/assets/svgs/seta.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.1162 3.60396L1.67632 0.164193C1.45751 -0.0547314 1.10273 -0.0547314 0.884018 0.164193C0.665288 0.382921 0.665288 0.737679 0.884018 0.95639L3.92778 4.00006L0.884106 7.04362C0.665377 7.26244 0.665377 7.61716 0.884106 7.83589C1.10284 8.0547 1.45759 8.0547 1.67641 7.83589L5.11629 4.39607C5.22566 4.28665 5.28028 4.1434 5.28028 4.00008C5.28028 3.85668 5.22555 3.71332 5.1162 3.60396Z" fill="#C4C4C4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 509 B

18
src/components/MainContent.tsx
View File

@ -10,9 +10,27 @@ import { TrocaEDevolucao } from "../components/main/components/TrocaEDevolucao";
import { SegurancaEPrivacidade } from "../components/main/components/SegurancaEPrivacidade";
import { Contato } from "../components/main/components/Contato";
import home from "../assets/svgs/home.svg";
import seta from "../assets/svgs/seta.svg";
const MainContent = () => {
return (
<main className={style["main-content-container"]}>
<section className={style["main-content-top-container"]}>
<div className={style["main-content-bread-wrapper"]}>
<a href="/">
<img src={home} alt="Home" />
</a>
<figure>
<img src={seta} alt="Seta" />
</figure>
<span>institucional</span>
</div>
<div className={style["main-content-title-wrapper"]}>
<h1>institucional</h1>
</div>
</section>
<Router>
<Routes>
<Route path="/" element={<Sobre />} />

55
src/components/main-content.module.scss
View File

@ -3,7 +3,60 @@
.main-content-container {
width: 100%;
background: variables.$color-white;
padding: 40px 0;
padding: 29px 0 40px 0;
.main-content-top-container {
width: 80.46875%;
margin: 0 auto;
@media screen and (max-width: 1024px) {
width: 100%;
padding: 0 16px;
}
.main-content-bread-wrapper {
display: flex;
align-items: center;
gap: 9.73px;
a {
img {
width: auto;
}
}
figure {
img {
width: auto;
}
}
span {
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: variables.$color-grey;
}
}
.main-content-title-wrapper {
text-align: center;
padding: 80px 0;
h1 {
font-weight: 400;
font-size: 24px;
line-height: 28px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: variables.$color-black2;
}
@media screen and (max-width: 1024px) {
padding: 80px 0 40px 0;
}
}
}
.main-content-wrapper {
width: 80.46875%;