📄 Huge intl feature

app/[locale]/@breadcrumbs/about/page.tsx

@@ -0,0 +1,15 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+
+export default function AboutBreadcrumb() {
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Despre',
+          href: '/about',
+          current: true,
+        },
+      ]}
+    />
+  )
+}

app/[locale]/@breadcrumbs/blog/[...slug]/page.tsx

@@ -0,0 +1,53 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+import { getPostBySlug } from '@/lib/markdown'
+
+interface BreadcrumbItem {
+  label: string
+  href: string
+  current?: boolean
+}
+
+function formatDirectoryName(name: string): string {
+  const directoryNames: { [key: string]: string } = {
+    tech: 'Tehnologie',
+    design: 'Design',
+    tutorial: 'Tutoriale',
+  }
+
+  return directoryNames[name] || name.charAt(0).toUpperCase() + name.slice(1)
+}
+
+export default async function BlogPostBreadcrumb({
+  params,
+}: {
+  params: Promise<{ slug: string[] }>
+}) {
+  const { slug } = await params
+  const slugPath = slug.join('/')
+  const post = await getPostBySlug(slugPath)
+
+  const items: BreadcrumbItem[] = [
+    {
+      label: 'Blog',
+      href: '/blog',
+    },
+  ]
+
+  if (slug.length > 1) {
+    for (let i = 0; i < slug.length - 1; i++) {
+      const segmentPath = slug.slice(0, i + 1).join('/')
+      items.push({
+        label: formatDirectoryName(slug[i]),
+        href: `/blog/${segmentPath}`,
+      })
+    }
+  }
+
+  items.push({
+    label: post ? post.frontmatter.title : slug[slug.length - 1],
+    href: `/blog/${slugPath}`,
+    current: true,
+  })
+
+  return <Breadcrumbs items={items} />
+}

app/[locale]/@breadcrumbs/blog/page.tsx

@@ -0,0 +1,15 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+
+export default function BlogBreadcrumb() {
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Blog',
+          href: '/blog',
+          current: true,
+        },
+      ]}
+    />
+  )
+}

app/[locale]/@breadcrumbs/default.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+
+export default function DefaultBreadcrumb() {
+  return <Breadcrumbs />
+}

app/[locale]/@breadcrumbs/tags/[tag]/page.tsx

@@ -0,0 +1,25 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+
+export default async function TagBreadcrumb({ params }: { params: Promise<{ tag: string }> }) {
+  const { tag } = await params
+  const tagName = tag
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Tag-uri',
+          href: '/tags',
+        },
+        {
+          label: tagName,
+          href: `/tags/${tag}`,
+          current: true,
+        },
+      ]}
+    />
+  )
+}

app/[locale]/@breadcrumbs/tags/page.tsx

@@ -0,0 +1,15 @@
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+
+export default function TagsBreadcrumb() {
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Tag-uri',
+          href: '/tags',
+          current: true,
+        },
+      ]}
+    />
+  )
+}

app/[locale]/about/page.tsx

