fix: tools by category scroll

.idea/workspace.xml

@@ -4,9 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: prettify json">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: sum">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/sum/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/sum/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -334,15 +334,8 @@
       <workItem from="1741475969294" duration="4215000" />
       <workItem from="1741494053121" duration="178000" />
       <workItem from="1741537936314" duration="1294000" />
-      <workItem from="1741539602311" duration="4370000" />
+      <workItem from="1741539602311" duration="4557000" />
-    </task>
+      <workItem from="1741547560596" duration="374000" />
-    <task id="LOCAL-00110" summary="feat: funding">
-      <option name="closed" value="true" />
-      <created>1740460017596</created>
-      <option name="number" value="00110" />
-      <option name="presentableId" value="LOCAL-00110" />
-      <option name="project" value="LOCAL" />
-      <updated>1740460017596</updated>
     </task>
     <task id="LOCAL-00111" summary="feat: ui changes">
       <option name="closed" value="true" />
@@ -728,7 +721,15 @@
       <option name="project" value="LOCAL" />
       <updated>1741543732607</updated>
     </task>
-    <option name="localTasksCounter" value="159" />
+    <task id="LOCAL-00159" summary="refactor: sum">
+      <option name="closed" value="true" />
+      <created>1741544086061</created>
+      <option name="number" value="00159" />
+      <option name="presentableId" value="LOCAL-00159" />
+      <option name="project" value="LOCAL" />
+      <updated>1741544086061</updated>
+    </task>
+    <option name="localTasksCounter" value="160" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -775,7 +776,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: json pretty" />
     <MESSAGE value="style: tool categories" />
     <MESSAGE value="chore: compute only if value" />
     <MESSAGE value="chore: remove prettify test" />
@@ -800,7 +800,8 @@
     <MESSAGE value="feat: missing tools" />
     <MESSAGE value="refactor: use ToolContent" />
     <MESSAGE value="fix: prettify json" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: prettify json" />
+    <MESSAGE value="refactor: sum" />
+    <option name="LAST_COMMIT_MESSAGE" value="refactor: sum" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

src/pages/tools-by-category/index.tsx

@@ -4,14 +4,23 @@ import Typography from '@mui/material/Typography';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { getToolsByCategory } from '../../tools';
 import Hero from 'components/Hero';
-import { capitalizeFirstLetter } from '../../utils/string';
+import { capitalizeFirstLetter } from '@utils/string';
 import { Icon } from '@iconify/react';
 import { categoriesColors } from 'config/uiConfig';
+import React, { useEffect } from 'react';
 
 export default function Home() {
   const navigate = useNavigate();
   const theme = useTheme();
+  const mainContentRef = React.useRef<HTMLDivElement>(null);
   const { categoryName } = useParams();
+
+  useEffect(() => {
+    if (mainContentRef.current) {
+      mainContentRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, []);
+
   return (
     <Box sx={{ backgroundColor: '#F5F5FA' }}>
       <Box
@@ -25,7 +34,7 @@ export default function Home() {
         <Hero />
       </Box>
       <Divider sx={{ borderColor: theme.palette.primary.main }} />
-      <Box width={'100%'} mt={3} ml={{ xs: 1, md: 2, lg: 3 }} padding={3}>
+      <Box ref={mainContentRef} mt={3} ml={{ xs: 1, md: 2, lg: 3 }} padding={3}>
         <Typography
           fontSize={22}
           color={theme.palette.primary.main}