feat: construção do main-top

src/assets/svg/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.1918 7.85179L2.47543 1.13564C2.04819 0.708196 1.35549 0.708196 0.928456 1.13564C0.501387 1.56271 0.501387 2.25538 0.928456 2.68241L6.8714 8.62517L0.928629 14.5677C0.50156 14.995 0.50156 15.6876 0.928629 16.1146C1.3557 16.5419 2.04836 16.5419 2.4756 16.1146L9.19197 9.39838C9.4055 9.18474 9.51215 8.90504 9.51215 8.62521C9.51215 8.34523 9.4053 8.06532 9.1918 7.85179Z" fill="#C4C4C4"/>
+</svg>

src/assets/svg/house.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.4148 0.326808C15.9789 -0.108936 15.2724 -0.108936 14.8366 0.326808L2.55921 12.6041L0.326997 14.8364C-0.101226 15.2798 -0.088997 15.9863 0.354399 16.4146C0.786939 16.8323 1.47263 16.8323 1.90517 16.4146L2.23105 16.0864V30.1339C2.23105 30.7503 2.73075 31.25 3.34719 31.25H27.9018C28.5183 31.25 29.018 30.7503 29.018 30.1339V16.0864L29.345 16.4134C29.7884 16.8417 30.4949 16.8294 30.9231 16.386C31.3409 15.9535 31.3409 15.2677 30.9231 14.8352ZM18.9729 29.0178H12.2762V20.0888H18.9729V29.0178ZM26.7857 29.0178H21.2051V18.9727C21.2051 18.3563 20.7054 17.8566 20.089 17.8566H11.1601C10.5436 17.8566 10.0439 18.3563 10.0439 18.9727V29.0178H4.46333V13.8542L15.6245 2.69296L26.7857 13.8542V29.0178Z" fill="#C4C4C4"/>
+</svg>

src/components/Main/main.module.scss

@@ -0,0 +1,42 @@
+.conteiner-main{
+    padding: 0 100px;
+
+    .main-top{
+        position: relative;
+
+        .main-house{
+            display: flex;
+            align-items: center;
+            font-family: 'Roboto';
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+            color: #C4C4C4;
+            margin-top: 30px;
+            text-transform: uppercase;
+
+            .img-house{
+                height: 16px;
+                width: 16px;
+            }
+
+            .img-arrow{
+                height: 8px;
+                width: 8px;
+                margin: 0 8px;
+            }
+        }
+
+        .main-title{
+            margin: 80px 40.6481481%;
+            font-family: 'Roboto';
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 28px;
+            color: #292929;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+        }
+
+    }
+}

src/components/Main/main.tsx

@@ -1,7 +1,38 @@
 import React from 'react';
+import house from '../../assets/svg/house.svg';
+import arrow from '../../assets/svg/arrow.svg';
 
+import styles from './main.module.scss';
+
+const Li = () => {
+    return(
+        <li>oi</li>
+    )
+}
+ 
 const Main = () => {
-    return <div></div>
+    return (
+    <div className={styles['conteiner-main']}>
+        <div className={styles['main-top']}>
+            <div className={styles['main-house']}>
+                <img className={styles['img-house']} src={house} alt="casa" />
+                <img className={styles['img-arrow']} src={arrow} alt="flecha" />
+                <span>Institucional</span>
+            </div>
+            <h1 className={styles['main-title']}>Institucional</h1>
+        </div>
+        <div>
+            <ul>
+                <Li/>
+                <Li/>
+                <Li/>
+                <Li/>
+                <Li/>
+            </ul>
+        </div>
+    </div>
+    )
+
 }
 
 export { Main };

src/components/Main/mainNewsLetter.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const newsLetter = () => {
+    return (
+        <div>
+            <h1>Assine nossa Newsletter</h1>
+            <input type="email" />
+            <button></button>
+        </div>
+    )
+}
+
+export { newsLetter }