From 873fd5717c777b5c766dae8cdcc721c7a2a1b98b Mon Sep 17 00:00:00 2001
From: dewansh <dewan@example.com>
Date: Mon, 4 Aug 2025 19:57:30 +0530
Subject: [PATCH] Add BackToTop button with fade-in animation and integrate
 into App

---
 src/App.jsx                  |  2 ++
 src/components/BackToTop.jsx | 38 ++++++++++++++++++++++++++++++++++++
 src/index.css                | 38 ++++++++++++++++++++++++++++++++++++
 3 files changed, 78 insertions(+)
 create mode 100644 src/components/BackToTop.jsx

diff --git a/src/App.jsx b/src/App.jsx
index ea7d053..7b37f0e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import Services from "./pages/Services"
 import Contact from "./pages/Contact"
 import About from "./pages/About"
 import "./App.css"
+import BackToTop from "./components/BackToTop"
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
             <Route path="/contact" element={<Contact />} />
           </Routes>
         </main>
+        <BackToTop />
         <Footer />
       </div>
     </Router>
diff --git a/src/components/BackToTop.jsx b/src/components/BackToTop.jsx
new file mode 100644
index 0000000..340b068
--- /dev/null
+++ b/src/components/BackToTop.jsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+
+const BackToTop = () => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisible = () => {
+      setVisible(window.scrollY > 205);
+    };
+
+    window.addEventListener('scroll', toggleVisible);
+    return () => window.removeEventListener('scroll', toggleVisible);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <button
+      className={`back-to-top ${visible ? 'visible' : ''}`}
+      onClick={scrollToTop}
+      aria-label="Back to top"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="40"
+        height="40"
+        fill="white"
+        viewBox="0 0 24 24"
+      >
+        <path d="M12 5.5l-6.5 6.5 1.4 1.4L12 8.3l5.1 5.1 1.4-1.4L12 5.5z" />
+      </svg>
+    </button>
+  );
+};
+
+export default BackToTop;
diff --git a/src/index.css b/src/index.css
index 9327e8e..6f5c67b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -178,3 +178,41 @@ html {
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
+.back-to-top {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  padding-top: 8px;
+  background-color: #84cc16;
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 999;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(20px);
+}
+
+.back-to-top.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.back-to-top:hover {
+  transition: scale 0.3s ease-in-out;
+  transform: scale(1.1);
+}
+
+.back-to-top svg {
+  width: 44px;
+  height: 44px;
+  fill: white;
+}