60 lines
2.7 KiB
TypeScript
60 lines
2.7 KiB
TypeScript
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 (
|
|
<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>
|
|
)
|
|
}
|