📄 Huge intl feature

components/blog/blog-card.tsx

@@ -1,4 +1,5 @@
-import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { Link } from '@/i18n/navigation'
 import Image from 'next/image'
 import { Post } from '@/lib/types/frontmatter'
 import { formatDate } from '@/lib/utils'
@@ -9,6 +10,7 @@ interface BlogCardProps {
 }
 
 export function BlogCard({ post, variant }: BlogCardProps) {
+  const t = useTranslations('BlogPost')
   const hasImage = !!post.frontmatter.image
 
   if (!hasImage || variant === 'text-only') {
@@ -38,7 +40,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
             ))}
           </div>
           <span className="inline-flex items-center font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors">
-            &gt; READ [{post.readingTime}MIN]
+            &gt; {t('readingTime', {minutes: post.readingTime})}
           </span>
         </article>
       </Link>
@@ -82,7 +84,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
                 ))}
               </div>
               <span className="inline-flex items-center font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors">
-                &gt; READ [{post.readingTime}MIN]
+                &gt; {t('readingTime', {minutes: post.readingTime})}
               </span>
             </div>
           </div>
@@ -127,7 +129,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
             ))}
           </div>
           <span className="inline-flex items-center font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors">
-            &gt; READ [{post.readingTime}MIN]
+            &gt; {t('readingTime', {minutes: post.readingTime})}
           </span>
         </div>
       </article>

components/blog/markdown-renderer.tsx

@@ -6,7 +6,8 @@ import rehypeSanitize from 'rehype-sanitize'
 import rehypeRaw from 'rehype-raw'
 import { OptimizedImage } from './OptimizedImage'
 import { CodeBlock } from './code-block'
-import Link from 'next/link'
+import { useLocale } from 'next-intl'
+import { Link } from '@/i18n/navigation'
 
 interface MarkdownRendererProps {
   content: string
@@ -14,6 +15,7 @@ interface MarkdownRendererProps {
 }
 
 export default function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
+  const locale = useLocale()
   return (
     <div className={`prose prose-invert prose-zinc max-w-none ${className}`}>
       <ReactMarkdown

components/blog/navbar.tsx

@@ -1,10 +1,13 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { Link } from '@/i18n/navigation'
 import { ThemeToggle } from '@/components/theme-toggle'
+import LanguageSwitcher from '@/components/layout/LanguageSwitcher'
 
 export function Navbar() {
+  const t = useTranslations('Navigation')
   const [isVisible, setIsVisible] = useState(true)
   const [lastScrollY, setLastScrollY] = useState(0)
 
@@ -39,10 +42,10 @@ export function Navbar() {
               className="font-mono text-sm uppercase tracking-wider transition-colors cursor-pointer"
               style={{ color: 'var(--neon-cyan)' }}
             >
-              < HOME
+              < {t('home')}
             </Link>
             <span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider">
-              // <span style={{ color: 'var(--neon-pink)' }}>BLOG</span> ARCHIVE
+              // <span style={{ color: 'var(--neon-pink)' }}>{t('blog')}</span> ARCHIVE
             </span>
           </div>
           <div className="flex items-center gap-6">
@@ -50,15 +53,16 @@ export function Navbar() {
               href="/about"
               className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
             >
-              [ABOUT]
+              [{t('about')}]
             </Link>
             <Link
               href="/blog"
               className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
             >
-              [BLOG]
+              [{t('blog')}]
             </Link>
-             <ThemeToggle />
+            <ThemeToggle />
+            <LanguageSwitcher />
           </div>
         </div>
       </div>

components/blog/popular-tags.tsx

@@ -3,7 +3,7 @@ import { getPopularTags } from '@/lib/tags'
 import { TagBadge } from './tag-badge'
 
 export async function PopularTags({ limit = 5 }: { limit?: number }) {
-  const tags = await getPopularTags(limit)
+  const tags = await getPopularTags("en", limit)
 
   if (tags.length === 0) return null
 

components/blog/reading-progress.tsx

@@ -30,9 +30,9 @@ export function ReadingProgress() {
         />
       </div>
 
-      <div className="fixed top-4 right-4 z-50 px-3 py-1.5 bg-[rgb(var(--bg-primary))] border-2 border-[var(--neon-cyan)] text-xs font-mono font-bold text-[var(--neon-cyan)] relative">
-        <span className="relative z-10">[{Math.round(progress)}%]</span>
-      </div>
+      {/* <div className="fixed left-13 z-50 m-3 px-3 py-1.5 bg-[rgb(var(--bg-primary))] border-2 border-[var(--neon-cyan)] text-xs font-mono font-bold text-[var(--neon-cyan)]">
+        <span className="left-4 z-10">[{Math.round(progress)}%]</span>
+      </div> */}
     </>
   )
 }

components/blog/sticky-footer.tsx

@@ -43,17 +43,12 @@ export function StickyFooter({ url, title }: StickyFooterProps) {
       className={`
         fixed bottom-0 left-0 right-0 z-40
         bg-black/98 backdrop-blur-sm
-        border-t-4 border-[var(--neon-magenta)]
+        border-t-1 border-[var(--neon-magenta)]
         transition-transform duration-200 ease-in-out
         ${isVisible ? 'translate-y-0' : 'translate-y-full'}
       `}
-      style={{
-        boxShadow: isVisible
-          ? '0 -8px 30px rgba(155,90,142,0.5), inset 0 4px 20px rgba(155,90,142,0.1)'
-          : 'none',
-      }}
     >
-      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--neon-magenta)] to-transparent opacity-70" />
+      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent to-transparent opacity-70" />
 
       <div className="max-w-7xl mx-auto px-6 py-4 relative">
         <div className="flex items-center justify-between">

components/blog/tag-cloud.tsx

@@ -1,4 +1,5 @@
-import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { Link } from '@/i18n/navigation'
 import { TagInfo } from '@/lib/tags'
 
 interface TagCloudProps {
@@ -6,6 +7,7 @@ interface TagCloudProps {
 }
 
 export function TagCloud({ tags }: TagCloudProps) {
+  const t = useTranslations('Tags')
   const sizeClasses = {
     sm: 'text-xs opacity-70',
     md: 'text-sm',
@@ -26,7 +28,7 @@ export function TagCloud({ tags }: TagCloudProps) {
             hover:text-cyan-400
             transition-colors
           `}
-          title={`${tag.count} ${tag.count === 1 ? 'articol' : 'articole'}`}
+          title={t('postsWithTag', {count: tag.count, tag: tag.name})}
         >
           #{tag.name}
         </Link>