chore: 优化i18n的json配置,利于后续维护

src/js/i18n.js

 import { useState, useEffect } from 'react';
-import i18n from '../data/i18n.json';
 
 let currentLanguage = localStorage.getItem('language') || 'zh';
 let listeners = [];
+let translations = {};
+
+// 动态加载翻译文件
+async function loadTranslations(lang) {
+  try {
+    const [common, tools, aiproducts] = await Promise.all([
+      import(`../locales/${lang}/common.json`),
+      import(`../locales/${lang}/tools.json`),
+      import(`../locales/${lang}/aiproducts.json`)
+    ]);
+    
+    translations[lang] = {
+      ...common.default,
+      tools: tools.default,
+      aiproducts: aiproducts.default
+    };
+    
+    return true;
+  } catch (error) {
+    console.error(`Failed to load translations for ${lang}:`, error);
+    return false;
+  }
+}
+
+// 初始加载默认语言的翻译
+const initPromise = loadTranslations(currentLanguage);
+
+export async function setLanguage(lang) {
+  if (!translations[lang]) {
+    const loaded = await loadTranslations(lang);
+    if (!loaded) return;
+  }
   
-export function setLanguage(lang) {
-  if (i18n[lang]) {
   currentLanguage = lang;
   localStorage.setItem('language', lang);
   listeners.forEach(listener => listener(currentLanguage));
-  }
 }
 
 export function getLanguage() {
@@ -17,8 +45,13 @@ export function getLanguage() {
 }
 
 export function t(key) {
+  if (!translations[currentLanguage]) {
+    return key;
+  }
+
   const keys = key.split('.');
-  let value = i18n[currentLanguage];
+  let value = translations[currentLanguage];
+  
   for (const k of keys) {
     if (value[k] === undefined) {
       return key;
@@ -30,8 +63,14 @@ export function t(key) {
 
 export function useTranslation() {
   const [lang, setLang] = useState(currentLanguage);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
+    // 等待初始翻译加载完成
+    initPromise.then(() => {
+      setIsLoading(false);
+    });
+
     const listener = (newLang) => setLang(newLang);
     listeners.push(listener);
     return () => {
@@ -39,5 +78,5 @@ export function useTranslation() {
     };
   }, []);
 
-  return { t, lang, setLanguage };
+  return { t, lang, setLanguage, isLoading };
 }

src/locales/en/aiproducts.json

+{
+    "fisherai": {
+      "title": "FisherAI",
+      "description": "The Best Summary Extension for Chrome Browser"
+    },
+    "chatgpt": {
+        "title": "ChatGPT",
+        "description": "AI conversational assistant by OpenAI"
+    },
+    "claude": {
+        "title": "Claude",
+        "description": "AI conversational assistant by Anthropic"
+    },
+    "gemini": {
+        "title": "Gemini",
+        "description": "AI dialogue tool by Google"
+    },
+    "poe": {
+        "title": "POE",
+        "description": "Multi-model chat platform by Quora"
+    },
+    "perplexity": {
+        "title": "Perplexity",
+        "description": "A powerful AI search engine"
+    },
+    "kimi": {
+        "title": "Kimi Assistant",
+        "description": "An AI assistant with reasoning and deep thinking capabilities"
+    },
+    "doubao": {
+        "title": "Doubao",
+        "description": "AI conversational assistant by ByteDance"
+    },
+    "zhipu": {
+        "title": "Zhipu Qingyan",
+        "description": "A versatile and free AI assistant supporting image generation and video creation"
+    },
+    "yuanbao": {
+        "title": "Tencent Yuanbao",
+        "description": "AI conversational assistant by Tencent"
+    },
+    "qwen": {
+        "title": "Tongyi Qianwen",
+        "description": "AI conversational assistant by Alibaba"
+    },
+    "hailuo": {
+        "title": "Hailuo AI",
+        "description": "AI conversational assistant by MiniMax"
+    },
+    "baichuan": {
+        "title": "Baixiaoying",
+        "description": "A free AI assistant by Baichuan Intelligent"
+    },
+    "wenxin": {
+        "title": "Wenxin Yiyan",
+        "description": "AI conversational assistant by Baidu"
+    },
+    "mita": {
+        "title": "Mita Search",
+        "description": "Ad-free AI search engine delivering direct results"
+    },
+    "coze": {
+        "title": "Coze",
+        "description": "AI agent platform by ByteDance"
+    },
+    "midjourney": {
+        "title": "Midjourney",
+        "description": "AI tool for image and illustration generation"
+    },
+    "stableDiffusion": {
+        "title": "Stable Diffusion",
+        "description": "Text-to-image AI model by StabilityAI"
+    },
+    "tongyiwanxiang": {
+        "title": "Tongyi Wanxiang",
+        "description": "AI painting creation platform by Alibaba"
+    },
+    "wenxinyige": {
+        "title": "Wenxin Yige",
+        "description": "AI art and creative platform by Baidu"
+    },
+    "canva": {
+        "title": "Canva",
+        "description": "Graphic design platform for social media graphics, presentations, posters, and more"
+    },
+    "meitu": {
+        "title": "Meitu Design Studio",
+        "description": "AI platform for image creation and design"
+    },
+    "keling": {
+        "title": "Keling AI",
+        "description": "AI image and video creation platform by Kuaishou"
+    },
+    "runway": {
+        "title": "Runway",
+        "description": "A powerful AI video production tool for green screen keying and video composition"
+    },
+    "luma": {
+        "title": "Dream Machine",
+        "description": "AI video generation tool by Luma"
+    },
+    "gamma": {
+        "title": "Gamma App",
+        "description": "AI tool for generating presentation slides"
+    },
+    "aippt": {
+        "title": "AiPPT",
+        "description": "AI tool for quick high-quality PPT generation"
+    },
+    "suno": {
+        "title": "Suno",
+        "description": "High-quality AI music creation platform"
+    },
+    "haimian": {
+        "title": "Haimian Music",
+        "description": "Free AI music creation and discovery platform by ByteDance"
+    },
+    "elevenLabs": {
+        "title": "ElevenLabs",
+        "description": "AI text-to-speech supporting 28 languages, including Chinese"
+    },
+    "tongyitingwu": {
+        "title": "Tongyi Tingwu",
+        "description": "AI assistant by Alibaba focused on audio and video content for work and study"
+    },
+    "cursor": {
+        "title": "Cursor",
+        "description": "AI code editor for fast programming and software development"
+    }
+}
\ No newline at end of file

src/locales/en/common.json

+{
+    "title": "AI Toolbox",
+    "description": "AI Toolbox - A collection of AI tools including text cards, JSON formatter, URL decoder, OpenAI product releases summary, and global model price comparisons to help you accomplish various tasks effortlessly.",
+    "slogan": "Your intelligent development toolset, a one-stop solution for all AI tool needs.",
+    "keywords": "AI Toolbox, AI tools, text cards, JSON formatter, URL decoder, OpenAI products, model price comparison, online tools, free tools",
+    "welcome": "Welcome",
+    "login": "Login",
+    "loginSubtitle": "Welcome to AI Toolbox, please log in for the full experience",
+    "logout": "Logout",
+    "dev-tools": "Development Tools",
+    "image-tools": "Image Tools",
+    "blog": "Blog",
+    "ai-products": "AI Products",
+    "notFound": {
+      "title": "404 - Page Not Found",
+      "description": "Sorry, the page you are looking for does not exist.",
+      "back_home": "Back to Home"
+    },
+    "footer": {
+      "copyRight": "AI Toolbox. All rights reserved."
+    },
+    "about": {
+      "title": "About Us",
+      "description": "AI Toolbox is a comprehensive web application that integrates various AI tools to provide users with a one-stop AI solution.",
+      "mission": "Our Mission",
+      "missionDescription": "To empower users with easy access to powerful AI tools, enhancing productivity and creativity.",
+      "team": "Our Team",
+      "teamDescription": "We are a dedicated team of AI enthusiasts and developers committed to building innovative solutions.",
+      "contact": "Contact Us"
+    },
+    "navigation": {
+      "about": "About Us"
+    },
+    "categories": {
+        "Chatbots": "Smart Assistant",
+        "Image": "Image",
+        "AudioVideo": "Audio & Video",
+        "Productivity": "Productivity"
+    }
+}
\ No newline at end of file

src/locales/en/tools.json

+{
+    "text2image": {
+      "title": "Text to Image Card",
+      "description": "Convert text to image card",
+      "selectTemplate": "Select Template",
+      "inputLabel": "Input Text (Markdown Supported)",
+      "placeholder": "# Title\n## Subtitle\n- List item\n**Bold** *Italic*",
+      "downloadButton": "Export as Image",
+      "previewDefault": "# Preview Area\nEnter text to see preview here",
+      "templates": {
+        "simple": "Simple",
+        "ai-style": "AI Style",
+        "dark": "Dark",
+        "paper": "Paper",
+        "minimal": "Minimal",
+        "tech": "Tech"
+      }
+    },
+    "quoteCard": {
+      "title": "Quote Card Generator",
+      "description": "Convert bilingual quotes to cards",
+      "chinesePlaceholder": "Enter quote in Chinese",
+      "englishPlaceholder": "Enter English translation",
+      "authorPlaceholder": "Enter author name",
+      "selectChineseFont": "Select Chinese Font",
+      "selectEnglishFont": "Select English Font",
+      "selectFontColor": "Select Font Color",
+      "selectAuthorColor": "Select Author Color",
+      "selectBackground": "Select Background",
+      "customBackground": "Select Custom Background",
+      "downloadButton": "Download Image",
+      "defaultQuote": "Enter quote in Chinese",
+      "defaultTranslation": "Enter the English translation here.",
+      "defaultAuthor": "Author Name",
+      "fonts": {
+        "system": "System Default",
+        "sans": "Sans Serif",
+        "serif": "Serif",
+        "mono": "Monospace"
+      },
+      "backgrounds": {
+        "white": "White",
+        "dark": "Dark",
+        "paper": "Paper",
+        "custom": "Custom"
+      }
+    },
+    "jsonFormatter": {
+      "title": "JSON Formatter",
+      "description": "Beautify and validate JSON data",
+      "inputPlaceholder": "Enter JSON data",
+      "invalidJson": "Invalid JSON",
+      "copyButton": "Copy",
+      "copiedMessage": "Copied"
+    },
+    "urlEncodeDecode": {
+      "title": "URL Encode/Decode",
+      "description": "Encode or decode a URL online.",
+      "modeLabel": "Select Mode",
+      "encode": "Encode",
+      "decode": "Decode"
+    },
+    "urlEncode": {
+      "inputLabel": "Enter text to encode",
+      "resultLabel": "Encoded Result"
+    },
+    "urlDecode": {
+      "inputLabel": "Enter URL to decode",
+      "resultLabel": "Decoded Result"
+    },
+    "openAITimeline": {
+      "title": "OpenAI Product Release",
+      "description": "Overview of OpenAI product release dates"
+    },
+    "modelPrice": {
+      "title": "Global Large Model Price Comparison",
+      "description": "Arena for comparing prices of various models worldwide"
+    },
+    "handwrite": {
+      "title": "Handwriting Font Generator",
+      "description": "Generate an effect comparable to writing on paper"
+    },
+    "imageBase64Converter": {
+      "title": "Image and Base64 Converter",
+      "description": "Mutual conversion between images and Base64",
+      "imageToBase64": "Image to Base64",
+      "base64Result": "Base64 Result",
+      "base64ToImage": "Base64 to Image",
+      "base64InputPlaceholder": "Paste Base64 string here",
+      "imageResult": "Image Result",
+      "invalidBase64": "Invalid Base64 string",
+      "download": "Download Image"
+    },
+    "fisherai": {
+      "title": "FisherAI",
+      "description": "The Best Summary Extension for Chrome Browser"
+    }
+}
\ No newline at end of file

src/locales/ja/aiproducts.json

+{
+    "fisherai": {
+      "title": "FisherAI",
+      "description": "最高のChromeブラウザ用要約プラグイン"
+    },
+    "chatgpt": {
+        "title": "ChatGPT",
+        "description": "OpenAIのAI対話アシスタント"
+    },
+    "claude": {
+        "title": "Claude",
+        "description": "AnthropicのAI対話アシスタント"
+    },
+    "gemini": {
+        "title": "Gemini",
+        "description": "GoogleのAI対話ツール"
+    },
+    "poe": {
+        "title": "POE",
+        "description": "Quoraのマルチモデルチャットプラットフォーム"
+    },
+    "perplexity": {
+        "title": "Perplexity",
+        "description": "強力なAI検索エンジン"
+    },
+    "kimi": {
+        "title": "Kimiアシスタント",
+        "description": "推論・深い思考が可能なAIアシスタント"
+    },
+    "doubao": {
+        "title": "Doubao",
+        "description": "ByteDanceのAI対話アシスタント"
+    },
+    "zhipu": {
+        "title": "Zhipu Qingyan",
+        "description": "画像生成や動画作成をサポートする無料の万能AIアシスタント"
+    },
+    "yuanbao": {
+        "title": "Tencent Yuanbao",
+        "description": "TencentのAI対話アシスタント"
+    },
+    "qwen": {
+        "title": "Tongyi Qianwen",
+        "description": "AlibabaのAI対話アシスタント"
+    },
+    "hailuo": {
+        "title": "Hailuo AI",
+        "description": "MiniMaxのAI対話アシスタント"
+    },
+    "baichuan": {
+        "title": "Baixiaoying",
+        "description": "Baichuan Intelligentの無料AIアシスタント"
+    },
+    "wenxin": {
+        "title": "Wenxin Yiyan",
+        "description": "BaiduのAI対話アシスタント"
+    },
+    "mita": {
+        "title": "Mita検索",
+        "description": "広告なしで結果に直結するAI検索エンジン"
+    },
+    "coze": {
+        "title": "Coze",
+        "description": "ByteDanceのAIエージェントプラットフォーム"
+    },
+    "midjourney": {
+        "title": "Midjourney",
+        "description": "画像やイラスト生成のAIツール"
+    },
+    "stableDiffusion": {
+        "title": "Stable Diffusion",
+        "description": "StabilityAIのテキストから画像生成AI"
+    },
+    "tongyiwanxiang": {
+        "title": "Tongyi Wanxiang",
+        "description": "AlibabaのAI絵画制作プラットフォーム"
+    },
+    "wenxinyige": {
+        "title": "Wenxin Yige",
+        "description": "BaiduのAIアート・クリエイティブ支援プラットフォーム"
+    },
+    "canva": {
+        "title": "Canva",
+        "description": "SNSグラフィック、プレゼン資料、ポスターなどを作成するデザインプラットフォーム"
+    },
+    "meitu": {
+        "title": "Meituデザインスタジオ",
+        "description": "AI画像作成とデザインプラットフォーム"
+    },
+    "keling": {
+        "title": "Keling AI",
+        "description": "KuaishouのAI画像・動画制作プラットフォーム"
+    },
+    "runway": {
+        "title": "Runway",
+        "description": "グリーンスクリーン、動画合成などのAI動画制作ツール"
+    },
+    "luma": {
+        "title": "Dream Machine",
+        "description": "LumaのAI動画生成ツール"
+    },
+    "gamma": {
+        "title": "Gamma App",
+        "description": "AIプレゼン資料生成ツール"
+    },
+    "aippt": {
+        "title": "AiPPT",
+        "description": "AIで高品質なPPTを素早く生成"
+    },
+    "suno": {
+        "title": "Suno",
+        "description": "高品質なAI音楽制作プラットフォーム"
+    },
+    "haimian": {
+        "title": "Haimian Music",
+        "description": "ByteDanceの無料AI音楽制作・発見プラットフォーム"
+    },
+    "elevenLabs": {
+        "title": "ElevenLabs",
+        "description": "28言語対応のAIテキスト音声変換"
+    },
+    "tongyitingwu": {
+        "title": "Tongyi Tingwu",
+        "description": "Alibabaの音声・映像内容に特化したAIアシスタント"
+    },
+    "cursor": {
+        "title": "Cursor",
+        "description": "素早くプログラミングできるAIコードエディター"
+    }
+
+}
\ No newline at end of file

src/locales/ja/common.json

+{
+    "title": "AIツールボックス",
+    "description": "AIツールボックス - テキストカード、JSONフォーマッター、URLデコーダー、OpenAI製品のリリースまとめ、世界のモデル価格比較など、多様なAIツールを集めたサイトです。さまざまなタスクを簡単にこなせます。",
+    "slogan": "あなたのスマートな開発ツールセット、あらゆるAIツールのニーズをワンストップで解決します。",
+    "keywords": "AIツールボックス、AIツール、テキストカード、JSONフォーマッター、URLデコーダー、OpenAI製品、モデル価格比較、オンラインツール、無料ツール",
+    "welcome": "ようこそ",
+    "login": "ログイン",
+    "loginSubtitle": "AIツールボックスへようこそ。フル体験のためにログインしてください",
+    "logout": "ログアウト",
+    "dev-tools": "開発ツール",
+    "image-tools": "画像ツール",
+    "blog": "ブログ",
+    "ai-products": "AI製品",
+    "notFound": {
+      "title": "404 - ページが見つかりません",
+      "description": "申し訳ありませんが、お探しのページは存在しません。",
+      "back_home": "ホームに戻る"
+    },
+    "footer": {
+      "copyRight": "AIツールボックス. すべての権利を保有します。"
+    },
+    "about": {
+      "title": "私たちについて",
+      "description": "AIツールボックスは、さまざまなAIツールを統合した包括的なWebアプリケーションであり、ユーザーにワンストップのAIソリューションを提供します。",
+      "mission": "私たちの使命",
+      "missionDescription": "強力なAIツールへの簡単なアクセスを提供し、ユーザーの生産性と創造性を高めること。",
+      "team": "私たちのチーム",
+      "teamDescription": "私たちは革新的なソリューションを축하는 데 전념하는 AI 애호가 및 개발자 팀입니다.",
+      "contact": "お問い合わせ"
+    },
+    "navigation": {
+      "about": "私たちについて"
+    },
+    "categories": {
+        "Chatbots": "スマートアシスタント",
+        "Image": "画像",
+        "AudioVideo": "音声・動画",
+        "Productivity": "効率オフィス"
+    }
+
+}
\ No newline at end of file

src/locales/ja/tools.json

+{
+    "text2image": {
+      "title": "テキストから画像",
+      "description": "テキストを画像カードに変換",
+      "inputPlaceholder": "テキストを入力（タイトルを含めることができます、例：# タイトル1）",
+      "selectTemplate": "テンプレートを選択",
+      "previewDefault": "# プレビューエリア\nテキストを入力すると、ここにプレビューが表示されます",
+      "placeholder": "# タイトル\n## サブタイトル\n- リスト項目\n**太字** *斜体*",
+      "downloadButton": "画像としてエクスポート",
+      "templates": {
+        "simple": "シンプル",
+        "ai-style": "AIスタイル",
+        "dark": "ダーク",
+        "paper": "ペーパー",
+        "minimal": "ミニマル",
+        "tech": "テック"
+      }
+    },
+    "quoteCard": {
+      "title": "名言カードジェネレーター",
+      "description": "名言のバイリンガルテキストをカードに変換",
+      "chinesePlaceholder": "中国語の名言を入力",
+      "englishPlaceholder": "英語訳を入力",
+      "authorPlaceholder": "著者名を入力",
+      "selectChineseFont": "中国語フォントを選択",
+      "selectEnglishFont": "英語フォントを選択",
+      "selectFontColor": "フォントカラーを選択",
+      "selectAuthorColor": "著者名の色を選択",
+      "selectBackground": "背景色を選択",
+      "customBackground": "カスタム背景色を選択",
+      "downloadButton": "画像をダウンロード",
+      "defaultQuote": "中国語の名言を入力してください",
+      "defaultTranslation": "英語訳をここに入力してください",
+      "defaultAuthor": "著者名",
+      "fonts": {
+        "system": "システムデフォルト",
+        "sans": "サンセリフ",
+        "serif": "セリフ",
+        "mono": "等幅"
+      },
+      "backgrounds": {
+        "white": "白",
+        "dark": "黒",
+        "paper": "クリーム",
+        "custom": "カスタム"
+      }
+    },
+    "jsonFormatter": {
+      "title": "JSONフォーマッター",
+      "description": "JSONデータを整形し検証する",
+      "inputPlaceholder": "JSONデータを入力",
+      "invalidJson": "無効なJSON",
+      "copyButton": "コピー",
+      "copiedMessage": "コピーしました"
+    },
+    "urlEncodeDecode": {
+      "title": "URL エンコード/デコード ツール",
+      "description": "URL をオンラインでエンコードまたはデコードします。",
+      "modeLabel": "モードを選択",
+      "encode": "エンコード",
+      "decode": "デコード"
+    },
+    "urlEncode": {
+      "inputLabel": "エンコードするテキストを入力",
+      "resultLabel": "エンコード結果"
+    },
+    "urlDecode": {
+      "inputLabel": "デコードする URL を入力",
+      "resultLabel": "デコード結果"
+    },
+    "openAITimeline": {
+      "title": "OpenAI 製品リリース",
+      "description": "OpenAI 製品リリース時刻表"
+    },
+    "modelPrice": {
+      "title": "世界の大規模モデル価格比較",
+      "description": "世界各国のモデル価格比較アリーナ"
+    },
+    "handwrite": {
+      "title": "手書きフォントジェネレーター",
+      "description": "紙に書くのと同等の効果を生成します"
+    },
+    "imageBase64Converter": {
+        "title": "画像とBase64コンバーター",
+        "description": "画像とBase64の相互変換",
+        "imageToBase64": "画像をBase64に変換",
+        "base64Result": "Base64の結果",
+        "base64ToImage": "Base64を画像に変換",
+        "base64InputPlaceholder": "ここにBase64文字列を貼り付け",
+        "imageResult": "画像の結果",
+        "invalidBase64": "無効なBase64文字列",
+        "download": "画像をダウンロード"
+    },
+    "fisherai": {
+      "title": "FisherAI",
+      "description": "最高のChromeブラウザ用要約プラグイン"
+    }
+}
\ No newline at end of file

src/locales/ko/aiproducts.json

+{
+    "fisherai": {
+      "title": "FisherAI",
+      "description": "가장 유용한 Chrome 브라우저 요약 확장 프로그램"
+    },
+    "chatgpt": {
+        "title": "ChatGPT",
+        "description": "OpenAI의 AI 대화 도우미"
+    },
+    "claude": {
+        "title": "Claude",
+        "description": "Anthropic의 AI 대화 도우미"
+    },
+    "gemini": {
+        "title": "Gemini",
+        "description": "Google의 AI 대화 도구"
+    },
+    "poe": {
+        "title": "POE",
+        "description": "Quora의 멀티 모델 채팅 플랫폼"
+    },
+    "perplexity": {
+        "title": "Perplexity",
+        "description": "강력한 AI 검색 엔진"
+    },
+    "kimi": {
+        "title": "Kimi 도우미",
+        "description": "추론 및 심층 사고가 가능한 AI 도우미"
+    },
+    "doubao": {
+        "title": "Doubao",
+        "description": "ByteDance의 AI 대화 도우미"
+    },
+    "zhipu": {
+        "title": "Zhipu Qingyan",
+        "description": "이미지 생성 및 영상 제작을 지원하는 무료 만능 AI 도우미"
+    },
+    "yuanbao": {
+        "title": "Tencent Yuanbao",
+        "description": "Tencent의 AI 대화 도우미"
+    },
+    "qwen": {
+        "title": "Tongyi Qianwen",
+        "description": "Alibaba의 AI 대화 도우미"
+    },
+    "hailuo": {
+        "title": "Hailuo AI",
+        "description": "MiniMax의 AI 대화 도우미"
+    },
+    "baichuan": {
+        "title": "Baixiaoying",
+        "description": "Baichuan Intelligent의 무료 AI 도우미"
+    },
+    "wenxin": {
+        "title": "Wenxin Yiyan",
+        "description": "Baidu의 AI 대화 도우미"
+    },
+    "mita": {
+        "title": "Mita 검색",
+        "description": "광고 없이 결과로 직행하는 AI 검색 엔진"
+    },
+    "coze": {
+        "title": "Coze",
+        "description": "ByteDance의 AI 에이전트 플랫폼"
+    },
+    "midjourney": {
+        "title": "Midjourney",
+        "description": "이미지 및 일러스트 생성 AI 도구"
+    },
+    "stableDiffusion": {
+        "title": "Stable Diffusion",
+        "description": "StabilityAI의 텍스트-이미지 생성 AI"
+    },
+    "tongyiwanxiang": {
+        "title": "Tongyi Wanxiang",
+        "description": "Alibaba의 AI 그림 제작 플랫폼"
+    },
+    "wenxinyige": {
+        "title": "Wenxin Yige",
+        "description": "Baidu의 AI 예술 및 창작 보조 플랫폼"
+    },
+    "canva": {
+        "title": "Canva",
+        "description": "SNS 그래픽, 프레젠테이션, 포스터 등을 위한 디자인 플랫폼"
+    },
+    "meitu": {
+        "title": "Meitu 디자인 스튜디오",
+        "description": "AI 이미지 창작 및 디자인 플랫폼"
+    },
+    "keling": {
+        "title": "Keling AI",
+        "description": "Kuaishou의 AI 이미지 및 비디오 창작 플랫폼"
+    },
+    "runway": {
+        "title": "Runway",
+        "description": "그린 스크린 및 비디오 합성 등의 AI 비디오 제작 도구"
+    },
+    "luma": {
+        "title": "Dream Machine",
+        "description": "Luma의 AI 비디오 생성 도구"
+    },
+    "gamma": {
+        "title": "Gamma App",
+        "description": "AI 프레젠테이션 생성 도구"
+    },
+    "aippt": {
+        "title": "AiPPT",
+        "description": "AI로 고품질 PPT 빠르게 생성"
+    },
+    "suno": {
+        "title": "Suno",
+        "description": "고품질 AI 음악 창작 플랫폼"
+    },
+    "haimian": {
+        "title": "Haimian Music",
+        "description": "ByteDance의 무료 AI 음악 창작 및 발견 플랫폼"
+    },
+    "elevenLabs": {
+        "title": "ElevenLabs",
+        "description": "중국어를 포함한 28개 언어를 지원하는 AI 텍스트 음성 변환"
+    },
+    "tongyitingwu": {
+        "title": "Tongyi Tingwu",
+        "description": "Alibaba의 오디오 및 비디오 콘텐츠에 집중한 AI 도우미"
+    },
+    "cursor": {
+        "title": "Cursor",
+        "description": "빠른 프로그래밍을 위한 AI 코드 편집기"
+    }
+
+}
\ No newline at end of file

src/locales/ko/common.json

+{
+    "title": "AI 도구 상자",
+    "description": "AI 도구상자 - 텍스트 카드, JSON 포매터, URL 디코더, OpenAI 제품 출시 요약, 글로벌 모델 가격 비교 등 다양한 AI 도구를 모아 다양한 작업을 손쉽게 수행할 수 있도록 도와드립니다.",
+    "slogan": "당신의 지능형 개발 도구 모음, 모든 AI 도구 요구 사항을 원스톱으로 해결합니다.",
+    "keywords": "AI 도구상자, AI 도구, 텍스트 카드, JSON 포매터, URL 디코더, OpenAI 제품, 모델 가격 비교, 온라인 도구, 무료 도구",
+    "welcome": "환영합니다",
+    "login": "로그인",
+    "loginSubtitle": "AI 툴��스에 오신 것을 환영합니다. 전체 경험을 위해 로그인해 주세요",
+    "logout": "로그아웃",
+    "dev-tools": "개발 도구",
+    "image-tools": "이미지 도구",
+    "blog": "블로그",
+    "ai-products": "AI 제품",
+    "notFound": {
+      "title": "404 - 페이지를 찾을 수 없습니다",
+      "description": "죄송합니다. 찾고 있는 페이지가 존재하지 않습니다.",
+      "back_home": "홈으로 돌아가기"
+    },
+    "footer": {
+      "copyRight": "AI 도구 상자. 모든 권리 보유."
+    },
+    "about": {
+      "title": "회사 소개",
+      "description": "AI 도구 상자는 다양한 AI 도구를 통합한 종합 웹 애플리케이션으로, 사용자에게 원스톱 AI 솔루션을 제공합니다.",
+      "mission": "우리의 사명",
+      "missionDescription": "강력한 AI 도구에 쉽게 접근할 수 있도록 하여 생산성과 창의성을 향상시키는 것.",
+      "team": "우리 팀",
+      "teamDescription": "우리는 혁신적인 솔루션을 구축하는 데 전념하는 AI 애호가 및 개발자 팀입니다.",
+      "contact": "문의하기"
+    },
+    "navigation": {
+      "about": "회사 소개"
+    },
+    "categories": {
+        "Chatbots": "스마트 어시스턴트",
+        "Image": "이미지",
+        "AudioVideo": "오디오 및 비디오",
+        "Productivity": "생산성"
+    }
+}
\ No newline at end of file

src/locales/ko/tools.json

+{
+    "text2image": {
+      "title": "텍스트를 이미지로",
+      "description": "텍스트를 이미지 카드로 변환",
+      "inputPlaceholder": "텍스트 입력 (제목 포함 가능, 예: # 제목 1)",
+      "downloadButton": "이미지로 내보내기",
+      "selectTemplate": "템플릿 선택",
+      "inputLabel": "텍스트 입력 (Markdown 지원)",
+      "placeholder": "# 제목\n## 부제목\n- 목록 항목\n**굵게** *기울임*",
+      "previewDefault": "# 미리보기 영역\n텍스트 입력 후 여기에 미리보기가 표시됩니다",
+      "templates": {
+        "simple": "심플",
+        "ai-style": "AI 스타일",
+        "dark": "다크",
+        "paper": "페이퍼",
+        "minimal": "미니멀",
+        "tech": "테크"
+      }
+    },
+    "quoteCard": {
+      "title": "명언 카드 생성기",
+      "description": "명언 이중 언어 텍스트를 카드로 변환",
+      "chinesePlaceholder": "중국어 명언 입력",
+      "englishPlaceholder": "영어 번역 입력",
+      "authorPlaceholder": "저자 이름 입력",
+      "selectChineseFont": "중국어 글꼴 선택",
+      "selectEnglishFont": "영어 글꼴 선택",
+      "selectFontColor": "글자 색상 선택",
+      "selectAuthorColor": "저자명 색상 선택",
+      "selectBackground": "배경 색상 선택",
+      "customBackground": "사용자 정의 배경 선택",
+      "downloadButton": "이미지 다운로드",
+      "defaultQuote": "중국어 명언을 입력하세요",
+      "defaultTranslation": "영어 번역을 여기에 입력하세요",
+      "defaultAuthor": "저자명",
+      "fonts": {
+        "system": "시스템 기본",
+        "sans": "고딕체",
+        "serif": "명조체",
+        "mono": "고정폭"
+      },
+      "backgrounds": {
+        "white": "흰색",
+        "dark": "검정",
+        "paper": "크림색",
+        "custom": "사용자 정의"
+      }
+    },
+    "jsonFormatter": {
+      "title": "JSON 포맷터",
+      "description": "JSON 데이터 정리 및 검증",
+      "inputPlaceholder": "JSON 데이터 입력",
+      "invalidJson": "유효하지 않은 JSON",
+      "copyButton": "복사",
+      "copiedMessage": "복사됨"
+    },
+    "urlEncodeDecode": {
+      "title": "URL 인코딩/디코딩 도구",
+      "description": "URL을 온라인으로 인코딩하거나 디코딩합니다.",
+      "modeLabel": "모드 선택",
+      "encode": "인코딩",
+      "decode": "디코딩"
+    },
+    "urlEncode": {
+      "inputLabel": "인코딩할 텍스트 입력",
+      "resultLabel": "인코딩 결과"
+    },
+    "urlDecode": {
+      "inputLabel": "디코딩할 URL 입력",
+      "resultLabel": "디코딩 결과"
+    },
+    "openAITimeline": {
+      "title": "OpenAI 제품 출시",
+      "description": "OpenAI 제품 출시 일정"
+    },
+    "modelPrice": {
+      "title": "전세계 대형 모델 가격 비교",
+      "description": "전 세계 각 모델 가격 비교 아레나"
+    },
+    "handwrite": {
+      "title": "손글씨 폰트 생성기",
+      "description": "종이에 쓰는 것과 견줄 수 있는 효과를 생성합니다"
+    },
+    "imageBase64Converter": {
+      "title": "이미지 및 Base64 변환기",
+      "description": "이미지와 Base64의 상호 변환",
+      "imageToBase64": "이미지를 Base64로 변환",
+      "base64Result": "Base64 결과",
+      "base64ToImage": "Base64를 이미지로 변환",
+      "base64InputPlaceholder": "여기에 Base64 문자열을 붙여넣기",
+      "imageResult": "이미지 결과",
+      "invalidBase64": "잘못된 Base64 문자열",
+      "download": "이미지 다운로드"
+    },
+    "fisherai": {
+      "title": "FisherAI",
+      "description": "가장 유용한 Chrome 브라우저 요약 확장 프로그램"
+    }
+}
\ No newline at end of file

src/locales/zh/aiproducts.json

+{
+    "fisherai": {
+      "title": "FisherAI",
+      "description": "最好用的 Chrome 浏览器摘要插件"
+    },
+    "chatgpt": {
+      "title": "ChatGPT",
+      "description": "OpenAI旗下AI对话助手"
+    },
+    "claude": {
+      "title": "Claude",
+      "description": "Anthropic旗下AI对话助手"
+    },
+    "gemini": {
+      "title": "Gemini",
+      "description": "Google旗下AI对话工具"
+    },
+    "poe": {
+      "title": "POE",
+      "description": "Quora 旗下的多模型聊天平台"
+    },
+    "perplexity": {
+      "title": "Perplexity",
+      "description": "强大的AI搜索引擎"
+    },
+    "kimi": {
+      "title": "Kimi 智能助手",
+      "description": "会推理解析，能深度思考的AI助手"
+    },
+    "doubao": {
+      "title": "豆包",
+      "description": "字节跳动旗下的AI对话助手"
+    },
+    "zhipu": {
+      "title": "智谱清言",
+      "description": "免费全能的AI助手，支持AI绘画、视频生成"
+    },
+    "yuanbao": {
+      "title": "腾讯元宝",
+      "description": "腾讯旗下的AI对话助手"
+    },
+    "qwen": {
+      "title": "通义千问",
+      "description": "阿里巴巴旗下的AI对话助手"
+    },
+    "hailuo": {
+      "title": "海螺AI",
+      "description": "MiniMax旗下的AI对话助手"
+    },
+    "baichuan": {
+      "title": "百小应",
+      "description": "百川智能推出的免费AI助手"
+    },
+    "wenxin": {
+      "title": "文心一言",
+      "description": "百度旗下的AI对话助手"
+    },
+    "mita": {
+      "title": "秘塔搜索",
+      "description": "没有广告，直达结果的AI搜索引擎"
+    },
+    "coze": {
+      "title": "Coze",
+      "description": "字节旗下AI智能体平台"
+    },
+    "midjourney": {
+      "title": "Midjourney",
+      "description": "AI图像和插画生成工具"
+    },
+    "stableDiffusion": {
+      "title": "Stable Diffusion",
+      "description": "StabilityAI推出的文本到图像生成AI"
+    },
+    "tongyiwanxiang": {
+      "title": "通义万相",
+      "description": "阿里推出的AI绘画创作平台"
+    },
+    "wenxinyige": {
+      "title": "文心一格",
+      "description": "百度旗下AI艺术和创意辅助平台"
+    },
+    "canva": {
+      "title": "Canva",
+      "description": "用于创建社交媒体图形、演示文稿、海报、文档和其他视觉内容的平面设计平台"
+    },
+    "meitu": {
+      "title": "美图设计室",
+      "description": "AI图像创作和设计平台"
+    },
+    "keling": {
+      "title": "可灵 AI",
+      "description": "快手推出的AI图像和视频创作平台"
+    },
+    "runway": {
+      "title": "Runway",
+      "description": "强大的AI视频制作工具，绿幕抠像视频合成等"
+    },
+    "luma": {
+      "title": "Dream Machine",
+      "description": "Luma推出的AI视频生成工具"
+    },
+    "gamma": {
+      "title": "Gamma App",
+      "description": "AI幻灯片演示生成工具"
+    },
+    "aippt": {
+      "title": "AiPPT",
+      "description": "AI快速生成高质量PPT"
+    },
+    "suno": {
+      "title": "Suno",
+      "description": "高质量的AI音乐创作平台"
+    },
+    "haimian": {
+      "title": "海绵音乐",
+      "description": "字节跳动推出的免费AI音乐创作和发现平台"
+    },
+    "elevenLabs": {
+      "title": "ElevenLabs",
+      "description": "AI文本转语音，支持包含中文在内的28种语言"
+    },
+    "tongyitingwu": {
+      "title": "通义听悟",
+      "description": "阿里巴巴旗下聚焦音视频内容的工作学习AI助手"
+    },
+    "cursor": {
+      "title": "Cursor",
+      "description": "AI代码编辑器，快速进行编程和软件开发"
+    }
+}
\ No newline at end of file

src/locales/zh/common.json

+{
+    "title": "AI 工具箱",
+    "description": "AI工具箱 - 集合了多种 AI 工具，如文字卡片、JSON 格式化、URL 解码器、OpenAI 产品发布汇总、全球各大模型价格对比，帮助您轻松完成各类任务。",
+    "slogan": "您的智能开发工具集合，一站式解决各种 AI 工具需求。",
+    "keywords": "AI工具箱，AI 工具，文字卡片，JSON 格式化，URL 解码器，OpenAI 产品，模型价格对比，在线工具，免费工具",
+    "welcome": "欢迎",
+    "login": "登录",
+    "loginSubtitle": "欢迎使用 AI 工具箱，请登录以获得完整体验",
+    "logout": "退出登录",
+    "dev-tools": "开发工具",
+    "image-tools": "图片工具",
+    "blog": "博客",
+    "ai-products": "AI 产品",
+    "notFound": {
+      "title": "404 - 页面未找到",
+      "description": "抱歉，您访问的页面不存在。",
+      "back_home": "返回首页"
+    },
+    "footer": {
+      "copyRight": "AI 工具箱. 保留所有权利。"
+    },
+    "about": {
+      "title": "关于我们",
+      "description": "AI 工具箱是一个集成多种AI开发工具的综合Web应用程序，旨在为用户提供一站式AI解决方案。",
+      "mission": "我们的使命",
+      "missionDescription": "通过提供强大的AI工具，赋能用户，提高生产力和创造力。",
+      "team": "我们的团队",
+      "teamDescription": "我们是一支由AI爱好者和开发人员组成的专注团队，致力于构建创新的解决方案。",
+      "contact": "联系我们"
+    },
+    "navigation": {
+      "about": "关于我们"
+    },
+    "categories": {
+      "Chatbots": "智能助手",
+      "Image": "图像",
+      "AudioVideo": "音视频",
+      "Productivity": "效率办公"
+    }
+}
\ No newline at end of file

src/locales/zh/tools.json

+{
+    "text2image": {
+      "title": "文字转图片生成器",
+      "description": "将文本转换为精美的图片",
+      "selectTemplate": "选择模板",
+      "inputLabel": "输入文本 (支持 Markdown)",
+      "placeholder": "# 标题\n## 子标题\n- 列表项\n**粗体** *斜体*",
+      "downloadButton": "生成图片",
+      "previewDefault": "# 预览区域\n输入文本后在这里预览效果",
+      "templates": {
+        "simple": "简约",
+        "ai-style": "AI风格",
+        "dark": "暗色",
+        "paper": "纸张",
+        "minimal": "极简",
+        "tech": "科技"
+      }
+    },
+    "quoteCard": {
+      "title": "名言卡片生成器",
+      "description": "名言双语文本转为卡片",
+      "chinesePlaceholder": "请输入中文名人名言",
+      "englishPlaceholder": "请输入英文翻译",
+      "authorPlaceholder": "请输入作者姓名",
+      "selectChineseFont": "选择中文字体",
+      "selectEnglishFont": "选择英文字体",
+      "selectFontColor": "选择字体颜色",
+      "selectAuthorColor": "选择作者颜色",
+      "selectBackground": "选择背景颜色",
+      "customBackground": "选择自定义背景颜色",
+      "downloadButton": "下载图片",
+      "defaultQuote": "中文名人名言",
+      "defaultTranslation": "英文翻译",
+      "defaultAuthor": "作者姓名",
+      "fonts": {
+        "system": "系统默认",
+        "sans": "无衬线",
+        "serif": "衬线",
+        "mono": "等宽"
+      },
+      "backgrounds": {
+        "white": "白色",
+        "dark": "黑色",
+        "paper": "黄色纸张"
+      }
+    },
+    "jsonFormatter": {
+      "title": "JSON 格式化",
+      "description": "美化和验证 JSON 数据",
+      "inputPlaceholder": "输入 JSON 数据",
+      "invalidJson": "无效的 JSON",
+      "copyButton": "复制",
+      "copiedMessage": "已复制"
+    },
+    "urlEncodeDecode": {
+      "title": "URL 编码/解码",
+      "description": "在线编码或解码 URL。",
+      "modeLabel": "选择模式",
+      "encode": "编码",
+      "decode": "解码"
+    },
+    "urlEncode": {
+      "inputLabel": "输入要编码的文本",
+      "resultLabel": "编码结果"
+    },
+    "urlDecode": {
+      "inputLabel": "输入要解码的 URL",
+      "resultLabel": "解码结果"
+    },
+    "openAITimeline": {
+      "title": "OpenAI 产品发布",
+      "description": "OpenAI 产品发布时间一览"
+    },
+    "modelPrice": {
+      "title": "全球大模型价格对比",
+      "description": "全球各模型价格对比竞技场"
+    },
+    "handwrite": {
+      "title": "手写字体生成器",
+      "description": "生成和纸上书写相媲美的效果"
+    },
+    "imageBase64Converter": {
+      "title": "Base64与图片转换",
+      "description": "图片与 Base64 的互相转换",
+      "imageToBase64": "图片转 Base64",
+      "base64Result": "Base64 结果",
+      "base64ToImage": "Base64 转图片",
+      "base64InputPlaceholder": "在此粘贴 Base64 字符串",
+      "imageResult": "图片结果",
+      "invalidBase64": "无效的 Base64 字符串",
+      "download": "下载图片"
+    },
+    "fisherai": {
+      "title": "FisherAI",
+      "description": "最好用的 Chrome 浏览器摘要插件"
+    }
+}
\ No newline at end of file

src/pages/AIProduct.jsx

@@ -268,13 +268,13 @@ const AIProduct = () => {
                     >
                       <img 
                         src={tool.icon} 
-                        alt={`${t(`tools.${tool.id}.title`)} icon`} 
+                        alt={`${t(`aiproducts.${tool.id}.title`)} icon`} 
                         className="tool-icon" 
                         loading="lazy" 
                       />
                       <div className="tool-content">
-                        <h3 className="tool-title">{t(`tools.${tool.id}.title`)}</h3>
-                        <p className="tool-description">{t(`tools.${tool.id}.description`)}</p>
+                        <h3 className="tool-title">{t(`aiproducts.${tool.id}.title`)}</h3>
+                        <p className="tool-description">{t(`aiproducts.${tool.id}.description`)}</p>
                       </div>
                     </a>
                   ) : (

src/pages/About.jsx

 import React from 'react';
 import SEO from '../components/SEO';
 import { useTranslation } from '../js/i18n';
-import '../styles/About.css'; // 新增的样式文件
+import '../styles/About.css';
 
 const About = () => {
   const { t } = useTranslation();
@@ -14,13 +14,33 @@ const About = () => {
       />
       <main>
         <section className="about-section">
+          <div className="about-header">
             <h1>{t('about.title')}</h1>
             <p>{t('about.description')}</p>
-          <h2>{t('about.mission')}</h2>
+          </div>
+          
+          <div className="about-grid">
+            <div className="about-card">
+              <h2>
+                <i className="fas fa-rocket"></i>
+                {t('about.mission')}
+              </h2>
               <p>{t('about.missionDescription')}</p>
-          <h2>{t('about.team')}</h2>
+            </div>
+            
+            <div className="about-card">
+              <h2>
+                <i className="fas fa-users"></i>
+                {t('about.team')}
+              </h2>
               <p>{t('about.teamDescription')}</p>
-          <h2>{t('about.contact')}</h2>
+            </div>
+            
+            <div className="about-card">
+              <h2>
+                <i className="fas fa-envelope"></i>
+                {t('about.contact')}
+              </h2>
               <div className="social-links">
                 <a href="https://x.com/fun000001" target="_blank" rel="noopener noreferrer" className="social-link">
                   <i className="fab fa-twitter"></i> Twitter
@@ -29,6 +49,8 @@ const About = () => {
                   <i className="fas fa-blog"></i> Blog
                 </a>
               </div>
+            </div>
+          </div>
         </section>
       </main>
     </>

src/styles/About.css

 .about-section {
-    padding: 2rem;
+  padding: 4rem 2rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.about-header {
+  text-align: center;
+  margin-bottom: 4rem;
+}
+
+.about-header h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 1rem;
+}
+
+.about-header p {
+  font-size: 1.2rem;
+  color: #4B5563;
   max-width: 800px;
   margin: 0 auto;
-  }
+  line-height: 1.6;
+}
 
-  .about-section h1,
-  .about-section h2 {
-    color: #333;
-  }
+.about-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+.about-card {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.about-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15);
+  border-color: rgba(99, 102, 241, 0.3);
+}
 
-  .about-section p {
+.about-card h2 {
+  font-size: 1.5rem;
+  color: #1a1a1a;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.about-card p {
+  color: #4B5563;
   line-height: 1.6;
-    color: #555;
-  }
+}
 
-  .social-links {
+.social-links {
   display: flex;
   gap: 1.5rem;
-    margin-top: 1rem;
-  }
+  margin-top: 2rem;
+  justify-content: center;
+}
 
-  .social-link {
+.social-link {
   display: flex;
   align-items: center;
   text-decoration: none;
-    color: #6366F1; /* 与现有主题颜色一致 */
+  color: #6366F1;
   font-size: 1.1rem;
-    transition: color 0.3s ease;
-  }
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  background: rgba(99, 102, 241, 0.1);
+  transition: all 0.3s ease;
+}
 
-  .social-link i {
+.social-link i {
   margin-right: 0.5rem;
-    font-size: 1.5rem;
+  font-size: 1.2rem;
+}
+
+.social-link:hover {
+  background: rgba(99, 102, 241, 0.2);
+  transform: translateY(-2px);
+}
+
+@media (max-width: 768px) {
+  .about-section {
+    padding: 2rem 1rem;
+  }
+  
+  .about-header h1 {
+    font-size: 2rem;
   }
   
-  .social-link:hover {
-    color: #4F46E5; /* 悬停时颜色加深 */
+  .about-grid {
+    grid-template-columns: 1fr;
   }
+}
\ No newline at end of file