@@ -0,0 +1,259 @@
+import { Metadata } from 'next'
+import { Navbar } from '@/components/blog/navbar'
+import {setRequestLocale} from 'next-intl/server'
+
+export const metadata: Metadata = {
+  title: 'About',
+  description: 'Learn more about me and this blog',
+}
+
+type Props = {
+  params: Promise<{locale: string}>
+}
+
+export default async function AboutPage({params}: Props) {
+  const {locale} = await params
+  setRequestLocale(locale)
+  return (
+    <>
+      <Navbar />
+      <div className="min-h-screen bg-[rgb(var(--bg-primary))]">
+        <div className="max-w-4xl mx-auto px-6 py-16">
+          {/* Classification Header */}
+          <div className="border-2 border-[rgb(var(--border-primary))] p-8 mb-10">
+            <p className="text-[rgb(var(--text-muted))] font-mono text-xs uppercase tracking-widest mb-4">
+              &gt;&gt; _DOC://PUBLIC_ACCESS
+            </p>
+            <h1 className="text-4xl md:text-5xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] tracking-tight">
+              ABOUT ME_
+            </h1>
+          </div>
+
+          {/* Main Content */}
+          <div className="space-y-8">
+            {/* Introduction Section */}
+            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
+              <div className="border-l-4 border-[var(--neon-cyan)] pl-6">
+                <p className="font-mono text-base text-[rgb(var(--text-primary))] leading-relaxed mb-4">
+                  Welcome to my corner of the internet! This is where I share my thoughts, opinions,
+                  and experiences - from tech adventures to life as a family man. Yes, I love
+                  technology, but there&apos;s so much more to life than just code and servers.
+                </p>
+                <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider">
+                  STATUS: ACTIVE // ROLE: DAD + DEV + LIFE ENTHUSIAST
+                </p>
+              </div>
+            </section>
+
+            {/* Life & Values Section */}
+            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
+              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
+                &gt; LIFE & VALUES
+              </h2>
+              <div className="space-y-4">
+                <div className="border-l-4 border-[var(--neon-pink)] pl-6">
+                  <h3 className="font-mono text-sm font-bold text-[var(--neon-pink)] uppercase mb-2">
+                    [FAMILY FIRST]
+                  </h3>
+                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    Being a dad to an amazing toddler is my most important role. Family time is
+                    sacred - whether it&apos;s building block towers, exploring parks, or just
+                    enjoying the chaos of everyday life together. Tech can wait; these moments
+                    can&apos;t.
+                  </p>
+                </div>
+                <div className="border-l-4 border-[var(--neon-cyan)] pl-6">
+                  <h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
+                    [ACTIVE LIFESTYLE]
+                  </h3>
+                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    I believe in keeping the body active. Whether it&apos;s hitting the gym, playing
+                    sports, or just staying on the move - physical activity keeps me sharp,
+                    balanced, and ready for whatever life throws my way.
+                  </p>
+                </div>
+                <div className="border-l-4 border-[var(--neon-green)] pl-6">
+                  <h3 className="font-mono text-sm font-bold text-[var(--neon-green)] uppercase mb-2">
+                    [ENJOYING THE SIMPLE THINGS]
+                  </h3>
+                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    Life&apos;s too short not to enjoy it. A good drink, a relaxing
+                    evening after a long day, or just not doing anything a blowing some steam off.
+                  </p>
+                </div>
+                <div className="border-l-4 border-[var(--neon-orange)] pl-6">
+                  <h3 className="font-mono text-sm font-bold text-[var(--neon-orange)] uppercase mb-2">
+                    [TECH WITH PURPOSE]
+                  </h3>
+                  <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    Yes, I love tech - self-hosting, privacy, tinkering with hardware. But it&apos;s
+                    a tool, not a lifestyle. Tech should serve life, not the other way around.
+                  </p>
+                </div>
+              </div>
+            </section>
+
+            {/* Content Section */}
+            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
+              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
+                &gt; WHAT YOU&apos;LL FIND HERE
+              </h2>
+              <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
+                CONTENT SCOPE // EVERYTHING FROM TECH TO LIFE
+              </p>
+              <ul className="space-y-3">
+                <li className="flex items-start gap-3">
+                  <span className="text-[var(--neon-pink)] font-mono font-bold">&gt;</span>
+                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    <strong>Thoughts & Opinions</strong> - My take on life, work, and everything in
+                    between
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-[var(--neon-pink)] font-mono font-bold">&gt;</span>
+                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    <strong>Life & Family</strong> - Adventures in parenting, sports, and enjoying
+                    the simple things
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
+                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    <strong>Tech Research</strong> - When I dive into interesting technologies and
+                    experiments
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
+                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    <strong>System Administration</strong> - Self-hosting, infrastructure, and
+                    DevOps adventures
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
+                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    <strong>Development Insights</strong> - Lessons learned from building software
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-[var(--neon-green)] font-mono font-bold">&gt;</span>
+                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    <strong>Random Stuff</strong> - Because life doesn&apos;t fit into neat
+                    categories!
+                  </span>
+                </li>
+              </ul>
+            </section>
+
+            {/* Areas of Focus Section */}
+            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
+              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
+                &gt; AREAS OF FOCUS
+              </h2>
+              <div className="grid md:grid-cols-2 gap-4">
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-xs font-bold text-[var(--neon-pink)] uppercase mb-2">
+                    [BEING A DAD]
+                  </h3>
+                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
+                    Playing with my boy, teaching moments, watching him grow, building memories
+                    together
+                  </p>
+                </div>
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
+                    [STAYING ACTIVE]
+                  </h3>
+                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
+                    Gym sessions, sports, keeping fit, maintaining energy for life&apos;s demands
+                  </p>
+                </div>
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-xs font-bold text-[var(--neon-green)] uppercase mb-2">
+                    [TECHNOLOGY & SYSTEMS]
+                  </h3>
+                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
+                    Software development, infrastructure, DevOps, self-hosting adventures
+                  </p>
+                </div>
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-xs font-bold text-[var(--neon-orange)] uppercase mb-2">
+                    [LIFE BALANCE]
+                  </h3>
+                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
+                    Relaxing with good company, enjoying downtime, appreciating the simple moments
+                  </p>
+                </div>
+              </div>
+            </section>
+            {/* Tech Stack Section */}
+            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
+              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
+                &gt; TECH STACK
+              </h2>
+              <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
+                TOOLS I USE // WHEN NEEDED
+              </p>
+              <div className="grid md:grid-cols-2 gap-4">
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
+                    [DEVELOPMENT]
+                  </h3>
+                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
+                    .NET, Golang, TypeScript, Next.js, React
+                  </p>
+                </div>
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
+                    [INFRASTRUCTURE]
+                  </h3>
+                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
+                    Windows Server, Linux, Docker, Hyper-V
+                  </p>
+                </div>
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
+                    [DESIGN]
+                  </h3>
+                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
+                    Tailwind CSS, Markdown, Terminal aesthetics
+                  </p>
+                </div>
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-xs font-bold text-[var(--neon-cyan)] uppercase mb-2">
+                    [SELF-HOSTING]
+                  </h3>
+                  <p className="font-mono text-xs text-[rgb(var(--text-primary))] leading-relaxed">
+                    Home lab, privacy-focused services, full control, Git server
+                  </p>
+                </div>
+              </div>
+            </section>
+            {/* Contact Section */}
+            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
+              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
+                &gt; CONTACT
+              </h2>
+              <div className="border-l-4 border-[var(--neon-pink)] pl-6">
+                {/* <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed mb-4">
+                  You can reach me at{' '}
+                  <a
+                    href="mailto:email@example.com"
+                    className="text-[var(--neon-cyan)] hover:text-[var(--neon-pink)] underline transition-colors"
+                  >
+                    email@example.com
+                  </a>{' '}
+                  or find me on social media.
+                </p> */}
+                {/* <p className="font-mono text-xs text-[rgb(var(--text-muted))] uppercase tracking-wider">
+                  RESPONSE TIME: &lt; 24H // STATUS: MONITORED
+                </p> */}
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

app/[locale]/blog/[...slug]/not-found.tsx

@@ -0,0 +1,32 @@
+import { useTranslations } from 'next-intl'
+import { Link } from '@/i18n/navigation'
+
+export default function NotFound() {
+  const t = useTranslations('NotFound')
+
+  return (
+    <div className="min-h-[60vh] flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-gray-300 dark:text-gray-700 mb-4">404</h1>
+        <h2 className="text-2xl font-semibold mb-4">{t('title')}</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-8">
+          {t('description')}
+        </p>
+        <div className="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"
+          >
+            {t('goHome')}
+          </Link>
+          <Link
+            href="/"
+            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"
+          >
+            {t('goHome')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

app/[locale]/blog/[...slug]/page.tsx

@@ -0,0 +1,225 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { Link } from '@/src/i18n/navigation'
+import { getAllPosts, getPostBySlug, getRelatedPosts } from '@/lib/markdown'
+import { formatDate, formatRelativeDate } from '@/lib/utils'
+import { TableOfContents } from '@/components/blog/table-of-contents'
+import { ReadingProgress } from '@/components/blog/reading-progress'
+import { StickyFooter } from '@/components/blog/sticky-footer'
+import MarkdownRenderer from '@/components/blog/markdown-renderer'
+import { setRequestLocale } from 'next-intl/server'
+import { routing } from '@/src/i18n/routing'
+
+export async function generateStaticParams() {
+  const locales = ['en', 'ro']
+  const allParams: Array<{ locale: string; slug: string[] }> = []
+
+  for (const locale of locales) {
+    const posts = await getAllPosts(locale)
+    posts.forEach(post => {
+      allParams.push({ locale, slug: post.slug.split('/') })
+    })
+  }
+  return allParams
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string[] }>
+}): Promise<Metadata> {
+  const { slug, locale } = await params
+  const slugPath = slug.join('/')
+  const post = await getPostBySlug(slugPath, locale)
+
+  if (!post) {
+    return { title: 'Articol negăsit' }
+  }
+
+  return {
+    title: post.frontmatter.title,
+    description: post.frontmatter.description,
+    authors: [{ name: post.frontmatter.author }],
+    openGraph: {
+      title: post.frontmatter.title,
+      description: post.frontmatter.description,
+      type: 'article',
+      publishedTime: post.frontmatter.date,
+      authors: [post.frontmatter.author],
+      images: post.frontmatter.image ? [post.frontmatter.image] : [],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: post.frontmatter.title,
+      description: post.frontmatter.description,
+      images: post.frontmatter.image ? [post.frontmatter.image] : [],
+    },
+  }
+}
+
+function extractHeadings(content: string) {
+  const headingRegex = /^(#{2,3})\s+(.+)$/gm
+  const headings: { id: string; text: string; level: number }[] = []
+  let match
+
+  while ((match = headingRegex.exec(content)) !== null) {
+    const level = match[1].length
+    const text = match[2]
+    const id = text
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/(^-|-$)/g, '')
+    headings.push({ id, text, level })
+  }
+
+  return headings
+}
+
+export default async function BlogPostPage({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string[] }>
+}) {
+  const { slug, locale } = await params
+  const slugPath = slug.join('/')
+  const post = await getPostBySlug(slugPath, locale)
+
+  if (!post) {
+    notFound()
+  }
+
+  const relatedPosts = await getRelatedPosts(slugPath)
+  const headings = extractHeadings(post.content)
+  const fullUrl = `${process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3030'}/blog/${slugPath}`
+
+  return (
+    <>
+      <ReadingProgress />
+
+      <div className="max-w-7xl mx-auto px-6 py-16">
+        <div className="flex gap-12">
+          <TableOfContents headings={headings} />
+
+          <article className="flex-1 min-w-0">
+            <header className="mb-16 border border-[var(--neon-cyan)] bg-[rgb(var(--bg-primary))] p-8 relative">
+              <div className="border-b border-[var(--neon-pink)] pb-4 mb-6 relative">
+                <div className="flex items-center gap-3 mb-3 justify-end">
+                  <p className="font-mono text-xs text-[var(--neon-cyan)] uppercase tracking-widest">
+                    &gt;&gt; _DOC://PUBLIC_ACCESS
+                  </p>
+                  <div className="flex gap-1.5">
+                    <div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-red-500/10 cursor-pointer" />
+                    <div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-yellow-500/10 cursor-pointer" />
+                    <div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-green-500/10 cursor-pointer" />
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-2 mb-2">
+                  {post.frontmatter.tags.map((tag: string) => (
+                    <Link
+                      key={tag}
+                      href={`/tags/${tag}`}
+                      className="px-3 py-1 bg-cyan-500/5 border border-[var(--neon-cyan)] text-cyan-400 text-xs font-mono uppercase shadow-[0_0_8px_rgba(90,139,149,0.3)] hover:shadow-[0_0_12px_rgba(90,139,149,0.5)] transition-all"
+                    >
+                      #{tag}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+
+              <div className="border-l border-[var(--neon-magenta)] pl-6 relative">
+                <h1 className="text-4xl md:text-5xl font-mono font-bold text-[var(--neon-cyan)] uppercase tracking-tight leading-tight mb-6">
+                  {post.frontmatter.title}
+                </h1>
+
+                <p className="text-lg text-[rgb(var(--text-secondary))] leading-relaxed mb-6 font-mono">
+                  <span className="text-[var(--neon-pink)]">&gt;&gt;</span>{' '}
+                  {post.frontmatter.description}
+                </p>
+              </div>
+
+              <div className="flex items-center gap-4 pt-6 border-t border-[var(--neon-purple)] relative">
+                <div className="w-12 h-12 border border-[var(--neon-cyan)] bg-[rgb(var(--bg-secondary))] flex items-center justify-center">
+                  <span className="font-mono text-[var(--neon-cyan)] text-xs">
+                    {post.frontmatter.author.charAt(0).toUpperCase()}
+                  </span>
+                </div>
+                <div>
+                  <p className="font-mono font-bold text-[var(--neon-cyan)] uppercase text-sm">
+                    {post.frontmatter.author}
+                  </p>
+                  <div className="flex items-center gap-2 text-xs text-[rgb(var(--text-muted))] font-mono">
+                    <time className="text-[var(--neon-magenta)]">
+                      {formatDate(post.frontmatter.date)}
+                    </time>
+                    <span className="text-[var(--neon-pink)]">//</span>
+                    <span className="text-[var(--neon-cyan)]">{post.readingTime}min READ</span>
+                  </div>
+                </div>
+              </div>
+            </header>
+
+            {post.frontmatter.image && (
+              <div className="relative aspect-video mb-16 border border-[var(--neon-pink)] overflow-hidden">
+                <img
+                  src={post.frontmatter.image}
+                  alt={post.frontmatter.title}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            )}
+
+            <div className="prose prose-invert prose-lg max-w-none cyberpunk-prose">
+              <MarkdownRenderer content={post.content} />
+            </div>
+
+            {relatedPosts.length > 0 && (
+              <section className="mt-12 pt-8 border-t border-zinc-800">
+                <h2 className="text-2xl font-mono font-bold uppercase text-[var(--neon-cyan)] mb-6">
+                  // Articole similare
+                </h2>
+                <div className="grid gap-6 md:grid-cols-3">
+                  {relatedPosts.map(relatedPost => (
+                    <Link
+                      key={relatedPost.slug}
+                      href={`/blog/${relatedPost.slug}`}
+                      className="block p-4 border border-zinc-800 bg-zinc-950 hover:border-[var(--neon-cyan)] transition-all hover:shadow-[0_0_8px_rgba(90,139,149,0.2)]"
+                    >
+                      <h3 className="font-mono font-semibold text-cyan-400 mb-2 line-clamp-2">
+                        {relatedPost.frontmatter.title}
+                      </h3>
+                      <p className="text-sm text-zinc-400 line-clamp-2">
+                        {relatedPost.frontmatter.description}
+                      </p>
+                      <p className="text-xs text-zinc-600 mt-2 font-mono">
+                        {formatDate(relatedPost.frontmatter.date)}
+                      </p>
+                    </Link>
+                  ))}
+                </div>
+              </section>
+            )}
+
+            <nav className="flex justify-between items-center mt-12 pt-8 border-t border-zinc-800">
+              <Link
+                href="/blog"
+                className="flex items-center text-[var(--neon-pink)] hover:text-[var(--neon-magenta)] transition-all font-mono text-sm uppercase border border-[var(--neon-pink)] px-4 py-2 hover:shadow-[0_0_6px_rgba(155,90,110,0.3)]"
+              >
+                <svg className="mr-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                [BACK TO BLOG]
+              </Link>
+            </nav>
+          </article>
+        </div>
+      </div>
+
+      <StickyFooter url={fullUrl} title={post.frontmatter.title} />
+    </>
+  )
+}

app/[locale]/blog/blog-client.tsx

@@ -0,0 +1,175 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { Post } from '@/lib/types/frontmatter'
+import { BlogCard } from '@/components/blog/blog-card'
+import { SearchBar } from '@/components/blog/search-bar'
+import { SortDropdown } from '@/components/blog/sort-dropdown'
+import { TagFilter } from '@/components/blog/tag-filter'
+import { Navbar } from '@/components/blog/navbar'
+
+interface BlogPageClientProps {
+  posts: Post[]
+  allTags: string[]
+}
+
+type SortOption = 'newest' | 'oldest' | 'title'
+
+export default function BlogPageClient({ posts, allTags }: BlogPageClientProps) {
+  const t = useTranslations('BlogListing')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [sortBy, setSortBy] = useState<SortOption>('newest')
+  const [currentPage, setCurrentPage] = useState(1)
+  const postsPerPage = 9
+
+  const filteredAndSortedPosts = useMemo(() => {
+    const result = posts.filter(post => {
+      const matchesSearch =
+        searchQuery === '' ||
+        post.frontmatter.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        post.frontmatter.description.toLowerCase().includes(searchQuery.toLowerCase())
+
+      const matchesTags =
+        selectedTags.length === 0 || selectedTags.every(tag => post.frontmatter.tags.includes(tag))
+
+      return matchesSearch && matchesTags
+    })
+
+    result.sort((a, b) => {
+      switch (sortBy) {
+        case 'oldest':
+          return new Date(a.frontmatter.date).getTime() - new Date(b.frontmatter.date).getTime()
+        case 'title':
+          return a.frontmatter.title.localeCompare(b.frontmatter.title)
+        case 'newest':
+        default:
+          return new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime()
+      }
+    })
+
+    return result
+  }, [posts, searchQuery, selectedTags, sortBy])
+
+  const totalPages = Math.ceil(filteredAndSortedPosts.length / postsPerPage)
+  const paginatedPosts = filteredAndSortedPosts.slice(
+    (currentPage - 1) * postsPerPage,
+    currentPage * postsPerPage
+  )
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags(prev => (prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]))
+    setCurrentPage(1)
+  }
+
+  return (
+    <div className="min-h-screen bg-[rgb(var(--bg-primary))]">
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        {/* Header */}
+        <div className="border-l border-[var(--neon-cyan)] pl-6 mb-12">
+          <p className="font-mono text-xs text-[rgb(var(--text-muted))] uppercase tracking-widest mb-2">
+            {t("subtitle")}
+          </p>
+          <h1 className="text-4xl md:text-6xl font-mono font-bold text-[rgb(var(--text-primary))] uppercase tracking-tight">
+            &gt; {t("title")}_
+          </h1>
+        </div>
+
+        {/* Search Bar */}
+        <div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6 mb-8">
+          <div className="flex flex-col lg:flex-row gap-4">
+            <SearchBar
+              searchQuery={searchQuery}
+              onSearchChange={value => {
+                setSearchQuery(value)
+                setCurrentPage(1)
+              }}
+            />
+            <SortDropdown sortBy={sortBy} onSortChange={setSortBy} />
+          </div>
+        </div>
+
+        {/* Tag Filters */}
+        <TagFilter
+          allTags={allTags}
+          selectedTags={selectedTags}
+          onToggleTag={toggleTag}
+          onClearTags={() => {
+            setSelectedTags([])
+            setCurrentPage(1)
+          }}
+        />
+
+        {/* Results Count */}
+        <div className="mb-6">
+          <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase">
+            {t("foundPosts", {count: filteredAndSortedPosts.length})}{' '}
+            
+          </p>
+        </div>
+
+        {/* Blog Grid */}
+        {paginatedPosts.length > 0 ? (
+          <div className="grid gap-8 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 mb-12">
+            {paginatedPosts.map((post, index) => {
+              const hasImage = !!post.frontmatter.image
+              let variant: 'image-top' | 'image-side' | 'text-only'
+
+              if (!hasImage) {
+                variant = 'text-only'
+              } else {
+                variant = index % 3 === 1 ? 'image-side' : 'image-top'
+              }
+
+              return <BlogCard key={post.slug} post={post} variant={variant} />
+            })}
+          </div>
+        ) : (
+          <div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-12 text-center">
+            <p className="font-mono text-lg text-[rgb(var(--text-muted))] uppercase">
+              {t("noPosts")}
+            </p>
+          </div>
+        )}
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6">
+            <div className="flex items-center justify-between">
+              <button
+                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+                className="px-6 py-3 font-mono text-sm uppercase border border-[rgb(var(--border-primary))] text-[rgb(var(--text-primary))] disabled:opacity-30 disabled:cursor-not-allowed hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)] transition-colors cursor-pointer"
+              >
+                &lt; PREV
+              </button>
+              <div className="flex items-center gap-2">
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
+                  <button
+                    key={page}
+                    onClick={() => setCurrentPage(page)}
+                    className={`w-12 h-12 font-mono text-sm border transition-colors cursor-pointer ${
+                      currentPage === page
+                        ? 'bg-[var(--neon-cyan)] border-[var(--neon-cyan)] text-white'
+                        : 'border-[rgb(var(--border-primary))] text-[rgb(var(--text-muted))] hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)]'
+                    }`}
+                  >
+                    {String(page).padStart(2, '0')}
+                  </button>
+                ))}
+              </div>
+              <button
+                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+                className="px-6 py-3 font-mono text-sm uppercase border border-[rgb(var(--border-primary))] text-[rgb(var(--text-primary))] disabled:opacity-30 disabled:cursor-not-allowed hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)] transition-colors cursor-pointer"
+              >
+                NEXT &gt;
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

app/[locale]/blog/layout.tsx

@@ -0,0 +1,16 @@
+import { Metadata } from 'next'
+import { Navbar } from '@/components/blog/navbar'
+
+export const metadata: Metadata = {
+  title: 'Blog',
+  description: 'Toate articolele din blog',
+}
+
+export default function BlogLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  )
+}

