Scroll to top button added to the application

src/components/ScrollToTop.jsx

@@ -0,0 +1,36 @@
+// components/ScrollToTopButton.tsx
+import { useEffect, useState } from "react";
+import image from "../assets/ScrollToTop.png"; 
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setIsVisible(window.scrollY > 300);
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    // Scroll to top button
+    <button
+      onClick={scrollToTop}
+      className="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-[#A0A0FF] text-white shadow-lg hover:bg-violet-700 transition-colors duration-300"
+      aria-label="Scroll to top"
+    >
+      {/* Up arrow image */}
+      <img src={image} alt="" className="h-8 w-8 hover:invert-100" />
+    </button>
+  );
+};
+
+export default ScrollToTopButton;

src/components/ui/Hero.jsx

@@ -1,6 +1,7 @@
 import { motion } from "framer-motion";
 import { useState } from "react";
 import HeroAnimation from "../animations/HeroAnimation";
+import ScrollToTopButton from "../ScrollToTop";
 import { useNavigate } from "react-router-dom";
 
 function Hero() {
@@ -33,6 +34,9 @@ function Hero() {
 
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
+      {/* scroll to top button */}
+      <ScrollToTopButton />
+
       {/* top animation */}
       <HeroAnimation className="absolute top-[5%] right-[2%] sm:top-[8%] sm:right-[4%] lg:top-[10%] lg:right-[5%] scale-50 sm:scale-75 lg:scale-100" />
 

src/pages/AboutPage.jsx

@@ -10,6 +10,7 @@ import {
   FiHeart,
 } from "react-icons/fi";
 import Footer from "../components/Footer";
+import ScrollToTopButton from "../components/ScrollToTop"
 
 //? Scroll to top on mount
 const AboutPage = () => {
@@ -63,6 +64,9 @@ const AboutPage = () => {
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-[rgb(20,20,48)] via-[rgb(28,28,64)] to-[rgb(15,15,35)] text-white">
+      {/* Scroll to Top Button */}
+      <ScrollToTopButton />
+
       {/* Hero Section */}
       <section className="px-4 sm:px-6 lg:px-8 py-24 md:py-15 text-center bg-gradient-to-b from-[rgba(160,160,255,0.1)] to-transparent">
         <motion.div

src/pages/FeaturesPage.jsx

@@ -19,6 +19,7 @@ import {
 import Footer from "../components/Footer";
 import { useNavigate } from "react-router-dom";
 import { useEffect } from "react";
+import ScrollToTopButton from "../components/ScrollToTop"
 
 const FeaturesPage = () => {
   useEffect(() => {
@@ -153,6 +154,8 @@ const FeaturesPage = () => {
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-white">
+      {/* Scroll to Top Button */}
+      <ScrollToTopButton />
       {/* Hero Section */}
       <section className="relative px-4 sm:px-6 lg:px-8 py-24 md:py-32 text-center overflow-hidden">
         {/* Background decoration */}