Merge branch 'main' into tools-filtering

src/pages/home/Categories.tsx

@@ -8,6 +8,9 @@ import { useState } from 'react';
 import { categoriesColors } from 'config/uiConfig';
 import { Icon } from '@iconify/react';
 import { useUserTypeFilter } from '@components/UserTypeFilter';
+import { useTranslation } from 'react-i18next';
+import { getI18nNamespaceFromToolCategory } from '@utils/string';
+import { validNamespaces } from '../../i18n';
 
 type ArrayElement<ArrayType extends readonly unknown[]> =
   ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
@@ -19,10 +22,26 @@ const SingleCategory = function ({
   category: ArrayElement<ReturnType<typeof getToolsByCategory>>;
   index: number;
 }) {
+  const { t } = useTranslation(getI18nNamespaceFromToolCategory(category.type));
   const navigate = useNavigate();
   const theme = useTheme();
   const [hovered, setHovered] = useState<boolean>(false);
   const toggleHover = () => setHovered((prevState) => !prevState);
+
+  // Get translated category title and description
+  const categoryTitle = t(`categories.${category.type}.title`, category.title);
+  const categoryDescription = t(
+    `categories.${category.type}.description`,
+    category.description
+  );
+  const seeAllText = t('translation:categories.seeAll', 'See all {{title}}', {
+    title: categoryTitle
+  });
+  const tryText = t('translation:categories.try', 'Try {{title}}', {
+    //@ts-ignore
+    title: t(category.example.title)
+  });
+
   return (
     <Grid
       item
@@ -61,10 +80,10 @@ const SingleCategory = function ({
                   }}
                   to={'/categories/' + category.type}
                 >
-                  {category.title}
+                  {categoryTitle}
                 </Link>
               </Stack>
-              <Typography sx={{ mt: 2 }}>{category.description}</Typography>
+              <Typography sx={{ mt: 2 }}>{categoryDescription}</Typography>
             </Box>
             <Grid container spacing={2} mt={2}>
               <Grid item xs={12} md={6}>
@@ -72,7 +91,9 @@ const SingleCategory = function ({
                   fullWidth
                   onClick={() => navigate('/categories/' + category.type)}
                   variant={'contained'}
-                >{`See all ${category.title}`}</Button>
+                >
+                  {seeAllText}
+                </Button>
               </Grid>
               <Grid item xs={12} md={6}>
                 <Button
@@ -80,7 +101,9 @@ const SingleCategory = function ({
                   fullWidth
                   onClick={() => navigate(category.example.path)}
                   variant={'outlined'}
-                >{`Try ${category.example.title}`}</Button>
+                >
+                  {tryText}
+                </Button>
               </Grid>
             </Grid>
           </Stack>
@@ -92,7 +115,8 @@ const SingleCategory = function ({
 
 export default function Categories() {
   const { selectedUserTypes } = useUserTypeFilter();
-  const categories = getToolsByCategory(selectedUserTypes);
+  const { t } = useTranslation();
+  const categories = getToolsByCategory(selectedUserTypes, t);
 
   return (
     <Grid width={'80%'} container mt={2} spacing={2}>

src/pages/home/index.tsx

@@ -1,6 +1,7 @@
 import { Box, useTheme } from '@mui/material';
 import Hero from 'components/Hero';
 import Categories from './Categories';
+import { Helmet } from 'react-helmet';
 
 export default function Home() {
   const theme = useTheme();
@@ -25,6 +26,7 @@ export default function Home() {
       justifyContent={'center'}
       width={'100%'}
     >
+      <Helmet title={'OmniTools'} />
       <Hero />
       <Categories />
     </Box>