fix: implement scroll-to-top behavior for about navigation

frontend/src/App.tsx

@@ -1,5 +1,11 @@
 import { lazy, Suspense, useEffect, useRef } from "react";
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import {
+  BrowserRouter,
+  Navigate,
+  Route,
+  Routes,
+  ScrollRestoration,
+} from "react-router-dom";
 import { ProtectedRoute, PublicRoute } from "./components/RouteGuards";
 import SplashScreen from "./components/SplashScreen";
 import { ROUTES } from "./config/routes";

frontend/src/pages/About.tsx

@@ -19,7 +19,7 @@ import {
 } from "@phosphor-icons/react";
 import { ReactLenis } from "lenis/react";
 import { AnimatePresence, motion, useScroll, useTransform } from "motion/react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import stamp from "../assets/envelope/stamp.png";
 import Logo from "../components/Logo.tsx";
 import { Modal } from "../components/ui/Modal";
@@ -47,6 +47,9 @@ function HorizontalScroll({ children }: { children: React.ReactNode }) {
 }
 
 export default function About() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <ReactLenis root options={{ lerp: 0.1, duration: 1.5, smoothWheel: true }}>
       <div className="flex flex-col">