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,13 @@
+.endereco {
+  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) {
+    font-size: 20px;
+  }
+}

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: 44.92px;
+    height: 16px;
+    @media screen and (min-width: 2500px) {
+      width: 84.22px;
+      height: 30px;
+    }
   }
 }

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,15 @@
 .paymentsList {
   display: flex;
   flex-direction: row;
+  gap: 12px;
+}
+.paymentsItem {
+}
+img {
+  width: 35px;
+  height: 20.2px;
+}
+.paymentsPci {
+  width: 54.61px;
+  height: 34px;
 }

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

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

src/sectors/Footer/Footer.tsx

@@ -1,9 +1,10 @@
 import { TopFooter } from "./TopFooter/TopFooter";
-
+import { BottomFooter } from "./BottomFooter/BottomFooter";
 const Footer = () => {
   return (
     <div className="footer-wrapper">
       <TopFooter></TopFooter>
+      <BottomFooter></BottomFooter>
     </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,18 @@
+.bottom_footer {
+  display: flex;
+  flex-direction: row;
+  background: black;
+}
+.bottom_footer_itens {
+  display: flex;
+  flex-direction: row;
+}
+.pagamentos {
+  display: flex;
+  flex-direction: row;
+
+  p {
+    color: white;
+  }
+  gap: 5px;
+}