Added custom hooks for scroll issues in all pages, implemented scroll…

… to-top and restoration

src/hooks/useScrollRestoration.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const useScrollRestoration = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const storedPosition = sessionStorage.getItem('scrollPosition');
+    if (storedPosition && location.pathname === '/') {
+      window.scrollTo(0, parseInt(storedPosition, 10));
+    }
+
+    return () => {
+      if (location.pathname === '/') {
+        sessionStorage.setItem('scrollPosition', window.scrollY);
+      }
+    };
+  }, [location, navigate]);
+};
+
+export default useScrollRestoration;

src/hooks/useScrollToTop.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const useScrollToTop = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      window.scrollTo(0, 0);
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [location]);
+};
+
+export default useScrollToTop;

src/pages/ComponentOverview.jsx

@@ -2,9 +2,11 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import { Tab, Navbar, Footer } from '../components';
 import { elementsData, templatesData } from '../constants';
+import useScrollToTop from '../hooks/useScrollToTop';
 import { motion } from 'framer-motion';
 
 const ComponentOverview = () => {
+  useScrollToTop();
   const { type } = useParams();
 
   const elementData = elementsData[type];

src/pages/Components.jsx

@@ -1,9 +1,12 @@
 import { motion } from 'framer-motion';
 import React from 'react';
+import useScrollRestoration from '../hooks/useScrollRestoration';
 import { Navbar, Card, Footer } from '../components';
 import { elementsData, templatesData } from '../constants';
 
 const Components = () => {
+  useScrollRestoration();
+
   return (
     <motion.div
       initial={{ opacity: 0 }}

src/pages/Home.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Navbar, Hero, SampleCard, SampleCart, SampleChat, SampleFooter, SampleLogin, SampleModal, Footer } from '../components';
+import useScrollToTop from '../hooks/useScrollToTop';
+import { Navbar, Hero, SampleCard, SampleCart, SampleChat, SampleLogin, SampleModal, Footer } from '../components';
 
 const Home = () => {
+  useScrollToTop();
+
   return (
     <motion.div
       initial={{ opacity: 0 }}