feat: implement blog infrastructure, add SEO keyword planning, and create footer component

This commit is contained in:
Timo Knuth
2026-04-04 23:50:45 +02:00
parent 3143561d27
commit 8408159a96
7 changed files with 622 additions and 17 deletions

View File

@@ -115,11 +115,17 @@ export default function BlogPostPage({ params }: { params: { slug: string } }) {
)}
</header>
{post.heroImage && (
<div className="relative aspect-video w-full rounded-2xl overflow-hidden shadow-lg mb-10">
<Image src={post.heroImage} alt={post.imageAlt || post.title} fill className="object-cover" />
</div>
)}
{post.heroImage && (
<div className="relative aspect-video w-full rounded-2xl overflow-hidden shadow-lg mb-10">
<Image
src={post.heroImage}
alt={post.imageAlt || post.title}
fill
unoptimized={post.heroImage.endsWith('.svg')}
className="object-cover"
/>
</div>
)}
{/* AEO BLOCK: ANSWER */}
<div className="max-w-3xl mx-auto">

View File

@@ -92,15 +92,16 @@ export default function BlogPage() {
{publishedPosts.map((post) => (
<Link key={post.slug} href={`/blog/${post.slug}`}>
<Card hover className="h-full overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
<div className="relative h-56 overflow-hidden">
<Image
src={post.image}
alt={post.imageAlt || `${post.title} - QR code guide`}
width={800}
height={600}
className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
/>
</div>
<div className="relative h-56 overflow-hidden">
<Image
src={post.image}
alt={post.imageAlt || `${post.title} - QR code guide`}
width={800}
height={600}
unoptimized={post.image.endsWith('.svg')}
className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
/>
</div>
<CardHeader className="pb-3">
<div className="flex items-center justify-between mb-3">
<Badge variant="info">{post.category}</Badge>