From 148f4dff0c4a6357313fbf556ed5ae393438baae Mon Sep 17 00:00:00 2001
From: ThiagoDuutra <thiagoduutra01@gmail.com>
Date: Mon, 9 Jan 2023 16:53:22 -0300
Subject: [PATCH] feat: Cria footer newsletter

---
 .../Components/Footer/FooterDesktop/index.tsx | 26 ++++++++++++++++-
 .../Components/Footer/FooterTablets/index.tsx | 24 +++++++++++++++
 .../Components/Footer/FooterTablets/style.css |  4 +++
 react-academy/src/Components/Footer/style.css | 12 ++++++++
 .../src/Components/Newsletter/index.tsx       | 16 ++--------
 .../src/Components/Newsletter/style.css       | 29 +++++++++++++++++--
 6 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/react-academy/src/Components/Footer/FooterDesktop/index.tsx b/react-academy/src/Components/Footer/FooterDesktop/index.tsx
index a8cc78d..519633f 100644
--- a/react-academy/src/Components/Footer/FooterDesktop/index.tsx
+++ b/react-academy/src/Components/Footer/FooterDesktop/index.tsx
@@ -1,4 +1,4 @@
-// import React, { useState, useEffect, useCallback } from "react";
+import React from "react";
 import { NavLink } from "react-router-dom";
 import Facebook from "../ImagesFooter/facebook-icon.png";
 import Instagram from "../ImagesFooter/instagram-icon.png";
@@ -15,6 +15,8 @@ import Boleto from "../ImagesFooter/boleto-icon.png";
 import VtexCert from "../ImagesFooter/vtexCert-icon.png";
 import VtexIcon from "../ImagesFooter/vtex-icon.png";
 import M3 from "../ImagesFooter/m3-icon.png";
+import Wpp from "../ImagesFooter/whatsapp.png";
+import Top from "../ImagesFooter/top.png";
 
 const FooterDesktop = () => {
   return (
@@ -296,6 +298,28 @@ const FooterDesktop = () => {
           </div>
         </div>
       </section>
+
+      <div className="container-redes">
+        <div className="footer-newsletter-whatsapp">
+          <a
+            href="https://api.whatsapp.com/send?phone=5599999999999"
+            target="_blank"
+            title="WhatsApp"
+            rel="noreferrer noopener"
+          >
+            <img src={Wpp} alt="WhatsApp" />
+          </a>
+        </div>
+
+        <div className="footer-newsletter-scrollUp">
+          <i
+            onClick={() => window.scroll({ top: 0, behavior: "smooth" })}
+            className="footer-newsletter-scrollUp-icon"
+          >
+            <img src={Top} alt="ScrollUp" />
+          </i>
+        </div>
+      </div>
     </footer>
   );
 };
diff --git a/react-academy/src/Components/Footer/FooterTablets/index.tsx b/react-academy/src/Components/Footer/FooterTablets/index.tsx
index 97eddc6..d758c7c 100644
--- a/react-academy/src/Components/Footer/FooterTablets/index.tsx
+++ b/react-academy/src/Components/Footer/FooterTablets/index.tsx
@@ -15,6 +15,8 @@ import Boleto from "../ImagesFooter/boleto-icon.png";
 import VtexCert from "../ImagesFooter/vtexCert-icon.png";
 import VtexIcon from "../ImagesFooter/vtex-icon.png";
 import M3 from "../ImagesFooter/m3-icon.png";
+import Wpp from "../ImagesFooter/whatsapp.png";
+import Top from "../ImagesFooter/top.png";
 import "./style.css";
 
 const FooterTablets = () => {
@@ -347,6 +349,28 @@ const FooterTablets = () => {
           </div>
         </div>
       </section>
+
+      <div className="container-redes">
+        <div className="footer-newsletter-whatsapp">
+          <a
+            href="https://api.whatsapp.com/send?phone=5599999999999"
+            target="_blank"
+            title="WhatsApp"
+            rel="noreferrer noopener"
+          >
+            <img src={Wpp} alt="WhatsApp" />
+          </a>
+        </div>
+
+        <div className="footer-newsletter-scrollUp">
+          <i
+            onClick={() => window.scroll({ top: 0, behavior: "smooth" })}
+            className="footer-newsletter-scrollUp-icon"
+          >
+            <img src={Top} alt="ScrollUp" />
+          </i>
+        </div>
+      </div>
     </footer>
   );
 };
diff --git a/react-academy/src/Components/Footer/FooterTablets/style.css b/react-academy/src/Components/Footer/FooterTablets/style.css
index f600292..a9121ce 100644
--- a/react-academy/src/Components/Footer/FooterTablets/style.css
+++ b/react-academy/src/Components/Footer/FooterTablets/style.css
@@ -43,6 +43,10 @@
     order: 3;
     margin-bottom: 15px;
   }
