better chinese

src/app/zh-CN/page.tsx

@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { HistoryItem } from '@/components/ComparisonHistory';
 import AdBanner from '@/components/AdBanner';
 import LanguageSwitcher from '@/components/LanguageSwitcher';
@@ -67,7 +69,7 @@ export default function HomePage() {
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-12">
           <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
-            万物皆可比对
+            万物皆可比
           </h1>
           
           <LanguageSwitcher currentLang="zh-CN" />
@@ -78,6 +80,7 @@ export default function HomePage() {
           <p className="text-lg text-gray-500 max-w-3xl mx-auto mb-8">
             从产品和服务到概念和想法 - 获得由人工智能驱动的全面、公正的比较分析。
             用详细分析做出明智决策。
+            一站式解决选择困难症！
           </p>
           
           <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 mb-8">
@@ -460,7 +463,39 @@ function ComparisonResultsZH({ results }: { results: string }) {
     <div>
       <h2 className="text-2xl font-bold text-gray-900 mb-6">比较结果</h2>
       <div className="prose prose-lg max-w-none">
-        <div dangerouslySetInnerHTML={{ __html: results.replace(/\n/g, '<br/>') }} />
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            table: ({ children }) => (
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200 border border-gray-300">
+                  {children}
+                </table>
+              </div>
+            ),
+            thead: ({ children }) => (
+              <thead className="bg-gray-50">{children}</thead>
+            ),
+            tbody: ({ children }) => (
+              <tbody className="bg-white divide-y divide-gray-200">{children}</tbody>
+            ),
+            tr: ({ children }) => (
+              <tr className="hover:bg-gray-50">{children}</tr>
+            ),
+            th: ({ children }) => (
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-r border-gray-200 last:border-r-0">
+                {children}
+              </th>
+            ),
+            td: ({ children }) => (
+              <td className="px-6 py-4 whitespace-pre-wrap text-sm text-gray-900 border-r border-gray-200 last:border-r-0">
+                {children}
+              </td>
+            ),
+          }}
+        >
+          {results}
+        </ReactMarkdown>
       </div>
     </div>
   );
@@ -491,4 +526,4 @@ function ComparisonTipsZH() {
       </ul>
     </div>
   );
-}
+}