📝 update breadcrumbs , nav for mobile and homepage translations

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

@@ -1,11 +1,16 @@
+'use client'
+
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+import { useTranslations } from 'next-intl'
 
 export default function AboutBreadcrumb() {
+  const t = useTranslations('Breadcrumbs')
+
   return (
     <Breadcrumbs
       items={[
         {
-          label: 'Despre',
+          label: t('about'),
           href: '/about',
           current: true,
         },

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

@@ -1,5 +1,6 @@
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
 import { getPostBySlug } from '@/lib/markdown'
+import { getTranslations } from 'next-intl/server'
 
 interface BreadcrumbItem {
   label: string
@@ -7,28 +8,19 @@ interface BreadcrumbItem {
   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 t = await getTranslations('Breadcrumbs')
   const { slug } = await params
   const slugPath = slug.join('/')
   const post = await getPostBySlug(slugPath)
 
   const items: BreadcrumbItem[] = [
     {
-      label: 'Blog',
+      label: t('blog'),
       href: '/blog',
     },
   ]
@@ -36,8 +28,9 @@ export default async function BlogPostBreadcrumb({
   if (slug.length > 1) {
     for (let i = 0; i < slug.length - 1; i++) {
       const segmentPath = slug.slice(0, i + 1).join('/')
+      const dirName = slug[i]
       items.push({
-        label: formatDirectoryName(slug[i]),
+        label: t(dirName) || dirName.charAt(0).toUpperCase() + dirName.slice(1),
         href: `/blog/${segmentPath}`,
       })
     }

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

@@ -1,11 +1,16 @@
+'use client'
+
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+import { useTranslations } from 'next-intl'
 
 export default function BlogBreadcrumb() {
+  const t = useTranslations('Breadcrumbs')
+
   return (
     <Breadcrumbs
       items={[
         {
-          label: 'Blog',
+          label: t('blog'),
           href: '/blog',
           current: true,
         },

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

@@ -1,6 +1,8 @@
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+import { getTranslations } from 'next-intl/server'
 
 export default async function TagBreadcrumb({ params }: { params: Promise<{ tag: string }> }) {
+  const t = await getTranslations('Breadcrumbs')
   const { tag } = await params
   const tagName = tag
     .split('-')
@@ -11,7 +13,7 @@ export default async function TagBreadcrumb({ params }: { params: Promise<{ tag:
     <Breadcrumbs
       items={[
         {
-          label: 'Tag-uri',
+          label: t('tags'),
           href: '/tags',
         },
         {

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

@@ -1,11 +1,16 @@
+'use client'
+
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
+import { useTranslations } from 'next-intl'
 
 export default function TagsBreadcrumb() {
+  const t = useTranslations('Breadcrumbs')
+
   return (
     <Breadcrumbs
       items={[
         {
-          label: 'Tag-uri',
+          label: t('tags'),
           href: '/tags',
           current: true,
         },

app/[locale]/page.tsx

@@ -2,7 +2,7 @@ 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 { HeroHeader } from '@/components/layout/hero-header'
 import { setRequestLocale, getTranslations } from 'next-intl/server'
 
 type Props = {
@@ -13,7 +13,7 @@ export default async function HomePage({ params }: Props) {
   const { locale } = await params
   setRequestLocale(locale)
   const t = await getTranslations('Home')
-  const tNav = await getTranslations('Navigation')
+  // const tNav = await getTranslations('Navigation')
 
   const allPosts = await getAllPosts()
   const featuredPosts = allPosts.slice(0, 6)
@@ -29,29 +29,7 @@ export default async function HomePage({ params }: Props) {
         <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">
-                  {t('terminalVersion')}
-                </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"
-                >
-                  [{tNav('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"
-                >
-                  [{tNav('about')}]
-                </Link>
-                <ThemeToggle />
-              </div>
-            </div>
+            <HeroHeader />
 
             <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">