Add ScrollToTop component for improved navigation experience

src/components/ScrollToTop.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+function ScrollToTop() {
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [pathname])
+
+  return null
+}
+
+export default ScrollToTop

src/main.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import './index.css'
 import './i18n'
 import { ThemeProvider } from './contexts/ThemeContext'
+import ScrollToTop from './components/ScrollToTop'
 import App from './App.tsx'
 import Friends from './pages/Friends.tsx'
 import Blog from './pages/Blog.tsx'
@@ -13,6 +14,7 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ThemeProvider>
       <Router>
+        <ScrollToTop />
         <Routes>
           <Route path="/" element={<App />} />
           <Route path="/friends" element={<Friends />} />