feat(main): Cria e aplica os componentes do main e título principal

src/components/Main/Main.module.scss

@@ -0,0 +1,65 @@
+@use '../../variables';
+
+.institucional {
+    &__home-container {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        margin-top: 29px;
+
+        @media (min-width: 2500px) {
+            gap: 12px;
+        }
+
+        &__home-icon {
+            width: 16px;
+
+            @media (min-width: 2500px) {
+                width: 31px;
+            }
+        }
+
+        &__arrow-icon {
+            width: 8px;
+            height: 8px;
+
+            @media (min-width: 2500px) {
+                width: 15px;
+                height: 15px;
+            }
+
+        }
+
+        &__text {
+            font-size: 12px;
+            line-height: 14px;
+            color: variables.$gray-400;
+
+            @media (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+
+        }
+    }
+
+    &__title-principal {
+        font-size: 24px;
+        line-height: 28px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: variables.$black-200;
+        margin: 81px 0 80px 0;
+        text-align: center;
+
+        @media (min-width: 2500px) {
+            font-size: 48px;
+            line-height: 56px;
+            margin: 82px 0 80px 0;
+        }
+
+        @media (max-width: 1024px) {
+            margin: 81px 0 40px 0;
+        }
+    }
+}

src/components/Main/Main.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import styles from "./Main.module.scss";
+
+import imgHome from "./assets/home-icon.svg";
+import imgArrowToRight from "./assets/arrow-point-to-right.svg";
+
+import { IconList } from "../IconList/IconList";
+import { ItemList } from "../ItemList/ItemList";
+
+import { TitlePrincipal } from "../TitlePrincipal/TitlePrincipal";
+
+const Main = () => {
+
+  return (
+    <>
+        <ul className={styles["institucional__home-container"]}>
+            <a href="/">
+                <IconList
+                src={imgHome}
+                alt="Ícone Home"
+                imgClassName={styles["institucional__home-container__home-icon"]}
+                />
+            </a>
+
+            <a href="/">
+                <IconList
+                src={imgArrowToRight}
+                alt="Ícone Seta para Esquerda"
+                imgClassName={styles["institucional__home-container__arrow-icon"]}
+                />
+            </a>
+
+            <a href="/">
+                <ItemList text="Institucional" textClassName={styles["institucional__home-container__text"]} />
+            </a>
+        </ul>
+
+        <TitlePrincipal text="Institucional" titleClassName={styles["institucional__title-principal"]}/>
+    </>
+  );
+}
+
+export { Main };

src/components/Main/assets/arrow-point-to-right.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_3751_560)">
+<path d="M11.9417 7.03685L5.22531 0.320703C4.79807 -0.106746 4.10537 -0.106746 3.67833 0.320703C3.25126 0.747771 3.25126 1.44043 3.67833 1.86747L9.62128 7.81023L3.67851 13.7528C3.25144 14.18 3.25144 14.8726 3.67851 15.2997C4.10558 15.7269 4.79824 15.7269 5.22548 15.2997L11.9418 8.58344C12.1554 8.3698 12.262 8.0901 12.262 7.81026C12.262 7.53029 12.1552 7.25038 11.9417 7.03685Z" fill="#C4C4C4"/>
+</g>
+<defs>
+<clipPath id="clip0_3751_560">
+<rect width="15.62" height="15.62" fill="white" transform="matrix(1 0 0 -1 0 15.6201)"/>
+</clipPath>
+</defs>
+</svg>

src/components/Main/assets/home-icon.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.9231 14.8352L28.692 12.6041L16.4147 0.326808C15.9789 -0.108936 15.2723 -0.108936 14.8365 0.326808L2.55915 12.6041L0.326936 14.8364C-0.101287 15.2798 -0.089058 15.9863 0.354338 16.4146C0.786878 16.8323 1.47257 16.8323 1.90511 16.4146L2.23099 16.0864V30.1339C2.23099 30.7503 2.73069 31.25 3.34713 31.25H27.9018C28.5182 31.25 29.0179 30.7503 29.0179 30.1339V16.0864L29.3449 16.4134C29.7883 16.8417 30.4949 16.8294 30.9231 16.386C31.3408 15.9535 31.3408 15.2677 30.9231 14.8352ZM18.9728 29.0178H12.2761V20.0888H18.9728V29.0178ZM26.7856 29.0178H21.2051V18.9727C21.2051 18.3563 20.7054 17.8566 20.0889 17.8566H11.16C10.5436 17.8566 10.0438 18.3563 10.0438 18.9727V29.0178H4.46327V13.8542L15.6244 2.69296L26.7856 13.8542V29.0178Z" fill="#C4C4C4"/>
+</svg>

src/components/TitlePrincipal/TitlePrincipal.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+interface Title {
+    text: string;
+    titleClassName?: string;
+}
+
+const TitlePrincipal = ( props: Title) => {
+    const { text,  titleClassName } = props;
+    
+    return <h1 className={titleClassName}> { text } </h1>;
+};
+
+export { TitlePrincipal };

src/pages/Home.module.scss

@@ -15,4 +15,12 @@
     @media (max-width: 1024px) {
         height: 139px;
     }
-}
+}
+
+.institucional {
+    padding: 0 100px;
+    
+    @media (max-width: 1024px) {
+        padding: 0 16px;
+    }
+}

src/pages/Home.tsx

@@ -4,9 +4,10 @@ import styles from "./Home.module.scss";
 
 import { HeaderTop } from "../components/HeaderTop/HeaderTop";
 import { HeaderBottom } from "../components/HeaderBottom/HeaderBottom";
+import { Main } from "../components/Main/Main";
 import { Newsletter } from "../components/Newsletter/Newsletter";
-import { FooterBottom } from "../components/FooterBottom/FooterBottom";
 import { FooterTop } from "../components/FooterTop/FooterTop";
+import { FooterBottom } from "../components/FooterBottom/FooterBottom";
 import { WhatsAppAndScrollTop } from "../components/WhatsAppAndScrollTop/WhatsAppAndScrollTop";
 
 const Home = () => {
@@ -18,7 +19,9 @@ const Home = () => {
         <HeaderBottom />
       </header>
 
-      <main></main>
+      <main className={styles["institucional"]}>
+        <Main />
+      </main>
 
       <footer>
         <Newsletter />