feat(blog): resolve SEO cannibalization, update blog posts & clean up dev posts

greenlns-landing/app/blog/page.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Metadata } from 'next'
+import Image from 'next/image'
 import Link from 'next/link'
 import SeoNavbar from '@/components/seo/SeoNavbar'
 import SeoFooter from '@/components/seo/SeoFooter'
@@ -14,7 +15,22 @@ export const metadata: Metadata = {
   },
 }
 
+const readMoreLabel: Record<string, string> = {
+  en: 'Read Full Guide',
+  de: 'Ganzen Artikel lesen',
+  es: 'Leer la guía completa',
+}
+
+const languageBadge: Record<string, { label: string; flag: string }> = {
+  en: { label: 'EN', flag: '🇬🇧' },
+  de: { label: 'DE', flag: '🇩🇪' },
+  es: { label: 'ES', flag: '🇪🇸' },
+}
+
 export default function BlogIndexPage() {
+  // This index page's own chrome (hero copy) stays English, but every post —
+  // English, German, Spanish — is listed here with a small language badge so
+  // DE/ES posts are actually discoverable instead of living at an unlinked URL.
   const posts = Object.values(blogPosts)
 
   return (
@@ -46,7 +62,7 @@ export default function BlogIndexPage() {
 
           {/* Blog Cards Grid */}
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {posts.map((post) => (
+            {posts.map((post, index) => (
               <Link
                 key={post.slug}
                 href={`/blog/${post.slug}`}
@@ -54,15 +70,21 @@ export default function BlogIndexPage() {
               >
                 {/* Image */}
                 <div className="relative h-52 w-full overflow-hidden bg-emerald-950">
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  <img
+                  <Image
                     src={post.heroImage}
                     alt={post.heroImageAlt}
-                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                    fill
+                    priority={index < 3}
+                    loading={index < 3 ? undefined : 'lazy'}
+                    sizes="(min-width: 768px) 33vw, 100vw"
+                    className="object-cover group-hover:scale-105 transition-transform duration-500"
                   />
                   <div className="absolute top-4 left-4 bg-emerald-950/90 backdrop-blur-md px-3.5 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-wider text-emerald-300 border border-emerald-500/30">
                     {post.category}
                   </div>
+                  <div className="absolute top-4 right-4 bg-white/95 backdrop-blur-md px-2.5 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-wider text-emerald-900 border border-emerald-600/20 shadow-sm">
+                    {languageBadge[post.locale]?.flag ?? ''} {languageBadge[post.locale]?.label ?? post.locale}
+                  </div>
                 </div>
 
                 {/* Card Content */}
@@ -80,7 +102,7 @@ export default function BlogIndexPage() {
                   </div>
 
                   <div className="text-emerald-700 font-bold text-sm flex items-center gap-1.5 group-hover:translate-x-1 transition-transform">
-                    <span>Read Full Guide</span>
+                    <span>{readMoreLabel[post.locale] ?? readMoreLabel.en}</span>
                     <span>→</span>
                   </div>
                 </div>