app/[locale]/blog/page.tsx

@@ -0,0 +1,10 @@
+import { getAllPosts } from '@/lib/markdown'
+import BlogPageClient from './blog-client'
+import {setRequestLocale} from 'next-intl/server'
+
+export default async function BlogPage() {
+  const posts = await getAllPosts()
+  const allTags = Array.from(new Set(posts.flatMap(post => post.frontmatter.tags))).sort()
+
+  return <BlogPageClient posts={posts} allTags={allTags} />
+}

app/[locale]/layout.tsx

@@ -0,0 +1,35 @@
+import {notFound} from 'next/navigation'
+import {setRequestLocale} from 'next-intl/server'
+import {routing} from '@/src/i18n/routing'
+import {ReactNode} from 'react'
+
+type Props = {
+  children: ReactNode
+  breadcrumbs: ReactNode
+  params: Promise<{locale: string}>
+}
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({locale}))
+}
+
+export default async function LocaleLayout({
+  children,
+  breadcrumbs,
+  params
+}: Props) {
+  const {locale} = await params
+  
+  if (!routing.locales.includes(locale as any)) {
+    notFound()
+  }
+
+  setRequestLocale(locale)
+
+  return (
+    <>
+      {breadcrumbs}
+      <main>{children}</main>
+    </>
+  )
+}

