Merge branch 'main' of https://github.com/iib0011/omni-tools into fork/y1hao/bookmark

# Conflicts:
#	src/components/Hero.tsx
#	src/components/ToolHeader.tsx
#	src/components/ToolLayout.tsx
#	src/tools/defineTool.tsx

src/components/App.tsx

@@ -10,6 +10,8 @@ import { tools } from '../tools';
 import './index.css';
 import { darkTheme, lightTheme } from '../config/muiConfig';
 import ScrollToTopButton from './ScrollToTopButton';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../i18n';
 
 export type Mode = 'dark' | 'light' | 'system';
 
@@ -44,32 +46,34 @@ function App() {
   }, []);
 
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <SnackbarProvider
-        maxSnack={5}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right'
-        }}
-      >
-        <CustomSnackBarProvider>
-          <BrowserRouter>
-            <Navbar
-              mode={mode}
-              onChangeMode={() => {
-                setMode((prev) => nextMode(prev));
-                localStorage.setItem('theme', nextMode(mode));
-              }}
-            />
-            <Suspense fallback={<Loading />}>
-              <AppRoutes />
-            </Suspense>
-          </BrowserRouter>
-        </CustomSnackBarProvider>
-      </SnackbarProvider>
-      <ScrollToTopButton />
-    </ThemeProvider>
+    <I18nextProvider i18n={i18n}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <SnackbarProvider
+          maxSnack={5}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right'
+          }}
+        >
+          <CustomSnackBarProvider>
+            <BrowserRouter>
+              <Navbar
+                mode={mode}
+                onChangeMode={() => {
+                  setMode((prev) => nextMode(prev));
+                  localStorage.setItem('theme', nextMode(mode));
+                }}
+              />
+              <Suspense fallback={<Loading />}>
+                <AppRoutes />
+              </Suspense>
+            </BrowserRouter>
+          </CustomSnackBarProvider>
+        </SnackbarProvider>
+        <ScrollToTopButton />
+      </ThemeProvider>
+    </I18nextProvider>
   );
 }
 

src/components/Hero.tsx

@@ -15,9 +15,10 @@ import { useState } from 'react';
 import { DefinedTool } from '@tools/defineTool';
 import { filterTools, tools } from '@tools/index';
 import { useNavigate } from 'react-router-dom';
-import _ from 'lodash';
 import { Icon } from '@iconify/react';
 import { getToolCategoryTitle } from '@utils/string';
