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

app/blog/page.tsx

@@ -1,6 +1,5 @@
-import Link from 'next/link';
 import { getAllPostsSorted } from '@/lib/posts';
-import { siteConfig } from '@/lib/config';
+import { PostCard } from '@/components/post-card';
 
 export const metadata = {
   title: 'Blog'
@@ -12,41 +11,11 @@ export default function BlogIndexPage() {
   return (
     <section className="space-y-6">
       <h1 className="text-2xl font-bold">Blog</h1>
-      <ul className="space-y-3">
+      <div className="space-y-4">
         {posts.map((post) => (
-          <li key={post._id}>
-            <Link
-              href={post.url}
-              className="text-lg font-medium hover:underline"
-            >
-              {post.title}
-            </Link>
-            <div className="text-xs text-gray-500">
-              {post.published_at &&
-                new Date(post.published_at).toLocaleDateString(
-                  siteConfig.defaultLocale
-                )}
-              {post.tags && post.tags.length > 0 && (
-                <span className="ml-2">
-                  {post.tags.map((t) => (
-                    <span
-                      key={t}
-                      className="mr-1 rounded bg-gray-200 px-1 dark:bg-gray-800"
-                    >
-                      #{t}
-                    </span>
-                  ))}
-                </span>
-              )}
-            </div>
-            {post.description && (
-              <p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
-                {post.description}
-              </p>
-            )}
-          </li>
+          <PostCard key={post._id} post={post} />
         ))}
-      </ul>
+      </div>
     </section>
   );
 }