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 {