From 600f2a1b7e80ae11084242b0b7d92964f1f58f28 Mon Sep 17 00:00:00 2001
From: ManuelaLuanaSchumackerTavares <manuelaluana.dev@gmail.com>
Date: Thu, 19 Jan 2023 15:39:47 -0300
Subject: [PATCH] =?UTF-8?q?feat(main-content-top):=20Adiciona=20menu=20bre?=
 =?UTF-8?q?adcrumb=20e=20t=C3=ADtulo=20da=20pagina=20intitucional?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/home.svg                | 10 +++++
 src/assets/svgs/seta.svg                |  3 ++
 src/components/MainContent.tsx          | 18 ++++++++
 src/components/main-content.module.scss | 55 ++++++++++++++++++++++++-
 4 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/svgs/home.svg
 create mode 100644 src/assets/svgs/seta.svg

diff --git a/src/assets/svgs/home.svg b/src/assets/svgs/home.svg
new file mode 100644
index 0000000..db6d7be
--- /dev/null
+++ b/src/assets/svgs/home.svg
@@ -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>
diff --git a/src/assets/svgs/seta.svg b/src/assets/svgs/seta.svg
new file mode 100644
index 0000000..762a1d8
--- /dev/null
+++ b/src/assets/svgs/seta.svg
@@ -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>
diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx
index b87f2ca..a225893 100644
--- a/src/components/MainContent.tsx
+++ b/src/components/MainContent.tsx
@@ -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 />} />
diff --git a/src/components/main-content.module.scss b/src/components/main-content.module.scss
index 4abca05..1436e12 100644
--- a/src/components/main-content.module.scss
+++ b/src/components/main-content.module.scss
@@ -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%;