+
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index c34ef2e..3a9c418 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -2,12 +2,14 @@ import React from "react";
import styles from "../styles/main.module.scss";
import { Newsletter } from "./Newsletter";
+import { ScrollPage } from "./ScrollPage";
const Main = () => {
return (
+
);
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index c5c1da5..3949e27 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
import "./Modal.scss";
import close from "../assets/svgs/close-icon.svg";
diff --git a/src/components/ScrollPage.tsx b/src/components/ScrollPage.tsx
new file mode 100644
index 0000000..2c5c71e
--- /dev/null
+++ b/src/components/ScrollPage.tsx
@@ -0,0 +1,27 @@
+import { useState } from "react";
+import styles from "../styles/main.module.scss";
+import whatsapp from "../assets/svgs/whatsapp.svg";
+import seta from "../assets/svgs/up-arrow.svg";
+
+const ScrollPage = () => {
+ const [pageYPosition, setPageYPosition] = useState(0);
+
+ function getPageYAfterScroll() {
+ setPageYPosition(window.scrollY);
+ }
+
+ window.addEventListener("scroll", getPageYAfterScroll);
+
+ return (
+
+
+ {pageYPosition > 600 && (
+
+
+
+ )}
+
+ );
+};
+
+export { ScrollPage };
diff --git a/src/styles/partials/Footer.module.scss b/src/styles/partials/Footer.module.scss
index 9ab2793..bc3f7d0 100644
--- a/src/styles/partials/Footer.module.scss
+++ b/src/styles/partials/Footer.module.scss
@@ -67,30 +67,6 @@
color: $black3;
}
}
-
- .volta-pag {
- position: absolute;
- top: 41px;
- right: 16px;
- display: flex;
- flex-direction: column;
- gap: 5px;
-
- &__link {
- width: 34px;
- height: 34px;
- border-radius: 50%;
- background: $gray2;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .go-to-top {
- width: 12px;
- height: 25px;
- }
- }
- }
}
&__bottom {
@@ -190,12 +166,6 @@
}
}
- .volta-pag {
- bottom: -96px;
- z-index: 1;
- top: auto;
- }
-
&__bottom {
justify-content: flex-start;
align-items: flex-start;
@@ -205,7 +175,6 @@
&-text {
margin-bottom: 15px;
- max-width: 354px;
}
&-central {
@@ -265,17 +234,6 @@
width: 66px;
top: 26px;
}
-
- .volta-pag {
- &__link {
- width: 66px;
- height: 66px;
-
- .go-to-top {
- width: 24px;
- }
- }
- }
}
&__bottom {
diff --git a/src/styles/partials/MainContent.module.scss b/src/styles/partials/MainContent.module.scss
index 7b573c7..38664e0 100644
--- a/src/styles/partials/MainContent.module.scss
+++ b/src/styles/partials/MainContent.module.scss
@@ -1,4 +1,6 @@
.main-wrapper {
+ position: relative;
+ height: 1200px;
&__newsletter {
display: flex;
flex-direction: column;
@@ -63,6 +65,35 @@
}
}
}
+
+ .volta-pag {
+ position: fixed;
+ bottom: 20px;
+ right: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ z-index: 1;
+
+ .whatsapp-icon {
+ width: 34px;
+ }
+
+ &__link {
+ width: 34px;
+ height: 34px;
+ border-radius: 50%;
+ background: $gray2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .go-to-top {
+ width: 12px;
+ height: 25px;
+ }
+ }
+ }
}
@media screen and (max-width: 1024px) {
@@ -134,5 +165,19 @@
}
}
}
+
+ .volta-pag {
+ .whatsapp-icon {
+ width: 66px;
+ }
+ &__link {
+ width: 66px;
+ height: 66px;
+
+ .go-to-top {
+ width: 24px;
+ }
+ }
+ }
}
}