app/[locale]/page.tsx

@@ -0,0 +1,240 @@
+import {Link} from '@/src/i18n/navigation'
+import Image from 'next/image'
+import { getAllPosts } from '@/lib/markdown'
+import { formatDate } from '@/lib/utils'
+import { ThemeToggle } from '@/components/theme-toggle'
+import {setRequestLocale} from 'next-intl/server'
+
+export default async function HomePage() {
+  const allPosts = await getAllPosts()
+  const featuredPosts = allPosts.slice(0, 6)
+
+  return (
+    <main className="min-h-screen bg-zinc-50 dark:bg-zinc-900 transition-colors duration-300">
+      {/* Hero Section - from worktree-agent-2 */}
+      <section className="relative min-h-screen flex items-center justify-center bg-zinc-100 dark:bg-zinc-900 overflow-hidden transition-colors duration-300">
+        <div className="absolute inset-0 grid-bg opacity-10"></div>
+        <div className="absolute inset-0 scanline"></div>
+        <div className="absolute inset-0 noise-bg"></div>
+
+        <div className="relative z-10 max-w-5xl mx-auto px-6 w-full">
+          <div className="border-4 border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-900/80 p-8 md:p-12 transition-colors duration-300">
+            {/* Logo */}
+            <div className="mb-8 flex items-center justify-between border-b-2 border-slate-300 dark:border-slate-800 pb-4">
+              <div className="flex items-center gap-3">
+                <Image src="/logo.png" alt="Logo" width={32} height={32} className="opacity-80" />
+                <span className="font-mono text-xs text-slate-500 uppercase tracking-widest">
+                  TERMINAL:// V2.0
+                </span>
+              </div>
+              <div className="flex gap-4 items-center">
+                <Link
+                  href="/blog"
+                  className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400"
+                >
+                  [BLOG]
+                </Link>
+                <Link
+                  href="/about"
+                  className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400"
+                >
+                  [ABOUT]
+                </Link>
+                <ThemeToggle />
+              </div>
+            </div>
+
+            <div className="border-l-4 border-cyan-700 dark:border-cyan-900 pl-6 mb-8">
+              <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
+                DOCUMENT LEVEL-1 //
+              </p>
+              <h1 className="text-4xl md:text-6xl lg:text-7xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight mb-6">
+                BUILD. WRITE.
+                <br />
+                SHARE.
+              </h1>
+              <p className="text-base md:text-lg lg:text-xl text-slate-700 dark:text-slate-400 font-mono leading-relaxed max-w-2xl">
+                &gt; Explore ideas
+              </p>
+            </div>
+
+            <div className="flex gap-4 flex-wrap mt-12">
+              <Link
+                href="/blog"
+                className="px-6 md:px-8 py-3 md:py-4 bg-cyan-700 dark:bg-cyan-900 text-white dark:text-slate-100 border-2 border-cyan-600 dark:border-cyan-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-cyan-600 dark:hover:bg-cyan-800 hover:border-cyan-500 dark:hover:border-cyan-600 rounded-none transition-colors duration-200"
+              >
+                [CHECK POSTS]
+              </Link>
+              <Link
+                href="/about"
+                className="px-6 md:px-8 py-3 md:py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 rounded-none transition-colors duration-200"
+              >
+                [ABOUT ME]
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Featured Posts Grid - from worktree-agent-1 */}
+      <section className="py-24 bg-zinc-100 dark:bg-slate-900 border-t-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="border-l-4 border-emerald-700 dark:border-emerald-900 pl-6 mb-12">
+            <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
+              ARCHIVE ACCESS // RECENT ENTRIES
+            </p>
+            <h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight">
+              &gt; RECENT ENTRIES
+            </h2>
+          </div>
+
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            {featuredPosts.map((post, index) => (
+              <article
+                key={post.slug}
+                className="group relative bg-white dark:bg-slate-900 border-4 border-slate-300 dark:border-slate-700 overflow-hidden hover:border-cyan-700 dark:hover:border-cyan-900 transition-colors duration-300"
+              >
+                <div className="aspect-video relative overflow-hidden bg-zinc-200 dark:bg-zinc-900">
+                  {post.frontmatter.image ? (
+                    <Image
+                      src={post.frontmatter.image}
+                      alt={post.frontmatter.title}
+                      fill
+                      className="object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
+                    />
+                  ) : (
+                    <div className="w-full h-full bg-zinc-300 dark:bg-zinc-800 flex items-center justify-center">
+                      <span className="font-mono text-6xl text-slate-400 dark:text-slate-700">
+                        #{String(index + 1).padStart(2, '0')}
+                      </span>
+                    </div>
+                  )}
+                  <div className="absolute inset-0 bg-zinc-100/60 dark:bg-zinc-900/60"></div>
+                  <div className="absolute top-0 left-0 right-0 bg-white/90 dark:bg-slate-900 border-b-2 border-slate-300 dark:border-slate-700 px-4 py-2">
+                    <span className="font-mono text-xs text-cyan-600 dark:text-cyan-400 uppercase tracking-wider">
+                      FILE#{String(index + 1).padStart(3, '0')} // {post.frontmatter.category}
+                    </span>
+                  </div>
+                </div>
+                <div className="p-6 border-t-4 border-slate-300 dark:border-slate-800">
+                  <div className="border-l-4 border-emerald-700 dark:border-emerald-900 pl-4">
+                    <h3 className="text-xl font-mono font-bold text-slate-900 dark:text-slate-100 mb-3 uppercase tracking-tight">
+                      {post.frontmatter.title}
+                    </h3>
+                    <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-4 font-mono">
+                      {post.frontmatter.description}
+                    </p>
+                    <div className="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-500 font-mono mb-4">
+                      <span>{formatDate(post.frontmatter.date)}</span>
+                      <span>//</span>
+                      <span>{post.readingTime} MIN</span>
+                    </div>
+                  </div>
+                  <Link
+                    href={`/blog/${post.slug}`}
+                    className="inline-flex items-center text-cyan-600 dark:text-cyan-400 font-mono text-xs font-bold uppercase tracking-wider hover:text-cyan-500 dark:hover:text-cyan-300 border-2 border-slate-400 dark:border-slate-700 px-4 py-2 hover:border-cyan-700 dark:hover:border-cyan-900 transition-colors duration-200"
+                  >
+                    [ACCESEAZĂ] &gt;&gt;
+                  </Link>
+                </div>
+              </article>
+            ))}
+          </div>
+
+          <div className="mt-12 flex gap-4 justify-center flex-wrap">
+            {allPosts.length > 6 && (
+              <Link
+                href="/blog"
+                className="inline-flex items-center px-8 py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 transition-colors duration-200"
+              >
+                [SEE POSTS] &gt;&gt;
+              </Link>
+            )}
+            <Link
+              href="/tags"
+              className="inline-flex items-center px-8 py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 transition-colors duration-200"
+            >
+              [SEE ALL TAGS] &gt;&gt;
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats Section - from worktree-agent-1 */}
+      {/* <section className="py-24 bg-zinc-50 dark:bg-zinc-900 border-y-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="border-l-4 border-teal-700 dark:border-teal-900 pl-6 mb-12">
+            <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
+              SYSTEM STATISTICS // DATABASE METRICS
+            </p>
+            <h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight">
+              &gt; METRICS
+            </h2>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
+              <div className="text-6xl font-mono font-bold text-cyan-600 dark:text-cyan-400 mb-4">
+                {allPosts.length}+
+              </div>
+              <p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
+                PUBLISHED
+              </p>
+            </div>
+
+            <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
+              <div className="text-6xl font-mono font-bold text-emerald-600 dark:text-emerald-400 mb-4">
+                50K+
+              </div>
+              <p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
+                CITITORI LUNARI
+              </p>
+            </div>
+
+            <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
+              <div className="text-6xl font-mono font-bold text-teal-600 dark:text-teal-400 mb-4">
+                99%
+              </div>
+              <p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
+                SATISFACȚIE
+              </p>
+            </div>
+          </div>
+        </div>
+      </section> */}
+
+      {/* Newsletter CTA - from worktree-agent-1 */}
+      {/* <section className="py-24 bg-zinc-100 dark:bg-slate-900 border-t-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
+        <div className="max-w-3xl mx-auto px-6">
+          <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-zinc-900 p-12 transition-colors duration-300">
+            <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
+              NEWSLETTER SUBSCRIPTION
+            </p>
+            <h2 className="text-3xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase mb-4">
+              &gt; RĂMÂI LA CURENT_
+            </h2>
+            <p className="text-slate-700 dark:text-slate-400 font-mono text-sm mb-8 border-l-2 border-cyan-700 dark:border-cyan-900 pl-4">
+              Primește cele mai noi articole direct în inbox
+            </p>
+            <form className="flex gap-0 flex-col sm:flex-row border-2 border-slate-400 dark:border-slate-700">
+              <input
+                type="email"
+                placeholder="email@exemplu.com"
+                className="flex-1 px-6 py-4 bg-zinc-100 dark:bg-slate-800 text-slate-900 dark:text-white font-mono border-b-2 sm:border-b-0 sm:border-r-2 border-slate-400 dark:border-slate-700 focus:bg-zinc-200 dark:focus:bg-slate-750 focus:outline-none placeholder:text-slate-400 dark:placeholder:text-slate-600 transition-colors duration-200"
+              />
+              <button
+                type="submit"
+                className="px-8 py-4 bg-cyan-700 dark:bg-cyan-900 text-white dark:text-slate-100 font-mono font-bold uppercase text-sm tracking-wider hover:bg-cyan-600 dark:hover:bg-cyan-800 whitespace-nowrap border-t-2 sm:border-t-0 sm:border-l-2 border-cyan-600 dark:border-cyan-700 transition-colors duration-200"
+              >
+                [ABONEAZĂ-TE]
+              </button>
+            </form>
+            <p className="text-slate-500 dark:text-slate-600 font-mono text-xs mt-4 uppercase">
+              // Fără spam. Dezabonare oricând.
+            </p>
+          </div>
+        </div>
+      </section> */}
+    </main>
+  )
+}