+
+  footer .container-redes {
+    bottom: 4%;
+  }
 }
 
 @media screen and (max-width: 430px) {
diff --git a/react-academy/src/Components/Footer/style.css b/react-academy/src/Components/Footer/style.css
index f74241d..1683a16 100644
--- a/react-academy/src/Components/Footer/style.css
+++ b/react-academy/src/Components/Footer/style.css
@@ -1,3 +1,7 @@
+.footer-desktop {
+  position: relative;
+}
+
 .footer-desktop__columns {
   display: grid;
   grid-template-columns: repeat(4, max-content);
@@ -131,3 +135,11 @@
   height: 15px;
   margin: 0 13px;
 }
+
+.container-redes {
+  text-align: end;
+  position: fixed;
+  bottom: 12%;
+  right: 0;
+  margin-right: 16px;
+}
diff --git a/react-academy/src/Components/Newsletter/index.tsx b/react-academy/src/Components/Newsletter/index.tsx
index da5fdc6..d0d168f 100644
--- a/react-academy/src/Components/Newsletter/index.tsx
+++ b/react-academy/src/Components/Newsletter/index.tsx
@@ -1,19 +1,9 @@
+import React from "react";
+import CustomForm from "../CustomForm";
 import "./style.css";
 
 const Newsletter = () => {
-  return (
-    <div className="footer-newsletter">
-      <div className="footer-newsletter__input">
-        <label className="footer-newsletter__title" htmlFor="email">
-          ASSINE NOSSA NEWSLETTER
-        </label>
-        <input name="email" type="email" placeholder="E-mail" />
-      </div>
-      <div className="btn-submit">
-        <button type="submit">ENVIAR</button>
-      </div>
-    </div>
-  );
+  return <CustomForm />;
 };
 
 export default Newsletter;
diff --git a/react-academy/src/Components/Newsletter/style.css b/react-academy/src/Components/Newsletter/style.css
index e7e27ca..ad524eb 100644
--- a/react-academy/src/Components/Newsletter/style.css
+++ b/react-academy/src/Components/Newsletter/style.css
@@ -3,6 +3,7 @@
   justify-content: center;
   border-top: 1px solid var(--color-black);
   border-bottom: 1px solid var(--color-black);
+  position: relative;
 }
 
 .footer-newsletter__title {
@@ -12,18 +13,35 @@
   line-height: 21px;
   letter-spacing: 1.5px;
   margin-top: 16px;
+  margin-bottom: 8px;
+  width: 340px;
 }
 
 .footer-newsletter__input {
   display: flex;
   flex-direction: column;
   margin-bottom: 16px;
+  position: relative;
 }
 
 .footer-newsletter__input input {
   padding: 13px 16px;
   border: 1px solid var(--color-gray-300);
   border-radius: 4px;
+  outline: 0;
+}
+
+.footer-newsletter__input input.invalid {
+  border-color: var(--color-red);
+}
+
+.footer-newsletter__errorMsg {
+  font-family: "Roboto", sans-serif;
+  color: var(--color-red);
+  font-size: 14px;
+  font-weight: 500;
+  position: absolute;
+  top: 100%;
 }
 
 .btn-submit {
@@ -45,6 +63,7 @@
   border-radius: 4px;
   margin-bottom: 16px;
   margin-left: 8px;
+  cursor: pointer;
 }
 
 @media screen and (max-width: 1024px) {
@@ -56,14 +75,20 @@
 
   .footer-newsletter__title {
     margin: 16px 16px 0 16px;
+    font-size: 14px;
+    line-height: 16px;
   }
 
   .footer-newsletter__input input {
-    margin: 16px 16px 0 16px;
+    margin: 16px 16px 0px 16px;
   }
 
   .btn-submit button {
     width: 100%;
-    margin: 0 16px 16px 16px;
+    margin: 10px 16px 16px 16px;
+  }
+
+  .footer-newsletter__errorMsg {
+    margin-left: 16px;
   }
 }
-- 
2.34.1