chore: add hy and ru of tools page

src/components/articles/ArticleTag/ArticleTag.module.scss

@@ -32,6 +32,7 @@
     font-family: 'Source-Serif-Regular', sans-serif;
     padding: 5px 0 27px 0;
     letter-spacing: -0.15em;
+    z-index: 55;
   }
 
   .titleOxford {

src/components/tools/BobAchievements/BobAchievements.tsx

@@ -1,6 +1,9 @@
 import cn from 'classnames';
+import { useRouter } from 'next/router';
 import { FC } from 'react';
 
+import toolsData from '@data/tools';
+
 import BobMedal from '@icons/tools/bob-medal.svg';
 import Star from '@icons/tools/star.svg';
 import StarDark from '@icons/tools/star-dark.svg';
@@ -13,28 +16,31 @@ const BobAchievements: FC<BobAchievementsProps> = ({
   className,
   darkTheme,
 }) => {
+  const { locale } = useRouter();
+  const t = toolsData[locale as keyof typeof toolsData] ?? toolsData.en;
+
   return (
     <div
       className={cn(styles.root, className, { [styles.darkTheme]: darkTheme })}
     >
       <span className={styles.title}>
-        <BobMedal aria-hidden /> First Behavior + UX Agent on OpenAI
+        <BobMedal aria-hidden /> {t.firstBehaviorAgent}
       </span>
       <div className={styles.achievements}>
         <div className={styles.rating}>
           <span className={styles.value}>
             {' '}
             {darkTheme ? <StarDark aria-hidden /> : <Star aria-hidden />} 4.7
           </span>
-          <span className={styles.category}>Ratings (40+) </span>
+          <span className={styles.category}>{t.ratings} (40+) </span>
         </div>
         <div className={styles.productivity}>
-          <span className={styles.value}> Productivity</span>
-          <span className={styles.category}>Category </span>
+          <span className={styles.value}> {t.productivity}</span>
+          <span className={styles.category}>{t.category} </span>
         </div>
         <div className={styles.conversations}>
           <span className={styles.value}> 3906</span>
-          <span className={styles.category}>Conversations </span>
+          <span className={styles.category}>{t.conversations} </span>
         </div>
       </div>
     </div>

src/components/tools/ToolContainer/ToolContainer.module.scss

@@ -8,7 +8,6 @@
   position: relative;
   width: 100%;
   max-width: 359px;
-  min-height: 390px;
   border: 1px solid #dad6d4;
   overflow: hidden;
   transition: border-color 240ms ease;
@@ -23,6 +22,7 @@
 
   .backgroundSvg path {
     fill: var(--dark-icon-fill) !important;
+    opacity: 20%;
   }
 
   .content {
@@ -88,15 +88,19 @@
   background-size: contain;
 }
 
+.contentRu {
+  height: 430px;
+}
+
 .backgroundSvg {
   position: absolute;
-  inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
-  z-index: 8;
+  z-index: 1;
   left: 48px;
   top: 32px;
+  opacity: 50%;
 }
 
 .title {
@@ -197,7 +201,7 @@
   justify-content: center;
   gap: 8px;
   font-family: 'Source Serif 4', 'Source-Serif-Regular', serif;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 16px;
   line-height: 1;
 }

src/components/tools/ToolContainer/ToolContainer.tsx

@@ -1,12 +1,15 @@
 import cn from 'classnames';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { FC } from 'react';
 
-import { DEFAULT_CONFIG, TOOL_CONFIG } from '@constants/tools';
+import { TOOL_CONFIG } from '@constants/tools';
 
 import { useEffectiveDarkTheme } from '@hooks/useEffectiveDarkTheme';
 import useGlobals from '@hooks/useGlobals';
 
+import toolsData from '@data/tools';
+
 import BtnBg from '@icons/tools/btn-vg.svg';
 import ClaudeIcon from '@icons/tools/claude.svg';
 import GptIcon from '@icons/tools/gpt.svg';
@@ -29,11 +32,13 @@ const ToolContainer: FC<ToolContainerProps> = ({
   isDarkTheme = false,
   isInDevelopment = false,
 }) => {
+  const { locale } = useRouter();
   const { isDarkTheme: globalDarkTheme } = useGlobals()[1];
   const darkTheme = useEffectiveDarkTheme(isDarkTheme || globalDarkTheme);
+  const t = toolsData[locale as keyof typeof toolsData] ?? toolsData.en;
 
-  const config = (id != null && TOOL_CONFIG[id]) || DEFAULT_CONFIG;
-  const { Icon, hoverColor, darkHoverColor, darkIconFill } = config;
+  const config = id ? TOOL_CONFIG[id] : undefined;
+  const { Icon, hoverColor, darkHoverColor, darkIconFill } = config ?? {};
 
   const isClaude = poweredBy === 'Claude';
   const isChatGPT = poweredBy === 'ChatGPT';
@@ -54,8 +59,12 @@ const ToolContainer: FC<ToolContainerProps> = ({
           } as React.CSSProperties
         }
       >
-        <Icon className={styles.backgroundSvg} />
-        <div className={styles.content}>
+        {Icon && <Icon className={styles.backgroundSvg} />}
+        <div
+          className={cn(styles.content, {
+            [styles.contentRu]: locale === 'ru',
+          })}
+        >
           <h3 className={styles.title}>{title}</h3>
           <p className={styles.description}>{description}</p>
 
@@ -66,11 +75,12 @@ const ToolContainer: FC<ToolContainerProps> = ({
               <Link
                 href="/keepsimple_/assets/tools/bob.skill"
                 download
+                locale={false}
                 className={styles.primaryButton}
                 aria-disabled={isInDevelopment}
               >
                 <BtnBg className={styles.buttonBg} />
-                <span className={styles.primaryButtonLabel}>Download</span>
+                <span className={styles.primaryButtonLabel}>{t.download}</span>
               </Link>
             ) : (
               <Link
@@ -85,7 +95,7 @@ const ToolContainer: FC<ToolContainerProps> = ({
                 <BtnBg className={styles.buttonBg} />
                 <span className={styles.primaryButtonLabel}>
                   {isBlank && <OpenIcon className={styles.blankIcon} />}
-                  {isInDevelopment ? 'In Development' : 'Open'}
+                  {isInDevelopment ? t.inDevelopment : t.open}
                 </span>
               </Link>
             )}
@@ -108,12 +118,12 @@ const ToolContainer: FC<ToolContainerProps> = ({
                 {isClaude ? (
                   <>
                     <ClaudeIcon className={styles.poweredIcon} />
-                    Powered by Claude
+                    {t.poweredBy} Claude
                   </>
                 ) : (
                   <>
                     <GptIcon className={styles.poweredIcon} />
-                    Powered by ChatGPT
+                    {t.poweredBy} ChatGPT
                   </>
                 )}
               </span>

src/constants/tools.ts

@@ -1,5 +1,6 @@
 import { FC, SVGProps } from 'react';
 
+import CompanyManagementIcon from '@icons/tools/company-management.svg';
 import BobIcon from '@icons/tools/tool-icons/bob.svg';
 import ClaudeBobIcon from '@icons/tools/tool-icons/claude-bob.svg';
 import EmaIcon from '@icons/tools/tool-icons/ema.svg';
@@ -16,17 +17,23 @@ export type ToolConfig = {
 
 export const TOOL_CONFIG: Record<number, ToolConfig> = {
   1: {
-    Icon: MosaicIcon,
+    Icon: CompanyManagementIcon,
     hoverColor: '#3F4A7A',
     darkHoverColor: '#C1D6FF',
-    darkIconFill: '#E08080',
+    darkIconFill: '#C1D6FF',
   },
   2: {
     Icon: EmaIcon,
     hoverColor: '#0A3D3D',
     darkHoverColor: '#95CCCC',
     darkIconFill: '#95CCCC',
   },
+  3: {
+    Icon: MosaicIcon,
+    hoverColor: '#3F4A7A',
+    darkHoverColor: '#C1D6FF',
+    darkIconFill: '#E08080',
+  },
   4: {
     Icon: GithubIcon,
     hoverColor: '#4A2F63',
@@ -54,8 +61,8 @@ export const TOOL_CONFIG: Record<number, ToolConfig> = {
 };
 
 export const DEFAULT_CONFIG: ToolConfig = {
-  Icon: MosaicIcon,
+  Icon: CompanyManagementIcon,
   hoverColor: '#3F4A7A',
   darkHoverColor: '#C1D6FF',
-  darkIconFill: '#E08080',
+  darkIconFill: '#C1D6FF',
 };

src/data/tools/en.ts

@@ -0,0 +1,13 @@
+const en = {
+  poweredBy: 'Powered by',
+  firstBehaviorAgent: 'First Behavior + UX Agent on OpenAI',
+  ratings: 'Ratings',
+  productivity: 'Productivity',
+  category: 'Category',
+  conversations: 'Conversations',
+  download: 'Download',
+  inDevelopment: 'In Development',
+  open: 'Open',
+};
+
+export default en;

src/data/tools/hy.ts

@@ -0,0 +1,13 @@
+const hy = {
+  poweredBy: 'Powered by',
+  firstBehaviorAgent: 'First Behavior + UX Agent on OpenAI',
+  ratings: 'Ratings',
+  productivity: 'Productivity',
+  category: 'Category',
+  conversations: 'Conversations',
+  download: 'Download',
+  inDevelopment: 'In Development',
+  open: 'Open',
+};
+
+export default hy;

src/data/tools/index.ts

@@ -0,0 +1,5 @@
+import en from './en';
+import hy from './hy';
+import ru from './ru';
+
+export default { en, ru, hy };

src/data/tools/ru.ts

@@ -0,0 +1,13 @@
+const ru = {
+  poweredBy: 'Работает на',
+  firstBehaviorAgent: 'Первый агент по поведению и UX на OpenAI',
+  ratings: 'Оценки',
+  productivity: 'Продуктивность',
+  category: 'Категория',
+  conversations: 'Разговоры',
+  download: 'Скачать',
+  inDevelopment: 'В разработке',
+  open: 'Открыть',
+};
+
+export default ru;

src/pages/tools/index.tsx

@@ -70,7 +70,7 @@ const ToolsPage: FC<ToolsPageProps> = ({ tools }) => {
           return (
             <ToolContainer
               key={tool?.id ?? title}
-              id={tool?.id}
+              id={Number(attrs?.idForDev)}
               link={attrs?.link}
               title={title}
               description={description}