src/components/Socials/socials.module.scss

@@ -6,6 +6,7 @@
     li {
       margin-right: 10px;
     }
+    padding: 0 0 0 0;
   }
   a {
     text-decoration: none;
@@ -20,3 +21,7 @@
     }
   }
 }
+img {
+  width: 35px;
+  height: 35px;
+}

src/pages/Home.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Header } from "../sectors/Header/Header";
-
+import { Footer } from "../sectors/Footer/Footer";
 const Home = (prop: { titulo: string }) => {
   return (
     <div>
-      <Header></Header>
+      <Footer></Footer>
     </div>
   );
 };

src/sectors/Footer/Footer.tsx

@@ -0,0 +1,11 @@
+import { TopFooter } from "./TopFooter/TopFooter";
+
+const Footer = () => {
+  return (
+    <div className="footer-wrapper">
+      <TopFooter></TopFooter>
+    </div>
+  );
+};
+
+export { Footer };

src/sectors/Footer/TopFooter/TopFooter.tsx

@@ -0,0 +1,28 @@
+import { Institutional } from "../../../components/Institutional/Institutional";
+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>
+  );
+};
+
+export { TopFooter };

src/styles/main.scss

@@ -7,3 +7,4 @@
 @import "partials/navigation.scss";
 @import "partials/top_header.scss";
 @import "partials/bottom_header.scss";
+@import "partials/top_footer.scss";

src/styles/partials/footer.scss

@@ -0,0 +1,3 @@
+.footer-wrapper {
+  width: 100%;
+}

src/styles/partials/top_footer.scss

@@ -0,0 +1,11 @@
+.top_footer_itens {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  flex-flow: row wrap;
+  padding: 0 0 0 0 !important;
+}
+.top_footer_item {
+  display: flex;
+  flex-direction: row;
+}