+import { useTranslation } from 'react-i18next';
+import { validNamespaces } from '../i18n';
 import {
   getBookmarkedToolPaths,
   isBookmarked,
@@ -44,21 +45,9 @@ type ToolInfo = {
   label: string;
   url: string;
 };
-const exampleTools: ToolInfo[] = [
-  {
-    label: 'Create a transparent image',
-    url: '/image-generic/create-transparent'
-  },
-  { label: 'Prettify JSON', url: '/json/prettify' },
-  { label: 'Change GIF speed', url: '/gif/change-speed' },
-  { label: 'Sort a list', url: '/list/sort' },
-  { label: 'Compress PNG', url: '/png/compress-png' },
-  { label: 'Split a text', url: '/string/split' },
-  { label: 'Split PDF', url: '/pdf/split-pdf' },
-  { label: 'Trim video', url: '/video/trim' },
-  { label: 'Calculate number sum', url: '/number/sum' }
-];
+
 export default function Hero() {
+  const { t } = useTranslation(validNamespaces);
   const [inputValue, setInputValue] = useState<string>('');
   const theme = useTheme();
   const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(tools);
@@ -66,12 +55,52 @@ export default function Hero() {
     getBookmarkedToolPaths()
   );
   const navigate = useNavigate();
+
+  const exampleTools: ToolInfo[] = [
+    {
+      label: t('translation:hero.examples.createTransparentImage'),
+      url: '/image-generic/create-transparent'
+    },
+    {
+      label: t('translation:hero.examples.prettifyJson'),
+      url: '/json/prettify'
+    },
+    {
+      label: t('translation:hero.examples.changeGifSpeed'),
+      url: '/gif/change-speed'
+    },
+    {
+      label: t('translation:hero.examples.sortList'),
+      url: '/list/sort'
+    },
+    {
+      label: t('translation:hero.examples.compressPng'),
+      url: '/png/compress-png'
+    },
+    {
+      label: t('translation:hero.examples.splitText'),
+      url: '/string/split'
+    },
+    {
+      label: t('translation:hero.examples.splitPdf'),
+      url: '/pdf/split-pdf'
+    },
+    {
+      label: t('translation:hero.examples.trimVideo'),
+      url: '/video/trim'
+    },
+    {
+      label: t('translation:hero.examples.calculateNumberSum'),
+      url: '/number/sum'
+    }
+  ];
+
   const handleInputChange = (
     event: React.ChangeEvent<{}>,
     newInputValue: string
   ) => {
     setInputValue(newInputValue);
-    setFilteredTools(filterTools(tools, newInputValue));
+    setFilteredTools(filterTools(tools, newInputValue, t));
   };
   const toolsMap = new Map<string, ToolInfo>();
   for (const tool of filteredTools) {
@@ -96,13 +125,13 @@ export default function Hero() {
     <Box width={{ xs: '90%', md: '80%', lg: '60%' }}>
       <Stack mb={1} direction={'row'} spacing={1} justifyContent={'center'}>
         <Typography sx={{ textAlign: 'center' }} fontSize={{ xs: 25, md: 30 }}>
-          Get Things Done Quickly with{' '}
+          {t('translation:hero.title')}{' '}
           <Typography
             fontSize={{ xs: 25, md: 30 }}
             display={'inline'}
             color={'primary'}
           >
-            OmniTools
+            {t('translation:hero.brand')}
           </Typography>
         </Typography>
       </Stack>
@@ -111,9 +140,7 @@ export default function Hero() {
         fontSize={{ xs: 15, md: 20 }}
         mb={2}
       >
-        Boost your productivity with OmniTools, the ultimate toolkit for getting
-        things done quickly! Access thousands of user-friendly utilities for
-        editing images, text, lists, and data, all directly from your browser.
+        {t('translation:hero.description')}
       </Typography>
 
       <Autocomplete
@@ -130,12 +157,12 @@ export default function Hero() {
           );
         }}
         inputValue={inputValue}
-        getOptionLabel={(option) => option.name}
+        getOptionLabel={(option) => t(option.name)}
         renderInput={(params) => (
           <TextField
             {...params}
             fullWidth
-            placeholder={'Search all tools'}
+            placeholder={t('translation:hero.searchPlaceholder')}
             InputProps={{
               ...params.InputProps,
               endAdornment: <SearchIcon />,

src/components/Navbar/index.tsx

@@ -13,22 +13,39 @@ import {
   ListItem,
   ListItemButton,
   ListItemText,
-  Stack
+  Stack,
+  Select,
+  MenuItem,
+  FormControl
 } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 import { Icon } from '@iconify/react';
 import { Mode } from 'components/App';
+import { useTranslation } from 'react-i18next';
 
 interface NavbarProps {
   mode: Mode;
   onChangeMode: () => void;
 }
+const languages = [
+  { code: 'en', label: 'English' },
+  { code: 'de', label: 'Deutsch' },
+  { code: 'es', label: 'Español' },
+  { code: 'fr', label: 'Français' },
+  { code: 'pt', label: 'Português' },
+  { code: 'ja', label: '日本語' },
+  { code: 'hi', label: 'हिंदी' },
+  { code: 'nl', label: 'Nederlands' },
+  { code: 'ru', label: 'Русский' },
+  { code: 'zh', label: '中文' }
+];
 
 const Navbar: React.FC<NavbarProps> = ({
   mode,
   onChangeMode: onChangeMode
 }) => {
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -36,12 +53,51 @@ const Navbar: React.FC<NavbarProps> = ({
   const toggleDrawer = (open: boolean) => () => {
     setDrawerOpen(open);
   };
+
+  const handleLanguageChange = (event: any) => {
+    const newLanguage = event.target.value;
+    i18n.changeLanguage(newLanguage);
+    localStorage.setItem('lang', newLanguage);
+  };
+
   const navItems: { label: string; path: string }[] = [
     // { label: 'Features', path: '/features' }
     // { label: 'About Us', path: '/about-us' }
   ];
 
+  const languageSelector = (
+    <FormControl size="small" sx={{ minWidth: 120 }}>
+      <Select
+        value={i18n.language}
+        onChange={handleLanguageChange}
+        displayEmpty
+        sx={{
+          color: 'inherit',
+          '& .MuiSelect-icon': {
+            color: 'inherit'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'transparent'
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'transparent'
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'transparent'
+          }
+        }}
+      >
+        {languages.map((lang) => (
+          <MenuItem key={lang.code} value={lang.code}>
+            {lang.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+
   const buttons: ReactNode[] = [
+    languageSelector,
     <Icon
       key={mode}
       onClick={onChangeMode}
@@ -83,7 +139,7 @@ const Navbar: React.FC<NavbarProps> = ({
         />
       }
     >
-      Buy me a coffee
+      {t('navbar.buyMeACoffee')}
     </Button>
   ];
   const drawerList = (

src/components/ToolHeader.tsx

@@ -9,6 +9,7 @@ import { getToolsByCategory } from '@tools/index';
 import { useEffect, useState } from 'react';
 import { isBookmarked, toggleBookmarked } from '@utils/bookmark';
 import IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
 
 const StyledButton = styled(Button)(({ theme }) => ({
   backgroundColor: 'white',
@@ -27,6 +28,7 @@ interface ToolHeaderProps {
 }
 
 function ToolLinks() {
+  const { t } = useTranslation();
   const [examplesVisible, setExamplesVisible] = useState(false);
 
   useEffect(() => {
@@ -66,7 +68,7 @@ function ToolLinks() {
             sx={{ backgroundColor: 'background.paper' }}
             onClick={() => scrollToElement('examples')}
           >
-            See Examples
+            {t('toolHeader.seeExamples')}
           </StyledButton>
         </Grid>
       )}

src/components/ToolLayout.tsx

@@ -5,28 +5,47 @@ import ToolHeader from './ToolHeader';
 import Separator from './Separator';
 import AllTools from './allTools/AllTools';
 import { getToolsByCategory } from '@tools/index';
-import { capitalizeFirstLetter } from '../utils/string';
+import {
+  capitalizeFirstLetter,
+  getI18nNamespaceFromToolCategory
+} from '../utils/string';
 import { IconifyIcon } from '@iconify/react';
+import { useTranslation } from 'react-i18next';
+import { ToolCategory } from '@tools/defineTool';
+import { FullI18nKey } from '../i18n';
 
 export default function ToolLayout({
   children,
-  title,
-  description,
   icon,
+  i18n,
   type,
   fullPath
 }: {
-  title: string;
-  description: string;
   icon?: IconifyIcon | string;
-  type: string;
+  type: ToolCategory;
   fullPath: string;
   children: ReactNode;
+  i18n?: {
+    name: FullI18nKey;
+    description: FullI18nKey;
+    shortDescription: FullI18nKey;
+  };
 }) {
+  const { t } = useTranslation([
+    'translation',
+    getI18nNamespaceFromToolCategory(type)
+  ]);
+
+  // Use i18n keys if available, otherwise fall back to provided strings
+  //@ts-ignore
+  const toolTitle: string = t(i18n.name);
+  //@ts-ignore
+  const toolDescription: string = t(i18n.description);
+
   const otherCategoryTools =
     getToolsByCategory()
       .find((category) => category.type === type)
-      ?.tools.filter((tool) => tool.name !== title)
+      ?.tools.filter((tool) => t(tool.name) !== toolTitle)
       .map((tool) => ({
         title: tool.name,
         description: tool.shortDescription,
@@ -43,12 +62,12 @@ 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}
           path={fullPath}
@@ -56,10 +75,12 @@ export default function ToolLayout({
         {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>

src/components/allTools/AllTools.tsx

@@ -1,10 +1,12 @@
 import { Box, Grid, Stack, Typography } from '@mui/material';
 import ToolCard from './ToolCard';
 import { IconifyIcon } from '@iconify/react';
+import { useTranslation } from 'react-i18next';
+import { FullI18nKey } from '../../i18n';
 
 export interface ToolCardProps {
-  title: string;
-  description: string;
+  title: FullI18nKey;
+  description: FullI18nKey;
   link: string;
   icon: IconifyIcon | string;
 }
@@ -15,6 +17,7 @@ interface AllToolsProps {
 }
 
 export default function AllTools({ title, toolCards }: AllToolsProps) {
+  const { t } = useTranslation();
   return (
     <Box mt={4} mb={10}>
       <Typography mb={2} fontSize={30} color={'primary'}>
@@ -25,8 +28,10 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
           {toolCards.map((card, index) => (
             <Grid item xs={12} md={6} lg={4} key={index}>
               <ToolCard
-                title={card.title}
-                description={card.description}
+                //@ts-ignore
+                title={t(card.title)}
+                //@ts-ignore
+                description={t(card.description)}
                 link={card.link}
                 icon={card.icon}
               />

src/components/examples/ToolExamples.tsx

@@ -3,6 +3,7 @@ import ExampleCard, { ExampleCardProps } from './ExampleCard';
 import React from 'react';
 import { GetGroupsType } from '@components/options/ToolOptions';
 import { useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
 
 export type CardExampleType<T> = Omit<
   ExampleCardProps<T>,
@@ -24,6 +25,7 @@ export default function ToolExamples<T>({
   getGroups,
   setInput
 }: ExampleProps<T>) {
+  const { t } = useTranslation();
   const { setValues } = useFormikContext<T>();
 
   function changeInputResult(newInput: string | undefined, newOptions: T) {
@@ -39,10 +41,10 @@ export default function ToolExamples<T>({
     <Box id={'examples'} mt={4}>
       <Box mt={4} display="flex" gap={1} alignItems="center">
         <Typography mb={2} fontSize={30} color={'primary'}>
-          {`${title} Examples`}
+          {t('toolExamples.title', { title })}
         </Typography>
         <Typography mb={2} fontSize={30} color={'secondary'}>
-          {subtitle ?? 'Click to try!'}
+          {subtitle ?? t('toolExamples.subtitle')}
         </Typography>
       </Box>
 

src/components/input/BaseFileInput.tsx

@@ -12,6 +12,7 @@ import { globalInputHeight } from '../../config/uiConfig';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import greyPattern from '@assets/grey-pattern.png';
 import { isArray } from 'lodash';
+import { useTranslation } from 'react-i18next';
 
 interface BaseFileInputComponentProps extends BaseFileInputProps {
   children: (props: { preview: string | undefined }) => ReactNode;
@@ -26,6 +27,7 @@ export default function BaseFileInput({
   children,
   type
 }: BaseFileInputComponentProps) {
+  const { t } = useTranslation();
   const [preview, setPreview] = useState<string | null>(null);
   const [isDragging, setIsDragging] = useState<boolean>(false);
   const theme = useTheme();
@@ -60,9 +62,9 @@ export default function BaseFileInput({
 
       navigator.clipboard
         .write([clipboardItem])
-        .then(() => showSnackBar('File copied', 'success'))
+        .then(() => showSnackBar(t('baseFileInput.fileCopied'), 'success'))
         .catch((err) => {
-          showSnackBar('Failed to copy: ' + err, 'error');
+          showSnackBar(t('baseFileInput.copyFailed', { error: err }), 'error');
         });
     }
   };
@@ -190,7 +192,7 @@ export default function BaseFileInput({
                 variant="h6"
                 align="center"
               >
-                Drop your {type} here
+                {t('baseFileInput.dropFileHere', { type })}
               </Typography>
             ) : (
               <Typography
@@ -200,9 +202,7 @@ export default function BaseFileInput({
                     : theme.palette.grey['600']
                 }
               >
-                Click here to select a {type} from your device, press Ctrl+V to
-                use a {type} from your clipboard, or drag and drop a file from
-                desktop
+                {t('baseFileInput.selectFileDescription', { type })}
               </Typography>
             )}
           </Box>

src/components/input/InputFooter.tsx

@@ -3,6 +3,7 @@ import Button from '@mui/material/Button';
 import PublishIcon from '@mui/icons-material/Publish';
 import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import ClearIcon from '@mui/icons-material/Clear';
+import { useTranslation } from 'react-i18next';
 
 export default function InputFooter({
   handleImport,
@@ -13,19 +14,21 @@ export default function InputFooter({
   handleCopy?: () => void;
   handleClear?: () => void;
 }) {
+  const { t } = useTranslation();
+
   return (
     <Stack mt={1} direction={'row'} spacing={2}>
       <Button onClick={handleImport} startIcon={<PublishIcon />}>
-        Import from file
+        {t('inputFooter.importFromFile')}
       </Button>
       {handleCopy && (
         <Button onClick={handleCopy} startIcon={<ContentPasteIcon />}>
-          Copy to clipboard
+          {t('inputFooter.copyToClipboard')}
         </Button>
       )}
       {handleClear && (
         <Button onClick={handleClear} startIcon={<ClearIcon />}>
-          Clear
+          {t('inputFooter.clear')}
         </Button>
       )}
     </Stack>

src/components/input/NumericInputWithUnit.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Grid, Select, MenuItem } from '@mui/material';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import Qty from 'js-quantities';
+import { useTranslation } from 'react-i18next';
 //
 
 const siPrefixes: { [key: string]: number } = {
@@ -23,6 +24,7 @@ export default function NumericInputWithUnit(props: {
   onOwnChange?: (value: { value: number; unit: string }) => void;
   defaultPrefix?: string;
 }) {
+  const { t } = useTranslation();
   const [inputValue, setInputValue] = useState(props.value.value);
   const [prefix, setPrefix] = useState(props.defaultPrefix || 'Default prefix');
 
@@ -158,7 +160,7 @@ export default function NumericInputWithUnit(props: {
         <Select
           fullWidth
           disabled={disableChangingUnit}
-          placeholder={'Unit'}
+          placeholder={t('numericInputWithUnit.unit')}
           sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
           value={unit}
           onChange={(event) => {

src/components/input/ToolMultipleAudioInput.tsx

@@ -6,6 +6,7 @@ import InputFooter from './InputFooter';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import { isArray } from 'lodash';
 import MusicNoteIcon from '@mui/icons-material/MusicNote';
+import { useTranslation } from 'react-i18next';
 
 interface MultiAudioInputComponentProps {
   accept: string[];
@@ -27,7 +28,10 @@ export default function ToolMultipleAudioInput({
   title,
   type
 }: MultiAudioInputComponentProps) {
+  const { t } = useTranslation();
+  const theme = useTheme();
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const { showSnackBar } = useContext(CustomSnackBarContext);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files;
@@ -93,7 +97,12 @@ export default function ToolMultipleAudioInput({
   return (
     <Box>
       <InputHeader
-        title={title || 'Input ' + type.charAt(0).toUpperCase() + type.slice(1)}
+        title={
+          title ||
+          t('toolMultipleAudioInput.inputTitle', {
+            type: type.charAt(0).toUpperCase() + type.slice(1)
+          })
+        }
       />
       <Box
         sx={{
@@ -152,7 +161,7 @@ export default function ToolMultipleAudioInput({
             ))
           ) : (
             <Typography variant="body2" color="text.secondary">
-              No files selected
+              {t('toolMultipleAudioInput.noFilesSelected')}
             </Typography>
           )}
         </Box>

src/components/input/ToolMultiplePdfInput.tsx

@@ -6,6 +6,7 @@ import InputFooter from './InputFooter';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import { isArray } from 'lodash';
 import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import { useTranslation } from 'react-i18next';
 
 interface MultiPdfInputComponentProps {
   accept: string[];
@@ -27,6 +28,7 @@ export default function ToolMultiFileInput({
   title,
   type
 }: MultiPdfInputComponentProps) {
+  const { t } = useTranslation();
   const theme = useTheme();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { showSnackBar } = useContext(CustomSnackBarContext);
@@ -96,7 +98,12 @@ export default function ToolMultiFileInput({
   return (
     <Box>
       <InputHeader
-        title={title || 'Input ' + type.charAt(0).toUpperCase() + type.slice(1)}
+        title={
+          title ||
+          t('toolMultiplePdfInput.inputTitle', {
+            type: type.charAt(0).toUpperCase() + type.slice(1)
+          })
+        }
       />
       <Box
         sx={{
@@ -156,7 +163,7 @@ export default function ToolMultiFileInput({
             ))
           ) : (
             <Typography variant="body2" color="text.secondary">
-              No files selected
+              {t('toolMultiplePdfInput.noFilesSelected')}
             </Typography>
           )}
         </Box>

src/components/input/ToolTextInput.tsx

@@ -3,6 +3,7 @@ import React, { useContext, useRef } from 'react';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import InputHeader from '../InputHeader';
 import InputFooter from './InputFooter';
+import { useTranslation } from 'react-i18next';
 
 export default function ToolTextInput({
   value,
@@ -15,15 +16,16 @@ export default function ToolTextInput({
   onChange: (value: string) => void;
   placeholder?: string;
 }) {
+  const { t } = useTranslation();
   const { showSnackBar } = useContext(CustomSnackBarContext);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleCopy = () => {
     navigator.clipboard
       .writeText(value)
-      .then(() => showSnackBar('Text copied', 'success'))
+      .then(() => showSnackBar(t('toolTextInput.copied'), 'success'))
       .catch((err) => {
-        showSnackBar('Failed to copy: ' + err, 'error');
+        showSnackBar(t('toolTextInput.copyFailed', { error: err }), 'error');
       });
   };
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -45,14 +47,14 @@ export default function ToolTextInput({
   };
   return (
     <Box>
-      <InputHeader title={title} />
+      <InputHeader title={title || t('toolTextInput.input')} />
       <TextField
         value={value}
         onChange={(event) => onChange(event.target.value)}
         fullWidth
         multiline
         rows={10}
-        placeholder={placeholder}
+        placeholder={placeholder || t('toolTextInput.placeholder')}
         sx={{
           '&.MuiTextField-root': {
             backgroundColor: 'background.paper'

src/components/options/ToolOptions.tsx

@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
 import React, { ReactNode } from 'react';
 import { FormikProps, FormikValues, useFormikContext } from 'formik';
 import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
+import { useTranslation } from 'react-i18next';
 
 export type UpdateField<T> = <Y extends keyof T>(field: Y, value: T[Y]) => void;
 type NonEmptyArray<T> = [T, ...T[]];
@@ -20,6 +21,7 @@ export default function ToolOptions<T extends FormikValues>({
   getGroups: GetGroupsType<T> | null;
   vertical?: boolean;
 }) {
+  const { t } = useTranslation();
   const theme = useTheme();
   const formikContext = useFormikContext<T>();
 
@@ -45,7 +47,7 @@ export default function ToolOptions<T extends FormikValues>({
     >
       <Stack direction={'row'} spacing={1} alignItems={'center'}>
         <SettingsIcon />
-        <Typography fontSize={22}>Tool options</Typography>
+        <Typography fontSize={22}>{t('toolOptions.title')}</Typography>
       </Stack>
       <Box mt={2}>
         <Stack direction={'row'} spacing={2}>

src/components/result/ResultFooter.tsx

@@ -3,13 +3,14 @@ import Button from '@mui/material/Button';
 import DownloadIcon from '@mui/icons-material/Download';
 import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 export default function ResultFooter({
   handleDownload,
   handleCopy,
   disabled,
   hideCopy,
-  downloadLabel = 'Download'
+  downloadLabel
 }: {
   handleDownload: () => void;
   handleCopy?: () => void;
@@ -17,6 +18,7 @@ export default function ResultFooter({
   hideCopy?: boolean;
   downloadLabel?: string;
 }) {
+  const { t } = useTranslation();
   return (
     <Stack mt={1} direction={'row'} spacing={2}>
       <Button
@@ -24,7 +26,7 @@ export default function ResultFooter({
         onClick={handleDownload}
         startIcon={<DownloadIcon />}
       >
-        {downloadLabel}
+        {downloadLabel || t('resultFooter.download')}
       </Button>
       {!hideCopy && (
         <Button
@@ -32,7 +34,7 @@ export default function ResultFooter({
           onClick={handleCopy}
           startIcon={<ContentPasteIcon />}
         >
-          Copy to clipboard
+          {t('resultFooter.copy')}
         </Button>
       )}
     </Stack>

src/components/result/ToolFileResult.tsx

@@ -5,6 +5,7 @@ import greyPattern from '@assets/grey-pattern.png';
 import { globalInputHeight } from '../../config/uiConfig';
 import ResultFooter from './ResultFooter';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
+import { useTranslation } from 'react-i18next';
 
 export default function ToolFileResult({
   title = 'Result',
@@ -19,6 +20,7 @@ export default function ToolFileResult({
   loading?: boolean;
   loadingText?: string;
 }) {
+  const { t } = useTranslation();
   const [preview, setPreview] = React.useState<string | null>(null);
   const { showSnackBar } = useContext(CustomSnackBarContext);
   const theme = useTheme();
@@ -41,9 +43,9 @@ export default function ToolFileResult({
 
       navigator.clipboard
         .write([clipboardItem])
-        .then(() => showSnackBar('File copied', 'success'))
+        .then(() => showSnackBar(t('toolFileResult.copied'), 'success'))
         .catch((err) => {
-          showSnackBar('Failed to copy: ' + err, 'error');
+          showSnackBar(t('toolFileResult.copyFailed', { error: err }), 'error');
         });
     }
   };
@@ -91,7 +93,7 @@ export default function ToolFileResult({
 
   return (
     <Box>
-      <InputHeader title={title} />
+      <InputHeader title={title || t('toolFileResult.result')} />
       <Box
         sx={{
           width: '100%',
@@ -114,7 +116,7 @@ export default function ToolFileResult({
           >
             <CircularProgress />
             <Typography variant="body2" sx={{ mt: 2 }}>
-              {loadingText}... This may take a moment.
+              {loadingText || t('toolFileResult.loading')}
             </Typography>
           </Box>
         ) : (

src/components/result/ToolMultiFileResult.tsx

@@ -9,8 +9,11 @@ import InputHeader from '../InputHeader';
 import greyPattern from '@assets/grey-pattern.png';
 import { globalInputHeight } from '../../config/uiConfig';
 import ResultFooter from './ResultFooter';
+import { useTranslation } from 'react-i18next';
+import React, { useContext } from 'react';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 
-export default function ToolFileResult({
+export default function ToolMultiFileResult({
   title = 'Result',
   value,
   zipFile,
@@ -23,7 +26,9 @@ export default function ToolFileResult({
   loading?: boolean;
   loadingText?: string;
 }) {
+  const { t } = useTranslation();
   const theme = useTheme();
+  const { showSnackBar } = useContext(CustomSnackBarContext);
 
   const getFileType = (
     file: File
@@ -46,9 +51,25 @@ export default function ToolFileResult({
     URL.revokeObjectURL(url);
   };
 
+  const handleCopy = () => {
+    if (zipFile) {
+      const blob = new Blob([zipFile], { type: zipFile.type });
+      const clipboardItem = new ClipboardItem({ [zipFile.type]: blob });
+      navigator.clipboard
+        .write([clipboardItem])
+        .then(() => showSnackBar(t('toolMultiFileResult.copied'), 'success'))
+        .catch((err) => {
+          showSnackBar(
+            t('toolMultiFileResult.copyFailed', { error: err }),
+            'error'
+          );
+        });
+    }
+  };
+
   return (
     <Box>
-      <InputHeader title={title} />
+      <InputHeader title={title || t('toolMultiFileResult.result')} />
       <Box
         sx={{
           width: '100%',
@@ -77,7 +98,7 @@ export default function ToolFileResult({
           >
             <CircularProgress />
             <Typography variant="body2" sx={{ mt: 2 }}>
-              {loadingText}... This may take a moment.
+              {loadingText || t('toolMultiFileResult.loading')}
             </Typography>
           </Box>
         ) : (

src/components/result/ToolTextResult.tsx

@@ -6,6 +6,7 @@ import ResultFooter from './ResultFooter';
 import { replaceSpecialCharacters } from '@utils/string';
 import mime from 'mime';
 import { globalInputHeight } from '../../config/uiConfig';
+import { useTranslation } from 'react-i18next';
 
 export default function ToolTextResult({
   title = 'Result',
@@ -20,13 +21,14 @@ export default function ToolTextResult({
   keepSpecialCharacters?: boolean;
   loading?: boolean;
 }) {
+  const { t } = useTranslation();
   const { showSnackBar } = useContext(CustomSnackBarContext);
   const handleCopy = () => {
     navigator.clipboard
       .writeText(value)
-      .then(() => showSnackBar('Text copied', 'success'))
+      .then(() => showSnackBar(t('toolTextResult.copied'), 'success'))
       .catch((err) => {
-        showSnackBar('Failed to copy: ' + err, 'error');
+        showSnackBar(t('toolTextResult.copyFailed', { error: err }), 'error');
       });
   };
   const handleDownload = () => {
@@ -48,7 +50,7 @@ export default function ToolTextResult({
   };
   return (
     <Box>
-      <InputHeader title={title} />
+      <InputHeader title={title || t('toolTextResult.result')} />
       {loading ? (
         <Box
           sx={{
@@ -61,7 +63,7 @@ export default function ToolTextResult({
         >
           <CircularProgress />
           <Typography variant="body2" sx={{ mt: 2 }}>
-            Loading... This may take a moment.
+            {t('toolTextResult.loading')}
           </Typography>
         </Box>
       ) : (

src/i18n/en.json

@@ -0,0 +1,254 @@
+{
+  "app": {
+    "title": "Omni Tools",
+    "language": "Language"
+  },
+  "navbar": {
+    "home": "Home",
+    "tools": "Tools",
+    "buyMeACoffee": "Buy me a coffee"
+  },
+  "resultFooter": {
+    "download": "Download",
+    "copy": "Copy to clipboard"
+  },
+  "toolTextResult": {
+    "result": "Result",
+    "loading": "Loading... This may take a moment.",
+    "copied": "Text copied",
+    "copyFailed": "Failed to copy: {{error}}"
+  },
+  "toolFileResult": {
+    "result": "Result",
+    "loading": "Loading... This may take a moment.",
+    "copied": "File copied",
+    "copyFailed": "Failed to copy: {{error}}"
+  },
+  "toolMultiFileResult": {
+    "result": "Result",
+    "loading": "Loading... This may take a moment.",
+    "copied": "File copied",
+    "copyFailed": "Failed to copy: {{error}}"
+  },
+  "toolTextInput": {
+    "input": "Input text",
+    "placeholder": "Enter your text here...",
+    "copied": "Text copied",
+    "copyFailed": "Failed to copy: {{error}}"
+  },
+  "toolOptions": {
+    "title": "Tool options"
+  },
+  "hero": {
+    "title": "Get Things Done Quickly with",
+    "brand": "OmniTools",
+    "description": "Boost your productivity with OmniTools, the ultimate toolkit for getting things done quickly! Access thousands of user-friendly utilities for editing images, text, lists, and data, all directly from your browser.",
+    "searchPlaceholder": "Search all tools",
+    "examples": {
+      "createTransparentImage": "Create a transparent image",
+      "prettifyJson": "Prettify JSON",
+      "changeGifSpeed": "Change GIF speed",
+      "sortList": "Sort a list",
+      "compressPng": "Compress PNG",
+      "splitText": "Split a text",
+      "splitPdf": "Split PDF",
+      "trimVideo": "Trim video",
+      "calculateNumberSum": "Calculate number sum"
+    }
+  },
+  "toolHeader": {
+    "seeExamples": "See Examples"
+  },
+  "toolExamples": {
+    "title": "{{title}} Examples",
+    "subtitle": "Click to try!"
+  },
+  "inputFooter": {
+    "importFromFile": "Import from file",
+    "copyToClipboard": "Copy to clipboard",
+    "clear": "Clear"
+  },
+  "baseFileInput": {
+    "fileCopied": "File copied",
+    "copyFailed": "Failed to copy: {{error}}",
+    "dropFileHere": "Drop your {{type}} here",
+    "selectFileDescription": "Click here to select a {{type}} from your device, press Ctrl+V to use a {{type}} from your clipboard, or drag and drop a file from desktop"
+  },
+  "toolMultiplePdfInput": {
+    "noFilesSelected": "No files selected",
+    "inputTitle": "Input {{type}}"
+  },
+  "toolMultipleAudioInput": {
+    "noFilesSelected": "No files selected",
+    "inputTitle": "Input {{type}}"
+  },
+  "numericInputWithUnit": {
+    "unit": "Unit"
+  },
+  "toolLayout": {
+    "allToolsTitle": "All {{type}} Tools"
+  },
+  "list": {
+    "group": {
+      "name": "Group",
+      "description": "World's simplest browser-based utility for grouping list items. Input your list and specify grouping criteria to organize items into logical groups. Perfect for categorizing data, organizing information, or creating structured lists. Supports custom separators and various grouping options.",
+      "shortDescription": "Group list items by common properties"
+    },
+    "reverse": {
+      "name": "Reverse",
+      "description": "This is a super simple browser-based application prints all list items in reverse. The input items can be separated by any symbol and you can also change the separator of the reversed list items.",
+      "shortDescription": "Quickly reverse a list"
+    },
+    "sort": {
+      "name": "Sort",
+      "description": "This is a super simple browser-based application that sorts items in a list and arranges them in increasing or decreasing order. You can sort the items alphabetically, numerically, or by their length. You can also remove duplicate and empty items, as well as trim individual items that have whitespace around them. You can use any separator character to separate the input list items or alternatively use a regular expression to separate them. Additionally, you can create a new delimiter for the sorted output list.",
+      "shortDescription": "Quickly sort a list"
+    }
+  },
+  "string": {
+    "uppercase": {
+      "name": "Uppercase",
+      "description": "World's simplest browser-based utility for converting text to uppercase. Just input your text and it will be automatically converted to all capital letters. Perfect for creating headlines, emphasizing text, or standardizing text format. Supports various text formats and preserves special characters.",
+      "shortDescription": "Convert text to uppercase letters"
+    },
+    "reverse": {
+      "name": "Reverse",
+      "description": "World's simplest browser-based utility for reversing text. Input any text and get it instantly reversed, character by character. Perfect for creating mirror text, analyzing palindromes, or playing with text patterns. Preserves spaces and special characters while reversing.",
+      "shortDescription": "Reverse any text character by character"
+    },
+    "repeat": {
+      "name": "Repeat text",
+      "description": "This tool allows you to repeat a given text multiple times with an optional separator.",
+      "shortDescription": "Repeat text multiple times"
+    },
+    "createPalindrome": {
+      "name": "Create palindrome",
+      "description": "World's simplest browser-based utility for creating palindromes from any text. Input text and instantly transform it into a palindrome that reads the same forward and backward. Perfect for word games, creating symmetrical text patterns, or exploring linguistic curiosities.",
+      "shortDescription": "Create text that reads the same forward and backward"
+    },
+    "palindrome": {
+      "name": "Palindrome",
+      "description": "World's simplest browser-based utility for checking if text is a palindrome. Instantly verify if your text reads the same forward and backward. Perfect for word puzzles, linguistic analysis, or validating symmetrical text patterns. Supports various delimiters and multi-word palindrome detection.",
+      "shortDescription": "Check if text reads the same forward and backward"
+    },
+    "toMorse": {
+      "name": "String To morse",
+      "description": "World's simplest browser-based utility for converting text to Morse code. Load your text in the input form on the left and you'll instantly get Morse code in the output area. Powerful, free, and fast. Load text – get Morse code.",
+      "shortDescription": "Quickly encode text to morse"
+    }
+  },
+  "pdf": {
+    "mergePdf": {
+      "name": "Merge PDF",
+      "description": "Combine multiple PDF files into a single document.",
+      "shortDescription": "Merge multiple PDF files into a single document"
+    },
+    "pdfToEpub": {
+      "name": "PDF to EPUB",
+      "description": "Transform PDF documents into EPUB files for better e-reader compatibility.",
+      "shortDescription": "Convert PDF files to EPUB format"
+    },
+    "protectPdf": {
+      "name": "Protect PDF",
+      "description": "Add password protection to your PDF files securely in your browser",
+      "shortDescription": "Password protect PDF files securely"
+    },
+    "splitPdf": {
+      "name": "Split PDF",
+      "description": "Extract specific pages from a PDF file using page numbers or ranges (e.g., 1,5-8)",
+      "shortDescription": "Extract specific pages from a PDF file"
+    },
+    "compressPdf": {
+      "name": "Compress PDF",
+      "description": "Reduce PDF file size while maintaining quality using Ghostscript",
+      "shortDescription": "Compress PDF files securely in your browser"
+    }
+  },
+  "number": {
+    "generate": {
+      "name": "Generate numbers",
+      "description": "Quickly calculate a list of integers in your browser. To get your list, just specify the first integer, change value and total count in the options below, and this utility will generate that many integers",
+      "shortDescription": "Quickly calculate a list of integers in your browser"
+    },
+    "sum": {
+      "name": "Sum numbers",
+      "description": "This is a super simple browser-based application that sums numbers. The input numbers can be separated by any symbol and you can also change the separator of the summed numbers.",
+      "shortDescription": "Quickly sum a list of numbers"
+    }
+  },
+  "audio": {
+    "extractAudio": {
+      "name": "Extract audio",
+      "description": "Extract the audio track from a video file and save it as a separate audio file in your chosen format (AAC, MP3, WAV).",
+      "shortDescription": "Extract audio from video files (MP4, MOV, etc.) to AAC, MP3, or WAV."
+    },
+    "changeSpeed": {
+      "name": "Change audio speed",
+      "description": "Change the playback speed of audio files. Speed up or slow down audio while maintaining pitch.",
+      "shortDescription": "Change the speed of audio files"
+    }
+  },
+  "csv": {
+    "findIncompleteCsvRecords": {
+      "name": "Find incomplete CSV records",
+      "description": "Just upload your CSV file in the form below and this tool will automatically check if none of the rows or columns are missing values. In the tool options, you can adjust the input file format (specify the delimiter, quote character, and comment character). Additionally, you can enable checking for empty values, skip empty lines, and set a limit on the number of error messages in the output.",
+      "shortDescription": "Quickly find rows and columns in CSV that are missing values."
+    }
+  },
+  "categories": {
+    "string": {
+      "title": "Text Tools",
+      "description": "Tools for working with text – convert text to images, find and replace text, split text into fragments, join text lines, repeat text, and much more."
+    },
+    "png": {
+      "title": "PNG Tools",
+      "description": "Tools for working with PNG images – convert PNGs to JPGs, create transparent PNGs, change PNG colors, crop, rotate, resize PNGs, and much more."
+    },
+    "number": {
+      "title": "Number Tools",
+      "description": "Tools for working with numbers – generate number sequences, convert numbers to words and words to numbers, sort, round, factor numbers, and much more."
+    },
+    "gif": {
+      "title": "GIF Tools",
+      "description": "Tools for working with GIF animations – create transparent GIFs, extract GIF frames, add text to GIF, crop, rotate, reverse GIFs, and much more."
+    },
+    "list": {
+      "title": "List Tools",
+      "description": "Tools for working with lists – sort, reverse, randomize lists, find unique and duplicate list items, change list item separators, and much more."
+    },
+    "json": {
+      "title": "JSON Tools",
+      "description": "Tools for working with JSON data structures – prettify and minify JSON objects, flatten JSON arrays, stringify JSON values, analyze data, and much more"
+    },
+    "time": {
+      "title": "Time Tools",
+      "description": "Tools for working with time and date – calculate time differences, convert between time zones, format dates, generate date sequences, and much more."
+    },
+    "csv": {
+      "title": "CSV Tools",
+      "description": "Tools for working with CSV files - convert CSV to different formats, manipulate CSV data, validate CSV structure, and process CSV files efficiently."
+    },
+    "video": {
+      "title": "Video Tools",
+      "description": "Tools for working with videos – extract frames from videos, create GIFs from videos, convert videos to different formats, and much more."
+    },
+    "pdf": {
+      "title": "PDF Tools",
+      "description": "Tools for working with PDF files - extract text from PDFs, convert PDFs to other formats, manipulate PDFs, and much more."
+    },
+    "image-generic": {
+      "title": "Image Tools",
+      "description": "Tools for working with pictures – compress, resize, crop, convert to JPG, rotate, remove background and much more."
+    },
+    "audio": {
+      "title": "Audio Tools",
+      "description": "Tools for working with audio – extract audio from video, adjusting audio speed, merging multiple audio files and much more."
+    },
+    "xml": {
+      "title": "XML Tools",
+      "description": "Tools for working with XML data structures - viewer, beautifier, validator and much more"
+    },
+    "seeAll": "See all {{title}}",
+    "try": "Try {{title}}"
+  }
+}

src/i18n/hi.json

@@ -0,0 +1,254 @@
+{
+  "app": {
+    "title": "ओमनी टूल्स",
+    "language": "भाषा"
+  },
+  "navbar": {
+    "home": "होम",
+    "tools": "टूल्स",
+    "buyMeACoffee": "मुझे कॉफी खरीदें"
+  },
+  "resultFooter": {
+    "download": "डाउनलोड",
+    "copy": "क्लिपबोर्ड पर कॉपी करें"
+  },
+  "toolTextResult": {
+    "result": "परिणाम",
+    "loading": "लोड हो रहा है... इसमें कुछ समय लग सकता है।",
+    "copied": "टेक्स्ट कॉपी किया गया",
+    "copyFailed": "कॉपी करने में विफल: {{error}}"
+  },
+  "toolFileResult": {
+    "result": "परिणाम",
+    "loading": "लोड हो रहा है... इसमें कुछ समय लग सकता है।",
+    "copied": "फ़ाइल कॉपी की गई",
+    "copyFailed": "कॉपी करने में विफल: {{error}}"
+  },
+  "toolMultiFileResult": {
+    "result": "परिणाम",
+    "loading": "लोड हो रहा है... इसमें कुछ समय लग सकता है।",
+    "copied": "फ़ाइल कॉपी की गई",
+    "copyFailed": "कॉपी करने में विफल: {{error}}"
+  },
+  "toolTextInput": {
+    "input": "इनपुट टेक्स्ट",
+    "placeholder": "यहाँ अपना टेक्स्ट दर्ज करें...",
+    "copied": "टेक्स्ट कॉपी किया गया",
+    "copyFailed": "कॉपी करने में विफल: {{error}}"
+  },
+  "toolOptions": {
+    "title": "टूल विकल्प"
+  },
+  "hero": {
+    "title": "के साथ जल्दी काम करें",
+    "brand": "ओमनीटूल्स",
+    "description": "ओमनीटूल्स के साथ अपनी उत्पादकता बढ़ाएं, जल्दी काम करने के लिए अंतिम टूलकिट! छवियों, टेक्स्ट, सूचियों और डेटा को संपादित करने के लिए हजारों उपयोगकर्ता-अनुकूल उपयोगिताओं तक पहुंचें, सभी सीधे अपने ब्राउज़र से।",
+    "searchPlaceholder": "सभी टूल्स खोजें",
+    "examples": {
+      "createTransparentImage": "पारदर्शी छवि बनाएं",
+      "prettifyJson": "JSON सुंदर बनाएं",
+      "changeGifSpeed": "GIF गति बदलें",
+      "sortList": "सूची क्रमबद्ध करें",
+      "compressPng": "PNG संपीड़ित करें",
+      "splitText": "टेक्स्ट विभाजित करें",
+      "splitPdf": "PDF विभाजित करें",
+      "trimVideo": "वीडियो ट्रिम करें",
+      "calculateNumberSum": "संख्याओं का योग करें"
+    }
+  },
+  "toolHeader": {
+    "seeExamples": "उदाहरण देखें"
+  },
+  "toolExamples": {
+    "title": "{{title}} उदाहरण",
+    "subtitle": "आज़माने के लिए क्लिक करें!"
+  },
+  "inputFooter": {
+    "importFromFile": "फ़ाइल से आयात करें",
+    "copyToClipboard": "क्लिपबोर्ड पर कॉपी करें",
+    "clear": "साफ़ करें"
+  },
+  "baseFileInput": {
+    "fileCopied": "फ़ाइल कॉपी की गई",
+    "copyFailed": "कॉपी करने में विफल: {{error}}",
+    "dropFileHere": "यहाँ अपनी {{type}} डालें",
+    "selectFileDescription": "यहाँ क्लिक करें अपने डिवाइस से {{type}} चुनने के लिए, Ctrl+V दबाएं क्लिपबोर्ड से {{type}} का उपयोग करने के लिए, या डेस्कटॉप से फ़ाइल को खींचकर डालें"
+  },
+  "toolMultiplePdfInput": {
+    "noFilesSelected": "कोई फ़ाइल चयनित नहीं",
+    "inputTitle": "इनपुट {{type}}"
+  },
+  "toolMultipleAudioInput": {
+    "noFilesSelected": "कोई फ़ाइल चयनित नहीं",
+    "inputTitle": "इनपुट {{type}}"
+  },
+  "numericInputWithUnit": {
+    "unit": "इकाई"
+  },
+  "toolLayout": {
+    "allToolsTitle": "सभी {{type}} टूल्स"
+  },
+  "list": {
+    "group": {
+      "name": "समूह",
+      "description": "सूची आइटम को समूहित करने के लिए दुनिया का सबसे सरल ब्राउज़र-आधारित उपयोगिता। अपनी सूची इनपुट करें और समूहीकरण मानदंड निर्दिष्ट करें ताकि आइटम को तार्किक समूहों में व्यवस्थित किया जा सके। डेटा को वर्गीकृत करने, जानकारी को व्यवस्थित करने, या संरचित सूचियां बनाने के लिए बिल्कुल सही। कस्टम विभाजक और विभिन्न समूहीकरण विकल्पों का समर्थन करता है।",
+      "shortDescription": "सामान्य गुणों द्वारा सूची आइटम को समूहित करें"
+    },
+    "reverse": {
+      "name": "उलटा",
+      "description": "यह एक सुपर सरल ब्राउज़र-आधारित एप्लिकेशन है जो सभी सूची आइटम को उल्टे क्रम में प्रिंट करती है। इनपुट आइटम किसी भी प्रतीक से अलग किए जा सकते हैं और आप उलटे सूची आइटम के विभाजक को भी बदल सकते हैं।",
+      "shortDescription": "जल्दी से सूची को उलटा करें"
+    },
+    "sort": {
+      "name": "क्रमबद्ध",
+      "description": "यह एक सुपर सरल ब्राउज़र-आधारित एप्लिकेशन है जो सूची में आइटम को क्रमबद्ध करती है और उन्हें बढ़ते या घटते क्रम में व्यवस्थित करती है। आप आइटम को वर्णानुक्रमिक, संख्यात्मक, या उनकी लंबाई के अनुसार क्रमबद्ध कर सकते हैं। आप डुप्लिकेट और खाली आइटम को भी हटा सकते हैं, साथ ही उन आइटम को ट्रिम कर सकते हैं जिनके चारों ओर सफेद स्थान है। आप इनपुट सूची आइटम को अलग करने के लिए कोई भी विभाजक वर्ण उपयोग कर सकते हैं या वैकल्पिक रूप से उन्हें अलग करने के लिए एक नियमित अभिव्यक्ति का उपयोग कर सकते हैं। इसके अतिरिक्त, आप क्रमबद्ध आउटपुट सूची के लिए एक नया डिलिमिटर बना सकते हैं।",
+      "shortDescription": "जल्दी से सूची को क्रमबद्ध करें"
+    }
+  },
+  "string": {
+    "uppercase": {
+      "name": "बड़े अक्षर",
+      "description": "टेक्स्ट को बड़े अक्षरों में बदलने के लिए दुनिया का सबसे सरल ब्राउज़र-आधारित उपयोगिता। बस अपना टेक्स्ट इनपुट करें और यह स्वचालित रूप से सभी बड़े अक्षरों में परिवर्तित हो जाएगा। शीर्षक बनाने, टेक्स्ट पर जोर देने, या टेक्स्ट प्रारूप को मानकीकृत करने के लिए बिल्कुल सही। विभिन्न टेक्स्ट प्रारूपों का समर्थन करता है और विशेष वर्णों को संरक्षित करता है।",
+      "shortDescription": "टेक्स्ट को बड़े अक्षरों में बदलें"
+    },
+    "reverse": {
+      "name": "उलटा",
+      "description": "टेक्स्ट को उलटने के लिए दुनिया का सबसे सरल ब्राउज़र-आधारित उपयोगिता। कोई भी टेक्स्ट इनपुट करें और इसे तुरंत उलटा प्राप्त करें, वर्ण दर वर्ण। दर्पण टेक्स्ट बनाने, पैलिंड्रोम का विश्लेषण करने, या टेक्स्ट पैटर्न के साथ खेलने के लिए बिल्कुल सही। उलटते समय स्थान और विशेष वर्णों को संरक्षित करता है।",
+      "shortDescription": "किसी भी टेक्स्ट को वर्ण दर वर्ण उलटा करें"
+    },
+    "repeat": {
+      "name": "टेक्स्ट दोहराएं",
+      "description": "यह टूल आपको वैकल्पिक विभाजक के साथ दिए गए टेक्स्ट को कई बार दोहराने की अनुमति देता है।",
+      "shortDescription": "टेक्स्ट को कई बार दोहराएं"
+    },
+    "createPalindrome": {
+      "name": "पैलिंड्रोम बनाएं",
+      "description": "किसी भी टेक्स्ट से पैलिंड्रोम बनाने के लिए दुनिया का सबसे सरल ब्राउज़र-आधारित उपयोगिता। टेक्स्ट इनपुट करें और इसे तुरंत एक पैलिंड्रोम में बदल दें जो आगे और पीछे एक जैसा पढ़ता है। शब्द खेलों, सममित टेक्स्ट पैटर्न बनाने, या भाषाई जिज्ञासाओं की खोज के लिए बिल्कुल सही।",
+      "shortDescription": "ऐसा टेक्स्ट बनाएं जो आगे और पीछे एक जैसा पढ़ता है"
+    },
+    "palindrome": {
+      "name": "पैलिंड्रोम",
+      "description": "यह जांचने के लिए दुनिया का सबसे सरल ब्राउज़र-आधारित उपयोगिता कि टेक्स्ट पैलिंड्रोम है या नहीं। तुरंत सत्यापित करें कि क्या आपका टेक्स्ट आगे और पीछे एक जैसा पढ़ता है। शब्द पहेलियों, भाषाई विश्लेषण, या सममित टेक्स्ट पैटर्न को मान्य करने के लिए बिल्कुल सही। विभिन्न विभाजकों और बहु-शब्द पैलिंड्रोम पहचान का समर्थन करता है।",
+      "shortDescription": "जांचें कि क्या टेक्स्ट आगे और पीछे एक जैसा पढ़ता है"
+    },
+    "toMorse": {
+      "name": "टेक्स्ट से मोर्स",
+      "description": "टेक्स्ट को मोर्स कोड में बदलने के लिए दुनिया का सबसे सरल ब्राउज़र-आधारित उपयोगिता। बाईं ओर इनपुट फॉर्म में अपना टेक्स्ट लोड करें और आपको तुरंत आउटपुट क्षेत्र में मोर्स कोड मिलेगा। शक्तिशाली, मुफ्त, और तेज़। टेक्स्ट लोड करें – मोर्स कोड प्राप्त करें।",
+      "shortDescription": "टेक्स्ट को जल्दी से मोर्स में एनकोड करें"
+    }
+  },
+  "pdf": {
+    "mergePdf": {
+      "name": "पीडीएफ मर्ज करें",
+      "description": "कई पीडीएफ फ़ाइलों को एक दस्तावेज़ में जोड़ें।",
+      "shortDescription": "कई पीडीएफ फ़ाइलों को एक दस्तावेज़ में मर्ज करें"
+    },
+    "pdfToEpub": {
+      "name": "पीडीएफ से ईपीयूबी",
+      "description": "बेहतर ई-रीडर संगतता के लिए पीडीएफ दस्तावेज़ों को ईपीयूबी फ़ाइलों में बदलें।",
+      "shortDescription": "पीडीएफ फ़ाइलों को ईपीयूबी प्रारूप में बदलें"
+    },
+    "protectPdf": {
+      "name": "पीडीएफ सुरक्षित करें",
+      "description": "अपने ब्राउज़र में सुरक्षित रूप से अपनी पीडीएफ फ़ाइलों में पासवर्ड सुरक्षा जोड़ें",
+      "shortDescription": "पीडीएफ फ़ाइलों को सुरक्षित रूप से पासवर्ड सुरक्षित करें"
+    },
+    "splitPdf": {
+      "name": "पीडीएफ विभाजित करें",
+      "description": "पेज नंबर या श्रेणियों का उपयोग करके पीडीएफ फ़ाइल से विशिष्ट पेज निकालें (उदाहरण के लिए, 1,5-8)",
+      "shortDescription": "पीडीएफ फ़ाइल से विशिष्ट पेज निकालें"
+    },
+    "compressPdf": {
+      "name": "पीडीएफ संपीड़ित करें",
+      "description": "गोस्टस्क्रिप्ट का उपयोग करके गुणवत्ता बनाए रखते हुए पीडीएफ फ़ाइल आकार कम करें",
+      "shortDescription": "अपने ब्राउज़र में सुरक्षित रूप से पीडीएफ फ़ाइलों को संपीड़ित करें"
+    }
+  },
+  "number": {
+    "generate": {
+      "name": "संख्याएं उत्पन्न करें",
+      "description": "अपने ब्राउज़र में पूर्णांकों की सूची की तुरंत गणना करें। अपनी सूची प्राप्त करने के लिए, बस पहला पूर्णांक निर्दिष्ट करें, नीचे विकल्पों में मान और कुल संख्या बदलें, और यह उपयोगिता उतने पूर्णांक उत्पन्न करेगी",
+      "shortDescription": "अपने ब्राउज़र में पूर्णांकों की सूची की तुरंत गणना करें"
+    },
+    "sum": {
+      "name": "संख्याएं जोड़ें",
+      "description": "यह एक सुपर सरल ब्राउज़र-आधारित एप्लिकेशन है जो संख्याओं को जोड़ती है। इनपुट संख्याएं किसी भी प्रतीक से अलग की जा सकती हैं और आप जोड़ी गई संख्याओं के विभाजक को भी बदल सकते हैं।",
+      "shortDescription": "जल्दी से संख्याओं की सूची जोड़ें"
+    }
+  },
+  "audio": {
+    "extractAudio": {
+      "name": "ऑडियो निकालें",
+      "description": "वीडियो फ़ाइल से ऑडियो ट्रैक निकालें और इसे अपने चुने हुए प्रारूप (एएसी, एमपी3, डब्ल्यूएवी) में एक अलग ऑडियो फ़ाइल के रूप में सहेजें।",
+      "shortDescription": "वीडियो फ़ाइलों (एमपी4, एमओवी, आदि) से ऑडियो निकालें एएसी, एमपी3, या डब्ल्यूएवी में।"
+    },
+    "changeSpeed": {
+      "name": "ऑडियो गति बदलें",
+      "description": "ऑडियो फ़ाइलों की प्लेबैक गति बदलें। पिच बनाए रखते हुए ऑडियो को तेज़ या धीमा करें।",
+      "shortDescription": "ऑडियो फ़ाइलों की गति बदलें"
+    }
+  },
+  "csv": {
+    "findIncompleteCsvRecords": {
+      "name": "अधूरे सीएसवी रिकॉर्ड खोजें",
+      "description": "बस नीचे फॉर्म में अपनी सीएसवी फ़ाइल अपलोड करें और यह टूल स्वचालित रूप से जांच करेगा कि क्या कोई पंक्ति या स्तंभ मूल्य नहीं खो रहे हैं। टूल विकल्पों में, आप इनपुट फ़ाइल प्रारूप को समायोजित कर सकते हैं (विभाजक, उद्धरण वर्ण, और टिप्पणी वर्ण निर्दिष्ट करें)। इसके अतिरिक्त, आप खाली मूल्यों की जांच सक्षम कर सकते हैं, खाली पंक्तियों को छोड़ सकते हैं, और आउटपुट में त्रुटि संदेशों की संख्या पर सीमा निर्धारित कर सकते हैं।",
+      "shortDescription": "सीएसवी में जल्दी से पंक्तियां और स्तंभ खोजें जो मूल्य खो रहे हैं।"
+    }
+  },
+  "categories": {
+    "string": {
+      "title": "टेक्स्ट टूल्स",
+      "description": "टेक्स्ट के साथ काम करने के लिए टूल्स – टेक्स्ट को छवियों में बदलें, टेक्स्ट खोजें और बदलें, टेक्स्ट को टुकड़ों में विभाजित करें, टेक्स्ट पंक्तियों को जोड़ें, टेक्स्ट दोहराएं, और बहुत कुछ।"
+    },
+    "png": {
+      "title": "PNG टूल्स",
+      "description": "PNG छवियों के साथ काम करने के लिए टूल्स – PNG को JPG में बदलें, पारदर्शी PNG बनाएं, PNG रंग बदलें, क्रॉप, घुमाएं, PNG का आकार बदलें, और बहुत कुछ।"
+    },
+    "number": {
+      "title": "संख्या टूल्स",
+      "description": "संख्याओं के साथ काम करने के लिए टूल्स – संख्या अनुक्रम उत्पन्न करें, संख्याओं को शब्दों में और शब्दों को संख्याओं में बदलें, क्रमबद्ध करें, गोल करें, संख्याओं का गुणनखंड करें, और बहुत कुछ।"
+    },
+    "gif": {
+      "title": "GIF टूल्स",
+      "description": "GIF एनिमेशन के साथ काम करने के लिए टूल्स – पारदर्शी GIF बनाएं, GIF फ्रेम निकालें, GIF में टेक्स्ट जोड़ें, क्रॉप, घुमाएं, GIF को उलटा करें, और बहुत कुछ।"
+    },
+    "list": {
+      "title": "सूची टूल्स",
+      "description": "सूचियों के साथ काम करने के लिए टूल्स – क्रमबद्ध करें, उलटा करें, सूचियों को यादृच्छिक करें, अद्वितीय और डुप्लिकेट सूची आइटम खोजें, सूची आइटम विभाजक बदलें, और बहुत कुछ।"
+    },
+    "json": {
+      "title": "JSON टूल्स",
+      "description": "JSON डेटा संरचनाओं के साथ काम करने के लिए टूल्स – JSON ऑब्जेक्ट को सुंदर और संक्षिप्त करें, JSON सरणियों को समतल करें, JSON मूल्यों को स्ट्रिंगिफाई करें, डेटा का विश्लेषण करें, और बहुत कुछ"
+    },
+    "time": {
+      "title": "समय टूल्स",
+      "description": "समय और तिथि के साथ काम करने के लिए टूल्स – समय अंतर की गणना करें, समय क्षेत्रों के बीच बदलें, तिथियों को फॉर्मेट करें, तिथि अनुक्रम उत्पन्न करें, और बहुत कुछ।"
+    },
+    "csv": {
+      "title": "CSV टूल्स",
+      "description": "CSV फ़ाइलों के साथ काम करने के लिए टूल्स - CSV को विभिन्न प्रारूपों में बदलें, CSV डेटा में हेरफेर करें, CSV संरचना को मान्य करें, और CSV फ़ाइलों को कुशलतापूर्वक संसाधित करें।"
+    },
+    "video": {
+      "title": "वीडियो टूल्स",
+      "description": "वीडियो के साथ काम करने के लिए टूल्स – वीडियो से फ्रेम निकालें, वीडियो से GIF बनाएं, वीडियो को विभिन्न प्रारूपों में बदलें, और बहुत कुछ।"
+    },
+    "pdf": {
+      "title": "PDF टूल्स",
+      "description": "PDF फ़ाइलों के साथ काम करने के लिए टूल्स - PDF से टेक्स्ट निकालें, PDF को अन्य प्रारूपों में बदलें, PDF में हेरफेर करें, और बहुत कुछ।"
+    },
+    "image-generic": {
+      "title": "छवि टूल्स",
+      "description": "चित्रों के साथ काम करने के लिए टूल्स – संपीड़ित करें, आकार बदलें, क्रॉप करें, JPG में बदलें, घुमाएं, पृष्ठभूमि हटाएं और बहुत कुछ।"
+    },
+    "audio": {
+      "title": "ऑडियो टूल्स",
+      "description": "ऑडियो के साथ काम करने के लिए टूल्स – वीडियो से ऑडियो निकालें, ऑडियो गति समायोजित करें, कई ऑडियो फ़ाइलों को मर्ज करें और बहुत कुछ।"
+    },
+    "xml": {
+      "title": "XML टूल्स",
+      "description": "XML डेटा संरचनाओं के साथ काम करने के लिए टूल्स - व्यूअर, ब्यूटिफायर, वैलिडेटर और बहुत कुछ"
+    },
+    "seeAll": "सभी {{title}} देखें",
+    "try": "{{title}} आज़माएं"
+  }
+}

src/i18n/index.ts

@@ -0,0 +1,35 @@
+import i18n, { ParseKeys } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import Backend from 'i18next-http-backend';
+
+export const validNamespaces: string[] = [
+  'string',
+  'number',
+  'video',
+  'list',
+  'json',
+  'time',
+  'csv',
+  'pdf',
+  'audio',
+  'xml',
+  'translation',
+  'image'
+];
+export type I18nNamespaces = (typeof validNamespaces)[number];
+export type FullI18nKey = {
+  [K in I18nNamespaces]: `${K}:${ParseKeys<K>}`;
+}[I18nNamespaces];
+
+i18n
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem('lang') || 'en',
+    fallbackLng: 'en',
+    backend: {
+      loadPath: '/locales/{{lng}}/{{ns}}.json'
+    }
+  });
+
+export default i18n;

src/pages/home/Categories.tsx

@@ -7,6 +7,8 @@ import Button from '@mui/material/Button';
 import { useState } from 'react';
 import { categoriesColors } from 'config/uiConfig';
 import { Icon } from '@iconify/react';
+import { useTranslation } from 'react-i18next';
+import { getI18nNamespaceFromToolCategory } from '@utils/string';
 
 type ArrayElement<ArrayType extends readonly unknown[]> =
   ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
@@ -18,10 +20,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('categories.seeAll', 'See all {{title}}', {
+    title: categoryTitle
+  });
+  const tryText = t('categories.try', 'Try {{title}}', {
+    //@ts-ignore
+    title: t(category.example.title)
+  });
+
   return (
     <Grid
       item
@@ -60,10 +78,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 mt={1} container spacing={2}>
               <Grid item xs={12} md={6}>
@@ -71,7 +89,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
@@ -79,7 +99,9 @@ const SingleCategory = function ({
                   fullWidth
                   onClick={() => navigate(category.example.path)}
                   variant={'outlined'}
-                >{`Try ${category.example.title}`}</Button>
+                >
+                  {tryText}
+                </Button>
               </Grid>
             </Grid>
           </Stack>

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>

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

@@ -2,8 +2,8 @@ import {
   Box,
   Divider,
   Stack,
-  TextField,
   styled,
+  TextField,
   useTheme
 } from '@mui/material';
 import Grid from '@mui/material/Grid';
@@ -11,16 +11,19 @@ import Typography from '@mui/material/Typography';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { filterTools, getToolsByCategory } from '../../tools';
 import Hero from 'components/Hero';
-import { capitalizeFirstLetter, getToolCategoryTitle } from '@utils/string';
+import {
+  getI18nNamespaceFromToolCategory,
+  getToolCategoryTitle
+} from '@utils/string';
 import { Icon } from '@iconify/react';
 import { categoriesColors } from 'config/uiConfig';
 import React, { useEffect } from 'react';
 import IconButton from '@mui/material/IconButton';
-import { ArrowBack } from '@mui/icons-material';
-import BackButton from '@components/BackButton';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SearchIcon from '@mui/icons-material/Search';
 import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
+import { I18nNamespaces } from '../../i18n';
 
 const StyledLink = styled(Link)(({ theme }) => ({
   '&:hover': {
@@ -34,6 +37,17 @@ export default function ToolsByCategory() {
   const { categoryName } = useParams();
   const [searchTerm, setSearchTerm] = React.useState<string>('');
   const rawTitle = getToolCategoryTitle(categoryName as string);
+  // First get tools by category without filtering
+  const toolsByCategory =
+    getToolsByCategory().find(({ type }) => type === categoryName)?.tools ?? [];
+
+  const namespace =
+    toolsByCategory.length > 0
+      ? getI18nNamespaceFromToolCategory(toolsByCategory[0].type)
+      : 'translation';
+  const { t } = useTranslation(namespace);
+
+  const categoryTools = filterTools(toolsByCategory, searchTerm, t);
 
   useEffect(() => {
     if (mainContentRef.current) {
@@ -82,11 +96,7 @@ export default function ToolsByCategory() {
           />
         </Stack>
         <Grid container spacing={2} mt={2}>
-          {filterTools(
-            getToolsByCategory().find(({ type }) => type === categoryName)
-              ?.tools ?? [],
-            searchTerm
-          ).map((tool, index) => (
+          {categoryTools.map((tool, index) => (
             <Grid item xs={12} md={6} lg={4} key={tool.path}>
               <Stack
                 sx={{
@@ -120,10 +130,12 @@ export default function ToolsByCategory() {
                     }}
                     to={'/' + tool.path}
                   >
-                    {tool.name}
+                    {/*@ts-ignore*/}
+                    {t(tool.name)}
                   </StyledLink>
                   <Typography sx={{ mt: 2 }}>
-                    {tool.shortDescription}
+                    {/*@ts-ignore*/}
+                    {t(tool.shortDescription)}
                   </Typography>
                 </Box>
               </Stack>

src/pages/tools/audio/change-speed/index.tsx

@@ -9,6 +9,7 @@ import ToolFileResult from '@components/result/ToolFileResult';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import RadioWithTextField from '@components/options/RadioWithTextField';
 import { changeAudioSpeed } from './service';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {
   newSpeed: 2,
@@ -25,6 +26,7 @@ export default function ChangeSpeed({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation('audio');
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
   const [loading, setLoading] = useState(false);
@@ -49,20 +51,20 @@ export default function ChangeSpeed({
     updateField
   }) => [
     {
-      title: 'New Audio Speed',
+      title: t('changeSpeed.newAudioSpeed'),
       component: (
         <Box>
           <TextFieldWithDesc
             value={values.newSpeed.toString()}
             onOwnChange={(val) => updateField('newSpeed', Number(val))}
-            description="Default multiplier: 2 means 2x faster"
+            description={t('changeSpeed.speedDescription')}
             type="number"
           />
         </Box>
       )
     },
     {
-      title: 'Output Format',
+      title: t('changeSpeed.outputFormat'),
       component: (
         <Box mt={2}>
           <RadioGroup
@@ -96,15 +98,19 @@ export default function ChangeSpeed({
         <ToolAudioInput
           value={input}
           onChange={setInput}
-          title={'Input Audio'}
+          title={t('changeSpeed.inputTitle')}
         />
       }
       resultComponent={
         loading ? (
-          <ToolFileResult title="Setting Speed" value={null} loading={true} />
+          <ToolFileResult
+            title={t('changeSpeed.settingSpeed')}
+            value={null}
+            loading={true}
+          />
         ) : (
           <ToolFileResult
-            title="Edited Audio"
+            title={t('changeSpeed.resultTitle')}
             value={result}
             extension={result ? result.name.split('.').pop() : undefined}
           />
@@ -114,7 +120,10 @@ export default function ChangeSpeed({
       getGroups={getGroups}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('changeSpeed.toolInfo.title', { title }),
+        description: longDescription
+      }}
     />
   );
 }

src/pages/tools/audio/change-speed/meta.ts

@@ -2,12 +2,24 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('audio', {
-  name: 'Change speed',
   path: 'change-speed',
-  icon: 'material-symbols-light:speed-outline',
-  description:
-    'This online utility lets you change the speed of an audio. You can speed it up or slow it down.',
-  shortDescription: 'Quickly change audio speed',
-  keywords: ['change', 'speed'],
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:speed',
+
+  keywords: [
+    'audio',
+    'speed',
+    'tempo',
+    'playback',
+    'accelerate',
+    'slow down',
+    'pitch',
+    'media'
+  ],
+
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'audio:changeSpeed.title',
+    description: 'audio:changeSpeed.description',
+    shortDescription: 'audio:changeSpeed.shortDescription'
+  }
 });

src/pages/tools/audio/extract-audio/index.tsx

@@ -8,6 +8,7 @@ import ToolVideoInput from '@components/input/ToolVideoInput';
 import { GetGroupsType } from '@components/options/ToolOptions';
 import ToolFileResult from '@components/result/ToolFileResult';
 import SelectWithDesc from '@components/options/SelectWithDesc';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {
   outputFormat: 'aac'
@@ -17,6 +18,7 @@ export default function ExtractAudio({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation('audio');
   const [file, setFile] = useState<File | null>(null);
   const [audioFile, setAudioFile] = useState<File | null>(null);
   const [loading, setLoading] = useState(false);
@@ -27,7 +29,7 @@ export default function ExtractAudio({
   }) => {
     return [
       {
-        title: 'Output Format',
+        title: t('extractAudio.outputFormat'),
         component: (
           <Box>
             <SelectWithDesc
@@ -40,9 +42,7 @@ export default function ExtractAudio({
                 { label: 'MP3', value: 'mp3' },
                 { label: 'WAV', value: 'wav' }
               ]}
-              description={
-                'Select the format for the audio to be extracted as.'
-              }
+              description={t('extractAudio.outputFormatDescription')}
             />
           </Box>
         )
@@ -68,23 +68,33 @@ export default function ExtractAudio({
       title={title}
       input={file}
       inputComponent={
-        <ToolVideoInput value={file} onChange={setFile} title={'Input Video'} />
+        <ToolVideoInput
+          value={file}
+          onChange={setFile}
+          title={t('extractAudio.inputTitle')}
+        />
       }
       resultComponent={
         loading ? (
           <ToolFileResult
-            title={'Extracting Audio'}
+            title={t('extractAudio.extractingAudio')}
             value={null}
             loading={true}
           />
         ) : (
-          <ToolFileResult title={'Extracted Audio'} value={audioFile} />
+          <ToolFileResult
+            title={t('extractAudio.resultTitle')}
+            value={audioFile}
+          />
         )
       }
       initialValues={initialValues}
       getGroups={getGroups}
       compute={compute}
-      toolInfo={{ title: `What is ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('extractAudio.toolInfo.title', { title }),
+        description: longDescription
+      }}
       setInput={setFile}
     />
   );

src/pages/tools/audio/extract-audio/meta.ts

@@ -2,13 +2,9 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('audio', {
-  name: 'Extract audio',
   path: 'extract-audio',
   icon: 'mdi:music-note',
-  description:
-    'Extract the audio track from a video file and save it as a separate audio file in your chosen format (AAC, MP3, WAV).',
-  shortDescription:
-    'Extract audio from video files (MP4, MOV, etc.) to AAC, MP3, or WAV.',
+
   keywords: [
     'extract',
     'audio',
@@ -20,7 +16,11 @@ export const tool = defineTool('audio', {
     'media',
     'convert'
   ],
-  longDescription:
-    'This tool allows you to extract the audio track from a video file (such as MP4, MOV, AVI, etc.) and save it as a standalone audio file in your preferred format (AAC, MP3, or WAV). Useful for podcasts, music, or any scenario where you need just the audio from a video.',
-  component: lazy(() => import('./index'))
+
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'audio:extractAudio.title',
+    description: 'audio:extractAudio.description',
+    shortDescription: 'audio:extractAudio.shortDescription'
+  }
 });

src/pages/tools/audio/i18n/en.json

@@ -0,0 +1,43 @@
+{
+  "extractAudio": {
+    "title": "Extract Audio from Video",
+    "description": "Extract audio track from video files.",
+    "inputTitle": "Input Video",
+    "resultTitle": "Extracted Audio",
+    "outputFormat": "Output Format",
+    "outputFormatDescription": "Select the format for the audio to be extracted as.",
+    "extractingAudio": "Extracting Audio",
+    "toolInfo": {
+      "title": "What is {{title}}?",
+      "description": "This tool allows you to extract the audio track from video files. You can choose from different audio formats including AAC, MP3, and WAV."
+    },
+    "shortDescription": "Extract audio from video files (MP4, MOV, etc.) to AAC, MP3, or WAV."
+  },
+  "changeSpeed": {
+    "title": "Change audio speed",
+    "description": "Change the playback speed of audio files. Speed up or slow down audio while maintaining pitch.",
+    "shortDescription": "Change the speed of audio files",
+    "newAudioSpeed": "New Audio Speed",
+    "speedDescription": "Default multiplier: 2 means 2x faster",
+    "outputFormat": "Output Format",
+    "inputTitle": "Input Audio",
+    "settingSpeed": "Setting Speed",
+    "resultTitle": "Edited Audio",
+    "toolInfo": {
+      "title": "What is {{title}}?",
+      "description": ""
+    }
+  },
+  "mergeAudio": {
+    "title": "Merge Audio",
+    "description": "Combine multiple audio files into a single audio file by concatenating them in sequence.",
+    "shortDescription": "Merge multiple audio files into one (MP3, AAC, WAV).",
+    "longDescription": "This tool allows you to merge multiple audio files into a single file by concatenating them in the order you upload them. Perfect for combining podcast segments, music tracks, or any audio files that need to be joined together. Supports various audio formats including MP3, AAC, and WAV."
+  },
+  "trim": {
+    "title": "Trim Audio",
+    "description": "Cut and trim audio files to extract specific segments by specifying start and end times.",
+    "shortDescription": "Trim audio files to extract specific time segments (MP3, AAC, WAV).",
+    "longDescription": "This tool allows you to trim audio files by specifying start and end times. You can extract specific segments from longer audio files, remove unwanted parts, or create shorter clips. Supports various audio formats including MP3, AAC, and WAV. Perfect for podcast editing, music production, or any audio editing needs."
+  }
+}

src/pages/tools/audio/i18n/hi.json

@@ -0,0 +1,64 @@
+{
+  "extractAudio": {
+    "title": "ऑडियो निकालें",
+    "description": "वीडियो फ़ाइल से ऑडियो ट्रैक निकालें।",
+    "inputTitle": "इनपुट वीडियो",
+    "resultTitle": "निकाला गया ऑडियो",
+    "extractionOptions": "निकालने के विकल्प",
+    "audioFormat": "ऑडियो प्रारूप",
+    "formatAac": "AAC",
+    "formatMp3": "MP3",
+    "formatWav": "WAV",
+    "audioQuality": "ऑडियो गुणवत्ता",
+    "qualityHigh": "उच्च",
+    "qualityMedium": "मध्यम",
+    "qualityLow": "कम",
+    "extractAllTracks": "सभी ट्रैक निकालें"
+  },
+  "changeSpeed": {
+    "title": "ऑडियो गति बदलें",
+    "description": "ऑडियो फ़ाइलों की प्लेबैक गति बदलें।",
+    "inputTitle": "इनपुट ऑडियो",
+    "resultTitle": "गति बदली गई ऑडियो",
+    "speedOptions": "गति विकल्प",
+    "speedFactor": "गति कारक",
+    "factorPlaceholder": "कारक (जैसे 0.5, 1.5, 2.0)",
+    "preservePitch": "पिच संरक्षित करें",
+    "outputFormat": "आउटपुट प्रारूप",
+    "formatMp3": "MP3",
+    "formatWav": "WAV",
+    "formatAac": "AAC"
+  },
+  "mergeAudio": {
+    "title": "ऑडियो मर्ज करें",
+    "description": "कई ऑडियो फ़ाइलों को एक में जोड़ें।",
+    "inputTitle": "इनपुट ऑडियो फ़ाइलें",
+    "resultTitle": "मर्ज किया गया ऑडियो",
+    "mergeOptions": "मर्ज विकल्प",
+    "mergeMethod": "मर्ज विधि",
+    "methodConcat": "क्रमबद्ध जोड़ना",
+    "methodMix": "मिश्रण",
+    "outputFormat": "आउटपुट प्रारूप",
+    "formatMp3": "MP3",
+    "formatWav": "WAV",
+    "formatAac": "AAC"
+  },
+  "trim": {
+    "title": "ऑडियो ट्रिम करें",
+    "description": "ऑडियो फ़ाइल से अनावश्यक भाग हटाएं।",
+    "inputTitle": "इनपुट ऑडियो",
+    "resultTitle": "ट्रिम किया गया ऑडियो",
+    "trimOptions": "ट्रिम विकल्प",
+    "startTime": "शुरुआती समय",
+    "startPlaceholder": "सेकंड",
+    "endTime": "अंतिम समय",
+    "endPlaceholder": "सेकंड",
+    "fadeIn": "फेड इन",
+    "fadeInPlaceholder": "सेकंड",
+    "fadeOut": "फेड आउट",
+    "fadeOutPlaceholder": "सेकंड",
+    "outputFormat": "आउटपुट प्रारूप",
+    "formatMp3": "MP3",
+    "formatWav": "WAV"
+  }
+}

src/pages/tools/audio/merge-audio/meta.ts

@@ -2,12 +2,16 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('audio', {
-  name: 'Merge Audio',
+  i18n: {
+    name: 'audio:mergeAudio.title',
+    description: 'audio:mergeAudio.description',
+    shortDescription: 'audio:mergeAudio.shortDescription',
+    longDescription: 'audio:mergeAudio.longDescription'
+  },
+
   path: 'merge-audio',
   icon: 'fluent:merge-20-regular',
-  description:
-    'Combine multiple audio files into a single audio file by concatenating them in sequence.',
-  shortDescription: 'Merge multiple audio files into one (MP3, AAC, WAV).',
+
   keywords: [
     'merge',
     'audio',
@@ -20,7 +24,6 @@ export const tool = defineTool('audio', {
     'audio editing',
     'multiple files'
   ],
-  longDescription:
-    'This tool allows you to merge multiple audio files into a single file by concatenating them in the order you upload them. Perfect for combining podcast segments, music tracks, or any audio files that need to be joined together. Supports various audio formats including MP3, AAC, and WAV.',
+
   component: lazy(() => import('./index'))
 });

src/pages/tools/audio/trim/meta.ts

@@ -2,13 +2,16 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('audio', {
-  name: 'Trim Audio',
+  i18n: {
+    name: 'audio:trim.title',
+    description: 'audio:trim.description',
+    shortDescription: 'audio:trim.shortDescription',
+    longDescription: 'audio:trim.longDescription'
+  },
+
   path: 'trim',
   icon: 'mdi:scissors-cutting',
-  description:
-    'Cut and trim audio files to extract specific segments by specifying start and end times.',
-  shortDescription:
-    'Trim audio files to extract specific time segments (MP3, AAC, WAV).',
+
   keywords: [
     'trim',
     'audio',
@@ -21,7 +24,6 @@ export const tool = defineTool('audio', {
     'audio editing',
     'time'
   ],
-  longDescription:
-    'This tool allows you to trim audio files by specifying start and end times. You can extract specific segments from longer audio files, remove unwanted parts, or create shorter clips. Supports various audio formats including MP3, AAC, and WAV. Perfect for podcast editing, music production, or any audio editing needs.',
+
   component: lazy(() => import('./index'))
 });

src/pages/tools/csv/change-csv-separator/meta.ts

@@ -2,14 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('csv', {
-  name: 'Change CSV separator',
   path: 'change-csv-separator',
-  icon: 'material-symbols:split-scene-rounded',
-  description:
-    'Just upload your CSV file in the form below and it will automatically get a new column delimiter character. In the tool options, you can specify which delimiter and quote characters are used in the source CSV file and customize the desired delimiter and quote characters for the output CSV. You can also filter the input CSV before the conversion process and skip blank lines and comment lines.',
-  shortDescription: 'Quickly change the CSV column delimiter to a new symbol.',
-  keywords: ['change', 'csv', 'sepa rator'],
-  longDescription:
-    'This tool changes the field separator in CSV (Comma Separated Values) files. This is useful because different programs may use different default separators. While a comma is the most common separator in CSV files, some programs require files to be tab-separated (TSV), semicolon-separated (SSV), pipe-separated (PSV), or have another separation symbol. The default comma may not be so convenient as a delimiter in CSV files because commas are frequently present within fields. In such cases, it can be difficult and confusing to distinguish between commas as delimiters and commas as punctuation symbols. By replacing the comma with another delimiter, you can convert the file into a more easily readable and parsable format. In the options section of this tool, you can configure both the input and output CSV file formats. For the input CSV, you can specify its current delimiter (by default, it is a comma) and also indicate the quotation mark character used to wrap fields. For the output CSV, you can set a new delimiter, choose a new quotation mark character, and optionally enclose all the fields in quotes. Additionally, you have the option to remove empty lines from the input CSV and eliminate comment lines that start with a specified character (usually a hash "#" or double slashes "//"). Csv-abulous!',
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:code',
+
+  keywords: ['csv', 'separator', 'delimiter', 'change'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'csv:changeCsvSeparator.title',
+    description: 'csv:changeCsvSeparator.description',
+    shortDescription: 'csv:changeCsvSeparator.shortDescription'
+  }
 });

src/pages/tools/csv/csv-rows-to-columns/meta.ts

@@ -2,14 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('csv', {
-  name: 'Convert CSV Rows to Columns',
+  i18n: {
+    name: 'csv:csvRowsToColumns.title',
+    description: 'csv:csvRowsToColumns.description',
+    shortDescription: 'csv:csvRowsToColumns.shortDescription',
+    longDescription: 'csv:csvRowsToColumns.longDescription'
+  },
   path: 'csv-rows-to-columns',
   icon: 'fluent:text-arrow-down-right-column-24-filled',
-  description:
-    'This tool converts rows of a CSV (Comma Separated Values) file into columns. It extracts the horizontal lines from the input CSV one by one, rotates them 90 degrees, and outputs them as vertical columns one after another, separated by commas.',
-  longDescription:
-    'This tool converts rows of a CSV (Comma Separated Values) file into columns. For example, if the input CSV data has 6 rows, then the output will have 6 columns and the elements of the rows will be arranged from the top to bottom. In a well-formed CSV, the number of values in each row is the same. However, in cases when rows are missing fields, the program can fix them and you can choose from the available options: fill missing data with empty elements or replace missing data with custom elements, such as "missing", "?", or "x". During the conversion process, the tool also cleans the CSV file from unnecessary information, such as empty lines (these are lines without visible information) and comments. To help the tool correctly identify comments, in the options, you can specify the symbol at the beginning of a line that starts a comment. This symbol is typically a hash "#" or double slash "//". Csv-abulous!.',
-  shortDescription: 'Convert CSV rows to columns.',
   keywords: ['csv', 'rows', 'columns', 'transpose'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/csv/csv-to-json/index.tsx

@@ -6,10 +6,9 @@ import { convertCsvToJson } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
 import { Box } from '@mui/material';
-import RadioWithTextField from '@components/options/RadioWithTextField';
-import SimpleRadio from '@components/options/SimpleRadio';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import { useTranslation } from 'react-i18next';
 
 type InitialValuesType = {
   delimiter: string;
@@ -114,6 +113,7 @@ id,name,active
 ];
 
 export default function CsvToJson({ title }: ToolComponentProps) {
+  const { t } = useTranslation('csv');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -148,28 +148,36 @@ export default function CsvToJson({ title }: ToolComponentProps) {
       compute={compute}
       exampleCards={exampleCards}
       inputComponent={
-        <ToolTextInput title="Input CSV" value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('csvToJson.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
-        <ToolTextResult title="Output JSON" value={result} extension={'json'} />
+        <ToolTextResult
+          title={t('csvToJson.resultTitle')}
+          value={result}
+          extension={'json'}
+        />
       }
       getGroups={({ values, updateField }) => [
         {
-          title: 'Input CSV Format',
+          title: t('csvToJson.inputCsvFormat'),
           component: (
             <Box>
               <TextFieldWithDesc
-                description="Column Separator"
+                description={t('csvToJson.columnSeparator')}
                 value={values.delimiter}
                 onOwnChange={(val) => updateField('delimiter', val)}
               />
               <TextFieldWithDesc
-                description="Field Quote"
+                description={t('csvToJson.fieldQuote')}
                 onOwnChange={(val) => updateField('quote', val)}
                 value={values.quote}
               />
               <TextFieldWithDesc
-                description="Comment Symbol"
+                description={t('csvToJson.commentSymbol')}
                 value={values.comment}
                 onOwnChange={(val) => updateField('comment', val)}
               />
@@ -177,26 +185,26 @@ export default function CsvToJson({ title }: ToolComponentProps) {
           )
         },
         {
-          title: 'Conversion Options',
+          title: t('csvToJson.conversionOptions'),
           component: (
             <Box>
               <CheckboxWithDesc
                 checked={values.useHeaders}
                 onChange={(value) => updateField('useHeaders', value)}
-                title="Use Headers"
-                description="First row is treated as column headers"
+                title={t('csvToJson.useHeaders')}
+                description={t('csvToJson.useHeadersDescription')}
               />
               <CheckboxWithDesc
                 checked={values.skipEmptyLines}
                 onChange={(value) => updateField('skipEmptyLines', value)}
-                title="Skip Empty Lines"
-                description="Don't process empty lines in the CSV"
+                title={t('csvToJson.skipEmptyLines')}
+                description={t('csvToJson.skipEmptyLinesDescription')}
               />
               <CheckboxWithDesc
                 checked={values.dynamicTypes}
                 onChange={(value) => updateField('dynamicTypes', value)}
-                title="Dynamic Types"
-                description="Convert numbers and booleans to their proper types"
+                title={t('csvToJson.dynamicTypes')}
+                description={t('csvToJson.dynamicTypesDescription')}
               />
             </Box>
           )

src/pages/tools/csv/csv-to-json/meta.ts

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('csv', {
-  name: 'Convert CSV to JSON',
+  i18n: {
+    name: 'csv:csvToJson.title',
+    description: 'csv:csvToJson.description',
+    shortDescription: 'csv:csvToJson.shortDescription'
+  },
+
   path: 'csv-to-json',
   icon: 'lets-icons:json-light',
-  description:
-    'Convert CSV files to JSON format with customizable options for delimiters, quotes, and output formatting. Support for headers, comments, and dynamic type conversion.',
-  shortDescription: 'Convert CSV data to JSON format.',
+
   keywords: ['csv', 'json', 'convert', 'transform', 'parse'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/csv/csv-to-tsv/meta.ts

@@ -2,14 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('csv', {
-  name: 'Convert CSV to TSV',
+  i18n: {
+    name: 'csv:csvToTsv.title',
+    description: 'csv:csvToTsv.description',
+    shortDescription: 'csv:csvToTsv.shortDescription',
+    longDescription: 'csv:csvToTsv.longDescription'
+  },
+
   path: 'csv-to-tsv',
   icon: 'codicon:keyboard-tab',
-  description:
-    'Upload your CSV file in the form below and it will automatically get converted to a TSV file. In the tool options, you can customize the input CSV format – specify the field delimiter, quotation character, and comment symbol, as well as skip empty CSV lines, and choose whether to preserve CSV column headers.',
-  shortDescription: 'Convert CSV data to TSV format.',
-  longDescription:
-    'This tool transforms Comma Separated Values (CSV) data to Tab Separated Values (TSV) data. Both CSV and TSV are popular file formats for storing tabular data but they use different delimiters to separate values – CSV uses commas (","), while TSV uses tabs ("\t"). If we compare CSV files to TSV files, then CSV files are much harder to parse than TSV files because the values themselves may contain commas, so it is not always obvious where one field starts and ends without complicated parsing rules. TSV, on the other hand, uses just a tab symbol, which does not usually appear in data, so separating fields in TSV is as simple as splitting the input by the tab character. To convert CSV to TSV, simply input the CSV data in the input of this tool. In rare cases when a CSV file has a delimiter other than a comma, you can specify the current delimiter in the options of the tool. You can also specify the current quote character and the comment start character. Additionally, empty CSV lines can be skipped by activating the "Ignore Lines with No Data" option. If this option is off, then empty lines in the CSV are converted to empty TSV lines. The "Preserve Headers" option allows you to choose whether to process column headers of a CSV file. If the option is selected, then the resulting TSV file will include the first row of the input CSV file, which contains the column names. Alternatively, if the headers option is not selected, the first row will be skipped during the data conversion process. For the reverse conversion from TSV to CSV, you can use our Convert TSV to CSV tool. Csv-abulous!',
   keywords: ['csv', 'tsv', 'convert', 'transform', 'parse'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/csv/csv-to-xml/meta.ts

@@ -2,11 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('csv', {
-  name: 'Convert CSV to XML',
+  i18n: {
+    name: 'csv:csvToXml.title',
+    description: 'csv:csvToXml.description',
+    shortDescription: 'csv:csvToXml.shortDescription'
+  },
+
   path: 'csv-to-xml',
   icon: 'mdi-light:xml',
-  description: 'Convert CSV files to XML format with customizable options.',
-  shortDescription: 'Convert CSV data to XML format.',
+
   keywords: ['csv', 'xml', 'convert', 'transform', 'parse'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/csv/csv-to-yaml/meta.ts

@@ -2,14 +2,16 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('csv', {
-  name: 'Convert CSV to YAML',
+  i18n: {
+    name: 'csv:csvToYaml.title',
+    description: 'csv:csvToYaml.description',
+    shortDescription: 'csv:csvToYaml.shortDescription',
+    longDescription: 'csv:csvToYaml.longDescription'
+  },
+
   path: 'csv-to-yaml',
   icon: 'nonicons:yaml-16',
-  description:
-    'Just upload your CSV file in the form below and it will automatically get converted to a YAML file. In the tool options, you can specify the field delimiter character, field quote character, and comment character to adapt the tool to custom CSV formats. Additionally, you can select the output YAML format: one that preserves CSV headers or one that excludes CSV headers.',
-  shortDescription: 'Quickly convert a CSV file to a YAML file.',
   keywords: ['csv', 'to', 'yaml'],
-  longDescription:
-    'This tool transforms CSV (Comma Separated Values) data into the YAML (Yet Another Markup Language) data. CSV is a simple, tabular format that is used to represent matrix-like data types consisting of rows and columns. YAML, on the other hand, is a more advanced format (actually a superset of JSON), which creates more human-readable data for serialization, and it supports lists, dictionaries, and nested objects. This program supports various input CSV formats – the input data can be comma-separated (default), semicolon-separated, pipe-separated, or use another completely different delimiter. You can specify the exact delimiter your data uses in the options. Similarly, in the options, you can specify the quote character that is used to wrap CSV fields (by default a double-quote symbol). You can also skip lines that start with comments by specifying the comment symbols in the options. This allows you to keep your data clean by skipping unnecessary lines. There are two ways to convert CSV to YAML. The first method converts each CSV row into a YAML list. The second method extracts headers from the first CSV row and creates YAML objects with keys based on these headers. You can also customize the output YAML format by specifying the number of spaces for indenting YAML structures. If you need to perform the reverse conversion, that is, transform YAML into CSV, you can use our Convert YAML to CSV tool. Csv-abulous!',
+
   component: lazy(() => import('./index'))
 });

src/pages/tools/csv/find-incomplete-csv-records/index.tsx

@@ -10,6 +10,7 @@ import { findIncompleteCsvRecords } from './service';
 import { InitialValuesType } from './types';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {
   csvSeparator: ',',
@@ -103,6 +104,7 @@ export default function FindIncompleteCsvRecords({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation('csv');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -115,55 +117,57 @@ export default function FindIncompleteCsvRecords({
     updateField
   }) => [
     {
-      title: 'Csv input Options',
+      title: t('findIncompleteCsvRecords.csvInputOptions'),
       component: (
         <Box>
           <TextFieldWithDesc
             value={values.csvSeparator}
             onOwnChange={(val) => updateField('csvSeparator', val)}
-            description={
-              'Enter the character used to delimit columns in the CSV input file.'
-            }
+            description={t('findIncompleteCsvRecords.csvSeparatorDescription')}
           />
           <TextFieldWithDesc
             value={values.quoteCharacter}
             onOwnChange={(val) => updateField('quoteCharacter', val)}
-            description={
-              'Enter the quote character used to quote the CSV input fields.'
-            }
+            description={t(
+              'findIncompleteCsvRecords.quoteCharacterDescription'
+            )}
           />
           <TextFieldWithDesc
             value={values.commentCharacter}
             onOwnChange={(val) => updateField('commentCharacter', val)}
-            description={
-              'Enter the character indicating the start of a comment line. Lines starting with this symbol will be skipped.'
-            }
+            description={t(
+              'findIncompleteCsvRecords.commentCharacterDescription'
+            )}
           />
         </Box>
       )
     },
     {
-      title: 'Checking Options',
+      title: t('findIncompleteCsvRecords.checkingOptions'),
       component: (
         <Box>
           <CheckboxWithDesc
             checked={values.emptyLines}
             onChange={(value) => updateField('emptyLines', value)}
-            title="Delete Lines with No Data"
-            description="Remove empty lines from CSV input file."
+            title={t('findIncompleteCsvRecords.deleteLinesWithNoData')}
+            description={t(
+              'findIncompleteCsvRecords.deleteLinesWithNoDataDescription'
+            )}
           />
 
           <CheckboxWithDesc
             checked={values.emptyValues}
             onChange={(value) => updateField('emptyValues', value)}
-            title="Find Empty Values"
-            description="Display a message about CSV fields that are empty (These are not missing fields but fields that contain nothing)."
+            title={t('findIncompleteCsvRecords.findEmptyValues')}
+            description={t(
+              'findIncompleteCsvRecords.findEmptyValuesDescription'
+            )}
           />
 
           <CheckboxWithDesc
             checked={values.messageLimit}
             onChange={(value) => updateField('messageLimit', value)}
-            title="Limit number of messages"
+            title={t('findIncompleteCsvRecords.limitNumberOfMessages')}
           />
 
           {values.messageLimit && (
@@ -172,7 +176,9 @@ export default function FindIncompleteCsvRecords({
               onOwnChange={(val) => updateField('messageNumber', Number(val))}
               type="number"
               inputProps={{ min: 1 }}
-              description={'Set the limit of number of messages in the output.'}
+              description={t(
+                'findIncompleteCsvRecords.messageLimitDescription'
+              )}
             />
           )}
         </Box>
@@ -184,15 +190,27 @@ export default function FindIncompleteCsvRecords({
       title={title}
       input={input}
       inputComponent={
-        <ToolTextInput title={'Input CSV'} value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('findIncompleteCsvRecords.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
+      }
+      resultComponent={
+        <ToolTextResult
+          title={t('findIncompleteCsvRecords.resultTitle')}
+          value={result}
+        />
       }
-      resultComponent={<ToolTextResult title={'CSV Status'} value={result} />}
       initialValues={initialValues}
       exampleCards={exampleCards}
       getGroups={getGroups}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('findIncompleteCsvRecords.toolInfo.title', { title }),
+        description: longDescription
+      }}
     />
   );
 }

src/pages/tools/csv/find-incomplete-csv-records/meta.ts

@@ -2,15 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('csv', {
-  name: 'Find incomplete CSV records',
   path: 'find-incomplete-csv-records',
   icon: 'tdesign:search-error',
-  description:
-    'Just upload your CSV file in the form below and this tool will automatically check if none of the rows or columns are missing values. In the tool options, you can adjust the input file format (specify the delimiter, quote character, and comment character). Additionally, you can enable checking for empty values, skip empty lines, and set a limit on the number of error messages in the output.',
-  shortDescription:
-    'Quickly find rows and columns in CSV that are missing values.',
+
   keywords: ['find', 'incomplete', 'csv', 'records'],
-  longDescription:
-    'This tool checks the completeness of CSV (Comma Separated Values) files and identifies incomplete records within the data. It finds rows and columns where one or more values are missing and displays their positions in the output so that you can quickly find and fix your CSV file. A valid CSV file has the same number of values (fields) in all rows and the same number of values (fields) in all columns. If the CSV you load in this tool is complete, the program will notify you with a green badge. If at least one value is missing in any row or column, the program will show a red badge and indicate the exact location of the missing value. If the CSV file has a field with no characters in it, then such a field is called an empty field. It is not a missing field, just empty as it contains nothing. You can activate the "Find Empty Values" checkbox in the options to identify all such fields in the CSV. If the file contains empty lines, you can ignore them with the "Skip Empty Lines" option or check them for completeness along with other lines. You can also configure the delimiter, quote, and comment characters in the options. This allows you to adapt to other file formats besides CSV, such as TSV (Tab Separated Values), SSV (Semicolon Separated Values), or PSV (Pipe Separated Values). If the file has too many incomplete or empty records, you can set a limit on the output messages to display, for example, 5, 10, or 20 messages. If you want to quickly fill in the missing data with default values, you can use our Fill Incomplete CSV Records tool. Csv-abulous!',
-  component: lazy(() => import('./index'))
+
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'csv:findIncompleteCsvRecords.title',
+    description: 'csv:findIncompleteCsvRecords.description',
+    shortDescription: 'csv:findIncompleteCsvRecords.shortDescription'
+  }
 });

src/pages/tools/csv/i18n/en.json

@@ -0,0 +1,114 @@
+{
+  "insertCsvColumns": {
+    "title": "Insert CSV columns",
+    "description": "Add new columns to CSV data at specified positions.",
+    "inputTitle": "Input CSV",
+    "resultTitle": "Output CSV",
+    "csvToInsert": "CSV to insert",
+    "csvSeparator": "CSV separator",
+    "csvToInsertDescription": "Enter one or more columns you want to insert into the CSV. the character used to delimit columns has to be the same with the one in the CSV input file. Ps: Blank lines will be ignored",
+    "csvOptions": "CSV Options",
+    "separatorDescription": "Enter the character used to delimit columns in the CSV input file.",
+    "quoteCharDescription": "Enter the quote character used to quote the CSV input fields.",
+    "commentCharacterDescription": "Enter the character indicating the start of a comment line. Lines starting with this symbol will be skipped.",
+    "fillWithEmptyValues": "Fill With Empty Values",
+    "fillWithCustomValues": "Fill With Customs Values",
+    "customFillDescription": "If the input CSV file is incomplete (missing values), then add empty fields or custom symbols to records to make a well-formed CSV?",
+    "customFillValueDescription": "Use this custom value to fill in missing fields. (Works only with \"Custom Values\" mode above.)",
+    "positionOptions": "Position Options",
+    "prependColumns": "Prepend columns",
+    "appendColumns": "Append columns",
+    "customPosition": "Custom position",
+    "insertingPositionDescription": "Specify where to insert the columns in the CSV file.",
+    "headerName": "Header name",
+    "position": "Position",
+    "customPositionOptionsDescription": "Select the method to insert the columns in the CSV file.",
+    "headerNameDescription": "Header of the column you want to insert columns after.",
+    "rowNumberDescription": "Number of the column you want to insert columns after.",
+    "toolInfo": {
+      "title": "Insert CSV Columns",
+      "description": "This tool allows you to insert new columns into CSV data at specified positions. You can prepend, append, or insert columns at custom positions based on header names or column numbers."
+    },
+    "shortDescription": "Quickly insert one or more new columns anywhere in a CSV file."
+  },
+  "csvToJson": {
+    "inputTitle": "Input CSV",
+    "resultTitle": "Output JSON",
+    "inputCsvFormat": "Input CSV Format",
+    "columnSeparator": "Column Separator (e.g., , ; \\t)",
+    "fieldQuote": "Field Quote (e.g., \")",
+    "commentSymbol": "Comment Symbol (e.g., #)",
+    "conversionOptions": "Conversion Options",
+    "useHeaders": "Use Headers",
+    "useHeadersDescription": "Treat the first row as column headers",
+    "skipEmptyLines": "Skip Empty Lines",
+    "skipEmptyLinesDescription": "Ignore empty lines in the input CSV",
+    "dynamicTypes": "Dynamic Types",
+    "dynamicTypesDescription": "Automatically convert numbers and booleans",
+    "errorParsing": "Error parsing CSV: {{error}}",
+    "title": "Convert CSV to JSON",
+    "description": "Convert CSV files to JSON format with customizable options for delimiters, quotes, and output formatting. Support for headers, comments, and dynamic type conversion.",
+    "shortDescription": "Convert CSV data to JSON format."
+  },
+  "findIncompleteCsvRecords": {
+    "title": "Find incomplete CSV records",
+    "inputTitle": "Input CSV",
+    "resultTitle": "CSV Status",
+    "toolInfo": {
+      "title": "What is a {{title}}?"
+    },
+    "csvInputOptions": "CSV Input Options",
+    "csvSeparatorDescription": "Enter the character used to delimit columns in the CSV input file.",
+    "quoteCharacterDescription": "Enter the quote character used to quote the CSV input fields.",
+    "commentCharacterDescription": "Enter the character indicating the start of a comment line. Lines starting with this symbol will be skipped.",
+    "checkingOptions": "Checking Options",
+    "deleteLinesWithNoData": "Delete Lines with No Data",
+    "deleteLinesWithNoDataDescription": "Remove empty lines from CSV input file.",
+    "findEmptyValues": "Find Empty Values",
+    "findEmptyValuesDescription": "Display a message about CSV fields that are empty (These are not missing fields but fields that contain nothing).",
+    "limitNumberOfMessages": "Limit number of messages",
+    "messageLimitDescription": "Set the limit of number of messages in the output.",
+    "description": "Just upload your CSV file in the form below and this tool will automatically check if none of the rows or columns are missing values. In the tool options, you can adjust the input file format (specify the delimiter, quote character, and comment character). Additionally, you can enable checking for empty values, skip empty lines, and set a limit on the number of error messages in the output.",
+    "shortDescription": "Quickly find rows and columns in CSV that are missing values."
+  },
+  "changeCsvSeparator": {
+    "title": "Change CSV Separator",
+    "description": "Change the delimiter/separator in CSV files. Convert between different CSV formats like comma, semicolon, tab, or custom separators.",
+    "shortDescription": "Change CSV file delimiter"
+  },
+  "csvRowsToColumns": {
+    "title": "Convert CSV Rows to Columns",
+    "description": "This tool converts rows of a CSV (Comma Separated Values) file into columns. It extracts the horizontal lines from the input CSV one by one, rotates them 90 degrees, and outputs them as vertical columns one after another, separated by commas.', longDescription: 'This tool converts rows of a CSV (Comma Separated Values) file into columns. For example, if the input CSV data has 6 rows, then the output will have 6 columns and the elements of the rows will be arranged from the top to bottom. In a well-formed CSV, the number of values in each row is the same. However, in cases when rows are missing fields, the program can fix them and you can choose from the available options: fill missing data with empty elements or replace missing data with custom elements, such as \"missing\", \"?\", or \"x\". During the conversion process, the tool also cleans the CSV file from unnecessary information, such as empty lines (these are lines without visible information) and comments. To help the tool correctly identify comments, in the options, you can specify the symbol at the beginning of a line that starts a comment. This symbol is typically a hash \"#\" or double slash \"//\". Csv-abulous!.",
+    "shortDescription": "Convert CSV rows to columns.",
+    "longDescription": "This tool converts rows of a CSV (Comma Separated Values) file into columns. For example, if the input CSV data has 6 rows, then the output will have 6 columns and the elements of the rows will be arranged from the top to bottom. In a well-formed CSV, the number of values in each row is the same. However, in cases when rows are missing fields, the program can fix them and you can choose from the available options: fill missing data with empty elements or replace missing data with custom elements, such as"
+  },
+  "csvToTsv": {
+    "title": "Convert CSV to TSV",
+    "description": "Upload your CSV file in the form below and it will automatically get converted to a TSV file. In the tool options, you can customize the input CSV format – specify the field delimiter, quotation character, and comment symbol, as well as skip empty CSV lines, and choose whether to preserve CSV column headers.",
+    "shortDescription": "Convert CSV data to TSV format.",
+    "longDescription": "This tool transforms Comma Separated Values (CSV) data to Tab Separated Values (TSV) data. Both CSV and TSV are popular file formats for storing tabular data but they use different delimiters to separate values – CSV uses commas ("
+  },
+  "csvToXml": {
+    "title": "Convert CSV to XML",
+    "description": "Convert CSV files to XML format with customizable options.",
+    "shortDescription": "Convert CSV data to XML format."
+  },
+  "csvToYaml": {
+    "title": "Convert CSV to YAML",
+    "description": "Just upload your CSV file in the form below and it will automatically get converted to a YAML file. In the tool options, you can specify the field delimiter character, field quote character, and comment character to adapt the tool to custom CSV formats. Additionally, you can select the output YAML format: one that preserves CSV headers or one that excludes CSV headers.",
+    "shortDescription": "Quickly convert a CSV file to a YAML file.",
+    "longDescription": "This tool transforms CSV (Comma Separated Values) data into the YAML (Yet Another Markup Language) data. CSV is a simple, tabular format that is used to represent matrix-like data types consisting of rows and columns. YAML, on the other hand, is a more advanced format (actually a superset of JSON), which creates more human-readable data for serialization, and it supports lists, dictionaries, and nested objects. This program supports various input CSV formats – the input data can be comma-separated (default), semicolon-separated, pipe-separated, or use another completely different delimiter. You can specify the exact delimiter your data uses in the options. Similarly, in the options, you can specify the quote character that is used to wrap CSV fields (by default a double-quote symbol). You can also skip lines that start with comments by specifying the comment symbols in the options. This allows you to keep your data clean by skipping unnecessary lines. There are two ways to convert CSV to YAML. The first method converts each CSV row into a YAML list. The second method extracts headers from the first CSV row and creates YAML objects with keys based on these headers. You can also customize the output YAML format by specifying the number of spaces for indenting YAML structures. If you need to perform the reverse conversion, that is, transform YAML into CSV, you can use our Convert YAML to CSV tool. Csv-abulous!"
+  },
+  "swapCsvColumns": {
+    "title": "Swap CSV Columns",
+    "description": "Just upload your CSV file in the form below, specify the columns to swap, and the tool will automatically change the positions of the specified columns in the output file. In the tool options, you can specify the column positions or names that you want to swap, as well as fix incomplete data and optionally remove empty records and records that have been commented out.",
+    "shortDescription": "Reorder CSV columns.",
+    "longDescription": "This tool reorganizes CSV data by swapping the positions of its columns. Swapping columns can enhance the readability of a CSV file by placing frequently used data together or in the front for easier data comparison and editing. For example, you can swap the first column with the last or swap the second column with the third. To swap columns based on their positions, select the"
+  },
+  "transposeCsv": {
+    "title": "Transpose CSV",
+    "description": "Just upload your CSV file in the form below, and this tool will automatically transpose your CSV. In the tool options, you can specify the character that starts the comment lines in the CSV to remove them. Additionally, if the CSV is incomplete (missing values), you can replace missing values with the empty character or a custom character.",
+    "shortDescription": "Quickly transpose a CSV file.",
+    "longDescription": "This tool transposes Comma Separated Values (CSV). It treats the CSV as a matrix of data and flips all elements across the main diagonal. The output contains the same CSV data as the input, but now all the rows have become columns, and all the columns have become rows. After transposition, the CSV file will have opposite dimensions. For example, if the input file has 4 columns and 3 rows, the output file will have 3 columns and 4 rows. During conversion, the program also cleans the data from unnecessary lines and corrects incomplete data. Specifically, the tool automatically deletes all empty records and comments that begin with a specific character, which you can set in the option. Additionally, in cases where the CSV data is corrupted or lost, the utility completes the file with empty fields or custom fields that can be specified in the options. Csv-abulous!"
+  }
+}

src/pages/tools/csv/i18n/hi.json

@@ -0,0 +1,123 @@
+{
+  "changeSeparator": {
+    "title": "CSV विभाजक बदलें",
+    "description": "CSV फ़ाइल में विभाजक वर्ण बदलें।",
+    "inputTitle": "इनपुट CSV",
+    "resultTitle": "परिवर्तित CSV",
+    "separatorOptions": "विभाजक विकल्प",
+    "inputSeparator": "इनपुट विभाजक",
+    "inputSeparatorPlaceholder": "विभाजक",
+    "outputSeparator": "आउटपुट विभाजक",
+    "outputSeparatorPlaceholder": "विभाजक",
+    "commonSeparators": "सामान्य विभाजक",
+    "comma": "कॉमा",
+    "semicolon": "सेमीकोलन",
+    "tab": "टैब",
+    "pipe": "पाइप"
+  },
+  "rowsToColumns": {
+    "title": "CSV पंक्तियां से स्तंभ",
+    "description": "CSV डेटा को पंक्तियों से स्तंभों में बदलें।",
+    "inputTitle": "इनपुट CSV",
+    "resultTitle": "परिवर्तित CSV",
+    "transformationOptions": "परिवर्तन विकल्प",
+    "transposeData": "डेटा ट्रांसपोज़ करें",
+    "includeHeaders": "शीर्षक शामिल करें",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "csvToJson": {
+    "title": "CSV से JSON",
+    "description": "CSV डेटा को JSON प्रारूप में बदलें।",
+    "inputTitle": "इनपुट CSV",
+    "resultTitle": "JSON परिणाम",
+    "conversionOptions": "रूपांतरण विकल्प",
+    "firstRowAsHeaders": "पहली पंक्ति शीर्षक के रूप में",
+    "includeHeaders": "शीर्षक शामिल करें",
+    "outputFormat": "आउटपुट प्रारूप",
+    "arrayFormat": "सरणी प्रारूप",
+    "objectFormat": "ऑब्जेक्ट प्रारूप",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "csvToTsv": {
+    "title": "CSV से TSV",
+    "description": "CSV फ़ाइल को TSV प्रारूप में बदलें।",
+    "inputTitle": "इनपुट CSV",
+    "resultTitle": "TSV परिणाम",
+    "conversionOptions": "रूपांतरण विकल्प",
+    "inputSeparator": "इनपुट विभाजक",
+    "inputSeparatorPlaceholder": "विभाजक",
+    "preserveHeaders": "शीर्षक संरक्षित करें"
+  },
+  "csvToXml": {
+    "title": "CSV से XML",
+    "description": "CSV डेटा को XML प्रारूप में बदलें।",
+    "inputTitle": "इनपुट CSV",
+    "resultTitle": "XML परिणाम",
+    "conversionOptions": "रूपांतरण विकल्प",
+    "rootElement": "मूल तत्व",
+    "rootPlaceholder": "तत्व नाम",
+    "rowElement": "पंक्ति तत्व",
+    "rowPlaceholder": "तत्व नाम",
+    "firstRowAsHeaders": "पहली पंक्ति शीर्षक के रूप में",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "csvToYaml": {
+    "title": "CSV से YAML",
+    "description": "CSV डेटा को YAML प्रारूप में बदलें।",
+    "inputTitle": "इनपुट CSV",
+    "resultTitle": "YAML परिणाम",
+    "conversionOptions": "रूपांतरण विकल्प",
+    "firstRowAsHeaders": "पहली पंक्ति शीर्षक के रूप में",
+    "includeHeaders": "शीर्षक शामिल करें",
+    "indentSize": "इंडेंट आकार",
+    "sizePlaceholder": "आकार",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "findIncompleteRecords": {
+    "title": "अधूरे CSV रिकॉर्ड खोजें",
+    "description": "CSV फ़ाइल में अधूरे रिकॉर्ड खोजें।",
+    "inputTitle": "इनपुट CSV",
+    "resultTitle": "अधूरे रिकॉर्ड",
+    "searchOptions": "खोज विकल्प",
+    "checkEmptyValues": "खाली मूल्य जांचें",
+    "skipEmptyLines": "खाली पंक्तियां छोड़ें",
+    "errorLimit": "त्रुटि सीमा",
+    "limitPlaceholder": "सीमा",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "insertColumns": {
+    "title": "CSV स्तंभ डालें",
+    "description": "CSV फ़ाइल में नए स्तंभ डालें।",
+    "inputTitle": "इनपुट CSV",
+    "resultTitle": "संशोधित CSV",
+    "insertionOptions": "डालने के विकल्प",
+    "insertPosition": "डालने की स्थिति",
+    "positionPlaceholder": "स्थिति",
+    "columnNames": "स्तंभ नाम",
+    "namesPlaceholder": "नाम (कॉमा से अलग)",
+    "defaultValues": "डिफ़ॉल्ट मूल्य",
+    "valuesPlaceholder": "मूल्य (कॉमा से अलग)",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "swapColumns": {
+    "title": "CSV स्तंभ बदलें",
+    "description": "CSV फ़ाइल में स्तंभों की स्थिति बदलें।",
+    "inputTitle": "इनपुट CSV",
+    "resultTitle": "संशोधित CSV",
+    "swapOptions": "बदलने के विकल्प",
+    "firstColumn": "पहला स्तंभ",
+    "firstColumnPlaceholder": "स्तंभ संख्या",
+    "secondColumn": "दूसरा स्तंभ",
+    "secondColumnPlaceholder": "स्तंभ संख्या",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "transposeCsv": {
+    "title": "CSV ट्रांसपोज़ करें",
+    "description": "CSV डेटा को ट्रांसपोज़ करें (पंक्तियों को स्तंभों में बदलें)।",
+    "inputTitle": "इनपुट CSV",
+    "resultTitle": "ट्रांसपोज़ किया गया CSV",
+    "transposeOptions": "ट्रांसपोज़ विकल्प",
+    "includeHeaders": "शीर्षक शामिल करें",
+    "separatorPlaceholder": "विभाजक"
+  }
+}

src/pages/tools/csv/insert-csv-columns/index.tsx

@@ -1,16 +1,17 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import ToolContent from '@components/ToolContent';
-import { ToolComponentProps } from '@tools/defineTool';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import { GetGroupsType } from '@components/options/ToolOptions';
-import { CardExampleType } from '@components/examples/ToolExamples';
 import { main } from './service';
-import { getCsvHeaders } from '@utils/csv';
 import { InitialValuesType } from './types';
+import { GetGroupsType } from '@components/options/ToolOptions';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import SelectWithDesc from '@components/options/SelectWithDesc';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import { getCsvHeaders } from '@utils/csv';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {
   csvToInsert: '',
@@ -27,15 +28,19 @@ const initialValues: InitialValuesType = {
 
 const exampleCards: CardExampleType<InitialValuesType>[] = [
   {
-    title: 'Add One Column to a CSV File',
+    title: 'Insert a single column by position',
     description:
-      'In this example, we insert a column with the title "city" into a CSV file that already contains two other columns with titles "name" and "age". The new column consists of three values: "city", "dallas", and "houston", corresponding to the height of the input CSV data. The value "city" is the header value (appearing on the first row) and values "dallas" and "houston" are data values (appearing on rows two and three). We specify the position of the new column by an ordinal number and set it to 1 in the options. This value indicates that the new "city" column should be placed after the first column.',
-    sampleText: `name,age
-john,25
-emma,22`,
-    sampleResult: `name,city,age
-john,dallas,25
-emma,houston,22`,
+      'In this example, we insert a single column "city" at position 1 in the CSV data. The input CSV has data about cars, including the "Brand" and "Model" of the car. We now add a "city" column at position 1. To do this, we enter the city data in the comma-separated format in the "New Column" option, and to quickly add the new column at position 1, then we specify the position number.',
+    sampleText: `Brand,Model
+Toyota,Camry
+Ford,Mustang
+Honda,Accord
+Chevrolet,Malibu`,
+    sampleResult: `city,Brand,Model
+dallas,Toyota,Camry
+houston,Ford,Mustang
+dallas,Honda,Accord
+houston,Chevrolet,Malibu`,
     sampleOptions: {
       csvToInsert: `city
 dallas
@@ -118,6 +123,7 @@ export default function InsertCsvColumns({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation('csv');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -139,7 +145,7 @@ export default function InsertCsvColumns({
     updateField
   }) => [
     {
-      title: 'CSV to insert',
+      title: t('insertCsvColumns.csvToInsert'),
       component: (
         <Box>
           <TextFieldWithDesc
@@ -147,44 +153,42 @@ export default function InsertCsvColumns({
             rows={3}
             value={values.csvToInsert}
             onOwnChange={(val) => updateField('csvToInsert', val)}
-            title="CSV separator"
-            description={`Enter one or more columns you want to insert into the CSV.
-              the character used to delimit columns has to be the same with the one in the CSV input file.
-              Ps: Blank lines will be ignored`}
+            title={t('insertCsvColumns.csvSeparator')}
+            description={t('insertCsvColumns.csvToInsertDescription')}
           />
         </Box>
       )
     },
     {
-      title: 'CSV Options',
+      title: t('insertCsvColumns.csvOptions'),
       component: (
         <Box>
           <TextFieldWithDesc
             value={values.separator}
             onOwnChange={(val) => updateField('separator', val)}
-            description={
-              'Enter the character used to delimit columns in the CSV input file.'
-            }
+            description={t('insertCsvColumns.separatorDescription')}
           />
           <TextFieldWithDesc
             value={values.quoteChar}
             onOwnChange={(val) => updateField('quoteChar', val)}
-            description={
-              'Enter the quote character used to quote the CSV input fields.'
-            }
+            description={t('insertCsvColumns.quoteCharDescription')}
           />
           <TextFieldWithDesc
             value={values.commentCharacter}
             onOwnChange={(val) => updateField('commentCharacter', val)}
-            description={
-              'Enter the character indicating the start of a comment line. Lines starting with this symbol will be skipped.'
-            }
+            description={t('insertCsvColumns.commentCharacterDescription')}
           />
           <SelectWithDesc
             selected={values.customFill}
             options={[
-              { label: 'Fill With Empty Values', value: false },
-              { label: 'Fill With Customs Values', value: true }
+              {
+                label: t('insertCsvColumns.fillWithEmptyValues'),
+                value: false
+              },
+              {
+                label: t('insertCsvColumns.fillWithCustomValues'),
+                value: true
+              }
             ]}
             onChange={(value) => {
               updateField('customFill', value);
@@ -192,48 +196,59 @@ export default function InsertCsvColumns({
                 updateField('customFillValue', ''); // Reset custom fill value
               }
             }}
-            description={
-              'If the input CSV file is incomplete (missing values), then add empty fields or custom symbols to records to make a well-formed CSV?'
-            }
+            description={t('insertCsvColumns.customFillDescription')}
           />
           {values.customFill && (
             <TextFieldWithDesc
               value={values.customFillValue}
               onOwnChange={(val) => updateField('customFillValue', val)}
-              description={
-                'Use this custom value to fill in missing fields. (Works only with "Custom Values" mode above.)'
-              }
+              description={t('insertCsvColumns.customFillValueDescription')}
             />
           )}
         </Box>
       )
     },
     {
-      title: 'Position Options',
+      title: t('insertCsvColumns.positionOptions'),
       component: (
         <Box>
           <SelectWithDesc
             selected={values.insertingPosition}
             options={[
-              { label: 'Prepend columns', value: 'prepend' },
-              { label: 'Append columns', value: 'append' },
-              { label: 'Custom position', value: 'custom' }
+              {
+                label: t('insertCsvColumns.prependColumns'),
+                value: 'prepend'
+              },
+              {
+                label: t('insertCsvColumns.appendColumns'),
+                value: 'append'
+              },
+              {
+                label: t('insertCsvColumns.customPosition'),
+                value: 'custom'
+              }
             ]}
             onChange={(value) => updateField('insertingPosition', value)}
-            description={'Specify where to insert the columns in the CSV file.'}
+            description={t('insertCsvColumns.insertingPositionDescription')}
           />
 
           {values.insertingPosition === 'custom' && (
             <SelectWithDesc
               selected={values.customPostionOptions}
               options={[
-                { label: 'Header name', value: 'headerName' },
-                { label: 'Position ', value: 'rowNumber' }
+                {
+                  label: t('insertCsvColumns.headerName'),
+                  value: 'headerName'
+                },
+                {
+                  label: t('insertCsvColumns.position'),
+                  value: 'rowNumber'
+                }
               ]}
               onChange={(value) => updateField('customPostionOptions', value)}
-              description={
-                'Select the method to insert the columns in the CSV file.'
-              }
+              description={t(
+                'insertCsvColumns.customPositionOptionsDescription'
+              )}
             />
           )}
 
@@ -243,42 +258,53 @@ export default function InsertCsvColumns({
                 selected={values.headerName}
                 options={headerOptions}
                 onChange={(value) => updateField('headerName', value)}
-                description={
-                  'Header of the column you want to insert columns after.'
-                }
+                description={t('insertCsvColumns.headerNameDescription')}
               />
             )}
 
           {values.insertingPosition === 'custom' &&
             values.customPostionOptions === 'rowNumber' && (
               <TextFieldWithDesc
-                value={values.rowNumber}
-                onOwnChange={(val) => updateField('rowNumber', Number(val))}
-                inputProps={{ min: 1, max: headers.length }}
-                type="number"
-                description={
-                  'Number of the column you want to insert columns after.'
+                value={values.rowNumber.toString()}
+                onOwnChange={(val) =>
+                  updateField('rowNumber', parseInt(val) || 0)
                 }
+                description={t('insertCsvColumns.rowNumberDescription')}
+                type="number"
               />
             )}
         </Box>
       )
     }
   ];
+
   return (
     <ToolContent
       title={title}
-      input={input}
       inputComponent={
-        <ToolTextInput value={input} title="Input CSV" onChange={setInput} />
+        <ToolTextInput
+          title={t('insertCsvColumns.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
+      }
+      resultComponent={
+        <ToolTextResult
+          title={t('insertCsvColumns.resultTitle')}
+          value={result}
+          extension={'csv'}
+        />
       }
-      resultComponent={<ToolTextResult title="Output CSV" value={result} />}
       initialValues={initialValues}
-      exampleCards={exampleCards}
       getGroups={getGroups}
-      setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      input={input}
+      setInput={setInput}
+      toolInfo={{
+        title: t('insertCsvColumns.toolInfo.title'),
+        description: t('insertCsvColumns.toolInfo.description')
+      }}
+      exampleCards={exampleCards}
     />
   );
 }

src/pages/tools/csv/insert-csv-columns/meta.ts

@@ -2,14 +2,16 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('csv', {
-  name: 'Insert CSV columns',
+  i18n: {
+    name: 'csv:insertCsvColumns.title',
+    description: 'csv:insertCsvColumns.description',
+    shortDescription: 'csv:insertCsvColumns.shortDescription'
+  },
+
   path: 'insert-csv-columns',
   icon: 'hugeicons:column-insert',
-  description:
-    'Just upload your CSV file in the form below, paste the new column in the options, and it will automatically get inserted in your CSV. In the tool options, you can also specify more than one column to insert, set the insertion position, and optionally skip the empty and comment lines.',
-  shortDescription:
-    'Quickly insert one or more new columns anywhere in a CSV file.',
+
   keywords: ['insert', 'csv', 'columns', 'append', 'prepend'],
-  longDescription: '',
+
   component: lazy(() => import('./index'))
 });

src/pages/tools/csv/swap-csv-columns/meta.ts

@@ -2,14 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('csv', {
-  name: 'Swap CSV Columns',
+  i18n: {
+    name: 'csv:swapCsvColumns.title',
+    description: 'csv:swapCsvColumns.description',
+    shortDescription: 'csv:swapCsvColumns.shortDescription',
+    longDescription: 'csv:swapCsvColumns.longDescription'
+  },
+
   path: 'swap-csv-columns',
   icon: 'eva:swap-outline',
-  description:
-    'Just upload your CSV file in the form below, specify the columns to swap, and the tool will automatically change the positions of the specified columns in the output file. In the tool options, you can specify the column positions or names that you want to swap, as well as fix incomplete data and optionally remove empty records and records that have been commented out.',
-  shortDescription: 'Reorder CSV columns.',
-  longDescription:
-    'This tool reorganizes CSV data by swapping the positions of its columns. Swapping columns can enhance the readability of a CSV file by placing frequently used data together or in the front for easier data comparison and editing. For example, you can swap the first column with the last or swap the second column with the third. To swap columns based on their positions, select the "Set Column Position" mode and enter the numbers of the "from" and "to" columns to be swapped in the first and second blocks of options. For example, if you have a CSV file with four columns "1, 2, 3, 4" and swap columns with positions "2" and "4", the output CSV will have columns in the order: "1, 4, 3, 2".As an alternative to positions, you can swap columns by specifying their headers (column names on the first row of data). If you enable this mode in the options, then you can enter the column names like "location" and "city", and the program will swap these two columns. If any of the specified columns have incomplete data (some fields are missing), you can choose to skip such data or fill the missing fields with empty values or custom values (specified in the options). Additionally, you can specify the symbol used for comments in the CSV data, such as "#" or "//". If you do not need the commented lines in the output, you can remove them by using the "Delete Comments" checkbox. You can also activate the checkbox "Delete Empty Lines" to get rid of empty lines that contain no visible information. Csv-abulous!',
   keywords: ['csv', 'swap', 'columns'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/csv/transpose-csv/meta.ts

@@ -2,14 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('csv', {
-  name: 'Transpose CSV',
+  i18n: {
+    name: 'csv:transposeCsv.title',
+    description: 'csv:transposeCsv.description',
+    shortDescription: 'csv:transposeCsv.shortDescription',
+    longDescription: 'csv:transposeCsv.longDescription'
+  },
+
   path: 'transpose-csv',
   icon: 'carbon:transpose',
-  description:
-    'Just upload your CSV file in the form below, and this tool will automatically transpose your CSV. In the tool options, you can specify the character that starts the comment lines in the CSV to remove them. Additionally, if the CSV is incomplete (missing values), you can replace missing values with the empty character or a custom character.',
-  shortDescription: 'Quickly transpose a CSV file.',
+
   keywords: ['transpose', 'csv'],
-  longDescription:
-    'This tool transposes Comma Separated Values (CSV). It treats the CSV as a matrix of data and flips all elements across the main diagonal. The output contains the same CSV data as the input, but now all the rows have become columns, and all the columns have become rows. After transposition, the CSV file will have opposite dimensions. For example, if the input file has 4 columns and 3 rows, the output file will have 3 columns and 4 rows. During conversion, the program also cleans the data from unnecessary lines and corrects incomplete data. Specifically, the tool automatically deletes all empty records and comments that begin with a specific character, which you can set in the option. Additionally, in cases where the CSV data is corrupted or lost, the utility completes the file with empty fields or custom fields that can be specified in the options. Csv-abulous!',
+
   component: lazy(() => import('./index'))
 });

src/pages/tools/image/generic/change-colors/meta.ts

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Change colors in image',
+  i18n: {
+    name: 'image:changeColors.title',
+    description: 'image:changeColors.description',
+    shortDescription: 'image:changeColors.shortDescription'
+  },
+
   path: 'change-colors',
   icon: 'cil:color-fill',
-  description:
-    "World's simplest online Image color changer. Just import your image (JPG, PNG, SVG) in the editor on the left, select which colors to change, and you'll instantly get a new image with the new colors on the right. Free, quick, and very powerful. Import an image – replace its colors.",
-  shortDescription: 'Quickly swap colors in a image',
+
   keywords: ['change', 'colors', 'in', 'png', 'image', 'jpg'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/image/generic/change-opacity/meta.ts

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Change image Opacity',
+  i18n: {
+    name: 'image:changeOpacity.title',
+    description: 'image:changeOpacity.description',
+    shortDescription: 'image:changeOpacity.shortDescription'
+  },
+
   path: 'change-opacity',
   icon: 'material-symbols:opacity',
-  description:
-    'Easily adjust the transparency of your images. Simply upload your image, use the slider to set the desired opacity level between 0 (fully transparent) and 1 (fully opaque), and download the modified image.',
-  shortDescription: 'Adjust transparency of images',
+
   keywords: ['opacity', 'transparency', 'png', 'alpha', 'jpg', 'jpeg', 'image'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/image/generic/compress/meta.ts

@@ -2,13 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Compress Image',
+  i18n: {
+    name: 'image:compress.title',
+    description: 'image:compress.description',
+    shortDescription: 'image:compress.shortDescription'
+  },
+
   path: 'compress',
   component: lazy(() => import('./index')),
   icon: 'material-symbols-light:compress-rounded',
-  description:
-    'Compress images to reduce file size while maintaining reasonable quality.',
-  shortDescription:
-    'Compress images to reduce file size while maintaining reasonable quality.',
+
   keywords: ['image', 'compress', 'reduce', 'quality']
 });

src/pages/tools/image/generic/convert-to-jpg/meta.ts

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Convert Images to JPG',
+  i18n: {
+    name: 'image:convertToJpg.title',
+    description: 'image:convertToJpg.description',
+    shortDescription: 'image:convertToJpg.shortDescription'
+  },
+
   path: 'convert-to-jpg',
   icon: 'ph:file-jpg-thin',
-  description:
-    'Convert various image formats (PNG, GIF, TIF, PSD, SVG, WEBP, HEIC, RAW) to JPG with customizable quality and background color settings.',
-  shortDescription: 'Convert images to JPG with quality control',
+
   keywords: [
     'convert',
     'jpg',

src/pages/tools/image/generic/create-transparent/meta.ts

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Create transparent PNG',
+  i18n: {
+    name: 'image:createTransparent.title',
+    description: 'image:createTransparent.description',
+    shortDescription: 'image:createTransparent.shortDescription'
+  },
+
   path: 'create-transparent',
   icon: 'mdi:circle-transparent',
-  shortDescription: 'Quickly make an image transparent',
-  description:
-    "World's simplest online Portable Network Graphics transparency maker. Just import your image in the editor on the left and you will instantly get a transparent PNG on the right. Free, quick, and very powerful. Import an image – get a transparent PNG.",
+
   keywords: ['create', 'transparent'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/image/generic/crop/meta.ts

@@ -2,11 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Crop',
+  i18n: {
+    name: 'image:crop.title',
+    description: 'image:crop.description',
+    shortDescription: 'image:crop.shortDescription'
+  },
+
   path: 'crop',
   icon: 'mdi:crop', // Iconify icon as a string
-  description: 'A tool to crop images with precision and ease.',
-  shortDescription: 'Crop images quickly.',
+
   keywords: ['crop', 'image', 'edit', 'resize', 'trim'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/image/generic/editor/meta.ts

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Image Editor',
+  i18n: {
+    name: 'image:editor.title',
+    description: 'image:editor.description',
+    shortDescription: 'image:editor.shortDescription'
+  },
+
   path: 'editor',
   icon: 'mdi:image-edit',
-  description:
-    'Advanced image editor with tools for cropping, rotating, annotating, adjusting colors, and adding watermarks. Edit your images with professional-grade tools directly in your browser.',
-  shortDescription: 'Edit images with advanced tools and features',
+
   keywords: [
     'image',
     'editor',

src/pages/tools/image/generic/image-to-text/meta.ts

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Image to Text (OCR)',
+  i18n: {
+    name: 'image:imageToText.title',
+    description: 'image:imageToText.description',
+    shortDescription: 'image:imageToText.shortDescription'
+  },
+
   path: 'image-to-text',
   icon: 'mdi:text-recognition', // Iconify icon as a string
-  description:
-    'Extract text from images (JPG, PNG) using optical character recognition (OCR).',
-  shortDescription: 'Extract text from images using OCR.',
+
   keywords: [
     'ocr',
     'optical character recognition',

src/pages/tools/image/generic/qr-code/meta.ts

@@ -2,12 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'QR Code Generator',
+  i18n: {
+    name: 'image:qrCode.title',
+    description: 'image:qrCode.description',
+    shortDescription: 'image:qrCode.shortDescription'
+  },
+
   path: 'qr-code',
   icon: 'mdi:qrcode', // Iconify icon as a string
-  description:
-    'Generate QR codes for different data types: URL, Text, Email, Phone, SMS, WiFi, vCard, and more.',
-  shortDescription: 'Create customized QR codes for various data formats.',
   keywords: [
     'qr code',
     'qrcode',

src/pages/tools/image/generic/remove-background/meta.ts

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Remove Background from Image',
+  i18n: {
+    name: 'image:removeBackground.title',
+    description: 'image:removeBackground.description',
+    shortDescription: 'image:removeBackground.shortDescription'
+  },
+
   path: 'remove-background',
   icon: 'mdi:image-remove',
-  description:
-    "World's simplest online tool to remove backgrounds from images. Just upload your image and our AI-powered tool will automatically remove the background, giving you a transparent PNG. Perfect for product photos, profile pictures, and design assets.",
-  shortDescription: 'Automatically remove backgrounds from images',
+
   keywords: [
     'remove',
     'background',

src/pages/tools/image/generic/resize/index.tsx

@@ -11,6 +11,7 @@ import SimpleRadio from '@components/options/SimpleRadio';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import { processImage } from './service';
 import { InitialValuesType } from './types';
+import { useTranslation } from 'react-i18next';
 
 const initialValues: InitialValuesType = {
   resizeMethod: 'pixels' as 'pixels' | 'percentage',
@@ -45,6 +46,7 @@ const validationSchema = Yup.object({
 });
 
 export default function ResizeImage({ title }: ToolComponentProps) {
+  const { t } = useTranslation('image');
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
@@ -58,22 +60,20 @@ export default function ResizeImage({ title }: ToolComponentProps) {
     updateField
   }) => [
     {
-      title: 'Resize Method',
+      title: t('resize.resizeMethod'),
       component: (
         <Box>
           <SimpleRadio
             onClick={() => updateField('resizeMethod', 'pixels')}
             checked={values.resizeMethod === 'pixels'}
-            description={'Resize by specifying dimensions in pixels.'}
-            title={'Resize by Pixels'}
+            description={t('resize.resizeByPixelsDescription')}
+            title={t('resize.resizeByPixels')}
           />
           <SimpleRadio
             onClick={() => updateField('resizeMethod', 'percentage')}
             checked={values.resizeMethod === 'percentage'}
-            description={
-              'Resize by specifying a percentage of the original size.'
-            }
-            title={'Resize by Percentage'}
+            description={t('resize.resizeByPercentageDescription')}
+            title={t('resize.resizeByPercentage')}
           />
         </Box>
       )
@@ -81,7 +81,7 @@ export default function ResizeImage({ title }: ToolComponentProps) {
     ...(values.resizeMethod === 'pixels'
       ? [
           {
-            title: 'Dimension Type',
+            title: t('resize.dimensionType'),
             component: (
               <Box>
                 <CheckboxWithDesc
@@ -89,35 +89,29 @@ export default function ResizeImage({ title }: ToolComponentProps) {
                   onChange={(value) =>
                     updateField('maintainAspectRatio', value)
                   }
-                  description={
-                    'Maintain the original aspect ratio of the image.'
-                  }
-                  title={'Maintain Aspect Ratio'}
+                  description={t('resize.maintainAspectRatioDescription')}
+                  title={t('resize.maintainAspectRatio')}
                 />
                 {values.maintainAspectRatio && (
                   <Box>
                     <SimpleRadio
                       onClick={() => updateField('dimensionType', 'width')}
                       checked={values.dimensionType === 'width'}
-                      description={
-                        'Specify the width in pixels and calculate height based on aspect ratio.'
-                      }
-                      title={'Set Width'}
+                      description={t('resize.setWidthDescription')}
+                      title={t('resize.setWidth')}
                     />
                     <SimpleRadio
                       onClick={() => updateField('dimensionType', 'height')}
                       checked={values.dimensionType === 'height'}
-                      description={
-                        'Specify the height in pixels and calculate width based on aspect ratio.'
-                      }
-                      title={'Set Height'}
+                      description={t('resize.setHeightDescription')}
+                      title={t('resize.setHeight')}
                     />
                   </Box>
                 )}
                 <TextFieldWithDesc
                   value={values.width}
                   onOwnChange={(val) => updateField('width', val)}
-                  description={'Width (in pixels)'}
+                  description={t('resize.widthDescription')}
                   disabled={
                     values.maintainAspectRatio &&
                     values.dimensionType === 'height'
@@ -131,7 +125,7 @@ export default function ResizeImage({ title }: ToolComponentProps) {
                 <TextFieldWithDesc
                   value={values.height}
                   onOwnChange={(val) => updateField('height', val)}
-                  description={'Height (in pixels)'}
+                  description={t('resize.heightDescription')}
                   disabled={
                     values.maintainAspectRatio &&
                     values.dimensionType === 'width'
@@ -148,15 +142,13 @@ export default function ResizeImage({ title }: ToolComponentProps) {
         ]
       : [
           {
-            title: 'Percentage',
+            title: t('resize.percentage'),
             component: (
               <Box>
                 <TextFieldWithDesc
                   value={values.percentage}
                   onOwnChange={(val) => updateField('percentage', val)}
-                  description={
-                    'Percentage of original size (e.g., 50 for half size, 200 for double size)'
-                  }
+                  description={t('resize.percentageDescription')}
                   inputProps={{
                     'data-testid': 'percentage-input',
                     type: 'number',
@@ -183,20 +175,19 @@ export default function ResizeImage({ title }: ToolComponentProps) {
           value={input}
           onChange={setInput}
           accept={['image/jpeg', 'image/png', 'image/svg+xml', 'image/gif']}
-          title={'Input Image'}
+          title={t('resize.inputTitle')}
         />
       }
       resultComponent={
         <ToolFileResult
-          title={'Resized Image'}
+          title={t('resize.resultTitle')}
           value={result}
           extension={input?.name.split('.').pop() || 'png'}
         />
       }
       toolInfo={{
-        title: 'Resize Image',
-        description:
-          'This tool allows you to resize JPG, PNG, SVG, or GIF images. You can resize by specifying dimensions in pixels or by percentage, with options to maintain the original aspect ratio.'
+        title: t('resize.toolInfo.title'),
+        description: t('resize.toolInfo.description')
       }}
     />
   );

src/pages/tools/image/generic/resize/meta.ts

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Resize Image',
+  i18n: {
+    name: 'image:resize.title',
+    description: 'image:resize.description',
+    shortDescription: 'image:resize.shortDescription'
+  },
+
   path: 'resize',
   icon: 'mdi:resize', // Iconify icon as a string
-  description:
-    'Resize JPG, PNG, SVG or GIF images by pixels or percentage while maintaining aspect ratio or not.',
-  shortDescription: 'Resize images easily.',
+
   keywords: [
     'resize',
     'image',

src/pages/tools/image/generic/rotate/meta.ts

@@ -2,11 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('image-generic', {
-  name: 'Rotate Image',
+  i18n: {
+    name: 'image:rotate.title',
+    description: 'image:rotate.description',
+    shortDescription: 'image:rotate.shortDescription'
+  },
+
   path: 'rotate',
   icon: 'mdi:rotate-clockwise',
-  description: 'Rotate an image by a specified angle.',
-  shortDescription: 'Rotate an image easily.',
+
   keywords: ['rotate', 'image', 'angle', 'jpg', 'png'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/image/i18n/en.json

@@ -0,0 +1,98 @@
+{
+  "resize": {
+    "title": "Resize Image",
+    "description": "Resize images to different dimensions.",
+    "inputTitle": "Input Image",
+    "resultTitle": "Resized Image",
+    "resizeMethod": "Resize Method",
+    "resizeByPixels": "Resize by Pixels",
+    "resizeByPixelsDescription": "Resize by specifying dimensions in pixels.",
+    "resizeByPercentage": "Resize by Percentage",
+    "resizeByPercentageDescription": "Resize by specifying a percentage of the original size.",
+    "dimensionType": "Dimension Type",
+    "maintainAspectRatio": "Maintain Aspect Ratio",
+    "maintainAspectRatioDescription": "Maintain the original aspect ratio of the image.",
+    "setWidth": "Set Width",
+    "setWidthDescription": "Specify the width in pixels and calculate height based on aspect ratio.",
+    "setHeight": "Set Height",
+    "setHeightDescription": "Specify the height in pixels and calculate width based on aspect ratio.",
+    "widthDescription": "Width (in pixels)",
+    "heightDescription": "Height (in pixels)",
+    "percentage": "Percentage",
+    "percentageDescription": "Percentage of original size (e.g., 50 for half size, 200 for double size)",
+    "toolInfo": {
+      "title": "Resize Image",
+      "description": "This tool allows you to resize JPG, PNG, SVG, or GIF images. You can resize by specifying dimensions in pixels or by percentage, with options to maintain the original aspect ratio."
+    },
+    "shortDescription": "Resize images easily."
+  },
+  "compress": {
+    "title": "Compress Image",
+    "description": "Reduce image file size while maintaining quality.",
+    "inputTitle": "Input image",
+    "resultTitle": "Compressed image",
+    "shortDescription": "Compress images to reduce file size while maintaining reasonable quality."
+  },
+  "crop": {
+    "title": "Crop Image",
+    "description": "Crop images to remove unwanted areas.",
+    "inputTitle": "Input image",
+    "resultTitle": "Cropped image",
+    "shortDescription": "Crop images quickly."
+  },
+  "changeColors": {
+    "title": "Change colors in image",
+    "description": "Change colors in image quickly",
+    "shortDescription": "Quickly swap colors in a image"
+  },
+  "changeOpacity": {
+    "title": "Change image Opacity",
+    "description": "Easily adjust the transparency of your images. Simply upload your image, use the slider to set the desired opacity level between 0 (fully transparent) and 1 (fully opaque), and download the modified image.",
+    "shortDescription": "Adjust transparency of images"
+  },
+  "convertToJpg": {
+    "title": "Convert Images to JPG",
+    "description": "Convert various image formats (PNG, GIF, TIF, PSD, SVG, WEBP, HEIC, RAW) to JPG with customizable quality and background color settings.",
+    "shortDescription": "Convert images to JPG with quality control"
+  },
+  "createTransparent": {
+    "title": "Create transparent PNG",
+    "description": "World",
+    "shortDescription": "Quickly make an image transparent"
+  },
+  "editor": {
+    "title": "Image Editor",
+    "description": "Advanced image editor with tools for cropping, rotating, annotating, adjusting colors, and adding watermarks. Edit your images with professional-grade tools directly in your browser.",
+    "shortDescription": "Edit images with advanced tools and features"
+  },
+  "imageToText": {
+    "title": "Image to Text (OCR)",
+    "description": "Extract text from images (JPG, PNG) using optical character recognition (OCR).",
+    "shortDescription": "Extract text from images using OCR."
+  },
+  "qrCode": {
+    "title": "QR Code Generator",
+    "description": "Generate QR codes for different data types: URL, Text, Email, Phone, SMS, WiFi, vCard, and more.",
+    "shortDescription": "Create customized QR codes for various data formats."
+  },
+  "removeBackground": {
+    "title": "Remove Background from Image",
+    "description": "World",
+    "shortDescription": "Automatically remove backgrounds from images"
+  },
+  "rotate": {
+    "title": "Rotate Image",
+    "description": "Rotate an image by a specified angle.",
+    "shortDescription": "Rotate an image easily."
+  },
+  "compressPng": {
+    "title": "Compress png",
+    "description": "This is a program that compresses PNG pictures. As soon as you paste your PNG picture in the input area, the program will compress it and show the result in the output area. In the options, you can adjust the compression level, as well as find the old and new picture file sizes.",
+    "shortDescription": "Quickly compress a PNG"
+  },
+  "convertJgpToPng": {
+    "title": "Convert JPG to PNG",
+    "description": "Quickly convert your JPG images to PNG. Just import your PNG image in the editor on the left",
+    "shortDescription": "Quickly convert your JPG images to PNG"
+  }
+}

src/pages/tools/image/i18n/hi.json

@@ -0,0 +1,152 @@
+{
+  "resize": {
+    "title": "छवि आकार बदलें",
+    "description": "छवि का आकार बदलें।",
+    "inputTitle": "इनपुट छवि",
+    "resultTitle": "आकार बदली गई छवि",
+    "resizeOptions": "आकार बदलने के विकल्प",
+    "resizeMethod": "आकार बदलने की विधि",
+    "methodPercentage": "प्रतिशत",
+    "methodPixels": "पिक्सेल",
+    "methodAspectRatio": "आकार अनुपात",
+    "width": "चौड़ाई",
+    "widthPlaceholder": "मान",
+    "height": "ऊंचाई",
+    "heightPlaceholder": "मान",
+    "maintainAspectRatio": "आकार अनुपात बनाए रखें",
+    "interpolationMethod": "इंटरपोलेशन विधि",
+    "methodNearest": "निकटतम",
+    "methodBilinear": "द्विरेखीय",
+    "methodBicubic": "द्विघन"
+  },
+  "crop": {
+    "title": "छवि क्रॉप करें",
+    "description": "छवि से अनावश्यक भाग हटाएं।",
+    "inputTitle": "इनपुट छवि",
+    "resultTitle": "क्रॉप की गई छवि",
+    "cropOptions": "क्रॉप विकल्प",
+    "cropMethod": "क्रॉप विधि",
+    "methodManual": "मैनुअल",
+    "methodAspectRatio": "आकार अनुपात",
+    "aspectRatio": "आकार अनुपात",
+    "ratio16x9": "16:9",
+    "ratio4x3": "4:3",
+    "ratio1x1": "1:1",
+    "ratio3x2": "3:2",
+    "cropArea": "क्रॉप क्षेत्र",
+    "xPosition": "X स्थिति",
+    "xPlaceholder": "पिक्सेल",
+    "yPosition": "Y स्थिति",
+    "yPlaceholder": "पिक्सेल",
+    "width": "चौड़ाई",
+    "widthPlaceholder": "पिक्सेल",
+    "height": "ऊंचाई",
+    "heightPlaceholder": "पिक्सेल"
+  },
+  "rotate": {
+    "title": "छवि घुमाएं",
+    "description": "छवि को निर्दिष्ट कोण से घुमाएं।",
+    "inputTitle": "इनपुट छवि",
+    "resultTitle": "घुमाई गई छवि",
+    "rotationOptions": "घुमाने के विकल्प",
+    "rotationAngle": "घुमाने का कोण",
+    "angle90": "90 डिग्री",
+    "angle180": "180 डिग्री",
+    "angle270": "270 डिग्री",
+    "customAngle": "कस्टम कोण",
+    "customAnglePlaceholder": "डिग्री",
+    "backgroundColor": "पृष्ठभूमि रंग",
+    "colorTransparent": "पारदर्शी",
+    "colorWhite": "सफेद",
+    "colorBlack": "काला",
+    "colorCustom": "कस्टम",
+    "customColorPlaceholder": "#RRGGBB"
+  },
+  "flip": {
+    "title": "छवि फ्लिप करें",
+    "description": "छवि को क्षैतिज या लंबवत रूप से फ्लिप करें।",
+    "inputTitle": "इनपुट छवि",
+    "resultTitle": "फ्लिप की गई छवि",
+    "flipOptions": "फ्लिप विकल्प",
+    "flipDirection": "फ्लिप दिशा",
+    "directionHorizontal": "क्षैतिज",
+    "directionVertical": "लंबवत",
+    "directionBoth": "दोनों"
+  },
+  "compress": {
+    "title": "छवि संपीड़ित करें",
+    "description": "छवि फ़ाइल आकार कम करें।",
+    "inputTitle": "इनपुट छवि",
+    "resultTitle": "संपीड़ित छवि",
+    "compressionOptions": "संपीड़न विकल्प",
+    "imageQuality": "छवि गुणवत्ता",
+    "qualityPlaceholder": "गुणवत्ता (1-100)",
+    "outputFormat": "आउटपुट प्रारूप",
+    "formatJpeg": "JPEG",
+    "formatPng": "PNG",
+    "formatWebp": "WebP",
+    "removeMetadata": "मेटाडेटा हटाएं",
+    "progressiveJpeg": "प्रगतिशील JPEG"
+  },
+  "convert": {
+    "title": "छवि प्रारूप बदलें",
+    "description": "छवि को एक प्रारूप से दूसरे में बदलें।",
+    "inputTitle": "इनपुट छवि",
+    "resultTitle": "परिवर्तित छवि",
+    "conversionOptions": "रूपांतरण विकल्प",
+    "outputFormat": "आउटपुट प्रारूप",
+    "formatJpeg": "JPEG",
+    "formatPng": "PNG",
+    "formatGif": "GIF",
+    "formatWebp": "WebP",
+    "formatBmp": "BMP",
+    "formatTiff": "TIFF",
+    "imageQuality": "छवि गुणवत्ता",
+    "qualityPlaceholder": "गुणवत्ता (1-100)",
+    "preserveTransparency": "पारदर्शिता संरक्षित करें"
+  },
+  "watermark": {
+    "title": "छवि पर वॉटरमार्क",
+    "description": "छवि पर टेक्स्ट या छवि वॉटरमार्क जोड़ें।",
+    "inputTitle": "इनपुट छवि",
+    "resultTitle": "वॉटरमार्क वाली छवि",
+    "watermarkOptions": "वॉटरमार्क विकल्प",
+    "watermarkType": "वॉटरमार्क प्रकार",
+    "typeText": "टेक्स्ट",
+    "typeImage": "छवि",
+    "watermarkText": "वॉटरमार्क टेक्स्ट",
+    "textPlaceholder": "टेक्स्ट",
+    "watermarkImage": "वॉटरमार्क छवि",
+    "imagePlaceholder": "छवि फ़ाइल",
+    "position": "स्थिति",
+    "positionTopLeft": "ऊपर बाएं",
+    "positionTopRight": "ऊपर दाएं",
+    "positionBottomLeft": "नीचे बाएं",
+    "positionBottomRight": "नीचे दाएं",
+    "positionCenter": "केंद्र",
+    "opacity": "पारदर्शिता",
+    "opacityPlaceholder": "प्रतिशत (1-100)",
+    "fontSize": "फ़ॉन्ट आकार",
+    "fontSizePlaceholder": "आकार",
+    "fontColor": "फ़ॉन्ट रंग",
+    "colorPlaceholder": "#RRGGBB"
+  },
+  "filter": {
+    "title": "छवि फ़िल्टर",
+    "description": "छवि पर विभिन्न फ़िल्टर लागू करें।",
+    "inputTitle": "इनपुट छवि",
+    "resultTitle": "फ़िल्टर की गई छवि",
+    "filterOptions": "फ़िल्टर विकल्प",
+    "filterType": "फ़िल्टर प्रकार",
+    "typeGrayscale": "ग्रेस्केल",
+    "typeSepia": "सेपिया",
+    "typeBlur": "धुंधला",
+    "typeSharpen": "तेज़",
+    "typeInvert": "उलटा",
+    "typeBrightness": "चमक",
+    "typeContrast": "कंट्रास्ट",
+    "typeSaturation": "संतृप्ति",
+    "filterIntensity": "फ़िल्टर तीव्रता",
+    "intensityPlaceholder": "मान (0-100)"
+  }
+}

src/pages/tools/image/png/compress-png/meta.ts

@@ -3,12 +3,15 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('png', {
-  name: 'Compress png',
+  i18n: {
+    name: 'image:compressPng.title',
+    description: 'image:compressPng.description',
+    shortDescription: 'image:compressPng.shortDescription'
+  },
+
   path: 'compress-png',
   icon: 'material-symbols-light:compress',
-  description:
-    'This is a program that compresses PNG pictures. As soon as you paste your PNG picture in the input area, the program will compress it and show the result in the output area. In the options, you can adjust the compression level, as well as find the old and new picture file sizes.',
-  shortDescription: 'Quickly compress a PNG',
+
   keywords: ['compress', 'png'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/image/png/convert-jgp-to-png/meta.ts

@@ -2,12 +2,15 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('png', {
-  name: 'Convert JPG to PNG',
+  i18n: {
+    name: 'image:convertJgpToPng.title',
+    description: 'image:convertJgpToPng.description',
+    shortDescription: 'image:convertJgpToPng.shortDescription'
+  },
+
   path: 'convert-jgp-to-png',
   icon: 'ph:file-jpg-thin',
-  description:
-    'Quickly convert your JPG images to PNG. Just import your PNG image in the editor on the left',
-  shortDescription: 'Quickly convert your JPG images to PNG',
+
   keywords: ['convert', 'jgp', 'png'],
   component: lazy(() => import('./index'))
 });

src/pages/tools/json/escape-json/meta.ts

@@ -2,13 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('json', {
-  name: 'Escape JSON',
   path: 'escape-json',
-  icon: 'lets-icons:json-light',
-  description:
-    'Free online JSON escaper. Just load your JSON in the input field and it will automatically get escaped. In the tool options, you can optionally enable wrapping the escaped JSON in double quotes to get an escaped JSON string.',
-  shortDescription: 'Quickly escape special JSON characters.',
-  longDescription: `This tool converts special characters in JSON files and data structures into their escaped versions. Such special characters are, for example, double quotes, newline characters, backslashes, tabs, and many others. If these characters aren't escaped and appear in a raw JSON string without escaping, they can lead to errors in data parsing. The program turns them into safe versions by adding a backslash (\\) before the character, changing its interpretation. Additionally, you can enable the "Wrap Output in Quotes" checkbox in the options, which adds double quotes around the resulting escaped JSON data. This is useful when the escaped JSON data needs to be used as a string in other data structures or the JavaScript programming language. Json-abulous!`,
-  keywords: ['escape', 'json'],
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:code',
+
+  keywords: ['json', 'escape', 'characters', 'format'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json:escapeJson.title',
+    description: 'json:escapeJson.description',
+    shortDescription: 'json:escapeJson.shortDescription'
+  }
 });

src/pages/tools/json/i18n/en.json

@@ -0,0 +1,65 @@
+{
+  "prettify": {
+    "title": "Prettify JSON",
+    "description": "Format JSON with proper indentation and spacing.",
+    "inputTitle": "Input JSON",
+    "resultTitle": "Prettified JSON",
+    "indentation": "Indentation",
+    "useSpaces": "Use Spaces",
+    "useSpacesDescription": "Indent output with spaces",
+    "useTabs": "Use Tabs",
+    "useTabsDescription": "Indent output with tabs.",
+    "toolInfo": {
+      "title": "Prettify JSON",
+      "description": "This tool allows you to format JSON data with proper indentation and spacing, making it more readable and easier to work with."
+    },
+    "title": "Prettify JSON",
+    "shortDescription": "Format and beautify JSON code"
+  },
+  "minify": {
+    "title": "Minify JSON",
+    "description": "Remove all unnecessary whitespace from JSON.",
+    "inputTitle": "Input JSON",
+    "resultTitle": "Minified JSON",
+    "toolInfo": {
+      "title": "What Is JSON Minification?",
+      "description": "JSON minification is the process of removing all unnecessary whitespace characters from JSON data while maintaining its validity. This includes removing spaces, newlines, and indentation that aren't required for the JSON to be parsed correctly. Minification reduces the size of JSON data, making it more efficient for storage and transmission while keeping the exact same data structure and values."
+    },
+    "title": "Minify JSON",
+    "shortDescription": "Minify JSON by removing whitespace"
+  },
+  "validateJson": {
+    "title": "Validate JSON",
+    "description": "Check if JSON is valid and well-formed.",
+    "inputTitle": "Input JSON",
+    "resultTitle": "Validation Result",
+    "validJson": "✅ Valid JSON",
+    "invalidJson": "❌ {{error}}",
+    "toolInfo": {
+      "title": "What is JSON Validation?",
+      "description": "JSON (JavaScript Object Notation) is a lightweight data-interchange format. JSON validation ensures that the structure of the data conforms to the JSON standard. A valid JSON object must have: - Property names enclosed in double quotes. - Properly balanced curly braces {}. - No trailing commas after the last key-value pair. - Proper nesting of objects and arrays. This tool checks the input JSON and provides feedback to help identify and fix common errors."
+    },
+    "title": "Validate JSON",
+    "shortDescription": "Validate JSON code for errors"
+  },
+  "escapeJson": {
+    "title": "Escape JSON",
+    "description": "Escape special characters in JSON strings. Convert JSON data to properly escaped format for safe transmission or storage.",
+    "shortDescription": "Escape special characters in JSON"
+  },
+  "jsonToXml": {
+    "title": "JSON to XML",
+    "description": "Convert JSON data to XML format. Transform structured JSON objects into well-formed XML documents.",
+    "shortDescription": "Convert JSON to XML format"
+  },
+  "stringify": {
+    "title": "Stringify JSON",
+    "description": "Convert JavaScript objects to JSON string format. Serialize data structures into JSON strings for storage or transmission.",
+    "shortDescription": "Convert objects to JSON string"
+  },
+  "tsvToJson": {
+    "title": "TSV to JSON",
+    "description": "Convert TSV (Tab-Separated Values) data to JSON format. Transform tabular data into structured JSON objects.",
+    "shortDescription": "Convert TSV to JSON format"
+  }
+}

src/pages/tools/json/i18n/hi.json

@@ -0,0 +1,80 @@
+{
+  "escape": {
+    "title": "JSON एस्केप करें",
+    "description": "JSON स्ट्रिंग में विशेष वर्णों को एस्केप करें।",
+    "inputTitle": "इनपुट JSON",
+    "resultTitle": "एस्केप किया गया JSON",
+    "escapeOptions": "एस्केप विकल्प",
+    "escapeQuotes": "उद्धरण एस्केप करें",
+    "escapeNewlines": "नई पंक्तियां एस्केप करें",
+    "escapeTabs": "टैब एस्केप करें",
+    "escapeBackslashes": "बैकस्लैश एस्केप करें"
+  },
+  "jsonToXml": {
+    "title": "JSON से XML",
+    "description": "JSON डेटा को XML प्रारूप में बदलें।",
+    "inputTitle": "इनपुट JSON",
+    "resultTitle": "XML परिणाम",
+    "conversionOptions": "रूपांतरण विकल्प",
+    "rootElement": "मूल तत्व",
+    "rootPlaceholder": "तत्व नाम",
+    "indentSize": "इंडेंट आकार",
+    "sizePlaceholder": "आकार",
+    "includeAttributes": "विशेषताएं शामिल करें"
+  },
+  "minify": {
+    "title": "JSON संक्षिप्त करें",
+    "description": "JSON को संक्षिप्त प्रारूप में बदलें।",
+    "inputTitle": "इनपुट JSON",
+    "resultTitle": "संक्षिप्त JSON",
+    "minifyOptions": "संक्षिप्त करने के विकल्प",
+    "removeComments": "टिप्पणियां हटाएं",
+    "removeWhitespace": "सफेद स्थान हटाएं",
+    "compactArrays": "सरणियां संक्षिप्त करें"
+  },
+  "prettify": {
+    "title": "JSON सुंदर बनाएं",
+    "description": "JSON को सुंदर प्रारूप में बदलें।",
+    "inputTitle": "इनपुट JSON",
+    "resultTitle": "सुंदर JSON",
+    "formattingOptions": "फॉर्मेटिंग विकल्प",
+    "indentSize": "इंडेंट आकार",
+    "sizePlaceholder": "आकार",
+    "indentCharacter": "इंडेंट वर्ण",
+    "space": "स्पेस",
+    "tab": "टैब",
+    "sortKeys": "कुंजियां क्रमबद्ध करें"
+  },
+  "stringify": {
+    "title": "JSON स्ट्रिंगिफाई",
+    "description": "JavaScript ऑब्जेक्ट को JSON स्ट्रिंग में बदलें।",
+    "inputTitle": "इनपुट ऑब्जेक्ट",
+    "resultTitle": "JSON स्ट्रिंग",
+    "stringifyOptions": "स्ट्रिंगिफाई विकल्प",
+    "prettyPrint": "सुंदर प्रिंट",
+    "includeFunctions": "फ़ंक्शन शामिल करें",
+    "includeUndefined": "अपरिभाषित शामिल करें"
+  },
+  "tsvToJson": {
+    "title": "TSV से JSON",
+    "description": "TSV डेटा को JSON प्रारूप में बदलें।",
+    "inputTitle": "इनपुट TSV",
+    "resultTitle": "JSON परिणाम",
+    "conversionOptions": "रूपांतरण विकल्प",
+    "firstRowAsHeaders": "पहली पंक्ति शीर्षक के रूप में",
+    "includeHeaders": "शीर्षक शामिल करें",
+    "outputFormat": "आउटपुट प्रारूप",
+    "arrayFormat": "सरणी प्रारूप",
+    "objectFormat": "ऑब्जेक्ट प्रारूप"
+  },
+  "validateJson": {
+    "title": "JSON मान्य करें",
+    "description": "JSON स्ट्रिंग की वैधता जांचें।",
+    "inputTitle": "इनपुट JSON",
+    "resultTitle": "मान्यता परिणाम",
+    "validationOptions": "मान्यता विकल्प",
+    "strictMode": "सख्त मोड",
+    "allowComments": "टिप्पणियां अनुमति दें",
+    "allowTrailingCommas": "अनुगामी कॉमा अनुमति दें"
+  }
+}

src/pages/tools/json/json-to-xml/meta.ts

@@ -2,11 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('json', {
-  name: 'Convert JSON to XML',
   path: 'json-to-xml',
-  icon: 'mdi-light:xml',
-  description: 'Convert JSON files to XML format with customizable options.',
-  shortDescription: 'Convert JSON data to XML format',
-  keywords: ['json', 'xml', 'convert', 'transform', 'parse'],
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:code',
+
+  keywords: ['json', 'xml', 'convert', 'transform'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json:jsonToXml.title',
+    description: 'json:jsonToXml.description',
+    shortDescription: 'json:jsonToXml.shortDescription'
+  }
 });

src/pages/tools/json/minify/index.tsx

@@ -5,6 +5,7 @@ import ToolTextResult from '@components/result/ToolTextResult';
 import { minifyJson } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
+import { useTranslation } from 'react-i18next';
 
 type InitialValuesType = Record<string, never>;
 
@@ -47,6 +48,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 ];
 
 export default function MinifyJson({ title }: ToolComponentProps) {
+  const { t } = useTranslation('json');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -58,11 +60,15 @@ export default function MinifyJson({ title }: ToolComponentProps) {
     <ToolContent
       title={title}
       inputComponent={
-        <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('minify.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
         <ToolTextResult
-          title="Minified JSON"
+          title={t('minify.resultTitle')}
           value={result}
           extension={'json'}
         />
@@ -70,9 +76,8 @@ export default function MinifyJson({ title }: ToolComponentProps) {
       initialValues={initialValues}
       getGroups={null}
       toolInfo={{
-        title: 'What Is JSON Minification?',
-        description:
-          "JSON minification is the process of removing all unnecessary whitespace characters from JSON data while maintaining its validity. This includes removing spaces, newlines, and indentation that aren't required for the JSON to be parsed correctly. Minification reduces the size of JSON data, making it more efficient for storage and transmission while keeping the exact same data structure and values."
+        title: t('minify.toolInfo.title'),
+        description: t('minify.toolInfo.description')
       }}
       exampleCards={exampleCards}
       input={input}

src/pages/tools/json/minify/meta.ts

@@ -2,12 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('json', {
-  name: 'Minify JSON',
   path: 'minify',
-  icon: 'lets-icons:json-light',
-  description:
-    'Minify your JSON by removing all unnecessary whitespace and formatting. This tool compresses JSON data to its smallest possible size while maintaining valid JSON structure.',
-  shortDescription: 'Quickly compress JSON file.',
-  keywords: ['minify', 'compress', 'minimize', 'json', 'compact'],
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:code',
+
+  keywords: ['json', 'minify', 'compress', 'whitespace'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json:minify.title',
+    description: 'json:minify.description',
+    shortDescription: 'json:minify.shortDescription'
+  }
 });

src/pages/tools/json/prettify/index.tsx

@@ -14,6 +14,7 @@ import RadioWithTextField from '@components/options/RadioWithTextField';
 import SimpleRadio from '@components/options/SimpleRadio';
 import { isNumber, updateNumberField } from '../../../../utils/string';
 import ToolContent from '@components/ToolContent';
+import { useTranslation } from 'react-i18next';
 
 type InitialValuesType = {
   indentationType: 'tab' | 'space';
@@ -115,6 +116,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 ];
 
 export default function PrettifyJson({ title }: ToolComponentProps) {
+  const { t } = useTranslation('json');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -128,11 +130,15 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
       title={title}
       input={input}
       inputComponent={
-        <ToolTextInput title={'Input JSON'} value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('prettify.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
         <ToolTextResult
-          title={'Pretty JSON'}
+          title={t('prettify.resultTitle')}
           value={result}
           extension={'json'}
         />
@@ -140,14 +146,14 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
       initialValues={initialValues}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Indentation',
+          title: t('prettify.indentation'),
           component: (
             <Box>
               <RadioWithTextField
                 checked={values.indentationType === 'space'}
-                title={'Use Spaces'}
+                title={t('prettify.useSpaces')}
                 fieldName={'indentationType'}
-                description={'Indent output with spaces'}
+                description={t('prettify.useSpacesDescription')}
                 value={values.spacesCount.toString()}
                 onRadioClick={() => updateField('indentationType', 'space')}
                 onTextChange={(val) =>
@@ -157,8 +163,8 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
               <SimpleRadio
                 onClick={() => updateField('indentationType', 'tab')}
                 checked={values.indentationType === 'tab'}
-                description={'Indent output with tabs.'}
-                title={'Use Tabs'}
+                description={t('prettify.useTabsDescription')}
+                title={t('prettify.useTabs')}
               />
             </Box>
           )
@@ -168,9 +174,8 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
       setInput={setInput}
       exampleCards={exampleCards}
       toolInfo={{
-        title: 'What Is a JSON Prettifier?',
-        description:
-          'This tool adds consistent formatting to the data in JavaScript Object Notation (JSON) format. This transformation makes the JSON code more readable, making it easier to understand and edit. The program parses the JSON data structure into tokens and then reformats them by adding indentation and line breaks. If the data is hierarchial, then it adds indentation at the beginning of lines to visually show the depth of the JSON and adds newlines to break long single-line JSON arrays into multiple shorter, more readable ones. Additionally, this utility can remove unnecessary spaces and tabs from your JSON code (especially leading and trailing whitespaces), making it more compact. You can choose the line indentation method in the options: indent with spaces or indent with tabs. When using spaces, you can also specify how many spaces to use for each indentation level (usually 2 or 4 spaces). '
+        title: t('prettify.toolInfo.title'),
+        description: t('prettify.toolInfo.description')
       }}
     />
   );

src/pages/tools/json/prettify/meta.ts

@@ -2,12 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('json', {
-  name: 'Prettify JSON',
   path: 'prettify',
-  icon: 'lets-icons:json-light',
-  description:
-    "Just load your JSON in the input field and it will automatically get prettified. In the tool options, you can choose whether to use spaces or tabs for indentation and if you're using spaces, you can specify the number of spaces to add per indentation level.",
-  shortDescription: 'Quickly beautify a JSON data structure.',
-  keywords: ['prettify'],
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:code',
+
+  keywords: ['json', 'prettify', 'format', 'beautify'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json:prettify.title',
+    description: 'json:prettify.description',
+    shortDescription: 'json:prettify.shortDescription'
+  }
 });

src/pages/tools/json/stringify/meta.ts

@@ -2,20 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('json', {
-  name: 'Stringify JSON',
   path: 'stringify',
-  icon: 'ant-design:field-string-outlined',
-  description:
-    'Convert JavaScript objects and arrays into their JSON string representation. Options include custom indentation and HTML character escaping for web-safe JSON strings.',
-  shortDescription: 'Convert JavaScript objects to JSON strings',
-  keywords: [
-    'stringify',
-    'serialize',
-    'convert',
-    'object',
-    'array',
-    'json',
-    'string'
-  ],
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:code',
+
+  keywords: ['json', 'stringify', 'serialize', 'convert'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json:stringify.title',
+    description: 'json:stringify.description',
+    shortDescription: 'json:stringify.shortDescription'
+  }
 });

src/pages/tools/json/tsv-to-json/meta.ts

@@ -2,14 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('json', {
-  name: 'Convert TSV to JSON',
   path: 'tsv-to-json',
-  icon: 'material-symbols:tsv-rounded',
-  description:
-    'Convert TSV files to JSON format with customizable options for delimiters, quotes, and output formatting. Support for headers, comments, and dynamic type conversion.',
-  shortDescription: 'Convert TSV data to JSON format.',
-  longDescription:
-    'This tool allows you to convert TSV (Tab-Separated Values) files into JSON format. You can customize the conversion process by specifying delimiters, quote characters, and whether to use headers. It also supports dynamic type conversion for values, handling comments, and skipping empty lines. The output can be formatted with indentation or minified as needed.',
-  keywords: ['tsv', 'json', 'convert', 'transform', 'parse'],
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:code',
+
+  keywords: ['tsv', 'json', 'convert', 'tabular'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json:tsvToJson.title',
+    description: 'json:tsvToJson.description',
+    shortDescription: 'json:tsvToJson.shortDescription'
+  }
 });

src/pages/tools/json/validateJson/index.tsx

@@ -5,6 +5,7 @@ import { CardExampleType } from '@components/examples/ToolExamples';
 import { validateJson } from './service';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolContent from '@components/ToolContent';
+import { useTranslation } from 'react-i18next';
 
 const exampleCards: CardExampleType<{}>[] = [
   {
@@ -46,6 +47,7 @@ const exampleCards: CardExampleType<{}>[] = [
 ];
 
 export default function ValidateJson({ title }: ToolComponentProps) {
+  const { t } = useTranslation('json');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -53,9 +55,9 @@ export default function ValidateJson({ title }: ToolComponentProps) {
     const { valid, error } = validateJson(input);
 
     if (valid) {
-      setResult('✅ Valid JSON');
+      setResult(t('validateJson.validJson'));
     } else {
-      setResult(`❌ ${error}`);
+      setResult(t('validateJson.invalidJson', { error }));
     }
   };
 
@@ -63,25 +65,20 @@ export default function ValidateJson({ title }: ToolComponentProps) {
     <ToolContent
       title={title}
       inputComponent={
-        <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('validateJson.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
-        <ToolTextResult title="Validation Result" value={result} />
+        <ToolTextResult title={t('validateJson.resultTitle')} value={result} />
       }
       initialValues={{}}
       getGroups={null}
       toolInfo={{
-        title: 'What is JSON Validation?',
-        description: `
-          JSON (JavaScript Object Notation) is a lightweight data-interchange format.
-          JSON validation ensures that the structure of the data conforms to the JSON standard.
-          A valid JSON object must have:
-          - Property names enclosed in double quotes.
-          - Properly balanced curly braces {}.
-          - No trailing commas after the last key-value pair.
-          - Proper nesting of objects and arrays.
-          This tool checks the input JSON and provides feedback to help identify and fix common errors.
-          `
+        title: t('validateJson.toolInfo.title'),
+        description: t('validateJson.toolInfo.description')
       }}
       exampleCards={exampleCards}
       input={input}

src/pages/tools/json/validateJson/meta.ts

@@ -2,12 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('json', {
-  name: 'Validate JSON',
-  path: 'validateJson',
-  icon: 'lets-icons:json-light',
-  description:
-    'Validate JSON data and identify formatting issues such as missing quotes, trailing commas, and incorrect brackets.',
-  shortDescription: 'Quickly validate a JSON data structure.',
-  keywords: ['validate', 'json', 'syntax'],
-  component: lazy(() => import('./index'))
+  path: 'validate-json',
+  icon: 'material-symbols:check-circle',
+
+  keywords: ['json', 'validate', 'check', 'syntax', 'errors'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'json:validateJson.title',
+    description: 'json:validateJson.description',
+    shortDescription: 'json:validateJson.shortDescription'
+  }
 });

src/pages/tools/list/duplicate/index.tsx

@@ -11,6 +11,7 @@ import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import SimpleRadio from '@components/options/SimpleRadio';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import * as Yup from 'yup';
+import { useTranslation } from 'react-i18next';
 
 interface InitialValuesType {
   splitOperatorType: SplitOperatorType;
@@ -101,6 +102,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 ];
 
 export default function Duplicate({ title }: ToolComponentProps) {
+  const { t } = useTranslation('list');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -134,55 +136,53 @@ export default function Duplicate({ title }: ToolComponentProps) {
     updateField
   }) => [
     {
-      title: 'Split Options',
+      title: t('duplicate.splitOptions'),
       component: (
         <Box>
           <SimpleRadio
             onClick={() => updateField('splitOperatorType', 'symbol')}
             checked={values.splitOperatorType === 'symbol'}
-            title={'Split by Symbol'}
+            title={t('duplicate.splitBySymbol')}
           />
           <SimpleRadio
             onClick={() => updateField('splitOperatorType', 'regex')}
             checked={values.splitOperatorType === 'regex'}
-            title={'Split by Regular Expression'}
+            title={t('duplicate.splitByRegex')}
           />
           <TextFieldWithDesc
             value={values.splitSeparator}
             onOwnChange={(val) => updateField('splitSeparator', val)}
-            description={'Separator to split the list'}
+            description={t('duplicate.splitSeparatorDescription')}
           />
           <TextFieldWithDesc
             value={values.joinSeparator}
             onOwnChange={(val) => updateField('joinSeparator', val)}
-            description={'Separator to join the duplicated list'}
+            description={t('duplicate.joinSeparatorDescription')}
           />
         </Box>
       )
     },
     {
-      title: 'Duplication Options',
+      title: t('duplicate.duplicationOptions'),
       component: (
         <Box>
           <TextFieldWithDesc
             value={values.copy}
             onOwnChange={(val) => updateField('copy', val)}
-            description={'Number of copies (can be fractional)'}
+            description={t('duplicate.copyDescription')}
             type="number"
           />
           <CheckboxWithDesc
-            title={'Concatenate'}
+            title={t('duplicate.concatenate')}
             checked={values.concatenate}
             onChange={(checked) => updateField('concatenate', checked)}
-            description={
-              'Concatenate copies (if unchecked, items will be interweaved)'
-            }
+            description={t('duplicate.concatenateDescription')}
           />
           <CheckboxWithDesc
-            title={'Reverse'}
+            title={t('duplicate.reverse')}
             checked={values.reverse}
             onChange={(checked) => updateField('reverse', checked)}
-            description={'Reverse the duplicated items'}
+            description={t('duplicate.reverseDescription')}
           />
         </Box>
       )
@@ -193,18 +193,21 @@ export default function Duplicate({ title }: ToolComponentProps) {
     <ToolContent
       title={title}
       inputComponent={
-        <ToolTextInput title="Input List" value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('duplicate.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
-        <ToolTextResult title="Duplicated List" value={result} />
+        <ToolTextResult title={t('duplicate.resultTitle')} value={result} />
       }
       initialValues={initialValues}
       getGroups={getGroups}
       validationSchema={validationSchema}
       toolInfo={{
-        title: 'List Duplication',
-        description:
-          "This tool allows you to duplicate items in a list. You can specify the number of copies (including fractional values), control whether items are concatenated or interweaved, and even reverse the duplicated items. It's useful for creating repeated patterns, generating test data, or expanding lists with predictable content."
+        title: t('duplicate.toolInfo.title'),
+        description: t('duplicate.toolInfo.description')
       }}
       exampleCards={exampleCards}
       input={input}

src/pages/tools/list/duplicate/meta.ts

@@ -3,12 +3,14 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('list', {
-  name: 'Duplicate',
   path: 'duplicate',
-  icon: 'mdi:content-duplicate',
-  description:
-    'A tool to duplicate each item in a list a specified number of times. Perfect for creating repeated patterns, test data, or expanding datasets.',
-  shortDescription: 'Repeat items in a list multiple times.',
+  icon: 'material-symbols-light:content-copy',
+
   keywords: ['duplicate'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:duplicate.title',
+    description: 'list:duplicate.description',
+    shortDescription: 'list:duplicate.shortDescription'
+  }
 });

src/pages/tools/list/find-most-popular/meta.ts

@@ -3,12 +3,14 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('list', {
-  name: 'Find most popular',
   path: 'find-most-popular',
-  icon: 'material-symbols-light:query-stats',
-  description:
-    'A tool to identify and count the most frequently occurring items in a list. Useful for data analysis, finding trends, or identifying common elements.',
-  shortDescription: 'Find most common items in a list.',
+  icon: 'material-symbols-light:trending-up',
+
   keywords: ['find', 'most', 'popular'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:findMostPopular.title',
+    description: 'list:findMostPopular.description',
+    shortDescription: 'list:findMostPopular.shortDescription'
+  }
 });

src/pages/tools/list/find-unique/index.tsx

@@ -7,6 +7,7 @@ import { findUniqueCompute, SplitOperatorType } from './service';
 import SimpleRadio from '@components/options/SimpleRadio';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
@@ -35,6 +36,7 @@ const splitOperators: {
 ];
 
 export default function FindUnique() {
+  const { t } = useTranslation('list');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -64,18 +66,24 @@ export default function FindUnique() {
 
   return (
     <ToolContent
-      title="Find Unique"
+      title={t('findUnique.title')}
       initialValues={initialValues}
       compute={compute}
       input={input}
       setInput={setInput}
       inputComponent={
-        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('findUnique.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
+      }
+      resultComponent={
+        <ToolTextResult title={t('findUnique.resultTitle')} value={result} />
       }
-      resultComponent={<ToolTextResult title={'Unique items'} value={result} />}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Input List Delimiter',
+          title: t('findUnique.inputListDelimiter'),
           component: (
             <Box>
               {splitOperators.map(({ title, description, type }) => (
@@ -88,7 +96,7 @@ export default function FindUnique() {
                 />
               ))}
               <TextFieldWithDesc
-                description={'Set a delimiting symbol or regular expression.'}
+                description={t('findUnique.delimiterDescription')}
                 value={values.splitSeparator}
                 onOwnChange={(val) => updateField('splitSeparator', val)}
               />
@@ -96,7 +104,7 @@ export default function FindUnique() {
           )
         },
         {
-          title: 'Output List Delimiter',
+          title: t('findUnique.outputListDelimiter'),
           component: (
             <Box>
               <TextFieldWithDesc
@@ -104,18 +112,14 @@ export default function FindUnique() {
                 onOwnChange={(value) => updateField('joinSeparator', value)}
               />
               <CheckboxWithDesc
-                title={'Trim top list items'}
-                description={
-                  'Remove leading and trailing spaces before comparing items'
-                }
+                title={t('findUnique.trimItems')}
+                description={t('findUnique.trimItemsDescription')}
                 checked={values.trimItems}
                 onChange={(value) => updateField('trimItems', value)}
               />
               <CheckboxWithDesc
-                title={'Skip empty items'}
-                description={
-                  "Don't include the empty list items in the output."
-                }
+                title={t('findUnique.skipEmptyItems')}
+                description={t('findUnique.skipEmptyItemsDescription')}
                 checked={values.deleteEmptyItems}
                 onChange={(value) => updateField('deleteEmptyItems', value)}
               />
@@ -123,22 +127,20 @@ export default function FindUnique() {
           )
         },
         {
-          title: 'Unique Item Options',
+          title: t('findUnique.uniqueItemOptions'),
           component: (
             <Box>
               <CheckboxWithDesc
-                title={'Find Absolutely Unique Items'}
-                description={
-                  'Display only those items of the list that exist in a single copy.'
-                }
+                title={t('findUnique.findAbsolutelyUniqueItems')}
+                description={t(
+                  'findUnique.findAbsolutelyUniqueItemsDescription'
+                )}
                 checked={values.absolutelyUnique}
                 onChange={(value) => updateField('absolutelyUnique', value)}
               />
               <CheckboxWithDesc
-                title={'Case Sensitive Items'}
-                description={
-                  'Output items with different case as unique elements in the list.'
-                }
+                title={t('findUnique.caseSensitiveItems')}
+                description={t('findUnique.caseSensitiveItemsDescription')}
                 checked={values.caseSensitive}
                 onChange={(value) => updateField('caseSensitive', value)}
               />

src/pages/tools/list/find-unique/meta.ts

@@ -2,11 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('list', {
-  name: 'Find unique',
   path: 'find-unique',
-  icon: 'mynaui:one',
-  description: "World's simplest browser-based utility for finding unique items in a list. Just input your list with any separator, and it will automatically identify and extract unique items. Perfect for removing duplicates, finding distinct values, or analyzing data uniqueness. You can customize the input/output separators and choose whether to preserve the original order.",
-  shortDescription: 'Find unique items in a list',
+  icon: 'material-symbols-light:search',
+
   keywords: ['find', 'unique'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:findUnique.title',
+    description: 'list:findUnique.description',
+    shortDescription: 'list:findUnique.shortDescription'
+  }
 });

src/pages/tools/list/group/index.tsx

@@ -9,6 +9,7 @@ import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import { formatNumber } from '../../../../utils/number';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
@@ -40,6 +41,7 @@ const splitOperators: {
 ];
 
 export default function FindUnique({ title }: ToolComponentProps) {
+  const { t } = useTranslation('list');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -78,28 +80,32 @@ export default function FindUnique({ title }: ToolComponentProps) {
       title={title}
       input={input}
       inputComponent={
-        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('group.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
-        <ToolTextResult title={'Grouped items'} value={result} />
+        <ToolTextResult title={t('group.resultTitle')} value={result} />
       }
       initialValues={initialValues}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Input Item Separator',
+          title: t('group.inputItemSeparator'),
           component: (
             <Box>
               {splitOperators.map(({ title, description, type }) => (
                 <SimpleRadio
                   key={type}
                   onClick={() => updateField('splitOperatorType', type)}
-                  title={title}
-                  description={description}
+                  title={t(`group.splitOperators.${type}.title`)}
+                  description={t(`group.splitOperators.${type}.description`)}
                   checked={values.splitOperatorType === type}
                 />
               ))}
               <TextFieldWithDesc
-                description={'Set a delimiting symbol or regular expression.'}
+                description={t('group.splitSeparatorDescription')}
                 value={values.splitSeparator}
                 onOwnChange={(val) => updateField('splitSeparator', val)}
               />
@@ -107,12 +113,12 @@ export default function FindUnique({ title }: ToolComponentProps) {
           )
         },
         {
-          title: 'Group Size and Separators',
+          title: t('group.groupSizeAndSeparators'),
           component: (
             <Box>
               <TextFieldWithDesc
                 value={values.groupNumber}
-                description={'Number of items in a group'}
+                description={t('group.groupNumberDescription')}
                 type={'number'}
                 onOwnChange={(value) =>
                   updateField('groupNumber', formatNumber(value, 1))
@@ -120,52 +126,46 @@ export default function FindUnique({ title }: ToolComponentProps) {
               />
               <TextFieldWithDesc
                 value={values.itemSeparator}
-                description={'Item separator character'}
+                description={t('group.itemSeparatorDescription')}
                 onOwnChange={(value) => updateField('itemSeparator', value)}
               />
               <TextFieldWithDesc
                 value={values.groupSeparator}
-                description={'Group separator character'}
+                description={t('group.groupSeparatorDescription')}
                 onOwnChange={(value) => updateField('groupSeparator', value)}
               />
               <TextFieldWithDesc
                 value={values.leftWrap}
-                description={"Group's left wrap symbol."}
+                description={t('group.leftWrapDescription')}
                 onOwnChange={(value) => updateField('leftWrap', value)}
               />
               <TextFieldWithDesc
                 value={values.rightWrap}
-                description={"Group's right wrap symbol."}
+                description={t('group.rightWrapDescription')}
                 onOwnChange={(value) => updateField('rightWrap', value)}
               />
             </Box>
           )
         },
         {
-          title: 'Empty Items and Padding',
+          title: t('group.emptyItemsAndPadding'),
           component: (
             <Box>
               <CheckboxWithDesc
-                title={'Delete Empty Items'}
-                description={
-                  "Ignore empty items and don't include them in the groups."
-                }
+                title={t('group.deleteEmptyItems')}
+                description={t('group.deleteEmptyItemsDescription')}
                 checked={values.deleteEmptyItems}
                 onChange={(value) => updateField('deleteEmptyItems', value)}
               />
               <CheckboxWithDesc
-                title={'Pad Non-full Groups'}
-                description={
-                  'Fill non-full groups with a custom item (enter below).'
-                }
+                title={t('group.padNonFullGroups')}
+                description={t('group.padNonFullGroupsDescription')}
                 checked={values.padNonFullGroup}
                 onChange={(value) => updateField('padNonFullGroup', value)}
               />
               <TextFieldWithDesc
                 value={values.paddingChar}
-                description={
-                  'Use this character or item to pad non-full groups.'
-                }
+                description={t('group.paddingCharDescription')}
                 onOwnChange={(value) => updateField('paddingChar', value)}
               />
             </Box>

src/pages/tools/list/group/meta.ts

@@ -2,11 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('list', {
-  name: 'Group',
   path: 'group',
   icon: 'pajamas:group',
-  description: "World's simplest browser-based utility for grouping list items. Input your list and specify grouping criteria to organize items into logical groups. Perfect for categorizing data, organizing information, or creating structured lists. Supports custom separators and various grouping options.",
-  shortDescription: 'Group list items by common properties',
+
   keywords: ['group'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:group.title',
+    description: 'list:group.description',
+    shortDescription: 'list:group.shortDescription'
+  }
 });

src/pages/tools/list/i18n/en.json

@@ -0,0 +1,211 @@
+{
+  "findUnique": {
+    "title": "Find Unique",
+    "inputTitle": "Input List",
+    "resultTitle": "Unique Items",
+    "inputListDelimiter": "Input List Delimiter",
+    "delimiterDescription": "Set a delimiting symbol or regular expression.",
+    "outputListDelimiter": "Output List Delimiter",
+    "trimItems": "Trim List Items",
+    "trimItemsDescription": "Remove leading and trailing spaces before comparing items.",
+    "skipEmptyItems": "Skip Empty Items",
+    "skipEmptyItemsDescription": "Don't include the empty list items in the output.",
+    "uniqueItemOptions": "Unique Item Options",
+    "findAbsolutelyUniqueItems": "Find Absolutely Unique Items",
+    "findAbsolutelyUniqueItemsDescription": "Display only those items of the list that exist in a single copy.",
+    "caseSensitiveItems": "Case Sensitive Items",
+    "caseSensitiveItemsDescription": "Output items with different case as unique elements in the list.",
+    "title": "Find unique",
+    "description": "World's simplest browser-based utility for finding unique items in a list. Input your list and instantly get all unique values with duplicates removed. Perfect for data cleaning, deduplication, or finding distinct elements.",
+    "shortDescription": "Find unique items in a list"
+  },
+  "wrap": {
+    "title": "Wrap List",
+    "description": "Add text before and after each list item.",
+    "inputTitle": "Input List",
+    "resultTitle": "Wrapped List",
+    "splitOptions": "Split Options",
+    "splitBySymbol": "Split by Symbol",
+    "splitByRegex": "Split by Regular Expression",
+    "splitSeparatorDescription": "Separator to split the list",
+    "joinSeparatorDescription": "Separator to join the wrapped list",
+    "removeEmptyItems": "Remove empty items",
+    "wrapOptions": "Wrap Options",
+    "leftTextDescription": "Text to add before each item",
+    "rightTextDescription": "Text to add after each item",
+    "toolInfo": {
+      "title": "List Wrapping",
+      "description": "This tool allows you to add text before and after each item in a list. You can specify different text for the left and right sides, and control how the list is processed. It's useful for adding quotes, brackets, or other formatting to list items, preparing data for different formats, or creating structured text."
+    },
+    "title": "Wrap",
+    "shortDescription": "Wrap list items with specified criteria"
+  },
+  "sort": {
+    "inputTitle": "Input list",
+    "resultTitle": "Sorted list",
+    "inputItemSeparator": "Input item separator",
+    "splitSeparatorDescription": "Set a delimiting symbol or regular expression.",
+    "splitOperators": {
+      "symbol": {
+        "title": "Use a Symbol for Splitting",
+        "description": "Delimit input list items with a character."
+      },
+      "regex": {
+        "title": "Use a Regex for Splitting",
+        "description": "Delimit input list items with a regular expression."
+      }
+    },
+    "sortMethod": "Sort method",
+    "sortMethodDescription": "Select a sorting method.",
+    "sortOptions": {
+      "alphabetic": "Sort Alphabetically",
+      "numeric": "Sort Numerically",
+      "length": "Sort by Length"
+    },
+    "orderDescription": "Select a sorting order.",
+    "orderOptions": {
+      "increasing": "Increasing order",
+      "decreasing": "Decreasing order"
+    },
+    "caseSensitive": "Case Sensitive Sort",
+    "caseSensitiveDescription": "Sort uppercase and lowercase items separately. Capital letters precede lowercase letters in an ascending list. (Works only in alphabetical sorting mode.)",
+    "sortedItemProperties": "Sorted item properties",
+    "joinSeparatorDescription": "Use this symbol as a joiner between items in a sorted list.",
+    "removeDuplicates": "Remove duplicates",
+    "removeDuplicatesDescription": "Delete duplicate list items.",
+    "title": "Sort",
+    "description": "World's simplest browser-based utility for sorting list items. Input your list and specify sorting criteria to organize items in ascending or descending order. Perfect for data organization, text processing, or creating ordered lists.",
+    "shortDescription": "Sort list items in specified order"
+  },
+  "group": {
+    "inputTitle": "Input list",
+    "resultTitle": "Grouped items",
+    "inputItemSeparator": "Input Item Separator",
+    "splitSeparatorDescription": "Set a delimiting symbol or regular expression.",
+    "splitOperators": {
+      "symbol": {
+        "title": "Use a Symbol for Splitting",
+        "description": "Delimit input list items with a character."
+      },
+      "regex": {
+        "title": "Use a Regex for Splitting",
+        "description": "Delimit input list items with a regular expression."
+      }
+    },
+    "groupSizeAndSeparators": "Group Size and Separators",
+    "groupNumberDescription": "Number of items in a group",
+    "itemSeparatorDescription": "Item separator character",
+    "groupSeparatorDescription": "Group separator character",
+    "leftWrapDescription": "Group's left wrap symbol.",
+    "rightWrapDescription": "Group's right wrap symbol.",
+    "emptyItemsAndPadding": "Empty Items and Padding",
+    "deleteEmptyItems": "Delete Empty Items",
+    "deleteEmptyItemsDescription": "Ignore empty items and don't include them in the groups.",
+    "padNonFullGroups": "Pad Non-full Groups",
+    "padNonFullGroupsDescription": "Fill non-full groups with a custom item (enter below).",
+    "paddingCharDescription": "Use this character or item to pad non-full groups.",
+    "title": "Group",
+    "description": "World's simplest browser-based utility for grouping list items. Input your list and specify grouping criteria to organize items into logical groups. Perfect for categorizing data, organizing information, or creating structured lists. Supports custom separators and various grouping options.",
+    "shortDescription": "Group list items by common properties"
+  },
+  "duplicate": {
+    "toolInfo": {
+      "title": "List Duplication",
+      "description": "This tool allows you to duplicate items in a list. You can specify the number of copies (including fractional values), control whether items are concatenated or interweaved, and even reverse the duplicated items. It's useful for creating repeated patterns, generating test data, or expanding lists with predictable content."
+    },
+    "inputTitle": "Input List",
+    "resultTitle": "Duplicated List",
+    "splitOptions": "Split Options",
+    "splitBySymbol": "Split by Symbol",
+    "splitByRegex": "Split by Regular Expression",
+    "splitSeparatorDescription": "Separator to split the list",
+    "joinSeparatorDescription": "Separator to join the duplicated list",
+    "duplicationOptions": "Duplication Options",
+    "copyDescription": "Number of copies (can be fractional)",
+    "concatenate": "Concatenate",
+    "concatenateDescription": "Concatenate copies (if unchecked, items will be interweaved)",
+    "reverse": "Reverse",
+    "reverseDescription": "Reverse the duplicated items",
+    "examples": {
+      "simple": {
+        "title": "Simple duplication",
+        "description": "This example shows how to duplicate a list of words."
+      },
+      "reverse": {
+        "title": "Reverse duplication",
+        "description": "This example shows how to duplicate a list in reverse order."
+      },
+      "interweave": {
+        "title": "Interweaving items",
+        "description": "This example shows how to interweave items instead of concatenating them."
+      },
+      "fractional": {
+        "title": "Fractional duplication",
+        "description": "This example shows how to duplicate a list with a fractional number of copies."
+      }
+    },
+    "title": "Duplicate",
+    "description": "World's simplest browser-based utility for duplicating list items. Input your list and specify duplication criteria to create copies of items. Perfect for data expansion, testing, or creating repeated patterns.",
+    "shortDescription": "Duplicate list items with specified criteria"
+  },
+  "reverse": {
+    "toolInfo": {
+      "title": "What Is a List Reverser?",
+      "description": "With this utility, you can reverse the order of items in a list. The utility first splits the input list into individual items and then iterates through them from the last item to the first item, printing each item to the output during the iteration. The input list may contain anything that can be represented as textual data, which includes digits, numbers, strings, words, sentences, etc. The input item separator can also be a regular expression. For example, the regex /[;,]/ will allow you to use items that are either comma- or semicolon-separated. The input and output list items delimiters can be customized in the options. By default, both input and output lists are comma-separated. Listabulous!"
+    },
+    "splitterMode": "Splitter Mode",
+    "itemSeparator": "Item Separator",
+    "itemSeparatorDescription": "Set a delimiting symbol or regular expression.",
+    "outputListOptions": "Output List Options",
+    "outputSeparatorDescription": "Output list item separator.",
+    "inputTitle": "Input list",
+    "resultTitle": "Reversed list",
+    "splitOperators": {
+      "symbol": {
+        "title": "Use a Symbol for Splitting",
+        "description": "Delimit input list items with a character."
+      },
+      "regex": {
+        "title": "Use a Regex for Splitting",
+        "description": "Delimit input list items with a regular expression."
+      }
+    },
+    "title": "Reverse",
+    "description": "This is a super simple browser-based application prints all list items in reverse. The input items can be separated by any symbol and you can also change the separator of the reversed list items.",
+    "shortDescription": "Quickly reverse a list"
+  },
+  "shuffle": {
+    "title": "Shuffle",
+    "inputTitle": "Input list",
+    "resultTitle": "Shuffled list",
+    "inputListSeparator": "Input list separator",
+    "delimiterDescription": "Set a delimiting symbol or regular expression.",
+    "shuffledListLength": "Shuffled List Length",
+    "outputLengthDescription": "Output this many random items",
+    "shuffledListSeparator": "Shuffled List Separator",
+    "joinSeparatorDescription": "Use this separator in the randomized list.",
+    "title": "Shuffle",
+    "description": "World's simplest browser-based utility for shuffling list items. Input your list and instantly get a randomized version with items in random order. Perfect for creating variety, testing randomness, or mixing up ordered data.",
+    "shortDescription": "Randomize the order of list items"
+  },
+  "findMostPopular": {
+    "title": "Find most popular",
+    "description": "World's simplest browser-based utility for finding the most popular items in a list. Input your list and instantly get the items that appear most frequently. Perfect for data analysis, trend identification, or finding common elements.",
+    "shortDescription": "Find most frequently occurring items"
+  },
+  "rotate": {
+    "title": "Rotate",
+    "description": "World's simplest browser-based utility for rotating list items. Input your list and specify rotation amount to shift items by a specified number of positions. Perfect for data manipulation, circular shifts, or reordering lists.",
+    "shortDescription": "Rotate list items by specified positions"
+  },
+  "truncate": {
+    "title": "Truncate",
+    "description": "World's simplest browser-based utility for truncating lists. Input your list and specify the maximum number of items to keep. Perfect for data processing, list management, or limiting content length.",
+    "shortDescription": "Truncate list to specified number of items"
+  },
+  "unwrap": {
+    "title": "Unwrap",
+    "description": "World's simplest browser-based utility for unwrapping list items. Input your wrapped list and specify unwrapping criteria to flatten organized items. Perfect for data processing, text manipulation, or extracting content from structured lists.",
+    "shortDescription": "Unwrap list items from structured format"
+  }
+}

src/pages/tools/list/i18n/hi.json

@@ -0,0 +1,138 @@
+{
+  "group": {
+    "title": "सूची समूहित करें",
+    "description": "सूची आइटम को समूहित करने के लिए सरल उपकरण।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "समूहित सूची",
+    "groupingOptions": "समूहीकरण विकल्प",
+    "groupByLength": "लंबाई के अनुसार समूहित करें",
+    "groupByFirstChar": "पहले वर्ण के अनुसार समूहित करें",
+    "groupByLastChar": "अंतिम वर्ण के अनुसार समूहित करें",
+    "groupByPattern": "पैटर्न के अनुसार समूहित करें",
+    "patternPlaceholder": "रेगेक्स पैटर्न",
+    "outputFormat": "आउटपुट प्रारूप",
+    "groupHeaders": "समूह शीर्षक जोड़ें",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "reverse": {
+    "title": "सूची उलटा करें",
+    "description": "सूची में आइटम के क्रम को उलटा करें।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "उलटी सूची",
+    "reverseOptions": "उलटाने के विकल्प",
+    "reverseOrder": "क्रम उलटा करें",
+    "reverseEachItem": "प्रत्येक आइटम उलटा करें",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "sort": {
+    "title": "सूची क्रमबद्ध करें",
+    "description": "सूची में आइटम को क्रमबद्ध करें।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "क्रमबद्ध सूची",
+    "sortingOptions": "क्रमबद्ध करने के विकल्प",
+    "sortAlphabetically": "वर्णानुक्रमिक रूप से क्रमबद्ध करें",
+    "sortNumerically": "संख्यात्मक रूप से क्रमबद्ध करें",
+    "sortByLength": "लंबाई के अनुसार क्रमबद्ध करें",
+    "sortOrder": "क्रमबद्ध करने का क्रम",
+    "ascending": "आरोही",
+    "descending": "अवरोही",
+    "removeDuplicates": "डुप्लिकेट हटाएं",
+    "removeEmpty": "खाली आइटम हटाएं",
+    "trimWhitespace": "सफेद स्थान ट्रिम करें",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "shuffle": {
+    "title": "सूची फेरबदल करें",
+    "description": "सूची में आइटम को यादृच्छिक क्रम में व्यवस्थित करें।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "फेरबदल की गई सूची",
+    "shuffleOptions": "फेरबदल विकल्प",
+    "randomSeed": "यादृच्छिक बीज",
+    "seedPlaceholder": "बीज मान",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "rotate": {
+    "title": "सूची घुमाएं",
+    "description": "सूची में आइटम को निर्दिष्ट स्थानों द्वारा घुमाएं।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "घुमाई गई सूची",
+    "rotationOptions": "घुमाने के विकल्प",
+    "rotateSteps": "घुमाने के चरण",
+    "stepsPlaceholder": "चरणों की संख्या",
+    "rotateDirection": "घुमाने की दिशा",
+    "rotateLeft": "बाईं ओर घुमाएं",
+    "rotateRight": "दाईं ओर घुमाएं",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "findUnique": {
+    "title": "अद्वितीय आइटम खोजें",
+    "description": "सूची से अद्वितीय आइटम निकालें।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "अद्वितीय आइटम",
+    "uniqueOptions": "अद्वितीय विकल्प",
+    "caseSensitive": "केस संवेदी",
+    "removeEmpty": "खाली आइटम हटाएं",
+    "trimWhitespace": "सफेद स्थान ट्रिम करें",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "findMostPopular": {
+    "title": "सबसे लोकप्रिय खोजें",
+    "description": "सूची में सबसे अधिक बार आने वाले आइटम खोजें।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "लोकप्रिय आइटम",
+    "popularityOptions": "लोकप्रियता विकल्प",
+    "topCount": "शीर्ष संख्या",
+    "countPlaceholder": "संख्या",
+    "caseSensitive": "केस संवेदी",
+    "removeEmpty": "खाली आइटम हटाएं",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "duplicate": {
+    "title": "आइटम दोहराएं",
+    "description": "सूची में आइटम को दोहराएं।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "दोहराई गई सूची",
+    "duplicationOptions": "दोहराव विकल्प",
+    "duplicateCount": "दोहराव की संख्या",
+    "countPlaceholder": "संख्या",
+    "duplicateEach": "प्रत्येक आइटम दोहराएं",
+    "duplicateAll": "सभी आइटम दोहराएं",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "wrap": {
+    "title": "सूची लपेटें",
+    "description": "सूची आइटम को निर्दिष्ट लंबाई में लपेटें।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "लपेटी गई सूची",
+    "wrapOptions": "लपेटने के विकल्प",
+    "wrapWidth": "लपेटने की चौड़ाई",
+    "widthPlaceholder": "चौड़ाई",
+    "wrapCharacter": "लपेटने का वर्ण",
+    "characterPlaceholder": "वर्ण",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "unwrap": {
+    "title": "सूची खोलें",
+    "description": "लपेटी गई सूची को खोलें।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "खोली गई सूची",
+    "unwrapOptions": "खोलने के विकल्प",
+    "unwrapCharacter": "खोलने का वर्ण",
+    "characterPlaceholder": "वर्ण",
+    "removeEmpty": "खाली आइटम हटाएं",
+    "separatorPlaceholder": "विभाजक"
+  },
+  "truncate": {
+    "title": "सूची काटें",
+    "description": "सूची को निर्दिष्ट लंबाई तक काटें।",
+    "inputTitle": "इनपुट सूची",
+    "resultTitle": "काटी गई सूची",
+    "truncationOptions": "काटने के विकल्प",
+    "truncateLength": "काटने की लंबाई",
+    "lengthPlaceholder": "लंबाई",
+    "truncateFrom": "कहाँ से काटें",
+    "truncateFromStart": "शुरुआत से",
+    "truncateFromEnd": "अंत से",
+    "separatorPlaceholder": "विभाजक"
+  }
+}

src/pages/tools/list/reverse/index.tsx

@@ -9,6 +9,7 @@ import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolContent from '@components/ToolContent';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
@@ -111,6 +112,7 @@ argument`,
 ];
 
 export default function Reverse({ title }: ToolComponentProps) {
+  const { t } = useTranslation('list');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -119,15 +121,15 @@ export default function Reverse({ title }: ToolComponentProps) {
     updateField
   }) => [
     {
-      title: 'Splitter Mode',
+      title: t('reverse.splitterMode'),
       component: (
         <Box>
           {splitOperators.map(({ title, description, type }) => (
             <SimpleRadio
               key={type}
               onClick={() => updateField('splitOperatorType', type)}
-              title={title}
-              description={description}
+              title={t(`reverse.splitOperators.${type}.title`)}
+              description={t(`reverse.splitOperators.${type}.description`)}
               checked={values.splitOperatorType === type}
             />
           ))}
@@ -135,11 +137,11 @@ export default function Reverse({ title }: ToolComponentProps) {
       )
     },
     {
-      title: 'Item Separator',
+      title: t('reverse.itemSeparator'),
       component: (
         <Box>
           <TextFieldWithDesc
-            description={'Set a delimiting symbol or regular expression.'}
+            description={t('reverse.itemSeparatorDescription')}
             value={values.splitSeparator}
             onOwnChange={(val) => updateField('splitSeparator', val)}
           />
@@ -147,11 +149,11 @@ export default function Reverse({ title }: ToolComponentProps) {
       )
     },
     {
-      title: 'Output List Options',
+      title: t('reverse.outputListOptions'),
       component: (
         <Box>
           <TextFieldWithDesc
-            description={'Output list item separator.'}
+            description={t('reverse.outputSeparatorDescription')}
             value={values.joinSeparator}
             onOwnChange={(val) => updateField('joinSeparator', val)}
           />
@@ -176,15 +178,18 @@ export default function Reverse({ title }: ToolComponentProps) {
       input={input}
       setInput={setInput}
       inputComponent={
-        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('reverse.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
-        <ToolTextResult title={'Reversed list'} value={result} />
+        <ToolTextResult title={t('reverse.resultTitle')} value={result} />
       }
       toolInfo={{
-        title: 'What Is a List Reverser?',
-        description:
-          'With this utility, you can reverse the order of items in a list. The utility first splits the input list into individual items and then iterates through them from the last item to the first item, printing each item to the output during the iteration. The input list may contain anything that can be represented as textual data, which includes digits, numbers, strings, words, sentences, etc. The input item separator can also be a regular expression. For example, the regex /[;,]/ will allow you to use items that are either comma- or semicolon-separated. The input and output list items delimiters can be customized in the options. By default, both input and output lists are comma-separated. Listabulous!'
+        title: t('reverse.toolInfo.title'),
+        description: t('reverse.toolInfo.description')
       }}
       exampleCards={exampleCards}
     />

src/pages/tools/list/reverse/meta.ts

@@ -3,11 +3,14 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('list', {
-  name: 'Reverse',
   path: 'reverse',
   icon: 'proicons:reverse',
-  description: 'This is a super simple browser-based application prints all list items in reverse. The input items can be separated by any symbol and you can also change the separator of the reversed list items.',
-  shortDescription: 'Quickly reverse a list',
+
   keywords: ['reverse'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:reverse.title',
+    description: 'list:reverse.description',
+    shortDescription: 'list:reverse.shortDescription'
+  }
 });

src/pages/tools/list/rotate/meta.ts

@@ -3,12 +3,14 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('list', {
-  name: 'Rotate',
   path: 'rotate',
   icon: 'material-symbols-light:rotate-right',
-  description:
-    'A tool to rotate items in a list by a specified number of positions. Shift elements left or right while maintaining their relative order.',
-  shortDescription: 'Shift list items by position.',
+
   keywords: ['rotate'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:rotate.title',
+    description: 'list:rotate.description',
+    shortDescription: 'list:rotate.shortDescription'
+  }
 });

src/pages/tools/list/shuffle/index.tsx

@@ -7,6 +7,7 @@ import { shuffleList, SplitOperatorType } from './service';
 import SimpleRadio from '@components/options/SimpleRadio';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import { isNumber } from '@utils/string';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
@@ -32,6 +33,7 @@ const splitOperators: {
 ];
 
 export default function Shuffle() {
+  const { t } = useTranslation('list');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -51,20 +53,24 @@ export default function Shuffle() {
 
   return (
     <ToolContent
-      title="Shuffle"
+      title={t('shuffle.title')}
       initialValues={initialValues}
       compute={compute}
       input={input}
       setInput={setInput}
       inputComponent={
-        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('shuffle.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
       }
       resultComponent={
-        <ToolTextResult title={'Shuffled list'} value={result} />
+        <ToolTextResult title={t('shuffle.resultTitle')} value={result} />
       }
       getGroups={({ values, updateField }) => [
         {
-          title: 'Input list separator',
+          title: t('shuffle.inputListSeparator'),
           component: (
             <Box>
               {splitOperators.map(({ title, description, type }) => (
@@ -77,7 +83,7 @@ export default function Shuffle() {
                 />
               ))}
               <TextFieldWithDesc
-                description={'Set a delimiting symbol or regular expression.'}
+                description={t('shuffle.delimiterDescription')}
                 value={values.splitSeparator}
                 onOwnChange={(val) => updateField('splitSeparator', val)}
               />
@@ -85,11 +91,11 @@ export default function Shuffle() {
           )
         },
         {
-          title: 'Shuffled List Length',
+          title: t('shuffle.shuffledListLength'),
           component: (
             <Box>
               <TextFieldWithDesc
-                description={'Output this many random items'}
+                description={t('shuffle.outputLengthDescription')}
                 value={values.length}
                 onOwnChange={(val) => updateField('length', val)}
               />
@@ -97,13 +103,13 @@ export default function Shuffle() {
           )
         },
         {
-          title: 'Shuffled List Separator',
+          title: t('shuffle.shuffledListSeparator'),
           component: (
             <Box>
               <TextFieldWithDesc
                 value={values.joinSeparator}
                 onOwnChange={(value) => updateField('joinSeparator', value)}
-                description={'Use this separator in the randomized list.'}
+                description={t('shuffle.joinSeparatorDescription')}
               />
             </Box>
           )

src/pages/tools/list/shuffle/meta.ts

@@ -3,12 +3,14 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('list', {
-  name: 'Shuffle',
   path: 'shuffle',
   icon: 'material-symbols-light:shuffle',
-  description:
-    'A tool to randomly reorder items in a list. Perfect for randomizing data, creating random selections, or generating random sequences.',
-  shortDescription: 'Randomly reorder list items.',
+
   keywords: ['shuffle'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:shuffle.title',
+    description: 'list:shuffle.description',
+    shortDescription: 'list:shuffle.shortDescription'
+  }
 });

src/pages/tools/list/sort/index.tsx

@@ -9,6 +9,7 @@ import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import SelectWithDesc from '@components/options/SelectWithDesc';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -36,7 +37,8 @@ const splitOperators: {
   }
 ];
 
-export default function SplitText({ title }: ToolComponentProps) {
+export default function SortList({ title }: ToolComponentProps) {
+  const { t } = useTranslation('list');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -69,26 +71,32 @@ export default function SplitText({ title }: ToolComponentProps) {
       title={title}
       input={input}
       inputComponent={
-        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('sort.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
+      }
+      resultComponent={
+        <ToolTextResult title={t('sort.resultTitle')} value={result} />
       }
-      resultComponent={<ToolTextResult title={'Sorted list'} value={result} />}
       initialValues={initialValues}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Input item separator',
+          title: t('sort.inputItemSeparator'),
           component: (
             <Box>
               {splitOperators.map(({ title, description, type }) => (
                 <SimpleRadio
                   key={type}
                   onClick={() => updateField('splitSeparatorType', type)}
-                  title={title}
-                  description={description}
+                  title={t(`sort.splitOperators.${type}.title`)}
+                  description={t(`sort.splitOperators.${type}.description`)}
                   checked={values.splitSeparatorType === type}
                 />
               ))}
               <TextFieldWithDesc
-                description={'Set a delimiting symbol or regular expression.'}
+                description={t('sort.splitSeparatorDescription')}
                 value={values.splitSeparator}
                 onOwnChange={(val) => updateField('splitSeparator', val)}
               />
@@ -96,35 +104,45 @@ export default function SplitText({ title }: ToolComponentProps) {
           )
         },
         {
-          title: 'Sort method',
+          title: t('sort.sortMethod'),
           component: (
             <Box>
               <SelectWithDesc
                 selected={values.sortingMethod}
                 options={[
-                  { label: 'Sort Alphabetically', value: 'alphabetic' },
-                  { label: 'Sort Numerically', value: 'numeric' },
-                  { label: 'Sort by Length', value: 'length' }
+                  {
+                    label: t('sort.sortOptions.alphabetic'),
+                    value: 'alphabetic'
+                  },
+                  {
+                    label: t('sort.sortOptions.numeric'),
+                    value: 'numeric'
+                  },
+                  { label: t('sort.sortOptions.length'), value: 'length' }
                 ]}
                 onChange={(value) => updateField('sortingMethod', value)}
-                description={'Select a sorting method.'}
+                description={t('sort.sortMethodDescription')}
               />
               <SelectWithDesc
                 selected={values.increasing}
                 options={[
-                  { label: 'Increasing order', value: true },
-                  { label: 'Decreasing order', value: false }
+                  {
+                    label: t('sort.orderOptions.increasing'),
+                    value: true
+                  },
+                  {
+                    label: t('sort.orderOptions.decreasing'),
+                    value: false
+                  }
                 ]}
                 onChange={(value) => {
                   updateField('increasing', value);
                 }}
-                description={'Select a sorting order.'}
+                description={t('sort.orderDescription')}
               />
               <CheckboxWithDesc
-                title={'Case Sensitive Sort'}
-                description={
-                  'Sort uppercase and lowercase items separately. Capital letters precede lowercase letters in an ascending list. (Works only in alphabetical sorting mode.)'
-                }
+                title={t('sort.caseSensitive')}
+                description={t('sort.caseSensitiveDescription')}
                 checked={values.caseSensitive}
                 onChange={(val) => updateField('caseSensitive', val)}
               />
@@ -132,19 +150,17 @@ export default function SplitText({ title }: ToolComponentProps) {
           )
         },
         {
-          title: 'Sorted item properties',
+          title: t('sort.sortedItemProperties'),
           component: (
             <Box>
               <TextFieldWithDesc
-                description={
-                  'Use this symbol as a joiner between items in a sorted list.'
-                }
+                description={t('sort.joinSeparatorDescription')}
                 value={values.joinSeparator}
                 onOwnChange={(val) => updateField('joinSeparator', val)}
               />
               <CheckboxWithDesc
-                title={'Remove duplicates'}
-                description={'Delete duplicate list items.'}
+                title={t('sort.removeDuplicates')}
+                description={t('sort.removeDuplicatesDescription')}
                 checked={values.removeDuplicated}
                 onChange={(val) => updateField('removeDuplicated', val)}
               />

src/pages/tools/list/sort/meta.ts

@@ -3,12 +3,14 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('list', {
-  name: 'Sort',
   path: 'sort',
-  icon: 'basil:sort-outline',
-  description:
-    'This is a super simple browser-based application that sorts items in a list and arranges them in increasing or decreasing order. You can sort the items alphabetically, numerically, or by their length. You can also remove duplicate and empty items, as well as trim individual items that have whitespace around them. You can use any separator character to separate the input list items or alternatively use a regular expression to separate them. Additionally, you can create a new delimiter for the sorted output list.',
-  shortDescription: 'Quickly sort a list',
+  icon: 'material-symbols-light:sort',
+
   keywords: ['sort'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:sort.title',
+    description: 'list:sort.description',
+    shortDescription: 'list:sort.shortDescription'
+  }
 });

src/pages/tools/list/truncate/meta.ts

@@ -2,12 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('list', {
-  name: 'Truncate',
   path: 'truncate',
-  icon: 'mdi:format-horizontal-align-right',
-  description:
-    "World's simplest browser-based utility for truncating lists. Quickly limit the number of items in your list by specifying a maximum length. Perfect for sampling data, creating previews, or managing large lists. Supports custom separators and various truncation options.",
-  shortDescription: 'Limit the number of items in a list',
+  icon: 'material-symbols-light:content-cut',
+
   keywords: ['truncate'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:truncate.title',
+    description: 'list:truncate.description',
+    shortDescription: 'list:truncate.shortDescription'
+  }
 });

src/pages/tools/list/unwrap/meta.ts

@@ -3,12 +3,14 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('list', {
-  name: 'Unwrap',
   path: 'unwrap',
-  icon: 'mdi:unwrap',
-  description:
-    'A tool to remove characters from the beginning and end of each item in a list. Perfect for cleaning up formatted data or removing unwanted wrappers.',
-  shortDescription: 'Remove characters around list items.',
+  icon: 'material-symbols-light:unfold-more',
+
   keywords: ['unwrap'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:unwrap.title',
+    description: 'list:unwrap.description',
+    shortDescription: 'list:unwrap.shortDescription'
+  }
 });

src/pages/tools/list/wrap/index.tsx

@@ -11,6 +11,7 @@ import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import SimpleRadio from '@components/options/SimpleRadio';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import * as Yup from 'yup';
+import { useTranslation } from 'react-i18next';
 
 interface InitialValuesType {
   splitOperatorType: SplitOperatorType;
@@ -85,6 +86,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 ];
 
 export default function Wrap({ title }: ToolComponentProps) {
+  const { t } = useTranslation('list');
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -117,50 +119,50 @@ export default function Wrap({ title }: ToolComponentProps) {
     updateField
   }) => [
     {
-      title: 'Split Options',
+      title: t('wrap.splitOptions'),
       component: (
         <Box>
           <SimpleRadio
             onClick={() => updateField('splitOperatorType', 'symbol')}
             checked={values.splitOperatorType === 'symbol'}
-            title={'Split by Symbol'}
+            title={t('wrap.splitBySymbol')}
           />
           <SimpleRadio
             onClick={() => updateField('splitOperatorType', 'regex')}
             checked={values.splitOperatorType === 'regex'}
-            title={'Split by Regular Expression'}
+            title={t('wrap.splitByRegex')}
           />
           <TextFieldWithDesc
             value={values.splitSeparator}
             onOwnChange={(val) => updateField('splitSeparator', val)}
-            description={'Separator to split the list'}
+            description={t('wrap.splitSeparatorDescription')}
           />
           <TextFieldWithDesc
             value={values.joinSeparator}
             onOwnChange={(val) => updateField('joinSeparator', val)}
-            description={'Separator to join the wrapped list'}
+            description={t('wrap.joinSeparatorDescription')}
           />
           <CheckboxWithDesc
             checked={values.deleteEmptyItems}
             onChange={(checked) => updateField('deleteEmptyItems', checked)}
-            title={'Remove empty items'}
+            title={t('wrap.removeEmptyItems')}
           />
         </Box>
       )
     },
     {
-      title: 'Wrap Options',
+      title: t('wrap.wrapOptions'),
       component: (
         <Box>
           <TextFieldWithDesc
             value={values.left}
             onOwnChange={(val) => updateField('left', val)}
-            description={'Text to add before each item'}
+            description={t('wrap.leftTextDescription')}
           />
           <TextFieldWithDesc
             value={values.right}
             onOwnChange={(val) => updateField('right', val)}
-            description={'Text to add after each item'}
+            description={t('wrap.rightTextDescription')}
           />
         </Box>
       )
@@ -171,16 +173,21 @@ export default function Wrap({ title }: ToolComponentProps) {
     <ToolContent
       title={title}
       inputComponent={
-        <ToolTextInput title="Input List" value={input} onChange={setInput} />
+        <ToolTextInput
+          title={t('wrap.inputTitle')}
+          value={input}
+          onChange={setInput}
+        />
+      }
+      resultComponent={
+        <ToolTextResult title={t('wrap.resultTitle')} value={result} />
       }
-      resultComponent={<ToolTextResult title="Wrapped List" value={result} />}
       initialValues={initialValues}
       getGroups={getGroups}
       validationSchema={validationSchema}
       toolInfo={{
-        title: 'List Wrapping',
-        description:
-          "This tool allows you to add text before and after each item in a list. You can specify different text for the left and right sides, and control how the list is processed. It's useful for adding quotes, brackets, or other formatting to list items, preparing data for different formats, or creating structured text."
+        title: t('wrap.toolInfo.title'),
+        description: t('wrap.toolInfo.description')
       }}
       exampleCards={exampleCards}
       input={input}

src/pages/tools/list/wrap/meta.ts

@@ -3,12 +3,14 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('list', {
-  name: 'Wrap',
   path: 'wrap',
-  icon: 'mdi:wrap',
-  description:
-    'A tool to wrap each item in a list with custom prefix and suffix characters. Useful for formatting lists for code, markup languages, or presentation.',
-  shortDescription: 'Add characters around list items.',
+  icon: 'material-symbols-light:wrap-text',
+
   keywords: ['wrap'],
-  component: lazy(() => import('./index'))
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'list:wrap.title',
+    description: 'list:wrap.description',
+    shortDescription: 'list:wrap.shortDescription'
+  }
 });

src/pages/tools/number/arithmetic-sequence/index.tsx

@@ -7,6 +7,7 @@ import { generateArithmeticSequence } from './service';
 import * as Yup from 'yup';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
+import { useTranslation } from 'react-i18next';
 
 type InitialValuesType = {
   firstTerm: string;
@@ -70,6 +71,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 ];
 
 export default function ArithmeticSequence({ title }: ToolComponentProps) {
+  const { t } = useTranslation('number');
   const [result, setResult] = useState<string>('');
 
   return (
@@ -77,35 +79,39 @@ export default function ArithmeticSequence({ title }: ToolComponentProps) {
       title={title}
       inputComponent={null}
       resultComponent={
-        <ToolTextResult title="Generated Sequence" value={result} />
+        <ToolTextResult
+          title={t('arithmeticSequence.resultTitle')}
+          value={result}
+        />
       }
       initialValues={initialValues}
       validationSchema={validationSchema}
       exampleCards={exampleCards}
       toolInfo={{
-        title: 'What is an Arithmetic Sequence?',
-        description:
-          'An arithmetic sequence is a sequence of numbers where the difference between each consecutive term is constant. This constant difference is called the common difference. Given the first term (a₁) and the common difference (d), each term can be found by adding the common difference to the previous term.'
+        title: t('arithmeticSequence.toolInfo.title'),
+        description: t('arithmeticSequence.toolInfo.description')
       }}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Sequence Parameters',
+          title: t('arithmeticSequence.sequenceParameters'),
           component: (
             <Box>
               <TextFieldWithDesc
-                description="First term of the sequence (a₁)"
+                description={t('arithmeticSequence.firstTermDescription')}
                 value={values.firstTerm}
                 onOwnChange={(val) => updateField('firstTerm', val)}
                 type="number"
               />
               <TextFieldWithDesc
-                description="Common difference between terms (d)"
+                description={t(
+                  'arithmeticSequence.commonDifferenceDescription'
+                )}
                 value={values.commonDifference}
                 onOwnChange={(val) => updateField('commonDifference', val)}
                 type="number"
               />
               <TextFieldWithDesc
-                description="Number of terms to generate (n)"
+                description={t('arithmeticSequence.numberOfTermsDescription')}
                 value={values.numberOfTerms}
                 onOwnChange={(val) => updateField('numberOfTerms', val)}
                 type="number"
@@ -114,10 +120,10 @@ export default function ArithmeticSequence({ title }: ToolComponentProps) {
           )
         },
         {
-          title: 'Output Format',
+          title: t('arithmeticSequence.outputFormat'),
           component: (
             <TextFieldWithDesc
-              description="Separator between terms"
+              description={t('arithmeticSequence.separatorDescription')}
               value={values.separator}
               onOwnChange={(val) => updateField('separator', val)}
             />

src/pages/tools/number/arithmetic-sequence/meta.ts

@@ -2,20 +2,14 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('number', {
-  name: 'Generate Arithmetic Sequence',
   path: 'arithmetic-sequence',
-  icon: 'ic:sharp-plus',
-  description:
-    'Generate an arithmetic sequence by specifying the first term (a₁), common difference (d), and number of terms (n). The tool creates a sequence where each number differs from the previous by a constant difference.',
-  shortDescription:
-    'Generate a sequence where each term differs by a constant value.',
-  keywords: [
-    'arithmetic',
-    'sequence',
-    'progression',
-    'numbers',
-    'series',
-    'generate'
-  ],
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:functions',
+
+  keywords: ['arithmetic', 'sequence', 'math', 'progression'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'number:arithmeticSequence.title',
+    description: 'number:arithmeticSequence.description',
+    shortDescription: 'number:arithmeticSequence.shortDescription'
+  }
 });

src/pages/tools/number/generate/index.tsx

@@ -5,6 +5,7 @@ import { listOfIntegers } from './service';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   firstValue: '1',
@@ -14,6 +15,7 @@ const initialValues = {
 };
 
 export default function GenerateNumbers({ title }: ToolComponentProps) {
+  const { t } = useTranslation('number');
   const [result, setResult] = useState<string>('');
 
   const compute = (optionsValues: typeof initialValues) => {
@@ -34,23 +36,23 @@ export default function GenerateNumbers({ title }: ToolComponentProps) {
       initialValues={initialValues}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Arithmetic sequence option',
+          title: t('generate.arithmeticSequenceOption'),
           component: (
             <Box>
               <TextFieldWithDesc
-                description={'Start sequence from this number.'}
+                description={t('generate.startSequenceDescription')}
                 value={values.firstValue}
                 onOwnChange={(val) => updateField('firstValue', val)}
                 type={'number'}
               />
               <TextFieldWithDesc
-                description={'Increase each element by this amount'}
+                description={t('generate.stepDescription')}
                 value={values.step}
                 onOwnChange={(val) => updateField('step', val)}
                 type={'number'}
               />
               <TextFieldWithDesc
-                description={'Number of elements in sequence.'}
+                description={t('generate.numberOfElementsDescription')}
                 value={values.numberOfNumbers}
                 onOwnChange={(val) => updateField('numberOfNumbers', val)}
                 type={'number'}
@@ -59,12 +61,10 @@ export default function GenerateNumbers({ title }: ToolComponentProps) {
           )
         },
         {
-          title: 'Separator',
+          title: t('generate.separator'),
           component: (
             <TextFieldWithDesc
-              description={
-                'Separate elements in the arithmetic sequence by this character.'
-              }
+              description={t('generate.separatorDescription')}
               value={values.separator}
               onOwnChange={(val) => updateField('separator', val)}
             />
@@ -73,7 +73,7 @@ export default function GenerateNumbers({ title }: ToolComponentProps) {
       ]}
       compute={compute}
       resultComponent={
-        <ToolTextResult title={'Generated numbers'} value={result} />
+        <ToolTextResult title={t('generate.resultTitle')} value={result} />
       }
     />
   );

src/pages/tools/number/generate/meta.ts

@@ -3,12 +3,14 @@ import { lazy } from 'react';
 // import image from '@assets/text.png';
 
 export const tool = defineTool('number', {
-  name: 'Generate numbers',
   path: 'generate',
-  shortDescription: 'Quickly calculate a list of integers in your browser',
-  icon: 'lsicon:number-filled',
-  description:
-    'Quickly calculate a list of integers in your browser. To get your list, just specify the first integer, change value and total count in the options below, and this utility will generate that many integers',
-  keywords: ['generate'],
-  component: lazy(() => import('./index'))
+  icon: 'material-symbols:add-circle',
+
+  keywords: ['generate', 'random', 'numbers'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'number:generate.title',
+    description: 'number:generate.description',
+    shortDescription: 'number:generate.shortDescription'
+  }
 });