src/components/Newsletter/newsletter.module.scss

@@ -1,9 +1,17 @@
 .newsForm {
+  width: 474px;
+  height: 72px;
   display: flex;
   flex-direction: column;
   font-weight: 500;
   font-size: 18px;
+  font-family: "Roboto";
   font-variant: small-caps;
+  line-height: 21px;
+  letter-spacing: 0.05em;
+  font-style: normal;
+  color: #303030;
+  margin: 16px 0 16px 0;
   @media screen and (min-width: 2500px) {
     font-size: 36px;
   }
@@ -26,6 +34,7 @@
     font-weight: 400;
     font-size: 14px;
     color: #c4c4c4;
+    font-family: "Roboto";
     @media screen and (min-width: 2500px) {
       font-size: 28px;
     }
@@ -36,6 +45,7 @@
   }
 }
 .newsForm-btn {
+  display: flex;
   width: 126px;
   height: 42px;
   background: #000000;
@@ -45,6 +55,8 @@
   color: white;
   font-weight: 700;
   font-size: 12px;
+  align-items: center;
+  justify-content: center;
   @media screen and (min-width: 2500px) {
     width: 246px;
     height: 59px;

src/index.tsx

@@ -8,6 +8,7 @@ import { Cursos } from "./pages/Cursos";
 import { RoutesUrl } from "./components/Router/Router";
 import { Header } from "./sectors/Header/Header";
 import { Footer } from "./sectors/Footer/Footer";
+import { Newsletter } from "./components/Newsletter/Newsletter";
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
@@ -16,6 +17,7 @@ root.render(
     <BrowserRouter>
       <Header></Header>
       <RoutesUrl></RoutesUrl>
+
       <Footer></Footer>
     </BrowserRouter>
   </React.StrictMode>

src/sectors/Footer/Footer.tsx

@@ -1,8 +1,10 @@
 import { TopFooter } from "./TopFooter/TopFooter";
 import { BottomFooter } from "./BottomFooter/BottomFooter";
+import { Newsletter } from "../../components/Newsletter/Newsletter";
 const Footer = () => {
   return (
     <div className="footer-wrapper">
+      <Newsletter></Newsletter>
       <TopFooter></TopFooter>
       <BottomFooter></BottomFooter>
     </div>

src/sectors/Footer/TopFooter/TopFooter.tsx

@@ -3,24 +3,20 @@ import { Doubts } from "../../../components/Doubts/Doubts";
 import { Contact } from "../../../components/Contact/Contact";
 import { Socials } from "../../../components/Socials/Socials";
 import { Whatsapp } from "../../../components/Whatsapp/Whatsapp";
+
 const TopFooter = () => {
   return (
-    <div className="top_footer">
-      <ul className="top_footer_itens">
-        <li className="top_footer_item">
-          <Institutional></Institutional>
-        </li>
-        <li className="top_footer_item">
-          <Doubts></Doubts>
-        </li>
-        <li className="top_footer_item">
-          <Contact></Contact>
-        </li>
-        <li className="top_footer_item">
-          <Socials></Socials>
-          <Whatsapp></Whatsapp>
-        </li>
-      </ul>
+    <div className="top_footer_wrapper">
+      <Institutional></Institutional>
+
+      <Doubts></Doubts>
+
+      <Contact></Contact>
+
+      <div className="top_footer_socials">
+        <Socials></Socials>
+        <Whatsapp></Whatsapp>
+      </div>
     </div>
   );
 };

src/styles/partials/footer.scss

@@ -1,3 +1,8 @@
 .footer-wrapper {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-top: 1px solid black;
+  margin-top: 81px;
 }

src/styles/partials/top_footer.scss

@@ -1,11 +1,13 @@
-.top_footer_itens {
+.top_footer_wrapper {
+  width: 100%;
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
-  flex-flow: row wrap;
-  padding: 0 0 0 0 !important;
+  justify-content: space-between;
+  padding: 50px 16px 64px 100px;
+  border-top: 1px solid black;
 }
-.top_footer_item {
+.top_footer_socials {
   display: flex;
   flex-direction: row;
+  gap: 50px;
 }