feat: construção do newsLetter

src/components/Footer/footer.module.scss

@@ -0,0 +1,66 @@
+.conteiner-footer{
+    .conteiner-NewsLetter{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid black;
+        border-right: 0;
+        border-left: 0; 
+        padding: 16px 0;
+
+        .NewsLetter-warrper{
+            width: 37.03125%;
+            display: flex;
+            flex-direction: column;
+            align-content: flex-start;
+            flex-wrap: wrap;
+
+            .NewsLetter-title {
+                font-family: 'Roboto';
+                font-weight: 500;
+                font-size: 18px;
+                line-height: 21px;
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
+                color: #303030;
+            }
+
+            .NewsLetter-div{
+                margin-top: 8px;
+                width: 100%;
+
+                .NewsLetter-input, .NewsLetter-input::placeholder {
+                    font-family: 'Roboto';
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 16px;
+                    color: #C4C4C4;
+                }
+                
+                .NewsLetter-input{
+                    padding: 12px 16px ;
+                    border: 1px solid #E5E5E5;
+                    border-radius: 4px;
+                    width: 71.7299578%;
+                    color: black;
+                    margin-right: 8px;
+                }
+
+                .NewsLetter-buttom{
+                    width: 126px;
+                    height: 42px;
+                    background-color: black;
+                    border-radius: 4px;
+                    font-family: 'Roboto';
+                    font-weight: 700;
+                    font-size: 12px;
+                    line-height: 14px;
+                    text-align: center;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                    color: white;
+                }
+            }
+        }
+    }
+}

src/components/Footer/footer.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 
+import styles from './footer.module.scss';
+import { NewsLetter } from './footerNewsLetter';
+
 const Footer = () => {
-    return <div></div>
+    return (
+    <div className={styles['conteiner-footer']}>
+        < NewsLetter />
+    </div>
+    )
 }
 
 export { Footer };

src/components/Footer/footerNewsLetter.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import styles from './footer.module.scss';
+
+const NewsLetter = () => {
+    return (
+    <div className={styles['conteiner-NewsLetter']}>
+        <div className={styles['NewsLetter-warrper']}>
+            <h3 className={styles['NewsLetter-title']}>Assine nossa Newsletter</h3>
+            <div className={styles['NewsLetter-div']}>
+                <input className={styles['NewsLetter-input']} type="email" placeholder='E-mail' />
+                <button className={styles['NewsLetter-buttom']}>ENVIAR</button>
+            </div>
+        </div>
+    </div>)
+}
+
+export { NewsLetter };