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