From 312ac6b9f0a60b7ae31b0c674cfff6e4c76dd758 Mon Sep 17 00:00:00 2001
From: dimondkudzai <diamondkudzai70@gmail.com>
Date: Tue, 12 Aug 2025 22:32:31 +0200
Subject: [PATCH] feat: Add a Jump to top button for Terms page

---
 .../src/components/UI/JumbToTop/JumbToTop.jsx | 23 +++++++++++++++++++
 .../UI/JumbToTop/JumbToTop.module.scss        | 15 ++++++++++++
 .../starkgate/web/src/components/UI/index.jsx |  1 +
 .../starkgate/web/src/routes/Terms/Terms.jsx  |  6 +++--
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 workspace/apps/starkgate/web/src/components/UI/JumbToTop/JumbToTop.jsx
 create mode 100644 workspace/apps/starkgate/web/src/components/UI/JumbToTop/JumbToTop.module.scss

diff --git a/workspace/apps/starkgate/web/src/components/UI/JumbToTop/JumbToTop.jsx b/workspace/apps/starkgate/web/src/components/UI/JumbToTop/JumbToTop.jsx
new file mode 100644
index 00000000..357e6abe
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/JumbToTop/JumbToTop.jsx
@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+import styles from './JumpToTop.module.scss';
+
+export const JumpToTop = () => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setVisible(window.scrollY > 300);
+    window.addEventListener('scroll', onScroll);
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <button
+      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+      className={styles.jumpToTop}
+    >
+      ↑ Top
+    </button>
+  );
+};
\ No newline at end of file
diff --git a/workspace/apps/starkgate/web/src/components/UI/JumbToTop/JumbToTop.module.scss b/workspace/apps/starkgate/web/src/components/UI/JumbToTop/JumbToTop.module.scss
new file mode 100644
index 00000000..00213eed
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/JumbToTop/JumbToTop.module.scss
@@ -0,0 +1,15 @@
+@import '../../../index';
+
+.jumpToTop {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  background-color: $--color-granite-gray;
+  color: $--color-white;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 4px;
+  z-index: 9999;
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+}
\ No newline at end of file
diff --git a/workspace/apps/starkgate/web/src/components/UI/index.jsx b/workspace/apps/starkgate/web/src/components/UI/index.jsx
index 95f8e63a..8489f639 100644
--- a/workspace/apps/starkgate/web/src/components/UI/index.jsx
+++ b/workspace/apps/starkgate/web/src/components/UI/index.jsx
@@ -53,3 +53,4 @@ export * from './Link/Link';
 export * from './Image/Image';
 export * from './SideButton/SideButton';
 export * from './TermsDisclaimer/TermsDisclaimer';
+export * from './JumbToTop/JumbToTop';
\ No newline at end of file
diff --git a/workspace/apps/starkgate/web/src/routes/Terms/Terms.jsx b/workspace/apps/starkgate/web/src/routes/Terms/Terms.jsx
index ca213ce9..f28e2c70 100644
--- a/workspace/apps/starkgate/web/src/routes/Terms/Terms.jsx
+++ b/workspace/apps/starkgate/web/src/routes/Terms/Terms.jsx
@@ -1,7 +1,8 @@
 import React, {useEffect} from 'react';
 
+
 import {useEnvs, useHeadTranslation, useTermsTracking, useTermsTranslation, useTitle} from '@hooks';
-import {FullScreenContainer} from '@ui';
+import {FullScreenContainer, JumbToTop} from '@ui';
 
 import styles from './Terms.module.scss';
 import TermsOfUse from './TermsOfUse';
@@ -22,6 +23,7 @@ export const Terms = () => {
       <div className={styles.terms}>
         <Header />
         <div className={styles.text}>{TermsOfUse}</div>
+        <JumpToTop />
       </div>
     </FullScreenContainer>
   );
@@ -36,4 +38,4 @@ const Header = () => {
       <div className={styles.title}>{titleTxt}</div>
     </div>
   );
-};
+};
\ No newline at end of file