feature: 新增常用AI产品

src/components/QuoteCard.jsx

@@ -127,7 +127,7 @@ const Label = styled.label`
 
 const DownloadButton = styled.button`
   padding: 10px 20px;
-  background-color: #4CAF50;
+  background-color: #1677ff;
   color: white;
   border: none;
   border-radius: 8px;
@@ -136,7 +136,7 @@ const DownloadButton = styled.button`
   margin-top: 20px;
 
   &:hover {
-    background-color: #45a049;
+    background-color: #2f86ff;
   }
 `;
 

src/pages/AIProduct.jsx

@@ -8,7 +8,226 @@ const tools = [
     id: 'fisherai', 
     icon: '/assets/icon/fisherai.png', 
     path: 'https://chromewebstore.google.com/detail/fisherai-your-best-summar/ipfiijaobcenaibdpaacbbpbjefgekbj', 
-    external: true 
+    external: true,
+    category: 'Chatbots'
+  },
+  { 
+    id: 'chatgpt', 
+    icon: '/assets/icon/openai_small.svg', 
+    path: 'https://chatgpt.com', 
+    external: true,
+    category: 'Chatbots'
+  },
+  { 
+    id: 'claude', 
+    icon: '/assets/icon/anthropic_small.svg', 
+    path: 'https://claude.ai', 
+    external: true ,
+    category: 'Chatbots'
+  },
+  { 
+    id: 'gemini', 
+    icon: '/assets/icon/google_small.svg', 
+    path: 'https://aistudio.google.com', 
+    external: true,
+    category: 'Chatbots' 
+  },
+  { 
+    id: 'poe', 
+    icon: '/assets/icon/poe.png', 
+    path: 'https://poe.com/', 
+    external: true,
+    category: 'Chatbots' 
+  },
+
+  { 
+    id: 'kimi', 
+    icon: '/assets/icon/moonshot_small.svg', 
+    path: 'https://kimi.moonshot.cn', 
+    external: true,
+    category: 'Chatbots' 
+  },
+  { 
+    id: 'doubao', 
+    icon: '/assets/icon/doubao2.png', 
+    path: 'https://www.doubao.com/chat/', 
+    external: true,
+    category: 'Chatbots' 
+  },
+  { 
+    id: 'zhipu', 
+    icon: '/assets/icon/glm_small.svg', 
+    path: 'https://chatglm.cn', 
+    external: true,
+    category: 'Chatbots' 
+  },
+  { 
+    id: 'yuanbao', 
+    icon: '/assets/icon/yuanbao.png', 
+    path: 'https://yuanbao.tencent.com/', 
+    external: true,
+    category: 'Chatbots' 
+  },
+  { 
+    id: 'qwen', 
+    icon: '/assets/icon/ali_small.svg', 
+    path: 'https://tongyi.aliyun.com/', 
+    external: true,
+    category: 'Chatbots' 
+  },
+  { 
+    id: 'hailuo', 
+    icon: '/assets/icon/hailuo.png', 
+    path: 'https://hailuoai.com/', 
+    external: true,
+    category: 'Chatbots' 
+  },
+  { 
+    id: 'baichuan', 
+    icon: '/assets/icon/baichuan.png', 
+    path: 'https://ying.baichuan-ai.com/chat', 
+    external: true ,
+    category: 'Chatbots'
+  },
+  { 
+    id: 'wenxin', 
+    icon: '/assets/icon/wenxin_small.png', 
+    path: 'https://ying.baichuan-ai.com/chat', 
+    external: true ,
+    category: 'Chatbots'
+  },
+  { 
+    id: 'coze', 
+    icon: '/assets/icon/coze.png', 
+    path: 'https://www.coze.cn/', 
+    external: true,
+    category: 'Chatbots' 
+  },
+  { 
+    id: 'midjourney', 
+    icon: '/assets/icon/midjourney.png', 
+    path: 'https://www.midjourney.com/', 
+    external: true ,
+    category: 'Image'
+  },
+  { 
+    id: 'stableDiffusion', 
+    icon: '/assets/icon/stability.png', 
+    path: 'https://stability.ai/', 
+    external: true ,
+    category: 'Image'
+  },
+  { 
+    id: 'tongyiwanxiang', 
+    icon: '/assets/icon/ali_small.svg', 
+    path: 'https://tongyi.aliyun.com/wanxiang/', 
+    external: true ,
+    category: 'Image'
+  },
+  { 
+    id: 'wenxinyige', 
+    icon: '/assets/icon/wenxin_small.svg', 
+    path: 'https://yige.baidu.com/', 
+    external: true ,
+    category: 'Image'
+  },
+  { 
+    id: 'canva', 
+    icon: '/assets/icon/canva.png', 
+    path: 'https://www.canva.com/', 
+    external: true ,
+    category: 'Image'
+  },
+  { 
+    id: 'meitu', 
+    icon: '/assets/icon/meitu.jpg', 
+    path: 'https://www.designkit.com/', 
+    external: true ,
+    category: 'Image'
+  },
+  { 
+    id: 'keling', 
+    icon: '/assets/icon/keling.png', 
+    path: 'https://klingai.kuaishou.com/', 
+    external: true ,
+    category: 'AudioVideo'
+  },
+  { 
+    id: 'runway', 
+    icon: '/assets/icon/runway.png', 
+    path: 'https://runwayml.com/', 
+    external: true ,
+    category: 'AudioVideo'
+  },
+  { 
+    id: 'luma', 
+    icon: '/assets/icon/luma.png', 
+    path: 'https://lumalabs.ai/dream-machine', 
+    external: true ,
+    category: 'AudioVideo'
+  },
+  { 
+    id: 'elevenLabs', 
+    icon: '/assets/icon/elevenlabs.png', 
+    path: 'https://elevenlabs.io/', 
+    external: true ,
+    category: 'AudioVideo'
+  },
+  { 
+    id: 'tongyitingwu', 
+    icon: '/assets/icon/ali_small.svg', 
+    path: 'https://tingwu.aliyun.com/', 
+    external: true ,
+    category: 'AudioVideo'
+  },
+  { 
+    id: 'suno', 
+    icon: '/assets/icon/suno.png', 
+    path: 'https://suno.com/', 
+    external: true ,
+    category: 'AudioVideo'
+  },
+  { 
+    id: 'haimian', 
+    icon: '/assets/icon/haimian.png', 
+    path: 'https://www.haimian.com/', 
+    external: true ,
+    category: 'AudioVideo'
+  },
+  { 
+    id: 'perplexity', 
+    icon: '/assets/icon/perplexity.png', 
+    path: 'https://www.perplexity.ai/', 
+    external: true,
+    category: 'Productivity' 
+  },
+  { 
+    id: 'mita', 
+    icon: '/assets/icon/mita.png', 
+    path: 'https://metaso.cn/', 
+    external: true ,
+    category: 'Productivity'
+  },
+  { 
+    id: 'cursor', 
+    icon: '/assets/icon/cursor.png', 
+    path: 'https://www.cursor.com/', 
+    external: true ,
+    category: 'Productivity'
+  },
+  { 
+    id: 'gamma', 
+    icon: '/assets/icon/gamma.png', 
+    path: 'https://gamma.app/', 
+    external: true ,
+    category: 'Productivity'
+  },
+  { 
+    id: 'aippt', 
+    icon: '/assets/icon/aippt.png', 
+    path: 'https://aippt.cn/', 
+    external: true ,
+    category: 'Productivity'
   },
   // 其他工具...
 ];
