feat: add internationalization support

src/components/ToolLayout.tsx

@@ -7,20 +7,33 @@ import AllTools from './allTools/AllTools';
 import { getToolsByCategory } from '@tools/index';
 import { capitalizeFirstLetter } from '../utils/string';
 import { IconifyIcon } from '@iconify/react';
+import { useTranslation } from 'react-i18next';
 
 export default function ToolLayout({
   children,
   title,
   description,
   icon,
-  type
+  type,
+  i18n
 }: {
   title: string;
   description: string;
   icon?: IconifyIcon | string;
   type: string;
   children: ReactNode;
+  i18n?: {
+    name: string;
+    description: string;
+    shortDescription: string;
+  };
 }) {
+  const { t } = useTranslation();
+
+  // Use i18n keys if available, otherwise fall back to provided strings
+  const toolTitle = i18n ? t(i18n.name) : title;
+  const toolDescription = i18n ? t(i18n.description) : description;
+
   const otherCategoryTools =
     getToolsByCategory()
       .find((category) => category.type === type)
@@ -41,22 +54,24 @@ export default function ToolLayout({
       sx={{ backgroundColor: 'background.default' }}
     >
       <Helmet>
-        <title>{`${title} - OmniTools`}</title>
+        <title>{`${toolTitle} - OmniTools`}</title>
       </Helmet>
       <Box width={'85%'}>
         <ToolHeader
-          title={title}
-          description={description}
+          title={toolTitle}
+          description={toolDescription}
           icon={icon}
           type={type}
         />
         {children}
         <Separator backgroundColor="#5581b5" margin="50px" />
         <AllTools
-          title={`All ${capitalizeFirstLetter(
-            getToolsByCategory().find((category) => category.type === type)!
-              .rawTitle
-          )} tools`}
+          title={t('toolLayout.allToolsTitle', {
+            type: capitalizeFirstLetter(
+              getToolsByCategory().find((category) => category.type === type)!
+                .rawTitle
+            )
+          })}
           toolCards={otherCategoryTools}
         />
       </Box>