🪛 03 routing

app/page.tsx

@@ -1,8 +1,59 @@
-export default function Home() {
+import Link from 'next/link'
+import { getAllPosts } from '@/lib/markdown'
+import { formatDate } from '@/lib/utils'
+
+export default async function HomePage() {
+  const allPosts = await getAllPosts()
+  const featuredPosts = allPosts.slice(0, 3)
+
   return (
-    <main className="min-h-screen p-8">
-      <h1 className="text-4xl font-bold text-primary-600">Welcome to My Blog</h1>
-      <p className="mt-4 text-gray-600">Built with Next.js 15, TypeScript, and Tailwind CSS</p>
-    </main>
+    <div className="space-y-12">
+      <section className="text-center py-12">
+        <h1 className="text-5xl font-bold mb-4">Bun venit pe Blog</h1>
+        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+          Explorează articole despre dezvoltare web, design și tehnologie.
+          Învață din experiențe practice și tutoriale detaliate.
+        </p>
+        <div className="mt-8 space-x-4">
+          <Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
+            Vezi toate articolele
+          </Link>
+          <Link href="/about" className="inline-block px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
+            Despre mine
+          </Link>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-3xl font-bold mb-8">Articole Recente</h2>
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {featuredPosts.map((post) => (
+            <article key={post.slug} className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition">
+              {post.frontmatter.image && (
+                <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 object-cover rounded-lg mb-4" />
+              )}
+              <h3 className="text-xl font-semibold mb-2">
+                <Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition">
+                  {post.frontmatter.title}
+                </Link>
+              </h3>
+              <p className="text-gray-600 dark:text-gray-400 mb-4">{post.frontmatter.description}</p>
+              <div className="flex items-center justify-between text-sm text-gray-500">
+                <span>{formatDate(post.frontmatter.date)}</span>
+                <span>{post.readingTime} min citire</span>
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg">
+        <h2 className="text-3xl font-bold mb-4">Vrei să afli mai multe?</h2>
+        <p className="text-lg text-gray-600 dark:text-gray-400 mb-6">Explorează arhiva completă de articole</p>
+        <Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
+          Vezi toate articolele →
+        </Link>
+      </section>
+    </div>
   )
 }