@@ -16,6 +235,16 @@ const tools = [
 const AIProduct = () => {
   const { t } = useTranslation();
 
+  // 按照分类对工具进行分组
+  const groupedTools = tools.reduce((groups, tool) => {
+    const category = tool.category || 'Others';
+    if (!groups[category]) {
+      groups[category] = [];
+    }
+    groups[category].push(tool);
+    return groups;
+  }, {});
+
   return (
     <>
       <SEO
@@ -24,8 +253,11 @@ const AIProduct = () => {
       />
       <main>
         <section className="tools-section">
+          {Object.keys(groupedTools).map(category => (
+            <div key={category} className="category-group">
+              <h2 className="category-title">{t(`categories.${category}`)}</h2>
               <div className="tools-grid">
-            {tools.map(tool => (
+                {groupedTools[category].map(tool => (
                   tool.external ? (
                     <a 
                       href={tool.path} 
@@ -65,6 +297,8 @@ const AIProduct = () => {
                   )
                 ))}
               </div>
+            </div>
+          ))}
         </section>
       </main>
     </>

src/styles/main.css

@@ -56,12 +56,14 @@ main {
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
-  padding: 3rem 1rem 1rem;
+  padding: 2rem 1rem 1rem;
 }
 
+
 .tools-section h2 {
   text-align: center;
   font-size: 3rem;
+  margin-top: 0; /* 重置margin-top */
   margin-bottom: 4rem;
   color: var(--primary-color);
   font-weight: 700;
@@ -226,3 +228,11 @@ footer {
   text-decoration: none;
 }
 
+.category-group {
+  margin-bottom: 1rem; /* 添加margin-bottom以增加分组间距 */
+  margin-top: 6rem;
+}
+
+.category-group:first-child {
+  margin-top: 0; /* 确保第一个分组没有额外的顶部间距 */
+}
\ No newline at end of file