wip

components/home/RecentPosts.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import Link from 'next/link';
+import { getAllPosts } from '@/lib/blog';
+import { getTranslations } from 'next-intl/server';
+import { Section, Container } from '../../components/ui';
+
+interface RecentPostsProps {
+  locale: string;
+}
+
+export default async function RecentPosts({ locale }: RecentPostsProps) {
+  const t = await getTranslations('Footer'); // Reusing recentPosts title from Footer or Index
+  const posts = await getAllPosts(locale);
+  const recentPosts = posts.slice(0, 3);
+
+  if (recentPosts.length === 0) return null;
+
+  return (
+    <Section className="bg-neutral-light py-24">
+      <Container>
+        <div className="flex items-center justify-between mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-text-primary">
+            {locale === 'de' ? 'Aktuelle Blogbeiträge' : 'Recent Blog Posts'}
+          </h2>
+          <Link href={`/${locale}/blog`} className="text-primary font-bold hover:underline">
+            {locale === 'de' ? 'Alle Beiträge ansehen' : 'View all posts'} &rarr;
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {recentPosts.map((post) => (
+            <Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all border border-neutral">
+              {post.frontmatter.featuredImage && (
+                <div className="relative h-48 overflow-hidden">
+                  <img 
+                    src={post.frontmatter.featuredImage} 
+                    alt={post.frontmatter.title}
+                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                  />
+                </div>
+              )}
+              <div className="p-6">
+                <div className="text-xs text-text-secondary mb-2">
+                  {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                  })}
+                </div>
+                <h3 className="text-xl font-bold text-text-primary group-hover:text-primary transition-colors line-clamp-2 mb-4">
+                  {post.frontmatter.title}
+                </h3>
+                <span className="text-primary text-sm font-bold inline-flex items-center">
+                  {locale === 'de' ? 'Weiterlesen' : 'Read more'} &rarr;
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </Container>
+    </Section>
+  );
+}