Improve layout with hero, cards, typography, TOC and reading progress

app/page.tsx

@@ -1,45 +1,31 @@
 import Link from 'next/link';
 import { getAllPostsSorted } from '@/lib/posts';
 import { siteConfig } from '@/lib/config';
+import { Hero } from '@/components/hero';
+import { PostCard } from '@/components/post-card';
 
 export default function HomePage() {
   const posts = getAllPostsSorted().slice(0, siteConfig.postsPerPage);
 
   return (
     <section className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold">
-          你好，我是 {siteConfig.name}
-        </h1>
-        <p className="mt-2 text-gray-600 dark:text-gray-300">
-          {siteConfig.tagline}
-        </p>
-      </div>
+      <Hero />
 
       <div>
-        <h2 className="text-xl font-semibold">最新文章</h2>
-        <ul className="mt-3 space-y-2">
+        <div className="mb-3 flex items-baseline justify-between">
+          <h2 className="text-xl font-semibold">最新文章</h2>
+          <Link
+            href="/blog"
+            className="text-sm text-blue-600 hover:underline dark:text-blue-400"
+          >
+            所有文章 →
+          </Link>
+        </div>
+        <div className="space-y-4">
           {posts.map((post) => (
-            <li key={post._id}>
-              <Link href={post.url} className="hover:underline">
-                {post.title}
-              </Link>
-              {post.published_at && (
-                <span className="ml-2 text-xs text-gray-500">
-                  {new Date(post.published_at).toLocaleDateString(
-                    siteConfig.defaultLocale
-                  )}
-                </span>
-              )}
-            </li>
+            <PostCard key={post._id} post={post} />
           ))}
-        </ul>
-        <Link
-          href="/blog"
-          className="mt-4 inline-block text-sm text-blue-600 hover:underline"
-        >
-          所有文章 →
-        </Link>
+        </div>
       </div>
     </section>
   );