src/components/Address/Address.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+import styles from "./address.module.scss";
 const Address = () => {
   return (
-    <p>
+    <p className={styles["endereco"]}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor
     </p>

src/components/Address/address.module.scss

@@ -0,0 +1,19 @@
+.endereco {
+  width: 234px;
+  height: 24px;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+  text-transform: capitalize;
+  color: white;
+  margin: 0 0 0 0;
+
+  @media screen and (min-width: 2500px) {
+    width: 467px;
+    height: 47px;
+    font-size: 20px;
+    line-height: 23px;
+  }
+}

src/components/Caminhos/caminhos.module.scss

@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: row;
   gap: 5px;
+  align-items: baseline;
+  margin: 30px 0 0 100px;
   p {
     font-family: "Roboto";
     font-style: normal;

src/components/DevelopedBy/developedBy.module.scss

@@ -3,6 +3,27 @@
   flex-direction: row;
   align-items: center;
   p {
-    margin-right: 30px;
+    display: flex;
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+
+    text-transform: capitalize;
+    margin-right: 13px;
+    color: white;
+    margin: 0 13px 0 0;
+    @media screen and (min-width: 2500px) {
+      font-size: 20px;
+    }
+  }
+  img {
+    width: 28.66px;
+    height: 15.65px;
+    @media screen and (min-width: 2500px) {
+      width: 34.15px;
+      height: 23.87px;
+    }
   }
 }

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/components/Payments/Payments.tsx

@@ -38,7 +38,7 @@ const Payments = () => {
 };
 
 const VtexPci = () => {
-  return <img src={vtexImg} alt="vtx Pci" />;
+  return <img className={styles["paymentsPci"]} src={vtexImg} alt="vtx Pci" />;
 };
 
 export { Payments, VtexPci };

src/components/Payments/payments.module.scss

@@ -1,4 +1,25 @@
 .paymentsList {
   display: flex;
   flex-direction: row;
+  gap: 12px;
+  padding: 0 0 0 0;
+}
+.paymentsItem {
+  img {
+    width: 35px;
+    height: 20.2px;
+    @media screen and (min-width: 2500px) {
+      width: 70px;
+      height: 40.25px;
+    }
+  }
+}
+
+.paymentsPci {
+  width: 54.61px;
+  height: 34px;
+  @media screen and (min-width: 2500px) {
+    width: 106px;
+    height: 66px;
+  }
 }

src/components/PoweredBy/poweredBy.module.scss

@@ -3,6 +3,27 @@
   flex-direction: row;
   align-items: center;
   p {
-    margin-right: 30px;
+    display: flex;
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+
+    text-transform: capitalize;
+    margin-right: 13px;
+    color: white;
+    margin: 0 13px 0 0;
+    @media screen and (min-width: 2500px) {
+      font-size: 20px;
+    }
+  }
+  img {
+    width: 44.92px;
+    height: 16px;
+    @media screen and (min-width: 2500px) {
+      width: 84.22px;
+      height: 30px;
+    }
   }
 }

src/components/Socials/Socials.tsx

@@ -11,19 +11,29 @@ const Socials = () => {
     <div className={styles["socials-wrapper"]}>
       <ul className={styles["socialsList"]}>
         <li className={styles["socials-item"]}>
-          <img src={facebookImg} alt="Facebook" />
+          <a href="">
+            <img src={facebookImg} alt="Facebook" />
+          </a>
         </li>
         <li className={styles["socials-item"]}>
-          <img src={instagramImg} alt="Instagram" />
+          <a href="">
+            <img src={instagramImg} alt="Instagram" />
+          </a>
         </li>
         <li className={styles["socials-item"]}>
-          <img src={twitterImg} alt="Twitter" />
+          <a href="">
+            <img src={twitterImg} alt="Twitter" />
+          </a>
         </li>
         <li className={styles["socials-item"]}>
-          <img src={youtubeImg} alt="Youtube" />
+          <a href="">
+            <img src={youtubeImg} alt="Youtube" />
+          </a>
         </li>
         <li className={styles["socials-item"]}>
-          <img src={linkedinImg} alt="Linkedin" />
+          <a href="">
+            <img src={linkedinImg} alt="Linkedin" />
+          </a>
         </li>
       </ul>
       <a className={styles["siteLink"]} href="/">

src/components/Socials/socials.module.scss

@@ -20,8 +20,8 @@
       line-height: 32.81px;
     }
   }
-}
-img {
-  width: 35px;
-  height: 35px;
+  img {
+    width: 35px;
+    height: 35px;
+  }
 }

src/components/Whatsapp/Whatsapp.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import whatsappImg from "./assets/image/whatsapp.png";
+import styles from "./whatsapp.module.scss";
 
 const Whatsapp = () => {
   return (
-    <div>
-      <img src={whatsappImg} alt="Whatsapp" />
+    <div className={styles["whatsapp-wrapper"]}>
+      <a href="https://wa.me/11994338825" target="_blank">
+        <img src={whatsappImg} alt="Whatsapp" />
+      </a>
     </div>
   );
 };

src/components/Whatsapp/whatsapp.module.scss

@@ -0,0 +1,10 @@
+.whatsapp-wrapper {
+  img {
+    width: 34px;
+    height: 34px;
+    @media screen and (min-width: 2500px) {
+      width: 66px;
+      height: 66px;
+    }
+  }
+}

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/BottomFooter/BottomFooter.tsx

@@ -0,0 +1,23 @@
+import { Address } from "../../../components/Address/Address";
+import { Payments } from "../../../components/Payments/Payments";
+import { VtexPci } from "../../../components/Payments/Payments";
+import { PoweredBy } from "../../../components/PoweredBy/PoweredBy";
+import { DevelopedBy } from "../../../components/DevelopedBy/DevelopedBy";
+const BottomFooter = () => {
+  return (
+    <div className="bottom_footer">
+      <Address></Address>
+      <div className="bottom_footer_item pagamentos">
+        <Payments></Payments>
+        <p>|</p>
+        <VtexPci></VtexPci>
+      </div>
+      <div className="bottom_footer_item creation">
+        <PoweredBy></PoweredBy>
+        <DevelopedBy></DevelopedBy>
+      </div>
+    </div>
+  );
+};
+
+export { BottomFooter };

src/sectors/Footer/Footer.tsx

@@ -1,9 +1,12 @@
 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/main.scss

@@ -8,3 +8,5 @@
 @import "partials/top_header.scss";
 @import "partials/bottom_header.scss";
 @import "partials/top_footer.scss";
+@import "partials/footer.scss";
+@import "partials/bottom_footer.scss";

src/styles/partials/bottom_footer.scss

@@ -0,0 +1,30 @@
+.bottom_footer {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  background: black;
+  margin: 0 auto;
+  padding: 20px 100px;
+  justify-content: space-between;
+}
+.bottom_footer_itens {
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+}
+
+.pagamentos {
+  display: flex;
+  flex-direction: row;
+
+  p {
+    color: white;
+  }
+  gap: 5px;
+}
+.creation {
+  display: flex;
+  flex-direction: row;
+  gap: 13px;
+}

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;
 }