feat: add createdAt and updatedAt fields to Article model and implement article pagination with new components

src/app/(pages)/home/page.tsx

@@ -1,10 +1,62 @@
-import { siteConfig } from '@/site.config';
+import { getArticlesPaginated } from '@/lib/feature/article/article.external';
+import { ArticleCard } from '@/ui/components/internal/article-card';
+import { ArticleListPagination } from '@/ui/components/internal/article-list-pagination';
+import { FileTextIcon } from 'lucide-react';
+
+const PAGE_SIZE = 9;
+
+interface HomeProps {
+    searchParams: Promise<{ page?: string }>;
+}
+
+const Home = async ({ searchParams }: HomeProps) => {
+    const { page: pageParam } = await searchParams;
+    const page = Math.max(1, Number(pageParam) || 1);
+
+    const { data: articles, totalPages, total } = await getArticlesPaginated(page, PAGE_SIZE);
 
-const Home = async () => {
     return (
-        <div className='flex flex-col items-center justify-center'>
-            <h1 className='mb-4 text-4xl font-bold'>Home</h1>
-            <p className='text-lg'>Welcome {siteConfig.name}!</p>
+        <div className='container mx-auto w-full flex-1 px-4 py-12 md:py-16'>
+            <div className='mb-10 border-b border-border pb-8'>
+                <p className='mb-1 font-mono text-xs font-medium uppercase tracking-widest text-muted-foreground'>
+                    Dev Blog
+                </p>
+                <h1 className='text-3xl font-bold tracking-tight md:text-4xl'>
+                    Latest Articles
+                </h1>
+                <p className='mt-2 text-muted-foreground'>
+                    {total === 0
+                        ? 'No articles published yet.'
+                        : `${total} article${total === 1 ? '' : 's'} published`}
+                </p>
+            </div>
+
+            {articles.length === 0 ? (
+                <div className='flex min-h-64 flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border text-center'>
+                    <FileTextIcon className='size-10 text-muted-foreground/40' />
+                    <p className='text-muted-foreground'>
+                        No articles yet. Check back soon!
+                    </p>
+                </div>
+            ) : (
+                <div className='grid gap-6 sm:grid-cols-2 xl:grid-cols-3'>
+                    {articles.map((article) => (
+                        <ArticleCard key={article.externalId} article={article} />
+                    ))}
+                </div>
+            )}
+
+            {totalPages > 1 && (
+                <div className='mt-12 flex items-center justify-between gap-4'>
+                    <p className='text-sm text-muted-foreground'>
+                        Page {page} of {totalPages}
+                    </p>
+                    <ArticleListPagination
+                        currentPage={page}
+                        totalPages={totalPages}
+                    />
+                </div>
+            )}
         </div>
     );
 };