forked from M3-Academy/desafio-react-e-typescript
Merge pull request 'feat(main-content-top): Adiciona menu breadcrumb e título da pagina intitucional' (#15) from feature/main-content-top into develop
Reviewed-on: #15
This commit is contained in:
commit
910f5bc99c
10
src/assets/svgs/home.svg
Normal file
10
src/assets/svgs/home.svg
Normal 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>
|
After Width: | Height: | Size: 997 B |
3
src/assets/svgs/seta.svg
Normal file
3
src/assets/svgs/seta.svg
Normal 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>
|
After Width: | Height: | Size: 509 B |
@ -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 />} />
|
||||
|
@ -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%;
|
||||
|
Loading…
Reference in New Issue
Block a user