Initial commit

src/components/FloatingButton/FloatingButton.module.css

@@ -0,0 +1,23 @@
+/* Scroll to Top Button */
+.scrollToTopButton {
+  animation: fadeInUp 0.3s ease-out;
+  transition: all 0.3s ease;
+}
+
+.scrollToTopButton:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Dark theme scroll to top button */
+:global(.darkApp) .scrollToTopButton {
+  background-color: var(--primary) !important;
+  border-color: var(--primary) !important;
+  color: #000000 !important;
+}
+
+:global(.darkApp) .scrollToTopButton:hover {
+  background-color: #ffd633 !important;
+  border-color: #ffd633 !important;
+  box-shadow: 0 6px 16px rgba(255, 198, 0, 0.3) !important;
+}

src/components/FloatingButton/FloatingButton.tsx

@@ -0,0 +1,53 @@
+import { Button, Grid } from "antd";
+import TopIcon from "components/Icons/TopIcon";
+import { useScrollHandler } from "contexts/ScrollHandlerContext";
+import { useCallback } from "react";
+import { useAppSelector } from "redux/hooks";
+import { colors } from "ThemeConstants";
+import styles from "./FloatingButton.module.css";
+
+const { useBreakpoint } = Grid;
+
+export function FloatingButton() {
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { themeName } = useAppSelector((state) => state.theme);
+  const { xs } = useBreakpoint();
+  const isMobile = xs;
+
+  const { showScrollTop } = useScrollHandler();
+
+  const scrollToTop = useCallback(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }, []);
+
+  return (
+    <>
+      {/* Floating Scroll to Top Button */}
+      {showScrollTop && (
+        <Button
+          type="primary"
+          shape="circle"
+          size={isMobile ? "large" : "large"}
+          icon={<TopIcon />}
+          onClick={scrollToTop}
+          className={`${styles.scrollToTopButton}`}
+          style={{
+            position: "fixed",
+            bottom: isMobile ? "100px" : "120px",
+            right: isRTL ? "auto" : isMobile ? "20px" : "32px",
+            left: isRTL ? (isMobile ? "20px" : "32px") : "auto",
+            zIndex: 1000,
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+            backgroundColor: themeName === "dark" ? colors.primary : colors.primary,
+            borderColor: themeName === "dark" ? colors.primary : colors.primary,
+            width: isMobile ? 48 : 56,
+            height: isMobile ? 48 : 56,
+          }}
+        />
+      )}
+    </>
+  );
+}