refact: update ui

src/pages/BlogListPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { ArrowRight, Calendar } from 'lucide-react';
 import SEOHead from '../components/seo/SEOHead';
 import { useLanguage } from '../contexts/LanguageContext';
 import { loadManifest, type ContentMeta } from '../lib/content';
@@ -14,27 +15,96 @@ export default function BlogListPage() {
     });
   }, [language]);
 
+  const featured = posts[0];
+  const rest = posts.slice(1);
+
   return (
     <>
       <SEOHead title="Blog" description="TexPixel blog — updates, tutorials, and insights" path="/blog" />
-      <div className="max-w-4xl mx-auto py-16 px-6">
-        <h1 className="text-3xl font-bold text-gray-900 mb-8">{language === 'en' ? 'Blog' : '博客'}</h1>
-        <div className="space-y-6">
-          {posts.map((post) => (
-            <Link key={post.slug} to={`/blog/${post.slug}`} className="block p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
-              <div className="text-xs text-gray-400 mb-2">{post.date}</div>
-              <h2 className="text-lg font-semibold text-gray-900">{post.title}</h2>
-              <p className="text-gray-600 mt-1 text-sm">{post.description}</p>
-              {post.tags.length > 0 && (
-                <div className="flex gap-2 mt-3">
-                  {post.tags.map(tag => (
-                    <span key={tag} className="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded">{tag}</span>
-                  ))}
-                </div>
-              )}
-            </Link>
-          ))}
+
+      <div className="max-w-5xl mx-auto py-16 lg:py-20 px-6">
+        {/* Header */}
+        <div className="mb-12">
+          <h1 className="font-display text-4xl lg:text-5xl font-bold text-ink tracking-tight mb-4">
+            {language === 'en' ? 'Blog' : '博客'}
+          </h1>
+          <p className="text-ink-secondary text-lg max-w-xl">
+            {language === 'en'
+              ? 'Updates, tutorials, and insights on formula recognition and LaTeX.'
+              : '关于公式识别和 LaTeX 的更新、教程和见解。'}
+          </p>
         </div>
+
+        {/* Featured post */}
+        {featured && (
+          <Link
+            to={`/blog/${featured.slug}`}
+            className="card block p-8 mb-8 group hover:border-coral-200"
+          >
+            <div className="flex items-center gap-2 text-xs text-ink-muted mb-3">
+              <Calendar size={13} />
+              <time>{featured.date}</time>
+            </div>
+            <h2 className="font-display text-2xl lg:text-3xl font-bold text-ink mb-3 group-hover:text-coral-600 transition-colors">
+              {featured.title}
+            </h2>
+            <p className="text-ink-secondary leading-relaxed mb-4 max-w-2xl">
+              {featured.description}
+            </p>
+            <div className="flex items-center justify-between">
+              <div className="flex gap-2">
+                {featured.tags.map(tag => (
+                  <span key={tag} className="text-xs bg-coral-50 text-coral-600 px-2.5 py-1 rounded-full font-medium">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+              <span className="inline-flex items-center gap-1 text-sm font-medium text-coral-500 group-hover:gap-2 transition-all">
+                {language === 'en' ? 'Read more' : '阅读全文'}
+                <ArrowRight size={14} />
+              </span>
+            </div>
+          </Link>
+        )}
+
+        {/* Rest of posts */}
+        {rest.length > 0 && (
+          <div className="grid md:grid-cols-2 gap-5">
+            {rest.map((post) => (
+              <Link
+                key={post.slug}
+                to={`/blog/${post.slug}`}
+                className="card p-6 group hover:border-coral-200"
+              >
+                <div className="text-xs text-ink-muted mb-2">
+                  <time>{post.date}</time>
+                </div>
+                <h2 className="font-display text-lg font-semibold text-ink mb-2 group-hover:text-coral-600 transition-colors">
+                  {post.title}
+                </h2>
+                <p className="text-ink-secondary text-sm leading-relaxed mb-3">{post.description}</p>
+                {post.tags.length > 0 && (
+                  <div className="flex gap-2">
+                    {post.tags.map(tag => (
+                      <span key={tag} className="text-[11px] bg-cream-200 text-ink-secondary px-2 py-0.5 rounded-full">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </Link>
+            ))}
+          </div>
+        )}
+
+        {/* Empty state */}
+        {posts.length === 0 && (
+          <div className="card p-12 text-center">
+            <p className="text-ink-muted text-sm">
+              {language === 'en' ? 'No posts yet. Check back soon!' : '暂无文章，敬请期待！'}
+            </p>
+          </div>
+        )}
       </div>
     </>
   );