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 = () => { + +
+
+ + WhatsApp + +
+ +
+ window.scroll({ top: 0, behavior: "smooth" })} + className="footer-newsletter-scrollUp-icon" + > + ScrollUp + +
+
); }; 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 = () => { + +
+
+ + WhatsApp + +
+ +
+ window.scroll({ top: 0, behavior: "smooth" })} + className="footer-newsletter-scrollUp-icon" + > + ScrollUp + +
+
); }; 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 ( -
-
- - -
-
- -
-
- ); + return ; }; 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; } }