🖼️ update blog post styles

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

@@ -3,6 +3,10 @@ import { notFound } from 'next/navigation'
 import Link from 'next/link'
 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'
 
 export async function generateStaticParams() {
   const posts = await getAllPosts()
@@ -39,41 +43,19 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
   }
 }
 
-function AuthorInfo({ author, date }: { author: string; date: string }) {
-  return (
-    <div className="flex items-center space-x-4 py-6 border-y border-gray-200 dark:border-gray-700">
-      <div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
-        <span className="text-xl font-bold text-primary-600 dark:text-primary-400">
-          {author.charAt(0).toUpperCase()}
-        </span>
-      </div>
-      <div>
-        <p className="font-semibold">{author}</p>
-        <p className="text-sm text-gray-500">
-          Publicat {formatRelativeDate(date)} • {formatDate(date)}
-        </p>
-      </div>
-    </div>
-  )
-}
+function extractHeadings(content: string) {
+  const headingRegex = /^(#{2,3})\s+(.+)$/gm
+  const headings: { id: string; text: string; level: number }[] = []
+  let match
 
-function RelatedPosts({ posts }: { posts: any[] }) {
-  if (posts.length === 0) return null
+  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 (
-    <section className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
-      <h2 className="text-2xl font-bold mb-6">Articole similare</h2>
-      <div className="grid gap-6 md:grid-cols-3">
-        {posts.map((post) => (
-          <Link key={post.slug} href={`/blog/${post.slug}`} className="block p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-lg transition">
-            <h3 className="font-semibold mb-2 line-clamp-2">{post.frontmatter.title}</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{post.frontmatter.description}</p>
-            <p className="text-xs text-gray-500 mt-2">{formatDate(post.frontmatter.date)}</p>
-          </Link>
-        ))}
-      </div>
-    </section>
-  )
+  return headings
 }
 
 export default async function BlogPostPage({ params }: { params: Promise<{ slug: string[] }> }) {
@@ -86,44 +68,118 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
   }
 
   const relatedPosts = await getRelatedPosts(slugPath)
+  const headings = extractHeadings(post.content)
+  const fullUrl = `https://yourdomain.com/blog/${slugPath}`
 
   return (
-    <article className="max-w-4xl mx-auto">
-      <header className="mb-8">
-        {post.frontmatter.image && (
-          <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-64 md:h-96 object-cover rounded-lg mb-8" />
-        )}
-        <h1 className="text-4xl md:text-5xl font-bold mb-4">{post.frontmatter.title}</h1>
-        <p className="text-xl text-gray-600 dark:text-gray-400 mb-6">{post.frontmatter.description}</p>
-        {post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
-          <div className="flex flex-wrap gap-2 mb-6">
-            {post.frontmatter.tags.map((tag: string) => (
-              <Link key={tag} href={`/tags/${tag.toLowerCase().replace(/\s+/g, '-')}`} className="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 rounded-full text-sm hover:bg-primary-200 dark:hover:bg-primary-800 transition">
-                #{tag}
-              </Link>
-            ))}
-          </div>
-        )}
-        <AuthorInfo author={post.frontmatter.author} date={post.frontmatter.date} />
-      </header>
+    <>
+      <ReadingProgress />
 
-      <div className="prose dark:prose-invert max-w-none">
-        <div className="flex items-center justify-between text-sm text-gray-500 mb-6">
-          <span>Timp estimat de citire: {post.readingTime} minute</span>
+      <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; CLASSIFIED_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) => (
+                    <span
+                      key={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}
+                    </span>
+                  ))}
+                </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 dangerouslySetInnerHTML={{ __html: post.content }} />
       </div>
 
-      <nav className="flex justify-between items-center mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
-        <Link href="/blog" className="flex items-center text-primary-600 hover:text-primary-700 transition">
-          <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>
-          Înapoi la blog
-        </Link>
-      </nav>
-
-      <RelatedPosts posts={relatedPosts} />
-    </article>
+      <StickyFooter url={fullUrl} title={post.frontmatter.title} />
+    </>
   )
 }

app/blog/blog-client.tsx

@@ -65,22 +65,21 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
   }
 
   return (
-    <div className="min-h-screen bg-zinc-900">
-      <Navbar />
+    <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-4 border-cyan-400 pl-6 mb-12">
-          <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-2">
+        <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">
             DATABASE QUERY // SEARCH RESULTS
           </p>
-          <h1 className="text-4xl md:text-6xl font-mono font-bold text-zinc-100 uppercase tracking-tight">
+          <h1 className="text-4xl md:text-6xl font-mono font-bold text-[rgb(var(--text-primary))] uppercase tracking-tight">
             &gt; BLOG ARCHIVE_
           </h1>
         </div>
 
         {/* Search Bar */}
-        <div className="border-4 border-slate-700 bg-slate-900 p-6 mb-8">
+        <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}
@@ -109,7 +108,7 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
 
         {/* Results Count */}
         <div className="mb-6">
-          <p className="font-mono text-sm text-zinc-500 uppercase">
+          <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase">
             FOUND {filteredAndSortedPosts.length} {filteredAndSortedPosts.length === 1 ? 'POST' : 'POSTS'}
           </p>
         </div>
@@ -131,8 +130,8 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
             })}
           </div>
         ) : (
-          <div className="border-4 border-slate-700 bg-slate-900 p-12 text-center">
-            <p className="font-mono text-lg text-zinc-400 uppercase">
+          <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">
               NO POSTS FOUND // TRY DIFFERENT SEARCH TERMS
             </p>
           </div>
@@ -140,12 +139,12 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
 
         {/* Pagination */}
         {totalPages > 1 && (
-          <div className="border-4 border-slate-700 bg-slate-900 p-6">
+          <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-2 border-slate-700 text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed hover:border-cyan-400 hover:text-cyan-400 transition-colors cursor-pointer"
+                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>
@@ -154,10 +153,10 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
                   <button
                     key={page}
                     onClick={() => setCurrentPage(page)}
-                    className={`w-12 h-12 font-mono text-sm border-2 transition-colors cursor-pointer ${
+                    className={`w-12 h-12 font-mono text-sm border transition-colors cursor-pointer ${
                       currentPage === page
-                        ? 'bg-cyan-400 border-cyan-400 text-slate-900'
-                        : 'border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400'
+                        ? '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')}
@@ -167,7 +166,7 @@ export default function BlogPageClient({ posts, allTags }: BlogPageClientProps)
               <button
                 onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                 disabled={currentPage === totalPages}
-                className="px-6 py-3 font-mono text-sm uppercase border-2 border-slate-700 text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed hover:border-cyan-400 hover:text-cyan-400 transition-colors cursor-pointer"
+                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>

app/blog/layout.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from 'next'
+import { Navbar } from '@/components/blog/navbar'
 
 export const metadata: Metadata = {
   title: 'Blog',
@@ -6,5 +7,10 @@ export const metadata: Metadata = {
 }
 
 export default function BlogLayout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  )
 }