feat(main): Adiciona a div de caminho e o titulo principal

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.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>

src/components/Caminho.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import home from "../assets/svgs/home.svg";
+import seta from "../assets/svgs/seta.svg";
+
+import styles from "../styles/main.module.scss";
+
+const Caminho = () => {
+  return (
+    <div className={styles["main-wrapper__caminho"]}>
+      <img className={styles["caminho-image"]} src={home} alt="home" />
+      <img className={styles["caminho-seta"]} src={seta} alt="seta" />
+      <a href="/">INSTITUCIONAL</a>
+    </div>
+  );
+};
+
+export { Caminho };

src/components/Main.tsx

@@ -1,13 +1,17 @@
 import React from "react";
 
 import styles from "../styles/main.module.scss";
+import { Caminho } from "./Caminho";
 import { Newsletter } from "./Newsletter";
 import { ScrollPage } from "./ScrollPage";
+import { Titulo } from "./Titulo";
 
 const Main = () => {
   return (
     <main>
       <div className={styles["main-wrapper"]}>
+        <Caminho />
+        <Titulo />
         <Newsletter />
         <ScrollPage />
       </div>

src/components/Modal.scss

@@ -66,4 +66,5 @@
 .opened {
   opacity: 1;
   pointer-events: all;
+  z-index: 8;
 }

src/components/ScrollPage.tsx

@@ -15,7 +15,7 @@ const ScrollPage = () => {
   return (
     <div className={styles["volta-pag"]}>
       <img className={styles["whatsapp-icon"]} src={whatsapp} alt="whatsapp" />
-      {pageYPosition > 600 && (
+      {pageYPosition > 400 && (
         <a className={styles["volta-pag__link"]} href="#header">
           <img className={styles["go-to-top"]} src={seta} alt="seta" />
         </a>

src/components/Titulo.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import styles from "../styles/main.module.scss";
+
+const Titulo = () => {
+  return (
+    <div className={styles["main-wrapper__titulo"]}>
+      <h1 className={styles["titulo-text"]}>INSTUCIONAL</h1>
+    </div>
+  );
+};
+
+export { Titulo };

src/styles/partials/MainContent.module.scss

@@ -1,6 +1,34 @@
 .main-wrapper {
   position: relative;
   height: 1200px;
+
+  &__caminho {
+    display: flex;
+    gap: 10px;
+    padding: 29px 0 0 100px;
+    align-items: center;
+
+    a {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      text-decoration: none;
+      color: $gray2;
+      padding-top: 2px;
+    }
+  }
+
+  &__titulo {
+    padding: 80px 0;
+    .titulo-text {
+      font-size: 24px;
+      line-height: 28px;
+      text-align: center;
+      margin: 0;
+      font-weight: 400;
+    }
+  }
+
   &__newsletter {
     display: flex;
     flex-direction: column;
@@ -98,6 +126,9 @@
 
 @media screen and (max-width: 1024px) {
   .main-wrapper {
+    &__caminho {
+      padding: 29px 0 0 16px;
+    }
     &__newsletter {
       padding: 16px;
       width: auto;
@@ -135,6 +166,30 @@
 
 @media screen and (min-width: 2500px) {
   .main-wrapper {
+    &__caminho {
+      gap: 12px;
+      .caminho-image {
+        width: 31px;
+      }
+
+      .caminho-seta {
+        width: 9px;
+        height: 16px;
+      }
+
+      a {
+        font-size: 24px;
+        line-height: 28px;
+      }
+    }
+
+    &__titulo {
+      .titulo-text {
+        font-size: 48px;
+        line-height: 56px;
+      }
+    }
+
     &__newsletter {
       width: 39.7%;
       &-title {