فرانت‌اند: نسخه انگلیسی با مسیر /en/ — مسیریابی دوزبانه، دیکشنری رابط، بومی‌سازی داده، تغییر زبان در هدر، ویرایش انگلیسی در پنل و پشتیبانی LTR

frontend/src/pages/Blog.tsx

@@ -6,22 +6,25 @@ import { Reveal } from '../components/Reveal'
 import { ArticleCard } from '../components/ArticleCard'
 import { Newsletter } from '../components/home/Newsletter'
 import { useSite } from '../api'
+import { useLang } from '../i18n/lang'
 import { EditableItem } from '../admin/Editable'
 import { useAdmin } from '../admin/AdminContext'
 import { PlusIcon } from 'lucide-react'
 
 function DraftBadge({ className = '' }: { className?: string }) {
+  const { t } = useLang()
   return (
     <span
       className={`border border-amber-400/60 bg-ink/90 px-2 py-1 text-xs font-bold text-amber-300 ${className}`}
     >
-      پیش‌نویس
+      {t('draft')}
     </span>
   )
 }
 
 export function Blog() {
   const { articles } = useSite()
+  const { t, href } = useLang()
   const { isEditMode } = useAdmin()
 
   // دکمه «نوشتن مقاله جدید» فقط در حالت ویرایش ادمین دیده می‌شود
@@ -32,7 +35,7 @@ export function Blog() {
       className="inline-flex items-center gap-2 bg-copper px-6 py-3 text-sm font-bold text-char transition-transform duration-200 hover:scale-105"
     >
       <PlusIcon className="h-4 w-4" />
-      نوشتن مقاله جدید
+      {t('writeNewArticle')}
     </Link>
   ) : null
 
@@ -41,11 +44,11 @@ export function Blog() {
     return (
       <>
         <PageHero pageKey="blog" />
-        <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
+        <section className="bg-ink py-24 lg:py-32" aria-label={t('articlesAria')}>
           <div className="mx-auto max-w-site px-6 text-center lg:px-10">
-            <h2 className="text-3xl font-bold text-ivory">هنوز مقاله‌ای منتشر نشده است</h2>
+            <h2 className="text-3xl font-bold text-ivory">{t('blogEmpty')}</h2>
             <p className="mt-4 text-sm font-light text-ivory/60">
-              به‌زودی نخستین نوشته‌های ما اینجا منتشر می‌شود.
+              {t('blogEmptyText')}
             </p>
             <div className="mt-8 flex justify-center">{writeButton}</div>
           </div>
@@ -61,28 +64,28 @@ export function Blog() {
     <>
       <PageHero pageKey="blog" />
 
-      <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
+      <section className="bg-ink py-24 lg:py-32" aria-label={t('articlesAria')}>
         <div className="mx-auto max-w-site px-6 lg:px-10">
           <div className="mb-10 flex justify-start">{writeButton}</div>
           <Reveal>
             <EditableItem resource="articles" item={featured} editHref={`/admin/write/${featured.id}`}>
             <Link
-              to={`/blog/${featured.slug}`}
+              to={href(`/blog/${featured.slug}`)}
               className="group grid items-stretch border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift lg:grid-cols-2"
-              aria-label={`خواندن مقاله ${featured.title}`}
+              aria-label={`${t('readArticlePrefix')} ${featured.title}`}
             >
               <div className="overflow-hidden">
                 <img
                   src={featured.image}
-                  alt={`تصویر مقاله ${featured.title}`}
+                  alt={`${t('articleImagePrefix')} ${featured.title}`}
                   className="h-full min-h-[20rem] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
                 />
               </div>
               <div className="flex flex-col justify-center p-8 lg:p-12">
                 <p className="text-xs font-light text-copper">
-                  مقاله ویژه — {featured.category}
+                  {t('featuredArticle')} — {featured.category}
                   {featured.status === 'draft' && (
-                    <DraftBadge className="mr-3 inline-block align-middle" />
+                    <DraftBadge className="inline-block align-middle ltr:ml-3 rtl:mr-3" />
                   )}
                 </p>
                 <h2 className="mt-6 text-2xl font-bold leading-[2.2] md:leading-[2.2] text-ivory transition-colors duration-200 ease-lux group-hover:text-copper md:text-3xl">
@@ -98,8 +101,8 @@ export function Blog() {
                     </span>
                   </span>
                   <span className="flex items-center gap-2 text-copper">
-                    ادامه مطلب
-                    <ArrowLeftIcon className="h-3.5 w-3.5 transition-transform duration-200 ease-lux group-hover:-translate-x-1" />
+                    {t('readMore')}
+                    <ArrowLeftIcon className="h-3.5 w-3.5 ltr:-scale-x-100 transition-transform duration-200 ease-lux rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1" />
                   </span>
                 </div>
               </div>
@@ -113,7 +116,7 @@ export function Blog() {
                 <EditableItem resource="articles" item={article} className="h-full" editHref={`/admin/write/${article.id}`}>
                   <div className="relative h-full">
                     {article.status === 'draft' && (
-                      <DraftBadge className="absolute left-3 top-3 z-10" />
+                      <DraftBadge className="absolute top-3 ltr:left-3 rtl:right-3 z-10" />
                     )}
                     <ArticleCard article={article} />
                   </div>