app/[locale]/tags/[tag]/not-found.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+
+export default function TagNotFound() {
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center">
+      <div className="max-w-2xl mx-auto px-6">
+        <div className="border-4 border-red-900 bg-red-950 p-12 text-center">
+          <div className="border-2 border-red-800 bg-red-900 p-4 mb-6 inline-block">
+            <p className="font-mono text-6xl font-bold text-red-400">404</p>
+          </div>
+          <p className="font-mono text-xs text-red-600 uppercase tracking-widest mb-2">
+            ERROR: TAG NOT FOUND
+          </p>
+          <h1 className="font-mono text-3xl font-bold uppercase mb-4 text-red-400">
+            TAG DOES NOT EXIST
+          </h1>
+          <p className="font-mono text-sm text-red-300 mb-8 max-w-md mx-auto">
+            &gt; THE REQUESTED TAG COULD NOT BE LOCATED IN THE DATABASE
+            <br />
+            &gt; IT MAY HAVE BEEN REMOVED OR NEVER EXISTED
+          </p>
+          <div className="flex gap-4 justify-center flex-wrap">
+            <Link
+              href="/tags"
+              className="inline-block px-6 py-3 font-mono text-xs uppercase border-2 border-cyan-400 bg-cyan-900 text-cyan-100 hover:bg-cyan-800 transition"
+            >
+              &gt; VIEW ALL TAGS
+            </Link>
+            <Link
+              href="/blog"
+              className="inline-block px-6 py-3 font-mono text-xs uppercase border-2 border-slate-600 bg-slate-900 text-slate-300 hover:bg-slate-800 transition"
+            >
+              &gt; VIEW ALL POSTS
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/[locale]/tags/[tag]/page.tsx

@@ -0,0 +1,179 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import {Link} from '@/src/i18n/navigation'
+import { getAllTags, getPostsByTag, getTagInfo, getRelatedTags } from '@/lib/tags'
+import { TagList } from '@/components/blog/tag-list'
+import { formatDate } from '@/lib/utils'
+import {setRequestLocale} from 'next-intl/server'
+import {routing} from '@/src/i18n/routing'
+
+export async function generateStaticParams() {
+  const tags = await getAllTags()
+  return tags.map(tag => ({ tag: tag.slug }))
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string; tag: string }>
+}): Promise<Metadata> {
+  const { tag } = await params
+  const tagInfo = await getTagInfo(tag)
+
+  if (!tagInfo) {
+    return { title: 'Tag negăsit' }
+  }
+
+  return {
+    title: `Tag: ${tagInfo.name}`,
+    description: `Articole marcate cu #${tagInfo.name}. ${tagInfo.count} articole disponibile.`,
+    openGraph: {
+      title: `Tag: ${tagInfo.name}`,
+      description: `Explorează ${tagInfo.count} articole despre ${tagInfo.name}`,
+    },
+  }
+}
+
+function PostCard({ post }: { post: any }) {
+  return (
+    <article className="border-2 border-slate-700 bg-slate-900 p-6 hover:border-cyan-400 transition">
+      {post.frontmatter.image && (
+        <img
+          src={post.frontmatter.image}
+          alt={post.frontmatter.title}
+          className="w-full h-48 object-cover mb-4 border-2 border-slate-800"
+        />
+      )}
+
+      <div className="flex items-center gap-2 font-mono text-xs text-zinc-500 mb-3 uppercase">
+        <time dateTime={post.frontmatter.date}>{formatDate(post.frontmatter.date)}</time>
+        <span>&gt;</span>
+        <span>{post.readingTime} min</span>
+      </div>
+
+      <h2 className="font-mono text-lg font-bold mb-3 uppercase">
+        <Link href={`/blog/${post.slug}`} className="text-cyan-400 hover:text-cyan-300 transition">
+          {post.frontmatter.title}
+        </Link>
+      </h2>
+
+      <p className="text-zinc-400 mb-4 line-clamp-3">{post.frontmatter.description}</p>
+
+      {post.frontmatter.tags && <TagList tags={post.frontmatter.tags} variant="minimal" />}
+    </article>
+  )
+}
+
+export default async function TagPage({ params }: { params: Promise<{ tag: string }> }) {
+  const { tag } = await params
+  const tagInfo = await getTagInfo(tag)
+
+  if (!tagInfo) {
+    notFound()
+  }
+
+  const posts = await getPostsByTag(tag)
+  const relatedTags = await getRelatedTags(tag)
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100">
+      <div className="max-w-6xl mx-auto px-6 py-12">
+        <div className="border-4 border-cyan-800 bg-cyan-950 p-8 mb-8">
+          <div className="flex items-center justify-between flex-wrap gap-4">
+            <div>
+              <p className="font-mono text-xs text-cyan-600 uppercase tracking-widest mb-2">
+                TAG ARCHIVE
+              </p>
+              <h1 className="font-mono text-3xl font-bold uppercase mb-2">
+                <span className="text-cyan-400">#{tagInfo.name}</span>
+              </h1>
+              <p className="font-mono text-sm text-cyan-300">
+                &gt; {tagInfo.count} {tagInfo.count === 1 ? 'DOCUMENT' : 'DOCUMENTS'}
+              </p>
+            </div>
+            <div>
+              <Link
+                href="/tags"
+                className="inline-flex items-center px-4 py-2 font-mono text-xs uppercase border-2 border-cyan-400 bg-slate-900 text-cyan-400 hover:bg-cyan-900 transition"
+              >
+                &gt; ALL TAGS
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid gap-8 lg:grid-cols-4">
+          <div className="lg:col-span-3">
+            {posts.length === 0 ? (
+              <div className="border-4 border-slate-800 bg-slate-900 p-12 text-center">
+                <p className="font-mono text-zinc-400 mb-6 uppercase">&gt; NO DOCUMENTS FOUND</p>
+                <Link
+                  href="/blog"
+                  className="inline-block px-6 py-3 font-mono text-sm uppercase border-2 border-cyan-400 bg-cyan-900 text-cyan-100 hover:bg-cyan-800 transition"
+                >
+                  &gt; VIEW ALL POSTS
+                </Link>
+              </div>
+            ) : (
+              <div className="grid gap-6">
+                {posts.map(post => (
+                  <PostCard key={post.slug} post={post} />
+                ))}
+              </div>
+            )}
+          </div>
+
+          <aside className="lg:col-span-1 space-y-6">
+            {relatedTags.length > 0 && (
+              <div className="border-2 border-slate-700 bg-slate-900 p-6">
+                <div className="border-b-2 border-slate-700 pb-3 mb-4">
+                  <h2 className="font-mono text-sm font-bold uppercase text-cyan-400">
+                    RELATED TAGS
+                  </h2>
+                </div>
+                <div className="space-y-2">
+                  {relatedTags.map(tag => (
+                    <Link
+                      key={tag.slug}
+                      href={`/tags/${tag.slug}`}
+                      className="flex items-center justify-between p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition"
+                    >
+                      <span className="font-mono text-xs uppercase text-zinc-300">#{tag.name}</span>
+                      <span className="font-mono text-xs text-zinc-500">[{tag.count}]</span>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="border-2 border-slate-700 bg-slate-900 p-6">
+              <div className="border-b-2 border-slate-700 pb-3 mb-4">
+                <h2 className="font-mono text-sm font-bold uppercase text-cyan-400">QUICK NAV</h2>
+              </div>
+              <div className="space-y-2">
+                <Link
+                  href="/blog"
+                  className="block p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition font-mono text-xs uppercase"
+                >
+                  &gt; ALL POSTS
+                </Link>
+                <Link
+                  href="/tags"
+                  className="block p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition font-mono text-xs uppercase"
+                >
+                  &gt; ALL TAGS
+                </Link>
+                <Link
+                  href="/"
+                  className="block p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition font-mono text-xs uppercase"
+                >
+                  &gt; HOME
+                </Link>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  )
+}

app/[locale]/tags/layout.tsx

@@ -0,0 +1,16 @@
+import { Metadata } from 'next'
+import { Navbar } from '@/components/blog/navbar'
+
+export const metadata: Metadata = {
+  title: 'Tag-uri',
+  description: 'Explorează articolele după tag-uri',
+}
+
+export default function TagsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  )
+}

app/[locale]/tags/page.tsx

@@ -0,0 +1,142 @@
+import { Metadata } from 'next'
+import {Link} from '@/src/i18n/navigation'
+import { getAllTags, getTagCloud } from '@/lib/tags'
+import { TagCloud } from '@/components/blog/tag-cloud'
+import { TagBadge } from '@/components/blog/tag-badge'
+import {setRequestLocale} from 'next-intl/server'
+
+export const metadata: Metadata = {
+  title: 'Tag-uri',
+  description: 'Explorează articolele după tag-uri',
+}
+
+type Props = {
+  params: Promise<{locale: string}>
+}
+
+export default async function TagsPage({params}: Props) {
+  const {locale} = await params
+  setRequestLocale(locale)
+  const allTags = await getAllTags()
+  const tagCloud = await getTagCloud()
+
+  if (allTags.length === 0) {
+    return (
+      <div className="min-h-screen bg-slate-950 text-slate-100">
+        <div className="max-w-6xl mx-auto px-6 py-12">
+          <div className="border-4 border-slate-800 bg-slate-900 p-12 text-center">
+            <h1 className="font-mono text-3xl font-bold uppercase mb-4 text-cyan-400">
+              TAG DATABASE
+            </h1>
+            <p className="font-mono text-zinc-400 mb-8">&gt; NO TAGS AVAILABLE</p>
+            <Link
+              href="/blog"
+              className="inline-block px-6 py-3 font-mono text-sm uppercase border-2 border-cyan-400 bg-cyan-900 text-cyan-100 hover:bg-cyan-800 transition"
+            >
+              &gt; VIEW ALL POSTS
+            </Link>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const groupedTags = allTags.reduce(
+    (acc, tag) => {
+      const firstLetter = tag.name[0].toUpperCase()
+      if (!acc[firstLetter]) {
+        acc[firstLetter] = []
+      }
+      acc[firstLetter].push(tag)
+      return acc
+    },
+    {} as Record<string, typeof allTags>
+  )
+
+  const sortedLetters = Object.keys(groupedTags).sort()
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100">
+      <div className="max-w-6xl mx-auto px-6 py-12">
+        <div className="border-4 border-slate-800 bg-slate-900 p-8 mb-8">
+          <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-2">
+            DOCUMENT TYPE: TAG DATABASE
+          </p>
+          <h1 className="font-mono text-4xl font-bold uppercase text-cyan-400 mb-4">
+            TAG REGISTRY
+          </h1>
+          <p className="font-mono text-lg text-zinc-400">&gt; TOTAL TAGS: {allTags.length}</p>
+        </div>
+
+        <section className="mb-12">
+          <div className="border-2 border-slate-700 bg-slate-900 p-6 mb-2">
+            <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-4">
+              SECTION: TAG CLOUD VISUALIZATION
+            </p>
+          </div>
+          <div className="border-2 border-slate-700 bg-zinc-950 p-8">
+            <TagCloud tags={tagCloud} />
+          </div>
+        </section>
+
+        <section className="mb-12">
+          <div className="border-2 border-slate-700 bg-slate-900 p-6 mb-2">
+            <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest">
+              SECTION: ALPHABETICAL INDEX
+            </p>
+          </div>
+          <div className="space-y-8">
+            {sortedLetters.map(letter => (
+              <div key={letter}>
+                <div className="border-2 border-cyan-700 bg-cyan-950 p-4 mb-4">
+                  <h3 className="font-mono text-xl font-bold text-cyan-400 uppercase">
+                    &gt; [{letter}]
+                  </h3>
+                </div>
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                  {groupedTags[letter].map(tag => (
+                    <Link
+                      key={tag.slug}
+                      href={`/tags/${tag.slug}`}
+                      className="flex items-center justify-between p-4 border-2 border-slate-700 bg-slate-900 hover:border-cyan-400 hover:bg-slate-800 transition"
+                    >
+                      <span className="font-mono text-sm uppercase">#{tag.name}</span>
+                      <TagBadge count={tag.count} />
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="border-4 border-cyan-800 bg-cyan-950 p-8">
+          <div className="mb-6">
+            <p className="font-mono text-xs text-cyan-600 uppercase tracking-widest mb-2">
+              DOCUMENT STATISTICS
+            </p>
+            <h2 className="font-mono text-2xl font-bold uppercase text-cyan-400">TAG METRICS</h2>
+          </div>
+          <div className="grid gap-6 sm:grid-cols-3">
+            <div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
+              <div className="font-mono text-3xl font-bold text-cyan-400">{allTags.length}</div>
+              <div className="font-mono text-xs text-zinc-400 uppercase mt-2">TOTAL TAGS</div>
+            </div>
+            <div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
+              <div className="font-mono text-3xl font-bold text-cyan-400">
+                {Math.max(...allTags.map(t => t.count))}
+              </div>
+              <div className="font-mono text-xs text-zinc-400 uppercase mt-2">MAX POSTS/TAG</div>
+            </div>
+            <div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
+              <div className="font-mono text-3xl font-bold text-cyan-400">
+                {Math.round(allTags.reduce((sum, t) => sum + t.count, 0) / allTags.length)}
+              </div>
+              <div className="font-mono text-xs text-zinc-400 uppercase mt-2">AVG POSTS/TAG</div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}