feat: creates footer component

src/App.tsx

@@ -6,6 +6,7 @@ import React from "react";
 
 // Components Imports
 import { Header } from "./components/Header";
+import { Footer } from "./components/Footer";
 
 // Styles Imports
 import "./styles/global.css";
@@ -19,6 +20,7 @@ function App() {
           <Route exact path="/" component={Home} />
         </Switch>
       </Router> */}
+      <Footer />
     </div>
   );
 }

src/components/Footer/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import {
+  AiOutlineInstagram,
+  AiOutlineTwitter,
+  AiFillLinkedin,
+  AiOutlineWhatsApp,
+} from "react-icons/ai";
+
+import "./styles.css";
+
+export function Footer() {
+  return (
+    <div className="footer-container">
+      <div className="footer-content">
+        <div>
+          <h3>FALE CONOSCO</h3>
+          <p>[email protected]</p>
+          <p>(61) 91234-4321</p>
+        </div>
+        <div>
+          <h3>MAPA DO SITE</h3>
+          <a href="#">Eventos</a>
+          <a href="#">Doações</a>
+          <a href="#">Adoções</a>
+          <a href="#">Seja um voluntário</a>
+        </div>
+        <div>
+          <h3>SIGA-NOS NAS REDES SOCIAIS</h3>
+          <div className="social-container">
+            <a href="#">
+              <AiOutlineInstagram size={35} color="var(--blue-light)" />
+            </a>
+            <a href="#">
+              <AiOutlineTwitter size={35} color="var(--blue-light)" />
+            </a>
+            <a href="#">
+              <AiFillLinkedin size={35} color="var(--blue-light)" />
+            </a>
+            <a href="#">
+              <AiOutlineWhatsApp size={35} color="var(--blue-light)" />
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="rights-reserved">
+        <p>Todos os direitos reservados - 2021</p>
+      </div>
+    </div>
+  );
+}

src/components/Footer/styles.css

@@ -0,0 +1,86 @@
+.footer-container {
+  width: 100%;
+  min-height: 9rem;
+  background-color: var(--blue-dark);
+
+  padding: 0 3.5rem;
+  padding-top: 2rem;
+  padding-bottom: 0.8rem;
+  margin-top: auto;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--blue-light);
+}
+
+.footer-container .footer-content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  height: 100%;
+  width: 100%;
+  max-width: 1200px;
+}
+
+.footer-container .footer-content div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: white;
+}
+.footer-container .footer-content div h3 {
+  margin-bottom: 0.5rem;
+}
+
+.footer-container .footer-content > div p {
+  font-size: 0.75rem;
+}
+
+.footer-container .footer-content > div p + p {
+  margin-top: 0.25rem;
+}
+.footer-container .footer-content div a {
+  color: white;
+  text-decoration: none;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  transition: filter 0.3s;
+}
+
+.footer-container .footer-content div a:hover {
+  filter: brightness(0.6);
+}
+
+.footer-container .footer-content div .social-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.footer-container .footer-content div .social-container a {
+  margin-right: 1.5rem;
+}
+
+.footer-container .rights-reserved {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 1200px;
+  padding-top: 0.8rem;
+  border-top: 1px solid var(--blue-light);
+  margin-top: 9rem;
+}
+
+.footer-container .rights-reserved p {
+  font-size: 0.9rem;
+  font-weight: 600;
+}